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

Magicmirror touchscreen tablet dashboard

Scheduled Pinned Locked Moved Show your Mirror
18 Posts 8 Posters 7.3k Views 13 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.
  • C Offline
    CobraRL_ @Axel51
    last edited by Feb 24, 2023, 5:06 AM

    @Axel51 I did a bunch of small changes to the JS like adding extra class names, adding extra wrappers, and removing the sounds because I found them annoying. The extra class names and wrappers helped me with the css. Hopefully the css variables are self-explanatory that it still makes sense.

    Let me know if you need me to clarify anything!

    Here’s the .css code

    .MMM-KitchenTimer div {
      display: grid;
    }
    
    .MMM-KitchenTimer .text {
      font-family: var(--font-primary);
      font-weight: 300;
      font-size: 12rem;
      color: var(--secondary-background-color);
      text-align: center;
      line-height: 1;
    }
    
    .MMM-KitchenTimer .paused {
      color: rgba(255, 255, 255, 0.6);
    }
    
    .MMM-KitchenTimer .button {
      font-size: 20px;
      font-weight: 300;
    
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 6rem;
      aspect-ratio: 1;
      border-radius: 100px;
    
      background-color: var(--primary-background-color);
      color: var(--primary-foreground-color);
      backdrop-filter: blur(var(--blur));
      -webkit-backdrop-filter: blur(var(--blur));
    }
    
    .MMM-KitchenTimer .list-container {
      display: flex !important;
      justify-content: center;
      gap: 1rem;
    }
    

    Here’s the .js code

    
    /* global Log, Module, moment, config */
    /* Magic Mirror
     * Module: Kitchen timers
     *
     * By Tom Short
     * MIT Licensed.
     */
    Module.register("MMM-KitchenTimer",{
        // Module config defaults.
        defaults: {
            timertext: ["1m", "5m", "20m"],
            timersecs: [60, 300, 1200],
        },
        // Define required scripts.
        getScripts: function() {
            return [];
        },
        // Define styles.
        getStyles: function() {
            return ["MMM-KitchenTimer.css"];
        },
        // Define start sequence.
        start: function() {
            Log.info("Starting module: " + this.name);
    
            // Schedule update.
            setTimeout(function() {
                self.getDom();
            }, 1000);
        },
        // Override dom generator.
        getDom: function() {
            var time = 0, startTime, interval, alarm;
            function start() {
                if (!interval) {
                    startTime = Date.now();
                    interval = setInterval(update, 1000);
                }
                display();
            }
            function pause() {
                if (interval) {
    		        timerText.className = "text paused";
                    sound.pause();
                    clearInterval(interval);
                    interval = null;
                }
            }
            function update() {
                time -= delta();
                display();
            }
            function addSeconds(value) {
                time += value;
            }
            function delta() {
                var now = Date.now(),
                    d = now - startTime;
                startTime = now;
                return d / 1000;
            }
            function stop() {
                pause();
                time = 0;
                display();
            }       
            function pad(val) {
                var str = "00";
                return str.substring(0, str.length - String(val).length) + val;
            } 
            function display() {
                var secs = Math.round(Math.abs(time % 60));
                var mins = Math.abs(Math.trunc(time / 60) % 60);
                var hours = Math.abs(Math.trunc(time / 3600));
                var sign = Math.sign(time); 
                if (time > 0) {
                    timerText.className = "text positive";
                } else if (time < 0) {
    		        timerText.className = "text negative";
                } else {
    		        timerText.className = "text";
                }
                timerText.innerHTML = 
                    (time < 0 ? "-" : "") + 
                    (hours > 0 ? hours+":" : "") +
                    pad(mins,2) + ":" + pad(secs,2);
            }
            var timerText = document.createElement("span");
            var wrapper = document.createElement("div");
    
            wrapper.appendChild(timerText);
    
            var wrapper2 = document.createElement("section");
            wrapper2.className = "list-container";
            // Create buttons
            for (var i=0; i<this.config.timertext.length; i++) {
                var el =  document.createElement("div");
                el.className = "button";
                el.innerHTML = this.config.timertext[i];
                el.counter = i;
                var self = this;
                el.addEventListener("click", function(event) {
                    addSeconds(self.config.timersecs[this.counter]);
                    start();
                }); 
                wrapper2.appendChild(el);
            }; 
            const sound = document.createElement('audio');
            sound.src = this.file("alarm.wav");
            sound.setAttribute('autoplay', true);
            sound.setAttribute('loop', true);
            sound.pause();
            const beep = document.createElement('audio');
            beep.src = this.file("beep.wav");
            beep.volume = 0.2;
            beep.pause();
            display();
            timerText.addEventListener("click", function(event) {
                if (interval) {
                    pause();
                } else if (time != 0) {
                    start();
                }
            });
            var stopButton = document.createElement("div");
            stopButton.className = "button stop";
            stopButton.innerHTML = "X";
            stopButton.addEventListener("click", stop);
            wrapper2.appendChild(stopButton);
            wrapper.appendChild(wrapper2);
            return wrapper;
        }
    });
    
    
    1 Reply Last reply Reply Quote 0
    • W Offline
      wfsaxton
      last edited by Mar 11, 2023, 3:21 PM

      Nice job on this. I was also thinking of going the tablet route with MM. I never thought of the server approach, which seems to make it a lot easier. Although I’m guessing streaming video wouldn’t work out so well (if I wanted to implement that).

      Question: How did you set up the client on the tablet? Is it just a full-screen web browser?

      C 1 Reply Last reply Mar 28, 2023, 2:53 AM Reply Quote 0
      • C Offline
        CobraRL_ @wfsaxton
        last edited by Mar 28, 2023, 2:53 AM

        @wfsaxton Yeah its just a fullscreen browser. I’ve tried doing google cast and a smart assistant on it but neither of them worked for me.

        1 Reply Last reply Reply Quote 0
        • F Offline
          frentemorao
          last edited by Apr 28, 2023, 10:28 AM

          Your project is quite interesting.
          I also have a pizero running MM on server mode and a tablet as a dashboard.

          I would like to know how you manage to move between the different screens as it is a fullscreen browser.

          Thanks in advance

          S 1 Reply Last reply Apr 28, 2023, 11:45 AM Reply Quote 0
          • S Offline
            sdetweil @frentemorao
            last edited by Apr 28, 2023, 11:45 AM

            @frentemorao he uses the MMM-Pages module which creates logical pages by showing and hiding modules in groups.

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • F Offline
              frentemorao
              last edited by Apr 28, 2023, 12:06 PM

              @sdetweil thanks for the explanation but I am afraid it’s not the answer I was waiting for…

              I understood he touches the screen to move between pages. Am I right?

              S 1 Reply Last reply Apr 28, 2023, 12:25 PM Reply Quote 0
              • S Offline
                sdetweil @frentemorao
                last edited by sdetweil Apr 28, 2023, 12:30 PM Apr 28, 2023, 12:25 PM

                @frentemorao I doubt it, pages will cycle thru, mmm-carousel can too.
                I haven’t seen a module that does touch screen swipe. I have seen swipe with additional sensors

                here’s a talk about mouse gestures in browsers
                https://gizmodo.com/how-to-use-mouse-gestures-in-chrome-edge-safari-opera-f-1848790869

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                wishmaster270W 1 Reply Last reply Apr 28, 2023, 6:47 PM Reply Quote 0
                • wishmaster270W Offline
                  wishmaster270 Module Developer @sdetweil
                  last edited by wishmaster270 Apr 28, 2023, 6:47 PM Apr 28, 2023, 6:47 PM

                  Hi,
                  you can use MMM-Touch to react to swipes. I am not sure if it works with pages but it does with the MMM-ProfileControl.

                  S F 2 Replies Last reply Apr 28, 2023, 7:06 PM Reply Quote 0
                  • S Offline
                    sdetweil @wishmaster270
                    last edited by Apr 28, 2023, 7:06 PM

                    @wishmaster270 very cool…

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • F Offline
                      frentemorao @wishmaster270
                      last edited by Apr 29, 2023, 10:07 AM

                      @wishmaster270 do you think this solution will work in a tablet considering the server is in an external rpi?

                      wishmaster270W 1 Reply Last reply Apr 29, 2023, 1:46 PM 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