From a5a53856e03d2fbba1c8393750b814d771e112a9 Mon Sep 17 00:00:00 2001 From: Maakbaas Date: Wed, 16 Jun 2021 22:10:25 +0200 Subject: [PATCH] Add color type to GUI --- docs/config-manager.md | 2 +- docs/dashboard.md | 2 +- gui/js/comp/ControlItem.js | 8 ++ gui/js/comp/DashboardItems.js | 3 + gui/js/comp/DisplayItem.js | 3 +- gui/js/comp/UiComponents.js | 22 +++ gui/js/functions/configHelpers.js | 17 +++ scripts/preBuildConfig.py | 3 + scripts/preBuildDash.py | 2 + src/generated/html.h | 227 +++++++++++++++--------------- 10 files changed, 173 insertions(+), 116 deletions(-) diff --git a/docs/config-manager.md b/docs/config-manager.md index 4f93985..f1bccd4 100644 --- a/docs/config-manager.md +++ b/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]`. diff --git a/docs/dashboard.md b/docs/dashboard.md index 423455b..9468504 100644 --- a/docs/dashboard.md +++ b/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. diff --git a/gui/js/comp/ControlItem.js b/gui/js/comp/ControlItem.js index 6a904f7..ed52f92 100644 --- a/gui/js/comp/ControlItem.js +++ b/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) { ; } else if (checkbox) { return { setTarget(e.target.checked); save(); }} type={props.type} id={props.name} name={props.name} value={data} {...props.conditionalAttributes} />; + } else if (props.type == "color") { + return { setTarget(e.target.value); save(); }} type={props.type} id={props.name} name={props.name} value={data} {...props.conditionalAttributes} />; } else { return <> { setTarget(e.target.value); }} type={props.type} id={props.name} name={props.name} value={data} {...props.conditionalAttributes} />