Main UI List Card Color Wheel ans on/Off Button

Add-ons UIs
1

Currently playing around with the new UI and try to create a set of standard elements for my system.

  • A simple switch
  • A simple switch with color wheel
  • A simple list of values
  • A simple thermostat

The switch with toogle oder label card is working for me as well as the list of values. I saw a thermostat widget as well, but i struggle on the switch with color wheel. For me this combination is essential for color lights. Switch it on and set color … In the autgenerated widget s if found this

image
image1036×75 5.77 KB

Bute how can build that with standard widgets?

2

I assume you mean how can you make the color picker that you see in the pictured widget. There is an oh-colorpicker component.

This one is a little harder to configure for some.

  1. By default the widget will just display the color picking sliders or wheel, if you want it to start from the little color square and then open into the actual picker then you need to set the openIn property. This one isn’t in the OH documentation it’s from the original f7-docs. But this tells the widget the kind of modal you want the picking elements to open up in (probably ‘popup’ in most cases).
  2. The modules propery needs to be set as an array (which means that you can also have more than one if, for example you want the color wheel and hsb sliders).

So a full config might be something like this:

    - component: oh-colorpicker
      config:
        item: someColorItem
        openIn: popup
        modules:
          - wheel
          - hsb-sliders
1 Like
3

Funny thing. Just created a oh list widget and it has an on/off switch an the little squareto select color.