SwitchImage

Add-on Marketplace UI Widgets
1

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: SwitchImage
props:
  parameters:
    - description: Label for this Card
      label: Label
      name: Label
      required: false
      type: TEXT
    - description: "example: http://192.168.1.2:8080/static/image_on.jpg"
      label: Image_ON URL
      name: Image_ON
      required: true
      type: TEXT
    - description: "example: http://192.168.1.2:8080/static/image_off.jpg"
      label: Image_OFF URL
      name: Image_OFF
      required: true
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
timestamp: Dec 21, 2020, 12:19:27 AM
component: f7-card
slots:
  default:
    - component: oh-image
      config:
        lazy: true
        position: absolute
        visible: =items[props.item].state === 'ON'
        url: =props.Image_ON
        style:
          maxWidth: 100%
          height: auto
    - component: oh-image
      config:
        lazy: true
        position: absolute
        visible: =items[props.item].state === 'OFF'
        url: =props.Image_OFF
        style:
          maxWidth: 100%
          height: auto
    - component: oh-toggle
      config:
        style:
          position: absolute
          top: 10px
          left: 10px
        item: =props.item
    - component: f7-chip
      config:
        visible: =(props.Label !== undefined)
        text: =props.Label
        style:
          position: absolute
          color: white
          top: 8px
          left: 60px
4 Likes
2

Hey @Christian_Brosius

nice idea - ‘oh-toggle’ only has an item slot in which you can define an item-name which is switched on / off. No extra action configuration needed (and intended) - so this should work:

uid: SwitchImage
props:
  parameters:
    - description: Label for this Card
      label: Label
      name: Label
      required: false
      type: TEXT
    - description: "example: http://192.168.1.2:8080/static/image_on.jpg"
      label: Image_ON URL
      name: Image_ON
      required: true
      type: TEXT
    - description: "example: http://192.168.1.2:8080/static/image_off.jpg"
      label: Image_OFF URL
      name: Image_OFF
      required: true
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
timestamp: Dec 21, 2020, 12:19:27 AM
component: f7-card
slots:
  default:
    - component: oh-image
      config:
        lazy: true
        position: absolute
        visible: =items[props.item].state === 'ON'
        url: =props.Image_ON
        style:
          maxWidth: 100%
          height: auto
    - component: oh-image
      config:
        lazy: true
        position: absolute
        visible: =items[props.item].state === 'OFF'
        url: =props.Image_OFF
        style:
          top: 10px
          maxWidth: 100%
          height: auto
    - component: oh-toggle
      config:
        style:
          position: absolute
          top: 10px
          left: 10px
        item: =props.item
    - component: f7-chip
      config:
        visible: =(props.Label !== undefined)
        text: =props.Label
        style:
          position: absolute
          color: white
          top: 8px
          left: 60px
1 Like
3

Thanks for this widget. I’ve got it working and figured out how to relocate the toggle. Is there a way to change the size and orientation of the toggle? Make it a vertical toggle and bigger?

4

Under the oh-toggle style you can add a transform property which can include both size and rotation adjustment.

    - component: oh-toggle
      config:
        style:
          position: absolute
          top: 10px
          left: 10px
          transform: scale(2) rotate(-90deg)
        item: =props.item
1 Like
5

I’m trying to add config options to the widget for the horizontal and vertical position of the toggle and I don’t know how to reference the number that I input with the added “px”. It keeps placing the toggle at the top right edge off of the image.

    - description: Horizontal position in pixels
      label: Horizontal Position
      name: H-pos
      required: true
      type: TEXT
    - description: Vertical position in pixels
      label: Vertical Position
      name: V-pos
      required: true
      type: TEXT

Then I changed the oh-toggle to:

    - component: oh-toggle
      config:
        style:
          position: absolute
          top: =props.V-pos
          left: =props.H-pos

But it doesn’t have the “px” that way. Also using “40px” in the input doesn’t seem to work either.

I also thought the input might be best to limit to numbers within a range but I’m not sure the proper syntax for that.

6

Well cancel that, I started over, changed a couple things and I can place the toggle easily anywhere I want now.

I did try to set a config option for the color of the toggle but it’s not working so far, the toggle remains orange which I assume is a default.

Current widget:

uid: SwitchImage
props:
  parameters:
    - description: Label for this Card
      label: Label
      name: Label
      required: false
      type: TEXT
    - description: "example: http://192.168.1.2:8080/static/image_on.jpg"
      label: Image_ON URL
      name: Image_ON
      required: true
      type: TEXT
    - description: "example: http://192.168.1.2:8080/static/image_off.jpg"
      label: Image_OFF URL
      name: Image_OFF
      required: true
      type: TEXT
    - description: Horizontal position in pixels (Must include trailing "px")
      label: Horizontal Position
      name: H_position
      required: true
      type: TEXT
    - description: Vertical position in pixels (Must include trailing "px")
      label: Vertical Position
      name: V_position
      required: true
      type: TEXT
    - description: Toggle color
      label: Toggle color
      name: Toggle_color
      required: true
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
timestamp: May 1, 2021, 5:50:01 AM
component: f7-card
slots:
  default:
    - component: oh-image
      config:
        lazy: true
        position: absolute
        visible: =items[props.item].state === 'ON'
        url: =props.Image_ON
        style:
          maxWidth: 100%
          height: auto
    - component: oh-image
      config:
        lazy: true
        position: absolute
        visible: =items[props.item].state === 'OFF'
        url: =props.Image_OFF
        style:
          top: 10px
          maxWidth: 100%
          height: auto
    - component: oh-toggle
      config:
        style:
          position: absolute
          top: =props.V_position
          left: =props.H_position
          color: =props.Toggle_color
        item: =props.item
    - component: f7-chip
      config:
        visible: =(props.Label !== undefined)
        text: =props.Label
        style:
          position: absolute
          color: white
          top: 8px
          left: 60px
7

workout
workout965×233 282 KB

Current look of my test page that controls some outlets and light switches for our Zwift cycling workout setup.