kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-08-21 12:55:22 +00:00
Code Issues Projects Releases Wiki Activity

Analog clock addition

Browse Source 
(cherry picked from commit f01b6325ed1784f1bebc3fc755da01e6fda60070)
This commit is contained in:
Ashley M. Kirchner
2016-07-08 17:16:51 -06:00
parent 61ace7bd97
commit 5e94c8be7b
10 changed files with 156 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
modules/default/clock/clock.js
View File

@@ -12,27 +12,43 @@ Module.register("clock",{
displaySeconds: true,
showPeriod: true,
showPeriodUpper: false,
clockBold: false
clockBold: false,
displayType: 'digital', // options: digital, analog, both
/* specific to the analog clock */
analogSize: '200px',
analogFace: false,
analogPlacement: 'bottom',
},
// Define required scripts.
getScripts: function() {
return ["moment.js"];
},
// Define styles.
getStyles: function() {
return ["clock_styles.css"];
},
// Define start sequence.
start: function() {
Log.info("Starting module: " + this.name);
// Schedule update interval.
var self = this;
setInterval(function() {
self.updateDom();
}, 1000);
// Set locale.
moment.locale(config.language);
},
// Override dom generator.
getDom: function() {
// Create wrappers.
var wrapper = document.createElement("div");
/************************************
* Create wrappers for DIGITAL clock
*/
var dateWrapper = document.createElement("div");
var timeWrapper = document.createElement("div");
var secondsWrapper = document.createElement("sup");
@@ -72,15 +88,122 @@ Module.register("clock",{
} else {
periodWrapper.innerHTML = moment().format("a");
}
// Combine wrappers.
wrapper.appendChild(dateWrapper);
wrapper.appendChild(timeWrapper);
if (this.config.displaySeconds) {
timeWrapper.appendChild(secondsWrapper);
}
if (this.config.showPeriod && this.config.timeFormat !== 24) {
timeWrapper.appendChild(periodWrapper);
}
if (this.config.displaySeconds) {
timeWrapper.appendChild(secondsWrapper);
}
if (this.config.showPeriod && this.config.timeFormat !== 24) {
timeWrapper.appendChild(periodWrapper);
}
/****************************************************************
* Create wrappers for ANALOG clock, only if specified in config
*/
if (this.config.displayType !== 'digital') {
// If it isn't 'digital', then an 'analog' clock was also requested
var now = moment(),
second = now.seconds() * 6,
minute = now.minute() * 6 + second / 60,
hour = ((now.hours() % 12) / 12) * 360 + 90 + minute / 12;
// Create wrappers
var wrapper = document.createElement("div");
var clockCircle = document.createElement("div");
clockCircle.className = "clockCircle";
clockCircle.style.width = this.config.analogSize;
clockCircle.style.height = this.config.analogSize;
if ((this.config.analogFace != '' || this.config.analogFace != false) && this.config.analogFace !== 'none') {
clockCircle.style.background = "url("+ this.data.path + "/faces/" + this.config.analogFace + ".png)"
clockCircle.style.backgroundSize = "100%";
} else if (this.config.analogFace != 'none') {
clockCircle.style.border = "5px double white";
}
var clockFace = document.createElement("div");
clockFace.className = "clockFace";
var clockHour = document.createElement("div");
clockHour.id = "clockHour";
clockHour.style.transform = "rotate(" + hour + "deg)";
clockHour.className = "clockHour";
var clockMinute = document.createElement("div");
clockMinute.id = "clockMinute";
clockMinute.style.transform = "rotate(" + minute + "deg)";
clockMinute.className = "clockMinute";
var clockSecond = document.createElement("div");
clockSecond.id = "clockSecond";
clockSecond.style.transform = "rotate(" + second + "deg)";
clockSecond.className = "clockSecond";
// Combine analog wrappers
clockFace.appendChild(clockHour);
clockFace.appendChild(clockMinute);
clockFace.appendChild(clockSecond);
clockCircle.appendChild(clockFace);
}
/*******************************************
* Combine wrappers, check for .displayType
*/
if (this.config.displayType === 'digital') {
// Display only a digital clock
wrapper.appendChild(dateWrapper);
wrapper.appendChild(timeWrapper);
} else if (this.config.displayType === 'analog') {
// Display only an analog clock
dateWrapper.style.textAlign = "center";
dateWrapper.style.paddingBottom = "10px";
wrapper.appendChild(dateWrapper);
wrapper.appendChild(clockCircle);
} else {
// Both clocks have been configured, check position
var placement = this.config.analogPlacement;
analogWrapper = document.createElement("div");
analogWrapper.id = "analog";
analogWrapper.style.cssFloat = "none";
analogWrapper.appendChild(clockCircle);
digitalWrapper = document.createElement("div");
digitalWrapper.id = "digital";
digitalWrapper.style.cssFloat = "none";
digitalWrapper.appendChild(dateWrapper);
digitalWrapper.appendChild(timeWrapper);
if (placement === 'left' || placement === 'right') {
digitalWrapper.style.display = "inline-block";
digitalWrapper.style.verticalAlign = "top";
analogWrapper.style.display = "inline-block";
if (placement === 'left') {
analogWrapper.style.padding = "0 20px 0 0";
wrapper.appendChild(analogWrapper);
wrapper.appendChild(digitalWrapper);
} else {
analogWrapper.style.padding = "0 0 0 20px";
wrapper.appendChild(digitalWrapper);
wrapper.appendChild(analogWrapper);
}
} else {
digitalWrapper.style.textAlign = "center";
if (placement === 'top') {
analogWrapper.style.padding = "0 0 20px 0";
wrapper.appendChild(analogWrapper);
wrapper.appendChild(digitalWrapper);
} else {
analogWrapper.style.padding = "20px 0 0 0";
wrapper.appendChild(digitalWrapper);
wrapper.appendChild(analogWrapper);
}
}
}
// Return the wrapper to the dom.
return wrapper;
}