135 lines
3.2 KiB
JavaScript
135 lines
3.2 KiB
JavaScript
var clock = null;
|
|
var currentMinute = -1;
|
|
|
|
function highlightCurrentTime() {
|
|
var now = new Date();
|
|
var hour = now.getHours();
|
|
var minute = now.getMinutes();
|
|
if (minute == currentMinute) {
|
|
return;
|
|
}
|
|
currentMinute = minute;
|
|
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);
|
|
}
|
|
|
|
function clearDisplay() {
|
|
$('.item').removeClass('active');
|
|
}
|
|
function resetItems() {
|
|
clearDisplay()
|
|
highlight('alwayson');
|
|
}
|
|
|
|
function highlight(itemClass) {
|
|
$('.item.' + itemClass).addClass('active');
|
|
}
|
|
|
|
function normalizeHour(hour) {
|
|
if (hour > 12) {
|
|
hour %= 12;
|
|
}
|
|
if (hour == 0) {
|
|
return 12;
|
|
}
|
|
return hour;
|
|
}
|
|
|
|
function startClock() {
|
|
if (clock == null) {
|
|
clock = window.setInterval(highlightCurrentTime, 1000);
|
|
}
|
|
}
|
|
|
|
function stopClock() {
|
|
if (clock != null) {
|
|
window.clearInterval(clock);
|
|
clock = null;
|
|
currentMinute = -1;
|
|
clearDisplay();
|
|
}
|
|
}
|
|
|
|
function updateClockState() {
|
|
if ($('#onoffswitch').is(':checked')) {
|
|
startClock();
|
|
} else {
|
|
stopClock();
|
|
}
|
|
}
|
|
function switchTheme(element) {
|
|
var theme = $(element).val()
|
|
$('#theme').attr('href', 'uhr-' + theme + '.css');
|
|
}
|
|
|
|
function render(layout) {
|
|
var container = $('#renderarea');
|
|
for (var y = 0; y < layout.values.length; y++) {
|
|
for (var x = 0; x < layout.values[y].length; x++) {
|
|
var letter = layout.values[y][x];
|
|
container.append(letter.toString());
|
|
}
|
|
if (y < layout.values.length - 1) {
|
|
container.append('<br/>');
|
|
}
|
|
}
|
|
}
|
|
|
|
function Letter(value, style = '') {
|
|
this.value = value;
|
|
this.style = style;
|
|
this.getStyle = function() {
|
|
return "item letter " + style;
|
|
}
|
|
this.getValue = function() {
|
|
return value;
|
|
}
|
|
}
|
|
Letter.prototype.toString = function letterToString() {
|
|
return "<span class=\"" + this.getStyle() + "\">" + this.getValue() + "</span>";
|
|
}
|
|
/**
|
|
* 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 hour integer: Die Stunde, zu der der Buchstabe gehört (Ganzzahl zwischen 1 und 12)
|
|
* @example h('Z', 2) erzeugt den Buchstaben 'Z', der um 2:xx und 14:xx aktiv angezeigt wird
|
|
*/
|
|
function h(letter, hour) {
|
|
return l(letter, 'hour' + hour);
|
|
}
|
|
/**
|
|
* 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);
|
|
}
|
|
|