diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index cbf1533..e68fa40 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -559,59 +559,28 @@ const delay = ms => new Promise(res => setTimeout(res, ms)); class RandomPixelCanvas { constructor(containerElement, options = {}) { this.container = containerElement; -class RandomPixelPlaceholder { - constructor(parent, options = {}) { - this.container = parent; this.width = options.width || 400; this.height = options.height || 300; this.colors = options.colors || ['#000000', '#ffffff']; this.filter = options.filter || ''; - this.type = options.type || 'canvas'; // 'canvas' or 'img' - this.element = this.createElement(); + this.canvas = this.createCanvas(); - this.addContextToElement(); + this.fillWithRandomPixels(); } - createElement() { - if (this.type === 'img') { - const img = document.createElement('img'); - img.style.filter = this.filter; + createCanvas() { + const canvas = document.createElement('canvas'); + canvas.width = this.width; + canvas.height = this.height; + canvas.style.filter = this.filter; - this.container.appendChild(img); + this.container.appendChild(canvas); - return img; - } else { - const canvas = document.createElement('canvas'); - canvas.width = this.width; - canvas.height = this.height; - canvas.style.filter = this.filter; - - this.container.appendChild(canvas); - - return canvas; - } + return canvas; } - addContextToElement() { - if (this.type === 'img') { - // Create intermediate canvas - const canvas = document.createElement('canvas'); - canvas.width = this.width; - canvas.height = this.height; - - this.fillWithRandomPixels(canvas); - - // Convert canvas to image data URL and set as img src - this.element.src = canvas.toDataURL(); - this.element.width = this.width; - this.element.height = this.height; - } else { - this.fillWithRandomPixels(this.element); - } - } - - fillWithRandomPixels(canvas) { - const ctx = canvas.getContext('2d'); + fillWithRandomPixels() { + const ctx = this.canvas.getContext('2d'); const imageData = ctx.createImageData(this.width, this.height); const data = imageData.data; diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index c8535c6..57cdd7c 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -61,7 +61,6 @@ tags: this.#resize(); window.addEventListener('resize', () => this.#resize()); - // console.debug(this); if (this.options.debug) { console.group('Clock'); console.info('\nOptions:', this.options, '\n\n'); @@ -78,16 +77,13 @@ tags: part.element.style.width = this.options.size + 'px'; } - // part.element.width = part.element.offsetWidth; - // part.element.height = part.element.offsetHeight; - part.element.width = this.options.size; - part.element.height = this.options.size; + part.element.width = part.element.offsetWidth; + part.element.height = part.element.offsetHeight; this.draw(); }); } - // TODO: Zuweisung von shapes zu parts anpassen draw() { // TODO: Nur geänderte Teile löschen this.parts.forEach(part => { @@ -307,6 +303,7 @@ tags: } #createContext(names) { + let parts = []; const wrap = document.createElement('div'); wrap.style.position = 'relative'; @@ -447,7 +444,6 @@ tags: clock.draw(); // TODO: Alternative mit requestAnimationFrame() - // TODO: Möglichkeit für Start/Stop wie bei TimeDisplay setInterval(() => { clock.update(); }, 1000); diff --git a/source/screens/demo/examples/game/tfw.liquid b/source/screens/demo/examples/game/tfw.liquid index 1365630..ca55174 100644 --- a/source/screens/demo/examples/game/tfw.liquid +++ b/source/screens/demo/examples/game/tfw.liquid @@ -25,8 +25,8 @@ tags: