Cell card widget paired with expanded popup

CellTempCard
My version of cell widget for rooms of my house, small cells will popup a bigger widget on click, giving more options and controls (from the smaller widget only light controls will popup if you’ll manage to click exactly on lightbulb button - that is made for faster access to the most used control).
Smaller widget will pass all options it has to the bigger one, so despite of the fact that smaller version doesn’t show all items which are passed to it, you’ll still need to fill in all those items you want to see in popup.
Widget is designed to fit dark and bright color themes, changing it’s colors depending of user theme, and is designed to provide clear view on background image, so it’s full off css shadows, and maybe if you don’t need/don’t like all those shadows, you should delete them in widget code to get a bit more of performance.
Widget’s remote control is designed for Samsung TV, using Samsung TV’s binding, so if your TV is different, you will not get all those keys working.

So the cell widget code is:

uid: Cell_Temp_Card_3
tags:
  - co
  - humidity
  - motion
  - temperature
props:
  parameters:
    - description: Title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
      groupName: general
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
      groupName: general
    - description: Background image name
      label: Background image
      name: bg_image_url
      required: false
      type: TEXT
      groupName: general
    - description: in rgba() or HEX or empty
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
      groupName: general
    - context: item
      description: An item, measuring room's temperature
      label: Temperature sensor
      name: temp_item
      required: false
      type: TEXT
      groupName: sensors
    - context: item
      description: An item, measuring room's light level
      label: Lightlevel sensor
      name: lightlevel_item
      required: false
      type: TEXT
      groupName: sensors
    - context: item
      description: An item, measuring room's humidity
      label: Humidity sensor
      name: humidity_item
      required: false
      type: TEXT
      groupName: sensors
    - context: item
      description: An item, measuring room's CO2 level
      label: CO2 sensor
      name: CO_item
      required: false
      type: TEXT
      groupName: sensors
    - context: item
      description: An item, setting room's desired temperature
      label: Target Temperature
      name: temperatureset_item
      required: false
      type: TEXT
      groupName: climate
    - context: item
      description: An item, setting room's desired humidity
      label: Target Humidity
      name: humidityset_item
      required: false
      type: TEXT
      groupName: climate
    - context: item
      description: An item to switch cooling On/Off
      label: Cooling On/Off
      name: coolingon_item
      required: false
      type: TEXT
      groupName: climate
    - context: item
      description: An item to switch heating On/Off
      label: Heating On/Off
      name: heatingon_item
      required: false
      type: TEXT
      groupName: climate
    - context: item
      description: An item to switch humidifier On/Off
      label: Humidifier On/Off
      name: humidifieron_item
      required: false
      type: TEXT
      groupName: climate
    - context: item
      description: Main climate fan speeed
      label: Fanspeed
      name: fanspeed_item
      required: false
      type: TEXT
      groupName: climate
    - context: item
      description: An item to switch fan On/Off
      label: Fan on/off
      name: fanon_item
      required: false
      type: TEXT
    - context: item
      description: An item to choose humidifier fan's speed
      label: Humidifier fan speed
      name: humidifierfan_item
      required: false
      type: TEXT
      groupName: climate
    - context: item
      description: Motion sensor
      label: Motion item
      name: motion_item
      required: false
      type: TEXT
      groupName: security
    - context: item
      description: A group, containing all kind of lights - On/Off, Dimmers, Colorlights, widget will try to show them, by reading their tags.
      label: Lights group
      name: light
      required: false
      type: TEXT
    - context: item
      label: Door item
      name: door_item
      required: false
      type: TEXT
      groupName: security
    - context: item
      label: Lock item
      name: lock_item
      required: false
      type: TEXT
      groupName: security
    - context: item
      label: Window item
      name: window_item
      required: false
      type: TEXT
      groupName: security
    - context: item
      label: Leakage item
      name: leakage_item
      required: false
      type: TEXT
      groupName: security
    - context: item
      label: Smoke item
      name: smoke_item
      required: false
      type: TEXT
      groupName: security
    - context: item
      description: SamsungTV or Kodi Media title
      label: Media Title
      name: mediaTitle
      required: false
      type: TEXT
      groupName: media
    - context: item
      description: TV power On/Off, widget will hide media remote section if this item is not set
      label: Power Item
      name: power
      required: false
      type: TEXT
      groupName: media
    - context: item
      description: TV channel item, if present
      label: Channel
      name: channel
      required: false
      type: TEXT
      groupName: media
    - context: item
      description: Samsung TV KeyCode channel
      label: Key Code
      name: inputAction
      required: false
      type: TEXT
      groupName: media
    - context: item
      description: Volume control item, if present, any dimmer type item
      label: Volume Control Item
      name: volumeControlItem
      required: false
      type: TEXT
      groupName: media
    - context: item
      description: SamsungTV source name, or Kodi Media title, or any other item to show on remote's screen
      label: Source Name
      name: sourceName
      required: false
      type: TEXT
      groupName: media
  parameterGroups:
    - name: general
      label: General settings
    - name: sensors
      label: Sensors settings
    - name: media
      label: Media group settings
    - name: climate
      label: Climate settings
    - name: security
      label: Security settings
timestamp: Sep 19, 2022, 2:18:30 AM
component: f7-card
config:
  style:
    background: transparent
    background-brightness: 60%
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    background-image: "=props.bg_image_url ? 'url(/static/' + (props.bg_image_url) + ')' : ''"
    background-position: center
    background-repeat: no-repeat
    background-size: cover
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px var(--f7-bars-bg-color)
    color: var(--f7-text-color)
    font-size: medium
    font-weight: 500
    height: 150px
    margin: 5
    noShadow: false
    padding: 0
    text-shadow: 1px 0px 2px var(--f7-bars-bg-color), -1px 0px 2px var(--f7-bars-bg-color), 0px 0px 2px var(--f7-bars-bg-color), 0px 0px 3px var(--f7-bars-bg-color)
