OH3 Netatmo Widget

Hello,
I have created my first OH3 widget to show my most important Netatmo parameters of the inside modules. The target is a similar design as oh-cell-card.

However, I have still some challenges with the syntax:

  1. The f7-card shadow seems to be larger than the original oh-cell background-shadow
  2. I would like to make this widget to open another page if I click on it - also with the same click behavior of oh-cell-card.
    Is it possible to add and “action” or do I need to add a oh-button? how can I do this?

many thanks :slight_smile:

uid: widget_NetAtmo_v2
tags: []
props:
  parameters:
- description: Set Location
  label: Location
  name: location
  required: false
  type: TEXT
- description: Set Sensor Name - Room 1
  label: Location
  name: locRoom1
  required: false
  type: TEXT
- context: item
  description: Item Sensor Room 1
  label: item
  name: Room_1
  required: false
  type: TEXT
- description: Image Room 1
  label: Image Path
  name: Image_1
  required: false
  type: TEXT
- description: Set Sensor Name - Room 2
  label: Location
  name: locRoom2
  required: false
  type: TEXT
- context: item
  description: Item Sensor Room 2
  label: item
  name: Room_2
  required: false
  type: TEXT
- description: Image Room 2
  label: Image Path
  name: Image_2
  required: false
  type: TEXT
- description: Set Sensor Name - Room 3
  label: Location
  name: locRoom3
  required: false
  type: TEXT
- context: item
  description: Item Sensor Room 3
  label: item
  name: Room_3
  required: false
  type: TEXT
- description: Image Room 3
  label: Image Path
  name: Image_3
  required: false
  type: TEXT
- description: Set Sensor Name - Room 4
  label: Location
  name: locRoom4
  required: false
  type: TEXT
- context: item
  description: Item Sensor Room 4
  label: item
  name: Room_4
  required: false
  type: TEXT
- description: Image Room 4
  label: Image Path
  name: Image_4
  required: false
  type: TEXT
- description: Set Temperatur Color
  label: Temperatur Color
  name: ColorTemp
  required: false
  type: TEXT
- description: Set Humidity Color
  label: Humidity Color
  name: ColorHumidity
  required: false
  type: TEXT
- description: Set CO2 Color
  label: CO2 Color
  name: ColorCO2
  required: false
  type: TEXT
- description: Set CO2 Threshold Value
  label: CO2 Threshold Value
  name: ThresholdCO2
  required: false
- description: Set CO2 Threshold Color
  label: CO2 Threshold Color
  name: ThresholdColorCO2
  required: false
  type: TEXT
- description: Set opacity for background Images
  label: Opacity Image (e.g. 20%)
  name: opacity
  required: false
  parameterGroups: []
timestamp: Feb 10, 2021, 8:27:01 PM
component: f7-card
config:
  title: =props.location
  style:
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: var(--f7-card-expandable-box-shadow)
width: auto
margin: 5px
  class:
- no-padding
#- no-margin

#- oh-cell
#- label-cell
#- cell-button
slots:
  default:
