Harmony Hub Remote

Can’t find your physical remote? This widget will get you working again as it is designed to fit on a mobile sized screen and has easy setup if you use the new ‘create equipment from thing’ or the ‘add equipment to model’ features of OH3. The button labelled click to start will display a list of the activities that you can start, and will display the name of the active activity. A huge thanks to @Craigers for writing the bulk of this widget.

Widget Code

uid: harmony
tags: []
props:
  parameters:
    - context: item
      description: Select the Harmony you wish to use at an equipment item level
      label: Select Harmony Equipment
      name: harmony
      required: true
      type: TEXT
  parameterGroups: []
component: f7-card
config:
  style:
    background-color: rgb(26, 26, 26)
    --f7-card-margin-horizontal: 0px
    border-radius: 100px
    width: 20rem
    height: 35rem
slots:
  default:
    - component: Label
      config:
        text: ="Harmony"
        style:
          position: absolute
          left: 125px
          top: 15px
          color: white
          font-size: 18px
          line-height: 32px
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
          text-shadow: -1px 1px 1px hsl(0,0%,66%)
    - component: oh-button
      config:
        text: Off
        raised: true
        large: true
        textColor: white
        bgColor: black
        action: command
        actionCommand: PowerOff
        actionItem: =props.harmony+"_Current_Activity"
        style:
          position: absolute
          left: 30px
          top: 60px
          border-radius: 12px
    - component: oh-button
      config:
        text: "=(items[props.harmony+'_Current_Activity'].state === 'PowerOff') ? 'Click to Start' : items[props.harmony+'_Current_Activity'].state"
        raised: true
        large: true
        textColor: white
        bgColor: gray
        action: options
        actionItem: =props.harmony+"_Current_Activity"
        style:
          position: absolute
          right: 40px
          top: 60px
          width: 185px
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 130px
          top: 110px
          width: 60px
          height: 85px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 115px
          left: 150px
          color: white
        iconF7: play
        iconSize: 25
        action: command
        actionCommand: PLAY
        actionItem: =props.harmony+"_Player_Control"
    - component: oh-link
      config:
        style:
          position: absolute
          top: 165px
          left: 150px
          color: white
        iconF7: pause
        iconSize: 25
        action: command
        actionCommand: PAUSE
        actionItem: =props.harmony+"_Player_Control"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 30px
          top: 110px
          width: 90px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 117px
          left: 40px
          color: white
        iconF7: backward_end_alt
        iconSize: 25
        action: command
        actionCommand: PREVIOUS
        actionItem: =props.harmony+"_Player_Control"
    - component: oh-link
      config:
        style:
          position: absolute
          top: 117px
          left: 85px
          color: white
        iconF7: backward
        iconSize: 25
        action: command
        actionCommand: REWIND
        actionItem: =props.harmony+"_Player_Control"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 30px
          top: 155px
          width: 90px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 117px
          right: 40px
          color: white
        iconF7: forward_end_alt
        iconSize: 25
        action: command
        actionCommand: NEXT
        actionItem: =props.harmony+"_Player_Control"
    - component: oh-link
      config:
        style:
          position: absolute
          top: 117px
          right: 85px
          color: white
        iconF7: forward
        iconSize: 25
        action: command
        actionCommand: FASTFORWARD
        actionItem: =props.harmony+"_Player_Control"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 30px
          top: 155px
          width: 90px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 162px
          left: 65px
          color: red
        iconF7: circle_fill
        iconSize: 25
        action: command
        actionCommand: Record
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 30px
          top: 110px
          width: 90px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 162px
          right: 65px
          color: white
        iconF7: stop_fill
        iconSize: 25
        action: command
        actionCommand: Stop
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 40px
          top: 210px
          width: 100px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 220px
          right: 68px
          color: white
        text: MENU
        action: command
        actionCommand: Menu
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 40px
          top: 210px
          width: 100px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 220px
          left: 78px
          color: white
        text: EXIT
        action: command
        actionCommand: Exit
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 30px
          top: 260px
          width: 60px
          height: 50px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 272px
          left: 47px
          color: white
        iconF7: speaker_3
        iconSize: 25
        action: command
        actionCommand: VolumeUp
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 125px
          top: 255px
          width: 70px
          height: 60px
          border-radius: 50%
    - component: oh-link
      config:
        style:
          position: absolute
          top: 267px
          left: 143px
          color: white
          z-index: 2
        iconF7: arrowtriangle_up
        iconSize: 35
        action: command
        actionCommand: DirectionUp
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 30px
          top: 260px
          width: 60px
          height: 50px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 273px
          right: 47px
          color: white
        iconF7: arrow_up_square
        iconSize: 25
        action: command
        actionCommand: PageUp
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 65px
          top: 315px
          width: 60px
          height: 70px
          border-radius: 50%
    - component: oh-link
      config:
        style:
          position: absolute
          top: 333px
          left: 71px
          color: white
          z-index: 2
        iconF7: arrowtriangle_left
        iconSize: 35
        action: command
        actionCommand: DirectionLeft
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 127px
          top: 318px
          width: 65px
          height: 65px
          border-radius: 50%
          border: gray solid 1px
          z-index: 2
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 80px
          top: 270px
          width: 160px
          height: 160px
          border-radius: 50%
          z-index: 1
    - component: oh-link
      config:
        text: OK
        style:
          font-size: 25px
          position: absolute
          top: 331px
          left: 142px
          color: white
          z-index: 3
        iconSize: 75
        action: command
        actionCommand: Select
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 65px
          top: 315px
          width: 60px
          height: 70px
          border-radius: 50%
    - component: oh-link
      config:
        style:
          position: absolute
          top: 333px
          right: 71px
          color: white
        iconF7: arrowtriangle_right
        iconSize: 35
        action: command
        actionCommand: DirectionRight
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 125px
          top: 380px
          width: 70px
          height: 60px
          border-radius: 50%
    - component: oh-link
      config:
        style:
          position: absolute
          top: 400px
          left: 142px
          color: white
        iconF7: arrowtriangle_down
        iconSize: 35
        action: command
        actionCommand: DirectionDown
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 30px
          top: 390px
          width: 60px
          height: 50px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 404px
          left: 47px
          color: white
        iconF7: speaker_1
        iconSize: 25
        action: command
        actionCommand: VolumeDown
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 30px
          top: 390px
          width: 60px
          height: 50px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 403px
          right: 47px
          color: white
        iconF7: arrow_down_square
        iconSize: 25
        action: command
        actionCommand: PageDown
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 40px
          top: 450px
          width: 90px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 456px
          left: 72px
          color: white
        iconF7: speaker_slash_rtl
        iconSize: 25
        action: command
        actionCommand: Mute
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 40px
          top: 450px
          width: 90px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 457px
          right: 70px
          color: white
        iconF7: arrow_uturn_left
        iconSize: 25
        action: command
        actionCommand: Back
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 60px
          top: 500px
          width: 80px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 510px
          left: 80px
          color: white
        text: GUIDE
        action: command
        actionCommand: Guide
        actionItem: =props.harmony+"_Button_Press"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 60px
          top: 500px
          width: 80px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 510px
          right: 81px
          color: white
        text: INFO
        action: command
        actionCommand: Info
        actionItem: =props.harmony+"_Button_Press"

