grey/MMM-circleCountdown
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Inital commit

Browse Source
This commit is contained in:
Sören Oesterwind
2021-09-02 17:40:47 +02:00
parent 96bb4d6952
commit e9626fb420
2 changed files with 167 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
MMM-circleCountdown.css Normal file
View File

@ -0,0 +1,11 @@
@font-face{
font-family: Roboto;
font-style: normal;
font-weight: 100;
src:
local("Roboto Thin"),
local("Roboto-Thin"),
url("node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"),
url("node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff"),
url("node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.ttf") format("truetype");
}

156
MMM-circleCountdown.js Normal file
View File

@ -0,0 +1,156 @@
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;
}