diff --git a/modules/default/clock/README.md b/modules/default/clock/README.md
index 8808825c..1e13333e 100644
--- a/modules/default/clock/README.md
+++ b/modules/default/clock/README.md
@@ -66,5 +66,33 @@ The following properties can be configured:
Default value: false
+
+ displayType |
+ Display a digital clock, analog clock, or both together.
+
Possible values: digital, analog, or both
+
Default value: digital
+ |
+
+
+ analogSize |
+ **Specific to the analog clock** Defines how large the analog display is.
+
Possible values: A positive number of pixels
+
Default value: 200px
+ |
+
+
+ analogFace |
+ **Specific to the analog clock** Specifies which clock face to use.
+
Possible values: false for a default border, none for no face or border, or face-### (where ### is currently a value between 001 and 008, inclusive)
+
Default value: false
+ |
+
+
+ analogPlacement |
+ **Specific to the analog clock** *(requires displayType set to 'both')* Specifies where the analog clock is in relation to the digital clock
+
Possible values: top, right, bottom, or left
+
Default value: bottom
+ |
+
diff --git a/modules/default/clock/clock.js b/modules/default/clock/clock.js
index 85932567..ec9b22d7 100644
--- a/modules/default/clock/clock.js
+++ b/modules/default/clock/clock.js
@@ -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;
}
diff --git a/modules/default/clock/faces/face-001.png b/modules/default/clock/faces/face-001.png
new file mode 100644
index 00000000..562c857c
Binary files /dev/null and b/modules/default/clock/faces/face-001.png differ
diff --git a/modules/default/clock/faces/face-002.png b/modules/default/clock/faces/face-002.png
new file mode 100644
index 00000000..a0b9d909
Binary files /dev/null and b/modules/default/clock/faces/face-002.png differ
diff --git a/modules/default/clock/faces/face-003.png b/modules/default/clock/faces/face-003.png
new file mode 100644
index 00000000..58ebd2b7
Binary files /dev/null and b/modules/default/clock/faces/face-003.png differ
diff --git a/modules/default/clock/faces/face-004.png b/modules/default/clock/faces/face-004.png
new file mode 100644
index 00000000..9b00625c
Binary files /dev/null and b/modules/default/clock/faces/face-004.png differ
diff --git a/modules/default/clock/faces/face-005.png b/modules/default/clock/faces/face-005.png
new file mode 100644
index 00000000..b176513d
Binary files /dev/null and b/modules/default/clock/faces/face-005.png differ
diff --git a/modules/default/clock/faces/face-006.png b/modules/default/clock/faces/face-006.png
new file mode 100644
index 00000000..907ba1d3
Binary files /dev/null and b/modules/default/clock/faces/face-006.png differ
diff --git a/modules/default/clock/faces/face-007.png b/modules/default/clock/faces/face-007.png
new file mode 100644
index 00000000..ceb2fa72
Binary files /dev/null and b/modules/default/clock/faces/face-007.png differ
diff --git a/modules/default/clock/faces/face-008.png b/modules/default/clock/faces/face-008.png
new file mode 100644
index 00000000..b2a3a90c
Binary files /dev/null and b/modules/default/clock/faces/face-008.png differ