Added info on usage of IDs

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>