MMM-circleCountdown/MMM-circleCountdown.js

Module.register("MMM-circleCountdown",{
        defaults: {
                event1: "New Millenium:",
                date1: "3000-01-01",
                start1: "30",
                farbe1: "white",
                event2: "Sylvester 2999:",
                date2: "2999-12-31",
                start2: "1000",
                farbe2: "blue"

        },

        start: function() {
                /*var self = this;
                setInterval(function() {
                        self.updateDom(); // no speed defined, so it updates instantly.
                }, 1000*60*10); //perform every 10 minutes*/
                this.config = Object.assign({}, this.defaults, this.config);
                Log.info("Starting module: " + this.name);

        },
        getStyles: function () {
                return ["MMM-circleCountdown.css"]
        },
        getDom: function() {


                var today = new Date(Date.now());
                var target = new Date(this.config.date1);
                var timeDiff = target.getTime() - today.getTime();
                var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));

                if (diffDays < parseInt(this.config.start1)){
                        var teilKreis = 360 / parseFloat(this.config.start1) * diffDays;
                }else{
                        var teilKreis = 360+90;
                        }


                var wrapper = document.createElement("div");
                var teilKreisT = teilKreis - 90;

                // Create canvas
                const chartE1  = document.createElement("canvas");
                chartE1.width  = 400;
                chartE1.height = 150;
                //chartE1.style="border:5px solid #ffffff;";  //REMOVE LATER

                var ctx = chartE1.getContext("2d");


                ctx.font = "20px Arial";
                //ctx.font = "20px Roboto";
                ctx.fillStyle = "white";
                ctx.textAlign = "center";

                var textWidth = ctx.measureText(this.config.event1).width;
                var textWidth2 = ctx.measureText(this.config.event2).width;
                if(textWidth  + textWidth > 380){
                        this.config.event1 ="one or both";
                        this.config.event2 ="text to long";
                        textWidth = ctx.measureText(this.config.event1).width;
                        textWidth2 = ctx.measureText(this.config.event2).width;
                        }


                var x = 60;
                if((textWidth + 10) / 2> x){
                        x = (textWidth + 10) / 2;
                        }
                var y = 80;
                var radius = 40;

                //Inner cicrle
                ctx.lineWidth = 2;
                ctx.strokeStyle = '#999999';



                var anticlockwise = true; // clockwise or anticlockwise
                //ctx.arc(x, y, radius, startAngle, endAngle, false);
                ctx.beginPath();
                ctx.arc(x, y, radius, 0, Math.PI * 2, false);
               ctx.stroke();
               ctx.closePath();


               //Main circle

                ctx.strokeStyle = this.config.farbe1;
                ctx.lineWidth = 8;
                //ctx.arc(x, y, radius, startAngle, endAngle, false);
                ctx.beginPath();
                ctx.arc(x, y, radius, (Math.PI /180) * -90,(Math.PI /180) *(teilKreis-90) , false);
                ctx.stroke();

                ctx.fillText(this.config.event1,x,y-radius-10);
                ctx.fillText(diffDays,x,y+5);
                ctx.closePath();

                //------------------------
                // Countdown 2
                //------------------------

                var today = new Date(Date.now());
                var target = new Date(this.config.date2);
                var timeDiff = target.getTime() - today.getTime();
                var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));

                if (diffDays < parseInt(this.config.start2)){
                        var teilKreis = 360 / parseFloat(this.config.start2) * diffDays;
                }else{
                        var teilKreis = 360+90;
                        }

                var x = x + textWidth/2 + 70;
                if((textWidth  + textWidth2 /2 + 20) > x){
                        x = textWidth  + textWidth2 /2 + 40;
                        }


                //Inner cicrle 2
                ctx.lineWidth = 2;
                ctx.strokeStyle = '#999999';



                var anticlockwise = true; // clockwise or anticlockwise
                //ctx.arc(x, y, radius, startAngle, endAngle, false);
                ctx.beginPath();
                ctx.arc(x, y, radius, 0, Math.PI * 2, false);
                ctx.stroke();
                ctx.closePath();



               //Main circle 2

                ctx.strokeStyle = this.config.farbe2;
                ctx.lineWidth = 8;
                //ctx.arc(x, y, radius, startAngle, endAngle, false);
                ctx.beginPath();
                ctx.arc(x, y, radius, (Math.PI /180) * -90,(Math.PI /180) *(teilKreis-90) , false);
                ctx.stroke();
                ctx.closePath();

                ctx.fillText(this.config.event2,x,y-radius-10);
                ctx.fillText(diffDays,x,y+5);

                //ctx.closePath();

                wrapper.appendChild(chartE1);

                return wrapper;
        }
});