|
|
@ -157,7 +157,7 @@ const Cube = function (width, depth, height) { |
|
|
|
this.frames[this.currentFrame].layers[layerIndex][index] = state; |
|
|
|
} |
|
|
|
|
|
|
|
for (const row of this.html.children.item(this.height - layerIndex - 1).children) { |
|
|
|
for (const row of this.html.children.item(this.height - layerIndex - 1).querySelectorAll('.row')) { |
|
|
|
for (const led of row.children) { |
|
|
|
this._setLed(led, state); |
|
|
|
} |
|
|
@ -169,7 +169,7 @@ const Cube = function (width, depth, height) { |
|
|
|
*/ |
|
|
|
this.setLedColor = function (color) { |
|
|
|
for (const layer of this.html.children) { |
|
|
|
for (const row of layer.children) { |
|
|
|
for (const row of layer.querySelectorAll('.row')) { |
|
|
|
for (const led of row.children) { |
|
|
|
for (const cssClass of COLOR_CLASS) { |
|
|
|
led.classList.remove(cssClass); |
|
|
@ -238,7 +238,18 @@ const Cube = function (width, depth, height) { |
|
|
|
|
|
|
|
layerElement.appendChild(row); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const layerIndex = this.height - z - 1; |
|
|
|
|
|
|
|
const submenu = new LayerSubmenu(layerElement); |
|
|
|
submenu.onLayerOn = () => { |
|
|
|
this.setLayer(layerIndex, true); |
|
|
|
} |
|
|
|
submenu.onLayerOff = () => { |
|
|
|
this.setLayer(layerIndex, false); |
|
|
|
} |
|
|
|
submenu.init(); |
|
|
|
|
|
|
|
this.html.appendChild(layerElement); |
|
|
|
} |
|
|
|
} |
|
|
@ -256,6 +267,55 @@ const Cube = function (width, depth, height) { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* @param {HTMLElement} layer |
|
|
|
*/ |
|
|
|
const LayerSubmenu = function (layer) { |
|
|
|
this.layer = layer; |
|
|
|
this.html = document.createElement('div'); |
|
|
|
this.buttonLayerOn = document.createElement('button'); |
|
|
|
this.buttonLayerOff = document.createElement('button'); |
|
|
|
|
|
|
|
this,onLayerOn = function () {} |
|
|
|
this.onLayerOff = function () {} |
|
|
|
|
|
|
|
this.init = function () { |
|
|
|
this.html.classList.add('layer-submenu'); |
|
|
|
|
|
|
|
const line = document.createElement('div'); |
|
|
|
line.classList.add('submenu-line'); |
|
|
|
this.html.appendChild(line); |
|
|
|
|
|
|
|
const buttons = document.createElement('div'); |
|
|
|
buttons.classList.add('layer-buttons'); |
|
|
|
this.html.appendChild(buttons); |
|
|
|
|
|
|
|
this.buttonLayerOn.classList.add('layer-button', 'layer-button-on'); |
|
|
|
this.buttonLayerOn.title = 'Alle LEDs an'; |
|
|
|
buttons.appendChild(this.buttonLayerOn); |
|
|
|
|
|
|
|
this.buttonLayerOn.addEventListener( |
|
|
|
'click', |
|
|
|
() => { |
|
|
|
this.onLayerOn(); |
|
|
|
} |
|
|
|
); |
|
|
|
|
|
|
|
this.buttonLayerOff.classList.add('layer-button', 'layer-button-off'); |
|
|
|
this.buttonLayerOff.title = 'Alle LEDs aus'; |
|
|
|
buttons.appendChild(this.buttonLayerOff); |
|
|
|
|
|
|
|
this.buttonLayerOff.addEventListener( |
|
|
|
'click', |
|
|
|
() => { |
|
|
|
this.onLayerOff(); |
|
|
|
} |
|
|
|
); |
|
|
|
|
|
|
|
this.layer.appendChild(this.html); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* @param {string} id |
|
|
|
*/ |
|
|
|