@@ -165,10 +41,13 @@
Created by fritteli, inspired by QLOCKTWO .
diff --git a/manifest.appcache b/manifest.appcache
index c78dd11..a8f89a4 100644
--- a/manifest.appcache
+++ b/manifest.appcache
@@ -1,15 +1,18 @@
CACHE MANIFEST
-# 1.5.1
+# 2.0
index.html
jquery-2.0.3.min.js
-uhr.css
-uhr.js
-uhr.woff
uhr-black.css
uhr-blue.css
+uhr-de.js
+uhr-de_CH.js
uhr-green.css
uhr-idle-dark.css
uhr-idle-light.css
uhr-red.css
uhr-white.css
+uhr.css
+uhr.js
+uhr.woff
+
diff --git a/uhr-de.js b/uhr-de.js
new file mode 100644
index 0000000..93af349
--- /dev/null
+++ b/uhr-de.js
@@ -0,0 +1,16 @@
+layout['de'] = {
+ language: "Deutsch",
+ values: [
+ [l('E', 'on'), l('S', 'on'),l('K'),l('I', 'on'),l('S', 'on'),l('T', 'on'),l('A'),m('F', 5, 25, 35, 55),m('Ü', 5, 25, 35, 55),m('N', 5, 25, 35, 55),m('F', 5, 25, 35, 55)],
+ [m('Z', 10, 50), m('E', 10, 50),m('H', 10, 50),m('N', 10, 50),m('Z', 20, 40),m('W', 20, 40),m('A', 20, 40),m('N', 20, 40),m('Z', 20, 40),m('I', 20, 40),m('G', 20, 40)],
+ [m('D', 45), m('R', 45),m('E', 45),m('I', 45),m('V', 15, 45),m('I', 15, 45),m('E', 15, 45),m('R', 15, 45),m('T', 15, 45),m('E', 15, 45),m('L', 15, 45)],
+ [m('V', 25, 40, 50, 55), m('O', 25, 40, 50, 55),m('R', 25, 40, 50, 55),l('F'),l('U'),l('N'),l('K'),m('N', 5, 10, 15, 20, 35),m('A', 5, 10, 15, 20, 35),m('C', 5, 10, 15, 20, 35),m('H', 5, 10, 15, 20, 35)],
+ [m('H', 25, 30, 35),m('A', 25, 30, 35),m('L', 25, 30, 35),m('B', 25, 30, 35),l('A'),h('E', 11),h('L', 11),h('F', 5, 11),h('Ü', 5),h('N', 5),h('F', 5)],
+ [h('E', 1), h('I', 1),h('N', 1),h('S', 1),l('X'),l('A'),l('M'),h('Z', 2),h('W', 2),h('E', 2),h('I', 2)],
+ [h('D', 3), h('R', 3),h('E', 3),h('I', 3),l('P'),l('M'),l('J'),h('V', 4),h('I', 4),h('E', 4),h('R', 4)],
+ [h('S', 6), h('E', 6),h('C', 6),h('H', 6),h('S', 6),l('N'),l('L'),h('A', 8),h('C', 8),h('H', 8),h('T', 8)],
+ [h('S', 7), h('I', 7),h('E', 7),h('B', 7),h('E', 7),h('N', 7),h('Z', 12),h('W', 12),h('Ö', 12),h('L', 12),h('F', 12)],
+ [h('Z', 10), h('E', 10),h('H', 10),h('N', 9, 10),h('E', 9),h('U', 9),h('N', 9),l('K'),l('U'),l('H'),l('R')]
+ ]
+};
+
diff --git a/uhr-de_CH.js b/uhr-de_CH.js
new file mode 100644
index 0000000..5e8c3ba
--- /dev/null
+++ b/uhr-de_CH.js
@@ -0,0 +1,16 @@
+layout['de_CH'] = {
+ language: "Bärndütsch",
+ values: [
+ [l('E', 'on'), l('S', 'on'),l('K'),l('I', 'on'),l('S', 'on'),l('C', 'on'),l('H', 'on'),l('A'),m('F', 5, 25, 35, 55),m('Ü', 5, 25, 35, 55),m('F', 5, 25, 35, 55)],
+ [m('V', 15, 45), m('I', 15, 45),m('E', 15, 45),m('R', 15, 45),m('T', 15, 45),m('U', 15, 45),l('B'),l('F'),m('Z', 10, 50),m('Ä', 10, 50),m('Ä', 10, 50)],
+ [m('Z', 20, 40), m('W', 20, 40),m('Ä', 20, 40),m('N', 20, 40),m('Z', 20, 40),m('G', 20, 40),l('S'),l('I'),m('V', 25, 40, 45, 50, 55),m('O', 25, 40, 45, 50, 55),m('R', 25, 40, 45, 50, 55)],
+ [m('A', 5, 10, 15, 20, 35), m('B', 5, 10, 15, 20, 35),l('O'),m('H', 25, 30, 35),m('A', 25, 30, 35),m('U', 25, 30, 35),m('B', 25, 30, 35),m('I', 25, 30, 35),l('E'),l('G'),l('E')],
+ [h('E', 1), h('I', 1),h('S', 1),h('Z', 2),h('W', 2),h('Ö', 2),h('I', 2),l('S'),h('D', 3),h('R', 3),h('Ü', 3)],
+ [h('V', 4), h('I', 4),h('E', 4),h('R', 4),h('I', 4),h('F', 5),h('Ü', 5),h('F', 5),h('I', 5),l('Q'),l('T')],
+ [h('S', 6), h('Ä', 6),h('C', 6),h('H', 6),h('S', 6),h('I', 6),h('S', 7),h('I', 7),h('B', 7),h('N', 7),h('I', 7)],
+ [h('A', 8), h('C', 8),h('H', 8),h('T', 8),h('I', 8),h('N', 9),h('Ü', 9),h('N', 9),h('I', 9),l('E'),l('L')],
+ [h('Z', 10), h('Ä', 10),h('N', 10),h('I', 10),l('E'),l('R'),l('B'),h('E', 11),h('U', 11),h('F', 11),h('I', 11)],
+ [h('Z', 12), h('W', 12),h('Ö', 12),h('U', 12),h('F', 12),h('I', 12),l('N'),l('A'),l('U'),l('H'),l('R')]
+ ]
+};
+
diff --git a/uhr.css b/uhr.css
index 3889710..a631f76 100644
--- a/uhr.css
+++ b/uhr.css
@@ -6,7 +6,6 @@ body {
font-family: 'Uhrenfont', sans-serif;
}
#uhr {
- display: inline-block;
padding: 3em;
position: relative;
margin: 0;
@@ -26,7 +25,7 @@ body {
}
#themeswitcher {
}
-.textarea {
+#renderarea {
display: block;
position: absolute;
top: 5em;
@@ -70,7 +69,7 @@ body {
height: 10%;
width: 9.0909%;
padding: 0;
- margin: 0 -4px 0 0;
+ margin: 0;
display: inline-block;
text-align: center;
font-size: 2.2em;
diff --git a/uhr.js b/uhr.js
index dfb24bc..676dc35 100644
--- a/uhr.js
+++ b/uhr.js
@@ -1,41 +1,63 @@
var clock = null;
var currentMinute = -1;
+var layout = new Array();
+layout['default'] = {
+ language: 'Undefined',
+ values: []
+};
+var currentLayout = layout['default'];
function highlightCurrentTime() {
var now = new Date();
- var hour = now.getHours();
- var minute = now.getMinutes();
- if (minute == currentMinute) {
+ var dotMinute = getDotMinute(now);
+ if (dotMinute == currentMinute) {
return;
}
- currentMinute = minute;
+ currentMinute = dotMinute;
+ var hour = getHour(now);
+ var coarseMinute = getCoarseMinute(now);
resetItems();
- var dotMinute = minute % 5;
- var coarseMinute = minute - dotMinute;
for (var i = 1; i <= dotMinute; i++) {
highlight('dot' + i);
}
highlight('minute' + coarseMinute);
- if (coarseMinute >= 25) {
- hour++;
- }
hour = normalizeHour(hour);
- highlight('hour'+hour);
+ highlight('hour' + hour);
+}
+function getHour(date) {
+ if (typeof currentLayout.getHour === 'function') {
+ return currentLayout.getHour(date);
+ }
+ var hour = date.getHours();
+ if (date.getMinutes() >= 25) {
+ return hour + 1;
+ }
+ return hour;
+}
+function getCoarseMinute(date) {
+ if (typeof currentLayout.getCoarseMinute === 'function') {
+ return currentLayout.getCoarseMinute(date);
+ }
+ var minutes = date.getMinutes();
+ return minutes - getDotMinute(date);
+}
+function getDotMinute(date) {
+ if (typeof currentLayout.getDotMinute === 'function') {
+ return currentLayout.getDotMinute(date);
+ }
+ var minutes = date.getMinutes();
+ return minutes % 5;
}
-
function clearDisplay() {
$('.item').removeClass('active');
}
function resetItems() {
clearDisplay()
- highlight('es');
- highlight('isch');
+ highlight('on');
}
-
function highlight(itemClass) {
$('.item.' + itemClass).addClass('active');
}
-
function normalizeHour(hour) {
if (hour > 12) {
hour %= 12;
@@ -45,13 +67,12 @@ function normalizeHour(hour) {
}
return hour;
}
-
function startClock() {
if (clock == null) {
+ highlightCurrentTime();
clock = window.setInterval(highlightCurrentTime, 1000);
}
}
-
function stopClock() {
if (clock != null) {
window.clearInterval(clock);
@@ -60,15 +81,91 @@ function stopClock() {
clearDisplay();
}
}
-
function updateClockState() {
- if ($('#onoffswitch').is(':checked')) {
+ if (isOn()) {
startClock();
} else {
stopClock();
}
}
-function switchTheme(element) {
- var theme = $(element).val()
+function isOn() {
+ return $('#onoffswitch').is(':checked');
+}
+function switchTheme(theme) {
$('#theme').attr('href', 'uhr-' + theme + '.css');
}
+function switchLayout(locale) {
+ stopClock();
+ currentLayout = layout[locale];
+ if (currentLayout == undefined) {
+ currentLayout = layout['default'];
+ }
+ renderLayout();
+ if (isOn()) {
+ startClock();
+ }
+}
+function renderLayout() {
+ var container = $('#renderarea');
+ container.empty();
+ for (var y = 0; y < currentLayout.values.length; y++) {
+ for (var x = 0; x < currentLayout.values[y].length; x++) {
+ var letter = currentLayout.values[y][x];
+ container.append(letter.toString());
+ }
+ if (y < currentLayout.values.length - 1) {
+ container.append('" + this.getValue() + " ";
+}
+/**
+ * Hilfsfunktion, um einen Buchstaben zu erzeugen.
+ *
+ * @param letter string: Der Buchstabe, der angezeigt werden soll
+ * @example l('I', 'is') erzeugt den Buchstaben 'I' mit der CSS-Styleklasse 'is'
+ */
+function l(letter, style) {
+ return new Letter(letter, style);
+}
+/**
+ * Hilfsfunktion, um einen Buchstaben zu erzeugen, der zu einem Stunden-Wort gehört.
+ *
+ * @param letter string: Der Buchstabe, der angezeigt werden soll
+ * @param hours... integer: Eine Aufzählung von Stundenwerten, zu welchen der Buchstabe als aktiv angezeigt werden soll
+ * @example h('Z', 2), 11 erzeugt den Buchstaben 'Z', der um 2:xx, 11:xx, 14:xx und 23:xx aktiv angezeigt wird
+ */
+function h(letter) {
+ var style = '';
+ for (var i = 1; i < arguments.length; i++) {
+ style += ' hour' + arguments[i];
+ }
+ return l(letter, style);
+}
+/**
+ * Hilfsfunktion, um einen Buchstaben zu erzeugen, der zu einem Minuten-Wort gehört.
+ *
+ * @param letter string: Der Buchstabe, der angezeigt werden soll
+ * @param minutes... integer: Eine Aufzählung von Minutenwerten, zu welchen der Buchstabe als aktiv angezeigt werden soll
+ * @example m('A', 5, 10, 15, 20, 35) erzeugt den Buchstaben 'A' der um :05, :10, :15, :20 und :35 aktiv angezeigt wird
+ */
+function m(letter) {
+ var style = '';
+ for (var i = 1; i < arguments.length; i++) {
+ style += ' minute' + arguments[i];
+ }
+ return l(letter, style);
+}
+