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} />