Improve UX of IO Channel-Single-Threshold Controller UI Dialog

[sjjh]

Component

UI

Description

IMHO the dialog depicted below could benefit from some improvements.

Aspects I noticed:

• state is displayed rather subtle. It could probably be improved by an icon (as used in the widget), maybe even using additional color coding.
• mode looks like three hierarchical identical options (on / automatic / off). In my mental model, the mode has two levels of hierarchy:
  i. Automatic (result can either be on or off)
  ii. Manual
  • ii.1. On
  • ii.2. Off
• also "mode" and "action" seems kind of mixed in this UI design. I could imagine two UI controls, one to switch between manual and automatic, and a second to turn it on or off (if first element is set to manual; otherwise disable second UI control)
• threshold has some issues with displaying the unit
• the threshold input field seems to be too small (the current value is 300.0, but only 3C (3 and half a zero) is displayed)
• behavior seems to have a hard-coded unit of W.
• the dialog is a little too small for the contents, one row is below the fold
• The order of value and unit is not consistent:
  • switched load up-down-input: unit, value
  • current value: value, unit (after/below -- not enough width for element?)
  • threshold up-down-input: unit, value
  • minimum switching time up-down-input: value, unit

[sjjh]

Just as a pointer, regarding the behavior displaying W, I believe the if clause in

openems/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/modal/modal.component.html

Line 246 in db352ea

@if (inputMode?.value === 'SOC') {

needs rework (case OTHER is missing), and the same logic is missing in lines

openems/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/modal/modal.component.html

Line 264 in db352ea

{{ threshold.value | unitvalue:'W' }}

and

openems/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/modal/modal.component.html

Line 271 in db352ea

{{ threshold.value | unitvalue:'W' }}

(but I have no experience with the UI framework and no UI dev environment set up, thus probably someone else can fix it better, and also have a look at the other points)

[sjjh]

The fixed threshold W unit was fixed in #3515. The other points are still open.