[OH3] Main UI Examples

Made quite some updates since the photos posted above so created a new post. This is still work in progress, some widgets still need a fair bit of work and they are also not programmed as efficient as some of the other ones I see in the forum because I have only limited skills with this (still want to figure out the repeater, grid, etc.). I added the YAML files for the most interesting widgets, the other ones are very similar.

I hope this is useful for anyone, feel free to use whatever you can. I know there’s a lot to improve so if you do, please post back so I can implement that for myself as well :smiley:

HOME page. I implemented a menu structure with different sections and then another overview and sections for the different rooms. The floorplan now shows AQI, want to add buttons to be able to choose what to show (Temperature, Lights, etc.):

YAML: HOME menu
uid: w_TBL_Menu_HOME
tags: []
props:
  parameters:
    - context: name
      description: Name of location (Default "Home")
      label: Name
      name: name
      required: false
    - context: name
      description: Group (Overview / Light / Environment / Media / Security)
      label: Group
      name: group
      required: false
    - context: page
      label: Page to navigate to (left button)
      name: homePage
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Overview)
      name: targetPage1
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Light)
      name: targetPage2
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Environment)
      name: targetPage3
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Media)
      name: targetPage4
      required: false
      type: TEXT
    - context: switch
      label: Hide Media button
      name: hideBTNmedia
      required: false
      type: BOOLEAN
    - context: page
      label: Page to navigate to (Security)
      name: targetPage5
      required: false
      type: TEXT
    - context: switch
      label: Hide Security button
      name: hideBTNsecurity
      required: false
      type: BOOLEAN
    - context: page
      label: Page to navigate to (Living)
      name: areaPage1
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Bedroom)
      name: areaPage2
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Bathroom)
      name: areaPage3
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Kitchen)
      name: areaPage4
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Hallway)
      name: areaPage5
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Office)
      name: areaPage6
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Toilet)
      name: areaPage7
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Outdoor)
      name: areaPage8
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 14, 2021, 9:54:17 AM
component: f7-card
config:
  style:
    - width: 748px
    - height: 210px
    - border-radius: 15px
    - background-color: "#353535"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    icon-f7: house_fill
                    icon-size: 100
                    action: navigate
                    actionPage: =props.homePage
                    style:
                      position: absolute
                      left: 12px
                      top: 10px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 125px
                      height: 125px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    text: "=props.name === undefined ? 'Home' : props.name"
                    style:
                      position: absolute
                      left: 155px
                      top: 1px
                      fontSize: 42px
                      fontWeight: 400
                      color: "#A1A1A1"
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    style:
                      position: absolute
                      left: 655px
                      top: 14px
                      --f7-button-bg-color: "#505050"
                      width: 80px
                      height: 50px
                - component: f7-icon
                  config:
                    visible: '=(items.HOME_Status.state === "OK") ? true : false'
                    f7: circle_fill
                    size: 35
                    style:
                      position: absolute
                      left: 680px
                      top: 20px
                      color: white
                - component: f7-icon
                  config:
                    visible: '=(items.HOME_Status.state === "OK") ? true : false'
                    f7: checkmark_circle_fill
                    size: 40
                    style:
                      position: absolute
                      left: 677px
                      top: 18px
                      color: "#177245"
                - component: f7-icon
                  config:
                    visible: '=(items.HOME_Status.state === "WARNING") ? true : false'
                    f7: circle_fill
                    size: 35
                    style:
                      position: absolute
                      left: 680px
                      top: 20px
                      color: white
                - component: f7-icon
                  config:
                    visible: '=(items.HOME_Status.state === "WARNING") ? true : false'
                    f7: bell_circle_fill
                    size: 40
                    style:
                      position: absolute
                      left: 677px
                      top: 18px
                      color: "#C96112"
                - component: f7-icon
                  config:
                    visible: '=(items.HOME_Status.state === "ALARM") ? true : false'
                    f7: triangle_fill
                    size: 35
                    style:
                      position: absolute
                      left: 680px
                      top: 20px
                      color: white
                - component: f7-icon
                  config:
                    visible: '=(items.HOME_Status.state === "ALARM") ? true : false'
                    f7: exclamationmark_triangle_fill
                    size: 40
                    style:
                      position: absolute
                      left: 677px
                      top: 18px
                      color: "#C1301C"
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:w_TBL_Status
                    style:
                      position: absolute
                      left: 655px
                      top: 14px
                      --f7-button-bg-color: transparent
                      width: 80px
                      height: 50px
                - component: oh-button
                  config:
                    action: navigate
                    actionPage: =props.targetPage6
                    icon-f7: gear_alt_fill
                    icon-size: 35
                    style:
                      position: absolute
                      left: 655px
                      top: 75px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 60px
                      fontSize: 35px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    icon-f7: eye_fill
                    icon-size: 35
                    action: navigate
                    actionPage: =props.targetPage1
                    style:
                      position: absolute
                      left: 155px
                      top: 75px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    visible: '=(props.group === "Overview") ? true : false'
                    style:
                      position: absolute
                      left: 155px
                      top: 130px
                      --f7-button-bg-color: "#A1A1A1"
                      width: 80px
                      height: 5px
                - component: oh-button
                  config:
                    icon-f7: lightbulb_fill
                    icon-size: 35
                    action: navigate
                    actionPage: =props.targetPage2
                    style:
                      position: absolute
                      left: 255px
                      top: 75px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    visible: '=(props.group === "Light") ? true : false'
                    style:
                      position: absolute
                      left: 255px
                      top: 130px
                      --f7-button-bg-color: "#A1A1A1"
                      width: 80px
                      height: 5px
                - component: oh-button
                  config:
                    icon-f7: tree_fill
                    icon-size: 35
                    action: navigate
                    actionPage: =props.targetPage3
                    style:
                      position: absolute
                      left: 355px
                      top: 75px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    visible: '=(props.group === "Environment") ? true : false'
                    style:
                      position: absolute
                      left: 355px
                      top: 130px
                      --f7-button-bg-color: "#A1A1A1"
                      width: 80px
                      height: 5px
                - component: oh-button
                  config:
                    visible: =!props.hideBTNmedia
                    icon-f7: film
                    icon-size: 35
                    action: navigate
                    actionPage: =props.targetPage4
                    style:
                      position: absolute
                      left: 455px
                      top: 75px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    visible: '=(props.group === "Media") ? true : false'
                    style:
                      position: absolute
                      left: 455px
                      top: 130px
                      --f7-button-bg-color: "#A1A1A1"
                      width: 80px
                      height: 5px
                - component: oh-button
                  config:
                    visible: =!props.hideBTN5
                    action: navigate
                    actionPage: =props.targetPage5
                    icon-f7: lock_fill
                    icon-size: 35
                    style:
                      position: absolute
                      left: 555px
                      top: 75px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                      fontSize: 35px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    visible: '=(props.group === "Security") ? true : false'
                    style:
                      position: absolute
                      left: 555px
                      top: 130px
                      --f7-button-bg-color: "#A1A1A1"
                      width: 80px
                      height: 5px
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    action: navigate
                    actionPage: =props.areaPage1
                    text: Living
                    style:
                      position: absolute
                      left: 20px
                      top: 147px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                      fontSize: 17px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    action: navigate
                    actionPage: =props.areaPage2
                    text: Bedroom
                    style:
                      position: absolute
                      left: 110px
                      top: 147px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                      fontSize: 17px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    action: navigate
                    actionPage: =props.areaPage3
                    text: Bathroom
                    style:
                      position: absolute
                      left: 200px
                      top: 147px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                      fontSize: 17px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    action: navigate
                    actionPage: =props.areaPage4
                    text: Kitchen
                    style:
                      position: absolute
                      left: 290px
                      top: 147px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                      fontSize: 17px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    action: navigate
                    actionPage: =props.areaPage5
                    text: Hallway
                    style:
                      position: absolute
                      left: 380px
                      top: 147px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                      fontSize: 17px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    action: navigate
                    actionPage: =props.areaPage6
                    text: Office
                    style:
                      position: absolute
                      left: 470px
                      top: 147px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                      fontSize: 17px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    action: navigate
                    actionPage: =props.areaPage7
                    text: Toilet
                    style:
                      position: absolute
                      left: 560px
                      top: 147px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                      fontSize: 17px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    action: navigate
                    actionPage: =props.areaPage8
                    text: Outdoor
                    style:
                      position: absolute
                      left: 650px
                      top: 147px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                      fontSize: 17px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center

YAML: Floorplan AQI
uid: w_TBL_Floorplan_AQI
tags: []
props:
  parameters:
    - context: name
      description: Name on the card
      label: Name
      name: name
      required: false
    - context: page
      label: Page linked to "Config" button
      name: targetPage
      required: false
      type: TEXT
    - context: switch
      label: Hide "Config" button
      name: hideBTN
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Apr 13, 2021, 2:36:32 PM
component: f7-card
config:
  style:
    - width: 748px
    - height: 533px
    - border-radius: 15px
    - background-color: "#353535"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 748px
                      height: 42px
                      background: "#505050"
                - component: Label
                  config:
                    text: "=props.name === undefined ? 'FLOORPLAN' : props.name"
                    style:
                      position: absolute
                      left: 12px
                      top: 3px
                      fontSize: 25px
                      fontWeight: 300
                      text-transform: uppercase
                      color: "#A1A1A1"
                - component: f7-icon
                  config:
                    visible: =!props.hideBTN
                    f7: gear_alt_fill
                    size: 27
                    style:
                      position: absolute
                      left: 705px
                      top: 8px
                      color: "#A1A1A1"
                - component: oh-button
                  config:
                    visible: =!props.hideBTN
                    action: navigate
                    actionPage: =props.targetPage
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 748px
                      height: 45px
                      background: transparent
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    text: Balcony
                    style:
                      position: absolute
                      left: 50px
                      top: 127px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 60px
                      height: 80px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    text: Kitchen
                    style:
                      position: absolute
                      left: 110px
                      top: 127px
                      --f7-button-bg-color: =((items.KI_AQI.state <= 50) ? '#177245':(items.KI_AQI.state <= 100) ? '#C4A705':(items.KI_AQI.state <= 150) ? '#C96112':(items.KI_AQI.state <= 200) ? '#C1301C':(items.KI_AQI.state <= 300) ? '#4B2882':(items.KI_AQI.state >= 301) ? 'black':'white')
                      color: "#A1A1A1"
                      width: 173px
                      height: 94px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    text: Toilet
                    style:
                      position: absolute
                      left: 110px
                      top: 221px
                      --f7-button-bg-color: =((items.TO_AQI.state <= 50) ? '#177245':(items.TO_AQI.state <= 100) ? '#C4A705':(items.TO_AQI.state <= 150) ? '#C96112':(items.TO_AQI.state <= 200) ? '#C1301C':(items.TO_AQI.state <= 300) ? '#4B2882':(items.TO_AQI.state >= 301) ? 'black':'white')
                      color: "#A1A1A1"
                      width: 82px
                      height: 47px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    text: Hall3
                    style:
                      position: absolute
                      left: 192px
                      top: 221px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 92px
                      height: 47px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    text: Hall1
                    style:
                      position: absolute
                      left: 283px
                      top: 127px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 90px
                      height: 142px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    text: Hall2
                    style:
                      position: absolute
                      left: 372px
                      top: 70px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 62px
                      height: 92px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    text: Office
                    style:
                      position: absolute
                      left: 433px
                      top: 70px
                      --f7-button-bg-color: =((items.OF_AQI.state <= 50) ? '#177245':(items.OF_AQI.state <= 100) ? '#C4A705':(items.OF_AQI.state <= 150) ? '#C96112':(items.OF_AQI.state <= 200) ? '#C1301C':(items.OF_AQI.state <= 300) ? '#4B2882':(items.OF_AQI.state >= 301) ? 'black':'white')
                      color: "#A1A1A1"
                      width: 208px
                      height: 92px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    text: Dining
                    style:
                      position: absolute
                      left: 372px
                      top: 162px
                      --f7-button-bg-color: =((items.LI_AQI.state <= 50) ? '#177245':(items.LI_AQI.state <= 100) ? '#C4A705':(items.LI_AQI.state <= 150) ? '#C96112':(items.LI_AQI.state <= 200) ? '#C1301C':(items.LI_AQI.state <= 300) ? '#4B2882':(items.LI_AQI.state >= 301) ? 'black':'white')
                      color: "#A1A1A1"
                      width: 269px
                      height: 133px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    text: Living
                    style:
                      position: absolute
                      left: 372px
                      top: 295px
                      --f7-button-bg-color: =((items.LI_AQI.state <= 50) ? '#177245':(items.LI_AQI.state <= 100) ? '#C4A705':(items.LI_AQI.state <= 150) ? '#C96112':(items.LI_AQI.state <= 200) ? '#C1301C':(items.LI_AQI.state <= 300) ? '#4B2882':(items.LI_AQI.state >= 301) ? 'black':'white')
                      color: "#A1A1A1"
                      width: 269px
                      height: 155px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    text: Bedroom
                    style:
                      position: absolute
                      left: 110px
                      top: 331px
                      --f7-button-bg-color: =((items.BE_AQI.state <= 50) ? '#177245':(items.BE_AQI.state <= 100) ? '#C4A705':(items.BE_AQI.state <= 150) ? '#C96112':(items.BE_AQI.state <= 200) ? '#C1301C':(items.BE_AQI.state <= 300) ? '#4B2882':(items.BE_AQI.state >= 301) ? 'black':'white')
                      color: "#A1A1A1"
                      width: 262px
                      height: 119px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    text: Bathroom
                    style:
                      position: absolute
                      left: 110px
                      top: 268px
                      --f7-button-bg-color: =((items.BA_AQI.state <= 50) ? '#177245':(items.BA_AQI.state <= 100) ? '#C4A705':(items.BA_AQI.state <= 150) ? '#C96112':(items.BA_AQI.state <= 200) ? '#C1301C':(items.BA_AQI.state <= 300) ? '#4B2882':(items.BA_AQI.state >= 301) ? 'black':'white')
                      color: "#A1A1A1"
                      width: 173px
                      height: 64px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    text: Hall4
                    style:
                      position: absolute
                      left: 282px
                      top: 268px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 90px
                      height: 64px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    text: Balcony
                    style:
                      position: absolute
                      left: 641px
                      top: 155px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 59px
                      height: 145px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center

1 Like

Hmm, guess the in-efficiency of the programming was evident by the YAML files being so long that I had to split things up in different posts… :smiley:

Overview page. Created some micro-interactions on the left side of the widget showing on or off based on the state of the lights / TV. The thermometer shows blue, green, yellow or red based on the temperature, in the future I want to implement the ranges for that with properties.

YAML: Area menu
uid: w_TBL_Menu_Area
tags: []
props:
  parameters:
    - context: name
      description: Name of location (e.g. Living area or Office)
      label: Name
      name: name
      required: false
    - context: name
      description: Group (Overview / Light / Environment / Media / Security)
      label: Group
      name: group
      required: false
    - context: page
      label: Page to navigate to (Home button)
      name: homePage
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Overview)
      name: targetPage1
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Light)
      name: targetPage2
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Environment)
      name: targetPage3
      required: false
      type: TEXT
    - context: page
      label: Page to navigate to (Media)
      name: targetPage4
      required: false
      type: TEXT
    - context: switch
      label: Hide Media button
      name: hideBTNmedia
      required: false
      type: BOOLEAN
    - context: page
      label: Page to navigate to (Security)
      name: targetPage5
      required: false
      type: TEXT
    - context: switch
      label: Hide Security button
      name: hideBTNsecurity
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Apr 14, 2021, 1:26:54 PM
component: f7-card
config:
  style:
    - width: 748px
    - height: 148px
    - border-radius: 15px
    - background-color: "#353535"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    icon-f7: house_fill
                    icon-size: 100
                    action: navigate
                    actionPage: =props.homePage
                    text: =props.name1
                    style:
                      position: absolute
                      left: 12px
                      top: 10px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 125px
                      height: 125px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    text: "=props.name === undefined ? 'Location' : props.name"
                    style:
                      position: absolute
                      left: 155px
                      top: 1px
                      fontSize: 42px
                      fontWeight: 400
                      color: "#A1A1A1"
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    style:
                      position: absolute
                      left: 655px
                      top: 14px
                      --f7-button-bg-color: "#505050"
                      width: 80px
                      height: 50px
                - component: f7-icon
                  config:
                    visible: '=(items.HOME_Status.state === "OK") ? true : false'
                    f7: circle_fill
                    size: 35
                    style:
                      position: absolute
                      left: 680px
                      top: 20px
                      color: white
                - component: f7-icon
                  config:
                    visible: '=(items.HOME_Status.state === "OK") ? true : false'
                    f7: checkmark_circle_fill
                    size: 40
                    style:
                      position: absolute
                      left: 677px
                      top: 18px
                      color: "#177245"
                - component: f7-icon
                  config:
                    visible: '=(items.HOME_Status.state === "WARNING") ? true : false'
                    f7: circle_fill
                    size: 35
                    style:
                      position: absolute
                      left: 680px
                      top: 20px
                      color: white
                - component: f7-icon
                  config:
                    visible: '=(items.HOME_Status.state === "WARNING") ? true : false'
                    f7: bell_circle_fill
                    size: 40
                    style:
                      position: absolute
                      left: 677px
                      top: 18px
                      color: "#C96112"
                - component: f7-icon
                  config:
                    visible: '=(items.HOME_Status.state === "ALARM") ? true : false'
                    f7: triangle_fill
                    size: 35
                    style:
                      position: absolute
                      left: 680px
                      top: 20px
                      color: white
                - component: f7-icon
                  config:
                    visible: '=(items.HOME_Status.state === "ALARM") ? true : false'
                    f7: exclamationmark_triangle_fill
                    size: 40
                    style:
                      position: absolute
                      left: 677px
                      top: 18px
                      color: "#C1301C"
                - component: oh-button
                  config:
                    action: popup
                    actionModal: widget:w_TBL_Status
                    style:
                      position: absolute
                      left: 655px
                      top: 14px
                      --f7-button-bg-color: transparent
                      width: 80px
                      height: 50px
                - component: oh-button
                  config:
                    action: navigate
                    actionPage: =props.targetPage6
                    icon-f7: gear_alt_fill
                    icon-size: 35
                    style:
                      position: absolute
                      left: 655px
                      top: 75px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 60px
                      fontSize: 35px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    icon-f7: eye_fill
                    icon-size: 35
                    action: navigate
                    actionPage: =props.targetPage1
                    style:
                      position: absolute
                      left: 155px
                      top: 75px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    visible: '=(props.group === "Overview") ? true : false'
                    style:
                      position: absolute
                      left: 155px
                      top: 130px
                      --f7-button-bg-color: "#A1A1A1"
                      width: 80px
                      height: 5px
                - component: oh-button
                  config:
                    icon-f7: lightbulb_fill
                    icon-size: 35
                    action: navigate
                    actionPage: =props.targetPage2
                    style:
                      position: absolute
                      left: 255px
                      top: 75px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    visible: '=(props.group === "Light") ? true : false'
                    style:
                      position: absolute
                      left: 255px
                      top: 130px
                      --f7-button-bg-color: "#A1A1A1"
                      width: 80px
                      height: 5px
                - component: oh-button
                  config:
                    icon-f7: tree_fill
                    icon-size: 35
                    action: navigate
                    actionPage: =props.targetPage3
                    style:
                      position: absolute
                      left: 355px
                      top: 75px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    visible: '=(props.group === "Environment") ? true : false'
                    style:
                      position: absolute
                      left: 355px
                      top: 130px
                      --f7-button-bg-color: "#A1A1A1"
                      width: 80px
                      height: 5px
                - component: oh-button
                  config:
                    visible: =!props.hideBTNmedia
                    icon-f7: film
                    icon-size: 35
                    action: navigate
                    actionPage: =props.targetPage4
                    style:
                      position: absolute
                      left: 455px
                      top: 75px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    visible: '=(props.group === "Media") ? true : false'
                    style:
                      position: absolute
                      left: 455px
                      top: 130px
                      --f7-button-bg-color: "#A1A1A1"
                      width: 80px
                      height: 5px
                - component: oh-button
                  config:
                    visible: =!props.hideBTNsecurity
                    action: navigate
                    actionPage: =props.targetPage5
                    icon-f7: lock_fill
                    icon-size: 35
                    style:
                      position: absolute
                      left: 555px
                      top: 75px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 80px
                      height: 50px
                      fontSize: 35px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    visible: '=(props.group === "Security") ? true : false'
                    style:
                      position: absolute
                      left: 555px
                      top: 130px
                      --f7-button-bg-color: "#A1A1A1"
                      width: 80px
                      height: 5px

YAML: Environment overview
uid: w_TBL_Env_Overview
tags: []
props:
  parameters:
    - context: name
      description: Name of the card
      label: Name
      name: name
      required: false
    - context: item
      description: Room to display (e.g. OF or LI)
      label: Room
      name: room
      required: false
    - context: page
      label: Page linked to "More" button
      name: targetPage
      required: false
      type: TEXT
    - context: switch
      label: Hide "More" button
      name: hideBTN
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Apr 13, 2021, 4:52:50 PM
component: f7-card
config:
  style:
    - width: 365px
    - height: 210px
    - border-radius: 15px
    - background-color: "#353535"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 365px
                      height: 42px
                      background: "#505050"
                - component: Label
                  config:
                    text: "=props.name === undefined ? 'ENVIRONMENT' : props.name"
                    style:
                      position: absolute
                      left: 12px
                      top: 3px
                      fontSize: 25px
                      fontWeight: 300
                      text-transform: uppercase
                      color: "#A1A1A1"
                - component: f7-icon
                  config:
                    visible: =!props.hideBTN
                    f7: ellipsis
                    size: 30
                    style:
                      position: absolute
                      left: 320px
                      top: 6px
                      color: "#A1A1A1"
                - component: oh-button
                  config:
                    visible: =!props.hideBTN
                    action: navigate
                    actionPage: =props.targetPage
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 365px
                      height: 45px
                      background: transparent
          - component: f7-row
            slots:
              default:
                - component: oh-image
                  config:
                    url: /static/card_background/thermo-half-base.png
                    style:
                      position: absolute
                      left: 0px
                      bottom: -161px
                      width: 50px
                      height: 140px
                - component: oh-image
                  config:
                    url: /static/card_background/thermo-below15.png
                    visible: "=(items[props.room + '_Temperature'].state > 5) ? true : false"
                    style:
                      position: absolute
                      left: 0px
                      bottom: -145px
                      width: 19px
                - component: oh-image
                  config:
                    url: /static/card_background/thermo-below20.png
                    visible: "=(items[props.room + '_Temperature'].state > 15) ? true : false"
                    style:
                      position: absolute
                      left: 0px
                      bottom: -145px
                      width: 19px
                - component: oh-image
                  config:
                    url: /static/card_background/thermo-below25.png
                    visible: "=(items[props.room + '_Temperature'].state > 20) ? true : false"
                    style:
                      position: absolute
                      left: 0px
                      bottom: -145px
                      width: 19px
                - component: oh-image
                  config:
                    url: /static/card_background/thermo-below27.png
                    visible: "=(items[props.room + '_Temperature'].state > 25) ? true : false"
                    style:
                      position: absolute
                      left: 0px
                      bottom: -145px
                      width: 19px
                - component: oh-image
                  config:
                    url: /static/card_background/thermo-below32.png
                    visible: "=(items[props.room + '_Temperature'].state > 27) ? true : false"
                    style:
                      position: absolute
                      left: 0px
                      bottom: -145px
                      width: 19px
                - component: oh-image
                  config:
                    url: /static/card_background/thermo-over32.png
                    visible: "=(items[props.room + '_Temperature'].state > 32) ? true : false"
                    style:
                      position: absolute
                      left: 0px
                      bottom: -145px
                      width: 19px
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    text: =items[props.room + '_Temperature'].state
                    style:
                      position: absolute
                      left: 98px
                      top: 29px
                      fontSize: 85px
                      fontWeight: 300
                      color: white
                - component: Label
                  config:
                    text: °C
                    style:
                      position: absolute
                      left: 275px
                      top: 58px
                      fontSize: 55px
                      fontWeight: 100
                      color: "#A1A1A1"
          - component: f7-row
            slots:
              default:
                - component: f7-row
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: drop
                          size: 30
                          style:
                            position: absolute
                            left: 75px
                            top: 160px
                            color: "#A1A1A1"
                      - component: Label
                        config:
                          text: =items[props.room + '_Humidity'].state
                          style:
                            position: absolute
                            left: 117px
                            top: 144px
                            fontSize: 40px
                            fontWeight: 200
                            color: white
                      - component: Label
                        config:
                          text: "%"
                          style:
                            position: absolute
                            left: 201px
                            top: 155px
                            fontSize: 28px
                            fontWeight: 100
                            color: "#A1A1A1"
                - component: f7-chip
                  config:
                    text: =items[props.room + '_AQI'].state
                    class:
                      - justify-content-center
                    style:
                      width: 80px
                      height: 40px
                      position: absolute
                      left: 255px
                      top: 152px
                      fontSize: 25px
                      --f7-chip-bg-color: =((items[props.room + '_AQI'].state <= 50) ? '#177245':(items[props.room + '_AQI'].state <= 100) ? '#C4A705':(items[props.room + '_AQI'].state <= 150) ? '#C96112':(items[props.room + '_AQI'].state <= 200) ? '#C1301C':(items[props.room + '_AQI'].state <= 300) ? '#4B2882':(items[props.room + '_AQI'].state >= 301) ? 'black':'white')
                      --f7-chip-text-color: =((items[props.room + '_AQI'].state >= 201) ? 'white':'black')

YAML: Light overview
uid: w_TBL_Light_LIVING
tags: []
props:
  parameters:
    - context: name
      description: Name of the card
      label: Name
      name: name
      required: false
    - context: item
      description: Item to control 1 (LI_MainLight)
      label: Item 1
      name: item1
      required: false
    - context: item
      description: Item to control 2 (DI_MainLight)
      label: Item 2
      name: item2
      required: false
    - context: item
      description: Item to control 3 (DI_CabinetLight)
      label: Item 3
      name: item3
      required: false
    - context: item
      description: Item to control 4 (LI_PLG1)
      label: Item 4
      name: item4
      required: false
    - context: item
      description: Item to control 5 (LI_AMBI)
      label: Item 5
      name: item5
      required: false
    - context: page
      label: Page linked to "More" button
      name: targetPage
      required: false
      type: TEXT
    - context: switch
      label: Hide "More" button
      name: hideBTN
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Apr 13, 2021, 2:19:22 PM
component: f7-card
config:
  style:
    - width: 748px
    - height: 210px
    - border-radius: 15px
    - background-color: "#353535"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 748px
                      height: 42px
                      background: "#505050"
                - component: Label
                  config:
                    text: "=props.name === undefined ? 'LIGHTING' : props.name"
                    style:
                      position: absolute
                      left: 12px
                      top: 3px
                      fontSize: 25px
                      fontWeight: 300
                      text-transform: uppercase
                      color: "#A1A1A1"
                - component: f7-icon
                  config:
                    visible: =!props.hideBTN
                    f7: ellipsis
                    size: 30
                    style:
                      position: absolute
                      left: 705px
                      top: 6px
                      color: "#A1A1A1"
                - component: oh-button
                  config:
                    visible: =!props.hideBTN
                    action: navigate
                    actionPage: =props.targetPage
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 748px
                      height: 45px
                      background: transparent
          - component: f7-row
            slots:
              default:
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-half-ON.png
                    visible: '=(items.g_LI_Lights.state === "ON") ? true : false'
                    style:
                      position: absolute
                      left: 0px
                      top: 59px
                      width: 46px
                      height: 129px
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-half-OFF.png
                    visible: '=(items.g_LI_Lights.state === "OFF") ? true : false'
                    style:
                      position: absolute
                      left: 0px
                      top: 59px
                      width: 46px
                      height: 129px
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    text: Living
                    style:
                      position: absolute
                      left: 87px
                      top: 46px
                      fontSize: 28px
                      fontWeight: 300
                      color: "#A1A1A1"
                - component: oh-toggle
                  config:
                    item: =props.item1 + '_Power'
                    style:
                      position: absolute
                      left: 83px
                      top: 97px
                      --f7-toggle-width: 75px
                      --f7-toggle-height: 40px
                      --f7-toggle-handle-color: "#A1A1A1"
                      --f7-toggle-active-color: rgb(60, 179, 113,0.5)
                      --f7-toggle-inactive-color: "#505050"
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-ON.png
                    visible: '=(items.LI_MainLight_Power.state === "ON") ? true : false'
                    style:
                      position: absolute
                      left: 106px
                      top: 154px
                      width: 28px
                      height: 40px
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-OFF.png
                    visible: '=(items.LI_MainLight_Power.state === "OFF") ? true : false'
                    style:
                      position: absolute
                      left: 106px
                      top: 154px
                      width: 28px
                      height: 40px
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    text: Dining
                    style:
                      position: absolute
                      left: 222px
                      top: 46px
                      fontSize: 28px
                      fontWeight: 300
                      color: "#A1A1A1"
                - component: oh-toggle
                  config:
                    item: =props.item2 + '_Brightness'
                    style:
                      position: absolute
                      left: 222px
                      top: 97px
                      --f7-toggle-width: 75px
                      --f7-toggle-height: 40px
                      --f7-toggle-handle-color: "#A1A1A1"
                      --f7-toggle-active-color: rgb(60, 179, 113,0.5)
                      --f7-toggle-inactive-color: "#505050"
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-OFF.png
                    visible: "=(items.DI_MainLight_Brightness.state = 0) ? true : false"
                    style:
                      position: absolute
                      left: 245px
                      top: 154px
                      width: 28px
                      height: 40px
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-ON.png
                    visible: "=(items.DI_MainLight_Brightness.state > 0) ? true : false"
                    style:
                      position: absolute
                      left: 245px
                      top: 154px
                      width: 28px
                      height: 40px
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    text: Cabinet
                    style:
                      position: absolute
                      left: 345px
                      top: 46px
                      fontSize: 28px
                      fontWeight: 300
                      color: "#A1A1A1"
                - component: oh-toggle
                  config:
                    item: =props.item3 + '_Power'
                    style:
                      position: absolute
                      left: 353px
                      top: 97px
                      --f7-toggle-width: 75px
                      --f7-toggle-height: 40px
                      --f7-toggle-handle-color: "#A1A1A1"
                      --f7-toggle-active-color: rgb(60, 179, 113,0.5)
                      --f7-toggle-inactive-color: "#505050"
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-ON.png
                    visible: '=(items.DI_CabinetLight_Power.state === "ON") ? true : false'
                    style:
                      position: absolute
                      left: 376px
                      top: 154px
                      width: 28px
                      height: 40px
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-OFF.png
                    visible: '=(items.DI_CabinetLight_Power.state === "OFF") ? true : false'
                    style:
                      position: absolute
                      left: 376px
                      top: 154px
                      width: 28px
                      height: 40px
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    text: Tree
                    style:
                      position: absolute
                      left: 493px
                      top: 46px
                      fontSize: 28px
                      fontWeight: 300
                      color: "#A1A1A1"
                - component: oh-toggle
                  config:
                    item: =props.item4 + '_Power'
                    style:
                      position: absolute
                      left: 480px
                      top: 97px
                      --f7-toggle-width: 75px
                      --f7-toggle-height: 40px
                      --f7-toggle-handle-color: "#A1A1A1"
                      --f7-toggle-active-color: rgb(60, 179, 113,0.5)
                      --f7-toggle-inactive-color: "#505050"
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-ON.png
                    visible: '=(items.DI_TreeLight_Power.state === "ON") ? true : false'
                    style:
                      position: absolute
                      left: 503px
                      top: 154px
                      width: 28px
                      height: 40px
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-OFF.png
                    visible: '=(items.DI_TreeLight_Power.state === "OFF") ? true : false'
                    style:
                      position: absolute
                      left: 503px
                      top: 154px
                      width: 28px
                      height: 40px
          - component: f7-row
            slots:
              default:
                - component: Label
                  config:
                    text: AMBI
                    style:
                      position: absolute
                      left: 610px
                      top: 46px
                      fontSize: 28px
                      fontWeight: 300
                      color: "#A1A1A1"
                - component: oh-toggle
                  config:
                    item: =props.item5 + '_Enabled'
                    style:
                      position: absolute
                      left: 604px
                      top: 97px
                      --f7-toggle-width: 75px
                      --f7-toggle-height: 40px
                      --f7-toggle-handle-color: "#A1A1A1"
                      --f7-toggle-active-color: rgb(60, 179, 113,0.5)
                      --f7-toggle-inactive-color: "#505050"
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-ON.png
                    visible: '=(items.LI_AMBILight_Enabled.state === "ON") ? true : false'
                    style:
                      position: absolute
                      left: 629px
                      top: 154px
                      width: 28px
                      height: 40px
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-OFF.png
                    visible: '=(items.LI_AMBILight_Enabled.state === "OFF") ? true : false'
                    style:
                      position: absolute
                      left: 629px
                      top: 154px
                      width: 28px
                      height: 40px

1 Like

Lights page. Different widgets for On/Off, Dimmer and Color lights. For the Color lights I didn’t implement the color picker yet. The AMBI light is a Hyperion setup on a RPI. The AQI light is an ESP32 that receives the AQI information and settings over MQTT. Can be switched between showing AQI and a normal colored light.