- component: f7-card-content
  slots:
    default:
      - component: f7-row
        config:
          class:
            - display-flex
            - justify-content-space-between
            - align-content-stretch
            - align-items-center
          style:
            flex-wrap: nowrap
        slots:
          default:
            - component: f7-col
              config:
                style:
                  width: 20px
                class:
                  - display-flex
                  - flex-direction-column
                  - align-items-center
            - component: f7-col
              config:
                style:
                  width: 100px
                class:
                  - display-flex
                  - flex-direction-column
                  - align-items-center
              slots:
                default:
                  - component: Label
                    config:
                      text: = props.locRoom1
                      style:
                        fontSize: 11px
                        fontWeight: 400
                        color: =props.ColorTemp
                        z-index: 1
                        text-align: center
                      class:
                        - margin-horizontal
            - component: f7-col
              config:
                style:
                  width: 100px
                class:
                  - display-flex
                  - flex-direction-column
                  - align-items-center
              slots:
                default:
                  - component: Label
                    config:
                      text: = props.locRoom2
                      style:
                        fontSize: 11px
                        fontWeight: 400
                        color: =props.ColorTemp
                        z-index: 1
                        text-align: center
                      class:
                        - margin-horizontal
            - component: f7-col
              config:
                style:
                  width: 100px
                class:
                  - display-flex
                  - flex-direction-column
                  - align-items-center
              slots:
                default:
                  - component: Label
                    config:
                      text: = props.locRoom3
                      style:
                        fontSize: 11px
                        fontWeight: 400
                        color: =props.ColorTemp
                        z-index: 1
                        text-align: center
                      class:
                        - margin-horizontal
            - component: f7-col
              config:
                style:
                  width: 100px
                class:
                  - display-flex
                  - flex-direction-column
                  - align-items-center
              slots:
                default:
                  - component: Label
                    config:
                      text: = props.locRoom4
                      style:
                        fontSize: 11px
                        fontWeight: 400
                        color: =props.ColorTemp
                        z-index: 1
                        text-align: center
                      class:
                        - margin-horizontal
      - component: f7-row
        config:
          class:
            - display-flex
            - justify-content-space-between
            - align-content-stretch
            - align-items-center
          style:
            flex-wrap: nowrap
        slots:
          default:
            - component: f7-col
              config:
                style:
                  width: 20px
                class:
                  - display-flex
                  - flex-direction-column
                  - align-items-center
              slots:
                default:
                  - component: f7-icon
                    config:
                      f7: thermometer
                      color: blue
                      size: 24
                      class:
                        - margin-horizontal
                  - component: f7-icon
                    config:
                      f7: drop
                      color: blue
                      size: 24
                      class:
                        - margin-horizontal
                  - component: f7-icon
                    config:
                      f7: gauge
                      color: blue
                      size: 24
                      class:
                        - margin-horizontal
            - component: f7-col
              config:
                style:
                  width: 105px
                class:
                  - display-flex
                  - flex-direction-column
                  - align-items-center
              slots:
                default:
                  - component: oh-image
                    config:
                      url: = props.Image_1
                      noShadow: true
                      noBorder: true
                      outline: false
                      style:
                        position: absolute
                        height: 80px
                        opacity: =props.opacity
                        z-index: 0
                  - component: Label
                    config:
                      text: "=items[((props.Room_1 === undefined) ? '' : props.Room_1) + '_Temperatur'].displayState"
                      style:
                        fontSize: 20px
                        fontWeight: 600
                        color: =props.ColorTemp
                        z-index: 1
                      class:
                        - margin-horizontal
                  - component: Label
                    config:
                      text: "=items[((props.Room_1 === undefined) ? '' : props.Room_1) + '_Luftfeuchtigkeit'].state"
                      style:
                        fontSize: 16px
                        fontWeight: 600
                        color: =props.ColorHumidity
                      class:
                        - margin-horizontal
                  - component: Label
                    config:
                      text: "=items[((props.Room_1 === undefined) ? '' : props.Room_1) + '_CO2Gehalt'].state"
                      style:
                        fontSize: 14px
                        fontWeight: 600
                        color: '=(Number.parseInt(items[props.Room_1 + "_CO2Gehalt"].state) > props.ThresholdCO2) ? props.ThresholdColorCO2 : props.ColorCO2'
                      class:
                        - margin-horizontal
            - component: f7-col
              config:
                style:
                  width: 105px
                class:
                  - display-flex
                  - flex-direction-column
                  - align-items-center
              slots:
                default:
                  - component: oh-image
                    config:
                      url: = props.Image_2
                      noShadow: true
                      noBorder: true
                      outline: false
                      style:
                        position: absolute
                        height: 80px
                        opacity: =props.opacity
                        z-index: 0
                  - component: Label
                    config:
                      text: "=items[((props.Room_2 === undefined) ? '' : props.Room_2) + '_Temperatur'].displayState"
                      style:
                        fontSize: 20px
                        fontWeight: 600
                        color: =props.ColorTemp
                      class:
                        - margin-horizontal
                  - component: Label
                    config:
                      text: "=items[((props.Room_2 === undefined) ? '' : props.Room_2) + '_Luftfeuchtigkeit'].state"
                      style:
                        fontSize: 16px
                        fontWeight: 600
                        color: =props.ColorHumidity
                      class:
                        - margin-horizontal
                  - component: Label
                    config:
                      text: "=items[((props.Room_2 === undefined) ? '' : props.Room_2) + '_CO2Gehalt'].state"
                      style:
                        fontSize: 14px
                        fontWeight: 600
                        color: '=(Number.parseInt(items[props.Room_2 + "_CO2Gehalt"].state) > props.ThresholdCO2) ? props.ThresholdColorCO2 : props.ColorCO2'
                      class:
                        - margin-horizontal
            - component: f7-col
              config:
                style:
                  width: 105px
                class:
                  - display-flex
                  - flex-direction-column
                  - align-items-center
              slots:
                default:
                  - component: oh-image
                    config:
                      url: = props.Image_3
                      noShadow: true
                      noBorder: true
                      outline: false
                      style:
                        position: absolute
                        height: 80px
                        opacity: =props.opacity
                        z-index: 0
                  - component: Label
                    config:
                      text: "=items[((props.Room_3 === undefined) ? '' : props.Room_3) + '_Temperatur'].displayState"
                      style:
                        fontSize: 20px
                        fontWeight: 600
                        color: =props.ColorTemp
                      class:
                        - margin-horizontal
                  - component: Label
                    config:
                      text: "=items[((props.Room_3 === undefined) ? '' : props.Room_3) + '_Luftfeuchtigkeit'].state"
                      style:
                        fontSize: 16px
                        fontWeight: 600
                        color: =props.ColorHumidity
                      class:
                        - margin-horizontal
                  - component: Label
                    config:
                      text: "=items[((props.Room_3 === undefined) ? '' : props.Room_3) + '_CO2Gehalt'].state"
                      style:
                        fontSize: 14px
                        fontWeight: 600
                        color: '=(Number.parseInt(items[props.Room_3 + "_CO2Gehalt"].state) > props.ThresholdCO2) ? props.ThresholdColorCO2 : props.ColorCO2'
                      class:
                        - margin-horizontal
            - component: f7-col
              config:
                style:
                  width: 105px
                class:
                  - display-flex
                  - flex-direction-column
                  - align-items-center
              slots:
                default:
                  - component: oh-image
                    config:
                      url: = props.Image_4
                      noShadow: true
                      noBorder: true
                      outline: false
                      style:
                        position: absolute
                        height: 80px
                        opacity: =props.opacity
                        z-index: 0
                  - component: Label
                    config:
                      text: "=items[((props.Room_4 === undefined) ? '' : props.Room_4) + '_Temperatur'].displayState"
                      style:
                        fontSize: 20px
                        fontWeight: 600
                        color: =props.ColorTemp
                      class:
                        - margin-horizontal
                  - component: Label
                    config:
                      text: "=items[((props.Room_4 === undefined) ? '' : props.Room_4) + '_Luftfeuchtigkeit'].state"
                      style:
                        fontSize: 15px
                        fontWeight: 600
                        color: =props.ColorHumidity
                      class:
                        - margin-horizontal
                  - component: Label
                    config:
                      text: "=items[((props.Room_4 === undefined) ? '' : props.Room_4) + '_CO2Gehalt'].state"
                      style:
                        fontSize: 14px
                        fontWeight: 600
                        color: '=(Number.parseInt(items[props.Room_4 + "_CO2Gehalt"].state) > props.ThresholdCO2) ? props.ThresholdColorCO2 : props.ColorCO2'
                      class:
                        - margin-horizontal
