• 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-HTMLBox not displaying my 1 hour countdown timer html file

Scheduled Pinned Locked Moved Unsolved Requests
18 Posts 3 Posters 3.6k 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.
  • ? Offline
    A Former User @btni
    last edited by A Former User Dec 2, 2019, 11:33 AM Dec 2, 2019, 11:31 AM

    @btni
    Try this;

    modules/MMM-MyCountDown/MMM-MyCountDown.js

    Module.register("MMM-MyCountDown", {
      defaults: {
        refreshInterval: 1000,
        targettMS : 1000 * 10, // milliseconds to alarm
      },
    
      /*
      getStyles: function() {
        // return ["MMM-MyCountDown.css"]   // If needed, you can add your css.
      },
      */
    
      getScripts: function() {
        return ["moment.js"]
      },
    
      start: function() {
        this.endTime = null
        this.timer = null
      },
    
      getDom: function() {
        var dom = document.createElement("div")
        dom.className = "CountDown_Content"
        dom.innerHTML = this.showRemain()
        return dom
      },
    
      notificationReceived: function(noti, payload, sender) {
        switch(noti) {
          case "DOM_OBJECTS_CREATED":
            this.startCountDown()
            break
          case "RESET":
            this.startCountDown(payload)
            break
        }
      },
    
      startCountDown: function(ms = null) {
        this.resetCountDown()
        ms = (ms) ? ms : this.config.targetMS
        this.endTime = moment().add(ms, "ms")
        this.refresh()
      },
    
      resetCountDown: function() {
        this.endTime = null
        clearTimeout(this.timer)
        this.timer = null
      },
    
      refresh: function() {
        this.updateDom()
        var curTime = moment()
        if (curTime.isAfter(this.endTime)) {
          this.resetCountDown()
          this.sendNotification(
            "SHOW_ALERT",
            {
              title: "MyCountDown",
              message: "CountDown ended.",
              timer: 3000,
            }
          )
        } else {
          this.timer = setTimeout(()=>{
            this.refresh()
          }, this.config.refreshInterval)
        }
      },
    
      showRemain: function() {
        if (!this.endTime) {
          return "CountDown being not set."
        } else {
          var curTime = moment()
          var remain = moment.duration(this.endTime.diff(curTime))
          var format = function (dur) {
            str = ""
            if(dur.days() > 1) str = str + Math.floor(dur.days()) + " - "
            if(dur.hours() > 1) str = str + Math.floor(dur.hours()) + ":"
            if(dur.minutes() > 1) str = str + Math.floor(dur.minutes()) + ":"
            if(dur.seconds() > 1) str = str + Math.floor(dur.seconds())
            return str
          }
          return format(remain)
        }
      },
    })
    
    

    config/config.js

    {
      module: "MMM-MyCountDown",
      position: "top_left",
      config: {
        targetMS: 1000*60*60,
      }
    }
    

    It will display like this;

    0_1575286266624_e27af3e9-4f93-4b28-a4cc-a7a4c8395192-image.png

    Of course, you can look inside and modify for your purpose.

    B 2 Replies Last reply Dec 2, 2019, 12:23 PM Reply Quote 1
    • B Offline
      btni @Guest
      last edited by Dec 2, 2019, 12:23 PM

      @Sean
      Hi Sean, I have tried putting this code in but getting a black screen. As I have played with lots of different modules and code I am going to rebuild the pi this afternoon and only put this module and code in to test.
      My idea is if my kids have built up enough brownie points to get 1hr of Tech, then I use remote.html (via MMM-Remote module) to refresh HTML or restart the MagicMirror to start a 1-hour timer on the Magic Mirror Screen above the computer desk.
      I am sure there are loads of ways to do this, but I like the clean crispness of the MagicMirror and will be building one with stocks/calendar etc for my bedroom, and possibly one for most rooms around the house (some touchscreen).
      I do want to get ways to put up an image and/or play a video to them which I have seen some modules to allow this, but the first basic thing I would like to get is this countdown timer working.

      Thanks again for your patience and help, I shall rebuild this pi this afternoon and let you know how I get on,
      Dave

      1 Reply Last reply Reply Quote 0
      • B Offline
        btni @Guest
        last edited by btni Dec 4, 2019, 3:39 PM Dec 4, 2019, 3:38 PM

        @Sean
        Hi Sean,
        I rebuild a new Pi with MM and was able to get the countdown timer showing, thank you for your help.

        However some 0 numbers dissappear and I am trying to increase the size of the font.
        I have created a css file in the module subfolder as per your instructions in the cs file. Then I have copied and edited the css info from this post https://forum.magicmirror.builders/topic/4527/change-fontsize , I doubled all values to see if it makes a difference, but the text stayed the same size. Am I looking in the right area.

        I did uncomment your line

            return ["MMM-MyCountDown.css"]   // If needed, you can add your css.
        

        Thanks
        Dave

         body {
         	
        .xsmall {
          font-size: 30px;
          line-height: 40px;
        }
        
        .small {
          font-size: 40px;
          line-height: 50px;
        }
        
        .medium {
          font-size: 60px;
          line-height: 70px;
        }
        
        .large {
          font-size: 130px;
          line-height: 130px;
        }
        
        .xlarge {
          font-size: 150px;
          line-height: 150px;
          letter-spacing: -6px;
        }
        
         }
        
        ? 1 Reply Last reply Dec 4, 2019, 4:14 PM Reply Quote 0
        • ? Offline
          A Former User @btni
          last edited by Dec 4, 2019, 4:14 PM

          @btni
          That code was just an example. so you’d better create your own. Mine was just showing that module-building is not so difficult than people’s thought.

          B 1 Reply Last reply Dec 4, 2019, 9:48 PM Reply Quote 0
          • B Offline
            btni @Guest
            last edited by Dec 4, 2019, 9:48 PM

            @Sean
            No problem, thanks for the help, :)
            D

            1 Reply Last reply Reply Quote 0
            • G Offline
              guongthongminh @Guest
              last edited by Dec 6, 2019, 8:32 AM

              @Sean Can you help me Website display on the mirror after voice search?
              It should look like this:
              alt text

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