OH3 UI IR Widget

I would like to use my broadlink device in OH3 but as far as I know the old addon for 2.5 is not working in 3. What did you do to use it in OH3?

Welcome to this Forum @Warren989

What is the matter with the link you posted - it seems to have nothing to do with this thread or OH in general?! This forum isn’t the right place for advertisment or pushing google rankings.

But maybe I’m missleading and got this wrong, so please clear me up, then.

Sry didn’t recognized that you updated your post…

Could you please post the complete widget code (starting from the uid part of your widget) - otherwise it’s pretty hard to recreate the widget and (try) to help you with your problem.

‘actionItem: =props.item’ should work (it seems like you forgot the equal sign) if you have defined it in your widget-properties like this:

    - name: item
      label: Item
      type: TEXT
      context: item
      description: An item to control

Thank you for your assistance

Could you please post the complete widget code (starting from the uid part of your widget) - otherwise it’s pretty hard to recreate the widget and (try) to help you with your problem.

I update the code in the original post.

‘actionItem: =props.item’ should work (it seems like you forgot the equal sign) if you have defined it in your widget-properties like this:

I wil try it out

Regards,

Ronny

Adding these styles to your f7-card, should solve your problem…

--f7-button-padding-vertical: 0
--f7-button-padding-horizontal: 0

Hi,

How can i change icon picture in function of item state ?
in oh2 when creathing icons, xx-ON and xx-OFF, they are automatically used.
Is this also working on oh3 ?

uid: button_widget_9ba8e79e82
tags:
  - button
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
    - context: itemState
      description: An item to control
      label: ItemState
      name: itemState
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 29, 2020, 7:47:26 AM
component: f7-card
config:
  title: '=(props.item) ? "State of " + props.item : "Set props to test!"'
  footer: =props.prop1
  content: =items[props.item].displayState || items[props.item].state
  style:
    width: 100%
    height: 100%
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              style:
                height: 50px
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: toggle
                          actionItem: =props.item
                          actionCommand: ON
                          actionCommandAlt: OFF
                          style:
                            --f7-button-bg-color: transparent
                            --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                            --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                            position: absolute
                            top: 0
                            left: 0
                            height: 100%
                            width: 100%
                      - component: oh-icon
                        config:
                          icon: =(items.item.state === 'ON') ? 'button01-on' : 'button-off'
                          style:
                            height: 95%
                - component: f7-col
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: lampgeel
                          style:
                            height: 95%

Hi, you are almoust there, replace

icon: =(items.item.state === ‘ON’) ? ‘button01-on’ : ‘button-off’

with

icon: =items.[props.item].state === ‘ON’) ? “button01-on”: “button-off”

Regards
Lorenzo

I use your syntax and get following error message

**> Nested mappings are not allowed in compact mappings at line 69, column 33:**

** > **
** > icon: =items.[props.item].state === ‘ON’) ? “button01…**
** > ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^…**

sorry typo:

=items[props.item].state === ‘ON’) ? “button01-on”: “button-off”

this is the right one, remove the point after items

Hi Lorenzo,
Thanks for your response

i copied your example into my widget with the same result

uid: button_widget_9ba8e79e82
tags:
  - button
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
    - context: itemState
      description: An item to control
      label: ItemState
      name: itemState
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Nov 29, 2020, 7:47:26 AM
component: f7-card
config:
  title: '=(props.item) ? "State of " + props.item : "Set props to test!"'
  footer: =props.prop1
  content: =items[props.item].displayState || items[props.item].state
  style:
    width: 100%
    height: 100%
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              style:
                height: 50px
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: toggle
                          actionItem: =props.item
                          actionCommand: ON
                          actionCommandAlt: OFF
                          style:
                            --f7-button-bg-color: transparent
                            --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
                            --f7-button-pressed-bg-color: rgba(0,0,0,.15)
                            position: absolute
                            top: 0
                            left: 0
                            height: 100%
                            width: 100%
                      - component: oh-icon
                        config:
                          icon: =items[props.item].state === ‘ON’) ? “button01-on”: “button01-off”
                          style:
                            height: 95%
                - component: f7-col
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: lampgeel
                          style:
                            height: 95%

Hi, you can’t just paste and copy … you need to change the ’ and the " to the right one and I will work

Hi Lorenzo,

i chaged to

icon: =items[props.item].state === ‘ON’) ? button01-on:button01-off

only the icons are not visible

try

icon: '=(items[props.item].state === "ON") ? "button01-on" : "button01-off"'
1 Like

Sorry Ronny,
I mean that the ’ and " used in your widget are not the right ones because they are inclined … , you can also use the Rainer sintax which is equivalent

Also:

component: oh-icon
config:
  icon: button01
  state: =items[props.item].state 

should work, but only in M4 or more recent snapshots, if your icon is PNG (before only the SVG versions could be used).

1 Like

Thanks Yannick,

I try it out and let you know the result

regards,
Ronny

Thanks for png icon support .
Any plan to implement items[props.item].label and items[props.item].category to be used in custom widget?

Did you find a way to use the Broadlink binding with OH3 ?

Did you find a way to use the Broadlink binding with OH3 ?

No,

I copied the latest version in the addons folder

They are working on it to get it into oh3 release
broadlink binding

link to jar file

i get following errors

-22 13:16:22.789 [WARN ] [org.apache.felix.fileinstall        ] - Error while starting bundle: file:/usr/share/openhab/addons/org.openhab.binding.broadlink-2.5.9.jar
org.osgi.framework.BundleException: Could not resolve module: org.openhab.binding.broadlink [297]
  Unresolved requirement: Import-Package: org.eclipse.smarthome.config.core

	at org.eclipse.osgi.container.Module.start(Module.java:444) ~[org.eclipse.osgi-3.12.100.jar:?]
	at org.eclipse.osgi.internal.framework.EquinoxBundle.start(EquinoxBundle.java:383) ~[org.eclipse.osgi-3.12.100.jar:?]
	at org.apache.felix.fileinstall.internal.DirectoryWatcher.startBundle(DirectoryWatcher.java:1260) [bundleFile:3.6.4]
	at org.apache.felix.fileinstall.internal.DirectoryWatcher.startBundles(DirectoryWatcher.java:1233) [bundleFile:3.6.4]
	at org.apache.felix.fileinstall.internal.DirectoryWatcher.doProcess(DirectoryWatcher.java:520) [bundleFile:3.6.4]
	at org.apache.felix.fileinstall.internal.DirectoryWatcher.process(DirectoryWatcher.java:365) [bundleFile:3.6.4]
	at org.apache.felix.fileinstall.internal.DirectoryWatcher.run(DirectoryWatcher.java:316) [bundleFile:3.6.4]

regards
Ronny

Thanks for the feedback. Let’s wait and hope this will come soon. This is an important module for me.
Regards