1. Home
  2. Troubleshooting
  3. Unable to create two clocks that looks alike
MagicMirror² v2.12.0 is available! For more information about this release, check out this topic.

Unable to create two clocks that looks alike

  • S

    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

    0
Log in to reply
 
Enjoying MagicMirror? Please consider a donation!