MMM-HTMLBox not displaying my 1 hour countdown timer html file

[A Former User]

@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;

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

[btni]

@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

[btni]

@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;
}

 }

[A Former User]

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

[btni]

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

[guongthongminh]

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