3 Likes

Nice widget!

to your second question, no need to add a button, you can simply add something like this:

- component: oh-link
  config:
    action: url
    actionUrl: http://www.wetteronline.de
    actionUrlSameWindow: true
    style:
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 0

You can vary with the action, link this to a website, to a widget or group detail. The example above is for URL linking.

to question 1, i believe you set this with the parameters:

border-radius: var(–f7-card-expandable-border-radius)
box-shadow: var(–f7-card-expandable-box-shadow)

Thanks for the hint.
I tested the oh-link and it works in general.
Just wondering how to enable the “click” behavior a oh-cell has. When you click on oh-cell you have this nice animation, like clicking a real button.

For the box shadow I’m not sure how to change the values - any hints are welcome :slight_smile:

Edit: I have use below to change the box-shadow, and this works in general.
However, when mode changed from Day to Night, the shadow still remains, but should disappear.
Any hint how to make this depending on the active theme (black or white)?

--f7-card-expandable-box-shadow: 5px 5px 5px gray

I am interested in this question as well. the oh-cell has a click behaviour that the f7-card does not have “on board”. Does anyone know how to apply this to the f7-card?

I just found that the f7-card gets the oh-cell behavior when you use below class. However the card content isn’t displayed anymore properly.

class:
 - card-expandable: true

Hi, iI try to use this widget, but something went wrong.
I copied the widgetcode from the beginning.