7 Likes

Thanks Matt, your guidance has created this. Much appreciated! I am already thinking of a few changes to make to it to make it function more like the physical remote (Page UP/DOWN vs Channel UP/DOWN depending on if the guide is OSD or not…)
My install is an OH2.x that has been upgraded many times. I just removed Harmony thing and all items and references to it (plus cleared the cache) and then re-added using the model. This works great!!
When I have a chance I should spin up a new VM so I can do a fresh OH3 and spend some time setting it up so I won’t have any old clutter in it.

Craig

Hi Guys

Thanks for a REALLY great widget.

Have been customizing for my use (I have a Harmony Elite and use the colour buttons as well as the Light Control Buttons).

I am not sure how/where you find the “actionCommand” for the “ButtonPress” action Item?

I have created the new buttons such as Red as follows:

      config:
        style:
          position: absolute
          top: 549px
          left: 47px
          color: white
        text: RED
        action: command
        actionCommand: red
        actionItem: =props.harmony+"_ButtonPress"
    - component: f7-badge
      config:
        bgColor: red
        style:
          position: absolute
          left: 28px
          top: 550px
          width: 60px
          height: 20px
          border-radius: 12px

But dont seem to get any action. Nore do I see any logging on the console:

log:set DEBUG org.openhab.binding.harmony
log:tail org.openhab.binding.harmony

My other buttons such as INFO, GUIDE, etc all seem to be working fine?

EDIT:
Found this on the HarmonyHubBindings page:

This includes the Colour Buttons such as Red, Blue, Green and Yellow (though does not seem to list DVR or the home control buttons. So my command should work?

Wonder how we get the additional ones added to the Binding?

Any assistance would be greatly appreciated.
Mark

Hello together

thanks for this stunning widget, I did some changes for my Samsung TV.

uid: tv_remotecontrol
tags: []
props:
  parameters:
    - context: item
      description: Select the Samsung you wish to use at an equipment item level
      label: Select Samsung Equipment
      name: SamsungTV
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Feb 11, 2021, 4:34:01 PM
component: f7-card
config:
  style:
    background-color: rgb(26, 26, 26)
    --f7-card-margin-horizontal: 0px
    border-radius: 30px
    width: 20rem
    height: 45rem
slots:
  default:
    - component: Label
      config:
        text: ="Samsung TV"
        style:
          position: absolute
          left: 105px
          top: 15px
          color: white
          font-size: 18px
          line-height: 32px
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
          text-shadow: -1px 1px 1px hsl(0,0%,66%)
    - component: oh-button
      config:
        text: Off
        raised: true
        large: true
        textColor: white
        bgColor: black
        action: command
        actionCommand: KEY_POWEROFF
        actionItem: =props.SamsungTV+"_Tastendruck"
        style:
          position: absolute
          left: 30px
          top: 60px
          border-radius: 12px
    - component: oh-button
      config:
        text: "=(items[props.SamsungTV].state === 'OFF') ? 'Click to Start' : items[props.SamsungTV+'_Power'].state"
        raised: true
        large: true
        textColor: white
        bgColor: gray
        action: options
        actionItem: =props.SamsungTV+"_Tastendruck"
        style:
          position: absolute
          right: 40px
          top: 60px
          width: 185px
    - component: oh-button
      config:
        bgColor: black
        text: " 1 "
        color: white
        action: command
        actionCommand: KEY_1
        actionItem: =props.SamsungTV+"_Tastendruck"
        style:
          position: absolute
          right: 210px
          top: 120px
          width: 60px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        bgColor: black
        text: " 2 "
        color: white
        action: command
        actionCommand: KEY_2
        actionItem: =props.SamsungTV+"_Tastendruck"
        style:
          position: absolute
          right: 135px
          top: 120px
          width: 60px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        bgColor: black
        text: " 3 "
        color: white
        action: command
        actionCommand: KEY_3
        actionItem: =props.SamsungTV+"_Tastendruck"
        style:
          position: absolute
          right: 60px
          top: 120px
          width: 60px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        bgColor: black
        text: " 4 "
        color: white
        action: command
        actionCommand: KEY_4
        actionItem: =props.SamsungTV+"_Tastendruck"
        style:
          position: absolute
          right: 210px
          top: 160px
          width: 60px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        bgColor: black
        text: " 5 "
        color: white
        action: command
        actionCommand: KEY_6
        actionItem: =props.SamsungTV+"_Tastendruck"
        style:
          position: absolute
          right: 135px
          top: 160px
          width: 60px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        bgColor: black
        text: " 6 "
        color: white
        action: command
        actionCommand: KEY_6
        actionItem: =props.SamsungTV+"_Tastendruck"
        style:
          position: absolute
          right: 60px
          top: 160px
          width: 60px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        bgColor: black
        text: " 7 "
        color: white
        action: command
        actionCommand: KEY_7
        actionItem: =props.SamsungTV+"_Tastendruck"
        style:
          position: absolute
          right: 210px
          top: 200px
          width: 60px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        bgColor: black
        text: " 8 "
        color: white
        action: command
        actionCommand: KEY_8
        actionItem: =props.SamsungTV+"_Tastendruck"
        style:
          position: absolute
          right: 135px
          top: 200px
          width: 60px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        bgColor: black
        text: " 9 "
        color: white
        action: command
        actionCommand: KEY_9
        actionItem: =props.SamsungTV+"_Tastendruck"
        style:
          position: absolute
          right: 60px
          top: 200px
          width: 60px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        bgColor: black
        text: " 0 "
        color: white
        action: command
        actionCommand: KEY_0
        actionItem: =props.SamsungTV+"_Tastendruck"
        style:
          position: absolute
          right: 135px
          top: 240px
          width: 60px
          height: 30px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 30px
          top: 245px
          width: 60px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 253px
          left: 47px
          color: white
        iconF7: speaker_3
        iconSize: 25
        action: command
        actionCommand: KEY_VOLUP
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 125px
          top: 295px
          width: 70px
          height: 60px
          border-radius: 50%
    - component: oh-link
      config:
        style:
          position: absolute
          top: 300px
          left: 143px
          color: white
          z-index: 2
        iconF7: arrowtriangle_up
        iconSize: 35
        action: command
        actionCommand: KEY_UP
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 30px
          top: 245px
          width: 60px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 253px
          right: 48px
          color: white
        iconF7: arrow_up_square
        iconSize: 25
        action: command
        actionCommand: KEY_CHUP
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 65px
          top: 355px
          width: 60px
          height: 70px
          border-radius: 50%
    - component: oh-link
      config:
        style:
          position: absolute
          top: 373px
          left: 71px
          color: white
          z-index: 2
        iconF7: arrowtriangle_left
        iconSize: 35
        action: command
        actionCommand: KEY_LEFT
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 127px
          top: 358px
          width: 65px
          height: 65px
          border-radius: 50%
          border: gray solid 1px
          z-index: 2
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 90px
          top: 320px
          width: 140px
          height: 140px
          border-radius: 50%
          z-index: 1
    - component: oh-link
      config:
        text: OK
        style:
          font-size: 25px
          position: absolute
          top: 371px
          left: 142px
          color: white
          z-index: 3
        iconSize: 75
        action: command
        actionCommand: KEY_ENTER
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 65px
          top: 355px
          width: 60px
          height: 70px
          border-radius: 50%
    - component: oh-link
      config:
        style:
          position: absolute
          top: 373px
          right: 71px
          color: white
        iconF7: arrowtriangle_right
        iconSize: 35
        action: command
        actionCommand: KEY_RIGHT
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 125px
          top: 420px
          width: 70px
          height: 60px
          border-radius: 50%
    - component: oh-link
      config:
        style:
          position: absolute
          top: 440px
          left: 142px
          color: white
        iconF7: arrowtriangle_down
        iconSize: 35
        action: command
        actionCommand: KEY_DOWN
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 30px
          top: 295px
          width: 60px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 302px
          left: 47px
          color: white
        iconF7: speaker_1
        iconSize: 25
        action: command
        actionCommand: KEY_VOLDOWN
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 30px
          top: 295px
          width: 60px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 302px
          right: 47px
          color: white
        iconF7: arrow_down_square
        iconSize: 25
        action: command
        actionCommand: KEY_CHDOWN
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 30px
          top: 450px
          width: 80px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 456px
          left: 57px
          color: white
        iconF7: speaker_slash_rtl
        iconSize: 25
        action: command
        actionCommand: KEY_MUTE
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 30px
          top: 450px
          width: 80px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 457px
          right: 60px
          color: white
        iconF7: arrow_uturn_left
        iconSize: 25
        action: command
        actionCommand: KEY_BACK_MHP
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 60px
          top: 500px
          width: 80px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 510px
          left: 80px
          color: white
        text: GUIDE
        action: command
        actionCommand: KEY_GUIDE
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 60px
          top: 500px
          width: 80px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 510px
          right: 83px
          color: white
        text: INFO
        action: command
        actionCommand: KEY_INFO
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 130px
          top: 560px
          width: 60px
          height: 85px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 570px
          left: 150px
          color: white
        iconF7: play
        iconSize: 25
        action: command
        actionCommand: KEY_PLAY
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: oh-link
      config:
        style:
          position: absolute
          top: 605px
          left: 150px
          color: white
        iconF7: pause
        iconSize: 25
        action: command
        actionCommand: KEY_PAUSE
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 30px
          top: 560px
          width: 90px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 567px
          left: 40px
          color: white
        iconF7: backward_end_alt
        iconSize: 25
        action: command
        actionCommand: KEY_REWIND_
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: oh-link
      config:
        style:
          position: absolute
          top: 567px
          left: 85px
          color: white
        iconF7: backward
        iconSize: 25
        action: command
        actionCommand: KEY_REWIND
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 30px
          top: 605px
          width: 90px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 567px
          right: 40px
          color: white
        iconF7: forward_end_alt
        iconSize: 25
        action: command
        actionCommand: KEY_FF_
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: oh-link
      config:
        style:
          position: absolute
          top: 567px
          right: 85px
          color: white
        iconF7: forward
        iconSize: 25
        action: command
        actionCommand: KEY_FF
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 30px
          top: 605px
          width: 90px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 612px
          left: 65px
          color: red
        iconF7: circle_fill
        iconSize: 25
        action: command
        actionCommand: KEY_REC
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 30px
          top: 560px
          width: 90px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 612px
          right: 65px
          color: white
        iconF7: stop_fill
        iconSize: 25
        action: command
        actionCommand: KEY_STOP
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 30px
          top: 660px
          width: 90px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 670px
          right: 55px
          color: white
        text: MENU
        action: command
        actionCommand: KEY_MENU
        actionItem: =props.SamsungTV+"_Tastendruck"
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 30px
          top: 660px
          width: 90px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 670px
          left: 64px
          color: white
        text: EXIT
        action: command
        actionCommand: KEY_EXIT
        actionItem: =props.SamsungTV+"_Tastendruck"

So did i. For a samsung TV Remote. Made it look like my actual TV remote too a little

uid: Remote
tags: []
props:
  parameters:
    - context: item
      description: Select the remote you wish to use at an equipment item level
      label: Select Equipment
      name: item
      required: true
      type: TEXT
    - context: item
      description: Select the item you wish to power
      label: Select Equipment
      name: power
      required: true
      type: TEXT
    - context: item
      description: Select the item you wish to use for Mute
      label: Select Equipment
      name: mute
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Jan 12, 2021, 8:28:11 AM
component: f7-block
config:
  style:
    box-shadow: 2px 3px rgb(150,150,150)
    background-color: rgb(192, 192, 192)
    --f7-card-margin-horizontal: 0px
    border-radius: 30px
    width: 15rem
    height: 40rem
slots:
  default:
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 65px
          top: 20px
          width: 110px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 28px
          left: 108px
          color: "=(items[props.power].state === 'OFF') ? 'white' : 'red' "
        iconF7: power
        iconSize: 25
        action: command
        actionCommand: "=(items[props.power].state === 'OFF') ? 'ON' : 'OFF' "
        actionItem: =props.power
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 95px
          top: 80px
          width: 50px
          height: 85px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 85px
          left: 110px
          color: white
        iconF7: play
        iconSize: 25
        action: command
        actionCommand: KEY_PLAY
        actionItem: =props.item
    - component: oh-link
      config:
        style:
          position: absolute
          top: 135px
          left: 107px
          color: white
        iconF7: pause
        iconSize: 25
        action: command
        actionCommand: KEY_PAUSE
        actionItem: =props.item
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 20px
          top: 110px
          width: 60px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 117px
          left: 35px
          color: white
        iconF7: backward
        iconSize: 25
        action: command
        actionCommand: KEY_REWIND
        actionItem: =props.item
    - component: oh-link
      config:
        style:
          position: absolute
          top: 117px
          right: 35px
          color: white
        iconF7: forward
        iconSize: 25
        action: command
        actionCommand: KEY_FF
        actionItem: =props.item
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 20px
          top: 110px
          width: 60px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 197px
          left: 103px
          color: white
          z-index: 2
        iconF7: arrowtriangle_up
        iconSize: 35
        action: command
        actionCommand: KEY_UP
        actionItem: =props.item
    - component: oh-link
      config:
        style:
          position: absolute
          top: 263px
          left: 35px
          color: white
          z-index: 2
        iconF7: arrowtriangle_left
        iconSize: 35
        action: command
        actionCommand: KEY_LEFT
        actionItem: =props.item
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 80px
          top: 242px
          width: 80px
          height: 80px
          border-radius: 50%
          border: gray solid 1px
          z-index: 2
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 30px
          top: 190px
          width: 180px
          height: 180px
          border-radius: 50%
          z-index: 1
    - component: oh-link
      config:
        text: OK
        style:
          font-size: 25px
          position: absolute
          top: 261px
          left: 103px
          color: white
          z-index: 3
        iconSize: 75
        action: command
        actionCommand: KEY_ENTER
        actionItem: =props.item
    - component: oh-link
      config:
        style:
          position: absolute
          top: 263px
          right: 35px
          color: white
        iconF7: arrowtriangle_right
        iconSize: 35
        action: command
        actionCommand: KEY_RIGHT
        actionItem: =props.item
    - component: oh-link
      config:
        style:
          position: absolute
          top: 330px
          left: 103px
          color: white
        iconF7: arrowtriangle_down
        iconSize: 35
        action: command
        actionCommand: KEY_DOWN
        actionItem: =props.item
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 20px
          top: 490px
          width: 80px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 498px
          left: 48px
          color: white
        iconF7: speaker_1
        iconSize: 25
        action: command
        actionCommand: KEY_VOLDOWN
        actionItem: =props.item
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 80px
          top: 385px
          width: 80px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 392px
          left: 108px
          color: white
        iconF7: house
        iconSize: 25
        action: command
        actionCommand: KEY_HOME
        actionItem: =props.item
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 20px
          top: 490px
          width: 80px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 498px
          right: 48px
          color: white
        iconF7: speaker_3
        iconSize: 25
        action: command
        actionCommand: KEY_VOLUP
        actionItem: =props.item
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 20px
          top: 440px
          width: 80px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 446px
          left: 45px
          color: "=(items[props.mute].state === 'OFF') ? 'white' : 'red' "
        iconF7: speaker_slash
        iconSize: 25
        action: command
        actionCommand: KEY_MUTE
        actionItem: =props.item
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          right: 20px
          top: 440px
          width: 80px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 447px
          right: 45px
          color: white
        iconF7: arrow_uturn_left
        iconSize: 25
        action: command
        actionCommand: KEY_RETURN
        actionItem: =props.item
    - component: f7-badge
      config:
        bgColor: black
        style:
          position: absolute
          left: 65px
          top: 540px
          width: 110px
          height: 40px
          border-radius: 12px
    - component: oh-link
      config:
        style:
          position: absolute
          top: 550px
          left: 105px
          color: white
        text: INFO
        action: command
        actionCommand: KEY_INFO
        actionItem: =props.item

1 Like

@Mark_VG
Please start your own thread, this is for your benefit as much as it is for anyone that may follow this thread for any updates or variants to the harmony widget.

@Christopher_Hemmings and @Ronald_Schulz
Fantastic and thanks for sharing them. Can you open a new thread for Samsung TV widget and include pictures of what the widget looks like to help people find them? Hopefully we will have a widget gallery /marketplace at some stage soon, so until then having a thread and multiple people collaborating on making the widgets the best they can be benefits the users.

1 Like

Very nice widget!
Is there a way to integrate devices as well? So you can pick a device and then see the fitting commands in a drop-down field? Then the widget would come even closer to the physical Harmony Elite.

@Ursusprimus - Great question and exactly what I am exploring deeper here:

greet jobs and i like it,
I’m trying to add 2 buttons for the SW1 Level but nothing happens when I press the buttons
These are the commands:

SW1Levelup
SW1LevelDown
component: f7 badge
  config:
    bgColor: red
    style:
      position: absolute
      right: 60px
      top: 550px
      width: 80px
      height: 40px
      border-radius: 12px
component: oh-link
  config:
    style:
      position: absolute
      top: 560px
      right: 81px
      color: white
    text: SW +
    action: command
    actionCommand: SW1Levelup
    actionItem: = props.harmony + "_ ButtonPress"
component: f7 badge
  config:
    bgColor: red
    style:
      position: absolute
      left: 60px
      top: 550px
      width: 80px
      height: 40px
      border-radius: 12px
component: oh-link
  config:
    style:
      position: absolute
      top: 560px
      left: 81px
      color: white
    text: SW-
    action: command
    actionCommand: SW1Leveldown
    actionItem: = props.harmony + "_ ButtonPress"

Why is there a space between the underscore _ and ButtonPress ? You need to be 100% correct to what the item is named.

There are no spaces between them, probably when I made a copy paste here it made spaces
And these commands worked in OH2

@Christopher_Hemmings
Can you add your widget as a new post into this new area of the forum?
Latest Add-on Marketplace/UI Widgets topics - openHAB Community
It will then show your first picture in the thread as a thumbnail in the marketplace feature that is now released in openHAB 3.2 milestone3

@matt1 I took the initiative to split your reply from the original topic to a new one and replaced it with your new description. That way you keep the replies and likes of the original message which bumps your widget up in the list. I suppose you don’t mind!

Thanks that is much better as it was a joint effort so better this way.

Wow looks like a great widget. I’m afraid I’m not able to install it, always get an error. And I don’t really have clue how to set it up manually (by editing the yaml on my “main page?!”. Any pointers would be appreciated. And of course sorry if that’s a stupid question :wink:

So before anyone is bothered to answer this question - reading the manual helps (I’m a developer, so I don’t like doing that :slight_smile: ) . You just go to the developer view of the admin page, select widgets and add your own, set the right property and voila :wink:
:see_no_evil:

What was the error? I tested it just now on 3.2m4 and found no issue installing and using it from the marketplace so if you do have an error please post the error and the version of openHAB that you use so it can be looked into and fixed as here it is very simple to install. Good that it is working for you via a manual install.

The error was:
11:34:13.261 [ERROR] [mmunity.CommunityUIWidgetAddonHandler] - Unable to parse YAML: Cannot deserialize value of type java.util.Date from String “Jan 1, 2021, 4:08:53 PM”: not a valid representation (error: Failed to parse Date value ‘Jan 1, 2021, 4:08:53 PM’: Unparseable date: “Jan 1, 2021, 4:08:53 PM”)

at [Source: (StringReader); line: 12, column: 12] (through reference chain: org.openhab.core.ui.components.RootUIComponent[“timestamp”])

11:34:13.264 [ERROR] [mmunity.CommunityUIWidgetAddonHandler] - Widget from marketplace is invalid: Unable to parse YAML

And of course: Thank you for the cool widget and the work you put into it! :smiling_face_with_three_hearts:

Same here: Error installing Widgets from community in User Interfaces - #2 by rlkoshak
I get the same error.
I am running 3.2.0 release build.