alpha 1

Author: Matteo-it

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

@@ -117,20 +117,22 @@ function collectGridBrightness(){
 }
 
 function markLoaded(frame){
-  // Remove existing loaded/selected marker
-  if(loadedFrameId !== null){
-    const prev = document.querySelector(`#frames [data-id='${loadedFrameId}']`);
+  const oldFrameId = loadedFrameId; // Store the old ID
+  
+  // Remove marker from the old frame
+  if(oldFrameId !== null){
+    const prev = document.querySelector(`#frames [data-id='${oldFrameId}']`);
     if(prev) {
       prev.classList.remove('loaded');
       prev.classList.remove('selected');
     }
   }
 
+  // Update the global state
   loadedFrameId = frame ? frame.id : null;
-  // selectedFrameId is now the same as loadedFrameId
-  
   loadedFrame = frame;
 
+  // Add marker to the new frame
   if(frame && frame.id){
     try{
       const el = document.querySelector(`#frames [data-id='${frame.id}']`);
@@ -391,8 +393,11 @@ async function refreshFrames(){
 
     // Re-apply loaded state after rendering
     if(loadedFrameId !== null && loadedFrame !== null){
-      const el = document.querySelector(`#frames [data-id='${loadedFrameId}']`);
-      if(el) el.classList.add('loaded');
+        const el = document.querySelector(`#frames [data-id='${loadedFrameId}']`);
+        if(el) {
+            el.classList.add('loaded');
+            el.classList.add('selected');
+        }
     }
   }catch(e){ console.warn(e) }
 }
@@ -454,7 +459,7 @@ function renderFrames(){
         const dot = document.createElement('div'); dot.style.background = isOn ? '#0b76ff' : '#fff'; thumb.appendChild(dot);
       }
     }
-    const name = document.createElement('div'); name.className = 'frame-name'; name.textContent = f.name || ('Frame'+f.id);
+    const name = document.createElement('div'); name.className = 'frame-name'; name.textContent = f.name || ('Frame ' + f.id);
     const duration = document.createElement('div'); duration.className = 'frame-duration'; duration.textContent = `${f.duration_ms || 1000} ms`;
 
     // Make name and duration editable
@@ -516,11 +521,6 @@ function renderFrames(){
 
     item.appendChild(thumb); item.appendChild(name); item.appendChild(duration);
 
-    if(loadedFrameId === f.id){
-      item.classList.add('loaded');
-      item.classList.add('selected'); 
-    }
-    
     container.appendChild(item);
   });
 

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

@@ -128,7 +128,7 @@ <h3 style="margin:0;font-size:0.9rem;color:#666">Animation</h3>
                                 <button id="duration-anim" class="anim-option-btn"><img src="img/time.svg" alt="Duration"></button>
                               </div>
                               <div class="animation-controls-main">
-                                                    
+
                                   <div id="anim-controls">
                                     <input id="anim-name" placeholder="Animation name" />
                                   </div>
@@ -144,7 +144,8 @@ <h3 style="margin:0;font-size:0.9rem;color:#666">Animation</h3>
   <div id="duration-modal" class="modal">
     <div class="modal-content">
       <span class="close-button">&times;</span>
-      <p>Set a duration to all frames</p>
+      <p class="modal-content-title">Set a duration to all frames</p>
+      <p class="modal-content-p">This will replace individual frame settings</p>
       <input type="number" id="all-frames-duration" placeholder="Duration in ms" min="0" step="10">
       <button id="apply-duration">Apply</button>
     </div>

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

@@ -484,14 +484,12 @@ input:checked + .slider:before {
     gap: 8px;
     overflow-x: auto; /* Allow horizontal scrolling */
     overflow-y: hidden;
-    padding-bottom: 10px; /* Add some padding for the scrollbar */
     align-items: center; /* Vertically center items */
-    height: 112px; /* Set fixed height to match buttons */
+    height: 100%; /* Set fixed height to match buttons */
 }
 .frame-item {
     display: flex;
     flex-direction: column; /* Stack image, name, duration vertically */
-    align-items: center; /* Center content horizontally */
     justify-content: space-around; /* Distribute space vertically within the frame item */
     gap: 4px;
     padding: 4px;
@@ -530,7 +528,6 @@ input:checked + .slider:before {
     outline: 2px dashed #0b76ff;
 }
 .frame-item.loaded {
-    box-shadow: 0 0 0 3px rgba(11, 118, 255, 0.12);
     border-color: rgba(11, 118, 255, 0.35);
 }
 .frame-item.loaded .frame-name {
@@ -831,7 +828,30 @@ input {
   width: 80%;
   max-width: 400px;
   border-radius: 8px;
-  text-align: center;
+  text-align: left; /* Changed to left */
+}
+
+#all-frames-duration {
+  margin-top: 16px; /* Add space above the input */
+  width: 100%;
+  box-sizing: border-box;
+}
+
+#apply-duration {
+  margin-top: 16px;
+  width: 100%;
+}
+.modal-content-title {
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  color: #2C353A;
+}
+.modal-content-p {
+  font-size:10px;
+  font-style: normal;
+  font-weight: 400;
+  color: #2C353A;
 }
 .close-button {
   color: #aaa;