diff --git a/CHANGELOG.md b/CHANGELOG.md
index d6a5daf8..1e9b01d5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
- Add max newsitems parameter to the newsfeed module.
- Translations for Simplified Chinese, Traditional Chinese and Japanese.
- Polish Translation
+- Add an analog clock in addition to the digital one.
### Fixed
- Edit Alert Module to display title & message if they are provided in the notification (Issue #300)
diff --git a/modules/default/clock/README.md b/modules/default/clock/README.md
index 8808825c..77eb3fde 100644
--- a/modules/default/clock/README.md
+++ b/modules/default/clock/README.md
@@ -66,5 +66,40 @@ 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:simple for a simple border, none for no face or border, or face-### (where ### is currently a value between 001 and 012, inclusive)
+ Default value:simple
+
+
+
+
secondsColor
+
Specific to the analog clock. Specifies what color to make the 'seconds' hand.
+ Possible values:any HTML RGB Color
+ Default value:#888888
+
+
+
+
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..9f4abecb 100644
--- a/modules/default/clock/clock.js
+++ b/modules/default/clock/clock.js
@@ -8,31 +8,51 @@
Module.register("clock",{
// Module config defaults.
defaults: {
+ displayType: 'digital', // options: digital, analog, both
+
timeFormat: config.timeFormat,
displaySeconds: true,
showPeriod: true,
showPeriodUpper: false,
- clockBold: false
+ clockBold: false,
+
+ /* specific to the analog clock */
+ analogSize: '200px',
+ analogFace: 'simple', // options: 'none', 'simple', 'face-###' (where ### is 001 to 012 inclusive)
+ analogPlacement: 'bottom', // options: top, bottom, left, right
+ secondsColor: '#888888',
},
// 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 +92,127 @@ 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
+
+ // Calculate the degree offset for each hand of the clock
+ 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 != 'simple' && this.config.analogFace != 'none') {
+ clockCircle.style.background = "url("+ this.data.path + "faces/" + this.config.analogFace + ".svg)";
+ clockCircle.style.backgroundSize = "100%";
+ } else if (this.config.analogFace != 'none') {
+ clockCircle.style.border = "2px solid 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";
+
+ // Combine analog wrappers
+ clockFace.appendChild(clockHour);
+ clockFace.appendChild(clockMinute);
+
+ if (this.config.displaySeconds) {
+ var clockSecond = document.createElement("div");
+ clockSecond.id = "clockSecond";
+ clockSecond.style.transform = "rotate(" + second + "deg)";
+ clockSecond.className = "clockSecond";
+ clockSecond.style.backgroundColor = this.config.secondsColor;
+ 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 = "15px";
+ 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/clock_styles.css b/modules/default/clock/clock_styles.css
new file mode 100644
index 00000000..6020e579
--- /dev/null
+++ b/modules/default/clock/clock_styles.css
@@ -0,0 +1,74 @@
+#analog {
+}
+
+#digital {
+}
+
+.clockCircle {
+ margin: 0 auto;
+ position: relative;
+ border-radius: 50%;
+ background-size: 100%;
+}
+
+.clockFace {
+ width: 100%;
+ height: 100%;
+}
+
+.clockFace:after {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 6px;
+ height: 6px;
+ margin: -3px 0 0 -3px;
+ background: white;
+ border-radius: 3px;
+ content: "";
+ display: block;
+}
+
+.clockHour {
+ width: 0;
+ height: 0;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -2px 0 -2px -25%; /* numbers much match negative length & thickness */
+ padding: 2px 0 2px 25%; /* indicator length & thickness */
+ background: white;
+ -webkit-transform-origin: 100% 50%;
+ -ms-transform-origin: 100% 50%;
+ transform-origin: 100% 50%;
+ border-radius: 3px 0 0 3px;
+}
+
+.clockMinute {
+ width: 0;
+ height: 0;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -35% -2px 0; /* numbers must match negative length & thickness */
+ padding: 35% 2px 0; /* indicator length & thickness */
+ background: white;
+ -webkit-transform-origin: 50% 100%;
+ -ms-transform-origin: 50% 100%;
+ transform-origin: 50% 100%;
+ border-radius: 3px 0 0 3px;
+}
+
+.clockSecond {
+ width: 0;
+ height: 0;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -38% -1px 0 0; /* numbers must match negative length & thickness */
+ padding: 38% 1px 0 0; /* indicator length & thickness */
+ background: #888888;
+ -webkit-transform-origin: 50% 100%;
+ -ms-transform-origin: 50% 100%;
+ transform-origin: 50% 100%;
+}
diff --git a/modules/default/clock/faces/face-001.svg b/modules/default/clock/faces/face-001.svg
new file mode 100644
index 00000000..6d1c17f3
--- /dev/null
+++ b/modules/default/clock/faces/face-001.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/modules/default/clock/faces/face-002.svg b/modules/default/clock/faces/face-002.svg
new file mode 100644
index 00000000..a56210c0
--- /dev/null
+++ b/modules/default/clock/faces/face-002.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/modules/default/clock/faces/face-003.svg b/modules/default/clock/faces/face-003.svg
new file mode 100644
index 00000000..38191df6
--- /dev/null
+++ b/modules/default/clock/faces/face-003.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/modules/default/clock/faces/face-004.svg b/modules/default/clock/faces/face-004.svg
new file mode 100644
index 00000000..f69781aa
--- /dev/null
+++ b/modules/default/clock/faces/face-004.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/modules/default/clock/faces/face-005.svg b/modules/default/clock/faces/face-005.svg
new file mode 100644
index 00000000..577c4f53
--- /dev/null
+++ b/modules/default/clock/faces/face-005.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/modules/default/clock/faces/face-006.svg b/modules/default/clock/faces/face-006.svg
new file mode 100644
index 00000000..665e9ccd
--- /dev/null
+++ b/modules/default/clock/faces/face-006.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/modules/default/clock/faces/face-007.svg b/modules/default/clock/faces/face-007.svg
new file mode 100644
index 00000000..2dc41971
--- /dev/null
+++ b/modules/default/clock/faces/face-007.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/modules/default/clock/faces/face-008.svg b/modules/default/clock/faces/face-008.svg
new file mode 100644
index 00000000..b5ea16ed
--- /dev/null
+++ b/modules/default/clock/faces/face-008.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/modules/default/clock/faces/face-009.svg b/modules/default/clock/faces/face-009.svg
new file mode 100644
index 00000000..a498d853
--- /dev/null
+++ b/modules/default/clock/faces/face-009.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/modules/default/clock/faces/face-010.svg b/modules/default/clock/faces/face-010.svg
new file mode 100644
index 00000000..23679598
--- /dev/null
+++ b/modules/default/clock/faces/face-010.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/modules/default/clock/faces/face-011.svg b/modules/default/clock/faces/face-011.svg
new file mode 100644
index 00000000..493c75c2
--- /dev/null
+++ b/modules/default/clock/faces/face-011.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/modules/default/clock/faces/face-012.svg b/modules/default/clock/faces/face-012.svg
new file mode 100644
index 00000000..a1a0fdd8
--- /dev/null
+++ b/modules/default/clock/faces/face-012.svg
@@ -0,0 +1 @@
+
\ No newline at end of file