How to Combine 2 Interface cells?

Tags: #<Tag:0x00007f434a2b7c78>

Hello,

i am new to Openhab 3 and and try to “create my first Dashboard”.
Is there a way to add a “second Stat” to a cell?

for example:
I add a cell “from a think” → my Socket for my Server so I can see if the socket is on oder off, i can add trendline that all works.
Now a want to add to this cell a second value → the power consumption i want this on right side of this cell.
Is the only way here to create a custom widget? I tried but i am really really bad here.

here is a pic “in basic” i want “these both cells in one cell”.
Bildschirmfoto 2021-05-03 um 16.26.12

You need to create a custom widget. See Building Pages - Components & Widgets | openHAB.

i saw this already but for me this is to “complicated” :joy:

it just looks complex, but additionally to the page that Rich pointed you to, there are good examples out there in the community with similar widgets you want where you can learn from… just give it a go… last but not least I have perceived this community as very helpful in case of questions if you get stuck.

Hallo,
I have started “tinkering”. At least I get the consumption and a PowerButton displayed.
What I can not manage:

  • Is there a possibility “that the whole button is an ON/OFF switch” or how do I define the size of the button.

Wie gesagt das ist für mich alles Absolut neu, gibt es irgendwo eine Verständlich “Befehlsübersicht”?
Ich sehe ja z.b. action: toggle aber was kann Ich bei Action Command reinschreiben z.b. ?

uid: testwidget
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Item to Power On/Off
      label: Power
      name: itemPower
      required: false
      type: TEXT
    - context: item
      label: Item to Show consumption
      name: showconsumption
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 4, 2021, 10:31:09 AM
component: f7-card
config:
  style:
    border-radius: 15px
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 16px
                margin-top: 0x
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -20px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=items[props.showconsumption].displayState"
              style:
                font-size: 22px
                font-weight: 400
                margin-left: 0px
                margin-top: 0px
    - component: f7-col
      slots:
        default:
          - component: oh-button
            config:
              actionItem: =props.itemPower
              action: toggle
              actionCommand: ON
              actionCommandAlt: OFF
              iconF7: power
              iconColor: white

Hi, I respond in English as this is an English forum. To make the widget a button, you can use oh-link instead of a oh-button

would look like this:

- component: oh-link
  config:
    action: toggle
    actionItem: =props.itemPower
    actionCommand: ON
    actionCommandAlt: OFF
    style:
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 0
      z-index: 0

Sorry i forgot, i translated my last Post.
Thanks for your answer, i change it to your post but nothing is “clickable”

uid: testwidget
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Item to Power On/Off
      label: Power
      name: itemPower
      required: false
      type: TEXT
    - context: item
      label: Item to Show consumption
      name: showconsumption
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 4, 2021, 11:29:32 AM
component: f7-card
config:
  style:
    border-radius: 15px
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 16px
                margin-top: 0x
    - component: Label
      config:
        text: =items[props.showconsumption].displayState
        style:
          font-size: 22px
          margin-left: 0px
          margin-top: 20px
    - component: oh-link
      config:
        action: toggle
        actionItem: =props.itemPower
        actionCommand: ON
        actionCommandAlt: OFF
        position: absolute
        width: 100%
        height: 100%
        top: 0
        left: 0
        z-index: 0


you had a couple of minor errors in the f7 block and at the f7-card you forgot the config:

This should work now

uid: testwidget
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Item to Power On/Off
      label: Power
      name: itemPower
      required: false
      type: TEXT
    - context: item
      label: Item to Show consumption
      name: showconsumption
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 4, 2021, 3:55:16 PM
component: f7-card
config:
  noShadow: false
  style:
    border-radius: 15px
    height: 120px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          margin: 0px
          padding: 0px
          display: flex
          flex-direction: column
          align-items: start
      slots:
        default:
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 16px
                margin-top: 0x
          - component: Label
            config:
              text: =items[props.showconsumption].displayState
              style:
                font-size: 22px
                margin-left: 0px
                margin-top: 20px
    - component: oh-link
      config:
        action: toggle
        actionItem: =props.itemPower
        actionCommand: ON
        actionCommandAlt: OFF
        style:
          position: absolute
          width: 100%
          height: 100%
          top: 0
          left: 0
          z-index: 0

Thanks again for your help.
Bildschirmfoto 2021-05-04 um 17.39.25
Here is my result and code, maybe something can improved here.

Bildschirmfoto 2021-05-04 um 18.02.05

I have a Problem, i tested my widget, the Problem is the second stat (in the picture 27W) is not show with all items.
I tested it with my air Purifier and set the second stat to Humidty then only the graf is shown but no the value.
Can i somewhere find “a code reference”?

uid: Power+Display_Second_Stat
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Icon bevor Title (f7 without :f7)
      label: Icon
      name: icon
      required: false
      type: TEXT
    - context: item
      description: Item to Power On/Off
      label: Power
      name: itemPower
      required: false
      type: TEXT
    - context: item
      label: Item to Show consumption
      name: showconsumption
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 4, 2021, 5:28:30 PM
component: f7-card
config:
  noShadow: false
  style:
    border-radius: 15px
    height: 120px
    margin-left: 5px
    margin-right: 5px
    min-width: 110px
    max-width: 400px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 22
              style:
                margin-right: 10px
                margin-top: 7px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 14px
                margin-top: 8px
                margin-left: -2px
          - component: Label
            config:
              text: =items[props.itemPower].state
              style:
                font-size: 14px
                margin-left: 5px
                margin-top: 8px
    - component: Label
      config:
        text: =items[props.showconsumption].displayState
        style:
          font-size: 20px
          margin-left: 2px
          margin-top: 30px
    - component: oh-trend
      config:
        trendItem: =[props.showconsumption]
        style:
          --f7-theme-color-bg-color: transparent
          background: var(--f7-theme-color-bg-color)
          filter: opacity(35%)
          position: absolute
          width: 95%
          height: 100%
          top: 30px
          left: 10px
    - component: oh-link
      config:
        action: toggle
        actionItem: =props.itemPower
        actionCommand: ON
        actionCommandAlt: OFF
        style:
          position: absolute
          width: 100%
          height: 100%
          top: 0
          left: 0
          z-index: 0

edit found the solution here:
Custom Widget Item Properties - #3 by ysc?

shouldn“t z-index be 999 or any other high value so that it stays on top of all elements?

Thanks Oliver2 good hint. Like i said for this is totally new.

i don’t think that the z-index makes a difference here, but I noticed if I change from slots: content: to slots: default: the full box is the link. With slots: content: this breaks up if you hoover over.

uid: Power+Display_Second_Stat
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Icon bevor Title (f7 without :f7)
      label: Icon
      name: icon
      required: false
      type: TEXT
    - context: item
      description: Item to Power On/Off
      label: Power
      name: itemPower
      required: false
      type: TEXT
    - context: item
      label: Item to Show consumption
      name: showconsumption
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 4, 2021, 5:28:30 PM
component: f7-card
config:
  noShadow: false
  style:
    border-radius: 15px
    height: 120px
    margin-left: 5px
    margin-right: 5px
    min-width: 110px
    max-width: 400px
slots:
  default:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 22
              style:
                margin-right: 10px
                margin-top: 7px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 14px
                margin-top: 8px
                margin-left: -2px
          - component: Label
            config:
              text: =items[props.itemPower].state
              style:
                font-size: 14px
                margin-left: 5px
                margin-top: 8px
          - component: Label
            config:
              text: =items[props.showconsumption].displayState
              style:
                font-size: 20px
                margin-left: 2px
                margin-top: 30px
          - component: oh-trend
            config:
              trendItem: =[props.showconsumption]
              style:
                --f7-theme-color-bg-color: transparent
                background: var(--f7-theme-color-bg-color)
                filter: opacity(35%)
                position: absolute
                width: 95%
                height: 100%
                top: 30px
                left: 10px
    - component: oh-link
      config:
              action: toggle
              actionItem: =props.itemPower
              actionCommand: ON
              actionCommandAlt: OFF
              style:
                position: absolute
                width: 100%
                height: 100%
                top: 0
                left: 0
                z-index: 0

The problem is likely using only the display state. Not every item has a display state, this is only available if the state description pattern has been set, I believe. So this value will be blank in the items dict for items without a set pattern. This is why, for example the default code that comes up with a new widget has:

content: =items[props.item].displayState || items[props.item].state

This uses the displayState unless there isn’t one at which point it falls back to the basic state. Try replicating that statement in your label’s text.

1 Like