OH3 Widget Image Switch

[Robert_Bevington]

I am trying to design a widget that looks like a real life light switch that visually toggles when switched on or off. I have two images that represent the ON and OFF states.
ON:

OFF:

So far I have an image card that displays the OFF image and actually switches the lamp on and off. However, I want the displayed image to toggle according to current state, i.e. change to the OFF-image when the is actually off.

This is my widget so far:

uid: LightSWitch
tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 1, 2021, 2:05:08 PM
component: oh-image-card
config:
  action: toggle
  actionItem: BuroDeckenlicht_4_STATE
  actionCommand: ON
  url: /static/buttons/switch_white_square_OFF.png
  actionCommandAlt: OFF

The switching works fine, but how can I toggle the image as well?

Thanks for any assistance on this one.

Rob

[BiloxiGeek (Steve Berg)]

Here’s one example:

SwitchImage

Idea: Having a image-card with embedded switch-item and two images. One for ON-state and one for OFF-state [image] [image] So far it is already reacting to the connected items state and toggling the images. But I´m not able to switch the item-state with the included oh-toggle. Any ideas how to get that working? Edit: @RGroll posted the correct way to link the item to the oh-toggle So I deleted my faulty yaml not to confuse someone. Here is the working widget:

Widget-Code

uid: SwitchIma…

[Robert_Bevington]

Hi BiloxiGeek,

I tried that solution first, and it works, but I don’t want to see the toggle switch. So I abandoned it.

Thanks any way.

Rob

[JustinG]

The values in the yaml can all be given as expressions. If you look through the code of most widget examples available here you will see at least one line that looks like this:

"=(test) ? some value : some other value"

This is a ternary operation which reads “If the test is true then use some value, otherwise use some other value”. You can use this in your url config. Test for the state of your switch item and return either the url for the first image or the second.

[Robert_Bevington]

Hi Justin,

now I would have never thought about using a ternary operation for the URL. Thanks for that. But for some unknown reason to me, the test is never returning true. The light switches fine, but the image stays as the OFF image.

tags: []
props:
  parameters:
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 2, 2021, 5:27:14 PM
component: oh-image-card
config:
  action: toggle
  actionItem: =(props.item)
  actionCommand: ON
  actionCommandAlt: OFF
  url: "=(props.item === 'ON') ? '/static/buttons/switch_white_square_ON_Red.png' : '/static/buttons/switch_white_square_OFF.png'"

It’s probably something so simple as always. I’ve tried different combinations, but no success so far.

Rob

[JustinG]

@Robert_Bevington

url: "=(props.item === 'ON') ? '/static/buttons/switch_white_square_ON_Red.png' : '/static/buttons/switch_white_square_OFF.png'"

props.item is just a string containing the name of the item. It is not the state of the item. To get the state in the widget yaml you would use the items object:

items[props.item].state

[Robert_Bevington]

Lol, I just found that out myself. But many thanks for your assistance and the explanation. Much appreciated.

Rob