YAML: Light color
uid: w_TBL_Light_Color
tags: []
props:
  parameters:
    - context: name
      description: Name of the card
      label: Name
      name: name
      required: false
    - context: item
      description: Item to control - Power (e.g. OF_LEDLight_Power)
      label: Item
      name: item1
      required: false
    - context: item
      description: Item to control - Brightness (e.g. OF_LEDLight_Brightness)
      label: Item
      name: item2
      required: false
    - context: page
      label: Page linked to "Config" button
      name: targetPage
      required: false
      type: TEXT
    - context: switch
      label: Hide "Config" button
      name: hideBTN
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Apr 11, 2021, 1:49:59 AM
component: f7-card
config:
  style:
    - width: 365px
    - height: 210px
    - border-radius: 15px
    - background-color: "#353535"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 365px
                      height: 42px
                      background: "#505050"
                - component: Label
                  config:
                    text: "=props.name === undefined ? 'LIGHT' : props.name"
                    style:
                      position: absolute
                      left: 12px
                      top: 3px
                      fontSize: 25px
                      fontWeight: 300
                      text-transform: uppercase
                      color: "#A1A1A1"
                - component: f7-icon
                  config:
                    visible: =!props.hideBTN
                    f7: gear_alt_fill
                    size: 27
                    style:
                      position: absolute
                      left: 322px
                      top: 8px
                      color: "#A1A1A1"
                - component: oh-button
                  config:
                    visible: =!props.hideBTN
                    action: navigate
                    actionPage: =props.targetPage
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 365px
                      height: 45px
                      background: transparent
          - component: f7-row
            slots:
              default:
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-half-ON.png
                    visible: '=(items[props.item1].state === "ON") ? true : false'
                    style:
                      position: absolute
                      left: 0px
                      top: 50px
                      width: 35px
                      height: 95px
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-half-OFF.png
                    visible: '=(items[props.item1].state === "OFF") ? true : false'
                    style:
                      position: absolute
                      left: 0px
                      top: 50px
                      width: 35px
                      height: 95px
                - component: oh-toggle
                  config:
                    item: =props.item1
                    style:
                      position: absolute
                      left: 82px
                      top: 82px
                      --f7-toggle-width: 85px
                      --f7-toggle-height: 45px
                      --f7-toggle-handle-color: "#A1A1A1"
                      --f7-toggle-active-color: rgb(60, 179, 113,0.5)
                      --f7-toggle-inactive-color: "#505050"
                - component: oh-button
                  config:
                    action: command
                    actionItem: =props.room + '_Color'
                    actionCommand: Select color
                    style:
                      position: absolute
                      left: 225px
                      top: 73px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 60px
                      height: 60px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-icon
                  config:
                    icon: colorpicker
                    width: 40
                    style:
                      position: absolute
                      left: 235px
                      top: 82px
          - component: f7-row
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: sun_min
                    size: 25
                    style:
                      position: absolute
                      left: 16px
                      top: 162px
                      color: "#A1A1A1"
                - component: oh-slider
                  config:
                    color: white
                    item: =props.item2
                    style:
                      height: 60px
                      width: 240px
                      position: absolute
                      left: 61px
                      top: 145px
                      --f7-range-bar-size: 25px
                      --f7-range-bar-border-radius: 10px
                      --f7-range-knob-size: 30px
                      --f7-range-knob-color: "#A1A1A1"
                      --f7-range-bar-bg-color: "#505050"
                      --f7-range-bar-active-bg-color: linear-gradient(to right, rgb(60, 179, 113,0.1), rgb(23, 114, 69))
                      --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                - component: f7-icon
                  config:
                    f7: sun_max
                    size: 30
                    style:
                      position: absolute
                      left: 321px
                      top: 160px
                      color: "#A1A1A1"

YAML: Light AMBI
uid: w_TBL_Light_AMBI
tags: []
props:
  parameters:
    - context: name
      description: Name of the card
      label: Name
      name: name
      required: false
    - context: room
      description: Room to display (e.g. OF or LI)
      label: Room
      name: room
      required: false
    - context: page
      label: Page linked to "Config" button
      name: targetPage
      required: false
      type: TEXT
    - context: switch
      label: Hide "Config" button
      name: hideBTN
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Apr 11, 2021, 1:42:59 AM
component: f7-card
config:
  style:
    - width: 491px
    - height: 210px
    - border-radius: 15px
    - background-color: "#353535"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 491px
                      height: 42px
                      background: "#505050"
                - component: Label
                  config:
                    text: "=props.name === undefined ? 'AMBI LIGHT' : props.name"
                    style:
                      position: absolute
                      left: 12px
                      top: 3px
                      fontSize: 25px
                      fontWeight: 300
                      text-transform: uppercase
                      color: "#A1A1A1"
                - component: f7-icon
                  config:
                    visible: =!props.hideBTN
                    f7: gear_alt_fill
                    size: 27
                    style:
                      position: absolute
                      left: 448px
                      top: 8px
                      color: "#A1A1A1"
                - component: oh-button
                  config:
                    visible: =!props.hideBTN
                    action: navigate
                    actionPage: =props.targetPage
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 365px
                      height: 45px
                      background: transparent
          - component: f7-row
            slots:
              default:
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-half-ON.png
                    visible: '=(items.LI_AMBILight_Enabled.state === "ON") ? true : false'
                    style:
                      position: absolute
                      left: 0px
                      top: 50px
                      width: 35px
                      height: 95px
                - component: oh-image
                  config:
                    url: /static/card_background/lightbulb-half-OFF.png
                    visible: '=(items.LI_AMBILight_Enabled.state === "OFF") ? true : false'
                    style:
                      position: absolute
                      left: 0px
                      top: 50px
                      width: 35px
                      height: 95px
                - component: oh-toggle
                  config:
                    item: =props.room + '_AMBILight_Enabled'
                    style:
                      position: absolute
                      left: 82px
                      top: 82px
                      --f7-toggle-width: 85px
                      --f7-toggle-height: 45px
                      --f7-toggle-handle-color: "#A1A1A1"
                      --f7-toggle-active-color: rgb(60, 179, 113,0.5)
                      --f7-toggle-inactive-color: "#505050"
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    icon-f7: film
                    icon-size: 40
                    large: true
                    action: command
                    actionItem: =props.room + '_AMBILight_ClearPriority'
                    actionCommand: 50
                    style:
                      position: absolute
                      left: 225px
                      top: 68px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 60px
                      height: 60px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    style:
                      position: absolute
                      left: 225px
                      top: 134px
                      --f7-button-bg-color: "#A1A1A1"
                      width: 60px
                      height: 5px
                - component: oh-button
                  config:
                    icon-f7: circle_grid_hex_fill
                    icon-size: 40
                    large: true
                    action: command
                    actionItem: =props.room + '_AMBILight_Effect'
                    actionCommand: Double swirl
                    style:
                      position: absolute
                      left: 300px
                      top: 68px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 60px
                      height: 60px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-button
                  config:
                    style:
                      position: absolute
                      left: 300px
                      top: 134px
                      --f7-button-bg-color: "#A1A1A1"
                      width: 60px
                      height: 5px
                - component: oh-button
                  config:
                    action: command
                    actionItem: =props.room + '_AMBILight_Effect'
                    actionCommand: Select color
                    style:
                      position: absolute
                      left: 375px
                      top: 68px
                      --f7-button-bg-color: "#505050"
                      color: "#A1A1A1"
                      width: 60px
                      height: 60px
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                - component: oh-icon
                  config:
                    icon: colorpicker
                    width: 40
                    style:
                      position: absolute
                      left: 384px
                      top: 78px
          - component: f7-row
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: sun_min
                    size: 25
                    style:
                      position: absolute
                      left: 16px
                      top: 162px
                      color: "#A1A1A1"
                - component: oh-slider
                  config:
                    color: white
                    item: =props.room + '_AMBILight_Brightness'
                    style:
                      height: 60px
                      width: 350px
                      position: absolute
                      left: 60px
                      top: 145px
                      --f7-range-bar-size: 25px
                      --f7-range-bar-border-radius: 10px
                      --f7-range-knob-size: 30px
                      --f7-range-knob-color: "#A1A1A1"
                      --f7-range-bar-bg-color: "#505050"
                      --f7-range-bar-active-bg-color: linear-gradient(to right, rgb(60, 179, 113,0.1), rgb(23, 114, 69))
                      --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                - component: f7-icon
                  config:
                    f7: sun_max
                    size: 30
                    style:
                      position: absolute
                      left: 431px
                      top: 160px
                      color: "#A1A1A1"


Environment page. Using Tinkerforge modules with MQTT for indoor and outdoor. The AQI widget also visualizes with the arrow on the right (last night I had to open the windows… :smiley:). You can see the charts from Grafana for a measurement by clicking on the little icon in the top right of the widget.

YAML: Environment - Temperature
uid: w_TBL_Env_Temperature
tags: []
props:
  parameters:
    - context: name
      description: Name of the card
      label: Name
      name: name
      required: false
    - context: item
      description: Room to display (e.g. OF or LI)
      label: Room
      name: room
      required: false
    - context: page
      label: Page linked to "Graph" button
      name: targetPage
      required: false
      type: TEXT
    - context: switch
      label: Hide "Graph" button
      name: hideBTN
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Apr 9, 2021, 12:17:24 PM
component: f7-card
config:
  style:
    - width: 365px
    - height: 210px
    - border-radius: 15px
    - background-color: "#353535"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 365px
                      height: 42px
                      background: "#505050"
                - component: Label
                  config:
                    text: "=props.name === undefined ? 'TEMPERATURE' : props.name"
                    style:
                      position: absolute
                      left: 12px
                      top: 3px
                      fontSize: 25px
                      fontWeight: 300
                      text-transform: uppercase
                      color: "#A1A1A1"
                - component: f7-icon
                  config:
                    visible: =!props.hideBTN
                    f7: chart_bar_alt_fill
                    size: 30
                    style:
                      position: absolute
                      left: 320px
                      top: 6px
                      color: "#A1A1A1"
                - component: oh-button
                  config:
                    visible: =!props.hideBTN
                    action: navigate
                    actionPage: =props.targetPage
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 365px
                      height: 45px
                      background: transparent
          - component: f7-row
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: thermometer
                    size: 60
                    style:
                      position: absolute
                      left: 15px
                      top: 59px
                      color: "#A1A1A1"
                - component: Label
                  config:
                    text: =items[props.room + '_Temperature'].state
                    pattern: "[%.1f]"
                    style:
                      position: absolute
                      left: 115px
                      top: 40px
                      fontSize: 65px
                      fontWeight: 300
                      color: white
                - component: Label
                  config:
                    text: °C
                    style:
                      position: absolute
                      left: 260px
                      top: 58px
                      fontSize: 45px
                      fontWeight: 100
                      color: "#A1A1A1"
          - component: f7-row
            slots:
              default:
                - component: oh-trend
                  config:
                    trendItem: =[props.room + '_Temperature']
                    trendGradient:
                      - "#365175"
                      - "#365175"
                    style:
                      position: absolute
                      left: 4px
                      top: 75px
                      width: 355px
                      height: 185px
                      strokeWidth: 3px

YAML: Environment - AQI
uid: w_TBL_Env_AQI
tags: []
props:
  parameters:
    - context: name
      description: Name of the card
      label: Name
      name: name
      required: false
    - context: item
      description: Room to display (e.g. OF or LI)
      label: Room
      name: room
      required: false
    - context: page
      label: Page linked to "Graph" button
      name: targetPage
      required: false
      type: TEXT
    - context: switch
      label: Hide "Graph" button
      name: hideBTN
      required: false
      type: BOOLEAN
  parameterGroups: []
timestamp: Apr 13, 2021, 5:53:01 PM
component: f7-card
config:
  style:
    - width: 748px
    - height: 265px
    - border-radius: 15px
    - background-color: "#353535"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: oh-button
                  config:
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 748px
                      height: 42px
                      background: "#505050"
                - component: Label
                  config:
                    text: "=props.name === undefined ? 'AIR QUALITY INDEX' : props.name"
                    style:
                      position: absolute
                      left: 12px
                      top: 3px
                      fontSize: 25px
                      fontWeight: 300
                      color: "#A1A1A1"
                - component: f7-icon
                  config:
                    visible: =!props.hideBTN
                    f7: chart_bar_alt_fill
                    size: 30
                    style:
                      position: absolute
                      left: 705px
                      top: 6px
                      color: "#A1A1A1"
                - component: oh-button
                  config:
                    visible: =!props.hideBTN
                    action: navigate
                    actionPage: =props.targetPage
                    style:
                      position: absolute
                      left: 0px
                      top: 0px
                      width: 748px
                      height: 45px
                      background: transparent
          - component: f7-row
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: tree
                    color: white
                    size: 55
                    style:
                      position: absolute
                      left: 24px
                      top: 62px
                      color: "#A1A1A1"
                - component: Label
                  config:
                    text: =items[props.room + '_AQI'].state
                    pattern: "[%.1f]"
                    style:
                      position: absolute
                      left: 180px
                      top: 45px
                      fontSize: 70px
                      fontWeight: 300
                      color: white
          - component: f7-row
            slots:
              default:
                - component: oh-trend
                  config:
                    trendItem: =[props.room + '_AQI']
                    trendGradient:
                      - "#365175"
                      - "#365175"
                    style:
                      position: absolute
                      left: 4px
                      top: 85px
                      width: 430px
                      height: 240px
                      strokeWidth: 3px
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-center
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    text: HAZARDOUS
                    style:
                      position: absolute
                      left: 480px
                      top: 63px
                      width: 185px
                      height: 31px
                      --f7-button-bg-color: "#000000"
                      color: white
                      fontSize: 20px
                      fontWeight: 300
                - component: oh-button
                  config:
                    text: VERY UNHEALTHY
                    style:
                      position: absolute
                      left: 480px
                      top: 93px
                      width: 185px
                      height: 31px
                      --f7-button-bg-color: "#4B2882"
                      color: white
                      fontSize: 20px
                      fontWeight: 300
                - component: oh-button
                  config:
                    text: UNHEALTHY
                    style:
                      position: absolute
                      left: 480px
                      top: 123px
                      width: 185px
                      height: 31px
                      --f7-button-bg-color: "#C1301C"
                      color: white
                      fontSize: 20px
                      fontWeight: 300
                - component: oh-button
                  config:
                    text: SENSITIVE
                    style:
                      position: absolute
                      left: 480px
                      top: 153px
                      width: 185px
                      height: 31px
                      --f7-button-bg-color: "#C96112"
                      color: white
                      fontSize: 20px
                      fontWeight: 300
                - component: oh-button
                  config:
                    text: MODERATE
                    style:
                      position: absolute
                      left: 480px
                      top: 183px
                      width: 185px
                      height: 31px
                      --f7-button-bg-color: "#C4A705"
                      color: white
                      fontSize: 20px
                      fontWeight: 300
                - component: oh-button
                  config:
                    text: GOOD
                    style:
                      position: absolute
                      left: 480px
                      top: 213px
                      width: 185px
                      height: 31px
                      --f7-button-bg-color: "#177245"
                      color: white
                      fontSize: 20px
                      fontWeight: 300
                - component: oh-button
                  config:
                    style:
                      position: absolute
                      left: 475px
                      top: 60px
                      width: 190px
                      height: 190px
                      --f7-button-bg-color: transparent
                - component: f7-icon
                  config:
                    f7: arrowtriangle_left_fill
                    size: 40
                    style:
                      position: absolute
                      left: 670px
                      top: =((items[props.room + '_AQI'].state <= 50) ? '207px' :(items[props.room + '_AQI'].state <= 100) ? '178px':(items[props.room + '_AQI'].state <= 150) ? '148px':(items[props.room + '_AQI'].state <= 200) ? '119px':(items[props.room + '_AQI'].state <= 300) ? '87px':(items[props.room + '_AQI'].state >= 301) ? '59px':'59px')
                      color: =((items[props.room + '_AQI'].state <= 50) ? '#177245':(items[props.room + '_AQI'].state <= 100) ? '#C4A705':(items[props.room + '_AQI'].state <= 150) ? '#C96112':(items[props.room + '_AQI'].state <= 200) ? '#C1301C':(items[props.room + '_AQI'].state <= 300) ? '#4B2882':(items[props.room + '_AQI'].state >= 301) ? 'black':'white')

YAML: Chart
uid: w_TBL_Chart_Double
tags: []
props:
  parameters:
    - context: name
      description: Title of the top graph
      label: Title - Top
      name: title1
      required: false
    - description: Grafana URL to show in the top frame
      label: Grafana URL - Top
      name: URL1
      required: true
      type: TEXT
    - context: name
      description: Title of the bottom graph
      label: Title - Bottom
      name: title2
      required: false
    - description: Grafana URL to show in the bottom frame
      label: Grafana URL - Bottom
      name: URL2
      required: true
      type: TEXT
    - description: Comma-separated list of options. Use value=label format (e.g. 1d=1 day) to provide a label different than the option. Minimum 1 entry required. The first entry is the default timerange.
      label: Time range options
      name: timerange
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Apr 9, 2021, 3:14:34 PM
component: f7-card-content
config:
  style:
    --f7-card-margin-horizontal: 0px
    --f7-card-margin-vertical: 3px
    --f7-card-content-padding-horizontal: 10px
    --f7-card-content-padding-vertical: 10px
    --f7-card-bg-color: "#353535"
