diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index e68fa40..cbf1533 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -559,28 +559,59 @@ 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.canvas = this.createCanvas(); + this.type = options.type || 'canvas'; // 'canvas' or 'img' + this.element = this.createElement(); - this.fillWithRandomPixels(); + this.addContextToElement(); } - createCanvas() { - const canvas = document.createElement('canvas'); - canvas.width = this.width; - canvas.height = this.height; - canvas.style.filter = this.filter; + createElement() { + if (this.type === 'img') { + const img = document.createElement('img'); + img.style.filter = this.filter; - this.container.appendChild(canvas); + this.container.appendChild(img); - return 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; + } } - fillWithRandomPixels() { - const ctx = this.canvas.getContext('2d'); + 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'); 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 57cdd7c..c8535c6 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -61,6 +61,7 @@ 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'); @@ -77,13 +78,16 @@ tags: part.element.style.width = this.options.size + 'px'; } - part.element.width = part.element.offsetWidth; - part.element.height = part.element.offsetHeight; + // part.element.width = part.element.offsetWidth; + // part.element.height = part.element.offsetHeight; + part.element.width = this.options.size; + part.element.height = this.options.size; this.draw(); }); } + // TODO: Zuweisung von shapes zu parts anpassen draw() { // TODO: Nur geänderte Teile löschen this.parts.forEach(part => { @@ -303,7 +307,6 @@ tags: } #createContext(names) { - let parts = []; const wrap = document.createElement('div'); wrap.style.position = 'relative'; @@ -444,6 +447,7 @@ 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 ca55174..1365630 100644 --- a/source/screens/demo/examples/game/tfw.liquid +++ b/source/screens/demo/examples/game/tfw.liquid @@ -25,8 +25,8 @@ tags: