manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

Merge branch 'develop' into feature/new-splashscreen

Browse source
This commit is contained in:
Manuel Friedli 2014-06-28 16:59:40 +02:00
commit 8e7029759a
9 changed files with 540 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -36,7 +36,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</head> </head>
<body style="padding:0;margin:0;"> <body style="padding:0;margin:0;">
<div id="uhr"></div> <div id="uhr"></div>
<p id="disclaimer">Created by <a href="http://www.fritteli.ch/">fritteli</a>, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <a href="info/">Read more!</a></p> <p id="disclaimer">Created by <a href="http://www.fritteli.ch/">fritteli</a>, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>. <a href="info/">Read more!</a> - <a href="showcase">View full showcase!</a></p>
<script type="text/javascript" src="uhr-de_CH.js"></script> <script type="text/javascript" src="uhr-de_CH.js"></script>
<script type="text/javascript"> <script type="text/javascript">
(function($) { (function($) {

5
manifest.appcache
View file

@ -1,5 +1,5 @@
CACHE MANIFEST CACHE MANIFEST
# 5.1 # 6.0
COPYING COPYING
README.md README.md
@ -16,13 +16,16 @@ uhr-black.css
uhr-blue.css uhr-blue.css
uhr-de.js uhr-de.js
uhr-de_CH.js uhr-de_CH.js
uhr-de_CH_genau.js
uhr-en.js uhr-en.js
uhr-green.css uhr-green.css
uhr-pink.css uhr-pink.css
uhr-red.css uhr-red.css
uhr-white.css uhr-white.css
uhr-yellow.css
uhr.css uhr.css
uhr.js uhr.js
uhr.woff uhr.woff
info/index.html info/index.html
info/info.css info/info.css
showcase/index.html

61
showcase/index.html Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<!--
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<html manifest="../manifest.appcache">
<head>
<title>Bärneruhr - Die Zeit im Wort: Showcase</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Bärneruhr" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../uhr.css" />
<link rel="stylesheet" type="text/css" href="../uhr-black.css" data-class="black" data-name="Schwarz" />
<link rel="stylesheet" type="text/css" href="../uhr-white.css" data-class="white" data-name="Weiss" />
<link rel="stylesheet" type="text/css" href="../uhr-red.css" data-class="red" data-name="Rot" />
<link rel="stylesheet" type="text/css" href="../uhr-green.css" data-class="green" data-name="Grün" />
<link rel="stylesheet" type="text/css" href="../uhr-yellow.css" data-class="yellow" data-name="Gelb" />
<link rel="stylesheet" type="text/css" href="../uhr-blue.css" data-class="blue" data-name="Blau" />
<link rel="stylesheet" type="text/css" href="../uhr-pink.css" data-class="pink" data-name="Pink" />
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
<script type="text/javascript" src="../jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="../jquery-cookie-1.4.0.js"></script>
<script type="text/javascript" src="../uhr.js"></script>
</head>
<body style="padding:0;margin:0;">
<div id="uhr"></div>
<p ><a href="..">Go back to the main page</a></p>
<script type="text/javascript" src="../uhr-de_CH.js"></script>
<script type="text/javascript" src="../uhr-de_CH_genau.js"></script>
<script type="text/javascript" src="../uhr-de.js"></script>
<script type="text/javascript" src="../uhr-en.js"></script>
<script type="text/javascript">
(function($) {
var width = $(window).width();
var height = $(window).height() - 150;
var size = width < height ? width : height;
if (size < 200) {
size = 200;
}
$('#uhr').uhr({
width: size + 'px',
language: 'de_CH'
});
})(jQuery);
</script>
</body>
</html>

70
uhr-de.js
View file

@ -12,19 +12,59 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
var layout = { var h = {
language: 'Deutsch', "_es_ist": {1:[1,2,4,5,6]},
values: [ "_nach": {4:[8,9,10,11]},
[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)], "_vor": {4:[1,2,3]},
[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)], "_halb": {5:[1,2,3,4]},
[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)], "_5": {1:[8,9,10,11]},
[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)], "_10": {2:[1,2,3,4]},
[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)], "_15": {3:[5,6,7,8,9,10,11]},
[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)], "_20": {2:[5,6,7,8,9,10,11]},
[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)], "_45": {3:[1,2,3,4,5,6,7,8,9,10,11]}
[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')]
]
}; };
window._uhr.languages['de'] = layout; var layout = {
"version": 2,
"language": 'Deutsch',
"letters": [
'ESKISTAFÜNF',
'ZEHNZWANZIG',
'DREIVIERTEL',
'VORFUNKNACH',
'HALBAELFÜNF',
'EINSXAMZWEI',
'DREIPMJVIER',
'SECHSNLACHT',
'SIEBENZWÖLF',
'ZEHNEUNKUHR'
],
"permanent": h._es_ist,
"minutes": {
"5,6,7,8,9": [h._5, h._nach],
"10,11,12,13,14": [h._10, h._nach],
"15,16,17,18,19": [h._15, h._nach],
"20,21,22,23,24": [h._20, h._nach],
"25,26,27,28,29": [h._5, h._vor, h._halb],
"30,31,32,33,34": h._halb,
"35,36,37,38,39": [h._5, h._nach, h._halb],
"40,41,42,43,44": [h._20, h._vor],
"45,46,47,48,49": h._45,
"50,51,52,53,54": [h._10, h._vor],
"55,56,57,58,59": [h._5, h._vor]
},
"hours": {
"1": {6:[1,2,3,4]},
"2": {6:[8,9,10,11]},
"3": {7:[1,2,3,4]},
"4": {7:[8,9,10,11]},
"5": {5:[8,9,10,11]},
"6": {8:[1,2,3,4,5]},
"7": {9:[1,2,3,4,5,6]},
"8": {8:[8,9,10,11]},
"9": {10:[4,5,6,7]},
"10": {10:[1,2,3,4]},
"11": {5:[6,7,8]},
"12": {9:[7,8,9,10,11]}
}
};
window,_uhr.register('de', layout);

96
uhr-de_CH.js
View file

@ -12,19 +12,85 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
var layout = { // hilfsvariablen
language: 'Bärndütsch', var h = {
values: [ "_es_isch": {1:[1,2,4,5,6,7]},
[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)], "_ab": {4:[1,2]},
[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)], "_vor": {3:[9,10,11]},
[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)], "_haubi": {4:[4,5,6,7,8]},
[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')], "_5": {1:[9,10,11]},
[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)], "_10": {2:[9,10,11]},
[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')], "_15": {2:[1,2,3,4,5,6]},
[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)], "_20": {3:[1,2,3,4,5,6]}
[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')]
]
}; };
window._uhr.languages['de_CH'] = layout; var layout = {
// version: zur Zeit immer 2 (Pflichtattribut)
"version": 2,
// Sprechender Name der Sprache
"language": 'Bärndütsch',
// Buchstabenfeld als Array von Strings.
"letters": [
'ESKISCHAFÜF',
'VIERTUBFZÄÄ',
'ZWÄNZGSIVOR',
'ABOHAUBIEGE',
'EISZWÖISDRÜ',
'VIERIFÜFIQT',
'SÄCHSISIBNI',
'ACHTINÜNIEL',
'ZÄNIERBEUFI',
'ZWÖUFINAUHR'
],
// Permanent aktive Buchstaben. <array-or-object>, vgl. ausführliche Beschreibung bei "minutes".
"permanent": h._es_isch,
/*
* Minuten: Objekt im folgenden Format:
* {
* <minuten>: <array-or-object>,
* ...
* }
* <minuten>: String von Komma-separierten Minutenwerten, zu welchem die in <array-or-object> angegebenen Buchstaben aktiv sein sollen
* <array-or-object> : [ <object>, ...] | <object>
* <object>: { <zeile> : [ <spalte>, ... ] }
* <zeile>: Die Zeile, in welcher die Buchstaben liegen; von oben gezählt, oben ist 1.
* <spalte>: Die Spalte, in der ein einzelner Buchstabe liegt; von links gezählt, links ist 1.
* Beispiel:
* "minutes": {
* "0,1": {1: [6, 7, 9]},
* "5": [ {3: [1, 2]}, {4: [10, 11]} ]
* }
* Erklärung:
* Bei Minuten 0 und 1 sind die Buchstaben 6, 7 und 9 der ersten Zeile aktiv.
* Bei Minute 5 sind die Buchstaben 1 und 2 der Zeile 3 sowie die Buchstaben 10 und 11 der Zeile 4 aktiv.
*/
"minutes": {
"5,6,7,8,9": [h._5, h._ab],
"10,11,12,13,14": [h._10, h._ab],
"15,16,17,18,19": [h._15, h._ab],
"20,21,22,23,24": [h._20, h._ab],
"25,26,27,28,29": [h._5, h._vor, h._haubi],
"30,31,32,33,34": h._haubi,
"35,36,37,38,39": [h._5, h._ab, h._haubi],
"40,41,42,43,44": [h._20, h._vor],
"45,46,47,48,49": [h._15, h._vor],
"50,51,52,53,54": [h._10, h._vor],
"55,56,57,58,59": [h._5, h._vor]
},
// Die Stunden; gleiches Format wie bei den Minuten
"hours": {
"1": {5:[1,2,3]},
"2": {5:[4,5,6,7]},
"3": {5:[9,10,11]},
"4": {6:[1,2,3,4,5]},
"5": {6:[6,7,8,9]},
"6": {7:[1,2,3,4,5,6]},
"7": {7:[7,8,9,10,11]},
"8": {8:[1,2,3,4,5]},
"9": {8:[6,7,8,9]},
"10": {9:[1,2,3,4]},
"11": {9:[8,9,10,11]},
"12": {10:[1,2,3,4,5,6]}
}
};
// Das Layout bei der Uhr unter dem Code "de_CH" registrieren.
window,_uhr.register('de_CH', layout);

71
uhr-de_CH_genau.js Normal file
View file

@ -0,0 +1,71 @@
/*
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
var h = {
"_es_isch": {1:[1,2,4,5,6,7]},
"_genau": {3:[7,8,9,10,11]},
"_ab": {4:[4,5]},
"_vor": {4:[1,2,3]},
"_haubi": {4:[7,8,9,10,11]},
"_5": {1:[9,10,11]},
"_10": {2:[9,10,11]},
"_15": {2:[1,2,3,4,5,6]},
"_20": {3:[1,2,3,4,5,6]}
};
var layout = {
"version": 2,
"language": 'Bärndütsch (genau)',
"letters": [
'ESKISCHAFÜF',
'VIERTUBFZÄÄ',
'ZWÄNZGGENAU',
'VORABOHAUBI',
'EISZWÖISDRÜ',
'VIERIFÜFIQT',
'SÄCHSISIBNI',
'ACHTINÜNIEL',
'ZÄNIERBEUFI',
'ZWÖUFINAUHR'
],
"permanent": h._es_isch,
"minutes": {
"0": h._genau,
"5,6,7,8,9": [h._5, h._ab],
"10,11,12,13,14": [h._10, h._ab],
"15,16,17,18,19": [h._15, h._ab],
"20,21,22,23,24": [h._20, h._ab],
"25,26,27,28,29": [h._5, h._vor, h._haubi],
"30,31,32,33,34": h._haubi,
"35,36,37,38,39": [h._5, h._ab, h._haubi],
"40,41,42,43,44": [h._20, h._vor],
"45,46,47,48,49": [h._15, h._vor],
"50,51,52,53,54": [h._10, h._vor],
"55,56,57,58,59": [h._5, h._vor]
},
"hours": {
"1": {5:[1,2,3]},
"2": {5:[4,5,6,7]},
"3": {5:[9,10,11]},
"4": {6:[1,2,3,4,5]},
"5": {6:[6,7,8,9]},
"6": {7:[1,2,3,4,5,6]},
"7": {7:[7,8,9,10,11]},
"8": {8:[1,2,3,4,5]},
"9": {8:[6,7,8,9]},
"10": {9:[1,2,3,4]},
"11": {9:[8,9,10,11]},
"12": {10:[1,2,3,4,5,6]}
}
};
window,_uhr.register('de_CH_genau', layout);

64
uhr-en.js
View file

@ -12,9 +12,22 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
var h = {
"_it_is": {1:[1,2,4,5]},
"_half": {4:[1,2,3,4]},
"_to": {4:[10,11]},
"_past": {5:[1,2,3,4]},
"_o_clock": {10:[6,7,8,9,10,11]},
"_5": {3:[7,8,9,10]},
"_10": {4:[6,7,8]},
"_15": {2:[1,3,4,5,6,7,8,9]},
"_20": {3:[1,2,3,4,5,6]},
"_25": {3:[1,2,3,4,5,6,7,8,9,10]}
};
var layout = { var layout = {
language: 'English', "version": 2,
values: [ "language": 'English',
/*
[l('I', 'on'), l('T', 'on'),l('L'),l('I', 'on'),l('S', 'on'),l('B'),l('F'),l('A'),l('M'),l('P'),l('M')], [l('I', 'on'), l('T', 'on'),l('L'),l('I', 'on'),l('S', 'on'),l('B'),l('F'),l('A'),l('M'),l('P'),l('M')],
[m('A', 15, 45), l('C'),m('Q', 15, 45),m('U', 15, 45),m('A', 15, 45),m('R', 15, 45),m('T', 15, 45),m('E', 15, 45),m('R', 15, 45),l('D'),l('C')], [m('A', 15, 45), l('C'),m('Q', 15, 45),m('U', 15, 45),m('A', 15, 45),m('R', 15, 45),m('T', 15, 45),m('E', 15, 45),m('R', 15, 45),l('D'),l('C')],
[m('T', 20, 25, 35, 40), m('W', 20, 25, 35, 40),m('E', 20, 25, 35, 40),m('N', 20, 25, 35, 40),m('T', 20, 25, 35, 40),m('Y', 20, 25, 35, 40),m('F', 5, 25, 35, 55),m('I', 5, 25, 35, 55),m('V', 5, 25, 35, 55),m('E', 5, 25, 35, 55),l('X')], [m('T', 20, 25, 35, 40), m('W', 20, 25, 35, 40),m('E', 20, 25, 35, 40),m('N', 20, 25, 35, 40),m('T', 20, 25, 35, 40),m('Y', 20, 25, 35, 40),m('F', 5, 25, 35, 55),m('I', 5, 25, 35, 55),m('V', 5, 25, 35, 55),m('E', 5, 25, 35, 55),l('X')],
@ -25,8 +38,49 @@ var layout = {
[h('E', 8), h('I', 8),h('G', 8),h('H', 8),h('T', 8),h('E', 11),h('L', 11),h('E', 11),h('V', 11),h('E', 11),h('N', 11)], [h('E', 8), h('I', 8),h('G', 8),h('H', 8),h('T', 8),h('E', 11),h('L', 11),h('E', 11),h('V', 11),h('E', 11),h('N', 11)],
[h('S', 7), h('E', 7),h('V', 7),h('E', 7),h('N', 7),h('T', 12),h('W', 12),h('E', 12),h('L', 12),h('V', 12),h('E', 12)], [h('S', 7), h('E', 7),h('V', 7),h('E', 7),h('N', 7),h('T', 12),h('W', 12),h('E', 12),h('L', 12),h('V', 12),h('E', 12)],
[h('T', 10), h('E', 10),h('N', 10),l('S'),l('E'),l('O', 'sharphour'),l('C', 'sharphour'),l('L', 'sharphour'),l('O', 'sharphour'),l('C', 'sharphour'),l('K', 'sharphour')] [h('T', 10), h('E', 10),h('N', 10),l('S'),l('E'),l('O', 'sharphour'),l('C', 'sharphour'),l('L', 'sharphour'),l('O', 'sharphour'),l('C', 'sharphour'),l('K', 'sharphour')]
], */
getHour: function(date) { "letters": [
'ITLISBFAMPM',
'ACQUARTERDC',
'TWENTYFIVEX',
'HALFBTENFTO',
'PASTERUNINE',
'ONESIXTHREE',
'FOURFIVETWO',
'EIGHTELEVEN',
'SEVENTWELVE',
'TENSEOCLOCK'
],
"permanent": h._it_is,
"minutes": {
"0,1,2,3,4": h._o_clock,
"5,6,7,8,9": [h._5, h._past],
"10,11,12,13,14": [h._10, h._past],
"15,16,17,18,19": [h._15, h._past],
"20,21,22,23,24": [h._20, h._past],
"25,26,27,28,29": [h._25, h._past],
"30,31,32,33,34": [h._half, h._past],
"35,36,37,38,39": [h._25, h._to],
"40,41,42,43,44": [h._20, h._to],
"45,46,47,48,49": [h._15, h._to],
"50,51,52,53,54": [h._10, h._to],
"55,56,57,58,59": [h._5, h._to]
},
"hours": {
"1": {6:[1,2,3]},
"2": {7:[9,10,11]},
"3": {6:[7,8,9,10,11]},
"4": {7:[1,2,3,4]},
"5": {7:[5,6,7,8]},
"6": {6:[4,5,6]},
"7": {9:[1,2,3,4,5]},
"8": {8:[1,2,3,4,5]},
"9": {5:[8,9,10,11]},
"10": {10:[1,2,3]},
"11": {8:[6,7,8,9,10,11]},
"12": {9:[6,7,8,9,10,11]}
},
"getHour": function(date) {
var hour = date.getHours(); var hour = date.getHours();
if (date.getMinutes() >= 35) { if (date.getMinutes() >= 35) {
return hour + 1; return hour + 1;
@ -34,4 +88,4 @@ var layout = {
return hour; return hour;
} }
}; };
window._uhr.languages['en'] = layout; window,_uhr.register('en', layout);

36
uhr-yellow.css Normal file
View file

@ -0,0 +1,36 @@
/*
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
.uhr.yellow {
background-color: #fd0;
}
.uhr.yellow .dot.active{
border-color: #fff;
box-shadow: 0 0 0.1em #fff;
}
.uhr.yellow .letter.active{
color: #fff;
text-shadow: 0 0 0.1em #fff;
}
.yellow .onoffswitch-inner:before {
background-color: #fd0;
}
.uhr.yellow .dot:not(.active) {
border-color: rgba(0,0,0,0.05);
box-shadow: 0 0 0.1em rgba(0,0,0,0.05);
}
.uhr.yellow .letter:not(.active) {
color: rgba(0,0,0,0.05);
text-shadow: 0 0 0.1em rgba(0,0,0,0.05);
}

286
uhr.js
View file

@ -13,7 +13,7 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
(function($) { (function($) {
"use strict"; 'use strict';
if (window._uhr !== undefined) { if (window._uhr !== undefined) {
return; return;
@ -22,7 +22,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
window._uhr = { window._uhr = {
id: 0, id: 0,
languages: [], languages: [],
themes: [] themes: [],
register: function(code, language) {
for (var i = 0; i < this.languages.length; i++) {
if (code == this.languages[i].code) {
console.error('Error: Language code ' + code + ' cannot be registered for language "' + language.language + '" because it is already registered for language "' + this.languages[i].language + '"!');
return false;
}
}
language.code = code;
this.languages.push(language);
}
}; };
// auto-detect themes // auto-detect themes
var styleSheets = $('head link[rel=stylesheet]'); var styleSheets = $('head link[rel=stylesheet]');
@ -34,7 +44,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
if (name === undefined) { if (name === undefined) {
name = styleClass; name = styleClass;
} }
window._uhr.themes.push({'class': styleClass, 'name': name}); window._uhr.themes.push({'styleClass': styleClass, 'name': name});
} }
} }
// fall-back if no theme was included // fall-back if no theme was included
@ -46,7 +56,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
width: '100%', width: '100%',
status: 'on', status: 'on',
language: 'de_CH', language: 'de_CH',
theme: window._uhr.themes[0].class, theme: window._uhr.themes[0].styleClass,
force: false, force: false,
controls: true controls: true
}, },
@ -54,6 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
if (!this._isOn()) { if (!this._isOn()) {
var uhr = this; var uhr = this;
this._timer = window.setInterval(function() { this._timer = window.setInterval(function() {
uhr.options.time = new Date();
uhr._update(); uhr._update();
}, 1000); }, 1000);
this._update(); this._update();
@ -98,21 +109,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
} }
}, },
time: function(time) { time: function(time) {
this.options.time = time; this._currentMinute = -1;
if (time == null) { if (time == null) {
this._currentMinute = -1; this.options.time = new Date();
this._update();
} else { } else {
if (this._timer != null) { if (this._timer != null) {
window.clearInterval(this._timer); window.clearInterval(this._timer);
} }
var renderer = new UhrRenderer(this._language(), this.element.find('.letterarea')); this.options.time = time;
var uhr = this;
renderer.render(this, function() {
uhr._show(time);
});
} }
this._update();
}, },
// private variables // private variables
_id: -1, _id: -1,
@ -124,7 +130,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}, },
_update: function() { _update: function() {
if (this._isOn()) { if (this._isOn()) {
var time = new Date(); var time = this.options.time;
if (time.getMinutes() == this._currentMinute) { if (time.getMinutes() == this._currentMinute) {
return; return;
} }
@ -152,7 +158,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
} }
}, },
_language: function() { _language: function() {
return window._uhr.languages[this.options.language]; for (var i = 0; i < window._uhr.languages.length; i++) {
var language = window._uhr.languages[i];
if (language.code == this.options.language) {
return language;
}
}
// fallback: return empty object
return {};
}, },
_highlight: function(itemClass) { _highlight: function(itemClass) {
this.element.find('.item.' + itemClass).addClass('active'); this.element.find('.item.' + itemClass).addClass('active');
@ -174,8 +187,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
if (typeof this._language().getCoarseMinute === 'function') { if (typeof this._language().getCoarseMinute === 'function') {
return this._language().getCoarseMinute(date); return this._language().getCoarseMinute(date);
} }
var minutes = date.getMinutes(); return date.getMinutes();
return minutes - this._getDotMinute(date);
}, },
_getDotMinute: function(date) { _getDotMinute: function(date) {
if (typeof this._language().getDotMinute === 'function') { if (typeof this._language().getDotMinute === 'function') {
@ -195,10 +207,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}, },
_create: function() { _create: function() {
this._id = window._uhr.id++; this._id = window._uhr.id++;
var userTime = this.options.time;
if (this.options.time === undefined) {
this.options.time = new Date();
}
this._setupHTML(); this._setupHTML();
this._wireFunctionality(); this._wireFunctionality();
if (this.options.time !== undefined) { if (userTime !== undefined) {
this.time(this.options.time); this.time(userTime);
} }
}, },
_setupHTML: function() { _setupHTML: function() {
@ -229,17 +245,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
e.after(toggleSwitch); e.after(toggleSwitch);
// language chooser // language chooser
var options = []; if (window._uhr.languages.length > 1) {
for (var code in window._uhr.languages) {
if (window._uhr.languages.hasOwnProperty(code)) {
var language = window._uhr.languages[code];
options.push('<option value="' + code + '">' + language.language + '</option>');
}
}
if (options.length > 1) {
var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>'); var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>');
for (var i = 0; i < options.length; i++) { for (var i = 0; i < window._uhr.languages.length; i++) {
languageChooser.append(options[i]); var language = window._uhr.languages[i];
languageChooser.append('<option value="' + language.code + '">' + language.language + '</option>');
} }
e.after(languageChooser); e.after(languageChooser);
} }
@ -249,7 +259,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>'); var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>');
for (var i = 0; i < window._uhr.themes.length; i++) { for (var i = 0; i < window._uhr.themes.length; i++) {
var theme = window._uhr.themes[i]; var theme = window._uhr.themes[i];
themeChooser.append('<option value="' + theme.class + '">' + theme.name + '</option>'); themeChooser.append('<option value="' + theme.styleClass + '">' + theme.name + '</option>');
} }
e.after(themeChooser); e.after(themeChooser);
} }
@ -283,6 +293,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
if (selectedLanguage == undefined || this.options.force) { if (selectedLanguage == undefined || this.options.force) {
selectedLanguage = this.options.language; selectedLanguage = this.options.language;
} }
var found = false;
for (var i = 0; i < window._uhr.languages.length; i++) {
var code = window._uhr.languages[i].code;
if (selectedLanguage == code) {
found = true;
break;
}
}
if (!found) {
var fallback;
if (window._uhr.languages.length > 0) {
fallback = window._uhr.languages[0].code;
} else {
fallback = '';
}
console.warn("Language " + selectedLanguage + " not found! Using fallback: " + fallback);
selectedLanguage = fallback;
}
languageChooser.val(selectedLanguage); languageChooser.val(selectedLanguage);
this.options.language = ""; this.options.language = "";
this.language(selectedLanguage); this.language(selectedLanguage);
@ -296,16 +324,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
if (selectedTheme == undefined || this.options.force) { if (selectedTheme == undefined || this.options.force) {
selectedTheme = this.options.theme; selectedTheme = this.options.theme;
} }
var found = false; found = false;
for (var i = 0; i < window._uhr.themes.length; i++) { for (var i = 0; i < window._uhr.themes.length; i++) {
var styleClass = window._uhr.themes[i].class; var styleClass = window._uhr.themes[i].styleClass;
if (selectedTheme == styleClass) { if (selectedTheme == styleClass) {
found = true; found = true;
break; break;
} }
} }
if (!found) { if (!found) {
var fallback = window._uhr.themes[0].class; var fallback = window._uhr.themes[0].styleClass;
console.warn("Theme " + selectedTheme + " not found! Using fallback: " + fallback); console.warn("Theme " + selectedTheme + " not found! Using fallback: " + fallback);
selectedTheme = fallback; selectedTheme = fallback;
} }
@ -314,89 +342,119 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
this.theme(selectedTheme); this.theme(selectedTheme);
} }
}); });
})(jQuery); /**
* Hilfsklasse zum Rendern der Uhr.
/** * @param layout Layout-Objekt, das gerendert werden soll.
* Hilfsklasse zum Rendern der Uhr. * @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll.
* @param layout Layout-Objekt, das gerendert werden soll. */
* @param renderarea Das jQuery-gewrappte HTML-Element, auf dem gerendert werden soll. function UhrRenderer(layout, renderarea) {
*/ this.layout = layout;
function UhrRenderer(layout, renderarea) { this.renderarea = renderarea;
this.layout = layout; }
this.renderarea = renderarea; UhrRenderer.prototype.render = function(uhr, beforeshow) {
} var renderer = this;
UhrRenderer.prototype.render = function(uhr, beforeshow) { if (this.layout._parsed === undefined) {
var renderer = this; switch (this.layout.version) {
this.renderarea.fadeOut('fast', function() { case 2:
renderer.renderarea.empty(); var delegate = new _UhrRendererV2Delegate(this.layout);
for (var y = 0; y < renderer.layout.values.length; y++) { this.layout._parsed = delegate.parse();
for (var x = 0; x < renderer.layout.values[y].length; x++) { break;
var letter = renderer.layout.values[y][x]; default:
renderer.renderarea.append(letter.toString()); console.warn("Unknown layout version: '" + this.layout.version + "'");
} return;
if (y < renderer.layout.values.length - 1) {
renderer.renderarea.append('<br/>');
} }
} }
if (typeof beforeshow === 'function') { var letters = this.layout._parsed;
beforeshow(); this.renderarea.fadeOut('fast', function() {
} renderer.renderarea.empty();
renderer.renderarea.fadeIn('fast'); for (var y = 0; y < letters.length; y++) {
}); for (var x = 0; x < letters[y].length; x++) {
}; var letter = letters[y][x];
/** renderer.renderarea.append(letter.toString());
* Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays. }
* @param value Der Buchstabe, der Dargestellt werden soll. if (y < letters.length - 1) {
* @param style Die CSS-Styleklassen des Buchstabens. renderer.renderarea.append('<br/>');
*/ }
function Letter(value, style) { }
this.value = value; if (typeof beforeshow === 'function') {
this.style = style || ''; beforeshow();
this.getStyle = function() { }
return 'item letter ' + style; renderer.renderarea.fadeIn('fast');
});
}; };
this.getValue = function() { function _UhrRendererV2Delegate(layout) {
return value; this.layout = layout;
this._parseArrayOrObject = function(letters, styleClass, input) {
if (Array.isArray(input)) {
for (var i = 0; i < input.length; i++) {
this._parseObject(letters, styleClass, input[i]);
}
} else {
this._parseObject(letters, styleClass, input);
}
}
this._parseObject = function(letters, styleClass, object) {
for (var line in object) {
if (object.hasOwnProperty(line)) {
var highlightLetters = object[line];
for (var i = 0; i < highlightLetters.length; i++) {
var x = highlightLetters[i] - 1;
letters[line - 1][x].addStyle(styleClass);
}
}
}
}
this._parseTimeDefinition = function(letters, styleClass, definition) {
for (var listString in definition) {
if (definition.hasOwnProperty(listString)) {
var array = listString.split(',');
var highlightLetters = definition[listString];
for (var index = 0; index < array.length; index++) {
this._parseArrayOrObject(letters, styleClass + array[index], highlightLetters);
}
}
}
}
} }
} _UhrRendererV2Delegate.prototype.parse = function() {
Letter.prototype.toString = function letterToString() { var letters = [];
return '<span class="' + this.getStyle() + '">' + this.getValue() + '</span>'; for (var i = 0; i < this.layout.letters.length; i++) {
}; var line = [];
/** var string = this.layout.letters[i];
* Hilfsfunktion, um einen Buchstaben zu erzeugen. for (var c = 0; c < string.length; c++) {
* var character = new Letter(string[c]);
* @param letter string: Der Buchstabe, der angezeigt werden soll line.push(character);
* @param style string: CSS-Klasse(n) als String }
* @example l('I', 'is') erzeugt den Buchstaben 'I' mit der CSS-Styleklasse 'is' letters.push(line);
*/ }
function l(letter, style) { this._parseArrayOrObject(letters, 'on', this.layout.permanent);
return new Letter(letter, style); this._parseTimeDefinition(letters, 'minute', this.layout.minutes);
} this._parseTimeDefinition(letters, 'hour', this.layout.hours);
/** return letters;
* Hilfsfunktion, um einen Buchstaben zu erzeugen, der zu einem Stunden-Wort gehört. };
* /**
* @param letter string: Der Buchstabe, der angezeigt werden soll * Ein Buchstabe. Hilfsklasse für den Renderer und Inhalt der Layout-Arrays.
* @param hours... integer: Eine Aufzählung von Stundenwerten, zu welchen der Buchstabe als aktiv angezeigt werden soll * @param value Der Buchstabe, der Dargestellt 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 * @param style Die CSS-Styleklassen des Buchstabens.
*/ */
function h(letter) { function Letter(value, style) {
var style = ''; this.value = value;
for (var i = 1; i < arguments.length; i++) { this.style = style || '';
style += ' hour' + arguments[i]; this.getStyle = function() {
return 'item letter ' + this.style;
};
this.getValue = function() {
return value;
}
this.addStyle = function(style) {
if (this.style == '') {
this.style = style;
} else {
this.style += ' ' + style;
}
}
} }
return l(letter, style); Letter.prototype.toString = function letterToString() {
} return '<span class="' + this.getStyle() + '">' + this.getValue() + '</span>';
/** };
* Hilfsfunktion, um einen Buchstaben zu erzeugen, der zu einem Minuten-Wort gehört. })(jQuery);
*
* @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);
}