MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    1. Home
    2. sunnykeerthi
    3. Topics
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.
    S
    Offline
    • Profile
    • Following 0
    • Followers 0
    • Topics 7
    • Posts 17
    • Groups 0

    Topics

    • S

      Unable to create two clocks that looks alike

      Watching Ignoring Scheduled Pinned Locked Moved Unsolved Troubleshooting
      1
      2
      0 Votes
      1 Posts
      636 Views
      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. [image: 1558974210801-screen-shot-2019-05-27-at-9.52.37-pm.png] And here it is after 2-3 seconds. [image: 1558974237730-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
    • S

      Compliments module is killing my other module.

      Watching Ignoring Scheduled Pinned Locked Moved Unsolved Troubleshooting
      9
      0 Votes
      9 Posts
      2k Views
      ?
      @sunnykeerthi I think it is fixed. Update and try again.
    • S

      Magic Mirror Alexa

      Watching Ignoring Scheduled Pinned Locked Moved General Discussion alexa alexa voice service help
      6
      0 Votes
      6 Posts
      2k Views
      S
      @sunnykeerthi MMM-Alexa
    • S

      multiple carousals not rendering as expected

      Watching Ignoring Scheduled Pinned Locked Moved Unsolved Troubleshooting magic mirror slide troubleshoot help fix
      5
      0 Votes
      5 Posts
      2k Views
      S
      actually this is because you have fired a timer on the slide update showSlides2: function () { if (!this.slideIndex) { this.slideIndex = 0; } var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { console.log(slides[i]); slides[i].style.display = "none"; } this.slideIndex++; slides[this.slideIndex - 1].style.display = "block"; if (this.slideIndex > (slides.length - 1)) { this.slideIndex = 0 } setInterval(this.showSlides2, 2000); //< ------- here restarts the function, BUT inside the function 'this'; becomes the context of the timer routine and not the module.. this.updateDom(1000); // or whatever transition time u want. }, to fix it you need an arrow function to keep context right see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions but net showSlides2: function () { if (!this.slideIndex) { this.slideIndex = 0; } var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { console.log(slides[i]); slides[i].style.display = "none"; } this.slideIndex++; slides[this.slideIndex - 1].style.display = "block"; if (this.slideIndex > (slides.length - 1)) { this.slideIndex = 0 } setInterval( () => { this.showSlides2()} , 2000); // < --- was a typo here.. need () => { stuff } this.updateDom(1000); // or whatever transition time u want. },
    • S

      Create divs dynamically and add it to carousal

      Watching Ignoring Scheduled Pinned Locked Moved Unsolved Troubleshooting
      4
      0 Votes
      4 Posts
      950 Views
      S
      @sunnykeerthi you need to do the same for all the content… sort of reverse of what you are doing… the content is not going to be placed in the dom if you don’t pass it back to MM. (on the return) wrapperEl.appendChild(container); last return wrapperE1; setTimeout(this.showSlides(container, counter), 2000); // Change image every 2 seconds when the timer goes off, the context of the pgm is unknown… its asyncronous… it doesn’t KNOW what container and counter are… these were built on the program stack, which has long since gone away…(2 seconds ago)… the model for MM is you call this.updateDom(optional_delay) and later MM will call getDom() to gte the Modules contribution to the dom… that contribution is not IN the dom until sometime after the getDom() rourine returns the topmost element of that contribution tree. only getDom() should provide content… var slideIndex = -1; getDom: function () { console.log('get dom'); // note that you are rebuilding your entire dom contribution EVERY time getDom is called // the prior content is destroyed (yanked out of dom), and this content is injected in its place // if all you are doing on each cycle thru is to chaneg the visibility of one element // then u should build it once, and use it later var wrapperEl = document.createElement("div"); var container = document.createElement("div"); container.className = "slideshow-container"; var div1 = document.createElement("div"); div1.className = "mySlides fade"; var img1 = document.createElement("img"); img1.src = "https://www.w3schools.com/howto/img_nature_wide.jpg"; div1.appendChild(img1); container.appendChild(div1); var div2 = document.createElement("div"); div2.className = "mySlides fade"; var img2 = document.createElement("img"); img2.src = "https://www.w3schools.com/howto/img_mountains_wide.jpg"; div2.appendChild(img2); container.appendChild(div2); var div3 = document.createElement("div"); div3.className = "mySlides fade"; var img3 = document.createElement("img"); img3.src = "https://www.w3schools.com/howto/img_snow_wide.jpg"; div3.appendChild(img3); container.appendChild(div3); wrapperEl.appendChild(container); // indicate which element above is visible // content not yet in dom this.showSlides(container); Log.log("slide payload >> "); // tell MM to insert THIS content where our contribution goes into the dom // if there was other content there, destroy it return wrapperEl; }, // only called from getDom() showSlides: function (container) { var slides = container.childNodes; console.log("ClassName " + slides.length); // where did this come from // if in your module contribution, it will not // exist in dom until AFTER getDom() returns // you are searching the DOM (document.) // it is not used here var dots = document.getElementsByClassName("dot"); // make all slides hidden (on return from getDom()) for (var i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } // show next slide in list slideIndex++; // if index more than slides available, start at first again if (slideIndex > slides.length) { slideIndex = 0 } // set selected slide visible slides[slideIndex ].style.display = "block"; // indicate we should force getDom() to be called in 2 seconds // which will rebuild the dom contribution again setTimeout(this.updateDom, 2000); // Change image every 2 seconds },
    • S

      Confused displaying a simple graph with Chart.js

      Watching Ignoring Scheduled Pinned Locked Moved Unsolved Troubleshooting
      3
      0 Votes
      3 Posts
      1k Views
      S
      here is the updated code from above. Module.register("MMM-Chart", { defaults: { width: 200, height: 200, chartConfig: { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } } }, getScripts: function () { return ["modules/" + this.name + "/node_modules/chart.js/dist/Chart.min.js"]; // use right file name // note that YOU must install chartjs into your project // need package.json }, start: function () { this.config = Object.assign({}, this.defaults, this.config); Log.info("Starting module: " + this.name); }, getDom: function () { console.log("*****" + JSON.stringify(this.config.chartConfig)); // Create wrapper element const wrapperEl = document.createElement("div"); var e =document.createElement("div"); // add div to give size to chart area //e.setAttribute("style", "position: relative; display: inline-block;"); // position already set e.style.width = this.config.width+"px"; // set right style attribute with size in pixels e.style.height = this.config.height+"px"; // set right style attribute with size in pixels wrapperEl.appendChild(e); // Create chart canvas const chartEl = document.createElement("canvas"); // Append chart e.appendChild(chartEl); // Init chart.js this.chart = new Chart(chartEl, this.config.chartConfig); return wrapperEl; } });
    • S

      Unable to Run the Head first developing MM module for extreme beginners :(

      Watching Ignoring Scheduled Pinned Locked Moved Solved Troubleshooting
      3
      1
      0 Votes
      3 Posts
      1k Views
      ?
      @sunnykeerthi It’s my fault. But I cannot edit that topic anymore. I don’t know why. -_-a
    • 1 / 1