[OH3] Main UI Examples

I tried to use some widgets but I have problem if I try to set fixed layout. Can you help me where can be the problem?

How did you build the shutter preset slider? I’m only at a selection popup so far, but of course such a slider looks very good. Does it have breakpoints for the individual values or are they not preset values at all, just a scale?

English please, this is an international community!

great ideas here.

im finding it difficult to convert to time to show how long since last seen.

could you share you rule and corresponfding items please

Many thanks

1 Like

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

Hello Sir, Hello Community. Many thanks for that beautiful widgets .
Having zero experience with coding i’m wondering if there is a volunteer to create a new widget based on Temp Card you have create with some additions. Im uploading my design for a quick review. Any thoughts is welcomed! Am a poor Mac User who loves to design and having zero talent in coding!

Thank you for your time reading this

5 Likes

(part2)
New User, can’tt upload more than one at the same time

(part3)

Hi @Dimitris,

i am also not a coder but I love to try the things out.

I will have a look at this design this evening and post my efforts.

For now another question from me - because I am not a designer at all: Could you design a good looking “room widget” to build a dashboard for mobile phones?

Perhaps we could together manage the jobs :wink:

Absolutely! Can you provide me with a short brief ? What you want to control and which info must be included in the card? or send me an existing design for trying some alternatives and improvements. Thanks for your reply

first of all the promissed code:

uid: Cell_Temp_Card_1
tags: []
props:
  parameters:
    - description: Title
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      label: Temp1
      name: temp_item
      required: false
      type: TEXT
    - context: item
      label: Temp2
      name: set_temp_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jul 26, 2022, 11:07:04 PM
component: f7-card
config:
  style:
    height: 120px
slots:
  content:
    - component: f7-card-content
      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: 15px
                margin-top: 0px
                font-weight: 150
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: 0px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=items[props.temp_item].displayState ? items[props.temp_item].displayState : items[props.temp_item].state"
              style:
                position: absolute
                font-size: 22px
                font-weight: 300
                top: -50px
                left: 30px
                width: 100px
    - component: f7-card-content
      config:
        style:
          position: absolute
          bottom: -63px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              visible: "=props.heating_item ? true : false"
              f7: flame
              size: 18
          - component: Label
            config:
              visible: "=props.heating_item ? true : false"
              text: =items[props.heating_item].state
              style:
                font-size: 12px
                margin-left: 5px
                margin-top: 0px
    - component: oh-button
      config:
        visible: true
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
        style:
          position: absolute
          top: 12px
          right: 10px
          height: 35px
          background: transparent
          color: "#7fc8c5"
    - component: oh-button
      config:
        visible: "=props.set_temp_item ? true : false"
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
        style:
          position: absolute
          top: 12px
          right: 60px
          height: 35px
          background: transparent
          color: "#545353"
    - component: oh-button
      config:
        visible: "=props.set_temp_item ? true : false"
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
        style:
          position: absolute
          top: 74px
          right: 10px
          height: 35px
          background: transparent
          color: "#7fc8c5"
    - component: oh-button
      config:
        visible: "=props.set_temp_item ? true : false"
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
        style:
          position: absolute
          top: 74px
          right: 60px
          height: 35px
          background: transparent
          color: "#545353"
    - component: Label
      config:
        visible: "=props.set_temp_item ? true : false"
        text: =items[props.set_temp_item].state
        style:
          font-size: 12px
          position: absolute
          right: 15px
          top: 50px
    - component: Label
      config:
        text: =items[props.set_temp_item].state
        style:
          font-size: 12px
          position: absolute
          right: 65px
          top: 50px
    - component: f7-card-content
      config:
        style:
          position: absolute
          top: 15px
          left: -16px
          width: 80%
          height: 70px
      slots:
        default:
          - component: oh-trend
            config:
              trendItem: =props.temp_item
              trendGradient:
                - "#7fc8c5"
              style:
                position: absolute
                width: 100%
                height: 100%
                top: 0px
                left: 0px
                z-index: 1
    - component: f7-card-content
      config:
        style:
          background: "white"
          top: 100px
          width: 100%
          left: -16px
                
                
                
                
                
                
    - component: f7-card-content
      config:
        style:
          background: "#eaf7f5"
          top: 100px
          width: 100%
          left: -16px
      slots:
        default:
          - component: oh-toggle
            config: {}

          - component: f7-icon
            config:
              f7: snow
              size: 30
              style:
                position: absolute
                left: 420px
          - component: f7-icon
            config:
              f7: flame
              size: 30
              style:
                position: relative
                left: 420px
                font-weight: 100
          - component: f7-icon
            config:
              f7: radiowaves_left
              size: 30
              style:
                position: relative
                left: 440px
                margin-right: 5px

please try it and give me feedback - i will finish it then.

For the room widget:
my thoughts would be to see the light state, the actual temp, actual humidity the state of windows and roller shutters .

1 Like

WOW. It works and is beautiful - You are awesome!
Yes i have some feedback :smiling_face:

Grey buttons selects the fan speed:

Grey Arrow up selects the upnext value, grey arrow down the previous value.
Values 0,1,2,3,4,5

(Auto =0, Sleep=1, Low=2, Med=3, High=4, Turbo=5)
Channels@AC:

Set mode buttons preferred to be aligned right and selectable- displays Active mode. MODE Icon changes color when selected and the inactive goes grey. (Channel Operation Mode)

Last but not least:
While I’m editing the widget, the layout seems ok.

When i run it, the bottom part of the widget is missing (goes under the next cell)

I’m sending you just a little bonus until to start design the layout i promised. It’s something that I’m working now. When it finishes, Tomorrow i will be hands on for our little project.

Alarm and rollers cell_overview.pdf (419.0 KB)
And the updated version for the AC widget:
AC Widget_02.pdf (154.0 KB)
In this version (i think its better…) only the icons changes color depending on selected mode (cool, heat, dry)

Again, THANK YOU. Pls give me some time!

Thanks for the feedback. I will have a look and try to fix the issues and add the features.

Please give me some time - I will do my best :wink:

Any particular reason why posting pdf documents instead of yaml code in code fences ?

Hello, Newbie here! I’m very sorry about this - i have just upload a design in pdf while typing plain text. Can you please advice me which is the proper way to do that? I understand that i have pressed accidentally the “code fence” icon prior to upload the pdf?

Sorry, did not see that the pdf files contain screenshots but no code. That‘s fine so far. When posting code, press the yaml code fence icon and enter/paste the code between the markers.

Thanks for your reply, very clear for me now. Don’t worry, I’m far away to post code. Apple user. Only designs and pictures!!