Categories

• Announcements

  Announcements regarding the MagicMirror software and forum.

  MagicMirror

  Forum
  34
  Topics
  363
  Posts

  

  It’s vuepress. (https://vuepress.vuejs.org), it converts .md files to a static website. The sourcecode is on GitHub. Whenever a change is pushed tot the repository, my webserver pulls the update and generates the new static files.
• Core System

  Discuss the MagicMirror² core framework.

  Upcoming Features

  Feature Requests

  Bug Hunt

  Tutorials
  303
  Topics
  2248
  Posts

  K

  Hello, thank you for the answer, by dint of searching … it’s gone but I still have errors and even if I make orders as he asks git pull fix --force there is always stuff out of date but I think the main thing is done, I got a return for the download of 2.11. Thank you
• Hardware

  Anything harware related can be found here.

  Tutorials
  513
  Topics
  4945
  Posts

  

  @Lucker25 said in Building dashboard with touch controls: If I don´t find a matching display + case the alternative would be integrating this into the door of my hanging cabinet. That sounds like a very simple solution. You would just need to pull the cabinet door off the hinges, cut out a hole for the display, run a router along the inside edges if you’re feeling fancy, fabricate a bracket for the monitor and then attach the Pi & power to the inside of the door. If you’re feeling like you can make cuts within a 1/2 centimetre or so, you won’t even need a case for the monitor - just cut the opening slightly smaller than the screen size. Although you may wish to mount the Pi on the inside wall of the cabinet. Up to you.
• Modules

  Add exciting new features to your mirror.

  Showcase

  Requests

  Development

  Troubleshooting
  3483
  Topics
  33424
  Posts

  

  @thetobyde for the DOM I have created the following elements: var label = document.createElement("label"); label.className = "tasmota-switch"; label.id = "switch-" + topic; var input = document.createElement("input"); input.type = "checkbox"; input.id = "checkbox-" + topic; input.checked = this.setSwitch(topic); var span = document.createElement("span"); span.className = "slider round"; span.id = "slider-" + topic; span.onclick = function() { self.toggleSwitch(topic); }; label.appendChild(input); label.appendChild(span); there is a label (as wrapper), a (hidden) checkbox, and a span that is the actual slider. The onclick function for the slider looks like this: toggleSwitch: function(topic) { this.sendSocketNotification("TOGGLE_SWITCH", topic); console.log("Switch toggled: " + topic); }, So, rather generic. There you need to tell the api that you have toggled the switch. Also, at every DOM update you need to check the api for the switch state (see the this.setSwitch-function above). It may have been switched from another endpoint or app. The result sets the “checked” state of the hidden input. setSwitch: function(topic) { this.log("Setting switch for " + topic); var powerState = this.tasmotaData.tele[topic].STATE.POWER; return (powerState === "ON") ? true : false; }, The rest is css: /*** SWITCHES ***/ .MMM-Tasmota .tasmota-switch { float: right; position: relative; display: inline-block; width: 90px; height: 34px; } /* Hide default HTML checkbox */ .MMM-Tasmota .tasmota-switch input { opacity: 0; width: 0px; height: 0px; } /* The slider */ .MMM-Tasmota .slider { position: absolute; cursor: pointer; top: 0; left: 30px; right: 0; bottom: 0; background-color: #f00; border: 3px solid white; -webkit-transition: .2s; transition: .2s; } .MMM-Tasmota .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 3px; bottom: 1px; background-color: white; -webkit-transition: .2s; transition: .2s; } .MMM-Tasmota input:checked + .slider { background-color: #0f0; } .MMM-Tasmota input:checked + .slider:before { -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); } /* Rounded sliders */ .MMM-Tasmota .slider.round { border-radius: 34px; } .MMM-Tasmota .slider.round:before { border-radius: 50%; } I will publish all of that with my MMM-Tasmota module.
• Custom CSS

  Make your mirror your own but modifying its appearance.

  Showcase

  Development
  212
  Topics
  1448
  Posts

  S

  @nibov33070 sorry, you are still unclear… there is an entry in the css. you looked at the code and it uses the info class but if u edit the info class (to be the same as the already existing class???) it doesn’t work? in the config for the module it says this is required showImageInfo: true, https://github.com/darickc/MMM-BackgroundSlideshow
• Show your Mirror

  Share your project story with pictures.

  370
  Topics
  3751
  Posts

  

  @supersook - Your mirror looks great! Nice work. In my experience, the wood tends to expand a bit after you cut it, so it tends to push on the outside of the acrylic. While glass would be a better choice, you may wish to try opening up your tolerance by a hair. If you can get the acrylic to rest easily in the mirror, you may eliminate most of your distortion. Although it looks like you don’t have a lot of distortion going on. You’re most of the way there.
• Troubleshooting

  You have a problem with your mirror? Ask for help.

  2863
  Topics
  19395
  Posts

  S

  @M4gicD00bz yes the code crashed. hotword, alexa and assistant are tough modules to get running you should see the errors in the window where u start mm. if w pm2, the look at the output of pm2 logs
• General Discussion

  A place to talk about whatever you want.

  Forum
  834
  Topics
  5894
  Posts

  S

  @mynameisntavailable. pis dont boot a usb stick.