Add color type and UI (native) color picker

build/preBuildConfig.py

@@ -36,7 +36,7 @@ def preBuildConfigFun():
         else:
             cpp.write(',\n')
 
-        if item['type'] == 'char':
+        if (item['type'] == 'char' or item['type'] == 'color'):
             cpp.write("\t\"" + item['value'] + "\"")
             h.write("\tchar " + item['name'] + "[" + str(item['length']) + "];\n")
         elif item['type'] == 'bool':

html/js/comp/ConfigPage.js

@@ -59,6 +59,9 @@ const DefaultTypeAttributes = {
         max: 3.4028235E+38,
         step: "any",
     },
+    color: {
+        type: "color",
+    },
 };
 
 export function ConfigPage(props) {
@@ -90,9 +93,9 @@ export function ConfigPage(props) {
                 continue;
             }
 
-            let value; 
+            let value;
             if (typeof state[Config[i].name] !== "undefined") {value = state[Config[i].name];} else {value = "";}
-             
+
             const configInputAttributes = DefaultTypeAttributes[Config[i].type] || {};
             const inputType = DefaultTypeAttributes[Config[i].type].type || "text";
 
@@ -117,6 +120,12 @@ export function ConfigPage(props) {
                         <Grey>({conditionalAttributes.min} &ndash; {conditionalAttributes.max})</Grey>
                     </>;
                     break;
+
+                case "color":
+                    inputType = "color";
+                    conditionalAttributes.value = value;
+                    break;
+
             }
 
             confItems = <>{confItems}

html/js/configuration.json

@@ -6,6 +6,12 @@
         "length": 32,
         "value": "Generic ESP8266 Firmware"
     },
+    {
+        "name": "dummyColor",
+        "type": "color",
+        "length": 32,
+        "value": "#ffffff"
+    },
     {
         "name": "dummyInt",
         "type": "uint16_t",
@@ -15,7 +21,7 @@
         "name": "dummyBool",
         "type": "bool",
         "value": true
-    },    
+    },
     {
         "name": "dummyFloat",
         "type": "float",

html/js/functions/configHelpers.js

@@ -8,6 +8,7 @@ export function obj2bin(obj, binSize) {
     for (let i = 0; i < Config.length; i++) {
         switch (Config[i].type) {
             case "char":
+            case "color":
                 for (let j = 0; j < obj[Config[i].name].length; j++) {
                     binDataView.setUint8(n, (new TextEncoder).encode(obj[Config[i].name][j])[0]);
                     n++;
@@ -70,6 +71,7 @@ export function bin2obj(rawData) {
     for (let i = 0; i < Config.length; i++) {
         switch (Config[i].type) {
             case "char":
+            case "color":
                 parsedData[Config[i].name] = utf8decoder.decode(rawData.slice(n, n + Config[i].length)).split("\0").shift();
                 n = n + Config[i].length;
                 break;