[OH3] Main UI Examples

As long as you know the OFF value for your item you would just test for that with a simple comparison as you did in the first case. If you are not sure what values you should expect from the item then use the api explorer to look at what the gets returned for that item from api calls because that is what the mainUI uses.

In this case it is reasonable to expect that "0" is the returned state when the dimmer is off (note however that this "0" is a string and not an number value). Since this is the only OFF case you would just use:

color: '=(items[props.item].state == "0") ? "gray" : "#F4E274"'

The quotes around the zero mean that the comparison is looking for the string. If you just used 0 then that condition would always be false because the state is, as noted above, a string and "0" does not equal 0. If you needed, for some reason to compare the 0 numerically then you would have to parse the state into a number. For example you could test if the state is greater than 0 (i.e., the dimmer is on) with:

color: '=(Number.parseInt(items[props.item].state) > 0) ? "#F4E274" : "gray"'

Thanks Justin!
I think i’d be able to create a new / different widget for my dimmer lights (OFF = 0), but could this be done in one widget for simple toggles lights (on/off) and the dimmer? basically i’d need to check if items[props.item].state == “OFF” OR “0”.

Hey Peter

You have two possibilities to realize this in a widget.

  1. use stacked statements (same as you use in Excel with couples of IF-statements):
color: "=(items[props.item].state == 'OFF') ? 'gray' : (items[props.item].state == '0') ? 'gray' : 'yellow' "

But then you will have problems with the oh-link on the bottom of your widget and the actionCommands (they also should be OFF/ON or 0/[anyvalue]). In this case I suggest you the next possibility!

  1. or you make a new parameter where you can specify the ON and OFF value.
uid: Light_Card
tags: []
props:
  parameters:
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control
      label: Item
      name: item
      required: false
      type: TEXT
    - description: OFF value
      label: OFF value
      name: offvalue
      required: true
      type: TEXT
    - description: ON value
      label: ON value
      name: onvalue
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Sep 23, 2021, 1:25:42 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 80px
    margin-left: 2px
    margin-right: 2px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: 10px
          left: 15px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 30
              style:
                margin-right: 5px
                color: '=(items[props.item].state == props.onvalue) ? "yellow" : "gray"'
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: oh-link
      config:
        action: toggle
        actionItem: =props.item
        actionCommand: =props.onvalue
        actionCommandAlt: =props.offvalue
        style:
          position: absolute
          top: 0
          left: 0
          height: 80px
          width: 100%
1 Like

Another option would be to put 2 versions of the components you want to be different for the switch and dimmer items and then use a new parameter to identify which type of item you are using. You can then add the visible: config parameter to each of the components you want to be different.

- component: f7-block
  config:
    visible: =(props.item_type == "switch")
    etc.....
- component: f7-block
  config:
    visible: =(props.item_type == "dimmer")
    etc.....

Pros:

  • This is futureproof in case you want more differences later on than just what the on/off states are
  • Also add other item types into the widget (e.g., color bulbs) with additional iterations of the necessary components

Cons

  • It does make the widget code a little longer and potentially harder to maintain
1 Like

Hi, very nice interface you made. One question, how did you removed the ‘Overview’ title on the upper left corner of the Overview screen and included in the upper menu bar? Attached picture. Thank you very much.

1 Like

Most probably you are looking for this setting:
→ Help → Use simple Navigation in Overview-Screen:

That was exactly the issue, solved. Thank you very much for the quick reply.

You have to insert the marked lines, don’t ask me why, but it works

i decided to go with a new widget for my dimmer card:

uid: Card_Dimmer
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - context: item
      description: Item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Oct 23, 2021, 7:52:37 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 70px
    margin-left: 2px
    margin-right: 2px
    margin-top: 2px
    margin-bottom: 2px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 8px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: '=(Number.parseInt(items[props.item].state) > 0) ? "lightbulb_fill" : "lightbulb"'
              size: 16
              style:
                margin-right: 5px
                color: '=(Number.parseInt(items[props.item].state) > 0) ? "#F4E274" : ""'
          - component: Label
            config:
              text: Licht
              style:
                font-size: 12px
                margin-top: 0px
                padding-right: 5px
          - component: Label
            config:
              text: =items[props.item].displayState
              style:
                font-size: 12px
                margin-top: 0px
              visible: "=(Number.parseInt(items[props.item].state) > 0) ? true : false"
    - component: f7-block
      config:
        style:
          position: absolute
          top: 50px
          left: 9px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 15px
                font-weight: 600
                margin-left: 0px
                margin-top: 2px
                line-height: 1
    - component: oh-link
      config:
        action: toggle
        actionItem: =props.item
        actionCommand: ON
        actionCommandAlt: OFF
        style:
          position: absolute
          top: 30px
          left: 0px
          height: 40px
          width: 100%
    - component: oh-link
      config:
        action: popup
        actionModal: widget:RollershutterPopup
        actionModalConfig:
          item: =props.item
        style:
          position: absolute
          top: 0px
          left: 0px
          width: 100%
          height: 30px

with this widget i can open a popup in the upper (blue) part to set a dimmer value or i can just toggle the light in the lower (red) part:
image
works fine so far but i’m struggling with the popup…

this is the widge RollershutterPopup:

uid: RollershutterPopup
props:
  parameters:
    - context: item
      description: Item to control
      label: Item
      name: item
      required: false
      type: TEXT
timestamp: Oct 23, 2021, 6:05:55 PM
component: oh-slider-card
config:
  item: =props.item
  min: 0
  max: 100
  label: true
  scale: true
  scaleSteps: 4
  unit: "%"

and this is what it looks like:
popUp2

is there a way to adjust the size of the popup and could i remove the (orange) header part of the popup?

Hello,
can u tell me how u get the “Overview” Page filled with items or informations? In my openHAB it looks like a “big black hole”. I find nothing to change this page or fill with items. I have the three “standard” cards: Locations, Equipment and Properties. I dont know what i need to do to fill the “Overview” Page.

The Overview tab is a Layout Page. That page shows how to configure it so the page is responsive (i.e. changes it’s layout based on the size of the screen). Further information can be found in Building Pages.

The wdigets you put on a Layout Page are usually going to be Custom Widgets or they will be widgets installed from the Marketplace.

Thanks for the quick help, I found the bug on myself. :wink:

doesn’t look like anyone’s interested, but maybe one day someone can use this… popup size can be configured with f7-popup:

uid: Card_Dimmer
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - context: item
      description: Item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Oct 28, 2021, 1:53:05 PM
component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 70px
    margin-left: 2px
    margin-right: 2px
    margin-top: 2px
    margin-bottom: 2px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 8px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: '=(Number.parseInt(items[props.item].state) > 0) ? "lightbulb_fill" : "lightbulb"'
              size: 16
              style:
                margin-right: 5px
                color: '=(Number.parseInt(items[props.item].state) > 0) ? "#F4E274" : ""'
          - component: Label
            config:
              text: Licht
              style:
                font-size: 12px
                margin-top: 0px
                padding-right: 5px
          - component: Label
            config:
              text: =items[props.item].displayState
              style:
                font-size: 12px
                margin-top: 0px
              visible: "=(Number.parseInt(items[props.item].state) > 0) ? true : false"
    - component: f7-block
      config:
        style:
          position: absolute
          top: 50px
          left: 9px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 15px
                font-weight: 600
                margin-left: 0px
                margin-top: 2px
                line-height: 1
    - component: oh-link
      config:
        action: toggle
        actionItem: =props.item
        actionCommand: ON
        actionCommandAlt: OFF
        style:
          position: absolute
          top: 30px
          left: 0px
          height: 40px
          width: 100%
    - component: oh-link
      config:
        action: popup
        popupOpen: .myPopupOpenDI
        style:
          position: absolute
          top: 0px
          left: 0px
          width: 100%
          height: 30px
      slots:
        default:
          - component: f7-popup
            config:
              class: myPopupOpenDI
              swipeToClose: true
              style:
                --f7-popup-tablet-width: 70%
                --f7-popup-tablet-height: 101px
            slots:
              default:
                - component: widget:Popup_Dimmer
                  config:
                    item: =props.item
                    title: =props.header
uid: Popup_Dimmer
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: item to control
      label: Item
      name: item
      required: false
      type: TEXT
timestamp: Oct 28, 2021, 12:45:25 PM
component: f7-card
config:
  title: =props.title + " Dimmen"
  style:
    margin: 0px
slots:
  default:
    - component: f7-row
      config:
        class:
          - display-flex
        style:
          padding-left: 20px
          padding-right: 20px
          padding-top: 15px
          padding-bottom: 25px
      slots:
        default:
          - component: oh-slider
            config:
              item: =props.item
              min: 0
              max: 100
              label: true
              scale: true
              scaleSteps: 4
              unit: "%"

Dimmer

edit: yaml updated, had to add swipeToClose: true to the f7-popup so i can close the popup also on phone. wasn’t able to figure out how to close the popup with a button :upside_down_face:

4 Likes

Hi Peter
I have been looking for a way to do this too…
Working with you option to call my widget from an oh-cell, but it pops up a blank popup instead of my widget.
Will keep trying to figure it out though

component: oh-cell
config:
  action: popup
  popupOpen: .myPopupOpenDI
  style:
    position: absolute
    top: 0px
    left: 0px
    width: 100%
    height: 100px
slots:
  default:
    - component: f7-popup
      config:
        class: myPopupOpenDI
        swipeToClose: true
        style:
          --f7-popup-tablet-width: 30%
          --f7-popup-tablet-height: 400px
      slots:
        default:
          - component: widget:caddx_graphic_portrait_V6
            config:
              item: =props.item
              title: =props.header

EDIT: Seems to work if you have a widget calling a widget. But not if you are calling the widget from a Cell etc?

tried with oh-cell myself and the widget didn’t even popup when i clicked on the cell, sorry. that is all way above my level. good luck!

Try f7-popover instead.

@Oliver2 The screenshot in your post #4 in this thread looks like you were able to merge the old Habpanel design with the Main UI environment. Is this correct and if so how did you accomplish this?
Thanks
Martin

At that early stage there was no “Fixed Grid” layout available so that I wrote one widget which contained several items.
You can see it here:

However, life is now much easier. Thanks to “hubsif” who made the Fixed Grid layout available. Start with this and you can rebuild your habpanel layout.
I also ended up with a Fixed Grid layout (what you see above was a workaround when only Responsive layouts were available.
If you like I can post my layout and widget yaml codes
Maybe open a seperate thread for this if there are further questions

Thanks for the reply - I have already started to convert Habpanel to the Fixed Grid Layout from hubsif but somewhat liked the design from the Habpanel a bit better than the new one. But anyway - Don´t want to live in two worlds so will continue to dig deeper into F7.

There’s a reference to a widget, called Wetter_OneCall.
Is that also a custom widget you made?