• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

[MMM-Rainbow] Animated text color transition

Scheduled Pinned Locked Moved Entertainment
34 Posts 8 Posters 14.3k Views 8 Watching
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 Offline
    Seann Module Developer
    last edited by Seann Jan 24, 2019, 12:06 AM Jan 21, 2019, 6:36 PM

    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"
    			]
    		}
    	},
        ]
    }
    
    M 1 Reply Last reply Jan 21, 2019, 11:11 PM Reply Quote 6
    • M Offline
      Mykle1 Project Sponsor Module Developer @Seann
      last edited by Jan 21, 2019, 11:11 PM

      @seann

      Kinda cool. :-)

      Create a working config
      How to add modules

      S 1 Reply Last reply Jan 22, 2019, 2:17 AM Reply Quote 0
      • S Offline
        Seann Module Developer @Mykle1
        last edited by Jan 22, 2019, 2:17 AM

        @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. :grinning_face:

        M 1 Reply Last reply Jan 22, 2019, 2:28 AM Reply Quote 0
        • M Offline
          Mykle1 Project Sponsor Module Developer @Seann
          last edited by Jan 22, 2019, 2:28 AM

          @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 Offline
            ganget
            last edited by Jan 23, 2019, 12:39 AM

            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 C 2 Replies Last reply Jan 23, 2019, 2:36 AM Reply Quote 0
            • S Offline
              Seann Module Developer @ganget
              last edited by Jan 23, 2019, 2:36 AM

              @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 Jan 24, 2019, 11:12 PM Reply Quote 1
              • B Offline
                BKeyport Module Developer
                last edited by Jan 23, 2019, 2:52 AM

                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"

                M 1 Reply Last reply Jan 23, 2019, 3:09 AM Reply Quote 0
                • M Offline
                  Mykle1 Project Sponsor Module Developer @BKeyport
                  last edited by Jan 23, 2019, 3:09 AM

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

                  Create a working config
                  How to add modules

                  B 1 Reply Last reply Jan 23, 2019, 10:40 AM Reply Quote 1
                  • B Offline
                    BKeyport Module Developer @Mykle1
                    last edited by Jan 23, 2019, 10:40 AM

                    @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 Jan 23, 2019, 4:38 PM Reply Quote 0
                    • M Offline
                      Mykle1 Project Sponsor Module Developer
                      last edited by Jan 23, 2019, 12:22 PM

                      @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
                      1 / 4
                      • First post
                        6/34
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy