@domenicquirl provided long feedback looking for something like the multi-state button in FlexDash. Even though I directed him to the FlexDash Alpha thread that thread is getting darn long, so I'm replying in a new thread. (Apologies for the switcharoo, Domenic.)
We have parts of the UI that interact with remote hardware via various forms of network communication. This means that there are two distinct values behind any device value:
- the actual current state of some device value
- the current state that a device value is supposed to have according to the user, i.e. what the user wants to set the value to
and there are three things you need to display in the UI:
- the actual value
- the intended value
- a UI element to change the intended value
Sometimes these values influence one another, so e.g. a command that you send will change both the on-device command, but will also affect the state of the device somehow, which you also need to display. A different flow that we have has a dashboard that solves this by showing individual UI elements for all these things. So there is a separate UI node for the actual command, the sent command, the state, and a button to change the command. This was perceived as unwieldy and confusing by users and it was requested to find a different solution for the current project.
I believe the button bar can accommodate this, but I haven't looked at the multistate switch (I need to). Here's an example from my shutter controls:
These controls have 3 button bars. The top blue bar lets you select a shutter (highlighted in purple) and each button has a "chip" or "pill" that shows the current state of the shutter. Having selected a shutter, you can press a position button in the second bar or an adjustment button in the third. These two button bars are stateless, you just see a ripple when pressing a button.
Now here's the help text and the props:
Display a bar of buttons with any combination of icons, labels and second lines.
Pressing a button sends a message with either the index of the button in the bar (0-based) or
the `value` of the button.
The buttons are configured using the `button` prop, which must be an array of objects with
the following properties (all are optional):
- `icon`: icon name with 'mdi-' prefix, names can be found at https://materialdesignicons.com
- `label`: button label,
- `line2`: second line of text,
- `line2_color`: color of second line, shows as a "pill",
- `value`: value to send when button is clicked,
- `disabled`: whether button is disabled,
- 'selected_color': color of button when selected,
Buttons can be shown as selected by setting the `value` prop to the index of the selected button
or by passing in an array of booleans, one for each button.
props: {
value: { default: null, tip: "index or value of selected button or array of bool per button" },
buttons: { default: [{label:"button 1"}],
tip: "array of buttons with icon, label, value, color, selected_color, line2, line2_color, disabled" },
variant: { type: String, default: 'default', tip: "values: 'default', 'flex'" },
stretch: { type: Boolean, default: false, tip: "stretch buttons horizontally to fill widget" },
},
One thing to remember with FlexDash is that every prop can be changed dynamically using msg.<prop_name>. You mentioned having a toggle that has different colors for on vs. off: in principle you can do that by setting not just the value but also the color when you send it a message, except that the toggle is color-less when off, so this is a poor example.
So I believe you can achieve what you're looking for by labeling the buttons with the intended value, displaying the current value in the 2nd line or pill, and the user can change things by pressing the button with the new intended value.
The button bar is currently in my testnodes repo because I have two variants implemented, one using the Vuetify ButtonBar component and one using individual Buttons. I'm not sure providing both variants in a good idea 'cause it makes everyone go 'huh?' and having to choose.
. The 'default' button bar variant looks like one widget, though:
