From 2ada8acc644f6970525afb8700a857a57c0e222c Mon Sep 17 00:00:00 2001 From: Manuel Friedli Date: Wed, 5 Oct 2022 01:28:29 +0200 Subject: [PATCH] Simple, but working!, prototype of a WebComponent based clock. --- webcomponent/clock.js | 89 +++++++++++ webcomponent/highlighter.js | 86 +++++++++++ webcomponent/index.html | 17 +++ webcomponent/language-de_ch.js | 65 ++++++++ webcomponent/letter.js | 24 +++ webcomponent/parser.js | 268 +++++++++++++++++++++++++++++++++ webcomponent/template.js | 125 +++++++++++++++ 7 files changed, 674 insertions(+) create mode 100644 webcomponent/clock.js create mode 100644 webcomponent/highlighter.js create mode 100644 webcomponent/index.html create mode 100644 webcomponent/language-de_ch.js create mode 100644 webcomponent/letter.js create mode 100644 webcomponent/parser.js create mode 100644 webcomponent/template.js diff --git a/webcomponent/clock.js b/webcomponent/clock.js new file mode 100644 index 0000000..6374e06 --- /dev/null +++ b/webcomponent/clock.js @@ -0,0 +1,89 @@ +import {Layout as LayoutDE_CH} from './language-de_ch.js'; +import {Parser} from "./parser.js"; +import {Highlighter} from "./highlighter.js"; +import {template} from "./template.js"; + +class WordClock extends HTMLElement { + _shadowRoot = null; + + constructor() { + super(); + this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot.appendChild(template.content.cloneNode(true)); + } + + static get observedAttributes() { + return ['language', 'mode', 'color', 'state', 'debug']; + } + + get language() { + return this.getAttribute('language'); + } + + get mode() { + return this.getAttribute('mode'); + } + + get color() { + return this.getAttribute('color'); + } + + get state() { + return this.getAttribute('state'); + } + + get debug() { + return this.getAttribute('debug'); + } + + onclick(event) { + console.log(event); + } + + connectedCallback() { + if (!this._isDebug()) { + this.shadowRoot.getElementById('log').style.display = 'none'; + } + + this._log("connected!") + + const layout = new LayoutDE_CH(); + const parser = new Parser(layout); + const letters = parser.parse(); + + const letterarea = this.shadowRoot.getElementById('letterarea'); + letters.forEach((line, index, array) => { + line.forEach(letter => { + letterarea.append(letter.toHTMLElement()); + }); + if (index < array.length - 1) { + letterarea.append(document.createElement('br')); + } + }); + + this._highlighter = new Highlighter(layout, this.shadowRoot.getElementById('clock'), this.mode); + this._timer = window.setInterval(() => this._tick(), 1000); + } + + disconnectedCallback() { + window.clearInterval(this._timer); + } + + _tick() { + this._highlighter.display(new Date()); + } + + _log(...elements) { + if (this._isDebug()) { + for (let e of elements) { + this.shadowRoot.getElementById('log').append(`${e}\n`); + } + } + } + + _isDebug() { + return this.debug === 'on' || this.debug === 'true' || this.debug === '1'; + } +} + +window.customElements.define("word-clock", WordClock); diff --git a/webcomponent/highlighter.js b/webcomponent/highlighter.js new file mode 100644 index 0000000..41d60f1 --- /dev/null +++ b/webcomponent/highlighter.js @@ -0,0 +1,86 @@ +export class Highlighter { + constructor(layout, clockElement, mode) { + this._layout = layout; + this._clockElement = clockElement; + this._mode = mode === 'seconds' ? 'seconds' : 'time'; + this._time = null; + } + + display(time) { + if (this._mode === 'seconds') { + const second = this._getSecond(time); + if (this._getCurrentSecond() !== second) { + this._clearAll(); + this._highlight(`second${second}`); + } + } else { + const minute = this._getMinute(time); + if (this._getCurrentMinute() !== minute) { + const dotMinute = this._getDotMinute(time); + const hour = this._getHour(time); + this._clearAll(); + this._highlight('on'); + for (let i = 1; i <= dotMinute; i++) { + this._highlight(`dot${i}`); + } + this._highlight(`minute${minute}`); + this._highlight(`hour${hour}`); + } + } + this._time = time; + } + + _getSecond(time) { + if (typeof this._layout.getSeconds === 'function') { + return this._layout.getSeconds(time); + } + return time.getSeconds(); + } + + _getDotMinute(time) { + if (typeof this._layout.getDotMinute === 'function') { + return this._layout.getDotMinute(time); + } + return time.getMinutes() % 5; + } + + _getMinute(time) { + if (typeof this._layout.getMinutes === 'function') { + return this._layout.getMinutes(time); + } + return time.getMinutes(); + } + + _getHour(time) { + if (typeof this._layout.getHours === 'function') { + return this._layout.getHours(time); + } + const hour = time.getHours(); + if (time.getMinutes() >= 25) { + return (hour + 1) % 24; + } + return hour; + } + + _clearAll() { + const items = this._clockElement.getElementsByClassName('item'); + for (let i = 0; i < items.length; i++) { + items.item(i).classList.remove('active'); + } + } + + _highlight(itemClass) { + const items = this._clockElement.getElementsByClassName(`item ${itemClass}`); + for (let i = 0; i < items.length; i++) { + items.item(i).classList.add('active'); + } + } + + _getCurrentSecond() { + return !!this._time && this._time.getSeconds() || -1; + } + + _getCurrentMinute() { + return !!this._time && this._time.getMinutes() || -1; + } +} diff --git a/webcomponent/index.html b/webcomponent/index.html new file mode 100644 index 0000000..df506d1 --- /dev/null +++ b/webcomponent/index.html @@ -0,0 +1,17 @@ + + + + + Test page + + + + + + + diff --git a/webcomponent/language-de_ch.js b/webcomponent/language-de_ch.js new file mode 100644 index 0000000..fff46f6 --- /dev/null +++ b/webcomponent/language-de_ch.js @@ -0,0 +1,65 @@ +export class Layout { + _es_isch = {1: [1, 2, 4, 5, 6, 7]}; + _ab = {4: [1, 2]}; + _vor = {3: [9, 10, 11]}; + _haubi = {4: [4, 5, 6, 7, 8]}; + _fuef = {1: [9, 10, 11]}; + _zae = {2: [9, 10, 11]}; + _viertu = {2: [1, 2, 3, 4, 5, 6]}; + _zwaenzg = {3: [1, 2, 3, 4, 5, 6]}; + + constructor() { + } + + get letters() { + return [ + 'ESKISCHAFÜF', + 'VIERTUBFZÄÄ', + 'ZWÄNZGSIVOR', + 'ABOHAUBIEGE', + 'EISZWÖISDRÜ', + 'VIERIFÜFIQT', + 'SÄCHSISIBNI', + 'ACHTINÜNIEL', + 'ZÄNIERBEUFI', + 'ZWÖUFINAUHR' + ]; + } + + get permanentlyOn() { + return this._es_isch; + } + + get minutes() { + return { + "5,6,7,8,9": [this._fuef, this._ab], + "10,11,12,13,14": [this._zae, this._ab], + "15,16,17,18,19": [this._viertu, this._ab], + "20,21,22,23,24": [this._zwaenzg, this._ab], + "25,26,27,28,29": [this._fuef, this._vor, this._haubi], + "30,31,32,33,34": [this._haubi], + "35,36,37,38,39": [this._fuef, this._ab, this._haubi], + "40,41,42,43,44": [this._zwaenzg, this._vor], + "45,46,47,48,49": [this._viertu, this._vor], + "50,51,52,53,54": [this._zae, this._vor], + "55,56,57,58,59": [this._fuef, this._vor] + }; + } + + get hours() { + return { + "0,12": {10: [1, 2, 3, 4, 5, 6]}, + "1,13": {5: [1, 2, 3]}, + "2,14": {5: [4, 5, 6, 7]}, + "3,15": {5: [9, 10, 11]}, + "4,16": {6: [1, 2, 3, 4, 5]}, + "5,17": {6: [6, 7, 8, 9]}, + "6,18": {7: [1, 2, 3, 4, 5, 6]}, + "7,19": {7: [7, 8, 9, 10, 11]}, + "8,20": {8: [1, 2, 3, 4, 5]}, + "9,21": {8: [6, 7, 8, 9]}, + "10,22": {9: [1, 2, 3, 4]}, + "11,23": {9: [8, 9, 10, 11]} + }; + } +} diff --git a/webcomponent/letter.js b/webcomponent/letter.js new file mode 100644 index 0000000..3b2f8c1 --- /dev/null +++ b/webcomponent/letter.js @@ -0,0 +1,24 @@ +export default class Letter { + constructor(value, style) { + this._value = value; + this._style = style; + } + + addStyle(style) { + if (!this._style) { + this._style = style; + } else { + this._style += ' ' + style; + } + }; + + toHTMLElement() { + const element = document.createElement('span'); + element.classList.add('item', 'letter'); + if (!!this._style) { + element.classList.add(...this._style.split(' ')); + } + element.innerHTML = this._value; + return element; + } +} diff --git a/webcomponent/parser.js b/webcomponent/parser.js new file mode 100644 index 0000000..785acab --- /dev/null +++ b/webcomponent/parser.js @@ -0,0 +1,268 @@ +import Letter from "./letter.js"; + +export class Parser { + constructor(layout) { + this._layout = layout; + } + + _vorne0 = { + 3: [2, 3, 4], + 4: [1, 5], + 5: [1, 4, 5], + 6: [1, 3, 5], + 7: [1, 2, 5], + 8: [1, 5], + 9: [2, 3, 4] + }; + _hinten0 = { + 3: [8, 9, 10], + 4: [7, 11], + 5: [7, 10, 11], + 6: [7, 9, 11], + 7: [7, 8, 11], + 8: [7, 11], + 9: [8, 9, 10] + }; + _vorne1 = { + 3: [3], + 4: [2, 3], + 5: [3], + 6: [3], + 7: [3], + 8: [3], + 9: [2, 3, 4] + }; + _hinten1 = { + 3: [9], + 4: [8, 9], + 5: [9], + 6: [9], + 7: [9], + 8: [9], + 9: [8, 9, 10] + }; + _vorne2 = { + 3: [2, 3, 4], + 4: [1, 5], + 5: [5], + 6: [4], + 7: [3], + 8: [2], + 9: [1, 2, 3, 4, 5] + }; + _hinten2 = { + 3: [8, 9, 10], + 4: [7, 11], + 5: [11], + 6: [10], + 7: [9], + 8: [8], + 9: [7, 8, 9, 10, 11] + }; + _vorne3 = { + 3: [1, 2, 3, 4, 5], + 4: [4], + 5: [3], + 6: [4], + 7: [5], + 8: [1, 5], + 9: [2, 3, 4] + }; + _hinten3 = { + 3: [7, 8, 9, 10, 11], + 4: [10], + 5: [9], + 6: [10], + 7: [11], + 8: [7, 11], + 9: [8, 9, 10] + }; + _vorne4 = { + 3: [4], + 4: [3, 4], + 5: [2, 4], + 6: [1, 4], + 7: [1, 2, 3, 4, 5], + 8: [4], + 9: [4] + }; + _hinten4 = { + 3: [10], + 4: [9, 10], + 5: [8, 10], + 6: [7, 10], + 7: [7, 8, 9, 10, 11], + 8: [10], + 9: [10] + }; + _vorne5 = { + 3: [1, 2, 3, 4, 5], + 4: [1], + 5: [1, 2, 3, 4], + 6: [5], + 7: [5], + 8: [1, 5], + 9: [2, 3, 4] + }; + _hinten5 = { + 3: [7, 8, 9, 10, 11], + 4: [7], + 5: [7, 8, 9, 10], + 6: [11], + 7: [11], + 8: [7, 11], + 9: [8, 9, 10] + }; + _hinten6 = { + 3: [9, 10], + 4: [8], + 5: [7], + 6: [7, 8, 9, 10], + 7: [7, 11], + 8: [7, 11], + 9: [8, 9, 10] + }; + _hinten7 = { + 3: [7, 8, 9, 10, 11], + 4: [11], + 5: [10], + 6: [9], + 7: [8], + 8: [8], + 9: [8] + }; + _hinten8 = { + 3: [8, 9, 10], + 4: [7, 11], + 5: [7, 11], + 6: [8, 9, 10], + 7: [7, 11], + 8: [7, 11], + 9: [8, 9, 10] + }; + _hinten9 = { + 3: [8, 9, 10], + 4: [7, 11], + 5: [7, 11], + 6: [8, 9, 10, 11], + 7: [11], + 8: [10], + 9: [8, 9] + }; + _seconds = { + "0": [this._vorne0, this._hinten0], + "1": [this._vorne0, this._hinten1], + "2": [this._vorne0, this._hinten2], + "3": [this._vorne0, this._hinten3], + "4": [this._vorne0, this._hinten4], + "5": [this._vorne0, this._hinten5], + "6": [this._vorne0, this._hinten6], + "7": [this._vorne0, this._hinten7], + "8": [this._vorne0, this._hinten8], + "9": [this._vorne0, this._hinten9], + "10": [this._vorne1, this._hinten0], + "11": [this._vorne1, this._hinten1], + "12": [this._vorne1, this._hinten2], + "13": [this._vorne1, this._hinten3], + "14": [this._vorne1, this._hinten4], + "15": [this._vorne1, this._hinten5], + "16": [this._vorne1, this._hinten6], + "17": [this._vorne1, this._hinten7], + "18": [this._vorne1, this._hinten8], + "19": [this._vorne1, this._hinten9], + "20": [this._vorne2, this._hinten0], + "21": [this._vorne2, this._hinten1], + "22": [this._vorne2, this._hinten2], + "23": [this._vorne2, this._hinten3], + "24": [this._vorne2, this._hinten4], + "25": [this._vorne2, this._hinten5], + "26": [this._vorne2, this._hinten6], + "27": [this._vorne2, this._hinten7], + "28": [this._vorne2, this._hinten8], + "29": [this._vorne2, this._hinten9], + "30": [this._vorne3, this._hinten0], + "31": [this._vorne3, this._hinten1], + "32": [this._vorne3, this._hinten2], + "33": [this._vorne3, this._hinten3], + "34": [this._vorne3, this._hinten4], + "35": [this._vorne3, this._hinten5], + "36": [this._vorne3, this._hinten6], + "37": [this._vorne3, this._hinten7], + "38": [this._vorne3, this._hinten8], + "39": [this._vorne3, this._hinten9], + "40": [this._vorne4, this._hinten0], + "41": [this._vorne4, this._hinten1], + "42": [this._vorne4, this._hinten2], + "43": [this._vorne4, this._hinten3], + "44": [this._vorne4, this._hinten4], + "45": [this._vorne4, this._hinten5], + "46": [this._vorne4, this._hinten6], + "47": [this._vorne4, this._hinten7], + "48": [this._vorne4, this._hinten8], + "49": [this._vorne4, this._hinten9], + "50": [this._vorne5, this._hinten0], + "51": [this._vorne5, this._hinten1], + "52": [this._vorne5, this._hinten2], + "53": [this._vorne5, this._hinten3], + "54": [this._vorne5, this._hinten4], + "55": [this._vorne5, this._hinten5], + "56": [this._vorne5, this._hinten6], + "57": [this._vorne5, this._hinten7], + "58": [this._vorne5, this._hinten8], + "59": [this._vorne5, this._hinten9] + }; + + _parseArrayOrObject(letters, styleClass, input) { + if (typeof input !== 'undefined' && input !== null) { + if (Array.isArray(input)) { + input.forEach(item => { + this._parseObject(letters, styleClass, item); + }); + } else { + this._parseObject(letters, styleClass, input); + } + } + } + + _parseObject(letters, styleClass, object) { + if (typeof object !== 'undefined' && object !== null) { + Object.keys(object).forEach(y => { + const highlightLetters = object[y]; + highlightLetters.forEach(x => { + letters[y - 1][x - 1].addStyle(styleClass); + }); + }); + } + } + + _parseTimeDefinition(letters, styleClass, definition) { + if (typeof definition !== 'undefined' && definition !== null) { + Object.keys(definition).forEach(listString => { + const array = listString.split(','); + const highlightLetters = definition[listString]; + array.forEach(item => this._parseArrayOrObject(letters, styleClass + item, highlightLetters)); + }); + } + } + + parse() { + const letters = []; + this._layout.letters.forEach(string => { + const line = []; + for (let c = 0; c < string.length; c++) { + const character = new Letter(string[c]); + line.push(character); + } + letters.push(line); + }); + this._parseArrayOrObject(letters, 'on', this._layout.permanentlyOn); + if (typeof this._layout.seconds !== 'undefined' && this._layout.seconds !== null) { + this._parseTimeDefinition(letters, 'second', this._layout.seconds); + } else { + this._parseTimeDefinition(letters, 'second', this._seconds); + } + this._parseTimeDefinition(letters, 'minute', this._layout.minutes); + this._parseTimeDefinition(letters, 'hour', this._layout.hours); + return letters; + }; +} diff --git a/webcomponent/template.js b/webcomponent/template.js new file mode 100644 index 0000000..f3b9548 --- /dev/null +++ b/webcomponent/template.js @@ -0,0 +1,125 @@ +export const template = document.createElement('template'); +template.innerHTML = ` + +
+ + + + +
+
+
+

+`;