Add color type to GUI

Author: maakbaas

docs/config-manager.md

@@ -128,7 +128,7 @@ 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. 
+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. Finally, the type can also be set to `color`. In this case the field will be shown as a color picker. Define the value of a color in your JSON file as an array with three numbers between 0 and 255 for the rgb values: `"value": [255, 255, 255]`.
 
 Adding the field `"control": "select",` will turn the item into a drop down menu, with the options defined as  `"options": [1, 2, 3]`.  
 

docs/dashboard.md

@@ -105,7 +105,7 @@ 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. 
+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. Finally, the type can also be set to `color`. In this case the field will be shown as a color picker which will be represented in your code as an array with 3 numbers for the rgb values. 
 
 there are a few other specific fields. the `direction` field is mandatory, and `display` will show the items in the live dashboard whereas `control` will put the items as control inputs in the dashboard. For `display` items, `"display": "graph",` will turn them into a live graph, with the x-axis length in seconds defined by `"xaxis": 20`. For displayed floats, the field `digits` can be used to limit the number of digits shown.
 

gui/js/comp/ControlItem.js

@@ -41,6 +41,12 @@ export function ControlItem(props) {
                     }
                     binDataView.setUint8(target.length, 0);
                     break;
+                case "color":
+                    //parse color code
+                    binDataView.setUint8(0, parseInt(target.slice(1,3), 16));
+                    binDataView.setUint8(1, parseInt(target.slice(3,5), 16));
+                    binDataView.setUint8(2, parseInt(target.slice(5,7), 16));                       
+                    break;
                 case "bool":
                     if (target === true) { binDataView.setUint8(0, 1); } else { binDataView.setUint8(0, 0); }
                     break;
@@ -104,6 +110,8 @@ export function ControlItem(props) {
         </select>;
     } 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") {
+        return <input onChange={(e) => { setTarget(e.target.value); save(); }} type={props.type} id={props.name} name={props.name} value={data} {...props.conditionalAttributes} />;
     } else {
         return <><input onChange={(e) => { setTarget(e.target.value); }} type={props.type} id={props.name} name={props.name} value={data} {...props.conditionalAttributes} />
             <Button onClick={(e) => {            

gui/js/comp/DashboardItems.js

@@ -62,6 +62,9 @@ const DefaultTypeAttributes = {
     char: {
         type: "text",
     },
+    color: {
+        type: "color",
+    },
     bool: {
         type: "checkbox",
     },

gui/js/comp/DisplayItem.js

@@ -45,8 +45,9 @@ export function DisplayItem(props) {
             </FlexibleWidthXYPlot>
         </div>;
 
+    } else if (props.item.type == "color") {
+        return <input type={props.item.type} id={props.item.name} disabled="disabled" title="This field is read-only" name={props.item,name} style={{cursor: "default"}} value={props.value} />;
     } else {
-
         return <span id={props.item.name} name={props.item.name} className={props.item.type == "bool" ? props.value.toString() : ""}>{props.value.toString()}</span>;
 
     }

gui/js/comp/UiComponents.js

@@ -314,6 +314,28 @@ export const Form = styled.form`
         max-width:100%;
     }
 
+    input[type=color]
+    {
+        display:inline-block;
+        margin-left:-2px;
+        width: 48px;
+        height:32px;
+        border-radius: 3px;
+        border:none;
+        outline: none;
+        -webkit-appearance: none;      
+        cursor:pointer;  
+        background-color:#fff;
+        vertical-align: middle;
+    }
+
+    input[type=color]::-webkit-color-swatch-wrapper {
+        padding: 0;	
+    }
+    input[type=color]::-webkit-color-swatch {
+        border-radius: 3px;
+    }
+
     input[type=checkbox] {
         width: auto;
         margin:12px 0px;

gui/js/functions/configHelpers.js

@@ -13,6 +13,14 @@ export function obj2bin(obj, binSize, JSON) {
                 binDataView.setUint8(n, 0);
                 n += JSON[i].length - obj[JSON[i].name].length;
                 break;
+            case "color":
+                //parse color code
+                binDataView.setUint8(n, parseInt(obj[JSON[i].name].slice(1,3), 16));
+                binDataView.setUint8(n + 1, parseInt(obj[JSON[i].name].slice(3,5), 16));
+                binDataView.setUint8(n + 2, parseInt(obj[JSON[i].name].slice(5,7), 16));   
+                
+                n += 3;
+                break;
             case "bool":
                 if (obj[JSON[i].name] === true) {binDataView.setUint8(n, 1);} else {binDataView.setUint8(n, 0);}
                 n++;
@@ -70,6 +78,11 @@ export function bin2obj(rawData, JSON) {
                 parsedData[JSON[i].name] = utf8decoder.decode(rawData.slice(n, n + JSON[i].length)).split("\0").shift();
                 n = n + JSON[i].length;
                 break;
+            case "color":
+                //create color code
+                parsedData[JSON[i].name] = "#" + ("0" + (rawDataView.getUint8(n)).toString(16)).slice(-2) + ("0" + (rawDataView.getUint8(n + 1)).toString(16)).slice(-2) + ("0" + (rawDataView.getUint8(n + 2)).toString(16)).slice(-2);
+                n = n + 3;
+                break;
             case "bool":
                 parsedData[JSON[i].name] = !!rawDataView.getUint8(n);
                 n++;
@@ -124,6 +137,10 @@ export function binsize(name, JSON) {
                 sizeArray = [n, JSON[i].length];                
                 n = n + JSON[i].length;
                 break;
+            case "color":
+                sizeArray = [n, 3];                
+                n += 3;
+                break;
             case "bool":
                 sizeArray = [n, 1];                
                 n++;

scripts/preBuildConfig.py

@@ -39,6 +39,9 @@ def preBuildConfigFun():
         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")

scripts/preBuildDash.py

@@ -23,6 +23,8 @@ def preBuildDashFun():
     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: