• 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.

Ability to change color by physical button?

Scheduled Pinned Locked Moved Unsolved Requests
13 Posts 3 Posters 7.8k 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 Jun 17, 2016, 6:09 PM

    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
    • S Offline
      strawberry 3.141 Project Sponsor Module Developer
      last edited by Jun 17, 2016, 8:27 PM

      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
      • E Offline
        EoF
        last edited by EoF Jun 17, 2016, 10:11 PM Jun 17, 2016, 10:09 PM

        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
        2 / 2
        • First post
          12/13
          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