[OH3] Main UI Examples

its all good, after a few hours i managed to get it working :smile:
image

I have an item named ‘Entered_Code’ that passes a code to my alarm rule, a night or away alarm arms based on the code, this all works fine when using the keypad widget on its own.

the issue i have is when i use the keypad as a popup, it doesnt work, HELP please. popup appears and functions but the entered code isnt passed to the ‘Entered_Code’ item after send if hit. also doesnt close on send

main widget

uid: Alarm_status
tags: []
props:
  parameters:
    - description: Alarm Status
      name: label
      required: false
      type: TEXT
    - context: item
      description: Full Alarm Status Item
      label: Item
      name: full_alarm
      required: false
      type: TEXT
    - context: item
      description: Night Alarm Status Item
      label: Item
      name: night_alarm
      required: false
      type: TEXT
    - context: item
      description: Item to send the pincode to
      label: Item
      name: Entered_Code
      required: true
      type: TEXT
timestamp: Jun 27, 2022, 12:05:06 AM
component: oh-label-cell
config:
  action: popup
  actionModal: widget:keypad
  actionModalConfig:
  item: =props.Entered_Code
  popoverClose: true
  color: '= (items[props.full_alarm].state === "ON") ? "red" : (items[props.night_alarm].state === "ON") ? "orange" : "green"'
  expandable: false
  header: = props.label
  icon: '= (items[props.full_alarm].state === "ON") ? "oh:siren-on" : (items[props.night_alarm].state === "ON") ? "oh:siren-on" : "oh:siren-off"'
  label: '= (items[props.full_alarm].state === "ON") ? "Full Alarm is Armed" : (items[props.night_alarm].state === "ON") ? "Night Alarm is Armed" : "The Alarm is Disarmed"'
  on: true

Keypad popup

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: Jun 27, 2022, 2:26:16 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: 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
                    popoverClose: true
                    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

HI @mick1880,

sry, didn’t see this post.

You can find some documentation in this post:

Hey @Christopher_Haas,

it took a while, but here are the widgets:

Livevisu Linkkarte mit Status Übersicht

uid: Livevisu Linkkarte mit Status Übersicht
tags:
  - Live
  - MainUI
props:
  parameters:
    - label: Title
      name: title
      required: false
      type: TEXT
    - label: f7 Icon Titel
      name: icon_titel
      required: false
      type: TEXT
    - label: f7 Icon normal
      name: icon
      required: false
      type: TEXT
    - label: Status Präfix
      name: praefix
      required: false
      type: TEXT
    - label: Status Suffix
      name: suffix
      required: false
      type: TEXT
    - context: item
      label: Statusitem
      name: status
      required: false
      type: TEXT
    - description: rgba oder HEX
      label: Hintergrundfarbe
      name: bgcolor
      required: false
      type: TEXT
    - description: rgba oder HEX
      label: Hintergrundfarbe bei Statusitem > 0 oder ON
      name: bgcolor_active
      required: false
      type: TEXT
    - description: Popup Seite
      label: Page ID
      name: page
      required: false
  parameterGroups: []
timestamp: Dec 13, 2021, 2:27:25 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=items[props.status].state > 0 ? (props.bgcolor_active ? props.bgcolor_active : '') : (items[props.status].state == 'ON' ? (props.bgcolor_active ? props.bgcolor_active : '') : (props.bgcolor ? props.bgcolor : ''))"
    height: 150px
    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: f7-icon
            config:
              f7: "=props.icon_titel ? props.icon_titel : ''"
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -90px
          left: 16px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: "=props.icon ? props.icon : ''"
              size: 100
    - component: f7-block
      config:
        style:
          position: absolute
          top: 128px
          right: 0px
      slots:
        default:
          - component: Label
            config:
              text: "=props.praefix ? (props.suffix ? props.praefix + items[props.status].displayState + props.suffix : props.praefix + items[props.status].displayState ) : (props.suffix ? items[props.status].displayState + props.suffix : items[props.status].displayState )"
              style:
                margin-right: 10px
    - component: oh-link
      config:
        action: navigate
        actionPageTransition: f7-dive
        actionPage: ='page:' + props.page
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 150px
          width: 100%

Livevisu Titel

uid: Livevisu Titel
tags:
  - Live
  - MainUI
props:
  parameters:
    - label: Titel
      name: header
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 28, 2021, 5:43:20 PM
component: f7-card
config:
  content: "=props.header ? props.header : 'Set Props'"
  noBorder: true
  noShadow: true
  outline: false
  padding: false
  style:
    --f7-card-bg-color: var(--f7-page-bg-color)
    font-size: 20px
    font-weight: 600
    text-align: center

Livevisu Trenner

uid: Livevisu Trenner
tags:
  - Live
  - MainUI
props:
  parameters:
    - label: Titel
      name: header
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 29, 2021, 8:32:55 AM
component: f7-card
config:
  content: "=props.header ? props.header : 'Set Props'"
  noBorder: true
  noShadow: true
  outline: false
  padding: false
  style:
    --f7-card-bg-color: var(--f7-page-bg-color)
    font-size: 30px
    font-weight: 600

321 posts were merged into an existing topic: [OH3] Main UI - New „main_widget“ - development and testing [WIP]

New topic started here

I would like to share with you the my collection of widgets. I created the first version 1 year ago, and in the last year I added some improvements and a consistent flat look to the widget.
The widgets are existing two different versions for mobile and for tablet grid views

If you would like to use, just take and integrate on your dashboard

Examples


Source Code

2 Likes

Could you share how you achieved this?

1 Like

Sorry for the delayed reply, below rule if it helps and still required

rule "Michael Last Seen"
        when
                  Time cron "0 0/1 * * * ?"
        then
    var DateTimeType prevOnState = (MichaellastSeen.state as DateTimeType).getZonedDateTime()
    var DateTimeType newTime = (currentTime.state as DateTimeType).getZonedDateTime()
    var execDuration = Duration.between(prevOnState, ZonedDateTime.now()).toSeconds()
    var Number lastSeen = execDuration / 60
                postUpdate(Michael_update, lastSeen)
        end

1 Like

thx - for your reply! love it.

Hi Guys,

that issue with the example Widgets is still existing, if I want to use the topics in the Fixed Grid Layout.

In the widget Editor it looks fine, in the Responsive layout it works fine, only in Fixed Grid layout not.
Has anybody an Idea? Is it not possible to share a widgets between the different layouts?

Regards,
Jens

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


I deleted the prev. post. Got it done :slight_smile:

1 Like

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.

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.

Hi,
works perfectly!

Screenshot_20221222_192648

Thanks a lot for your help!

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😀

1 Like

mmm i’ve tried different ways but it doesn’t work for me :frowning:
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])

Does it not need to be

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

I’m currently on stable 3.3.0