Then I create a widget from the developer settings.
In the opened window I deleted the example code and copied the code from
here into the window.
What I get is

Has somebody an idea what I did wrong?

Hi Thorsten,

seems something went wrong with the formatting when I copied the code - I can share the code again if you like, but I have a newer version in the meantime, also containing fields for outside, rain and wind sensor.


uid: widget_NetAtmo_v3
tags: []
props:
  parameters:
    - description: Set Location
      label: Location
      name: location
      required: false
      type: TEXT
    - context: item
      description: Item Sensor Outside
      label: item
      name: locOutside
      required: false
      type: TEXT
    - context: item
      description: Item Sensor Rain
      label: item
      name: locRain
      required: false
      type: TEXT
    - context: item
      description: Item Sensor Wind
      label: item
      name: locWind
      required: false
      type: TEXT
    - description: Set Sensor Name - Room 1 (Main Station)
      label: Location
      name: locRoom1
      required: false
      type: TEXT
    - context: item
      description: Item Sensor Room 1 (Main Station)
      label: item
      name: Room_1
      required: false
      type: TEXT
    - description: Image Room 1 (Main Station)
      label: Image Path
      name: Image_1
      required: false
      type: TEXT
    - description: Set Sensor Name - Room 2
      label: Location
      name: locRoom2
      required: false
      type: TEXT
    - context: item
      description: Item Sensor Room 2
      label: item
      name: Room_2
      required: false
      type: TEXT
    - description: Image Room 2
      label: Image Path
      name: Image_2
      required: false
      type: TEXT
    - description: Set Sensor Name - Room 3
      label: Location
      name: locRoom3
      required: false
      type: TEXT
    - context: item
      description: Item Sensor Room 3
      label: item
      name: Room_3
      required: false
      type: TEXT
    - description: Image Room 3
      label: Image Path
      name: Image_3
      required: false
      type: TEXT
    - description: Set Sensor Name - Room 4
      label: Location
      name: locRoom4
      required: false
      type: TEXT
    - context: item
      description: Item Sensor Room 4
      label: item
      name: Room_4
      required: false
      type: TEXT
    - description: Image Room 4
      label: Image Path
      name: Image_4
      required: false
      type: TEXT
    - description: Set Temperatur Color
      label: Temperatur Color
      name: ColorTemp
      required: false
      type: TEXT
    - description: Set Humidity Color
      label: Humidity Color
      name: ColorHumidity
      required: false
      type: TEXT
    - description: Set CO2 Color
      label: CO2 Color
      name: ColorCO2
      required: false
      type: TEXT
    - description: Set CO2 Threshold Value
      label: CO2 Threshold Value
      name: ThresholdCO2
      required: false
    - description: Set CO2 Threshold Color
      label: CO2 Threshold Color
      name: ThresholdColorCO2
      required: false
      type: TEXT
    - description: Set opacity for background Images
      label: Opacity Image (e.g. 20%)
      name: opacity
      required: false
      advanced: true
  parameterGroups: []
