Add tools options

Author: Matteo-it

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

@@ -980,3 +980,47 @@ if (invertNotNullBtn) {
 } else {
   console.warn('[ui] invert-not-null button not found');
 }
+
+/* Custom Select Dropdown */
+document.addEventListener('DOMContentLoaded', () => {
+  const customSelect = document.querySelector('.custom-select');
+  if (customSelect) {
+    const trigger = customSelect.querySelector('.custom-select__trigger');
+    const options = customSelect.querySelectorAll('.custom-option');
+    const triggerImage = trigger.querySelector('img');
+    
+    trigger.addEventListener('click', () => {
+      customSelect.classList.toggle('open');
+    });
+
+    options.forEach(option => {
+      option.addEventListener('click', () => {
+        const value = option.getAttribute('data-value');
+        const img = option.querySelector('img');
+        
+        triggerImage.src = img.src;
+        triggerImage.alt = img.alt;
+        customSelect.classList.remove('open');
+
+        // You can use the 'value' variable to handle tool changes
+        console.log('Selected tool:', value);
+      });
+    });
+
+    window.addEventListener('click', (e) => {
+      if (!customSelect.contains(e.target)) {
+        customSelect.classList.remove('open');
+      }
+    });
+  }
+
+  /* Brightness Alpha Slider */
+  const brightnessAlphaSlider = document.getElementById('brightness-alpha-slider');
+  const brightnessAlphaValue = document.getElementById('brightness-alpha-value');
+
+  if (brightnessAlphaSlider && brightnessAlphaValue) {
+    brightnessAlphaSlider.addEventListener('input', () => {
+      brightnessAlphaValue.textContent = brightnessAlphaSlider.value;
+    });
+  }
+});

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

@@ -37,6 +37,44 @@
       <div class="left-sidebar">
         <div class="tools-box">
           <h3 class="box-title">Tools</h3>