slots:
  default:
    - component: oh-button
      config:
        text: =props.title1
        style:
          width: 747px
          height: 45px
          background: "#505050"
          fontSize: 28px
          fontWeight: 300
          color: "#A1A1A1"
        class:
          - display-flex
          - justify-content-left
          - align-items-center
    - component: oh-webframe-card
      config:
        title: =props.title
        borders: false
        noBorder: true
        outline: true
        src: =props.URL1.replace('{period}', vars.selectedPeriod || [props.timerange.split(',')[0].split('=')[0]])
        class:
          - display-block
    - component: oh-button
      config:
        text: =props.title2
        style:
          width: 747px
          height: 45px
          background: "#505050"
          fontSize: 28px
          fontWeight: 300
          color: "#A1A1A1"
        class:
          - display-flex
          - justify-content-left
          - align-items-center
    - component: oh-webframe-card
      config:
        title: =props.title
        borders: false
        noBorder: true
        outline: true
        src: =props.URL2.replace('{period}', vars.selectedPeriod || [props.timerange.split(',')[0].split('=')[0]])
        class:
          - display-block
    - component: oh-button
      config:
        style:
          width: 747px
          height: 5px
          background: "#000000"
    - component: f7-segmented
      config:
        round: false
        outline: false
        style:
          --f7-button-bg-color: "#505050"
          --f7-button-text-color: "#A1A1A1"
      slots:
        default:
          - component: oh-repeater
            config:
              sourceType: range
              for: size
              fragment: true
            slots:
              default:
                - component: oh-repeater
                  config:
                    fragment: true
                    for: period
                    in: =[props.timerange.split(",")[loop.size].split("=")[1]]
                  slots:
                    default:
                      - component: oh-button
                        config:
                          text: =loop.period
                          fill: "=(([props.timerange.split(',')[loop.size].split('=')[0]] == vars.selectedPeriod) || (props.timerange.split(',')[0].split('=')[1] === loop.period) && !vars.selectedPeriod) ? true : false"
                          round: false
                          outline: false
                          style:
                            height: 50px
                            --f7-button-font-size: 20px
                            --f7-button-font-weight: 500
                            --f7-button-border-radius: 5px
                            --f7-button-border-width: 1px
                            --f7-button-border-color: rgba(255,255,255,.15)
                            --f7-button-fill-bg-color: "#A1A1A1"
                            --f7-button-fill-text-color: "#353535"
                          class:
                            - display-flex
                            - justify-content-center
                            - align-items-center
                          action: variable
                          actionVariable: selectedPeriod
                          actionVariableValue: =props.timerange.split(",")[loop.size].split("=")[0]

3 Likes

@wars @chrismast it’s a loxone ipad wall mount and yes it’s powered.

For that, I drilled a hole in that place I assumed the electric pipes (very carefully, and turned off the fuses first ;), and then later with hammer and screwdriver) :slight_smile: and than installed a flush mounted USB power supply in the panel below. Then I pulled only the USB cable trough the electric pipe (see picture)

Flush mounted USB power supply: see here

1 Like

Hey @Integer ,

Thanks a lot for that.

Can you please also share even though some of them should be quite straight forward:

Cell_Card_1
Cell_Weather_1 (BTW - which weather service are you using?)
Cell_Garden_1
Cell_Settings_1

Thank you so much!

@maxmaximax: Here we go :slight_smile:

Simple Cell Card
image

uid: Cell_Card_1
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
    - label: Background Color
      name: bgcolor
      required: false
      type: TEXT
      description: rgba or HEX
    - context: item
      description: Item to control
      label: Item
      name: item
      required: false
      type: TEXT
    - label: Command to send
      name: command
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 15, 2021, 9:50:24 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: 100px
    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
              size: 18
              style:
                margin-right: 10px
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -15px
          left: 16px
          flex-direction: row
      slots:
        default:
          - 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: command
        actionItem: =props.item
        style:
          position: absolute
          top: 0
          left: 0
          height: 100px
          width: 100%
          actionPosition: center
        actionCommand: =props.command
        actionFeedback: Done!

Garden Widget
This is really specific, I have an Number-Item called “CurrentZone” which defines which zone of my garden is irrigated right know. It is showing the displayState of this item on the bottom of the card.
image

uid: Cell_Garden_1
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - label: Background Color
      name: bgcolor
      required: false
      type: TEXT
      description: rgba or HEX
    - context: item
      description: Item Soil Humidity
      label: Item
      name: item_soil_hum
      required: false
      type: TEXT
    - context: item
      description: Item Current Irrigation Zone
      label: Item
      name: item_zone
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 29, 2021, 2:57:46 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: 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: oh-icon
            config:
              icon: tree
              style:
                height: 18px
                margin-right: 5px
                filter: "='invert(' + (themeOptions.dark === 'dark' ? '1' : '0') + ')'"
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -15px
          left: 16px
          flex-direction: row
          width: 100%
        class:
          - text-align-center
      slots:
        default:
          - component: Label
            config:
              text: =items[props.item_soil_hum].displayState
              style:
                font-size: 18px
                font-weight: 400
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -42px
          left: 16px
          width: 100%
        class:
          - text-align-center
      slots:
        default:
          - component: f7-icon
            config:
              size: 22
              f7: drop
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -90px
          left: 16px
          width: 100%
        class:
          - text-align-center
      slots:
        default:
          - component: Label
            config:
              text: =items[props.item_zone].displayState
              style:
                font-size: 13px
                margin-top: 5px

ToDo: Analyzer of the Soil Humidity to be implemented, and a button to start irrigation manually.
The icon is also from flaticon: Tree - Flaticon

Settings
There is a small f7-chip located on the top which is visible when one of the battery powered devices battery is critical. Therefor you need a Groupitem with SUM aggregation of all LowBatterySwitchItems.
image

uid: Cell_Settings_1
tags: []
props:
  parameters:
    - label: Background Color
      name: bgcolor
      required: false
      type: TEXT
      description: rgba or HEX
    - label: Settingspage
      name: page
      required: false
      type: TEXT
      description: page which will be opened as popup
    - context: item
      description: Item Group of Battery Critical
      label: Item Group
      name: item_battery
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 23, 2021, 5:09:08 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: 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-chip
            config:
              iconF7: battery_25
              text: =items[props.item_battery].state
              iconSize: 16
              iconColor: red
              textColor: red
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
                font-weight: 700
              visible: "=items[props.item_battery].state > 0 ? true : false"
    - component: f7-block
      config:
        style:
          position: absolute
          top: 80px
          left: 20px
          width: 100%
        class:
          - text-align-center
      slots:
        default:
          - component: f7-icon
            config:
              f7: gear_alt
              size: 40
              style:
                margin-right: 10px
                opacity: 0.6
    - component: oh-link
      config:
        action: popup
        actionModal: ='page:' + props.page
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 150px
          width: 100%

Weather
Weather-service is OpenWeatherMap (I’ve used the items files here from the community): UI Widget: Weather - Add-ons / UIs - openHAB Community.
Find below the YAML code my items-code.

uid: Cell_Weather_1
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - label: Backgroundimage
      name: bgimage
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 12, 2021, 4:14:52 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: 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: cloud_sun
              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
          top: 60px
          left: 16px
          width: 100%
      slots:
        default:
          - component: f7-row
            config:
              class:
                - text-align-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Heute
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =dayjs().add(1,'day').startOf('day').format('dd')
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =dayjs().add(2,'day').startOf('day').format('dd')
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =dayjs().add(3,'day').startOf('day').format('dd')
                          style:
                            font-weight: 400
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =dayjs().add(4,'day').startOf('day').format('dd')
                          style:
                            font-weight: 400
                            margin-bottom: 8px
          - component: f7-row
            config:
              style:
                margin-top: 0px
              class:
                - text-align-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '01d') ? 'sun_max' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '01n') ? 'moon_stars' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '02d') ? 'cloud_sun' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '02n') ? 'cloud_moon' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '03d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '03n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '04d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '04n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '09d') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '09n') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '10d') ? 'cloud_sun_rain' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '10n') ? 'cloud_moon_rain' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '11d') ? 'cloud_sun_bolt' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '11n') ? 'cloud_moon_bolt' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '13d') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '13n') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '50d') ? 'cloud_fog' : (items.OneCallAPIweatherandforecast_ForecastToday_Iconid.state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '01d') ? 'sun_max' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '01n') ? 'moon_stars' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '02d') ? 'cloud_sun' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '02n') ? 'cloud_moon' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '03d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '03n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '04d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '04n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '09d') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '09n') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '10d') ? 'cloud_sun_rain' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '10n') ? 'cloud_moon_rain' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '11d') ? 'cloud_sun_bolt' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '11n') ? 'cloud_moon_bolt' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '13d') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '13n') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '50d') ? 'cloud_fog' : (items.OneCallAPIweatherandforecast_ForecastTomorrow_Iconid.state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '01d') ? 'sun_max' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '01n') ? 'moon_stars' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '02d') ? 'cloud_sun' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '02n') ? 'cloud_moon' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '03d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '03n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '04d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '04n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '09d') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '09n') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '10d') ? 'cloud_sun_rain' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '10n') ? 'cloud_moon_rain' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '11d') ? 'cloud_sun_bolt' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '11n') ? 'cloud_moon_bolt' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '13d') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '13n') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '50d') ? 'cloud_fog' : (items.OneCallAPIweatherandforecast_ForecastDay2_Iconid.state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '01d') ? 'sun_max' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '01n') ? 'moon_stars' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '02d') ? 'cloud_sun' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '02n') ? 'cloud_moon' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '03d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '03n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '04d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '04n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '09d') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '09n') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '10d') ? 'cloud_sun_rain' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '10n') ? 'cloud_moon_rain' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '11d') ? 'cloud_sun_bolt' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '11n') ? 'cloud_moon_bolt' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '13d') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '13n') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '50d') ? 'cloud_fog' : (items.OneCallAPIweatherandforecast_ForecastDay3_Iconid.state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: "=(items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '01d') ? 'sun_max' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '01n') ? 'moon_stars' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '02d') ? 'cloud_sun' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '02n') ? 'cloud_moon' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '03d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '03n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '04d') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '04n') ? 'cloud' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '09d') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '09n') ? 'cloud_heavyrain' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '10d') ? 'cloud_sun_rain' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '10n') ? 'cloud_moon_rain' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '11d') ? 'cloud_sun_bolt' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '11n') ? 'cloud_moon_bolt' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '13d') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '13n') ? 'cloud_snow' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '50d') ? 'cloud_fog' : (items.OneCallAPIweatherandforecast_ForecastDay4_Iconid.state === '50n') ? 'cloud_fog' : '?'"
                          size: 30
                          style:
                            margin-bottom: 8px
          - component: f7-row
            config:
              style:
                margin-top: 0px
              class:
                - text-align-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items.OneCallAPIweatherandforecast_ForecastToday_Mintemperature.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.OneCallAPIweatherandforecast_ForecastToday_Maxtemperature.state.split(' ')[0] * 1) / 1 + '°'
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items.OneCallAPIweatherandforecast_ForecastTomorrow_Mintemperature.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.OneCallAPIweatherandforecast_ForecastTomorrow_Maxtemperature.state.split(' ')[0] * 1) / 1 + '°'
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items.OneCallAPIweatherandforecast_ForecastDay2_Mintemperature.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.OneCallAPIweatherandforecast_ForecastDay2_Maxtemperature.state.split(' ')[0] * 1) / 1 + '°'
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items.OneCallAPIweatherandforecast_ForecastDay3_Mintemperature.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.OneCallAPIweatherandforecast_ForecastDay3_Maxtemperature.state.split(' ')[0] * 1) / 1 + '°'
                - component: f7-col
                  config:
                    style:
                      background: rgba(233, 196, 106, 0)
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items.OneCallAPIweatherandforecast_ForecastDay4_Mintemperature.state.split(' ')[0] * 1) / 1 + '° / ' + Math.round(items.OneCallAPIweatherandforecast_ForecastDay4_Maxtemperature.state.split(' ')[0] * 1) / 1 + '°'

