[OH3] Main UI Examples

jelmer1 · December 9, 2022, 8:05am

Hi,

I have a question on how to make these buttons bigger.

Here is my yaml code:

uid: keypad
tags: []
props:
  parameters:
    - context: item
      description: Item to send the pincode to
      label: Item
      name: item
      required: false
      type: TEXT
    - description: Replace pincode characters with this string, leave blank to show it as-is
      label: Mask character
      name: mask
      required: false
      type: TEXT
    - description: If this widget is shown in a popup, close it after pressing Send
      label: Close Popup on Send
      name: closePopup
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Dec 8, 2022, 7:21:19 PM
component: f7-block
config:
  class:
    - padding
  label: Please Input Pin
  style:
    --f7-button-bg-color: var(--f7-card-bg-color)
    --f7-button-text-color: var(--f7-text-color)
    --f7-theme-color-rgb: var(--f7-color-blue-rgb)
slots:
  default:
    - component: oh-label-card
      config:
        class:
          - margin-bottom
        label: "=(props.mask && vars.pincode) ? props.mask.repeat(vars.pincode.length || 0) : vars.pincode"
        outline: true
    - component: Label
      config:
        class:
          - margin-bottom
        label: "=(props.mask && vars.pincode) ? props.mask.repeat(vars.pincode.length || 0) : vars.pincode"
        style:
          color: "#777"
          font-size: 20px
          text-align: center
        text: ""
    - component: f7-row
      config:
        class:
          - margin
      slots:
        default:
          - component: oh-repeater
            config:
              for: digit
              fragment: true
              in:
                - "1"
                - "2"
                - "3"
                - "4"
                - "5"
                - "6"
                - "7"
                - "8"
                - "9"
                - "*"
                - "0"
                - "#"
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - margin-vertical-half
                    width: "33"
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: variable
                          actionVariable: pincode
                          actionVariableValue: "=(vars.pincode) ? vars.pincode + loop.digit : loop.digit"
                          large: true
                          raised: true
                          text: =loop.digit
    - component: f7-row
      config:
        class:
          - margin
        style:
          --f7-button-bg-color: transparent
          --f7-theme-color: var(--f7-color-blue)
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: ""
                    large: true
                    text: Clear
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: =vars.pincode
                    actionItem: =(props.item) || 'TestString'
                    class: "=(props.closePopup) ? ['popup-close'] : []"
                    clearVariable: pincode
                    closePopup: =props.closePopup
                    disabled: =!vars.pincode
                    fill: true
                    large: true
                    style:
                      --f7-button-hover-bg-color: var(--f7-color-blue-tint)
                      --f7-button-pressed-bg-color: var(--f7-color-blue-tint)
                    text: Send
          - component: f7-col
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: '=(vars.pincode) ? vars.pincode.substring(0, vars.pincode.length - 1) : ""'
                    large: true
                    text: Back

Gufti · December 18, 2022, 4:21pm

I deleted the prev. post. Got it done

Gufti · December 19, 2022, 10:53pm

Hi there,

I have a question about the room card. What I did:

I created a “functional” non-semantic light group for each room (to avoid to destroy the semantic model).
I added the lights from the room to this group
Members Base Type = Dimmer
Aggregation Function is AVG

After that the group Item state was displayed with several decimal numbers after the value. I assume this happens because the average is calculated.
Therefore I added some metadata to the item unter “State description”

The decimal points are gone. Nevertheless they are still displayed in the widget:

Screenshot_20221218_233432

If I use one Dimmer item directly instead of the group, the decimal numbers are not displayed.

Screenshot_20221218_233453

Any Idea how to get rid of it? Has the modification to be done directly in the YAML Code of the Widget?

Thanks.

Integer · December 20, 2022, 8:29am

Hey @Gufti

Try to change this line

text: "=(Number(items[props.status].state) > 0) ? items[props.status].state : ''"

with this one:

text: "=(Number(items[props.status].state) > 0) ? (items[props.status].displayState ? items[props.status].displayState: items[props.status].state)  : '' "

let me know, if it is working now.

Gufti · December 22, 2022, 6:27pm

Hi,
works perfectly!

Screenshot_20221222_192648

Thanks a lot for your help!

Oliver2 · December 23, 2022, 7:39am

With v3.4 there is an @ operator available which shows displayState if available and state if not available.

@(items[props.status])

It helped tidying up my widgets😀

rubenfuser · December 23, 2022, 1:33pm

mmm i’ve tried different ways but it doesn’t work for me
i’m running OH snapshot 4.0.0

can you tell me why?

thanks a lot!

                - component: Label
                  config:
                    style:
                      color: black
                      margin-left: 2px
                      z-index: 98
                    text: @(items[props.opstateItem])

hmerk · December 23, 2022, 2:01pm

Does it not need to be

text: =@(items[props.opstateItem])

Gufti · December 23, 2022, 2:42pm

I’m currently on stable 3.3.0

rubenfuser · December 23, 2022, 2:48pm

i’ve tried but the state is reported as “-”.
that item should have both state and displayState…

Oliver2 · December 23, 2022, 3:12pm

Yes, that is correct.
And you need to have minimum version 3.4 M6.

rubenfuser · December 23, 2022, 3:43pm

actually i’m testing on 4.0.0 snapshot and still doesn’t work for me

JustinG · December 23, 2022, 4:23pm

You should not include the items object. The @ operator (and the @@ operator which forces just the state instead of the displayState) acts directly on the item name string. So, in this case:

text: =@(props.opstateItem)

rubenfuser · December 23, 2022, 5:52pm

As always,great answer and also great explanation.

Thank you so much Justin!

ysc · December 23, 2022, 10:26pm

Technically those are the 2 equivalences:

@<name>    <=>    items[<name>].displayState !== undefined ? items[<name>].displayState : items[<name>].state

@@<name>   <=>    items[<name>].state

@ et @@ are unary operators so due to their precedences parentheses may be useful, but not always.
For instance @props.itemName alone is fine, but beware of the differences between:

@@itemsPrefix + '_Suffix`      <=>    items[itemsPrefix].state + '_Suffix'

and

@@(itemsPrefix + '_Suffix`)    <=>    items[itemsPrefix + '_Suffix'].state

bkumio · January 3, 2023, 10:36am

Hi Andras,

many thanks for you Examples, especially the room Card. Quite useful as I was searching for a card that could open a group action…

bkumio

Dennis1984120 · January 7, 2023, 10:56pm

Finally I feel comfortable enough to post my example so far. Have had some great inspiration from @Integer and @BG56 but I’m also inspired by the great design of @Dimitris in the new main widget topic. Thank you all.

I really like the simpleness of the Apple Home app and I try to copy that part, too. When Items are off they are semi-transparent and when one they become white. In some cases I will enable them to become a special color, for example the AlarmPartitionStatus may become red when there is an alarm.

The LightControl widget can be collapsed and expanded by clicking on the title and depending on the set properties will display a slider to dim, two sliders for dim and white tone or will display the color control with three sliders and a set of pre-defined colors.

My HarmonyControl will show the current activity when on and it then also features an off button. It can be expanded when off, but it automatically expanded when on.

I’m currently working on a new widget for displaying status from the thermostate and a player widget for my future Chromecast.

hmerk · January 7, 2023, 11:03pm

Would you mind sharing the code of your widgets ?

Dennis1984120 · January 7, 2023, 11:22pm

Sure!

LightControl:

uid: LightControl
tags: []
props:
  parameters:
    - description: Header icon
      label: Icon
      name: iconHeader
      required: false
      type: TEXT
      groupName: header
    - description: Header text
      label: Header
      name: header
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: Item to control on/off
      label: Item ON OFF
      name: itemSwitch
      required: true
      type: TEXT
      groupName: setup
    - context: item
      description: Item to control brightness
      label: Item brightness
      name: itemBrightness
      required: false
      type: TEXT
      groupName: setup
    - context: item
      description: Item to control color temperature
      label: Item light temperature
      name: itemLightTemperature
      required: false
      type: TEXT
      groupName: setup
    - context: item
      description: Item to control color
      label: Item light color
      name: itemColor
      required: false
      type: TEXT
      groupName: setup
  parameterGroups:
    - name: header
      description: Widget general settings
    - name: setup
      description: Widget specific settings
timestamp: Dec 29, 2022, 10:55:04 PM
component: f7-card
config:
  style:
    background-color: "=items[props.itemSwitch].state === 'ON' ? 'rgba(255, 255, 255, 1)' : 'rgba(34, 34, 34, 0.3)'"
    border-radius: 15px
    box-shadow: 0px 0px
    margin: 5px 5px
slots:
  content:
    - component: f7-row
      config:
        style:
          justify-content: left
      slots:
        default:
          - component: oh-image
            config:
              url: ='/static/icons/' + props.iconHeader + '.svg'
              style:
                height: 25px
                margin-right: 10px
                filter: '=items[props.itemSwitch].state === "ON" ? "brightness(1)" : "brightness(0) invert(1)"'
              visible: "=props.iconHeader ? true : false"
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set header title'"
              style:
                font-size: var(--f7-card-header-font-size)
                font-weight: var(--f7-card-header-font-weight)
                color: '=items[props.itemSwitch].state === "ON" ? "black" : "white"'
                --f7-list-item-after-text-color: '=items[props.itemSwitch].state === "ON" ? "black" : "white"'
          - component: oh-toggle
            config:
              item: =props.itemSwitch
              style:
                position: absolute
                top: 20px
                right: 20px
                z-index: 100
                --f7-toggle-active-color: "#F8BB00"
                --f7-toggle-inactive-color: "#ccc"
    - component: oh-link
      config:
        action: variable
        actionVariable: visiblePart
        actionVariableValue: "=vars.visiblePart === true ? false : true"
        style:
          position: absolute
          top: 0
          left: 0
          height: 55px
          width: 100%
          actionPosition: center
    - component: f7-row
      config:
        style:
          justify-content: center
          margin-top: 25px
        visible: =vars.visiblePart === true && props.itemBrightness !== Null
      slots:
        default:
          - component: oh-slider
            config:
              item: =props.itemBrightness
              min: 0
              max: 100
              style:
                width: calc(100% - 20px)
                --f7-range-bar-size: 10px
                --f7-range-bar-border-radius: 8px
                --f7-range-knob-size: 20px
                --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
    - component: f7-row
      config:
        style:
          justify-content: center
          margin-top: 10px
        visible: =vars.visiblePart === true && props.itemLightTemperature !== Null
      slots:
        default:
          - component: oh-slider
            config:
              item: =props.itemLightTemperature
              min: 0
              max: 100
              style:
                width: calc(100% - 20px)
                --f7-range-bar-size: 10px
                --f7-range-bar-border-radius: 10px
                --f7-range-knob-size: 20px
                --f7-range-bar-active-bg-color: transparent
                --f7-range-bar-bg-color: linear-gradient(to right, rgba(215, 226, 255), rgba(224, 238, 238),rgba(255, 215, 44, 0.5),rgba(255, 215, 44, 0.8))
                --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                --f7-range-label-text-color: black
    - component: f7-row
      config:
        style:
          justify-content: center
          margin-top: 10px
          --f7-range-bar-size: 10px
          --f7-range-bar-border-radius: 10px
          --f7-range-knob-size: 20px
          --f7-range-bar-active-bg-color: transparent
          --f7-range-bar-bg-color: linear-gradient(to right, rgba(246,158,81,0.8), rgba(246,158,81,0))
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
          --f7-range-label-text-color: black
          --f7-color-picker-slider-size: 10px
          --f7-color-picker-slider-knob-size: 20px
          width: 100%
        visible: =vars.visiblePart === true && props.itemColor !== Null
      slots:
        default:
          - component: oh-colorpicker
            config:
              color: red
              label: true
              item: =props.itemColor
              modules:
                - hsb-sliders
    - component: f7-row
      config:
        style:
          justify-content: center
          margin-top: 10px
        visible: =vars.visiblePart === true && props.itemColor !== Null
      slots:
        default:
          - component: oh-button
            config:
              iconColor: yellow
              iconF7: app_fill
              iconSize: 25
              action: command
              actionItem: =props.itemColor
              actionCommand: 60,100,100
              style:
                padding: 0px 5px
                height: 35px
                background: transparent
          - component: oh-button
            config:
              iconColor: orange
              iconF7: app_fill
              iconSize: 25
              action: command
              actionItem: =props.itemColor
              actionCommand: 30,100,100
              style:
                padding: 0px 5px
                height: 35px
                background: transparent
          - component: oh-button
            config:
              iconColor: deeporange
              iconF7: app_fill
              iconSize: 25
              action: command
              actionItem: =props.itemColor
              actionCommand: 15,100,100
              style:
                padding: 0px 5px
                height: 35px
                background: transparent
          - component: oh-button
            config:
              iconColor: red
              iconF7: app_fill
              iconSize: 25
              action: command
              actionItem: =props.itemColor
              actionCommand: 0,100,100
              style:
                padding: 0px 5px
                height: 35px
                background: transparent
          - component: oh-button
            config:
              iconColor: purple
              iconF7: app_fill
              iconSize: 25
              action: command
              actionItem: =props.itemColor
              actionCommand: 300,100,100
              style:
                padding: 0px 5px
                height: 35px
                background: transparent
          - component: oh-button
            config:
              iconColor: blue
              iconF7: app_fill
              iconSize: 25
              action: command
              actionItem: =props.itemColor
              actionCommand: 240,100,100
              style:
                padding: 0px 5px
                height: 35px
                background: transparent
          - component: oh-button
            config:
              iconColor: lightblue
              iconF7: app_fill
              iconSize: 25
              action: command
              actionItem: =props.itemColor
              actionCommand: 180,100,100
              style:
                padding: 0px 5px
                height: 35px
                background: transparent
          - component: oh-button
            config:
              iconColor: green
              iconF7: app_fill
              iconSize: 25
              action: command
              actionItem: =props.itemColor
              actionCommand: 120,100,100
              style:
                padding: 0px 5px
                height: 35px
                background: transparent

SimpleSwitch:

uid: SimpleSwitch
tags: []
props:
  parameters:
    - description: Header icon
      label: Icon
      name: iconHeader
      required: false
      type: TEXT
      groupName: header
    - description: Header text
      label: Header
      name: header
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: Item to control on/off
      label: Item
      name: itemSwitch
      required: false
      type: TEXT
      groupName: setup
  parameterGroups:
    - name: header
      description: Widget general settings
    - name: setup
      description: Widget specific settings
timestamp: Dec 29, 2022, 10:55:19 PM
component: f7-card
config:
  style:
    background-color: "=items[props.itemSwitch].state === 'ON' ? 'rgba(255, 255, 255, 1)' : 'rgba(34, 34, 34, 0.3)'"
    border-radius: 15px
    box-shadow: 0px 0px
    margin: 5px 5px
slots:
  content:
    - component: f7-row
      config:
        style:
          justify-content: left
      slots:
        default:
          - component: oh-image
            config:
              url: ='/static/icons/' + props.iconHeader + '.svg'
              style:
                height: 25px
                margin-right: 10px
                filter: '=items[props.itemSwitch].state === "ON" ? "brightness(1)" : "brightness(0) invert(1)"'
              visible: "=props.iconHeader ? true : false"
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set header title'"
              style:
                font-size: var(--f7-card-header-font-size)
                font-weight: var(--f7-card-header-font-weight)
                color: '=items[props.itemSwitch].state === "ON" ? "black" : "white"'
                --f7-list-item-after-text-color: '=items[props.itemSwitch].state === "ON" ? "black" : "white"'
    - component: f7-row
      config:
        style:
          justify-content: center
          margin-top: 25px
      slots:
        default:
          - component: oh-toggle
            config:
              item: =props.itemSwitch
              style:
                --f7-toggle-active-color: "#F8BB00"
                --f7-toggle-inactive-color: "#ccc"

Let me double check my HarmonyControl first before I post it here. Want to make sure that it’s fully functioning

rubenfuser · January 7, 2023, 11:47pm

Very nice! Looks like the one i’ve made too

I will take from your widget, the preset line colors,i forgot to add that could be useful.

Thanks!