Mal/led-cube
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Frame deletion implemented

Browse Source
This commit is contained in:
Mal 2023-01-17 23:13:34 +01:00
parent 018142d257
commit aaee5ef34c
4 changed files with 148 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
public/graphics/icon-timer.svg Normal file
View File

@ -0,0 +1,73 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="109.09324mm"
height="135.48544mm"
viewBox="0 0 109.09324 135.48544"
version="1.1"
id="svg615"
xml:space="preserve"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="icon-timer.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview617"
pagecolor="#ffffff"
bordercolor="#999999"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.52850974"
inkscape:cx="256.38127"
inkscape:cy="317.87494"
inkscape:window-width="1845"
inkscape:window-height="1011"
inkscape:window-x="75"
inkscape:window-y="32"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" /><defs
id="defs612" /><g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-38.851903,-50.14629)"><circle
style="fill:none;stroke:#ffffff;stroke-width:16.065;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path389"
cx="93.398521"
cy="131.08511"
r="46.514118" /><rect
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:16.065;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0"
id="rect1157"
width="20.364386"
height="19.634676"
x="83.216331"
y="64.936317" /><rect
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:16.065;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0"
id="rect1263"
width="49.36359"
height="18.514835"
x="68.716728"
y="50.14629"
ry="9.2574177" /><rect
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:16.065;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0"
id="rect2717"
width="13.134775"
height="32.214455"
x="86.676254"
y="104.69147"
ry="6.5673876" /><rect
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:16.065;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0"
id="rect2717-3"
width="13.134775"
height="32.214455"
x="-62.562675"
y="144.46172"
ry="6.5673876"
transform="rotate(-55.607208)" /></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

2
public/index.html
View File

@ -40,7 +40,7 @@
<input type="number" id="frame-duration" class="suffix suffix-ms" min="1" step="1" max="65355" value="100" title="Frame-Dauer (ms)">
<button id="button-add-frame-after" title="Frame danach hinzufügen">+</button>
<button id="button-delete-frame" class="icon-button icon-button-delete" title="Frame löschen"></button>
<button id="button-delete-frame" class="icon-button icon-button-delete" title="Frame löschen" disabled></button>
</div>
</div>
</body>

64
public/index.js
View File

@ -102,6 +102,12 @@ const Cube = function (width, depth, height) {
this.frames.push(frame);
}
this.deleteFrame = function (frameIndex) {
this.frames = this.frames.slice(0, frameIndex).concat(
this.frames.slice(frameIndex + 1)
);
}
this.switchLed = function (layerIndex, ledIndex) {
this.frames[this.currentFrame].layers[layerIndex][ledIndex] = !this.frames[this.currentFrame].layers[layerIndex][ledIndex];
}
@ -158,7 +164,7 @@ const Cube = function (width, depth, height) {
led.classList.add('led', 'led-off');
led.addEventListener(
'click',
'mousedown',
(event) => {
const index = y * this.depth + x;
const layer = this.height - z - 1;
@ -208,6 +214,7 @@ const FrameMenu = function (id) {
this.htmlButtonAddFrameBefore = this.html.querySelector('#button-add-frame-before');
this.htmlButtonAddFrameAfter = this.html.querySelector('#button-add-frame-after');
this.htmlButtonToggleAnimation = this.html.querySelector('#button-toggle-animation');
this.htmlButtonDeleteFrame = this.html.querySelector('#button-delete-frame');
this.htmlInputDuration = this.html.querySelector('#frame-duration');
this.isAnimationPlaying = false;
@ -252,6 +259,14 @@ const FrameMenu = function (id) {
}
);
this.htmlButtonDeleteFrame.addEventListener(
'click',
() => {
this._decreaseSliderMax();
this.onFrameDelete();
}
);
this.slideToFrame = function (frameIndex) {
this.htmlSlider.value = frameIndex + 1;
this._updateFramePosition();
@ -261,6 +276,12 @@ const FrameMenu = function (id) {
this.htmlInputDuration.value = duration;
}
this.startAnimation = function () {
this.isAnimationPlaying = false;
this._updateToggleButton();
}
this.stopAnimation = function () {
this.isAnimationPlaying = false;
@ -271,6 +292,8 @@ const FrameMenu = function (id) {
this.onFrameAppend = function () {}
this.onFrameDelete = function () {}
this.onSlide = function () {}
this.onInputDuration = function () {}
@ -286,6 +309,20 @@ const FrameMenu = function (id) {
if (frameNumber > 1) {
this.htmlButtonToggleAnimation.disabled = false;
}
this.htmlButtonDeleteFrame.disabled = false;
}
this._decreaseSliderMax = function () {
const frameNumber = parseInt(this.htmlSlider.max) - 1;
this.htmlSlider.max = frameNumber;
this.htmlDisplayFrames.innerText = frameNumber;
if (frameNumber < 2) {
this.htmlButtonToggleAnimation.disabled = true;
this.htmlButtonDeleteFrame.disabled = true;
}
}
this._updateFramePosition = function () {
@ -301,6 +338,18 @@ const FrameMenu = function (id) {
this.htmlButtonToggleAnimation.classList.add('icon-button-play');
this.htmlButtonToggleAnimation.classList.remove('icon-button-stop');
}
const elements = [
this.htmlSlider,
this.htmlButtonAddFrameAfter,
this.htmlButtonAddFrameBefore,
this.htmlInputDuration,
this.htmlButtonDeleteFrame,
];
for (const element of elements) {
element.disabled = this.isAnimationPlaying;
}
}
}
@ -382,5 +431,18 @@ frameMenu.onToggleAnimation = (isPlaying) => {
for (const frame of ANIMATION_FRAME_QUEUE) {
clearTimeout(frame);
}
frameMenu.stopAnimation();
}
}
frameMenu.onFrameDelete = () => {
if (cube.frames.length < 2) {
return;
}
cube.deleteFrame(cube.currentFrame);
cube.currentFrame--;
cube.currentFrame = cube.currentFrame < 0 ? 0 : cube.currentFrame;
frameMenu.slideToFrame(cube.currentFrame);
}

13
public/style.css
View File

@ -79,6 +79,10 @@ button:disabled {
background-image: url("graphics/icon-delete.svg");
}
.icon-button-timer {
background-image: url("graphics/icon-timer.svg");
}
button:hover {
background-color: #3765ff;
}
@ -158,6 +162,10 @@ button:hover {
width: 80px;
}
.selector {
position: relative;
}
.selector-title {
margin-bottom: 10px;
font-weight: bold;
@ -185,10 +193,11 @@ button:hover {
.selector-items {
border-radius: 0 0 10px 10px;
position: relative;
position: absolute;
background-color: black;
top: -8px;
top: 68px;
padding: 0;
width: 100%;
}
.selector-item {