OH3 UI IR Widget

Hi all,

I working on a widget for OH3 that use my broadlink rm3 (see also habpanel)

Here are the first result concerning the widget layout.

ir3

updated code (2020 11 22)

uid: ir_widget_9ba8e79e82
tags:
  - rm3
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: Nov 22, 2020, 12:23:25 PM
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
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_A1
                          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: a1
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_B1
                          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: a2
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_C1
                          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: a3
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_D1
                          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: a4
                          style:
                            height: 95%
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_A2
                          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: b1
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_B2
                          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: b2
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_C2
                          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: b3
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_D2
                          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: b4
                          style:
                            height: 95%
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_A3
                          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: c1
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_B3
                          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: c2
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_C3
                          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: c3
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_D3
                          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: c4
                          style:
                            height: 95%
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_A4
                          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: d1
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_B4
                          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: d2
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_C4
                          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: d3
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_D4
                          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: d4
                          style:
                            height: 95%
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_A5
                          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: e1
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_B5
                          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: e2
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_C5
                          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: e3
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_D5
                          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: e4
                          style:
                            height: 95%
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_A6
                          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: f1
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_B6
                          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: f2
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_C6
                          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: f3
                          style:
                            height: 95%
                - component: f7-col
                  config:
                    class:
                      - button
                      - button-large
                      - align-items-center
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: broadlink_code
                          actionCommand: 24_LED_D6
                          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: f4
                          style:
                            height: 95%

Now i try to figure out how to use broadlink with oh3, any suggestions are welkom

I copied the latest *.jar file to the addons folder and it is not visible under the bindings in oh3 (i think it is not ready for oh3)

In habpanel i use:

<button class="btn_IR" type="button" class="btn btn-default" style="height: 2em; border: 0; color: white; background: transparent; font-size: 16px"   ng-click="sendCmd(config.Command, '24_LED_A2')">
  <widget-icon iconset="'eclipse-smarthome-classic'" icon="'b1'" size="30" inline="true"></widget-icon>
</button> 

how to use the ng-click code into the new oh3-widget?

I updated the widget when used the layout still is not ok
2020-11-22_12-30

On a smartphone it takes the hale of the screen ? how can i solve this.

I made a item : broadlink code, and have a mapping file in the transformations folder

Question,
the correct syntax on how to use “pros.item” in actionItem: …???
actionItem: props.item is not working

Regards,
Ronny

2 Likes

Instead of triggering a popup, you can define several other options for that ‘action’ -
actions

If you want so to send a specific command to your item ‘command’ would be the best choice (obviously :stuck_out_tongue:). Then you have to only define an item and a command you want to send.

actionCmdPNG

So in the end your configuration for the oh-button would look something like this:

- component: oh-button
  config:
    action: command
    actionItem: 24_LED_A2
    actionCommand: Something

or if your item is just a switch which accepts ON/OFF you could also use ‘action: toggle’.

1 Like

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 ?