+          <div class="tool-controls">
+            <div class="custom-select-wrapper">
+              <div class="custom-select">
+                <div class="custom-select__trigger">
+                  <svg width="16" height="16" viewBox="0 0 32 32" class="tool-icon" style="vertical-align: middle;">
+<path d="M27.3302 3.68976C24.2702 3.61975 19.9002 6.40973 14.3702 11.9697C12.4701 13.8798 11.0802 15.4898 10.6601 15.9797C8.11016 16.1898 6.09027 18.3298 6.09027 20.9298C6.09027 22.9598 5.20013 24.8597 3.65021 26.1498C3.35016 26.4097 3.22016 26.8098 3.33026 27.1898C3.44012 27.5698 3.76019 27.8497 4.15021 27.9097C4.73017 27.9898 5.32025 28.0397 5.90021 28.0397C7.52021 28.0397 9.11017 27.7197 10.5903 27.1097C12.0702 26.4998 13.4301 25.5997 14.5803 24.4498C15.4301 23.6097 15.9301 22.5198 16.0202 21.3398C16.2201 21.1697 16.6102 20.8298 17.1302 20.3698C17.8802 19.6998 18.9002 18.7498 20.0302 17.6298C25.5903 12.0997 28.3802 7.73975 28.3102 4.66974C28.3002 4.12976 27.8702 3.69977 27.3302 3.68976ZM13.1701 23.0397C11.3802 24.8298 8.97014 25.8798 6.47014 26.0198C7.51018 24.5498 8.09026 22.7798 8.09026 20.9298C8.09026 19.2897 9.4301 17.9598 11.0702 17.9598C11.8501 17.9598 12.6202 18.2798 13.1701 18.8298C13.7301 19.3898 14.0402 20.1398 14.0402 20.9298C14.0402 21.7298 13.7301 22.4697 13.1701 23.0397ZM15.6601 18.9998C15.4101 18.4097 15.0502 17.8698 14.5903 17.4097C14.1302 16.9598 13.5903 16.5997 12.9902 16.3497C13.5402 15.7397 14.3002 14.9097 15.2001 13.9797C15.7201 14.3798 16.2302 14.8098 16.7101 15.2897C17.1901 15.7698 17.6202 16.2798 18.0202 16.7997C17.0903 17.6898 16.2702 18.4498 15.6601 18.9998ZM19.4501 15.3798C19.0502 14.8597 18.6001 14.3597 18.1202 13.8798C17.6402 13.3998 17.1402 12.9498 16.6202 12.5497C20.5402 8.72973 23.8501 6.40973 26.1701 5.82977C25.5903 8.14978 23.2702 11.4598 19.4501 15.3798Z"/>
+</svg>
+                  <svg width="7" height="4" viewBox="0 0 7 4" class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.50205 4.00205C3.43624 4.00243 3.37101 3.98981 3.31009 3.96493C3.24917 3.94005 3.19377 3.90339 3.14705 3.85705L0.147046 0.857046C0.0528938 0.762894 0 0.635196 0 0.502046C0 0.368895 0.0528938 0.241197 0.147046 0.147046C0.241197 0.0528938 0.368895 0 0.502046 0C0.635196 0 0.762894 0.0528938 0.857046 0.147046L3.50205 2.79705L6.14705 0.147046C6.2412 0.0528938 6.36889 0 6.50205 0C6.6352 0 6.76289 0.0528938 6.85705 0.147046C6.9512 0.241197 7.00409 0.368895 7.00409 0.502046C7.00409 0.635196 6.9512 0.762894 6.85705 0.857046L3.85705 3.85705C3.81033 3.90339 3.75492 3.94005 3.694 3.96493C3.63308 3.98981 3.56785 4.00243 3.50205 4.00205Z" fill="#008184"/>
+</svg>
+                </div>
+                <div class="custom-options">
+                  <div class="custom-option" data-value="brush">
+                    <svg width="16" height="16" viewBox="0 0 32 32" class="tool-icon" style="vertical-align: middle;">
+<path d="M27.3302 3.68976C24.2702 3.61975 19.9002 6.40973 14.3702 11.9697C12.4701 13.8798 11.0802 15.4898 10.6601 15.9797C8.11016 16.1898 6.09027 18.3298 6.09027 20.9298C6.09027 22.9598 5.20013 24.8597 3.65021 26.1498C3.35016 26.4097 3.22016 26.8098 3.33026 27.1898C3.44012 27.5698 3.76019 27.8497 4.15021 27.9097C4.73017 27.9898 5.32025 28.0397 5.90021 28.0397C7.52021 28.0397 9.11017 27.7197 10.5903 27.1097C12.0702 26.4998 13.4301 25.5997 14.5803 24.4498C15.4301 23.6097 15.9301 22.5198 16.0202 21.3398C16.2201 21.1697 16.6102 20.8298 17.1302 20.3698C17.8802 19.6998 18.9002 18.7498 20.0302 17.6298C25.5903 12.0997 28.3802 7.73975 28.3102 4.66974C28.3002 4.12976 27.8702 3.69977 27.3302 3.68976ZM13.1701 23.0397C11.3802 24.8298 8.97014 25.8798 6.47014 26.0198C7.51018 24.5498 8.09026 22.7798 8.09026 20.9298C8.09026 19.2897 9.4301 17.9598 11.0702 17.9598C11.8501 17.9598 12.6202 18.2798 13.1701 18.8298C13.7301 19.3898 14.0402 20.1398 14.0402 20.9298C14.0402 21.7298 13.7301 22.4697 13.1701 23.0397ZM15.6601 18.9998C15.4101 18.4097 15.0502 17.8698 14.5903 17.4097C14.1302 16.9598 13.5903 16.5997 12.9902 16.3497C13.5402 15.7397 14.3002 14.9097 15.2001 13.9797C15.7201 14.3798 16.2302 14.8098 16.7101 15.2897C17.1901 15.7698 17.6202 16.2798 18.0202 16.7997C17.0903 17.6898 16.2702 18.4498 15.6601 18.9998ZM19.4501 15.3798C19.0502 14.8597 18.6001 14.3597 18.1202 13.8798C17.6402 13.3998 17.1402 12.9498 16.6202 12.5497C20.5402 8.72973 23.8501 6.40973 26.1701 5.82977C25.5903 8.14978 23.2702 11.4598 19.4501 15.3798Z"/>
+</svg>
+                  </div>
+                  <div class="custom-option" data-value="eraser">
+                    <svg width="16" height="16" viewBox="0 0 32 32" class="tool-icon" style="vertical-align: middle;">
+<path d="M25,5 L7,23 L9,25 L27,7 L25,5 Z M5,25 L7,23 L9,25 L7,27 L5,25 Z"/>
+</svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="slider-container" style="flex-grow: 1; margin-left: 8px;">
+              <div style="display: flex; justify-content: space-between;">
+                <label for="brightness-alpha-slider" class="alpha-label">Brightness (Alpha)</label>
+                <span id="brightness-alpha-value" class="alpha-label">7</span>
+              </div>
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <span class="slider-limit-label">0</span>
+                <input type="range" id="brightness-alpha-slider" min="0" max="7" value="7" style="flex-grow: 1;">
+                <span class="slider-limit-label">7</span>
+              </div>
+            </div>
+          </div>
         </div>
         <div class="transform-box">
           <h3 class="box-title">Transform</h3>
@@ -63,12 +101,6 @@ <h3 class="box-title" id="frame-title">Frame 1</h3>
         <section class="maincol">
           <div id="grid" class="grid"></div>
           <div id="export-tools">
-            <button id="play-animation">Play Animation</button>
-          </div>
-          <!-- floating brightness slider -->
-          <div id="cell-slider">
-            <input id="brightness-slider" type="range" min="0" max="7" value="7" />
-            <div id="brightness-value">7</div>
           </div>
         </section>
       </div>
