Invert fix

Author: Matteo-it

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

@@ -67,7 +67,6 @@ const ROWS = 8, COLS = 13;
 let BRIGHTNESS_LEVELS = 8;
 let cells = [];
 let sessionFrames = [];
-let selectedFrameId = null;
 let loadedFrameId = null; // ID of the frame currently loaded in editor
 let loadedFrame = null; // Full frame object currently loaded
 
@@ -597,12 +596,8 @@ async function loadFrameIntoEditor(id){
       setGridFromRows(f.rows || []);
 
       // Populate name input
-      if(nameInput) nameInput.value = f.name || '';
       if(frameTitle) frameTitle.textContent = f.name || `Frame ${f.id}`;
 
-      // Populate duration
-      if(durationInput) durationInput.value = (f.duration_ms !== undefined && f.duration_ms !== null) ? String(f.duration_ms) : '1000';
-      
       // Mark as loaded in sidebar
       markLoaded(f);
 
@@ -611,8 +606,6 @@ async function loadFrameIntoEditor(id){
         showVectorText(data.vector);
       }
 
-      selectedFrameId = id;
-      
       console.debug('[ui] loaded frame into editor:', id);
     }
   } catch(err) {
@@ -671,7 +664,6 @@ async function handleNewFrameClick() {
       loadedFrame = data.frame;
       loadedFrameId = data.frame.id;
       // Set name to the backend-assigned name (Frame{id})
-      if(nameInput) nameInput.value = data.frame.name || `Frame${data.frame.id}`;
       if(frameTitle) frameTitle.textContent = data.frame.name || `Frame ${data.frame.id}`;
 
       // Show C vector representation
@@ -707,27 +699,7 @@ if (clearBtn) {
   console.warn('[ui] clear button not found');
 }
 
-if (saveAnimBtn) {
-  saveAnimBtn.addEventListener('click', async ()=>{
-    const container = document.getElementById('frames');
-    const selected = Array.from(container.children).filter(ch => ch.dataset.selected === '1').map(ch => parseInt(ch.dataset.id));
-    if(selected.length === 0) { alert('Select some frames first'); return; }
-    const animName = animNameInput.value && animNameInput.value.trim() ? animNameInput.value.trim() : undefined;
-    try {
-      const data = await fetchWithHandling('/save_animation', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({name: animName, frames: selected})}, 'json', 'save animation');
-      if(data && data.anim){
-        // clear selection
-        Array.from(container.children).forEach(ch => { ch.classList.remove('selected'); ch.dataset.selected = '0'; });
-        animNameInput.value = '';
-        alert('Animation saved');
-      }
-    } catch(e) {
-      console.warn('[ui] save animation failed', e);
-    }
-  });
-} else {
-  console.warn('[ui] save-anim button not found (animation save disabled)');
-}
+// 'save-anim' button functionality has been removed as it is no longer part of the UI.
 
 document.addEventListener('DOMContentLoaded', () => {
   let selectedTool = 'brush';

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

@@ -486,19 +486,21 @@ input:checked + .slider:before {
     overflow-y: hidden;
     padding-bottom: 10px; /* Add some padding for the scrollbar */
     align-items: center; /* Vertically center items */
-    min-height: 150px; /* Give the container some height */
+    height: 112px; /* 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;
-    border: 1px solid #f0f0f0;
-    border-radius: 8px;
-    background: #fafafa;
+    border: 1px solid #f0f0f0; /* Default border */
+    border-radius: 8px; /* Requested border-radius */
+    background: transparent; /* Remove default background */
     max-width: 132px;
     flex-shrink: 0; /* Prevent shrinking */
+    height: 100%; /* Make frame item fill the height of its container */
 }
 .frame-thumb {
     width: 65px;
@@ -590,6 +592,8 @@ input {
     font-style: normal;
     font-weight: 400;
     color: #2C353A;
+    border-radius: 4px;
+    border: 1px solid#C9D2D2;
 }
 
 /* Cell Slider */
@@ -771,26 +775,29 @@ input {
   border-color: rgba(0, 129, 132, 0.4);
 }
 .add-frame-btn {
-  display: block;
-  margin: 12px auto 0; /* Top margin, centered horizontally */
-  width: 32px; /* Adjusted to match other icon buttons */
-  height: 32px; /* Adjusted to match other icon buttons */
-  border-radius: 8px; /* Changed to 8px as requested */
-  background: rgba(0, 129, 132, 0.2); /* Same as stop button */
-  border: none; /* Remove default border from buttons */
+  margin-left: 8px; /* Add 8px to the existing 8px gap for a total of 16px */
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: rgba(0, 129, 132, 0.2);
+  border: none;
   cursor: pointer;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Subtle shadow */
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
   transition: background 0.3s ease;
-  display: flex; /* To center the image */
+  display: flex;
   align-items: center;
   justify-content: center;
 }
 .add-frame-btn:hover {
   background: rgba(0, 129, 132, 0.3); /* Slightly darker on hover */
 }
 .add-frame-btn img {
-  width: 16px; /* Icon size */
-  height: 16px; /* Icon size */
+  width: 16px;
+  height: 16px;
+}
+
+.frame-item:hover {
+  cursor: pointer;
 }
 
 .frame-name, .frame-duration {
@@ -806,9 +813,9 @@ input {
     text-overflow: ellipsis;
 }
 .modal {
-  display: none; 
-  position: fixed; 
-  z-index: 1001; 
+  display: none;
+  position: fixed;
+  z-index: 1001;
   left: 0;
   top: 0;
   width: 100%;
@@ -841,3 +848,18 @@ input {
 #global-frame-inputs {
   display: none;
 }
+
+@media (max-width: 700px) {
+    .grid {
+        grid-template-columns: repeat(13, 20px);
+        grid-auto-rows: 20px;
+        gap: 3px; /* Half the original gap for smaller cells */
+        width: calc(13 * 20px + 12 * 3px + 32px); /* 13 cells * 20px + 12 gaps * 3px + 2*16px padding */
+        padding: 16px; /* Keep padding consistent, or adjust as needed */
+    }
+    .cell {
+        width: 20px;
+        height: 20px;
+    }
+}
+