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.

    Unable to create two clocks that looks alike

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    1 Posts 1 Posters 602 Views 1 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
      sunnykeerthi
      last edited by

      Hi,

      I’m using the MMM-iClock module to display clock. Initially this was working fine, but here as per my requirement, I am trying to display 2 clocks side by side in top_right section. Here I’ve 2 questions.

      • Here the functionality is working fine, but the UI(of the 2nd clock) seems messed up(the number bars doesn’t show up).

      • As soon as the mirror starts, the clocks goes to the right corner and then automatically comes to place.

      Here is my code.

      var iClock;
      Module.register("MMM-iClock", {
          defaults: {
              seconds: true,
              size: "350px",
              color: "#FFFFFF",
              digital: 2,				//	0 (no display), 1 (permanent display) or 2 (show for 5 seconds on every miniute)
              analogue: true,		//	false (no display), true (permanent display)
              glow: true,			//	false (no display), true (permanent display)
      
          },
          getStyles: function () {
              return ["MMM-iClock.css"];
          },
      
          days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
          months: ["January", "February", "March", "April", "May", "June", "July",
              "August", "September", "October", "November", "December"],
      
          start: function () {
              iClock = this;
              Log.info("Starting module: " + iClock.name);
              var style = document.querySelector('html');
              style.style.setProperty('--fore', iClock.config.color);
              style.style.setProperty('--size', iClock.config.size);
              if (!iClock.config.glow)
                  style.style.setProperty('--glow', "none");
              setTimeout(iClock.updateClock, 1000)
          },
      
          getDom: function () {
              var wrapper = document.createElement("div");
              wrapper.className = "iClock";
              if (iClock.config.analogue === true) {
                  var x = document.createElement("div");
                  x.className = "x";
                  var y = document.createElement("div");
                  y.className = "y";
                  var z = document.createElement("div");
                  z.className = "z";
      
                  overlay = document.createElement("div");
                  overlay.className = "overlay";
                  var hour = document.createElement("div");
                  hour.className = "hour";
                  hour.id = "sHour";
                  overlay.appendChild(hour);
                  var minute = document.createElement("div");
                  minute.className = "minute";
                  minute.id = "sMinute";
                  overlay.appendChild(minute);
                  if (iClock.config.seconds === true) {
                      var second = document.createElement("div");
                      second.className = "second";
                      second.id = "sSecond";
                      overlay.appendChild(second);
                  }
      
                  //SFO
      
                  sfoTimeoverlay = document.createElement("div");
                  sfoTimeoverlay.className = "sfoTimeoverlay";
                  var sfoTimehour = document.createElement("div");
                  sfoTimehour.className = "hour";
                  sfoTimehour.id = "sfoTimesHour";
                  sfoTimeoverlay.appendChild(sfoTimehour);
                  var sfoTimeminute = document.createElement("div");
                  sfoTimeminute.className = "minute";
                  sfoTimeminute.id = "sfoTimesMinute";
                  sfoTimeoverlay.appendChild(sfoTimeminute);
                  if (iClock.config.seconds === true) {
                      var sfoTimesecond = document.createElement("div");
                      sfoTimesecond.className = "second";
                      sfoTimesecond.id = "sfoTimesSecond";
                      sfoTimeoverlay.appendChild(sfoTimesecond);
                  }
      
      
      
      
      
                  z.appendChild(overlay);
                  z.appendChild(sfoTimeoverlay);
                  y.appendChild(z);
                  x.appendChild(y);
                  wrapper.append(x);
              }
              if (iClock.config.digital !== 0) {
                  var time = document.createElement("div");
                  time.className = "time";
                  time.id = "sTime";
                  if (iClock.config.digital === 2)
                      time.style.opacity = 0;
                  if (iClock.config.analogue === true)
                      overlay.appendChild(time);
                  else wrapper.appendChild(time);
              }
              if (iClock.config.digital !== 0) {
                  console.log('##########' + iClock.config.digital);
                  var sfoTimetime = document.createElement("div");
                  sfoTimetime.className = "time";
                  sfoTimetime.id = "sfoTimesTime";
                  if (iClock.config.digital === 2)
                      sfoTimetime.style.opacity = 0;
                  if (iClock.config.analogue === true)
                      sfoTimeoverlay.appendChild(sfoTimetime);
                  else
                      wrapper.appendChild(sfoTimetime);
              }
              return wrapper;
          },
          updateClock: function () {
              var wait = 60;
              now = new Date();
              console.log(now);
      
              wait -= now.getSeconds();
              var sec = now.getSeconds() + (60 * now.getMinutes()) + (60 * 60 * now.getHours());
              if (iClock.config.seconds === true) {
                  wait = 1;
                  sec += 1
              }
              s = (360 / 60) * sec;
              m = s / 60;
              h = m / 12
              sHour = hour = now.getHours();
              sMinute = minute = now.getMinutes();
              if (sHour < 10) sHour = "0" + sHour;
              if (sMinute < 10) sMinute = "0" + sMinute;
              var sDate = document.createElement("div");
              sDate.className = "date";
              sDate.innerHTML = iClock.days[now.getDay()] + " " + now.getDate() + " " + iClock.months[now.getMonth()];
              document.getElementById('sTime').innerHTML = sHour + ":" + sMinute;
              document.getElementById('sTime').appendChild(sDate);
              if (iClock.config.digital == 2) {
                  if ((iClock.config.seconds === true && (sec + 2) % 60 == 0) || iClock.config.seconds === false)
                      document.getElementById('sTime').style.opacity = 1;
                  setTimeout(function () {
                      document.getElementById('sTime').style.opacity = 0;
                  }, 5000);
              }
              if (iClock.config.analogue === true) {
                  if (iClock.config.seconds === true)
                      document.getElementById('sSecond').style.transform = "translate(-50%, -50%) rotate(" + s + "deg)";
                  document.getElementById('sMinute').style.transform = "translate(-50%, -50%) rotate(" + m + "deg)";
                  document.getElementById('sHour').style.transform = "translate(-50%, -50%) rotate(" + h + "deg)";
              }
      
      
              var estTime = new Date();
              estTime.setHours(now.getHours() - 12);
              estTime.setMinutes(now.getMinutes() - 30);
              console.log(estTime);
      
              sfoTime = estTime;
              wait = 60;
      
      
              wait -= sfoTime.getSeconds();
              var sfoTimesec = sfoTime.getSeconds() + (60 * sfoTime.getMinutes()) + (60 * 60 * sfoTime.getHours());
              if (iClock.config.seconds === true) {
                  wait = 1;
                  sfoTimesec += 1
              }
              sfoTimes = (360 / 60) * sfoTimesec;
              sfoTimem = sfoTimes / 60;
              sfoTimeh = sfoTimem / 12
              sfoTimesHour = sfoTimehour = sfoTime.getHours();
              sfoTimesMinute = sfoTimeminute = sfoTime.getMinutes();
              if (sfoTimesHour < 10) sfoTimesHour = "0" + sfoTimesHour;
              if (sfoTimesMinute < 10) sfoTimesMinute = "0" + sfoTimesMinute;
              var sfoTimesDate = document.createElement("div");
              sfoTimesDate.className = "date";
              sfoTimesDate.innerHTML = iClock.days[sfoTime.getDay()] + " " + sfoTime.getDate() + " " + iClock.months[sfoTime.getMonth()];
              console.log(document.getElementById('sfoTimesTime'));
              document.getElementById('sfoTimesTime').innerHTML = sfoTimesHour + ":" + sfoTimesMinute;
              document.getElementById('sfoTimesTime').appendChild(sfoTimesDate);
              if (iClock.config.digital == 2) {
                  if ((iClock.config.seconds === true && (sfoTimesec + 2) % 60 == 0) || iClock.config.seconds === false)
                      document.getElementById('sfoTimesTime').style.opacity = 1;
                  setTimeout(function () {
                      document.getElementById('sfoTimesTime').style.opacity = 0;
                  }, 5000);
              }
              if (iClock.config.analogue === true) {
                  if (iClock.config.seconds === true)
                      document.getElementById('sfoTimesSecond').style.transform = "translate(-50%, -50%) rotate(" + sfoTimes + "deg)";
                  document.getElementById('sfoTimesMinute').style.transform = "translate(-50%, -50%) rotate(" + sfoTimem + "deg)";
                  document.getElementById('sfoTimesHour').style.transform = "translate(-50%, -50%) rotate(" + sfoTimeh + "deg)";
              }
              setTimeout(iClock.updateClock, wait * 1000);
          }
      });
      

      and here is the CSS.

      :root {
          --back: #000;
          --fore: #00D6FF;
          --size: 350px;
          --glow: 0 0 8px var(--fore);
      }
      
      .iClock {
          position: relative;
          display: block;
          width: var(--size);
          height: var(--size);
          border-radius: 350px;
      }
      
      .iClock .x:after, .iClock .x:before, .iClock .x .y:after, .iClock .x .y:before, .iClock .x .y .z:after, .iClock .x .y .z:before {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 2px;
          height: 100%;
          background: var(--fore);
      }
      
      .iClock:after {
          transform: translate(-50%, -50%) rotate(90deg);
          z-index: 1;
      }
      
      .iClock .x:before {
          transform: translate(-50%, -50%) rotate(30deg);
      }
      
      .iClock .x:after {
          transform: translate(-50%, -50%) rotate(60deg);
      }
      
      .iClock .x .y:before {
          transform: translate(-50%, -50%) rotate(120deg);
      }
      
      .iClock .x .y:after {
          transform: translate(-50%, -50%) rotate(150deg);
      }
      
      .iClock .x .y .z:before {
          transform: translate(-50%, -50%) rotate(0deg);
      }
      
      .iClock .x .y .z:after {
          transform: translate(-50%, -50%) rotate(90deg);
      }
      
      .overlay {
          float: left;
      }
      
      .sfoTimeoverlay {
          float: right;
          margin-left: 120%
      }
      
      .iClock .x .y .overlay, .iClock .x .y .sfoTimeoverlay {
          position: absolute;
          width: 91%;
          height: 91%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: var(--back);
          border-radius: 300px;
          z-index: 2;
      }
      
      .iClock .x .y .overlay .hour, .iClock .x .y .overlay .minute, .iClock .x .y .overlay .second, 
      .iClock .x .y .sfoTimeoverlay .hour, .iClock .x .y .sfoTimeoverlay .minute, .iClock .x .y .sfoTimeoverlay .second {
          position: absolute;
          top: 50%;
          left: 50%;
          width: calc(100% + 40px);
          height: calc(100% + 40px);
          border-radius: 350px;
          transform: translate(-50%, -50%);
          border: 2px solid var(--fore);
          box-shadow: var(--glow);
      }
      
      .iClock .x .y .overlay .hour:after, .iClock .x .y .overlay .minute:after, .iClock .x .y .overlay .second:after, .iClock .x .y .sfoTimeoverlay .hour:after, .iClock .x .y .sfoTimeoverlay .minute:after, .iClock .x .y .sfoTimeoverlay .second:after {
          content: "";
          position: absolute;
          width: 10px;
          height: 15px;
          top: -8px;
          left: 50%;
          transform: translate(-50%);
          background: var(--back);
      }
      
      .iClock .x .y .overlay .minute, .iClock .x .y .sfoTimeoverlay .minute {
          width: calc(100% - 18px);
          height: calc(100% - 18px);
      }
      
      .iClock .x .y .overlay .second, .iClock .x .y .sfoTimeoverlay .second {
          width: calc(100% - 50px);
          height: calc(100% - 50px);
      }
      
      .iClock .time {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
          font-family: 'Titillium Web', sans-serif;
          text-align: center;
          font-size: 15px;
          white-space: nowrap;
          font-weight: 500;
          line-height: 30px;
          text-shadow: var(--glow);
          color: var(--fore);
      }
      
      .iClock .x .y .overlay .hour, .iClock .x .y .overlay .minute, .iClock .x .y .overlay .second, .iClock .time, .iClock .x .y .sfoTimeoverlay .hour, .iClock .x .y .sfoTimeoverlay .minute, .iClock .x .y .sfoTimeoverlay .second, .iClock .time {
          transition: 1s cubic-bezier(.4, 0, .2, 1);
          -o-transition: 1s cubic-bezier(.4, 0, .2, 1);
          -ms-transition: 1s cubic-bezier(.4, 0, .2, 1);
          -moz-transition: 1s cubic-bezier(.4, 0, .2, 1);
          -webkit-transition: 1s cubic-bezier(.4, 0, .2, 1);
      }
      
      .iClock .time .date {
          font-size: 10px;
          line-height: 25px;
          text-align: center;
      }
      

      I didn’t do much of coding here, I copy pasted the existing clock and did modifications on top of it.

      Here is how it looks while I start my mirror.
      0_1558974204182_Screen Shot 2019-05-27 at 9.52.37 PM.png

      And here it is after 2-3 seconds.

      0_1558974231410_Screen Shot 2019-05-27 at 9.52.43 PM.png

      please let me know on where am I going wrong and how can I fix this.

      Thanks,
      Sunny

      1 Reply Last reply Reply Quote 0
      • 1 / 1
      • 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