Update matrix UI

Author: Matteo-it

examples/led-matrix-painter/assets/img/copy.svg

@@ -112,25 +112,37 @@ <h3 class="box-title">Project code preview</h3>
     </div>
   </main>
   <div class="frames-section-bottom">
-    <div class="controls-section-left">
-      <div class="sidebar-header">
-        <h3 style="margin:0;font-size:0.9rem;color:#666">Frames (auto-saved)</h3>
-        <button id="new-frame" title="Create new frame">+</button>
-        <button id="play-animation">Play Animation</button>
-      </div>
-      <div>
-        <label><input type="radio" name="mode" value="frames" checked> Frames</label>
-        <label><input type="radio" name="mode" value="anim"> Animations</label>
-      </div>
-      <div id="anim-controls">
-        <input id="anim-name" placeholder="Animation name" />
+    <div class="animation-section">
+      <div class="animation-header">
+        <h3 style="margin:0;font-size:0.9rem;color:#666">Animation</h3>
+        <div class="animation-main-controls">
+          <button id="play-animation"><img src="img/play-icon.svg" alt="Play" style="width: 14px; height: 14px;"></button>
+          <button id="stop-animation"><img src="img/stop-icon.svg" alt="Stop" style="width: 14px; height: 14px;"></button>
+        </div>
       </div>
-      <!-- Frame name goes above the list of frames and below animation name (if present) -->
-      <div>
-        <input id="name" placeholder="Frame name (optional)" />
-        <input id="duration" type="number" min="0" step="10" value="1000" title="Duration in ms" />
+      <div class="animation-body">
+        <div class="animation-sidebar">
+          <button id="copy-frame"><img src="img/copy.svg" alt="Copy" style="width: 14px; height: 14px;"></button>
+          <button id="delete-frame"><img src="img/trash.svg" alt="Delete" style="width: 14px; height: 14px;"></button>
+          <hr class="animation-separator">
+          <button id="duration-button"><img src="img/duration.svg" alt="Duration" style="width: 14px; height: 14px;"></button>
+        </div>
+        <div class="animation-content">
+          <div id="frames" class="frames"></div>
+          <div id="anim-controls">
+            <input id="anim-name" placeholder="Animation name" />
+          </div>
+          <div>
+            <input id="name" placeholder="Frame name (optional)" />
+            <input id="duration" type="number" min="0" step="10" value="1000" title="Duration in ms" />
+          </div>
+           <div>
+            <label><input type="radio" name="mode" value="frames" checked> Frames</label>
+            <label><input type="radio" name="mode" value="anim"> Animations</label>
+            <button id="new-frame" title="Create new frame">+</button>
+          </div>
+        </div>
       </div>
-      <div id="frames" class="frames"></div>
     </div>
   </div>
   <div id="error-container" class="error-message" style="display: none;"></div>

examples/led-matrix-painter/assets/img/duration.svg

@@ -386,12 +386,6 @@ input:checked + .slider:before {
 .cell[data-b="7"] { background: #3CE2FF; }
 
 /* Frame previews */
-.sidebar-header {
-  display: flex;
-  gap: 8px;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
 .frames {
     display: flex;
     flex-direction: column;
@@ -627,7 +621,7 @@ input {
   border-radius: 50%; /* Make it a circle */
   background: #008184 !important; /* Green background */
   cursor: pointer; /* Cursor on hover */
-  margin-top: -5px; /* Adjust this to center the thumb vertically on the track */
+  margin-top: -5px;
   filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.25));
 }
 
@@ -665,3 +659,59 @@ input {
 .grid[data-tool='eraser'] {
   cursor: url('img/mouse-eraser.svg') 8 8, auto;
 }
+
+.animation-section {
+  background: #ECF1F1;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+.animation-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.animation-main-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.animation-body {
+  display: flex;
+  gap: 16px;
+}
+
+.animation-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+}
+
+.animation-sidebar button {
+  padding: 4px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid #C9D2D2;
+}
+
+.animation-separator {
+  width: 100%;
+  border: none;
+  border-top: 1px solid #C9D2D2;
+  margin: 0;
+}
+
+.animation-content {
+  flex-grow: 1;
+}
+
+#stop-animation {
+  background: rgba(0, 129, 132, 0.2);
+}