How to create a widget with combobox to execute a Device API?

1

Hello,
On my device I have a list of operating modes, which are defined in an enum and the selection is stored in a variable. Ex:

int state_mode_select = 0;

enum STATE_MODS {
MODE_01 = 1,
MODE_02 = 2,
MODE_03 = 3,
MODE_04 = 4,
MODE_05 = 5
}

Via the device API, I can change the state_mode_select variable.

thing["set_state_mode_select"] << [](pson& in){
if (in.is_empty()){
in = state_mode_select;
} else {
state_mode_select = in;
}
};

However, I would like to create a widget with a combobox so that the user can select options from the STATE_MODS. And then, click the button to run the device API and change the state_mode_select variable.
image

If this first option is not possible, would a second option be viable?

That is, the widget would fetch the JSON from the device properties and create the combobox.

Then, the user would select an option from the combobox and that option would be sent to the device API, and would change the state_mode_select variable.

2

More examples of what the flow would look like:

More examples of how the flow would be:

  1. The widget would query the device’s API to find out the number of the currently selected Operation Mode. (Ex: If it is number 5, the widget should be filled with the text “MODE_05”)

  2. The Widget redefines the HTML comobox for the user on the dashboard;

  3. When viewing the widget, the user clicks on the comobox to view the available options. Then, he selects an option and presses the update button. (Ex: Selects MODE_02 and presses the button to update the value on the device)

  4. The Widget updates the device variable via the API, according to the option selected by the user.

<!DOCTYPE html>
<html>
<body>

<form action="/action">
  <label for="mode_op">Operation Mode:</label>
  <select name="mode_op" id="mode_op">
    <option value="1">MODE_01</option>
    <option value="2">MODE_02</option>
    <option value="3">MODE_03</option>
    <option value="4">MODE_04</option>
    <option value="5">MODE_05</option>
  </select>
  <br><br>
  <input type="submit" value="Update">
</form>

</body>
</html>
3

This is a “similar” example to the one indicated in the documentation, but instead of the text field, it would be a comobox whose data should be filled with a pson object from the device or a JSON stored in the device properties.

https://docs.thinger.io/features/dashboards#angularjs-directive-update-device-properties

4

One possibility would be to implement this in the Property Table widget to change the device property.
But it would require additional implementations. It would be necessary to integrate Formly’s Select Type option. Then, it would be possible to change the device property. However, it would be necessary to create a trigger in NodeRed so that every time the property was changed, the change would be made to the device via API.
It may not be an excellent solution, but it would be a possible path.

https://formly.dev/docs/ui/bootstrap

image
image1351×668 55.6 KB

5

I discovered that it is possible to do this and it is already implemented, but you need to define the device as PRODUCT to have access to “Property Forms” and use the Formly and widget Property Button. :clap: :clap: :clap:

But I need to go deeper to know if it is reliable to use this feature to activate and deactivate relays, since “Property Forms” changes the property of the device. I have to check how the command in “Property Forms” can change a feature (Ex: relay on and off) of a device (via API) reliably.

6

Congratulations @alvarolb and @jaimebs for this implementation. Very interesting resources.

I will only analyze whether they are reliable for turning on and off resources such as relays (via the device API), whose feedback on the status (on or off) made available on the dashboard in a reliable way is very important.