From 3088e9ee81f8e098070633edf9c2bd17bd25842a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 19 Nov 2025 03:36:05 +0000
Subject: [PATCH] Group e-ink parameters into dedicated accordion UI section

Creates a new "E-Ink Settings" accordion section above "Advanced Settings"
in the UI to better organize e-ink related parameters. This improves
usability by grouping related settings together.

Changes:
- Add new E-Ink Settings accordion with toggle functionality
- Move e-ink parameters to E-Ink Settings:
  - Custom Color Palette (colors)
  - Palette Colors (palette_colors)
  - Dithering Algorithm (dithering)
  - Invert Colors (invert)
- Keep in Advanced Settings:
  - Format
  - Wait Time
  - Rotation (as requested)
- Add toggleEink() JavaScript function for accordion behavior
---
 puppet/ha-puppet/html/index.html | 170 +++++++++++++++++++------------
 1 file changed, 106 insertions(+), 64 deletions(-)

diff --git a/puppet/ha-puppet/html/index.html b/puppet/ha-puppet/html/index.html
index b14020b..0a7240a 100644
--- a/puppet/ha-puppet/html/index.html
+++ b/puppet/ha-puppet/html/index.html
@@ -244,17 +244,17 @@
               />
             </div>
 
-            <!-- Advanced Settings Accordion -->
+            <!-- E-Ink Settings Accordion -->
             <div class="border-t pt-4">
               <button
                 type="button"
-                id="advancedToggle"
+                id="einkToggle"
                 class="w-full flex items-center justify-between text-sm font-medium text-gray-700 hover:text-gray-900"
-                onclick="toggleAdvanced()"
+                onclick="toggleEink()"
               >
-                <span>Advanced Settings</span>
+                <span>E-Ink Settings</span>
                 <svg
-                  id="advancedIcon"
+                  id="einkIcon"
                   class="w-5 h-5 transition-transform"
                   fill="none"
                   stroke="currentColor"
@@ -269,50 +269,7 @@
                 </svg>
               </button>
 
-              <div id="advancedSettings" class="hidden mt-4 space-y-4">
-                <!-- Format -->
-                <div>
-                  <label class="block text-sm font-medium text-gray-700 mb-1"
-                    >Format</label
-                  >
-                  <select
-                    id="format"
-                    class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:border-transparent"
-                    style="
-                      border-color: var(--ha-blue-light);
-                      --tw-ring-color: var(--ha-blue);
-                    "
-                  >
-                    <option value="png">PNG</option>
-                    <option value="jpeg">JPEG</option>
-                    <option value="webp">WebP</option>
-                    <option value="bmp">BMP</option>
-                  </select>
-                </div>
-
-                <!-- Wait Time -->
-                <div>
-                  <label class="block text-sm font-medium text-gray-700 mb-1"
-                    >Wait Time (ms)</label
-                  >
-                  <input
-                    type="number"
-                    id="wait"
-                    step="100"
-                    min="0"
-                    class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:border-transparent"
-                    style="
-                      border-color: var(--ha-blue-light);
-                      --tw-ring-color: var(--ha-blue);
-                    "
-                    placeholder="0"
-                  />
-                  <p class="text-xs text-gray-500 mt-1">
-                    Add extra wait time before capturing the screenshot. Useful
-                    if you have animations or lazy-loaded content.
-                  </p>
-                </div>
-
+              <div id="einkSettings" class="hidden mt-4 space-y-4">
                 <!-- Custom Color Palette -->
                 <div>
                   <label class="block text-sm font-medium text-gray-700 mb-1"
@@ -380,40 +337,111 @@
                   </p>
                 </div>
 
-                <!-- Rotation -->
+                <!-- Invert -->
+                <div class="flex items-center">
+                  <input
+                    type="checkbox"
+                    id="invert"
+                    class="h-4 w-4 border-gray-300 rounded"
+                    style="
+                      color: var(--ha-blue);
+                      --tw-ring-color: var(--ha-blue);
+                    "
+                  />
+                  <label for="invert" class="ml-2 block text-sm text-gray-700"
+                    >Invert Colors</label
+                  >
+                </div>
+              </div>
+            </div>
+
+            <!-- Advanced Settings Accordion -->
+            <div class="border-t pt-4">
+              <button
+                type="button"
+                id="advancedToggle"
+                class="w-full flex items-center justify-between text-sm font-medium text-gray-700 hover:text-gray-900"
+                onclick="toggleAdvanced()"
+              >
+                <span>Advanced Settings</span>
+                <svg
+                  id="advancedIcon"
+                  class="w-5 h-5 transition-transform"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </button>
+
+              <div id="advancedSettings" class="hidden mt-4 space-y-4">
+                <!-- Format -->
                 <div>
                   <label class="block text-sm font-medium text-gray-700 mb-1"
-                    >Rotation</label
+                    >Format</label
                   >
                   <select
-                    id="rotate"
+                    id="format"
                     class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:border-transparent"
                     style="
                       border-color: var(--ha-blue-light);
                       --tw-ring-color: var(--ha-blue);
                     "
                   >
-                    <option value="">None</option>
-                    <option value="90">90°</option>
-                    <option value="180">180°</option>
-                    <option value="270">270°</option>
+                    <option value="png">PNG</option>
+                    <option value="jpeg">JPEG</option>
+                    <option value="webp">WebP</option>
+                    <option value="bmp">BMP</option>
                   </select>
                 </div>
 
-                <!-- Invert -->
-                <div class="flex items-center">
+                <!-- Wait Time -->
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1"
+                    >Wait Time (ms)</label
+                  >
                   <input
-                    type="checkbox"
-                    id="invert"
-                    class="h-4 w-4 border-gray-300 rounded"
+                    type="number"
+                    id="wait"
+                    step="100"
+                    min="0"
+                    class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:border-transparent"
                     style="
-                      color: var(--ha-blue);
+                      border-color: var(--ha-blue-light);
                       --tw-ring-color: var(--ha-blue);
                     "
+                    placeholder="0"
                   />
-                  <label for="invert" class="ml-2 block text-sm text-gray-700"
-                    >Invert Colors</label
+                  <p class="text-xs text-gray-500 mt-1">
+                    Add extra wait time before capturing the screenshot. Useful
+                    if you have animations or lazy-loaded content.
+                  </p>
+                </div>
+
+                <!-- Rotation -->
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 mb-1"
+                    >Rotation</label
+                  >
+                  <select
+                    id="rotate"
+                    class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:border-transparent"
+                    style="
+                      border-color: var(--ha-blue-light);
+                      --tw-ring-color: var(--ha-blue);
+                    "
                   >
+                    <option value="">None</option>
+                    <option value="90">90°</option>
+                    <option value="180">180°</option>
+                    <option value="270">270°</option>
+                  </select>
                 </div>
               </div>
             </div>
@@ -968,6 +996,20 @@ <h3 class="text-lg font-semibold" style="color: var(--ha-blue-dark)">
         }
       }
 
+      // Toggle e-ink settings accordion
+      function toggleEink() {
+        const einkSettings = document.getElementById("einkSettings");
+        const einkIcon = document.getElementById("einkIcon");
+
+        if (einkSettings.classList.contains("hidden")) {
+          einkSettings.classList.remove("hidden");
+          einkIcon.style.transform = "rotate(180deg)";
+        } else {
+          einkSettings.classList.add("hidden");
+          einkIcon.style.transform = "rotate(0deg)";
+        }
+      }
+
       // Toggle advanced settings accordion
       function toggleAdvanced() {
         const advancedSettings = document.getElementById("advancedSettings");