@@ -84,6 +116,7 @@ <h3 class="box-title">Project code preview</h3>
       <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>
@@ -103,4 +136,4 @@ <h3 style="margin:0;font-size:0.9rem;color:#666">Frames (auto-saved)</h3>
   </div>
   <script src="app.js"></script>
 </body>
-</html>
+</html>

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

@@ -230,6 +230,7 @@ input:checked + .slider:before {
     font-weight: 700;
     line-height: 170%;
     letter-spacing: 1.2px;
+    margin-bottom: 8px;
 }
 
 .controls-section-left {
@@ -319,11 +320,22 @@ input:checked + .slider:before {
 /*
  * Responsive design
  */
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
     .main-content {
         flex-direction: column;
     }
 
+    .left-sidebar {
+        max-width: 100%; /* Allow left-sidebar to take full width */
+        flex-direction: row; /* Arrange children side-by-side */
+        flex-wrap: wrap; /* Allow children to wrap */
+    }
+
+    .tools-box, .transform-box {
+        flex: 1; /* Allow boxes to grow and shrink */
+        min-width: 250px; /* Ensure a minimum width for the boxes */
+    }
+
     .arduino-text {
         font-size: 14px;
     }
@@ -332,29 +344,13 @@ input:checked + .slider:before {
         padding: 15px;
     }
 
-    .controls-section-left {
-        min-width: 330px;
-    }
-
     .arduino-logo {
         height: 16px;
         width: auto;
     }
 
 }
 
-@media (max-width: 1024px) and (min-width: 769px) {
-    .controls-section-left {
-        min-width: 490px;
-    }
-}
-
-@media (max-width: 480px) {
-    .controls-section-left {
-        min-width: 170px;
-    }
-}
-
 /* Specific styles for LED Matrix Painter components */
 
 /* Grid and cells */
@@ -519,3 +515,144 @@ input {
   background-color: #7F8C8D;
   vertical-align: middle; /* To vertically align with other elements in the header */
 }
+
+.tool-controls {
+  display: flex;
+  align-items: center;
+}
+
+/* Custom Select */
+.custom-select-wrapper {
+  position: relative;
+  display: inline-block;
+  user-select: none;
+  width: 48px;
+}
+
+.custom-select {
+  position: relative;
+  width: 100%;
+}
+
+.custom-select__trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 8px;
+  border-radius: 8px;
+  background: rgba(0, 129, 132, 0.2);
+  cursor: pointer;
+}
+
+.custom-select.open .custom-options {
+  display: block;
+}
+
+.custom-options {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  display: none;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow instead of border */
+  border-radius: 0 0 8px 8px;
+  background: #fff;
+  z-index: 2;
+}
+
+.custom-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 8px; /* Adjusted padding */
+  cursor: pointer;
+}
+
+.custom-option:hover {
+  background-color: rgba(0, 129, 132, 0.08);
+}
+
+.dropdown-arrow {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  transition: transform 0.2s ease-in-out;
+}
+
+.custom-select.open .dropdown-arrow {
+  transform: translateY(-50%) rotate(180deg);
+}
+
+.alpha-label {
+  font-family: "Open Sans";
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 160%; /* 16px */
+  letter-spacing: 0.1px;
+}
+
+.slider-limit-label {
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 600;
+}
+
+.tool-icon {
+  fill: #008184;
+}
+
+#brightness-alpha-slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 6px;
+  background: #008184 !important;
+  outline: none;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+  border-radius: 30px;
+}
+
+/* Mouse-over effects */
+#brightness-alpha-slider:hover {
+  opacity: 1; /* Fully shown on mouse-over */
+}
+
+/* The slider thumb (webKit) */
+#brightness-alpha-slider::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Hides the default slider thumb */
+  appearance: none;
+  width: 16px; /* Set a specific slider handle width */
+  height: 16px; /* Slider handle height */
+  border-radius: 50%; /* Make it a circle */
+  background: #008184 !important; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+  margin-top: -4px; /* Adjust this to center the thumb vertically on the track */
+}
+
+/* The slider thumb (Firefox) */
+#brightness-alpha-slider::-moz-range-thumb {
+  width: 16px; /* Set a specific slider handle width */
+  height: 16px; /* Slider handle height */
+  border-radius: 50%; /* Make it a circle */
+  background: #008184 !important; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+}
+
+/* The slider track (webKit) */
+#brightness-alpha-slider::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8px;
+  background: #008184 !important; /* Green background */
+  border-radius: 4px;
+}
+
+/* The slider track (Firefox) */
+#brightness-alpha-slider::-moz-range-track {
+  width: 100%;
+  height: 8px;
+  background: #008184 !important; /* Green background */
+  border-radius: 4px;
+}