OH3 rolling gate Custom Widget -> Custom Icon not working

DerLang · May 6, 2021, 3:23pm

Hi,

ok, after 5 months I gave it another try. Started to create my own widget again.
Still I have to say that this is still not straight forward for me.
Way to much Try-And-Error where Error still is the most part of the “development”.
For this widget it took me 3 very long nights …

I’d like to achieve a widget which displays the state of my rolling gate (German: Rolltor).
Futhermore I’d like to control it with 3 buttons (open, stop, close).
At least the last point I could achieve.

Layout (textual):
Row1: centered (perhaps right aligned) image of a rolling gate. I’ve created 10 svg files with open, 10%, 20%, … 100% closed with inkscape
rtsvg
Row2: Current status of gate (opened, opening, stopped, closing, closed)
Row3: centered buttons: open, stop, close

uid: widget_gate_v2
tags: []
props:
  parameters:
    - description: Optionally a title of the widget. Defaults to none
      label: Title of the widget
      name: title
      required: false
      type: TEXT
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to open gate
      label: Open Gate
      name: itemOpenGate
      required: true
      type: TEXT
    - context: item
      description: An item to close gate
      label: Close Gate
      name: itemCloseGate
      required: true
      type: TEXT
    - context: item
      description: An item to stop gate
      label: Stop Gate
      name: itemStopGate
      required: true
      type: TEXT
    - context: item
      description: An item to close gate
      label: Gate Status
      name: itemGateStatus
      required: true
      type: TEXT
  parameterGroups: []
timestamp: May 6, 2021, 4:28:05 PM
component: f7-card
config:
  title: '=(props.title) ? props.title : ""'
  footer: =props.prop1
  
slots:
  default:
    - component: f7-row      
      slots:
        default:
          - component: Label
            config:
              class:
                - justify-content-center
              icon: oh:rtsvg              
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: Label
            config:
              class:
                - text-align-center
              text: =(items[props.itemGateStatus].state)
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: oh-link
            config:
              actionItem: =props.itemOpenGate
              actionCommand: ON
              action: command
              colorTheme: '=(items[props.itemOpenGate].state == "ON") ? "green" : "gray"'
              iconF7: lock_open
              iconSize: 20
              style:
                background-color: rgba(246, 158, 81, 0.2)
                border-radius: 15px 0px 0px 15px
                padding: 10px
          - component: oh-link
            config:
              actionItem: =props.itemStopGate
              actionCommand: ON
              action: command
              colorTheme: '=(items[props.itemStopGate].state == "ON") ? "green" : "gray"'
              iconF7: stop
              iconSize: 20
              style:
                background-color: rgba(246, 158, 81, 0.2)
                border-radius: 0px 0px 0px 0px
                padding: 10px
          - component: oh-link
            config:
              actionItem: =props.itemCloseGate
              actionCommand: ON
              action: command
              colorTheme: '=(items[props.itemCloseGate].state == "ON") ? "green" : "gray"'
              iconF7: lock
              iconSize: 20
              style:
                background-color: rgba(246, 158, 81, 0.2)
                border-radius: 0px 15px 15px 0px
                padding: 10px

Within folder (all files same content) openhabian\openhab-conf\icons\classic\
Rolltor_Closed.svg
rtsvg.svg
rt.png

Still I can not manage to display any of those icons/images.

I’ve created a dummy widget with to test svg and this is working (taken from an example somewhere in here), why ever…

component: oh-label-card
config:
title: Toggle the Magnetic Valve
item: Main_Magnetic_Valve
action: toggle
icon: oh:rtsvg
actionCommand: ON
actionCommandAlt: OFF
label: Magnetic Valve
iconUseState: true

How can I achieve to display this damned icon?
Sizing of the image will be the next Try-Error-Annoying part I guess…

Thanks for your support. Honestly many parts of OH3 improved a lot, UI still is hard to achieve if you’re not a pro in webdesign… But I guess my tries are not that far away from very basic standards, so no rocket science.

Best regards
Joerg

JustinG · May 6, 2021, 4:42pm

The example works because it is using an oh-label-card which is a different widget than a plain Label. I don’t think the Label has any default input for icon (it’s really just about text) and whenever the UI sees a map value that doesn’t correspond to any input it is expecting in the current widget it doesn’t throw an error, it just ignores it.

