MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    [MMM-Rainbow] Animated text color transition

    Entertainment
    8
    34
    6354
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      Seann Module Developer last edited by Seann

      MMM-Rainbow - Animated text color transition.


      Update info: As suggested, I have added the option to assign the random colors to specific modules or to all modules. See the config below to see how to use.

      Preview

      Modular

      Non-Modular

      Installation

      Installation is very simple, just clone the git into your modules directory then add the module to your config.

      cd ~/MagicMirror/modules
      git clone https://github.com/aSeann/MMM-Rainbow
      

      Using the module

      To use this module, add the following configuration block to the modules array in the config/config.js file:

      var config = {
          modules: [
              {
      		module: "MMM-Rainbow",
      		/*	Position not required as it has no UI.	*/
      		config: {
      			fadeTime: 1500,		//	Duration in milliseconds it takes for the color to fade.
      			nextColor: 1500,	//	Duration in milliseconds until the next random color is generated and set.
      			modular: false,		//	
      			moduleList: [		//	Only required if modular is true.
      				"MMM-iClock",
      				"MMM-Showtimes"
      			]
      		}
      	},
          ]
      }
      
      Mykle1 1 Reply Last reply Reply Quote 5
      • Mykle1
        Mykle1 Project Sponsor Module Developer @Seann last edited by

        @seann

        Kinda cool. 🙂

        Create a working config
        How to add modules

        S 1 Reply Last reply Reply Quote 0
        • S
          Seann Module Developer @Mykle1 last edited by

          @mykle1 Thanks, I didn’t actually expect any response to this. I have started experimenting with other things though, so expect to see a few more posts from me. 😀

          Mykle1 1 Reply Last reply Reply Quote 0
          • Mykle1
            Mykle1 Project Sponsor Module Developer @Seann last edited by

            @seann

            The more, the merrier. When I started this I never expected anyone to even look at my work. You never know what others might find interesting. My motto: Have fun!

            Create a working config
            How to add modules

            1 Reply Last reply Reply Quote 1
            • G
              ganget last edited by

              I really like the idea of this module, I’m searching for the possibility to make only my clock have this effect and maybe a gradient kind of color shift. Can you help me with this idea?

              S cowboysdude 2 Replies Last reply Reply Quote 0
              • S
                Seann Module Developer @ganget last edited by

                @ganget Sure man, seems simple enough. You could always customize the clock module, or recreate your own and just add a class name to the clock, then alter MMM-Rainbow.js to only change the css for that module. I cheated when creating this module by using jQuery so it’s really simple to mess with. But if you do need any help, feel free to give me a message.

                G 1 Reply Last reply Reply Quote 1
                • BKeyport
                  BKeyport Module Developer last edited by

                  Love the concept, actually. Would love to see it limited to the user’s choice of modules, however.

                  The "E" in "Javascript" stands for "Easy"

                  Mykle1 1 Reply Last reply Reply Quote 0
                  • Mykle1
                    Mykle1 Project Sponsor Module Developer @BKeyport last edited by

                    MMM-NOAA3 has been doing this for some time now, as an option

                    Create a working config
                    How to add modules

                    BKeyport 1 Reply Last reply Reply Quote 1
                    • BKeyport
                      BKeyport Module Developer @Mykle1 last edited by

                      @mykle1 doing what? I was referring to the original rainbow color. Would be cool to apply it to modules of choice.

                      The "E" in "Javascript" stands for "Easy"

                      S 1 Reply Last reply Reply Quote 0
                      • Mykle1
                        Mykle1 Project Sponsor Module Developer last edited by

                        @bkeyport said in [MMM-Rainbow] Animated text color transition:

                        doing what? I was referring to the original rainbow color.

                        Lets see. The topic states “[MMM-Rainbow] Animated text color transition” so I guess I was talking about that. Only noticed you because you mentioned me directly. I think @seann has done a fantastic job here. Joined the forum 8 days ago and already he’s contributing and offering his
                        help to others. He and I are going get along just fine. 🙂

                        Create a working config
                        How to add modules

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 1 / 4
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy