MagicMirror² v2.8.0 is available! For more information about this release, check out this topic.

Unable to create two clocks that looks alike



  • 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