[OH3] Main UI Examples

Hey,
how do setup your lights to count them?

Thanks!

Simply create a group, base type “Number”, aggregation type “SUM”.
Then add your items to that group.
Example for an “Open Windows Counter” for one of my rooms:

Ok, it‘s working. Thanks!
But I get a strange result. If I turn on a light, it will show not 1, instead it shows 0,56. because it‘s a dimmable light.
Do you have a solution therefore?

Straight forward I’d link a second item of type “Switch” to the same channel and use this instead of the dimmer item in the group. This should give the expected result. Just tried it, worked fine.

Great! It works! :grinning:
But how can I format the output? The UI shows now 1.0. I‘ve tried with „%.0f“ but nothing changes.

hi guys,i just started with main.ui .I have a question,i need a oh-label-card that can send a ON command and if it is ON when i press it open a popup with keypad widget.Can this be done?

This can be done in one of two ways:

Simple way: The action property of the label card can be set to a dynamic expression and the yaml parser will just ignore extra parameters, so you can setup the parameter for both the command and popup actions and clicking on the card directly will alternate between the two actions. Something like this:

    - component: oh-label-card
      config:
        title: Two actions
        item: keypadItem
        action: "=(items[keypadItem].state == "ON") ? 'popup' : 'command'"
        actionItem: keypadItem
        actionCommand: ON
        actionModal: widget:keypad_widget

Advanced way: An oh-link or an oh-button can have an action defined and have a separate popupOpen option. See the widget code in this example for a use case. The card doesn’t have the popupOpen option that I’m aware of, so you would have to cover the card with one of those components that does or have a more restricted area where clicking produces the desired action.

This is a little tricky to setup and I haven’t tried setting popupOpen to a dynamic value, but it should work (may also require the key property to make sure that popupOpen resets correctly). The advantage is that it allows you to define the popup in the same widget code if that is something you want and gives you more fine control over the popup (how it’s closed, etc).

How do you setup you window contact to count the open windows? Also as a switch?

thnx mate for your answer,my oh-label

component: oh-label-card
config:
  item: deskhall
  action: "=(items[deskhall].state === 'ON') ? 'popup' : 'command'"
  actionItem: deskhall
  actionCommand: ON
  actionModal: widget:keypad
  actionModalConfig:
    item: Keypad_Code
    closePopup: true
slots: null

deskhall item is just a light switch.The label shows the item state allright,when it is OFF and i press the label light changes to ON but then when i press again no popup just sending “ON” command again…What is wrong?

Sorry, there was a small ambiguity in my quick write up. It appears that deskhall is the actual name of the item you are using, so there are two ways to reference the item data stored in the items object. If you have the exact name of the item then you can use a direct items.deskhall.state. The [] version can be used when the item name is stored in a variable or is a result of some other string operation, so it requires a string between the brackets: items["deskhall"].state.

1 Like

@JustinG thnx mate it works fine now plus i learned something very usefull
another thing i would like to ask is that i see everyone has nice background photos for their location tabs at mainui.Kitchen,livingroom,bathroom photos etc…Where can i find them and where to place the jpg so i can set them as a background?
thnx

You need to place the place the .jpg files in the HTML folder in the OPENHAB_CONF path
image
Then configure the Location Card to use those jpgs

I just use pictures taken with my phone…

1 Like

Hi modified the the “Cell_Light_Card” widget with a second slider, and for this i want to add a second header “Set Props” as shown int the image. But i failed with adding a second “- component: Label”. I can’t get it in the right place. Sorry but my coding skills are very low, can somebody help me.

uid: Cell_Light_Card_2
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
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control on/off
      label: Item
      name: item_schalter
      required: false
      type: TEXT
    - context: item
      description: Item to control brightness
      label: Item
      name: item_brightness
      required: false
      type: TEXT
    - context: item
      description: Item to control temperature
      label: Item
      name: item_temperature
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 12, 2022, 8:31:49 PM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 190px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          left: 16px
          position: absolute
          top: -5px
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              style:
                font-size: 12px
                margin-top: 0px
              text: "=props.title ? props.title : ''"
    - component: f7-block
      config:
        style:
          bottom: -15px
          flex-direction: row
          left: 16px
          position: absolute
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
              text: "=props.header ? props.header : 'Set Props'"
    - component: oh-slider
      config:
        item: =props.item_brightness
        max: 100
        min: 0
        style:
          --f7-range-bar-border-radius: 8px
          --f7-range-bar-size: 8px
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
          --f7-range-knob-size: 20px
          bottom: -75px
          left: 20px
          position: absolute
          width: calc(100% - 40px)      
    - component: oh-slider
      config:
        item: =props.item_temperature
        max: 100
        min: 0
        style:
          --f7-range-bar-border-radius: 8px
          --f7-range-bar-size: 8px
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
          --f7-range-knob-size: 20px
          bottom: -140px
          left: 20px
          position: absolute
          width: calc(100% - 40px    
    - component: oh-toggle
      config:
        item: =props.item_schalter
        style:
          position: absolute
          right: 20px
          top: 15px

How did you get it to read the timeframe from now → now - 24 hrs? If I make a graph with a day element, it alsways displays from 00:00 - 23:59 for today…

Thanks

Hi @j67,

you can just add another component like the first label. You have to play with the style config “bottom” of this component so that it fits your expectations.

Maybe this helps as a start:

uid: Cell_Light_Card_2
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized (Slider 1)
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Header big sized (Slider 2)
      label: Header
      name: header2
      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 on/off
      label: Item
      name: item_schalter
      required: false
      type: TEXT
    - context: item
      description: Item to control brightness
      label: Item
      name: item_brightness
      required: false
      type: TEXT
    - context: item
      description: Item to control temperature
      label: Item
      name: item_temperature
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jan 12, 2022, 8:31:49 PM
component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 190px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    padding: 0px
slots:
  content:
    - component: f7-block
      config:
        style:
          display: flex
          flex-direction: row
          left: 16px
          position: absolute
          top: -5px
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              style:
                font-size: 12px
                margin-top: 0px
              text: "=props.title ? props.title : ''"
    - component: f7-block
      config:
        style:
          bottom: -15px
          flex-direction: row
          left: 16px
          position: absolute
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
              text: "=props.header ? props.header : 'Set Props'"
    - component: oh-slider
      config:
        item: =props.item_brightness
        max: 100
        min: 0
        style:
          --f7-range-bar-border-radius: 8px
          --f7-range-bar-size: 8px
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
          --f7-range-knob-size: 20px
          bottom: -75px
          left: 20px
          position: absolute
          width: calc(100% - 40px)      
    - component: f7-block
      config:
        style:
          bottom: -95px
          flex-direction: row
          left: 16px
          position: absolute
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
              text: "=props.header2 ? props.header2 : 'Set Props Slider 2'"
    - component: oh-slider
      config:
        item: =props.item_temperature
        max: 100
        min: 0
        style:
          --f7-range-bar-border-radius: 8px
          --f7-range-bar-size: 8px
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
          --f7-range-knob-size: 20px
          bottom: -145px
          left: 20px
          position: absolute
          width: calc(100% - 40px    
    - component: oh-toggle
      config:
        item: =props.item_schalter
        style:
          position: absolute
          right: 20px
          top: 15px

On my OH3 this looks like this:

Cheers
Jonathan

I love this and use it successfully for CPU load and MEM load (chart below):

But when I use this widget for my download / upload stats, I don’t see a chart.
I assume it must be related to the item itself (here download), but I don’t see a difference between the MEM item and the download item (both number an no semantic class).
However, the MEM from the systemInfo binding reports a percentage, which is not the case fot the download of course (pure number).
The item view in main-ui does not show a chart either (clicking analyze it does):

whereas the MEM does:

So what’s the difference and how to solve this?
Thanks in advance

does no one have an idea what might be different here?
Please help!
Thank you.

This is great! thanks man! I just added a line to show when I need to bring the trash out which is in fact a day before :slight_smile: so I edited the component which shows the date in the yaml with a dayjs switch like this:

text: “=items[props.item_date].displayState == dayjs().add(1, ‘day’).format(‘DD.MM.YYYY’) ? items[props.item].state+’ heute raus stellen!’ : items[props.item].state”

@ kuczerek → very nice Dashboard.
I will definitely use your inputs to get my Dash working. Can you share the widgets also for:
“Livevisu Linkkarte mit Status Übersicht”, “Trenner” and “Livevisu Titel”.
thx.

Hey, I had the same issue and started investigating the item states.
It turned out that when the State Description’s pattern results the same string as the state, then the displayState is not initialized :hushed:
So I’ve just changed one line in the widget for the humidity label to this:

              text: "=items[props.humidity_item].displayState ? items[props.humidity_item].displayState : items[props.humidity_item].state"