add output table , playing around with html in playground

Arduino/CanGrow/CanGrow.ino

@@ -131,9 +131,9 @@ void setup() {
   LoadConfig();
   Wifi_Init();
   Webserver_Init();
-  Serial.printf("Usable Pins: %d\n", PinIndex_length);
+  Serial.printf(":: [SETUP] Usable Pins: %d\n", GPIOindex_length);
-  for(byte i = 0; i < PinIndex_length; i++) {
+  for(byte i = 0; i < GPIOindex_length; i++) {
-    Serial.printf("Pin Index: %d, GPIO: %d, Notes: %d\n", i, PinIndex[i].gpio, PinIndex[i].note);
+    Serial.printf(":: [SETUP] Pin Index: %d, GPIO: %d, Notes: %d\n", i, GPIOindex[i].gpio, GPIOindex[i].note);
   }
   
 }

Arduino/CanGrow/include/CanGrow.h

@@ -52,10 +52,10 @@
 
 #define CANGROW_SSID "CanGrow-unconfigured"
 
-/* actual structure initialization for Pin_Index is done within the header files
+/* actual structure initialization for GPIO_Index is done within the header files
  * for ESP32 and ESP8266
  * 
- * Pin_Index.note explenation:
+ * GPIO_Index.note explenation:
  *   1 - BOOTFAILS_LOW: BootFails when LOW
  *   2 - BOOTFAILS_HIGH: BootFails when HIGH
  *   3 - FLASHMODE_LOW: FlashMode needs LOW to enter
@@ -69,13 +69,16 @@ const byte FLASHMODE_LOW = 3;
 const byte INPUT_ONLY = 4;
 const byte NO_PWM = 5;
 
-struct Pin_Index {
+struct GPIO_Index {
   const byte gpio;
   const byte note;
 };
 
 const byte Max_Outputs = 16;
 
+const char[] Output_Types= { "GPIO" , "I2C", "URL" }
+byte Output_Types_len = 3;
+
 /*
  * 
  * Config
@@ -103,7 +106,7 @@ struct Config_WiFi {
 struct Config_System_Output {
    
   /*
-   * Config System Outputs
+   * Config System Output
    * 
    * - output_type: output type like GPIO, I2C, URL
    *   1 - GPIO

Arduino/CanGrow/include/CanGrow_ESP32.h

@@ -61,9 +61,9 @@
 
 
 // 
-const byte PinIndex_length = 21;
+const byte GPIOindex_length = 21;
 // initialize pinIndex with all usable GPIOs
-Pin_Index PinIndex[] = {  { 0, FLASHMODE_LOW },
+GPIO_Index GPIOindex[] = {  { 0, FLASHMODE_LOW },
                           { 4 },
                           { 5 },
                           { 12, BOOTFAILS_HIGH },

Arduino/CanGrow/include/CanGrow_ESP8266.h

@@ -45,9 +45,9 @@
  * - GPIO 16 / D0
  */
 
-const byte PinIndex_length = 6;
+const byte GPIOindex_length = 6;
 // initialize pinIndex with all usable GPIOs
-Pin_Index PinIndex[] = {  { 0, BOOTFAILS_LOW },
+GPIO_Index GPIOindex[] = {  { 0, BOOTFAILS_LOW },
                           { 12 },
                           { 13 },
                           { 14 },

Arduino/CanGrow/include/Webserver/File_cangrow_CSS.h

@@ -37,7 +37,6 @@ const char* File_cangrow_CSS PROGMEM = R"(body {
 
 .footer {
   color: #343B35;
-  /*text-align: center;*/
 }
 
 .center {
@@ -46,15 +45,10 @@ const char* File_cangrow_CSS PROGMEM = R"(body {
 } 
 
 .centered {
-  display: block;
   margin-left: auto;
   margin-right: auto;
 }
 
-/*h1, h2, h3, h4, h5 {
-  text-align: center;
-}*/
-
 h1 {
   margin: 15px;
 }

Arduino/CanGrow/include/Webserver/Page_system.h

@@ -300,6 +300,28 @@ String Proc_WebPage_system_output(const String& var) {
     return AddHeaderFooter(var, 2);
   } else if(Test_WebPage_system_SUBNAV(var)) {
     return Proc_WebPage_system_SUBNAV(var, 1);
+  } else if(var == "OUTPUT_TR_TD") {
+    // build table body
+    // i dont know a better way at the moment. if you do, please tell me!
+    String output_tr_td;
+    for(byte i=0; i < Max_Outputs; i++) {
+      Serial.printf("DB [Webserver:system:output(Proc)] OutputID %d Type %d\n", i, config.system.output.type[i]);
+      output_tr_td += "<tr><td>";
+      output_tr_td += i;
+      output_tr_td += "</td><td>";
+      output_tr_td +=  config.system.output.name[i];
+      output_tr_td += "</td><td>";
+      output_tr_td += config.system.output.type[i];
+      output_tr_td += "</td><td>";
+      output_tr_td += config.system.output.device[i];
+      output_tr_td += "</td><td><a href='#";
+      output_tr_td += i;
+      output_tr_td += "'>&#x270F;&#xFE0F;</a> <a href='#";
+      output_tr_td += i;
+      output_tr_td += "'>&#x274C;</a></td></tr>";
+    }
+    
+    return output_tr_td;
   } else{
     return String();
   }

Arduino/CanGrow/include/Webserver/Page_system_HTML.h

@@ -138,6 +138,16 @@ const char* Page_system_wipe_HTML_WIPE_MSG_POST PROGMEM = R"(Restarting...)";
 const char* Page_system_output_HTML PROGMEM = R"(%HEADER%
 %SUBNAV%
 <a class='button' href='/system/output/add'>&#10133; Add output</a>
+<table class='centered'>
+  <tr>
+    <th>ID</th>
+    <th>Name</th>
+    <th>Type</th>
+    <th>Device</th>
+    <th>Action</th>
+  </tr>
+  %OUTPUT_TR_TD%
+</table>
 %FOOTER%)";
 
 /*

playground/html/root/index.html

@@ -25,13 +25,13 @@
 </ul>
 <a class='button' href='/system/output/add'>&#10133; Add output</a>
 <table class='centered'>
-  <t3>
+  <tr>
     <th>ID</th>
     <th>Name</th>
     <th>Type</th>
     <th>Device</th>
     <th>Action</th>
-  </t3>
+  </tr>
   <tr>
     <td>0</td>
     <td>LED main</td>
@@ -68,5 +68,86 @@
     <td><a href="#">✏️</a> <a href="#">❌</a> </td>
   </tr>
 </table>
+
+
+<p>Add a new output to CanGrow.</p>
+<form method='post' action='/system/output/add'>
+
+<u>Type</u>:<br>
+<select name='config.system.httpLogSerial' required>
+  <option disabled value='' selected hidden>---</option>
+  <option value='1'>GPIO</option>
+  <option value='2'>I2C</option>
+  <option value='3'>URL</option>
+</select><br>
+
+<u>Device</u>:<br>
+<select name='config.system.httpLogSerial' required>
+  <option disabled value='' selected hidden>---</option>
+  <option value='1'>Light</option>
+  <option value='2'>Fan</option>
+  <option value='3'>Pump</option>
+  <option value='3'>Humidifier</option>
+  <option value='3'>Dehumidifier</option>
+  <option value='3'>Heating</option>
+</select><br>
+
+<u>Name</u>:<br>
+<input type='text' name='esp32camIp' maxlength='16' value='' ><br>
+
+<u>Enable</u>:<br>
+<select name='config.system.httpLogSerial' required>
+  <option disabled value='' selected hidden>---</option>
+  <option value='1'>Yes</option>
+  <option value='0'>No</option>
+</select><br>
+
+
+<div class='outputSel' id='gpio'>
+  <u>GPIO</u>:<br>
+  <select name='config.system.httpLogSerial' required>
+    <option disabled value='' selected hidden>---</option>
+    <option value='0'>GPIO 0 !BFL!</option>
+    <option value='1'>GPIO 12</option>
+    <option value='2'>GPIO 13</option>
+    <option value='2'>GPIO 14</option>
+    <option value='2'>GPIO 15 !BFH!</option>
+    <option value='2'>GPIO 16 !NOPWM!</option>
+  </select><br>
+  
+  <u>GPIO PWM</u>:<br>
+  <select name='config.system.httpLogSerial' required>
+    <option disabled value='' selected hidden>---</option>
+    <option value='1'>Enable</option>
+    <option value='2'>Disable</option>
+  </select><br>
+</div>
+
+
+<div class='outputSel' id='gpio'>
+<u>I2C</u>:<br>
+  <input type='text' name='esp32camIp' maxlength='16' value='' ><br>
+</div>
+
+<div class='outputSel' id='gpio'>
+  <u>Host</u>:<br>
+  <input type='text' name='esp32camIp' maxlength='16' value='' ><br>
+  
+  <u>URI on</u>:<br>
+  <input type='text' name='esp32camIp' maxlength='16' value='' ><br>
+  
+  <u>URI off</u>:<br>
+  <input type='text' name='esp32camIp' maxlength='16' value='' ><br>
+</div>
+
+
+<input type='submit' value='&#x1F4BE; Save settings'>
+</form>
+
+
+
+
+
+
 <div class='footer'><span>Build: d679d89-esp8266-20241024231631</span></div>
 </div></body></html>