Added ESP32 support, slider, color, dropdown, toggle controls and som… … 10658fc …e other bonuses

.gitignore

@@ -1,3 +1,4 @@
 .pio
 .vscode
 node_modules
+build/__pycache__/*

esp8266-iot.code-workspace

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}

html/js/comp/ConfigPage.js

@@ -5,10 +5,12 @@ import styled from "styled-components";
 
 import Config from "../configuration.json";
 
-import { Form, Button } from "./UiComponents";
+import { Form, Button, StyledSlider } from "./UiComponents";
 
 import { obj2bin, bin2obj } from "../functions/configHelpers";
 
+import Toggle from "react-toggle";
+
 const Grey = styled.span`
     color:#666;
     font-size: 0.8em;
@@ -92,7 +94,9 @@ export function ConfigPage(props) {
 
             let value; 
             if (typeof state[Config[i].name] !== "undefined") {value = state[Config[i].name];} else {value = "";}
-
+
+            const inputControl = Config[i].inputControl || "input";
+
             const configInputAttributes = DefaultTypeAttributes[Config[i].type] || {};
             const inputType = DefaultTypeAttributes[Config[i].type].type || "text";
 
@@ -119,11 +123,59 @@ export function ConfigPage(props) {
                     break;
             }
 
+            let inputControlElements;
+            if (inputControl == "select") {
+                inputControlElements = <><select id={Config[i].name} name={Config[i].name} value={value}>
+                    {Config[i].options.map((currValue, index) => <option value={currValue} key={index}>{currValue}</option>)}
+                </select></>;
+            } else if (inputControl == "color") {
+                // Using HTML <Input type=color.
+                // - Considered alternative <InputColor from https://github.com/swiftcarrot/react-input-color
+                //   but preferred browser in built color selector, is good enough.  Less dependencies.
+
+                inputControlElements = <><input type="color" id={Config[i].name} name={Config[i].name} value={value} {...conditionalAttributes} disabled={Config[i].disabled} />
+                </>;
+            } else if (inputControl == "slider") {
+                // Using https://github.com/zillow/react-slider
+
+                // Hide range info label, is redundant, since slider thumb displays selected value.
+                rangeInfo = "";
+
+                inputControlElements = <><StyledSlider
+                    id={Config[i].name}
+                    name={Config[i].name}
+                    className="horizontal-slider"
+                    thumbClassName="slider-thumb"
+                    trackClassName="slider-track"
+                    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
+                    value={value}
+                    {...conditionalAttributes}
+                    onAfterChange={(val) => state[Config[i].name] = val}
+                /></>;
+            } else if (inputControl == "toggle" || inputType == "checkbox") {
+                // Using <Toggle> from https://github.com/aaronshaf/react-toggle
+                // - Did consider <Switch> from https://github.com/clari/react-ios-switch 
+                //   but preferred react-toggle since UI better matches react-slider.
+
+                inputControlElements = <><Toggle
+                    id={Config[i].name}
+                    name={Config[i].name}
+                    checked={state[Config[i].name]}
+
+                    icons={false}
+                    onChange={(e) => { state[Config[i].name] = e.target.checked; this.setState(this.state);} } 
+                /></>;
+            } else if (inputControl == "input") {
+                inputControlElements = <input type={inputType} id={Config[i].name} name={Config[i].name} value={value} {...conditionalAttributes} disabled={Config[i].disabled} style="width:100%" />;
+            } else {
+                inputControlElements = <><div>Unknown inputControl type &apos;{inputControl}&apos;</div></>;
+            }
+
             confItems = <>{confItems}
-                <p>
-                    <label htmlFor={Config[i].name}><b>{Config[i].label || Config[i].name}</b>: {rangeInfo}</label>
-                    <input type={inputType} id={Config[i].name} name={Config[i].name} value={value} {...conditionalAttributes} disabled={Config[i].disabled} />
-                </p>
+                <tr>
+                    <td nowrap><label htmlFor={Config[i].name}><b>{Config[i].label || Config[i].name}</b>: {rangeInfo}</label></td>
+                    <td>{inputControlElements}</td>
+                </tr>
             </>;
         }
     }
@@ -141,10 +193,13 @@ export function ConfigPage(props) {
         }>Save</Button>;
     }
 
-    const form = <><Form>
-        {confItems}
-    </Form>
-    {button}        
+    const form = <>
+        <Form>
+            <table width="100%" style="width:100%">
+                {confItems}
+            </table>
+        </Form>
+        {button}        
     </>;
 
     return <><h2>Configuration</h2><p>{form}</p></>;
@@ -158,16 +213,23 @@ export function ConfigPage(props) {
                 continue;
             }
 
-            switch (Config[i].type) {
-                case "bool":
-                    newData[Config[i].name] = document.getElementById(Config[i].name).checked;
-                    break;
-
-                default:
+            if (Config[i].type == "bool") {
+                newData[Config[i].name] = document.getElementById(Config[i].name).checked;
+            } else if (Config[i].inputControl == "color") {
+                newData[Config[i].name] = document.getElementById(Config[i].name).value;
+            } else if (Config[i].inputControl == "slider") {
+                // Use state property that was modified when slider after change event fired
+                newData[Config[i].name] = state[Config[i].name];
+            } else {
+                try {
                     newData[Config[i].name] = document.getElementById(Config[i].name).value;
+                } catch (ex) {
+                    alert(`Ex, msg=${ex.message}, failed to find ${Config[i].name}`);
+                }
             }
         }
 
+        // DEBUG: alert(JSON.stringify(newData));
         return obj2bin(newData, binSize);
 
     }