[OH3] Main UI Examples

Hey @Integer ,

one more very beautiful example you’re posting here.

Would love to see your code here :slightly_smiling_face:

Would it be possible to include the different YAMLs right after each screenshot?

Hey @maxmaximax

I think it’s best, when I post the different widgets in a new post. and I will update my last post with the page YAML code.

First of all, UI would like to thank all community members with their posts and solutions to built my widgets and dashboard as it is now :wink:

Room Card:
image image
Maximum:
image

uid: Card_room_12
tags: []
props:
  parameters:
    - label: Header
      name: text_header
      required: false
      type: TEXT
    - description: icon name without ".png", located in static/icons/ folder
      label: Icon
      name: iconimage
      required: false
      type: TEXT
    - description: HEX or rgba
      label: Backgroundcolor
      name: bgcolor
      required: false
      type: TEXT
    - description: Page which will be opened as popup
      label: Page ID
      name: page
      required: false
    - context: item
      description: select group for status lights
      label: Item
      name: status
      required: false
      type: TEXT
    - context: item
      description: select item for heating
      label: Item
      name: heating
      required: false
      type: TEXT
    - context: item
      description: select item for temperature
      label: Item
      name: temp
      required: false
      type: TEXT
    - context: item
      description: select item for set temperature
      label: Item
      name: settemp
      required: false
      type: TEXT
    - context: item
      description: select item for humidity
      label: Item
      name: humidity
      required: false
      type: TEXT
    - context: item
      description: select item for illuminance
      label: Item
      name: illuminance
      required: false
      type: TEXT
    - context: item
      description: select item for door state(s)
      label: Item
      name: door_state
      required: false
      type: TEXT
    - context: item
      description: select item for door lock(s)
      label: Item
      name: door_lock
      required: false
      type: TEXT
    - context: item
      description: select item for blinds group (SUM)
      label: Item
      name: blinds_closed
      required: false
      type: TEXT
    - context: item
      description: select item for speaker(s)
      label: Item
      name: speakers
      required: false
      type: TEXT
    - context: item
      description: select item for windows(s)
      label: Item
      name: windows
      required: false
      type: TEXT
    - context: item
      description: select item for numbers of windows
      label: Item
      name: windows_numbers
      required: false
      type: TEXT
    - context: item
      description: select item for boiler temp
      label: Item
      name: boiler_temp
      required: false
      type: TEXT
timestamp: Apr 14, 2021, 7:33: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: 125px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          position: absolute
          top: -5px
          left: 50px
      slots:
        default:
          - component: Label
            config:
              text: "=props.text_header ? props.text_header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -37px
          left: 16px
      slots:
        default:
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.status ? true : false"
              text: "=(Number(items[props.status].state) > 0) ? items[props.status].state : ''"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=(Number(items[props.status].state) > 0) ? 'lightbulb' : 'lightbulb_slash'"
              iconSize: 18
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: =items[props.heating].state === 'ON'
              text: "=items[props.heating].state === 'ON' ? '' : ''"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: flame
              iconSize: 18
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.door_state ? true : false"
              text: "=items[props.door_state].state === 'ON' ? '' : ''"
            slots:
              media:
                - component: oh-icon
                  config:
                    icon: "=items[props.door_state].state === 'ON' ? 'door-open' : 'door-closed'"
                    style:
                      filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
                      height: 18px
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=items[props.windows].state === 'OPEN' ? true : false"
              text: "=items[props.windows_numbers].state > 0 ? items[props.windows_numbers].state : ''"
            slots:
              media:
                - component: oh-icon
                  config:
                    icon: window-open
                    style:
                      filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
                      height: 18px
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.door_lock ? true : false"
              text: "=items[props.door_lock].state === 'ON' ? '' : ''"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=items[props.door_lock].state === 'ON' ? 'lock_open' : 'lock'"
              iconSize: 18
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=(Number(Math.floor(items[props.blinds_closed].state)) > 0) ? true : false"
              text: "=(Number(items[props.blinds_closed].state) === 0) ? '' : Math.floor(items[props.blinds_closed].state)"
            slots:
              media:
                - component: oh-icon
                  config:
                    icon: "=(Number(items[props.blinds_closed].state) === 0) ? 'cinemascreen-30' : 'cinemascreen-100'"
                    style:
                      filter: "='brightness(' + (themeOptions.dark === 'dark' ? '100' : '0.3') + ')'"
                      height: 18px
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=items[props.speakers].state === 'PLAY' ? true : false"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=items[props.speakers].state === 'PLAY' ? 'speaker_2' : 'speaker'"
              iconSize: 18
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.illuminance ? true : false"
              text: =items[props.illuminance].displayState
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: sun_min
              iconSize: 18
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -65px
          left: 16px
      slots:
        default:
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.temp ? true : false"
              text: "=(items[props.temp].displayState  ? items[props.temp].displayState : items[props.temp].state) +  (props.settemp ? ' (' + items[props.settemp].state + ')' : '')"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: thermometer
              iconSize: 18
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.humidity ? true : false"
              text: =items[props.humidity].displayState
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: drop
              iconSize: 18
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.boiler_temp ? true : false"
              text: =items[props.boiler_temp].state
            slots:
              media:
                - component: oh-icon
                  config:
                    icon: waterheater2
                    style:
                      filter: "='invert(' + (themeOptions.dark === 'dark' ? '1' : '0') + ')'"
                      height: 18px
    - component: oh-image
      config:
        url: ='/static/icons/' + props.iconimage + '.png'
        style:
          position: absolute
          left: 16px
          top: 10px
          height: 25px
          opacity: 0.7
        visible: "=props.iconimage ? true : false"
    - component: oh-link
      config:
        action: popup
        actionModal: ='page:' + props.page
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 110px
          width: 100%

waterheater2 icon is from here: waterheater2 (flaticon.com)
the rest are f7 or oh icons.

Pool card
image

uid: Cell_Pool_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: HEX or rgba
    - context: item
      description: Item Pooltemp
      label: Item
      name: item_temp
      required: false
      type: TEXT
    - context: item
      description: Item Poolpump
      label: Item
      name: item_pump
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 29, 2021, 2:56:32 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: swimming_pool
              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_temp].state
              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: thermometer
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -90px
          left: 16px
          width: 100%
        class:
          - text-align-center
      slots:
        default:
          - component: oh-toggle
            config:
              item: =props.item_pump
          - component: Label
            config:
              text: Pumpe
              style:
                font-size: 13px

swimming_pool for example: swimming_pool (flaticon.com)

To do: I forgot to insert an oh-link over the hole card with action: analyzer

Current weather
image

uid: Cell_Weather_Actual_1
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: HEX or rgba
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - description: page ID of chart to be opened
      label: page
      name: page
      required: false
    - context: item
      description: Item of Outsidetemp
      label: Outsidetemperature
      name: item_temp
      required: false
      type: TEXT
    - context: item
      description: Item of Outsidehumidity
      label: Humidity
      name: item_hum
      required: false
      type: TEXT
    - context: item
      description: Item of Rain Today
      label: Rain
      name: item_rain
      required: false
      type: TEXT
    - context: item
      description: Item of Strikes
      label: Strike Count
      name: item_strike
      required: false
      type: TEXT
    - context: item
      description: Item of Illuminance
      label: Illuminance
      name: item_ill
      required: false
      type: TEXT
    - context: item
      description: Item of Wind Avg
      label: Wind
      name: item_wind
      required: false
      type: TEXT
    - context: item
      description: Item of Wind Direction
      label: Wind Dir
      name: item_wind_dir
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 14, 2021, 7:55:05 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: sun_max
              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-chip
            config:
              iconF7: thermometer
              text: =items[props.item_temp].state
              style:
                margin-bottom: 10px
                font-size: 16px
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconSize: 20
          - component: f7-chip
            config:
              iconF7: drop
              text: =items[props.item_hum].displayState
              style:
                margin-bottom: 10px
                font-size: 16px
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconSize: 20
          - component: f7-chip
            config:
              iconF7: sun_min
              text: =items[props.item_ill].displayState
              style:
                margin-bottom: 10px
                font-size: 16px
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconSize: 20
          - component: f7-chip
            config:
              iconF7: cloud_drizzle
              text: =items[props.item_rain].displayState
              style:
                margin-bottom: 10px
                font-size: 16px
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconSize: 20
          - component: f7-chip
            config:
              iconF7: bolt
              text: =items[props.item_strike].state
              style:
                margin-bottom: 10px
                font-size: 16px
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconSize: 20
          - component: f7-chip
            config:
              iconF7: wind
              text: =items[props.item_wind].displayState
              style:
                margin-bottom: 10px
                font-size: 16px
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconSize: 20
          - component: f7-chip
            config:
              iconF7: compass
              text: =items[props.item_wind_dir].state
              style:
                margin-bottom: 10px
                font-size: 16px
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconSize: 20
    - component: oh-link
      config:
        action: navigate
        actionPage: ='page:' + props.page
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 150px
          width: 100%

Thermostat
With set temperature and heating control:
image

Without set temperature (only temp and hum):
image

uid: Cell_Temp_Card_1
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: in rgba() or HEX or empty
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      label: Current Temperature
      name: temp_item
      required: false
      type: TEXT
    - context: item
      label: Set Temperature
      name: set_temp_item
      required: false
      type: TEXT
    - context: item
      label: Current Humidity
      name: humidity_item
      required: false
      type: TEXT
    - context: item
      description: on/off item
      label: Heating control item
      name: heating_item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 13, 2021, 8:39:54 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    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: -20px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=items[props.temp_item].displayState ? items[props.temp_item].displayState : items[props.temp_item].state"
              style:
                font-size: 22px
                font-weight: 400
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -40px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              f7: drop
              size: 18
              visible: "=props.humidity_item ? true : false"
          - component: Label
            config:
              visible: "=props.humidity_item ? true : false"
              text: =items[props.humidity_item].displayState
              style:
                font-size: 12px
                margin-left: 5px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -63px
          left: 12px
          flex-direction: row
          display: flex
      slots:
        default:
          - component: f7-icon
            config:
              visible: "=props.heating_item ? true : false"
              f7: flame
              size: 18
          - component: Label
            config:
              visible: "=props.heating_item ? true : false"
              text: =items[props.heating_item].state
              style:
                font-size: 12px
                margin-left: 5px
                margin-top: 0px
    - component: oh-button
      config:
        visible: "=props.set_temp_item ? true : false"
        iconColor: red
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5
        style:
          position: absolute
          top: 12px
          right: 10px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        visible: "=props.set_temp_item ? true : false"
        iconColor: red
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.set_temp_item
        actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5
        style:
          position: absolute
          top: 74px
          right: 10px
          height: 35px
          background: transparent
    - component: Label
      config:
        visible: "=props.set_temp_item ? true : false"
        text: =items[props.set_temp_item].state
        style:
          font-size: 12px
          position: absolute
          right: 15px
          top: 50px
    - component: f7-block
      config:
        style:
          position: absolute
          top: 15px
          left: 15px
          width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "
          height: 120px
      slots:
        default:
          - component: oh-trend
            config:
              trendItem: =props.temp_item
              trendGradient:
                - "#aa2b1d"
                - "#cc561e"
                - "#ef8d32"
                - "#beca5c"
              style:
                --f7-theme-color-bg-color: transparent
                background: var(--f7-theme-color-bg-color)
                filter: opacity(30%)
                position: absolute
                width: 100%
                height: 100%
                top: 0px
                left: 0px
                z-index: 1
    - component: oh-link
      config:
        actionAnalyzerChartType: day
        action: analyzer
        actionAnalyzerItems: "=props.set_temp_item ? [props.temp_item, props.humidity_item, props.set_temp_item, props.heating_item] : (props.humidity_item ? [props.temp_item, props.humidity_item] : [props.temp_item])"
        actionAnalyzerCoordSystem: time
        style:
          position: absolute
          left: 0px
          top: 0px
          height: 120px
          width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "

Speaker (SONOS)
image

uid: Cell_Speaker_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
    - label: Background Color
      name: bgcolor
      required: false
      type: TEXT
      description: HEX or rgba
    - context: item
      description: Item to control
      label: Item
      name: item
      required: false
      type: TEXT
    - context: item
      description: Item for volume
      label: Item
      name: item_volume
      required: false
      type: TEXT
    - context: item
      description: Item for Coverbild
      label: Item
      name: item_cover
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 29, 2021, 5:56:15 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    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: "=items[props.item].state === 'PLAY' ? 'speaker_3' : 'speaker'"
              size: 18
              style:
                margin-right: 10px
          - component: Label
            config:
              text: "=props.title ? props.title : ''"
              style:
                font-size: 12px
                margin-top: 0px
    - component: f7-block
      config:
        style:
          position: absolute
          bottom: -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
    - null
    - component: oh-button
      config:
        iconColor: "=items[props.item].state === 'PAUSE' ? themeOptions.dark === 'dark' ? 'white' : 'black' : 'red' "
        iconF7: play_circle
        iconSize: 35
        action: command
        actionItem: =props.item
        actionCommand: PLAY
        style:
          position: absolute
          top: 12px
          right: 10px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: "=items[props.item].state === 'PLAY' ? themeOptions.dark === 'dark' ? 'white' : 'black' : 'red'"
        iconF7: pause_circle
        iconSize: 35
        action: command
        actionItem: =props.item
        actionCommand: PAUSE
        style:
          position: absolute
          top: 74px
          right: 10px
          height: 35px
          background: transparent
    - component: oh-slider
      config:
        item: =props.item_volume
        min: 0
        max: 100
        style:
          position: absolute
          bottom: -75px
          left: 20px
          width: calc(100% - 205px)
          --f7-range-bar-size: 8px
          --f7-range-bar-border-radius: 8px
          --f7-range-knob-size: 20px
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
    - component: oh-image
      config:
        style:
          position: absolute
          bottom: -78px
          right: 70px
          height: 100px
        item: =props.item_cover

Blinds
image

uid: Cell_Shutter_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:)). e.g.: arrow_up_arrow_down
      label: Icon
      name: icon
      required: false
      type: TEXT
    - label: Background Color
      name: bgcolor
      required: false
      type: TEXT
      description: HEX or rgba
    - context: item
      description: Shutter item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 9, 2021, 10:31:34 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    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: f7-block
      config:
        style:
          position: absolute
          bottom: -35px
          left: 16px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=Number(items[props.item].state) === 0 ? 'Geöffnet' : 'Geschlossen'"
              style:
                font-size: 12px
                margin-left: 0px
                margin-top: 0px
    - component: oh-button
      config:
        iconColor: red
        iconF7: arrow_up_circle
        iconSize: 35
        action: command
        actionItem: =props.item
        actionCommand: UP
        style:
          position: absolute
          top: 12px
          right: 10px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: red
        iconF7: stop_circle
        iconSize: 29
        action: command
        actionItem: =props.item
        actionCommand: STOP
        style:
          position: absolute
          top: 46px
          right: 13px
          height: 29px
          background: transparent
    - component: oh-button
      config:
        iconColor: red
        iconF7: arrow_down_circle
        iconSize: 35
        action: command
        actionItem: =props.item
        actionCommand: DOWN
        style:
          position: absolute
          top: 74px
          right: 10px
          height: 35px
          background: transparent

Todo: Control icon colors according state of shutter item (at the moment they are all red).

Light
image

uid: Cell_Light_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 on/off
      label: Item
      name: item_schalter
      required: false
      type: TEXT
    - context: item
      description: Item to control brightness
      label: Item
      name: item_brightness
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 10, 2021, 8:00:57 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 120px
    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-slider
      config:
        item: =props.item_brightness
        min: 0
        max: 100
        style:
          position: absolute
          bottom: -75px
          left: 20px
          width: calc(100% - 40px)
          --f7-range-bar-size: 8px
          --f7-range-bar-border-radius: 8px
          --f7-range-knob-size: 20px
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
    - component: oh-toggle
      config:
        item: =props.item_schalter
        style:
          position: absolute
          top: 15px
          right: 20px

Feel free to modify and improve these widgets! would be nice, if you can share your improvements with me!?

28 Likes

Very nice widgets, I will definetely use some of them!
Is your iPad also powered through the wall? I’m already looking for a good solution to mount a tablet.

@Integer great work, hope you don’t mind me copying your code :grin:.
How did you mount the tablet and esp power it?

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!

5 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