// OneCall API Thing
String                  OneCallAPIweatherandforecast_ForecastToday_Iconid                "Icon Id"                                     ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastToday#icon-id" }                
Number:Temperature      OneCallAPIweatherandforecast_ForecastToday_Mintemperature        "Minimum Temperature"          <Temperature>  ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastToday#min-temperature" }        
Number:Temperature      OneCallAPIweatherandforecast_ForecastToday_Maxtemperature        "Maximum Temperature"          <Temperature>  ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastToday#max-temperature" }        
String                  OneCallAPIweatherandforecast_ForecastTomorrow_Iconid             "Icon Id"                                     ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastTomorrow#icon-id" }             
Number:Temperature      OneCallAPIweatherandforecast_ForecastTomorrow_Mintemperature     "Minimum Temperature"          <Temperature>  ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastTomorrow#min-temperature" }     
Number:Temperature      OneCallAPIweatherandforecast_ForecastTomorrow_Maxtemperature     "Maximum Temperature"          <Temperature>  ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastTomorrow#max-temperature" }     
String                  OneCallAPIweatherandforecast_ForecastDay2_Iconid                 "Icon Id"                                     ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastDay2#icon-id" }                 
Number:Temperature      OneCallAPIweatherandforecast_ForecastDay2_Mintemperature         "Minimum Temperature"          <Temperature>  ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastDay2#min-temperature" }         
Number:Temperature      OneCallAPIweatherandforecast_ForecastDay2_Maxtemperature         "Maximum Temperature"          <Temperature>  ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastDay2#max-temperature" }         
String                  OneCallAPIweatherandforecast_ForecastDay3_Iconid                 "Icon Id"                                     ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastDay3#icon-id" }                 
Number:Temperature      OneCallAPIweatherandforecast_ForecastDay3_Mintemperature         "Minimum Temperature"          <Temperature>  ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastDay3#min-temperature" }         
Number:Temperature      OneCallAPIweatherandforecast_ForecastDay3_Maxtemperature         "Maximum Temperature"          <Temperature>  ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastDay3#max-temperature" }         
String                  OneCallAPIweatherandforecast_ForecastDay4_Iconid                 "Icon Id"                                     ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastDay4#icon-id" }                 
Number:Temperature      OneCallAPIweatherandforecast_ForecastDay4_Mintemperature         "Minimum Temperature"          <Temperature>  ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastDay4#min-temperature" }         
Number:Temperature      OneCallAPIweatherandforecast_ForecastDay4_Maxtemperature         "Maximum Temperature"          <Temperature>  ["Point"]  { channel="openweathermap:onecall:bridge:local:forecastDay4#max-temperature" } 
     

If you have any improvements, please share it with me!

4 Likes

Sure, will do.

There are some amazing examples here, I’m in awe!

I have one question though, I have seen a few people using scenes in their installation. How did you solve this? Before the OH3 upgrade, I was under the impression, that there is some native support for them (because of the OH3 demo on the website). But since this isn’t the case, I wonder how the best implementation would be.

Are you all just running a rule/script when a scene button is pressed?

But then, how do you handle a scene being “active” or not? Do you disable the others first, or do you just fire off the new commands, never mind if the contradict a previous scene?

I know what you mean :wink:

At the moment for example Morgen, Abend, Nacht are really “stupid buttons”. I have a SceneItem and if you press “Morgen” SceneItem receives command 1. Then a rule is triggered and the light will change to defined brightness in the rule, afterwards SceneItem will be updated directly to 0.
Scene “Tag” is the same, but considers more condition (for example the illuminance outside). And according this condition my blinds will go up and light turned off, etc… So, you have to press “Tag” maybe later in the day, if I like to open the blinds, because the first time it was too dark outside.

If you plan to stay active you have to check also if there was some user interaction on physical buttons. Until now, it was to much work for me :slight_smile:. But it is planned. My user interface is now actually finished but still pretty dumb. So the big work is still to come.

I thought about using metadata to define an item beloging to a certain scene. Then when I the item receives a command from “another source”, you could disable all the scenes that an item belongs to.
and on the other hand I could disable all other scenes once a new scens receives a command. But then there are scenes that don’t overlap at all, so you’d have to consider for that. Either way will result in a lot of custom rules. I’m not there yet with my setup (still working on my presence rules), but already having this on my mind :slight_smile:

I think I’m pretty much at the same stage as Mike; pretty far with the user interface but the scenes don’t have any intelligence behind them. For example my “Movie Start” item starts a scene, switches on the media center and lights (some on, some off, some dimmed) and then switches of the item again. It’s very much stand-alone though, doesn’t look at any current settings. I’m using a basic setup in Node-RED for this:

You’re both bringing up a lot of the same questions I’m looking at with scenes interacting with other scenes and how that affects the settings for an item. I’m looking at adding properties to items (for example a light color and brightness for day, evening and night, responsive to motion or not, etc.).

This is just a rough draft for how to set properties from a user point of view, have not implemented these properties yet and have no idea yet on how to have scenes interact with the item properties and each other.

I love this widget !!!
One question, the arrow-up / down, are they supposed to change the set-temperature? When I copied your code it takes me to a graph with the temperatures / humidity

OO… you are right, thanks! … since I’ve added the oh-link component, I’ve never tried the the arrows to change the set temperature. Please change the last line of the yaml:

From:

          width: 100%

To:

          width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "

I updated the original post aswell.

1 Like

Very nice widgets !
Unfortunately it is not displayed correctly in a panel-like page, do you know how to get rid of the margin at the top?

1

Done!
Solved :slight_smile:

Hey @Tallman, hmm looks like you are trying to insert the widget code directly into the page yaml code?

I’ve tried to insert the widgets in Cells, Row/Columns and Masonry, should work.
Insert_Widget_into_page

OK there it works, I meant the layout with a fixed width (similar to Habpanel).

Okey, thanks for clarification. Then you are running already OH 3.1 M3 build? I‘m currently running the stable OH 3.0.1 installation.

If you find out, what‘s wrong with the widget in the fixed grid layout, plz share it here. Maybe a good preparation, when I will update to 3.1 stable. :slight_smile:

Thx!

Thank you for posting these examples. I have been struggling with the documentation and examples like these are exactly what I needed.

Can you Tell me which App you use on your iPad? Just Safari oder do you use another one?