Add slider (Implements #134)

Author: maakbaas

docs/config-manager.md

@@ -132,6 +132,8 @@ Supported data types are: bool, uint8_t, int8_t, uint16_t, int16_t, uint32_t, in
 
 Adding the field `"control": "select",` will turn the item into a drop down menu, with the options defined as  `"options": [1, 2, 3]`.  
 
+Adding the field `"control": "slider",` will turn the itemm into a slider, the `min`, `max` and `step` properties will also apply to the slider. This is only valid for numeric types.
+
 There are a few unique parameters:
 
 * The configuration parameter `projectName` is unique in this framework. You can remove it, but if you use a parameter with this name, it will be shown as the header title in the web interface :).

docs/dashboard.md

@@ -111,6 +111,8 @@ there are a few other specific fields. the `direction` field is mandatory, and `
 
 For `control` items, `"control": "select",` will turn them into a drop down menu, with the options defined as  `"options": [1, 2, 3]`. In addition, you can specify `"optionLabels": ['one', 'two', 'three']` if you want the GUI to show more user-friendly labels in your drop down menu.
 
+For `control` items, `"control": "slider",` will turn them into a slider, the `min`, `max` and `step` properties will also apply to the slider. This is only valid for numeric types.
+
 For this example, the pre-build python script `preBuildDash.py` will generate the files `dash.h` containing the type definition. This should be fairly self explanatory and show how the JSON file is translated into a C struct.
 
 **Important:** After you have changed the JSON file, you also need to regenerate the web interface to reflect the latest changes by enabling the REBUILD_HTML build flag, otherwise the web interface will show the old dashboard data. Refer to [this section](https://github.com/maakbaas/esp8266-iot-framework/blob/master/docs/getting-started.md#editing-the-web-interface) for more details.

gui/js/comp/ControlItem.js

@@ -113,6 +113,11 @@ export function ControlItem(props) {
         return <select id={props.name} name={props.name} value={data} onChange={(e) => { setTarget(e.target.value); save(); }}>
             {options}
         </select>;
+    } else if (props.type == "slider") {
+        return <>
+            <input type="range" onChange={() => {save();}} id={props.name} name={props.name} value={data} {...props.conditionalAttributes} onInput={(e) => setTarget(e.target.value)} />
+            <output>{data}</output>
+        </>;    
     } else if (checkbox) {
         return <input onClick={(e) => { setTarget(e.target.checked); save(); }} type={props.type} id={props.name} name={props.name} value={data} {...props.conditionalAttributes} />;
     } else if (props.type == "color") {

gui/js/comp/DashboardItems.js

@@ -141,7 +141,7 @@ export function DashboardItems(props) {
 
             } else { value = ""; }
 
-            //const configInputAttributes = DefaultTypeAttributes[props.items[i].type] || {};
+            const configInputAttributes = DefaultTypeAttributes[props.items[i].type] || {};
             let inputType;
             if (typeof props.items[i].control !== "undefined") {
                 inputType = props.items[i].control;
@@ -173,6 +173,12 @@ export function DashboardItems(props) {
                     }
                     break;
 
+                case "slider":
+                    conditionalAttributes.min = props.items[i].min || configInputAttributes.min;
+                    conditionalAttributes.max = props.items[i].max || configInputAttributes.max;
+                    conditionalAttributes.step = props.items[i].step || configInputAttributes.step;                   
+                    break;
+
                 case "select":
                     conditionalAttributes.options = props.items[i].options;                                        
                     conditionalAttributes.optionLabels = props.items[i].options;
@@ -232,6 +238,17 @@ export function DashboardItems(props) {
                                 </select>
                             </p>
                         </>;
+                    } else if (inputType == "slider") {
+                        
+                        const [rangeval, setRangeval] = useState(null);
+                        
+                        confItems = <>{confItems}
+                            <p>
+                                <label htmlFor={props.items[i].name}><b>{props.items[i].label || props.items[i].name}</b>:</label>
+                                <input type="range" id={props.items[i].name} name={props.items[i].name} value={rangeval || value} {...conditionalAttributes} disabled={props.items[i].disabled} onInput={(event) => setRangeval(event.target.value)} />
+                                <output>{rangeval || value}</output>
+                            </p>
+                        </>;
                     } else {
                         confItems = <>{confItems}
                             <p>

gui/js/comp/UiComponents.js

@@ -314,6 +314,19 @@ export const Form = styled.form`
         max-width:100%;
     }
 
+    input[type=range] {
+        width:380px;
+        padding: 0.3em 0em;        
+        max-width:calc(100% - 70px);
+    }
+
+    input[type=range] + * {
+        vertical-align:top;
+        display:inline-block;
+        width:70px;
+        text-align:right;
+    }
+
     input[type=color]
     {
         display:inline-block;