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.

    Ability to change color by physical button?

    Scheduled Pinned Locked Moved Unsolved Requests
    13 Posts 3 Posters 8.0k Views 3 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
      Snoevit
      last edited by

      Thank you Strawberry with everything.
      I think i have to give this idea up tho. I have now been sitting for two days trying. But i just cant wrap my head around it. :/
      Nothing makes sense for me with JavaScript. Not a single row of code have i been able to write.
      Changing ‘fontColor’ is about my level of knowledge :P

      1 Reply Last reply Reply Quote 0
      • strawberry 3.141S Offline
        strawberry 3.141 Project Sponsor Module Developer
        last edited by

        maybe this will give you a start

        I added the following lines to MagicMirror/css/custom.css

        .male {
        	background: black;
        	color: blue;
        }
        
        .female {
        	background: white;
        	color: pink;
        }
        

        and for testing I edited the clock module (MagicMirror/modules/default/clock/clock.js) because it get’s updated every second.

        put those lines right after line 69

        if(secondsWrapper.innerHTML % 10 == 0){ /*changes class every 10 seconds, because i don't have a button i made this "hack" for testing purposes*/
        			var body = document.querySelector('body');
        			if(body.classList.contains("male")){
        				body.classList.remove("male");
        				body.classList.add("female");
        			} else {
        				body.classList.remove("female");
        				body.classList.add("male");
        			}
        		}
        

        Please create a github issue if you need help, so I can keep track

        1 Reply Last reply Reply Quote 0
        • EoFE Offline
          EoF
          last edited by EoF

          Hi… This can easily be accomplished with some javascript and css. No need to mess with hardware or anything.

          Edit: I guess I should actually read the post. You need a physical button. Disregard lol

          1 Reply Last reply Reply Quote 0
          • 1
          • 2
          • 2 / 2
          • First post
            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