timestamp: Feb 23, 2021, 10:02:48 PM
component: f7-card
config:
  title: =props.location
  style:
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: var(--f7-card-expandable-box-shadow)
  class:
    - no-padding
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config: {}
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: inherit
                      flex-wrap: nowrap
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-flex-start
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: thermometer
                          color: blue
                          size: 50
                          style:
                            position: absolute
                            z-index: 0
                            opacity: 20%
                      - component: f7-row
                        slots:
                          default:
                            - component: Label
                              config:
                                text: "=items[((props.locOutside === undefined) ? '' : props.locOutside) + '_Temperatur'].displayState"
                                style:
                                  font-size: 30px
                                  font-weight: 500
                                  line-height: 30px
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  z-index: 1
                      - component: f7-row
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: thermometer
                                color: blue
                                size: 16
                                style:
                                  margin-top: 3px
                                  margin-right: 2px
                            - component: Label
                              config:
                                text: "=items[((props.locOutside === undefined) ? '' : props.locOutside) + '_MinTemperatur'].displayState"
                                style:
                                  font-size: 12px
                                  font-weight: 230
                                  line-height: 20px
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: ellipsis
                            - component: f7-icon
                              config:
                                f7: thermometer
                                color: red
                                size: 16
                                style:
                                  margin-top: 3px
                                  margin-left: 5px
                                  margin-right: 2px
                            - component: Label
                              config:
                                text: "=items[((props.locOutside === undefined) ? '' : props.locOutside) + '_MaxTemperatur'].displayState"
                                style:
                                  font-size: 12px
                                  font-weight: 230
                                  line-height: 20px
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: ellipsis
                - component: f7-col
                  config:
                    style:
                      width: inherit
                      flex-wrap: nowrap
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-center
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: wind
                          color: blue
                          size: 50
                          style:
                            position: absolute
                            z-index: 0
                            opacity: 20%
                      - component: f7-row
                        slots:
                          default:
                            - component: Label
                              config:
                                text: "=items[((props.locWind === undefined) ? '' : props.locWind) + '_Windgeschwindigkeit'].displayState"
                                style:
                                  font-size: 25px
                                  font-weight: 500
                                  line-height: 30px
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  z-index: 1
                      - component: f7-row
                        config: {}
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: flag
                                color: blue
                                size: 16
                                style:
                                  margin-top: 3px
                                  margin-right: 2px
                            - component: Label
                              config:
                                text: "=items[((props.locWind === undefined) ? '' : props.locWind) + '_BoenGeschwindigkeit'].displayState"
                                style:
                                  font-size: 12px
                                  font-weight: 230
                                  line-height: 20px
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: ellipsis
                            - component: f7-icon
                              config:
                                f7: location
                                color: blue
                                size: 16
                                style:
                                  margin-top: 3px
                                  margin-left: 5px
                                  margin-right: 2px
                            - component: Label
                              config:
                                text: "=items[((props.locWind === undefined) ? '' : props.locWind) + '_Windrichtung'].state"
                                style:
                                  font-size: 12px
                                  font-weight: 230
                                  line-height: 20px
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: ellipsis
                - component: f7-col
                  config:
                    style:
                      width: inherit
                      flex-wrap: nowrap
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-flex-end
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: cloud_rain
                          color: blue
                          size: 50
                          style:
                            position: absolute
                            z-index: 0
                            opacity: 20%
                      - component: f7-row
                        slots:
                          default:
                            - component: Label
                              config:
                                text: "=items[((props.locRain === undefined) ? '' : props.locRain) + '_Niederschlag'].state"
                                style:
                                  font-size: 25px
                                  font-weight: 500
                                  line-height: 30px
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  z-index: 1
                      - component: f7-row
                        config: {}
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: arrow_counterclockwise
                                color: blue
                                size: 17
                                style:
                                  margin-top: 0em
                                  margin-right: 1px
                            - component: Label
                              config:
                                text: 1
                                style:
                                  font-size: 6px
                                  font-weight: 600
                                  line-height: 21px
                                  margin-left: -11px
                                  margin-top: 0.15em
                                  color: rgba(33,150,243,1)
                            - component: Label
                              config:
                                text: "=items[((props.locRain === undefined) ? '' : props.locRain) + '_KumulierterNiederschlag1h'].displayState"
                                style:
                                  font-size: 12px
                                  font-weight: 230
                                  line-height: 20px
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  margin-left: 10px
                            - component: f7-icon
                              config:
                                f7: arrow_counterclockwise
                                color: blue
                                size: 17
                                style:
                                  margin-top: 1px
                                  margin-right: 1px
                            - component: Label
                              config:
                                text: 24
                                style:
                                  font-size: 6px
                                  font-weight: 600
                                  line-height: 21px
                                  margin-left: -14px
                                  margin-top: 0.15em
                                  color: rgba(33,150,243,1)
                            - component: Label
                              config:
                                text: "=items[((props.locRain === undefined) ? '' : props.locRain) + '_KumulierterNiederschlag24h'].displayState"
                                style:
                                  font-size: 12px
                                  font-weight: 230
                                  line-height: 20px
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  margin-left: 10px
          - component: f7-row
            config:
              style:
                width: 180px
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 100%
                    class:
                      - display-flex
                      - flex-direction-row
                      - align-items-center
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: drop
                          color: blue
                          size: 16
                      - component: Label
                        config:
                          text: "=items[((props.locOutside === undefined) ? '' : props.locOutside) + '_Luftfeuchtigkeit'].state"
                          style:
                            font-size: 15px
                            font-weight: 300
                            line-height: 35px
                            white-space: nowrap
                            overflow: hidden
                            text-overflow: ellipsis
                      - component: f7-icon
                        config:
                          f7: gauge
                          color: blue
                          size: 16
                          style:
                            margin-left: 10px
                      - component: Label
                        config:
                          text: "=items[((props.Room_1 === undefined) ? '' : props.Room_1) + '_Luftdruck'].displayState"
                          style:
                            font-size: 15px
                            font-weight: 300
                            line-height: 35px
                            white-space: nowrap
                            overflow: hidden
                            text-overflow: ellipsis
                - component: f7-col
                  config:
                    class: col-60
          - component: oh-link
            config:
              actionUrlSameWindow: true
              style:
                position: absolute
                width: 0%
                height: 0%
                top: 0
                left: 0
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-space-between
                - align-content-stretch
                - align-items-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 20px
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-center
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: = props.locRoom1
                          style:
                            fontSize: 11px
                            fontWeight: 400
                            color: =props.ColorTemp
                            z-index: 1
                            text-align: center
                          class:
                            - margin-horizontal
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: = props.locRoom2
                          style:
                            fontSize: 11px
                            fontWeight: 400
                            color: =props.ColorTemp
                            z-index: 1
                            text-align: center
                          class:
                            - margin-horizontal
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: = props.locRoom3
                          style:
                            fontSize: 11px
                            fontWeight: 400
                            color: =props.ColorTemp
                            z-index: 1
                            text-align: center
                          class:
                            - margin-horizontal
                - component: f7-col
                  config:
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-center
                  slots:
                    default:
                      - component: Label
                        config:
                          text: = props.locRoom4
                          style:
                            fontSize: 11px
                            fontWeight: 400
                            color: =props.ColorTemp
                            z-index: 1
                            text-align: center
                          class:
                            - margin-horizontal
          - component: f7-row
            config:
              class:
                - display-flex
                - justify-content-space-between
                - align-content-stretch
                - align-items-center
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      width: 20px
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-center
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: thermometer
                          color: blue
                          size: 24
                          class:
                            - margin-horizontal
                      - component: f7-icon
                        config:
                          f7: drop
                          color: blue
                          size: 24
                          class:
                            - margin-horizontal
                      - component: Label
                        config:
                          text: CO2
                          style:
                            color: rgba(33,150,243,1)
                            fontWeight: 500
                - component: f7-col
                  config:
                    style:
                      white-space: nowrap
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-center
                  slots:
                    default:
                      - component: oh-image
                        config:
                          url: = props.Image_1
                          noShadow: true
                          noBorder: true
                          outline: false
                          style:
                            position: absolute
                            top: 60%
                            height: 30%
                            opacity: =props.opacity
                            z-index: 0
                      - component: Label
                        config:
                          text: "=items[((props.Room_1 === undefined) ? '' : props.Room_1) + '_Temperatur'].displayState"
                          style:
                            fontSize: 20px
                            fontWeight: 600
                            color: =props.ColorTemp
                            z-index: 1
                          class:
                            - margin-horizontal
                      - component: Label
                        config:
                          text: "=items[((props.Room_1 === undefined) ? '' : props.Room_1) + '_Luftfeuchtigkeit'].state"
                          style:
                            fontSize: 16px
                            fontWeight: 600
                            color: =props.ColorHumidity
                          class:
                            - margin-horizontal
                      - component: Label
                        config:
                          text: "=items[((props.Room_1 === undefined) ? '' : props.Room_1) + '_CO2Gehalt'].state"
                          style:
                            fontSize: 14px
                            fontWeight: 600
                            color: '=(Number.parseInt(items[props.Room_1 + "_CO2Gehalt"].state) > props.ThresholdCO2) ? props.ThresholdColorCO2 : props.ColorCO2'
                          class:
                            - margin-horizontal
                - component: f7-col
                  config:
                    style:
                      white-space: nowrap
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-center
                  slots:
                    default:
                      - component: oh-image
                        config:
                          url: = props.Image_2
                          noShadow: true
                          noBorder: true
                          outline: false
                          style:
                            position: absolute
                            top: 60%
                            height: 30%
                            opacity: =props.opacity
                            z-index: 0
                      - component: Label
                        config:
                          text: "=items[((props.Room_2 === undefined) ? '' : props.Room_2) + '_Temperatur'].displayState"
                          style:
                            fontSize: 20px
                            fontWeight: 600
                            color: =props.ColorTemp
                          class:
                            - margin-horizontal
                      - component: Label
                        config:
                          text: "=items[((props.Room_2 === undefined) ? '' : props.Room_2) + '_Luftfeuchtigkeit'].state"
                          style:
                            fontSize: 16px
                            fontWeight: 600
                            color: =props.ColorHumidity
                          class:
                            - margin-horizontal
                      - component: Label
                        config:
                          text: "=items[((props.Room_2 === undefined) ? '' : props.Room_2) + '_CO2Gehalt'].state"
                          style:
                            fontSize: 14px
                            fontWeight: 600
                            color: '=(Number.parseInt(items[props.Room_2 + "_CO2Gehalt"].state) > props.ThresholdCO2) ? props.ThresholdColorCO2 : props.ColorCO2'
                          class:
                            - margin-horizontal
                - component: f7-col
                  config:
                    style:
                      white-space: nowrap
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-center
                  slots:
                    default:
                      - component: oh-image
                        config:
                          url: = props.Image_3
                          noShadow: true
                          noBorder: true
                          outline: false
                          style:
                            position: absolute
                            top: 60%
                            height: 30%
                            opacity: =props.opacity
                            z-index: 0
                      - component: Label
                        config:
                          text: "=items[((props.Room_3 === undefined) ? '' : props.Room_3) + '_Temperatur'].displayState"
                          style:
                            fontSize: 20px
                            fontWeight: 600
                            color: =props.ColorTemp
                          class:
                            - margin-horizontal
                      - component: Label
                        config:
                          text: "=items[((props.Room_3 === undefined) ? '' : props.Room_3) + '_Luftfeuchtigkeit'].state"
                          style:
                            fontSize: 16px
                            fontWeight: 600
                            color: =props.ColorHumidity
                          class:
                            - margin-horizontal
                      - component: Label
                        config:
                          text: "=items[((props.Room_3 === undefined) ? '' : props.Room_3) + '_CO2Gehalt'].state"
                          style:
                            fontSize: 14px
                            fontWeight: 600
                            color: '=(Number.parseInt(items[props.Room_3 + "_CO2Gehalt"].state) > props.ThresholdCO2) ? props.ThresholdColorCO2 : props.ColorCO2'
                          class:
                            - margin-horizontal
                - component: f7-col
                  config:
                    style:
                      white-space: nowrap
                    class:
                      - display-flex
                      - flex-direction-column
                      - align-items-center
                  slots:
                    default:
                      - component: oh-image
                        config:
                          url: = props.Image_4
                          noShadow: true
                          noBorder: true
                          outline: false
                          style:
                            position: absolute
                            top: 60%
                            height: 30%
                            opacity: =props.opacity
                            z-index: 0
                      - component: Label
                        config:
                          text: "=items[((props.Room_4 === undefined) ? '' : props.Room_4) + '_Temperatur'].displayState"
                          style:
                            fontSize: 20px
                            fontWeight: 600
                            color: =props.ColorTemp
                          class:
                            - margin-horizontal
                      - component: Label
                        config:
                          text: "=items[((props.Room_4 === undefined) ? '' : props.Room_4) + '_Luftfeuchtigkeit'].state"
                          style:
                            fontSize: 15px
                            fontWeight: 600
                            color: =props.ColorHumidity
                          class:
                            - margin-horizontal
                      - component: Label
                        config:
                          text: "=items[((props.Room_4 === undefined) ? '' : props.Room_4) + '_CO2Gehalt'].state"
                          style:
                            fontSize: 14px
                            fontWeight: 600
                            color: '=(Number.parseInt(items[props.Room_4 + "_CO2Gehalt"].state) > props.ThresholdCO2) ? props.ThresholdColorCO2 : props.ColorCO2'
                          class:
                            - margin-horizontal


Hi Stefan, thanks for the reply. But also with this VErsion a problem appears.
I just copied the widget text from the Email to my widget editor:
See result in the picture.’

Hi Stefan,
I will try to copy the text again on a laptop.
The last tries, yesterday and this morning I did on a tablet.
Maybe something goes wrong there.
Br Thorsten

Hi Thorsten,

remove the class and no-padding in row 129&130. Its not needed as far as I see.
But not sure why you get the error. I paste the code again in a new widget without error.
Maybe an OH3 expert can explain.

Hope this helps.
Stefan

I will test it in the evening and try it from the laptop.
Br Thorsten

Hi Stefan,
ok, doen the work from the laptop…everything works.
Strange behaviour. Must be something with copy and paste on android.
Best regards
Thorsten