Skip to content

Commit a43f78e

Browse files
committed
alpha 1
1 parent 5cb019d commit a43f78e

File tree

3 files changed

+41
-20
lines changed

3 files changed

+41
-20
lines changed

examples/led-matrix-painter/assets/app.js

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -117,20 +117,22 @@ function collectGridBrightness(){
117117
}
118118

119119
function markLoaded(frame){
120-
// Remove existing loaded/selected marker
121-
if(loadedFrameId !== null){
122-
const prev = document.querySelector(`#frames [data-id='${loadedFrameId}']`);
120+
const oldFrameId = loadedFrameId; // Store the old ID
121+
122+
// Remove marker from the old frame
123+
if(oldFrameId !== null){
124+
const prev = document.querySelector(`#frames [data-id='${oldFrameId}']`);
123125
if(prev) {
124126
prev.classList.remove('loaded');
125127
prev.classList.remove('selected');
126128
}
127129
}
128130

131+
// Update the global state
129132
loadedFrameId = frame ? frame.id : null;
130-
// selectedFrameId is now the same as loadedFrameId
131-
132133
loadedFrame = frame;
133134

135+
// Add marker to the new frame
134136
if(frame && frame.id){
135137
try{
136138
const el = document.querySelector(`#frames [data-id='${frame.id}']`);
@@ -391,8 +393,11 @@ async function refreshFrames(){
391393

392394
// Re-apply loaded state after rendering
393395
if(loadedFrameId !== null && loadedFrame !== null){
394-
const el = document.querySelector(`#frames [data-id='${loadedFrameId}']`);
395-
if(el) el.classList.add('loaded');
396+
const el = document.querySelector(`#frames [data-id='${loadedFrameId}']`);
397+
if(el) {
398+
el.classList.add('loaded');
399+
el.classList.add('selected');
400+
}
396401
}
397402
}catch(e){ console.warn(e) }
398403
}
@@ -454,7 +459,7 @@ function renderFrames(){
454459
const dot = document.createElement('div'); dot.style.background = isOn ? '#0b76ff' : '#fff'; thumb.appendChild(dot);
455460
}
456461
}
457-
const name = document.createElement('div'); name.className = 'frame-name'; name.textContent = f.name || ('Frame'+f.id);
462+
const name = document.createElement('div'); name.className = 'frame-name'; name.textContent = f.name || ('Frame ' + f.id);
458463
const duration = document.createElement('div'); duration.className = 'frame-duration'; duration.textContent = `${f.duration_ms || 1000} ms`;
459464

460465
// Make name and duration editable
@@ -516,11 +521,6 @@ function renderFrames(){
516521

517522
item.appendChild(thumb); item.appendChild(name); item.appendChild(duration);
518523

519-
if(loadedFrameId === f.id){
520-
item.classList.add('loaded');
521-
item.classList.add('selected');
522-
}
523-
524524
container.appendChild(item);
525525
});
526526

examples/led-matrix-painter/assets/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ <h3 style="margin:0;font-size:0.9rem;color:#666">Animation</h3>
128128
<button id="duration-anim" class="anim-option-btn"><img src="img/time.svg" alt="Duration"></button>
129129
</div>
130130
<div class="animation-controls-main">
131-
131+
132132
<div id="anim-controls">
133133
<input id="anim-name" placeholder="Animation name" />
134134
</div>
@@ -144,7 +144,8 @@ <h3 style="margin:0;font-size:0.9rem;color:#666">Animation</h3>
144144
<div id="duration-modal" class="modal">
145145
<div class="modal-content">
146146
<span class="close-button">&times;</span>
147-
<p>Set a duration to all frames</p>
147+
<p class="modal-content-title">Set a duration to all frames</p>
148+
<p class="modal-content-p">This will replace individual frame settings</p>
148149
<input type="number" id="all-frames-duration" placeholder="Duration in ms" min="0" step="10">
149150
<button id="apply-duration">Apply</button>
150151
</div>

examples/led-matrix-painter/assets/style.css

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -484,14 +484,12 @@ input:checked + .slider:before {
484484
gap: 8px;
485485
overflow-x: auto; /* Allow horizontal scrolling */
486486
overflow-y: hidden;
487-
padding-bottom: 10px; /* Add some padding for the scrollbar */
488487
align-items: center; /* Vertically center items */
489-
height: 112px; /* Set fixed height to match buttons */
488+
height: 100%; /* Set fixed height to match buttons */
490489
}
491490
.frame-item {
492491
display: flex;
493492
flex-direction: column; /* Stack image, name, duration vertically */
494-
align-items: center; /* Center content horizontally */
495493
justify-content: space-around; /* Distribute space vertically within the frame item */
496494
gap: 4px;
497495
padding: 4px;
@@ -530,7 +528,6 @@ input:checked + .slider:before {
530528
outline: 2px dashed #0b76ff;
531529
}
532530
.frame-item.loaded {
533-
box-shadow: 0 0 0 3px rgba(11, 118, 255, 0.12);
534531
border-color: rgba(11, 118, 255, 0.35);
535532
}
536533
.frame-item.loaded .frame-name {
@@ -831,7 +828,30 @@ input {
831828
width: 80%;
832829
max-width: 400px;
833830
border-radius: 8px;
834-
text-align: center;
831+
text-align: left; /* Changed to left */
832+
}
833+
834+
#all-frames-duration {
835+
margin-top: 16px; /* Add space above the input */
836+
width: 100%;
837+
box-sizing: border-box;
838+
}
839+
840+
#apply-duration {
841+
margin-top: 16px;
842+
width: 100%;
843+
}
844+
.modal-content-title {
845+
font-size: 12px;
846+
font-style: normal;
847+
font-weight: 600;
848+
color: #2C353A;
849+
}
850+
.modal-content-p {
851+
font-size:10px;
852+
font-style: normal;
853+
font-weight: 400;
854+
color: #2C353A;
835855
}
836856
.close-button {
837857
color: #aaa;

0 commit comments

Comments
 (0)