slots:
  default:
    - component: f7-card-header
      config:
        style:
          justify-content: center
          margin: 0
          min-height: 30px
          padding: 0
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 20
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              style:
                font-size: 18px
                font-weight: bold
                margin-left: 5px
              text: "=props.title ? props.title : ''"
    - component: f7-card-content
      config:
        style:
          align-items: flex-start
          display: flex
          justify-content: space-between
          margin: 7px
          padding: 0
      slots:
        default:
          - component: f7-col
            config: {}
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      flex-wrap: nowrap
                      justify-content: flex-start
                    visible: "=props.temp_item ? true : false"
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: martinitemp
                          state: =items[props.temp_item].state
                          style:
                            filter: drop-shadow(3px 2px 2px rgb(0 0 0 / 0.4))
                          width: 23
                      - component: Label
                        config:
                          style:
                            color: '=(Number.parseFloat(items[props.temp_item].state.split(" ")[0]) > 30) ? "rgb(242,75,36)" : (Number.parseFloat(items[props.temp_item].state.split(" ")[0]) < 10) ? "rgba(32, 185, 256,0.8)" : "var(--f7-text-color)"'
                            margin-left: 5px
                          text: =Number.parseInt(items[props.temp_item].state)+" °C"
                - component: f7-row
                  config:
                    style:
                      flex-wrap: nowrap
                      justify-content: flex-start
                      z-index: 2
                    visible: "=props.humidity_item ? true : false"
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: hum
                          state: =items[props.humidity_item].state
                          style:
                            filter: drop-shadow(3px 2px 2px rgb(0 0 0 / 0.4))
                          width: 23
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                          text: =Number.parseInt(items[props.humidity_item].state) +" %"
                - component: f7-row
                  config:
                    style:
                      flex-wrap: nowrap
                      justify-content: flex-start
                      z-index: 2
                    visible: "=props.lightlevel_item ? true : false"
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: lightlevel
                          state: =items[props.lightlevel_item].state
                          style:
                            filter: drop-shadow(3px 2px 2px rgb(0 0 0 / 0.4))
                          width: 23
                      - component: Label
                        config:
                          style:
                            color: "=(items[props.lightlevel_item].state < 1) ? 'gray' : 'var(--f7-text-color)'"
                            margin-left: 5px
                          text: =Number.parseInt(items[props.lightlevel_item].state) +" lux"
                - component: f7-row
                  config:
                    style:
                      flex-wrap: nowrap
                      z-index: 2
                    visible: "=props.CO_item ? true : false"
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: carbondioxidecloud
                          state: =items[props.CO_item].state
                          style:
                            filter: drop-shadow(3px 2px 2px rgb(0 0 0 / 0.4))
                          width: 23
                      - component: Label
                        config:
                          style:
                            color: '=(Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1500) ? "red" : (Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1000) ? "yellow" : "var(--f7-text-color)"'
                            margin-left: 5px
                            white-space: nowrap
                          text: =Number.parseInt(items[props.CO_item].state) +" ppm"
          - component: f7-col
            config:
              style:
                align-items: center
                display: flex
                flex-direction: column
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      z-index: 1
                    visible: "=props.motion_item ? true : false"
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: f7:dot_radiowaves_left_right
                          visible: "=props.motion_item ? true : false"
                          width: 25
                          style:
                            color: '=(items[props.motion_item].state == "ON") ? "red" : "var(--f7-text-color)"'
                - component: f7-row
                  config:
                    style:
                      z-index: 1
                    visible: "=props.motion_item || props.door_item || props.lock_item || props.window_item ? true : false"
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: "=(items[props.lock_item].state === 'ON') ? 'f7:lock' : 'f7:lock_open'"
                          visible: "=props.lock_item ? true : false"
                          width: 25
                      - component: oh-icon
                        config:
                          icon: "=(items[props.door_item].state === 'ON') ? 'door-closed' : 'door-open'"
                          visible: "=props.door_item ? true : false"
                          width: 25
                      - component: oh-icon
                        config:
                          icon: "=(items[props.window_item].state === 'ON') ? 'window' : 'window-open'"
                          visible: "=props.window_item ? true : false"
                          width: 25
                - component: oh-button
                  config:
                    action: group
                    actionGroupPopupItem: =props.light
                    style:
                      padding: 0
                      z-index: 99
                    visible: "=props.light ? true : false"
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          width: 30
                          icon: '=(items[props.light].state == "ON") ? "f7:lightbulb_fill" : "f7:lightbulb"'
                          item: =loop.item.name
                          style:
                            color: '=(items[props.light].state == "ON") ? "yellow" : "var(--f7-text-color)"'
          - component: oh-link
            config:
              action: popup
              actionModal: widget:Cell_Temp_Card_Expanded
              actionModalConfig:
                CO_item: =props.CO_item
                bg_image_url: =props.bg_image_url
                bgcolor: =props.bgcolor
                channel: =props.channel
                door_item: =props.door_item
                humidity_item: =props.humidity_item
                humidityset_item: =props.humidityset_item
                icon: =props.icon
                inputAction: =props.inputAction
                leakage_item: =props.leakage_item
                light: =props.light
                lightlevel_item: =props.lightlevel_item
                lock_item: =props.lock_item
                mediaTitle: =props.
                motion_item: =props.motion_item
                power: =props.power
                smoke_item: =props.smoke_item
                sourceName: =props.sourceName
                temp_item: =props.temp_item
                temperatureset_item: =props.temperatureset_item
                humidifieron_item: =props.humidifieron_item
                fanspeed_item: =props.fanspeed_item
                fanon_item: =props.fanon_item
                humidifierfan_item: =props.humidifierfan_item
                title: =props.title
                volumeControlItem: =props.volumeControlItem
                window_item: =props.window_item
              style:
                height: 137px
                left: 0px
                margin: 0px
                padding: 0
                position: absolute
                top: -30px
                width: 100%
                z-index: 3

And popup widget code is:

uid: Cell_Temp_Card_Expanded
tags:
  - co
  - humidity
  - motion
  - temperature
props:
  parameters:
    - description: 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: Background image name
      label: Background image
      name: bg_image_url
      required: false
      type: TEXT
    - description: in rgba() or HEX or empty
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      label: Temperature
      name: temp_item
      required: false
      type: TEXT
    - context: item
      label: Target Temperature
      name: temperatureset_item
      required: false
      type: TEXT
    - context: item
      label: Cooling On/Off
      name: coolingon_item
      required: false
      type: TEXT
    - context: item
      label: Heating On/Off
      name: heatingon_item
      required: false
      type: TEXT
    - context: item
      label: Lightlevel
      name: lightlevel_item
      required: false
      type: TEXT
    - context: item
      label: Humidity
      name: humidity_item
      required: false
      type: TEXT
    - context: item
      label: Target Humidity
      name: humidityset_item
      required: false
      type: TEXT
    - context: item
      label: Humidifier On/Off
      name: humidifieron_item
      required: false
      type: TEXT
    - context: item
      label: Fanspeed
      name: fanspeed_item
      required: false
      type: TEXT
    - context: item
      label: Fan on/off
      name: fanon_item
      required: false
      type: TEXT
    - context: item
      label: Humidifier fan speed
      name: humidifierfan_item
      required: false
      type: TEXT
    - context: item
      label: CO
      name: CO_item
      required: false
      type: TEXT
    - context: item
      label: Motion item
      name: motion_item
      required: false
      type: TEXT
    - context: item
      label: Lights group
      name: light
      required: false
      type: TEXT
    - context: item
      label: Door item
      name: door_item
      required: false
      type: TEXT
    - context: item
      label: Lock item
      name: lock_item
      required: false
      type: TEXT
    - context: item
      label: Window item
      name: window_item
      required: false
      type: TEXT
    - context: item
      label: Leakage item
      name: leakage_item
      required: false
      type: TEXT
    - context: item
      label: Smoke item
      name: smoke_item
      required: false
      type: TEXT
    - context: item
      label: Media Title
      name: mediaTitle
      required: false
      type: TEXT
    - context: item
      label: Power Item
      name: power
      required: false
      type: TEXT
    - context: item
      label: Channel
      name: channel
      required: false
      type: TEXT
    - context: item
      label: Key Code
      name: inputAction
      required: false
      type: TEXT
    - context: item
      label: Volume Control Item
      name: volumeControlItem
      required: false
      type: TEXT
    - context: item
      label: Source Name
      name: sourceName
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Sep 19, 2022, 2:17:59 AM
component: f7-card
config:
  style:
    --f7-badge-text-color: var(--f7-text-color)
    --f7-bars-bg-color: none
    --f7-bars-border-color: none
    --f7-bars-translucent-blur: none
    --f7-bars-translucent-opacity: none
    --f7-navbar-link-color: var(--f7-text-color)
    --f7-navbar-shadow-image: none
    --f7-page-content-extra-padding-bottom: none
    --f7-page-content-extra-padding-top: none
    --f7-page-searchbar-offset: none
    --f7-page-subnavbar-offset: none
    --f7-page-toolbar-bottom-offset: none
    --f7-page-toolbar-top-offset: none
    --f7-range-label-text-color: var(--f7-text-color)
    --f7-range-label-bg-color: var(--f7-card-bg-color)
    --f7-range-label-font-size: 16px
    --f7-range-label-font-weight: 500
    --popup-text-shadow-light: 2px 2px rgba(var(--f7-card-bg-color),.15)
    --popup-text-shadow-strong: 2px 2px rgba(var(--f7-card-bg-color),.35)
    background: transparent
    background-brightness: 60%
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    background-image: "=props.bg_image_url ? 'url(/static/' + (props.bg_image_url) + ')' : ''"
    background-position: down
    background-repeat: no-repeat
    background-size: cover
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px var(--f7-card-bg-color)
    color: var(--f7-text-color)
    font-size: large
    font-weight: 600
    height: 100%
    margin: 0
    noShadow: false
    overflow: hidden
    text-shadow: 0.031250em  0.031250em 0.015625em var(--f7-card-bg-color), -0.015625em -0.015625em 0.187500em var(--f7-card-bg-color), -0.006250em -0.006250em 0.187500em var(--f7-card-bg-color)
slots:
  default:
    - component: f7-card-header
      config:
        style:
          display: flex
          justify-content: center
          margin: 0
          min-height: 35px
          padding: 0
      slots:
        default:
          - component: f7-icon
            config:
              f7: =props.icon
              size: 20
              visible: "=props.icon ? true : false"
          - component: Label
            config:
              style:
                font-size: 20px
                font-weight: bold
                margin-left: 5px
              text: "=props.title ? props.title : ''"
    - component: f7-card-content
      config:
        style:
          margin: 0
          padding: 0
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: f7-segmented
                  config:
                    color: gray
                    raised: false
                    strong: true
                    style:
                      width: 100%
                      backdrop-filter: blur(5px)
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: variable
                          actionVariable: select
                          actionVariableValue: 1
                          active: =(vars.select == 1)
                          iconF7: thermometer
                          iconSize: 40
                          large: true
                          outline: =(vars.select == 1)
                          style:
                            height: 45px
                      - component: oh-button
                        config:
                          action: variable
                          actionVariable: select
                          actionVariableValue: 2
                          active: =(vars.select == 2)
                          iconF7: thermometer_snowflake
                          iconSize: 40
                          large: true
                          outline: =(vars.select == 2)
                          visible: "=props.temperatureset_item || props.humidityset_item || props.fanon_item || props.coolingon_item || props.heatingon_item ? true : false"
                          style:
                            height: 45px
                      - component: oh-button
                        config:
                          action: variable
                          actionVariable: select
                          actionVariableValue: 3
                          active: =(vars.select == 3)
                          iconF7: film
                          iconSize: 40
                          large: true
                          outline: =(vars.select == 3)
                          visible: "=props.power ? true : false"
                          style:
                            height: 45px
                      - component: oh-button
                        config:
                          action: variable
                          actionVariable: select
                          actionVariableValue: 4
                          active: =(vars.select == 4)
                          iconF7: shield
                          iconSize: 40
                          large: true
                          outline: =(vars.select == 4)
                          visible: "=props.lock_item || props.door_item || props.window_item || props.motion_item || props.leakage_item ? true : false"
                          style:
                            height: 45px
                      - component: oh-button
                        config:
                          action: variable
                          actionVariable: select
                          actionVariableValue: 5
                          active: =(vars.select == 5)
                          iconF7: graph_square
                          iconSize: 40
                          large: true
                          outline: =(vars.select == 5)
                          style:
                            height: 45px
          - component: f7-tab
            config:
              class:
                - display-flex
                - justify-content-space-between
                - flex-direction-column
              style:
                animation: f7-fade-in 300ms
                margin: 5px
                padding: 0px
              visible: =(vars.select == 1 || vars.select == NULL)
            slots:
              default:
                - component: f7-row
                  config:
                    style:
                      border-bottom: 1px solid
                      filter: drop-shadow(0px 0px 1px var(--f7-card-bg-color))
                      margin: 10px
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            width: auto
                        slots:
                          default:
                            - component: f7-row
                              config:
                                style:
                                  flex-wrap: nowrap
                                  justify-content: flex-start
                                visible: "=props.temp_item ? true : false"
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      icon: martinitemp
                                      state: =items[props.temp_item].state
                                      width: 30
                                  - component: Label
                                    config:
                                      style:
                                        color: '=(Number.parseFloat(items[props.temp_item].state.split(" ")[0]) > 30) ? "rgb(242,75,36)" : (Number.parseFloat(items[props.temp_item].state.split(" ")[0]) < 10) ? "rgba(32, 185, 256,0.8)" : "var(--f7-text-color)"'
                                        margin-left: 5px
                                      text: =items[props.temp_item].state.split(" ")[0]+" °C"
                            - component: f7-row
                              config:
                                style:
                                  flex-wrap: nowrap
                                  justify-content: flex-start
                                  z-index: 2
                                visible: "=props.humidity_item ? true : false"
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      icon: hum
                                      state: =items[props.humidity_item].state
                                      width: 30
                                  - component: Label
                                    config:
                                      style:
                                        color: '=(Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) < 35) ? "rgb(242,75,36)" : (Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) > 75) ? "green" : "var(--f7-text-color)"'
                                        margin-left: 5px
                                      text: =items[props.humidity_item].state.split(" ")[0]+" %"
                            - component: f7-row
                              config:
                                style:
                                  flex-wrap: nowrap
                                  justify-content: flex-start
                                  z-index: 2
                                visible: "=props.lightlevel_item ? true : false"
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      icon: lightlevel
                                      state: =items[props.lightlevel_item].state
                                      width: 30
                                  - component: Label
                                    config:
                                      style:
                                        color: "=(items[props.lightlevel_item].state < 1) ? 'gray' : 'var(--f7-text-color)'"
                                        margin-left: 5px
                                      text: =items[props.lightlevel_item].state.split(" ")[0]+" lux"
                            - component: f7-row
                              config:
                                style:
                                  flex-wrap: nowrap
                                  justify-content: flex-start
                                  z-index: 2
                                visible: "=props.CO_item ? true : false"
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      icon: carbondioxidecloud
                                      state: =items[props.CO_item].state
                                      width: 30
                                  - component: Label
                                    config:
                                      style:
                                        color: '=(Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1500) ? "red" : (Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1000) ? "orange" : "var(--f7-text-color)"'
                                        margin-left: 5px
                                        white-space: nowrap
                                      text: =items[props.CO_item].state.split(" ")[0]+" ppm"
                      - component: f7-col
                        config:
                          style:
                            align-items: center
                            display: flex
                            flex-direction: column
                            justify-content: flex-end
                            width: auto
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  z-index: 1
                                visible: "=props.motion_item || props.lock_item ? true : false"
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      action: analyzer
                                      actionAnalyzerItems: =[props.motion_item]
                                      large: true
                                      visible: "=props.motion_item ? true : false"
                                    slots:
                                      default:
                                        - component: oh-icon
                                          config:
                                            icon: f7:dot_radiowaves_left_right
                                            width: 40
                                            style:
                                              color: '=(items[props.motion_item].state == "ON") ? "red" : "var(--f7-text-color)"'
                                  - component: oh-button
                                    config:
                                      action: toggle
                                      actionCommand: ON
                                      actionCommandAlt: OFF
                                      actionItem: =[props.lock_item]
                                      large: true
                                      visible: "=props.lock_item ? true : false"
                                    slots:
                                      default:
                                        - component: oh-icon
                                          config:
                                            icon: "=(items[props.lock_item].state === 'ON') ? 'f7:lock' : 'f7:lock_open'"
                                            style:
                                              color: var(--f7-text-color)
                                            width: 30
                            - component: f7-col
                              config:
                                style:
                                  z-index: 1
                                visible: "=props.door_item || props.window_item ? true : false"
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      icon: "=(items[props.door_item].state === 'ON') ? 'door-closed' : 'door-open'"
                                      visible: "=props.door_item ? true : false"
                                      width: 25
                                  - component: oh-icon
                                    config:
                                      icon: "=(items[props.window_item].state === 'ON') ? 'window' : 'window-open'"
                                      visible: "=props.window_item ? true : false"
                                      width: 25
                - component: f7-block
                  config:
                    style:
                      font-size: medium
                      font-weight: 600
                      margin: 5px
                      padding: 0px
                      border-bottom: 1px solid
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          fetchMetadata: semantics,metadata
                          filter: '(loop.switchItem.type=="Switch") ? true : false'
                          for: switchItem
                          groupItem: =props.light
                          sourceType: itemsInGroup
                        slots:
                          default:
                            - component: f7-row
                              config:
                                style:
                                  margin-bottom: 5px
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      height: 30
                                      icon: '=(items[loop.switchItem.name].state == "ON") ? "f7:lightbulb_fill" : "f7:lightbulb"'
                                      style:
                                        color: '=(items[loop.switchItem.name].state == "ON") ? "yellow" : var(--f7-text-color)'
                                  - component: Label
                                    config:
                                      text: =loop.switchItem.label
                                  - component: oh-toggle
                                    config:
                                      color: yellow
                                      item: =loop.switchItem.name
                                      style:
                                        --f7-toggle-height: 23px
                                        --f7-toggle-width: 55px
                                        --f7-toggle-inactive-color: rgba(100,100,100,0.8)
                                        margin-left: auto
                      - component: oh-repeater
                        config:
                          fetchMetadata: semantics,metadata
                          filter: '(loop.dimmerItem.type=="Dimmer") ? true : false'
                          for: dimmerItem
                          groupItem: =props.light
                          sourceType: itemsInGroup
                        slots:
                          default:
                            - component: f7-row
                              config:
                                style:
                                  margin-bottom: 5px
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      height: 30
                                      icon: f7:sun_max
                                      style:
                                        color: '=(loop.dimmerItem.state == "ON") ? "yellow" : var(--f7-text-color)'
                                  - component: Label
                                    config:
                                      style:
                                        margin-right: auto
                                      text: =loop.dimmerItem.label
                                  - component: oh-slider
                                    config:
                                      color: white
                                      item: =loop.dimmerItem.name
                                      label: true
                                      max: '=(loop.dimmerItem.stateDescription && loop.dimmerItem.stateDescription.maximum) ? loop.dimmerItem.stateDescription.maximum : "100"'
                                      style:
                                        --f7-range-bar-active-bg-color: linear-gradient(to right, rgba(30,30,0,0.1), rgba(255,255,0,1))
                                        --f7-range-bar-bg-color: linear-gradient(to right, rgba(50,50,0,0.1), rgba(255,255,0,1))
                                        --f7-range-bar-border-radius: 10px
                                        --f7-range-bar-size: 20px
                                        --f7-range-knob-box-shadow: 0 2px 4px black
                                        --f7-range-knob-size: 25px
                                        margin-left: auto
                                        margin-right: auto
                                        width: 90%
                      - component: oh-repeater
                        config:
                          fetchMetadata: semantics,metadata
                          filter: 'loop.colorTempItem.metadata.semantics.config.relatesTo == "Property_ColorTemperature" ? true : false'
                          for: colorTempItem
                          groupItem: =props.light
                          sourceType: itemsInGroup
                        slots:
                          default:
                            - component: f7-row
                              config:
                                style:
                                  margin-bottom: 5px
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      height: 30
                                      icon: f7:dial
                                      style:
                                        color: '=(loop.colorTempItem.state == "ON") ? "yellow" : var(--f7-text-color)'
                                  - component: Label
                                    config:
                                      style:
                                        margin-right: auto
                                      text: =loop.colorTempItem.label
                                  - component: oh-slider
                                    config:
                                      item: =loop.colorTempItem.name
                                      label: true
                                      max: 6500
                                      min: 1700
                                      color: white
                                      style:
                                        --f7-range-bar-active-bg-color: rgba(255, 121, 0,0.1)
                                        --f7-range-bar-bg-color: linear-gradient(to right, rgba(255, 121, 0,0.5), rgba(200, 249, 253,1))
                                        --f7-range-bar-border-radius: 10px
                                        --f7-range-bar-size: 20px
                                        --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                                        --f7-range-knob-size: 25px
                                        margin-left: auto
                                        margin-right: auto
                                        width: 90%
                      - component: oh-repeater
                        config:
                          fetchMetadata: semantics,metadata
                          filter: '(loop.colorItem.type=="Color") ? true : false'
                          for: colorItem
                          groupItem: =props.light
                          sourceType: itemsInGroup
                        slots:
                          default:
                            - component: f7-row
                              config:
                                style:
                                  margin-bottom: 5px
                                  --f7-color-picker-slider-size: 15px
                                  --f7-color-picker-slider-knob-size: 25px
                              slots:
                                default:
                                  - component: oh-icon
                                    config:
                                      height: 30
                                      icon: f7:slider_horizontal_3
                                      style:
                                        color: '=(loop.colorItem.state == "ON") ? "yellow" : var(--f7-text-color)'
                                  - component: Label
                                    config:
                                      style:
                                        margin-right: auto
                                      text: =loop.colorItem.label
                                  - component: oh-colorpicker
                                    config:
                                      item: =loop.colorItem.name
                                      modules:
                                        - hsb-sliders
          - component: f7-tab
            config:
              class:
                - display-flex
                - justify-content-space-between
                - flex-direction-column
              style:
                animation: f7-fade-in 300ms
                margin: 5px
                padding: 0px
              visible: =(vars.select == 2)
            slots:
              default:
                - component: f7-segmented
                  config:
                    color: gray
                    raised: false
                    strong: true
                    style:
                      width: 100%
                      backdrop-filter: blur(5px)
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: toggle
                          actionItem: =props.heatingon_item
                          actionCommand: ON
                          actionCommandAlt: OFF
                          active: '=(items[props.heatingon_item].state == "ON") ? true : false'
                          iconF7: thermometer_sun
                          large: true
                          outline: '=(items[props.heatingon_item].state == "ON") ? true : false'
                          visible: "=props.heatingon_item ? true : false"
                      - component: oh-button
                        config:
                          action: toggle
                          actionItem: =props.coolingon_item
                          actionCommand: ON
                          actionCommandAlt: OFF
                          active: '=(items[props.coolingon_item].state == "ON") ? true : false'
                          iconF7: thermometer_snowflake
                          large: true
                          outline: '=(items[props.coolingon_item].state == "ON") ? true : false'
                          visible: "=props.coolingon_item ? true : false"
                      - component: oh-button
                        config:
                          action: toggle
                          actionItem: =props.fanon_item
                          actionCommand: ON
                          actionCommandAlt: OFF
                          active: '=(items[props.fanon_item].state == "ON") ? true : false'
                          iconF7: wind
                          large: true
                          outline: '=(items[props.fanon_item].state == "ON") ? true : false'
                          visible: "=props.fanon_item ? true : false"
                      - component: oh-button
                        config:
                          action: toggle
                          actionItem: =props.humidifieron_item
                          actionCommand: ON
                          actionCommandAlt: OFF
                          active: '=(items[props.humidifieron_item].state == "ON") ? true : false'
                          iconF7: drop
                          large: true
                          outline: '=(items[props.humidifieron_item].state == "ON") ? true : false'
                          visible: "=props.humidifieron_item ? true : false"
                - component: f7-block
                  config:
                    style:
                      display: flex
                      width: 100%
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            margin: auto
                          visible: "=props.temperatureset_item ? true : false"
                        slots:
                          default:
                            - component: f7-col
                              config: {}
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: var(--f7-text-color)
                                      text: Target temperature
                                  - component: oh-stepper
                                    config:
                                      autorepeat: true
                                      step: 0.5
                                      raised: true
                                      round: true
                                      fill: true
                                      item: =(props.temperatureset_item)
                                      style:
                                        backdrop-filter: blur(5px)
                                        filter: drop-shadow(0px 0px 1px var(--f7-card-bg-color))
                                        --f7-stepper-fill-button-bg-color: rgba(255, 0, 0, 0.4)
                                        --f7-stepper-value-text-color: var(--f7-text-color)
                                        --f7-stepper-height: 40px
                                        --f7-stepper-raised-box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5), -2px -2px 10px rgba(0, 0, 0, 0.5)
                                        --f7-stepper-value-font-weight: 600
                                        --f7-stepper-border-width: 0px
                            - component: f7-col
                              config:
                                visible: "=props.fanspeed_item ? true : false"
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: var(--f7-text-color)
                                      text: Fan mode
                                  - component: oh-stepper
                                    config:
                                      min: 1
                                      max: 4
                                      item: =props.fanspeed_item
                                      round: true
                                      raised: true
                                      fill: true
                                      style:
                                        backdrop-filter: blur(5px)
                                        filter: drop-shadow(0px 0px 1px var(--f7-card-bg-color))
                                        --f7-stepper-fill-button-bg-color: rgba(0, 0, 255, 0.4)
                                        --f7-stepper-value-text-color: var(--f7-text-color)
                                        --f7-stepper-height: 40px
                                        --f7-stepper-raised-box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5), -2px -2px 10px rgba(0, 0, 0, 0.5)
                                        --f7-stepper-value-font-weight: 600
                                        --f7-stepper-border-width: 0px
                      - component: f7-col
                        config:
                          style:
                            margin: auto
                          visible: "=props.humidityset_item ? true : false"
                        slots:
                          default:
                            - component: f7-col
                              config: {}
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: var(--f7-text-color)
                                      text: Target humidity
                                  - component: oh-stepper
                                    config:
                                      autorepeat: true
                                      autorepeatDynamic: true
                                      item: =props.humidityset_item
                                      round: true
                                      raised: true
                                      fill: true
                                      style:
                                        backdrop-filter: blur(5px)
                                        filter: drop-shadow(0px 0px 1px var(--f7-card-bg-color))
                                        --f7-stepper-fill-button-bg-color: rgba(0, 255, 255, 0.4)
                                        --f7-stepper-value-text-color: var(--f7-text-color)
                                        --f7-stepper-height: 40px
                                        --f7-stepper-raised-box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5), -2px -2px 10px rgba(0, 0, 0, 0.5)
                                        --f7-stepper-value-font-weight: 600
                                        --f7-stepper-border-width: 0px
                            - component: f7-col
                              config:
                                visible: "=props.humidifierfan_item ? true : false"
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: var(--f7-text-color)
                                      text: Humidifier fan mode
                                  - component: oh-stepper
                                    config:
                                      min: 1
                                      max: 4
                                      item: =props.humidifierfan_item
                                      round: true
                                      raised: true
                                      fill: true
                                      style:
                                        backdrop-filter: blur(5px)
                                        filter: drop-shadow(0px 0px 1px var(--f7-card-bg-color))
                                        --f7-stepper-fill-button-bg-color: rgba(0, 0, 255, 0.4)
                                        --f7-stepper-value-text-color: var(--f7-text-color)
                                        --f7-stepper-height: 40px
                                        --f7-stepper-raised-box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.5), -2px -2px 10px rgba(0, 0, 0, 0.5)
                                        --f7-stepper-value-font-weight: 600
                                        --f7-stepper-border-width: 0px
          - component: f7-tab
            config:
              class:
                - display-flex
                - justify-content-space-between
                - flex-direction-column
              style:
                animation: f7-fade-in 300ms
                font-weight: 600
                margin: 5px
                margin-right: 5px
                padding: 0px
                text-shadow: 1px 1px 1px var(--f7-card-bg-color), -1px -1px 1px var(--f7-card-bg-color), 1px -1px 1px var(--f7-card-bg-color), -1px 1px 1px var(--f7-card-bg-color)
              visible: =(vars.select == 3)
            slots:
              default:
                - component: f7-block
                  config:
                    style:
                      height: 70px
                  slots:
                    default:
                      - component: oh-button
                        config:
                          large: true
                          raised: true
                          style:
                            box-shadow: 0px 2px 5px
                            height: 40px
                            line-height: 1.5
                            top: 5px
                            white-space: pre-wrap
                            word-break: break-word
                          text: "=(items[props.sourceName].state !== 'UNDEF' ? (items[props.sourceName].state +' '+ items[props.mediaTitle].state) : items[props.mediaTitle].state)"
                          textColor: var(--f7-text-color)
                - component: f7-block
                  config:
                    style:
                      width: auto
                  slots:
                    default:
                      - component: f7-row
                        config: {}
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: "=(items[props.power].state === 'OFF') ? 'ON' : 'OFF' "
                                actionItem: =props.power
                                iconF7: power
                                iconSize: 20
                                style:
                                  background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                  border-radius: 12px
                                  box-shadow: 0px 2px 2px
                                  color: "=(items[props.power].state === 'OFF') ? 'var(--f7-text-color)' : 'red' "
                                  width: 25%
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: KEY_HOME
                                actionItem: =props.inputAction
                                iconF7: house
                                iconSize: 20
                                style:
                                  background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                  border-radius: 12px
                                  box-shadow: 0px 2px 2px
                                  color: var(--f7-text-color)
                                  width: 25%
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: KEY_MENU
                                actionItem: =props.inputAction
                                iconF7: menu
                                iconSize: 20
                                style:
                                  background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                  border-radius: 12px
                                  box-shadow: 0px 2px 5px
                                  color: var(--f7-text-color)
                                  width: 25%
                      - component: f7-row
                        config:
                          style:
                            color: var(--f7-text-color)
                            height: 37px
                            margin-top: 5px
                            width: 100%
                        slots:
                          default:
                            - component: f7-segmented
                              config:
                                round: true
                                strong: true
                                style:
                                  --f7-segmented-strong-between-buttons: 3px
                                  --f7-segmented-strong-padding: 0px
                                  border-radius: 12px
                                  box-shadow: 1px 0px 8px
                                  width: 100%
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      action: command
                                      actionCommand: INCREASE
                                      actionItem: =props.volumeControlItem
                                      iconF7: speaker_3
                                      iconSize: 25
                                      style:
                                        background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                        border-right: 1px solid gray
                                        width: 50%
                                  - component: oh-button
                                    config:
                                      action: command
                                      actionCommand: KEY_CHUP
                                      actionItem: =props.inputAction
                                      iconF7: arrow_up
                                      iconSize: 25
                                      style:
                                        background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                        border-left: 1px solid gray
                                        width: 50%
                      - component: f7-row
                        config:
                          style:
                            width: 100%
                        slots:
                          default:
                            - component: f7-segmented
                              config:
                                round: true
                                strong: true
                                style:
                                  --f7-segmented-strong-between-buttons: 3px
                                  --f7-segmented-strong-padding: 0px
                                  border-radius: 12px
                                  box-shadow: 1px 0px 5px
                                  width: 100%
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      action: command
                                      actionCommand: DECREASE
                                      actionItem: =props.volumeControlItem
                                      bgColor: black
                                      iconF7: speaker_1
                                      iconSize: 25
                                      style:
                                        background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                        border-right: 1px solid gray
                                        color: var(--f7-text-color)
                                        width: 50%
                                  - component: oh-button
                                    config:
                                      action: command
                                      actionCommand: KEY_CHDOWN
                                      actionItem: =props.inputAction
                                      bgColor: black
                                      iconF7: arrow_down
                                      iconSize: 25
                                      style:
                                        background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                        border-left: 1px solid gray
                                        color: var(--f7-text-color)
                                        width: 50%
                      - component: f7-row
                        config:
                          style:
                            margin-top: 10px
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: KEY_RED
                                actionItem: =props.inputAction
                                bgColor: black
                                iconF7: circle_fill
                                iconSize: 20
                                style:
                                  background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                  border-radius: 12px
                                  box-shadow: 0px 2px 5px
                                  color: red
                                  width: 20%
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: KEY_GREEN
                                actionItem: =props.inputAction
                                bgColor: black
                                iconF7: circle_fill
                                iconSize: 20
                                style:
                                  background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                  border-radius: 12px
                                  box-shadow: 0px 2px 5px
                                  color: green
                                  width: 20%
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: KEY_YELLOW
                                actionItem: =props.inputAction
                                bgColor: black
                                iconF7: circle_fill
                                iconSize: 20
                                style:
                                  background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                  border-radius: 12px
                                  box-shadow: 0px 2px 5px
                                  color: yellow
                                  width: 20%
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: KEY_BLUE
                                actionItem: =props.inputAction
                                bgColor: black
                                iconF7: circle_fill
                                iconSize: 20
                                style:
                                  background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                  border-radius: 12px
                                  box-shadow: 0px 2px 5px
                                  color: blue
                                  width: 20%
                      - component: f7-row
                        config:
                          style:
                            margin-top: 10px
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: KEY_REWIND
                                actionItem: =props.inputAction
                                bgColor: black
                                iconF7: backward_end
                                iconSize: 20
                                style:
                                  background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                  border-radius: 12px
                                  box-shadow: 0px 2px 5px
                                  color: var(--f7-text-color)
                                  width: 20%
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: KEY_STOP
                                actionItem: =props.inputAction
                                bgColor: black
                                iconF7: stop
                                iconSize: 20
                                style:
                                  background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                  border-radius: 12px
                                  box-shadow: 0px 2px 5px
                                  color: var(--f7-text-color)
                                  width: 20%
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: KEY_PLAY
                                actionItem: =props.inputAction
                                bgColor: black
                                iconF7: playpause
                                iconSize: 20
                                style:
                                  background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                  border-radius: 12px
                                  box-shadow: 0px 2px 5px
                                  color: var(--f7-text-color)
                                  width: 20%
                            - component: oh-button
                              config:
                                action: command
                                actionCommand: KEY_FF
                                actionItem: =props.inputAction
                                bgColor: black
                                iconF7: forward_end
                                iconSize: 20
                                style:
                                  background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                                  border-radius: 12px
                                  box-shadow: 0px 2px 5px
                                  color: var(--f7-text-color)
                                  width: 20%
                - component: f7-block
                  config:
                    style:
                      height: 220px
                      width: auto
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: KEY_EXIT
                          actionItem: =props.inputAction
                          style:
                            background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                            border-radius: 12px
                            box-shadow: 0px 2px 5px
                            color: var(--f7-text-color)
                            left: 10%
                            position: absolute
                            top: 15px
                            width: 70px
                          text: EXIT
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: KEY_MENU
                          actionItem: =props.inputAction
                          style:
                            background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                            border-radius: 12px
                            box-shadow: 0px 2px 5px
                            color: var(--f7-text-color)
                            position: absolute
                            right: 10%
                            top: 15px
                            width: 70px
                          text: MENU
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: KEY_MUTE
                          actionItem: =props.inputAction
                          iconF7: speaker_slash
                          iconSize: 25
                          style:
                            background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                            border-radius: 12px
                            box-shadow: 0px 2px 5px
                            color: red
                            left: 50%
                            position: absolute
                            top: 15px
                            transform: translate(-50%)
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: KEY_RETURN
                          actionItem: =props.inputAction
                          iconF7: arrow_counterclockwise
                          iconSize: 25
                          style:
                            background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                            border-bottom: 0px
                            border-radius: 12px
                            box-shadow: 0px 2px 5px
                            color: var(--f7-text-color)
                            display: flex
                            height: 40px
                            left: 10%
                            position: absolute
                            top: 60px
                            transform: skew(140deg)
                            width: 15%
                            z-index: 2
                      - component: f7-badge
                        config:
                          bgColor: gray
                          style:
                            background-image: "linear-gradient(300deg, #1C1C1C 10%, #494949 360%)"
                            border-radius: 100px/100px
                            box-shadow: 1px 0px 8px
                            height: 160px
                            left: 50%
                            position: absolute
                            top: 60px
                            transform: translate(-50%)
                            width: 160px
                            z-index: 1
                      - component: f7-badge
                        config:
                          bgColor: black
                          style:
                            background-image: "linear-gradient(360deg, #1C1C1C 1%, #494949 90%)"
                            border-radius: 60px
                            box-shadow: 1px 0px 8px
                            height: 60px
                            left: 50%
                            position: absolute
                            top: 110px
                            transform: translate(-50%)
                            width: 60px
                            z-index: 3
                      - component: oh-link
                        config:
                          action: command
                          actionCommand: KEY_ENTER
                          actionItem: =props.inputAction
                          style:
                            color: var(--f7-text-color)
                            font-size: 18px
                            left: 50%
                            position: absolute
                            top: 125px
                            transform: translate(-50%)
                            z-index: 3
                          text: OK
                      - component: oh-link
                        config:
                          action: command
                          actionCommand: KEY_UP
                          actionItem: =props.inputAction
                          iconF7: arrowtriangle_up
                          iconSize: 35
                          style:
                            color: var(--f7-text-color)
                            left: 50%
                            position: absolute
                            top: 67px
                            transform: translate(-50%)
                            z-index: 2
                      - component: oh-link
                        config:
                          action: command
                          actionCommand: KEY_LEFT
                          actionItem: =props.inputAction
                          iconF7: arrowtriangle_left
                          iconSize: 35
                          style:
                            color: var(--f7-text-color)
                            left: 50%
                            position: absolute
                            top: 120px
                            transform: translate(-75px)
                            z-index: 2
                      - component: oh-link
                        config:
                          action: command
                          actionCommand: KEY_RIGHT
                          actionItem: =props.inputAction
                          iconF7: arrowtriangle_right
                          iconSize: 35
                          style:
                            color: var(--f7-text-color)
                            left: 50%
                            position: absolute
                            top: 120px
                            transform: translate(45px)
                            z-index: 2
                      - component: oh-link
                        config:
                          action: command
                          actionCommand: KEY_DOWN
                          actionItem: =props.inputAction
                          iconF7: arrowtriangle_down
                          iconSize: 35
                          style:
                            color: var(--f7-text-color)
                            left: 50%
                            position: absolute
                            top: 180px
                            transform: translate(-50%)
                            z-index: 2
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: left
                          actionItem: =props.inputaction
                          iconF7: circle
                          iconSize: 25
                          style:
                            align-items: center
                            background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                            border-bottom: 0px
                            border-radius: 12px
                            box-shadow: 0px 2px 5px
                            color: var(--f7-text-color)
                            display: flex
                            height: 40px
                            justify-content: center
                            position: absolute
                            right: 10%
                            top: 60px
                            transform: skew(40deg)
                            width: 15%
                            z-index: 2
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: KEY_GUIDE
                          actionItem: =props.inputaction
                          iconF7: doc_plaintext
                          iconSize: 25
                          style:
                            align-items: center
                            background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                            border-bottom: 0px
                            border-radius: 12px
                            box-shadow: 0px 2px 5px
                            color: var(--f7-text-color)
                            display: flex
                            height: 40px
                            justify-content: center
                            left: 10%
                            position: absolute
                            top: 180px
                            transform: skew(40deg)
                            width: 15%
                            z-index: 2
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: KEY_INFO
                          actionItem: =props.inputAction
                          iconF7: info_circle
                          iconSize: 25
                          style:
                            align-items: center
                            background-image: "linear-gradient(360deg, #1C1C1C 10%, #494949 360%)"
                            border-bottom: 0px
                            border-radius: 12px
                            box-shadow: 0px 2px 5px
                            color: var(--f7-text-color)
                            display: flex
                            height: 40px
                            justify-content: center
                            position: absolute
                            right: 10%
                            top: 180px
                            transform: skew(140deg)
                            width: 15%
                            z-index: 2
          - component: f7-tab
            config:
              style:
                animation: f7-fade-in 300ms
                filter: drop-shadow(0px 1px 1px var(--f7-card-bg-color))
                margin: 5px
                margin-right: 5px
                padding: 0px
              visible: =(vars.select == 4)
            slots:
              default:
                - component: oh-list
                  config: {}
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          accordionItem: true
                          action: toggle
                          actionCommand: ON
                          actionCommandAlt: OFF
                          actionItem: =[props.lock_item]
                          badge: '=(items[props.lock_item].state == "ON") ? "Closed" : "Open"'
                          badgeColor: '=(items[props.lock_item].state == "ON") ? "green" : "red"'
                          icon: "=(items[props.lock_item].state === 'ON') ? 'f7:lock' : 'f7:lock_open'"
                          item: =props.lock_item
                          style:
                            font-size: large
                          title: Lock
                          visible: "=props.lock_item ? true : false"
                      - component: oh-list-item
                        config:
                          accordionItem: true
                          action: analyzer
                          actionAnalyzerItems: =[props.door_item]
                          badge: '=(items[props.door_item].state == "ON") ? "Closed" : "Open"'
                          badgeColor: '=(items[props.door_item].state == "ON") ? "green" : "red"'
                          icon: "=(items[props.door_item].state === 'ON') ? 'door-closed' : 'door-open'"
                          item: =props.door_item
                          style:
                            font-size: large
                          title: Doors
                          visible: "=props.door_item ? true : false"
                        slots:
                          accordion:
                            - component: oh-repeater
                              config:
                                for: item
                                fragment: true
                                groupItem: =props.door_item
                                sourceType: itemsInGroup
                              slots:
                                default:
                                  - component: oh-list-item
                                    config:
                                      action: analyzer
                                      actionAnalyzerCoordSystem: time
                                      actionAnalyzerItems: =[loop.item.name]
                                      badge: '=(items[loop.item.name].state == "ON") ? "Closed" : "Open"'
                                      badgeColor: '=(items[loop.item.name].state == "ON") ? "green" : "red"'
                                      icon: '=(items[loop.item.name].state == "ON") ? "door-closed" : "door-open"'
                                      item: =loop.item.name
                                      title: =loop.item.label
                      - component: oh-list-item
                        config:
                          accordionItem: true
                          action: analyzer
                          actionAnalyzerItems: =[props.window_item]
                          badge: '=(items[props.window_item].state == "ON") ? "Closed" : "Open"'
                          badgeColor: '=(items[props.window_item].state == "ON") ? "green" : "red"'
                          icon: "=(items[props.window_item].state === 'ON') ? 'window-closed' : 'window-open'"
                          item: =props.window_item
                          style:
                            font-size: large
                          title: Windows
                          visible: "=props.window_item ? true : false"
                        slots:
                          accordion:
                            - component: oh-repeater
                              config:
                                for: item
                                fragment: true
                                groupItem: =props.window_item
                                sourceType: itemsInGroup
                              slots:
                                default:
                                  - component: oh-list-item
                                    config:
                                      action: analyzer
                                      actionAnalyzerCoordSystem: time
                                      actionAnalyzerItems: =[loop.item.name]
                                      badge: '=(items[loop.item.name].state == "ON") ? "Closed" : "Open"'
                                      badgeColor: '=(items[loop.item.name].state == "ON") ? "gray" : "lightblue"'
                                      icon: '=(items[loop.item.name].state == "ON") ? "window-closed" : "window-open"'
                                      item: =loop.item.name
                                      title: =loop.item.label
                      - component: oh-list-item
                        config:
                          accordionItem: true
                          action: analyzer
                          actionAnalyzerItems: =[props.motion_item]
                          badge: '=(items[props.motion_item].state == "ON") ? "Movement" : "Calm"'
                          badgeColor: '=(items[props.motion_item].state == "ON") ? "red" : "green"'
                          icon: f7:dot_radiowaves_left_right
                          item: =props.motion_item
                          style:
                            font-size: large
                          title: Movement
                          visible: "=props.motion_item ? true : false"
                        slots:
                          accordion:
                            - component: oh-repeater
                              config:
                                for: item
                                fragment: true
                                groupItem: =props.motion_item
                                sourceType: itemsInGroup
                              slots:
                                default:
                                  - component: oh-list-item
                                    config:
                                      action: analyzer
                                      actionAnalyzerCoordSystem: time
                                      actionAnalyzerItems: =[loop.item.name]
                                      badge: '=(items[loop.item.name].state == "ON") ? "Movement" : "Calm"'
                                      badgeColor: '=(items[loop.item.name].state == "ON") ? "red" : "green"'
                                      icon: f7:dot_radiowaves_left_right
                                      item: =loop.item.name
                                      title: =loop.item.label
                      - component: oh-list-item
                        config:
                          action: analyzer
                          actionAnalyzerItems: =[props.leakage_item]
                          badge: '=(items[props.leakage_item].state == "ON") ? "Leak" : "Dry"'
                          badgeColor: '=(items[props.leakage_item].state == "ON") ? "red" : "green"'
                          icon: "=(items[props.leakage_item].state === 'ON') ? 'f7:drop_triangle' : 'f7:drop'"
                          item: =props.motion_item
                          style:
                            font-size: large
                          title: Leakage
                          visible: "=props.leakage_item ? true : false"
                      - component: oh-list-item
                        config:
                          action: analyzer
                          actionAnalyzerItems: =[props.smoke_item]
                          badge: '=(items[props.smoke_item].state == "ON") ? "Smoke" : "No smoke"'
                          badgeColor: '=(items[props.smoke_item].state == "ON") ? "red" : "green"'
                          icon: "=(items[props.smoke_item].state === 'ON') ? 'f7:flame_fill' : 'f7:flame'"
                          item: =props.smoke_item
                          style:
                            font-size: large
                          title: Smoke
                          visible: "=props.smoke_item ? true : false"
          - component: f7-tab
            config:
              class:
                - display-flex
                - justify-content-space-between
                - flex-direction-column
              style:
                animation: f7-fade-in 300ms
                margin: 5px
                padding: 0px
              visible: =(vars.select == 5)
            slots:
              default:
                - component: f7-block
                  config:
                    style:
                      text-shadow: none
                      width: 100%
                  slots:
                    default:
                      - component: oh-chart
                        config:
                          height: 50vh
                          options:
                            backgroundColor: rgba(0,0,0,0.5)
                            color:
                              - red
                              - "#01ffa6"
                              - yellow
                              - "#1689f2"
                            textStyle:
                              color: white
                        slots:
                          dataZoom:
                            - component: oh-chart-datazoom
                              config:
                                type: inside
                          grid:
                            - component: oh-chart-grid
                              config:
                                includeLabels: true
                                left: center
                                width: 60%
                          legend:
                            - component: oh-chart-legend
                              config:
                                bottom: 1
                                textStyle:
                                  color: var(--f7-text-color)
                                type: scroll
                          series:
                            - component: oh-time-series
                              config:
                                gridIndex: 0
                                item: =props.temp_item
                                name: Temperature
                                type: line
                                visible: "=props.temp_item ? true : false"
                                xAxisIndex: 0
                                yAxisIndex: 0
                            - component: oh-time-series
                              config:
                                gridIndex: 0
                                item: =props.humidity_item
                                name: Humidity
                                type: line
                                visible: "=props.humidity_item ? true : false"
                                xAxisIndex: 0
                                yAxisIndex: 1
                            - component: oh-time-series
                              config:
                                gridIndex: 0
                                item: =props.lightlevel_item
                                name: Lightlevel
                                type: line
                                visible: "=props.lightlevel_item ? true : false"
                                xAxisIndex: 0
                                yAxisIndex: 2
                            - component: oh-time-series
                              config:
                                gridIndex: 0
                                item: =props.CO_item
                                name: CO2
                                type: line
                                visible: "=props.CO_item ? true : false"
                                xAxisIndex: 0
                                yAxisIndex: 3
                          tooltip:
                            - component: oh-chart-tooltip
                              config:
                                confine: true
                                smartFormatter: true
                          xAxis:
                            - component: oh-time-axis
                              config:
                                gridIndex: 0
                          yAxis:
                            - component: oh-value-axis
                              config:
                                gridIndex: 0
                                name: °C
                                nameLocation: start
                                position: left
                                show: "=props.temp_item ? true : false"
                            - component: oh-value-axis
                              config:
                                gridIndex: 0
                                name: "%"
                                nameLocation: start
                                position: right
                                show: "=props.humidity_item ? true : false"
                            - component: oh-value-axis
                              config:
                                gridIndex: 0
                                name: lux
                                nameLocation: start
                                offset: 20
                                position: left
                                show: "=props.lightlevel_item ? true : false"
                            - component: oh-value-axis
                              config:
                                gridIndex: 0
                                name: ppm
                                nameLocation: start
                                offset: 30
                                scale: true
                                show: "=props.CO_item ? true : false"

Widgets are using custom icons, so you’ll have to download them and place them to openhab’s /icons/classic directory, or change the code to your preferred icons.

carbondioxidecloud
carbondioxidecloud
carbondioxidecloud-1500
carbondioxidecloud-2000
hum
hum-4
hum-14
hum-29
hum-40
hum-60
hum-84
lightlevel
lightlevel-0
lightlevel-1
lightlevel-10
lightlevel-19
martinitemp
martinitemp-0
martinitemp-5
martinitemp-10
martinitemp-20
martinitemp-30
martinitemp-40

Thanks for posting. Be advised, however, that I don’t think this will work for users who try to install this via the Add-on market place in OH because of the two different widget code blocks. If you want users to be able to get this via the market place you’ll have to incorporate the popup widget code into the main cell code or make two separate widget posts so users can install the main widget and the popup separately.

1 Like

We should be able to upload zips and jars to solve this, premoderated maybe.