Search for examples in the forum that use oh-icon widget which is made with exactly this use in mind. It will render custom icons from your conf\icons\classic\ folder and let you set a state that will make the icon dynamic. You will just want to set that state value to the state of the item that contains the opening number of your gate.

Many changes to the appearance of widget pieces are easily handled by css and the style configuration. You can read up on css tutorials all over the web, and while it may seem a little daunting because there is so much of it, something like just sizing an image is a great place to start. There are many different ways to do it, the simplest just being:

- component: some-widget
  config:
    style:
      width: 100 px (for absolute size) or 5% (for relative size)

DerLang · May 6, 2021, 7:20pm

Well, even though there is not auto completion for oh-icon, this works finally.
When I type "- component: " and then Ctrl+Space, I get a list of components. There is no oh-icon displayed, presumably that’s why I never thought about using it. Google for oh-icon lists my thread and another one. So quite few hints if you know for what to search, but then you do not need to search . I’m used to use labels for icons as well as this is valid for other systems.
Nether the less, now it works.
BUT: do not use “oh:” for the icon. By accident I forgot the “oh:” and suddenly the image appeared. I wonder why. Naming of the icon is important. Upper letters do not seem to be valid. Very strange for someone who’s used to CamelCase or PascalCase. Changing the name now to lower letters with underscore works fine.

I now CSS basically and that it is interpreted in many ways. Having the possibility to use this for non standard things might be ok, but from an abstraction layer I’d ask for an easy errorprone way.

I’ll keep you posted with the results of my widget.

Many thanks and best regards
Joerg

DerLang · May 6, 2021, 7:27pm

This is how it looks at the moment, even though I set the svg size for both images to height:50h and width 125 in inkscape designer, it seems that both images are not the same size. When the gate opens (!= closed) then the opened image is displayed but this the width is bigger…

Those are the miracles of sizing, at least for me…

uid: widget_gate_v2
tags: []
props:
  parameters:
    - description: Optionally a title of the widget. Defaults to none
      label: Title of the widget
      name: title
      required: false
      type: TEXT
    - description: A text prop
      label: Prop 1
      name: prop1
      required: false
      type: TEXT
    - context: item
      description: An item to open gate
      label: Open Gate
      name: itemOpenGate
      required: true
      type: TEXT
    - context: item
      description: An item to close gate
      label: Close Gate
      name: itemCloseGate
      required: true
      type: TEXT
    - context: item
      description: An item to stop gate
      label: Stop Gate
      name: itemStopGate
      required: true
      type: TEXT
    - context: item
      description: An item to close gate
      label: Gate Status
      name: itemGateStatus
      required: true
      type: TEXT
  parameterGroups: []
timestamp: May 6, 2021, 9:15:47 PM
component: f7-card
config:
  title: '=(props.title) ? props.title : ""'
  footer: =props.prop1
slots:
  default:
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: oh-icon
            config:
              icon: "=(items[props.itemGateStatus].state == 'closed') ? 'rolltor_closed' : 'rolltor_opened'"
              style:
                height: 100%
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: Label
            config:
              class:
                - text-align-center
              text: =(items[props.itemGateStatus].state)
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: oh-link
            config:
              actionItem: =props.itemOpenGate
              actionCommand: ON
              action: command
              colorTheme: '=(items[props.itemOpenGate].state == "ON") ? "green" : "gray"'
              iconF7: lock_open
              iconSize: 20
              style:
                background-color: rgba(246, 158, 81, 0.2)
                border-radius: 15px 0px 0px 15px
                padding: 10px
          - component: oh-link
            config:
              actionItem: =props.itemStopGate
              actionCommand: ON
              action: command
              colorTheme: '=(items[props.itemStopGate].state == "ON") ? "green" : "gray"'
              iconF7: stop
              iconSize: 20
              style:
                background-color: rgba(246, 158, 81, 0.2)
                border-radius: 0px 0px 0px 0px
                padding: 10px
          - component: oh-link
            config:
              actionItem: =props.itemCloseGate
              actionCommand: ON
              action: command
              colorTheme: '=(items[props.itemCloseGate].state == "ON") ? "green" : "gray"'
              iconF7: lock
              iconSize: 20
              style:
                background-color: rgba(246, 158, 81, 0.2)
                border-radius: 0px 15px 15px 0px
                padding: 10px

rossko57 · May 6, 2021, 8:23pm

It’s a constraint of the server-side icon picker