Add project name as title (#47)

* Add Config projectName entry value to page heading (#41) * Improve styling for multiline header * Lifting configData up, and using as title * Updated docs Co-authored-by: Will Murray <[email protected]>
maakbaas · Nov 6, 2020 · f391b5a · f391b5a
1 parent 46f9e92
commit f391b5a
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 104 deletions.
diff --git a/docs/config-manager.md b/docs/config-manager.md
@@ -114,7 +114,11 @@ An example of how this file could look is shown below:
 ]
 ```
 
-Supported data types are: bool, uint8_t, int8_t, uint16_t, int16_t, uint32_t, int32_t, float and char. The length argument is mandatory for datatype char to indicate the length of the string. Variable length strings are not supported. Also, arrays are not supported for now. For this example, the pre-build python script `preBuildConfig.py` will generate the following two files. These should be fairly self explanatory and show how the JSON file is translated into a C struct.
+Supported data types are: bool, uint8_t, int8_t, uint16_t, int16_t, uint32_t, int32_t, float and char. The length argument is mandatory for datatype char to indicate the length of the string. Variable length strings are not supported. Also, arrays are not supported for now. 
+
+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 :).
+
+For this example, the pre-build python script `preBuildConfig.py` will generate the following two files. These should be fairly self explanatory and show how the JSON file is translated into a C struct.
 
 The `configVersion` is the CRC32 hash of the JSON file. This is added to the C code in order to detect if the JSON has changed compared to the content of the EEPROM, since the `configVersion` will also be stored in the EEPROM. This means that if a field is changed in the JSON, the application will know to reject the current content of the EEPROM since it might not be in accordance to the struct definitions it knows.
 

diff --git a/html/js/comp/ConfigPage.js b/html/js/comp/ConfigPage.js
@@ -1,14 +1,13 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 
 import styled from "styled-components";
 
 import Config from "../configuration.json";
+import { obj2bin } from "../functions/configHelpers";
 
 import { Form, Button } from "./UiComponents";
 
-import { obj2bin, bin2obj } from "../functions/configHelpers";
-
 const Grey = styled.span`
     color:#666;
     font-size: 0.8em;
@@ -62,25 +61,11 @@ const DefaultTypeAttributes = {
 };
 
 export function ConfigPage(props) {
-    const [state, setState] = useState([]);
-    const [binSize, setBinSize] = useState(0);
-
+
     useEffect(() => {
         document.title = "Configuration";
-        fetchData();
     }, []);
-
-    function fetchData() {
-        fetch(`${props.API}/api/config/get`)
-            .then((response) => {
-                return response.arrayBuffer();
-            })
-            .then((data) => {
-                setBinSize(data.byteLength);
-                setState(bin2obj(data));
-            });
-    }
-
+
     let confItems;
     if (Config.length == 0) {
         confItems = <p>There are no items defined in <b>configuration.json</b></p>;
@@ -91,7 +76,7 @@ export function ConfigPage(props) {
             }
 
             let value; 
-            if (typeof state[Config[i].name] !== "undefined") {value = state[Config[i].name];} else {value = "";}
+            if (typeof props.configData[Config[i].name] !== "undefined") {value = props.configData[Config[i].name];} else {value = "";}
 
             const configInputAttributes = DefaultTypeAttributes[Config[i].type] || {};
             const inputType = DefaultTypeAttributes[Config[i].type].type || "text";
@@ -129,14 +114,14 @@ export function ConfigPage(props) {
     }
 
     let button;
-    if (Object.keys(state).length > 0) {
+    if (Object.keys(props.configData).length > 0) {
         button = <Button onClick={() =>
             fetch(`${props.API}/api/config/set`, {
                 method: "post",
                 body: form2bin(),                
             }).then((response) => { return response.status; })
                 .then((status) => {
-                    if (status == 200) {fetchData();}
+                    if (status == 200) {props.requestUpdate();}
                 })         
         }>Save</Button>;
     }
@@ -154,7 +139,7 @@ export function ConfigPage(props) {
 
         for (let i = 0; i < Config.length; i++) {
             if (Config[i].hidden) {
-                newData[Config[i].name] = state[Config[i].name];
+                newData[Config[i].name] = props.configData[Config[i].name];
                 continue;
             }
 
@@ -168,12 +153,15 @@ export function ConfigPage(props) {
             }
         }
 
-        return obj2bin(newData, binSize);
+        return obj2bin(newData, props.binSize);
 
     }
 
 }
 
 ConfigPage.propTypes = {
     API: PropTypes.string,
+    binSize: PropTypes.number,
+    configData: PropTypes.object,
+    requestUpdate: PropTypes.func,
 };
diff --git a/html/js/comp/UiComponents.js b/html/js/comp/UiComponents.js
@@ -64,7 +64,13 @@ HeaderSrc.propTypes = {
 };
 
 export const Header = styled(HeaderSrc)`
-    background-color: ${cHeader};    
+    background-color: ${cHeader};   
+    padding:0.3em 0em; 
+
+    h1 {
+        margin:0.5em 0em;
+    }
+
     div:first-child {
         margin:0px auto;
         padding:0em 1em;
@@ -82,10 +88,14 @@ export const Header = styled(HeaderSrc)`
     a {
         color: #fff;
         padding:0.6em;
-        margin-left:1em;
+        margin-right:1em;
         border-radius:3px;
     }
 
+    li:last-of-type a {
+        margin-right:0px;
+    }
+
     a:hover {
         color:#fff;
         background-color: ${cHeaderHover};
@@ -150,15 +160,15 @@ export const Hamburger = styled(HamburgerSrc)`
 export const Menu = styled.ul`
     display:flex;
     padding:0px;
-    list-style: none;     
+    list-style: none;  
     
     @media (max-width: 1024px) 
     {   
         display:block;
         width:100%;
         background-color:#444;
         margin:0px -1em;
-        padding:0em 1em;
+        padding:0em 1em;    
 
         a {
             display:block;

diff --git a/html/js/configuration.json b/html/js/configuration.json
@@ -1,33 +1,33 @@
-[
-    {
-        "name": "projectName",
-        "label": "Project Name",
-        "type": "char",
-        "length": 32,
-        "value": "Generic ESP8266 Firmware"
-    },
-    {
-        "name": "dummyInt",
-        "type": "uint16_t",
-        "value": 1000
-    },
-    {
-        "name": "dummyBool",
-        "type": "bool",
-        "value": true
-    },    
-    {
-        "name": "dummyFloat",
-        "type": "float",
-        "min": 1,
-        "max": 10,
-        "value": 1.2345
-    },
-    {
-        "name": "dummyString",
-        "type": "char",
-        "hidden": true,
-        "length": 11,
-        "value": "invisible!"
-    }
+[
+    {
+        "name": "projectName",
+        "label": "Project Name",
+        "type": "char",
+        "length": 32,
+        "value": "ESP8266 IoT Framework"
+    },
+    {
+        "name": "dummyInt",
+        "type": "uint16_t",
+        "value": 1000
+    },
+    {
+        "name": "dummyBool",
+        "type": "bool",
+        "value": true
+    },    
+    {
+        "name": "dummyFloat",
+        "type": "float",
+        "min": 1,
+        "max": 10,
+        "value": 1.2345
+    },
+    {
+        "name": "dummyString",
+        "type": "char",
+        "hidden": true,
+        "length": 11,
+        "value": "invisible!"
+    }
 ]
diff --git a/html/js/index.js b/html/js/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import ReactDOM from "react-dom";
 import {BrowserRouter, Switch, Route, NavLink} from "react-router-dom";
 import { Box } from "react-feather";
@@ -9,6 +9,10 @@ import { ConfigPage } from "./comp/ConfigPage";
 import { FilePage } from "./comp/FilePage";
 import { FirmwarePage } from "./comp/FirmwarePage";
 
+import { bin2obj } from "./functions/configHelpers";
+
+import Config from "./configuration.json";
+
 let url = "http://192.168.1.54";
 if (process.env.NODE_ENV === "production") {url = window.location.origin;}
 
@@ -17,13 +21,31 @@ if (process.env.NODE_ENV === "development") {require("preact/debug");}
 function Root() {
 
     const [menu, setMenu] = useState(false);
+    const [configData, setConfigData] = useState([]);
+    const [binSize, setBinSize] = useState(0);
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    function fetchData() {
+        fetch(`${url}/api/config/get`)
+            .then((response) => {
+                return response.arrayBuffer();
+            })
+            .then((data) => {
+                setBinSize(data.byteLength);
+                setConfigData(bin2obj(data));
+            });
+    }
 
+    const projectName = configData["projectName"] || Config.find(entry => entry.name === "projectName").value || "ESP8266";
     return <><GlobalStyle />
 
         <BrowserRouter>
 
             <Header>
-                <h1><Box style={{verticalAlign:"-0.1em"}} /> ESP8266</h1>
+                <h1><Box style={{verticalAlign:"-0.1em"}} /> {projectName}</h1>
 
                 <Hamburger onClick={() => setMenu(!menu)} />
                 <Menu className={menu ? "" : "menuHidden"}>
@@ -41,7 +63,10 @@ function Root() {
                         <FilePage API={url} />
                     </Route>
                     <Route exact path="/config">
-                        <ConfigPage API={url} />
+                        <ConfigPage API={url} 
+                            configData={configData}
+                            binSize={binSize}
+                            requestUpdate={fetchData} />
                     </Route>
                     <Route exact path="/firmware">
                         <FirmwarePage API={url} />

diff --git a/src/generated/config.cpp b/src/generated/config.cpp
@@ -1,11 +1,11 @@
 #include <Arduino.h>
 #include "config.h"
 
-uint32_t configVersion = 2773241707; //generated identifier to compare config with EEPROM
+uint32_t configVersion = 327553685; //generated identifier to compare config with EEPROM
 
 const configData defaults PROGMEM =
 {
-	"Generic ESP8266 Firmware",
+	"ESP8266 IoT Framework",
 	1000,
 	true,
 	1.2345,