Add HTML layouting

docs/config-manager.md

@@ -136,6 +136,21 @@ Adding the field `"control": "slider",` will turn the itemm into a slider, the `
 
 Adding the field  `"control": "password",` will turn the item into a hidden field.
 
+The fields below can be used for purposes of the HTML page and will have no functional impact:
+```json
+{
+    "type": "separator"
+},
+{
+    "type": "header",
+    "text": "Header text here"
+},
+{
+    "type": "label",
+    "text": "Label text here"
+},
+```
+
 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

@@ -115,6 +115,21 @@ For `control` items, `"control": "slider",` will turn them into a slider, the `m
 
 `"control": "password",` will turn the item into a hidden field.
 
+The fields below can be used for purposes of the HTML page and will have no functional impact:
+```json
+{
+    "type": "separator"
+},
+{
+    "type": "header",
+    "text": "Header text here"
+},
+{
+    "type": "label",
+    "text": "Label text here"
+},
+```
+
 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/ConfigPage.js

@@ -56,9 +56,10 @@ export function ConfigPage(props) {
                 case "bool":
                     newData[Config[i].name] = document.getElementById(Config[i].name).checked;
                     break;
-
+                
                 default:
-                    newData[Config[i].name] = document.getElementById(Config[i].name).value;
+                    if (Config[i].type != "separator" && Config[i].type != "label" && Config[i].type != "header")
+                        newData[Config[i].name] = document.getElementById(Config[i].name).value;
             }
         }
 

gui/js/comp/DashboardItems.js

@@ -59,6 +59,14 @@ const Control = styled.p`
     }
 `;
 
+const Layout = styled.div`
+    * {
+        width:calc(660px + 3em);
+        margin-left:0px;
+        max-width:calc(100% - 40px);
+    }
+`;
+
 const DefaultTypeAttributes = {
     char: {
         type: "text",
@@ -131,6 +139,21 @@ export function DashboardItems(props) {
                 continue;
             }
 
+            if (props.items[i].type == "separator") {
+                confItems = <>{confItems}<Layout><hr /></Layout></>;
+                continue;
+            }            
+
+            if (props.items[i].type == "header") {
+                confItems = <>{confItems}<Layout><h3>{props.items[i].text}</h3></Layout></>;
+                continue;
+            }            
+
+            if (props.items[i].type == "label") {
+                confItems = <>{confItems}<Layout><p>{props.items[i].text}</p></Layout></>;
+                continue;
+            }
+
             let value;
             if (typeof data !== "undefined" && typeof data[props.items[i].name] !== "undefined") { 
                 value = data[props.items[i].name]; 

scripts/preBuildConfig.py

@@ -30,24 +30,25 @@ def preBuildConfigFun():
     #loop through variables
     first = True
     for item in data: 
-
-        if first==True:
-            first=False
-        else:
-            cpp.write(',\n')
-
-        if item['type'] == 'char':
-            cpp.write("\t\"" + item['value'] + "\"")
-            h.write("\tchar " + item['name'] + "[" + str(item['length']) + "];\n")
-        elif item['type'] == 'color':
-            cpp.write("\t{" + str(item['value'][0]) + ',' + str(item['value'][1]) + ',' + str(item['value'][2]) + '}')
-            h.write("\tuint8_t " + item['name'] +"[3];\n")
-        elif item['type'] == 'bool':
-            cpp.write("\t" + str(item['value']).lower())
-            h.write("\t" + item['type'] + " " + item['name'] +";\n")
-        else:
-            cpp.write("\t" + str(item['value']))
-            h.write("\t" + item['type'] + " " + item['name'] +";\n")
+
+        if item['type'] != 'separator' and item['type'] != 'label' and item['type'] != 'header': 
+            if first==True:
+                first=False
+            else:
+                cpp.write(',\n')
+
+            if item['type'] == 'char':
+                cpp.write("\t\"" + item['value'] + "\"")
+                h.write("\tchar " + item['name'] + "[" + str(item['length']) + "];\n")
+            elif item['type'] == 'color':
+                cpp.write("\t{" + str(item['value'][0]) + ',' + str(item['value'][1]) + ',' + str(item['value'][2]) + '}')
+                h.write("\tuint8_t " + item['name'] +"[3];\n")
+            elif item['type'] == 'bool':
+                cpp.write("\t" + str(item['value']).lower())
+                h.write("\t" + item['type'] + " " + item['name'] +";\n")
+            else:
+                cpp.write("\t" + str(item['value']))
+                h.write("\t" + item['type'] + " " + item['name'] +";\n")
 
     #footers
     h.write("};\n\nextern uint32_t configVersion;\n")

scripts/preBuildDash.py

@@ -21,14 +21,15 @@ def preBuildDashFun():
 
     #loop through variables
     for item in data:        
-        if item['type'] == 'char':
-            h.write("\tchar " + item['name'] + "[" + str(item['length']) + "];\n")
-        elif item['type'] == 'color':
-            h.write("\tuint8_t " + item['name'] +"[3];\n")
-        elif item['type'] == 'bool':
-            h.write("\t" + item['type'] + " " + item['name'] +";\n")
-        else:
-            h.write("\t" + item['type'] + " " + item['name'] +";\n")
+        if item['type'] != 'separator' and item['type'] != 'label' and item['type'] != 'header': 
+            if item['type'] == 'char':
+                h.write("\tchar " + item['name'] + "[" + str(item['length']) + "];\n")
+            elif item['type'] == 'color':
+                h.write("\tuint8_t " + item['name'] +"[3];\n")
+            elif item['type'] == 'bool':
+                h.write("\t" + item['type'] + " " + item['name'] +";\n")
+            else:
+                h.write("\t" + item['type'] + " " + item['name'] +";\n")
 
     #footers    
     h.write("};\n\n#endif")