From aaea9ff018e6c3b5b70f3103ef9b281f226d8a9e Mon Sep 17 00:00:00 2001
From: Henrik <henrik@werkstrom.com>
Date: Sun, 9 Apr 2023 14:18:22 +0200
Subject: [PATCH] Added info on usage of IDs

---
 wled00/data/cpal/cpal.htm | 38 +++++++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/wled00/data/cpal/cpal.htm b/wled00/data/cpal/cpal.htm
index d3ab498b..382f5cc5 100644
--- a/wled00/data/cpal/cpal.htm
+++ b/wled00/data/cpal/cpal.htm
@@ -5,7 +5,7 @@
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
-    <title>WLED Pixel Art Converter</title>
+    <title>WLED Custom Palette Creator</title>
     <script type="text/javascript">
       var d = document;
       function gId(e) {return d.getElementById(e);}
@@ -94,14 +94,14 @@
         vertical-align: middle;
       }
       #info {
-        display: flex;
+        display: block;
         text-align: center;
         color: #fff; 
         font-family: Arial, sans-serif; 
         font-size: 12px;
-        vertical-align: middle;
         position: relative;
         margin-top: 100px;
+        line-height: 1;
       }
       </style>
   </head>
@@ -134,15 +134,19 @@
 
   <div style="display: flex; justify-content: center;">
     <div id="info">
-      Click on the gradient to add new color slider. Click the colored box below the slider to change color. Click the red box below indicator (and confirm) to delete. Select palette number. Click the cloud icon to upload.
+      Click on the gradient to add new color slider. Click the colored box below the slider to change color. Click the red box below indicator (and confirm) to delete. Select palette number. Click the cloud icon to upload. 
+      <br>
+      Currently in use Custom Palette IDs are 0 to <span id="cpaltx">-1</span>. Note!, IDs <u>must</u> be in uninterupted sequece from 0 and cannot excede 9. This number will only be updated on WLED reboot (or equivalent).
     </div>
   <div style="display: flex; justify-content: center;"></div>
   
+  
 </body>
 
 <script type="text/javascript">
+  //global variables
   var gradientBox = gId('gradient-box');
-
+  var cpalc = -1;
   var pxCol = {};
   var tCol = {};
   var rect = gradientBox.getBoundingClientRect();
@@ -156,10 +160,15 @@
     console.log(mOffs)
   }
 
+  //Initiation
+  getInfo();
+  
+
   gradientBox.addEventListener("click", clikOnGradient);
   gId("sendSpan").innerHTML = 
   '<svg class="svg-icon" style="width:36px;height:36px" viewBox="0 0 24 24"> <path id=sendSvgP fill="#fff" d="M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20H13Q12.18 20 11.59 19.41 11 18.83 11 18V12.85L9.4 14.4L8 13L12 9L16 13L14.6 14.4L13 12.85V18H18.5Q19.55 18 20.27 17.27 21 16.55 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 9.93 6 8.46 7.46 7 8.93 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18H9V20M12 13Z" /> </svg>';
 
+  
 
   //Sets start and stop, mandatory
   addC(0);
@@ -422,5 +431,24 @@
       req.send(formData);
       return false;
   }
+
+  // Get segments from device
+async function getInfo() {
+  hst = location.host;
+  if (hst.length > 0 ){
+    try {
+      var arr = [];
+      const response = await fetch('http://'+hst+'/json/info');
+      const json = await response.json();
+      cpalc = json.cpalcount;
+      gId('cpaltx').innerHTML = cpalc-1;
+      console.log('cpalc: ', cpalc);
+    } catch (error) {
+      console.error(error);
+    }
+  } else{
+    console.error('cannot identify host');
+  }
+}
 </script>