uid: OH3_Livio_PWS_FULL_Information
tags: []
props:
  parameters:
    - description: Visual size of the control in px (default 250px), without a size the design is responsive
      label: size [px]
      name: size
      required: false
      type: TEXT
    - description: Widget Color
      label: Widget Color
      name: colorWidget
      required: false
      type: TEXT 
    - description: Ring-Square Color
      label: Ring-Square Color Color
      name: colorControlRing
      required: false
      type: TEXT            
    - context: item
      description: Neighborhood
      label: Neighborhood Item
      name: neighborhoodItem
      required: true
      type: TEXT
    - context: item
      description: Station ID
      label: Station ID Item
      name: stationidItem
      required: true
      type: TEXT
    - context: item
      description: Country
      label: Country Item
      name: countryItem
      required: true
      type: TEXT
    - context: item
      description: Location
      label: Location Item
      name: locationItem
      required: true
      type: TEXT
    - context: item
      description: Elevation
      label: Elevation Item
      name: elevationItem
      required: true
      type: TEXT
    - context: item
      description: Observation Time
      label: Observation Time Item
      name: observationtimeItem
      required: true
      type: TEXT

    - description: Display Wind Widget
      label: Display Wind Widget
      name: displaywindWidget
      required: true
      type: BOOLEAN
    - context: item
      description: Wind Direction
      label: Wind Direction Item
      name: winddirectionItem
      required: true
      type: TEXT
    - context: item
      description: Wind Speed
      label: Wind Speed
      name: windspeedItem
      required: true
      type: TEXT
    - context: item
      description: Wind Gust Speed
      label: Wind Gust Speed
      name: windgustspeedItem
      required: true
      type: TEXT
    - context: item
      description: Wind Chill Temperature
      label: Wind Chill Temperature
      name: windchilltemperatureItem
      required: true
      type: TEXT
    - description: Cardinal Point Font Color
      label: Cardinal Point Font Color
      name: fontcolorCardinalPoint
      required: false
      type: TEXT
    - description: Middle Cardinal Point Font Color
      label: Middle Cardinal Point Font Color
      name: fontcolorMiddleCardinalPoint
      required: false
      type: TEXT
    - description: Sub Cardinal Point Font Color
      label: Sub Cardinal Point Font Color
      name: fontcolorSubCardinalPoint
      required: false
      type: TEXT

    - description: Arrow Indicator Color
      label: Arrow Indicator Color
      name: arrowindicatorColor
      required: false
      type: TEXT

    - description: Display Wind Data
      label: Display Wind data
      name: displaywindData
      required: true
      type: BOOLEAN
    - description: First Layer Radius Wind from 1 to 50, default 5
      label: First Layer Radius Value Wind
      name: firstlayerradiuswindValue
      required: false
    - description: Second Layer Radius Wind  from 1 to 50, default 5
      label: Second Layer Radius Value Wind
      name: secondlayerradiuswindValue
      required: false
    - description: Data Layer Radius Wind from 1 to 10, default 2
      label: Data Layer Radius Value Wind
      name: datalayerradiuswindValue
      required: false


    - description: Display Temperature Widget
      label: Display Temperature Widget
      name: displaytemperatureWidget
      required: true
      type: BOOLEAN      
    - context: item
      description: Temperature
      label: temperature Item
      name: temperatureItem
      required: true
      type: TEXT
    - context: item
      description: Humidity
      label: Humidity
      name: humidityItem
      required: true
      type: TEXT
    - context: item
      description: Heat Index Temperature
      label: Heat Index Temperature
      name: heatindextemperatureItem
      required: true
      type: TEXT
    - context: item
      description: Dew Point Temperature
      label: Dew Ponit Temperature
      name: dewpointtemperatureItem
      required: true
      type: TEXT
    - context: item
      description: Precipitation Rate
      label: Precipitation Rate
      name: precipitationrateItem
      required: true
      type: TEXT
    - context: item
      description: Precipitation Total
      label: Precipitation Total
      name: precipitationtotalItem
      required: true
      type: TEXT
    - description: Display Temperature Data
      label: Display Temperature data
      name: displaytemperatureData
      required: true
      type: BOOLEAN
    - description: Temperature Font Color
      label: temperature Font Color
      name: fontcolorTemperature
      required: false
      type: TEXT
    - description: First Layer Radius Temperature from 1 to 50, default 5
      label: First Layer Radius Value Temperature
      name: firstlayerradiustemperatureValue
      required: false
    - description: Second Layer Radius Temperature from 1 to 50, default 5
      label: Second Layer Radius Value Temperature
      name: secondlayerradiustemperatureValue
      required: false
    - description: Data Layer Radius Temperature from 1 to 10, default 2
      label: Data Layer Radius Value Temperature
      name: datalayerradiustemperatureValue
      required: false


    - description: Display UV Index Widget
      label: Display UV Index Widget
      name: displayUVWidget
      required: true
      type: BOOLEAN       
    - context: item
      description: Solar Radiation
      label: Solar Radiation
      name: solarradiationItem
      required: true
      type: TEXT
    - context: item
      description: UV Index
      label: UV Index
      name: uvindexItem
      required: true
      type: TEXT
    - description: Display UV Data
      label: Display UV data
      name: displayUVData
      required: true
      type: BOOLEAN
    - description: UV Font Color
      label: UV Font Color
      name: fontcolorUV
      required: false
      type: TEXT
    - description: First Layer Radius UV from 1 to 50, default 5
      label: First Layer Radius Value UV
      name: firstlayerradiusUVValue
      required: false
    - description: Second Layer Radius UV from 1 to 50, default 5
      label: Second Layer Radius Value UV
      name: secondlayerradiusUVValue
      required: false
    - description: Data Layer Radius UV from 1 to 10, default 2
      label: Data Layer Radius Value UV
      name: datalayerradiusUVValue
      required: false












    - description: Display Pression Widget
      label: Display Pression Widget
      name: displaypressionWidget
      required: true
      type: BOOLEAN
    - context: item
      description: Pressure
      label: Pressure
      name: pressureItem
      required: true
      type: TEXT
    - description: Display Pression Data
      label: Display Pression data
      name: displaypressionData
      required: true
      type: BOOLEAN      
    - description: Pression Font Color
      label: Pression Font Color
      name: fontcolorPression
      required: false
      type: TEXT
    - description: Pression Indicator Color
      label: Pression Indicator Color
      name: indicatorcolorPression
      required: false
      type: TEXT  
    - description: Middle Pression Indicator Color
      label: Middle Pression Indicator Color
      name: middleindicatorcolorPression
      required: false
      type: TEXT   
    - description: Sub Middle Pression Indicator Color
      label: Sub Middle Pression Indicator Color
      name: submiddleindicatorcolorPression
      required: false
      type: TEXT               
    - description: Pression Arrow Indicator Color
      label: Pression Arrow Indicator Color
      name: arrowindicatorpressionColor
      required: false
      type: TEXT      
    - description: First Layer Radius Pression from 1 to 50, default 5
      label: First Layer Radius Value Pression
      name: firstlayerradiuspressionValue
      required: false
    - description: Second Layer Radius Pression from 1 to 50, default 5
      label: Second Layer Radius Value PRession
      name: secondlayerradiuspressionValue
      required: false
    - description: Data Layer Radius Pression from 1 to 10, default 2
      label: Data Layer Radius Value Pression
      name: datalayerradiuspressionValue
      required: false
















    - description: Display All Data In A single Bottom Box
      label: Display All Data In A single Bottom Box
      name: displayAllData
      required: true
      type: BOOLEAN
      
    - description: Data Square Font Color
      label: Data Square Font Color
      name: fontcolorDataSquare
      required: false
      type: TEXT
    - description: Data Square Back Color
      label: Data Square and Mainain direction Points Back Color
      name: backcolorDataSquare
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Feb 27, 2021, 5:21:36 PM
component: f7-card
config:
  title: "=(items[props.neighborhoodItem].state) ? items[props.neighborhoodItem].state + ' - ' + items[props.countryItem].state  + ' (' + items[props.stationidItem].state + ')' : ''"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              resizableFixed: true
              resizable-absolute: true
              class:
                - justify-content-center
              style:
                background-color: transparent
                border: none
            slots:
              default:
                - component: f7-block
                  config:
                    class: PWS
                    style:
                      flex-shrink: 0
                      --f7-block-margin-vertical: 0px
                      --f7-block-padding-vertical: 0px
                      --f7-block-padding-horizontal: 0px
                      padding-left: 0px
                      padding-top: "=props.size ? '': '100%'"
                      width: "=props.size ? Number(props.size)+'px' : '100%'"
                      height: "=props.size ? Number(props.size)+'px' : '100%'"
                      background: "=props.colorWidget ? props.colorWidget : 'var(--f7-toggle-inactive-color)'"
                      border-radius: "=(props.firstlayerradiuswindValue) ? props.firstlayerradiuswindValue +'%' : '5%'"
                      border: 2px solid rgb(64, 60, 77)
                    visible: = props.displaywindWidget === true
                  slots:
                    default:
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            width: "=props.size ? (Number(props.size)*0.65) +'px' : '65%'"
                            height: "=props.size ? (Number(props.size)*0.65) +'px' : '65%'"
                            background: "=props.colorControlRing ? props.colorControlRing : 'rgb(227, 228, 237)'"
                            animation: bound-in 0.6s ease forwards
                            top: 50%
                            left: 50%
                            transform: translate(-50%, -50%)
                            border-radius: "=(props.secondlayerradiuswindValue) ? props.secondlayerradiuswindValue +'%' : '5%'"
                            box-shadow: 0px 15px 35px 11px rgba(46, 44, 58,0.60)
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                size: "=props.size ? (Number(props.size)*0.16) +'px' : '3em'"
                                style:
                                  position: absolute
                                  transform: ='translate(-50%, -50%) rotate('+ Number(items[props.winddirectionItem].state.split('°')[0]) +'deg)'
                                  color: "=props.arrowindicatorColor ? props.arrowindicatorColor : 'red'"
                                  top: 50%
                                  left: 50%
                                  width: 115% !important
                                  height: 115% !important
                                  margin-top: auto
                                f7: arrowtriangle_up_fill
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 8%
                            left: 50%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: N
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.16) +'px' : '3em'"
                                  color: "=props.fontcolorCardinalPoint ? props.fontcolorCardinalPoint : 'orange'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 92%
                            left: 50%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: S
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.16) +'px' : '3em'"
                                  color: "=props.fontcolorCardinalPoint ? props.fontcolorCardinalPoint : 'orange'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 50%
                            left: 8%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: W
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.16) +'px' : '3em'"
                                  color: "=props.fontcolorCardinalPoint ? props.fontcolorCardinalPoint : 'orange'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 50%
                            left: 92%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: E
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.16) +'px' : '3em'"
                                  color: "=props.fontcolorCardinalPoint ? props.fontcolorCardinalPoint : 'orange'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 23%
                            left: 18%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: NW
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.08) +'px' : '2em'"
                                  color: "=props.fontcolorMiddleCardinalPoint ? props.fontcolorMiddleCardinalPoint : 'white'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 23%
                            left: 82%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: NE
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.08) +'px' : '2em'"
                                  color: "=props.fontcolorMiddleCardinalPoint ? props.fontcolorMiddleCardinalPoint : 'white'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 77%
                            left: 18%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: SW
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.08) +'px' : '2em'"
                                  color: "=props.fontcolorMiddleCardinalPoint ? props.fontcolorMiddleCardinalPoint : 'white'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 77%
                            left: 82%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: SE
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.08) +'px' : '2em'"
                                  color: "=props.fontcolorMiddleCardinalPoint ? props.fontcolorMiddleCardinalPoint : 'white'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 14%
                            left: 34%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: NNW
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.06) +'px' : '1em'"
                                  color: "=props.fontcolorSubCardinalPoint ? props.fontcolorSubCardinalPoint : 'black'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 14%
                            left: 64%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: NNE
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.06) +'px' : '1em'"
                                  color: "=props.fontcolorSubCardinalPoint ? props.fontcolorSubCardinalPoint : 'black'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 86%
                            left: 34%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: SSW
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.06) +'px' : '1em'"
                                  color: "=props.fontcolorSubCardinalPoint ? props.fontcolorSubCardinalPoint : 'black'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 86%
                            left: 64%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: SSE
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.06) +'px' : '1em'"
                                  color: "=props.fontcolorSubCardinalPoint ? props.fontcolorSubCardinalPoint : 'black'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 35%
                            left: 12%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: WNW
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.06) +'px' : '1em'"
                                  color: "=props.fontcolorSubCardinalPoint ? props.fontcolorSubCardinalPoint : 'black'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 35%
                            left: 88%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: ENE
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.06) +'px' : '1em'"
                                  color: "=props.fontcolorSubCardinalPoint ? props.fontcolorSubCardinalPoint : 'black'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 65%
                            left: 12%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: WSW
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.06) +'px' : '1em'"
                                  color: "=props.fontcolorSubCardinalPoint ? props.fontcolorSubCardinalPoint : 'black'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 65%
                            left: 88%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: ESE
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.06) +'px' : '1em'"
                                  color: "=props.fontcolorSubCardinalPoint ? props.fontcolorSubCardinalPoint : 'black'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 50%
                            left: 50%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: = items[props.windspeedItem].displayState
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.14) +'px' : '3em'"
                                  color: "=props.fontcolorCardinalPoint ? props.fontcolorCardinalPoint : 'orange'"
                                  font-weight: bold
          - component: f7-row
            config:
              resizableFixed: true
              resizable-absolute: true
              class:
                - justify-content-center
              style:
                background-color: transparent
                border: none
              visible: = props.displaywindData === true && props.displaywindWidget === true && props.displayAllData === false
            slots:
              default:
                - component: f7-block
                  config:
                    class: PWSdata
                    style:
                      background: "=props.backcolorDataSquare ? props.backcolorDataSquare : 'var(--f7-toggle-inactive-color)'"
                      border-radius: "=(props.datalayerradiuswindValue) ? props.datalayerradiuswindValue +'%' : '2%'"
                      border: 2px solid rgb(64, 60, 77)
                  slots:
                    default:
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: relative
                            top: 0%
                            left: 0%
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: "='Wind Speed: '+ items[props.windspeedItem].displayState"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "='Wind Gust Speed: '+ items[props.windgustspeedItem].displayState"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "='Wind Direction: '+ items[props.winddirectionItem].state"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "='Wind Chill Temperature: '+ items[props.windchilltemperatureItem].displayState"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
          - component: f7-row
            config:
              resizableFixed: true
              resizable-absolute: true
              class:
                - justify-content-center
              style:
                background-color: transparent
                border: none
              visible: = props.displaytemperatureWidget === true
            slots:
              default:
                - component: f7-block
                  config:
                    class: PWS
                    style:
                      flex-shrink: 0
                      --f7-block-margin-vertical: 0px
                      --f7-block-padding-vertical: 0px
                      --f7-block-padding-horizontal: 0px
                      padding-left: 0px
                      padding-top: "=props.size ? '': '100%'"
                      width: "=props.size ? Number(props.size)+'px' : '100%'"
                      height: "=props.size ? Number(props.size)+'px' : '100%'"
                      background: "=props.colorWidget ? props.colorWidget : 'var(--f7-toggle-inactive-color)'"
                      border-radius: "=(props.firstlayerradiustemperatureValue) ? props.firstlayerradiustemperatureValue +'%' : '5%'"
                      border: 2px solid rgb(64, 60, 77)
                  slots:
                    default:
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            width: "=props.size ? (Number(props.size)*0.85) +'px' : '85%'"
                            height: "=props.size ? (Number(props.size)*0.85) +'px' : '85%'"
                            background: "=props.colorControlRing ? props.colorControlRing : 'rgb(227, 228, 237)'"
                            animation: bound-in 0.6s ease forwards
                            top: 50%
                            left: 50%
                            transform: translate(-50%, -50%)
                            border-radius: "=(props.secondlayerradiustemperatureValue) ? props.secondlayerradiustemperatureValue +'%' : '5%'"
                            box-shadow: 0px 15px 35px 11px rgba(46, 44, 58,0.60)
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                size: "=props.size ? (Number(props.size)*0.16) +'px' : '5em'"
                                style:
                                  position: absolute
                                  transform: translate(-50%, -50%)
                                  color: "=(items[props.temperatureItem].state.split(' ')[0]>=42) ? '#7E0001' : (items[props.temperatureItem].state.split(' ')[0]>=39) ? '#9A0000' : (items[props.temperatureItem].state.split(' ')[0]>=36) ? '#D80100' : (items[props.temperatureItem].state.split(' ')[0]>=33) ? '#FE0000' : (items[props.temperatureItem].state.split(' ')[0]>=30) ? '#F46523' : (items[props.temperatureItem].state.split(' ')[0]>=27) ? '#FF9E07' : (items[props.temperatureItem].state.split(' ')[0]>=24) ? '#FFD728' : (items[props.temperatureItem].state.split(' ')[0]>=21) ? '#FFFF01' : (items[props.temperatureItem].state.split(' ')[0]>=18) ? '#CDFF00' : (items[props.temperatureItem].state.split(' ')[0]>=15) ? '#80FF00' : (items[props.temperatureItem].state.split(' ')[0]>=12) ? '#3AB54A' : (items[props.temperatureItem].state.split(' ')[0]>=9) ? '#05F7F9' : (items[props.temperatureItem].state.split(' ')[0]>=6) ? '#01CCFF' : (items[props.temperatureItem].state.split(' ')[0]>=3) ? '#017EFF' : (items[props.temperatureItem].state.split(' ')[0]>=0) ? '#0000FE' : (items[props.temperatureItem].state.split(' ')[0]<0) ? '#1B1464' : 'black'"
                                  top: 45%
                                  left: 50%
                                  width: 50%
                                  height: 90%
                                  margin-top: auto
                                f7: thermometer
                            - component: f7-icon
                              config:
                                size: "=props.size ? (Number(props.size)*0.16) +'px' : '5em'"
                                style:
                                  position: absolute
                                  transform: translate(-50%, -50%)
                                  color: "=(items[props.humidityItem].state.split(' ')[0]>=100) ? '#1B1464' : (items[props.humidityItem].state.split(' ')[0]>=95) ? '#0000FE' : (items[props.humidityItem].state.split(' ')[0]>=90) ? '#017EFF' : (items[props.humidityItem].state.split(' ')[0]>=85) ? '#01CCFF' : (items[props.humidityItem].state.split(' ')[0]>=80) ? '#05F7F9' : (items[props.humidityItem].state.split(' ')[0]>=85) ? '#3AB54A' : (items[props.humidityItem].state.split(' ')[0]>=80) ? '#80FF00' : (items[props.humidityItem].state.split(' ')[0]>=85) ? '#CDFF00' : (items[props.humidityItem].state.split(' ')[0]>=80) ? '#FFFF01' : (items[props.humidityItem].state.split(' ')[0]>=75) ? '#FFD728' : (items[props.humidityItem].state.split(' ')[0]>=70) ? '#FF9E07' : (items[props.humidityItem].state.split(' ')[0]>=65) ? '#F46523' : (items[props.humidityItem].state.split(' ')[0]>=60) ? '#FE0000' : (items[props.humidityItem].state.split(' ')[0]>=55) ? '#D80100' : (items[props.humidityItem].state.split(' ')[0]>=50) ? '#9A0000' : (items[props.humidityItem].state.split(' ')[0]<50) ? '#7E0001' : 'black'"
                                  top: 125%
                                  left: 50%
                                  width: 50%
                                  height: 90%
                                  margin-top: auto
                                f7: drop
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 35%
                            left: 50%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: = items[props.temperatureItem].displayState
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.14) +'px' : '5em'"
                                  color: "=props.fontcolorTemperature ? props.fontcolorTemperature : 'orange'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 65%
                            left: 50%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: = items[props.humidityItem].displayState
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.14) +'px' : '5em'"
                                  color: "=props.fontcolorTemperature ? props.fontcolorTemperature : 'orange'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 45%
                            left: 50%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: ='Heat Index ' + items[props.heatindextemperatureItem].displayState
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '1em'"
                                  color: "=props.fontcolorTemperature ? props.fontcolorTemperature : 'orange'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 55%
                            left: 50%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: ='Dew Point ' + items[props.dewpointtemperatureItem].displayState
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '1em'"
                                  color: "=props.fontcolorTemperature ? props.fontcolorTemperature : 'orange'"
                                  font-weight: bold
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 50%
                            left: 50%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: ='Wind Chill ' + items[props.windchilltemperatureItem].displayState
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '1em'"
                                  color: "=props.fontcolorTemperature ? props.fontcolorTemperature : 'orange'"
                                  font-weight: bold
          - component: f7-row
            config:
              resizableFixed: true
              resizable-absolute: true
              class:
                - justify-content-center
              style:
                background-color: transparent
                border: none
              visible: = props.displaytemperatureData === true && props.displaytemperatureWidget === true && props.displayAllData === false
            slots:
              default:
                - component: f7-block
                  config:
                    class: PWSdata
                    style:
                      background: "=props.backcolorDataSquare ? props.backcolorDataSquare : 'var(--f7-toggle-inactive-color)'"
                      border-radius: "=(props.datalayerradiustemperatureValue) ? props.datalayerradiustemperatureValue +'%' : '2%'"
                      border: 2px solid rgb(64, 60, 77)
                  slots:
                    default:
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: relative
                            top: 0%
                            left: 0%
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: "='Temperature: '+ items[props.temperatureItem].displayState"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "='Humidity: '+ items[props.humidityItem].displayState"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "='Heat Index: '+ items[props.heatindextemperatureItem].displayState"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "='Wind Chill: '+ items[props.windchilltemperatureItem].displayState"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "='Dew Point: '+ items[props.dewpointtemperatureItem].displayState"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "='Pressure: '+ items[props.pressureItem].displayState"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "='Precipitation Rate: '+ items[props.precipitationrateItem].state"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "='Precipitation Total: '+ items[props.precipitationtotalItem].state"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
          - component: f7-row
            config:
              resizableFixed: true
              resizable-absolute: true
              class:
                - justify-content-center
              style:
                background-color: transparent
                border: none
              visible: = props.displayUVWidget === true
            slots:
              default:
                - component: f7-block
                  config:
                    class: PWS
                    style:
                      flex-shrink: 0
                      --f7-block-margin-vertical: 0px
                      --f7-block-padding-vertical: 0px
                      --f7-block-padding-horizontal: 0px
                      padding-left: 0px
                      padding-top: "=props.size ? '': '100%'"
                      width: "=props.size ? Number(props.size)+'px' : '100%'"
                      height: "=props.size ? Number(props.size)+'px' : '100%'"
                      background: "=props.colorWidget ? props.colorWidget : 'var(--f7-toggle-inactive-color)'"
                      border-radius: "=(props.firstlayerradiusUVValue) ? props.firstlayerradiusUVValue +'%' : '5%'"
                      border: 2px solid rgb(64, 60, 77)
                  slots:
                    default:
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            width: "=props.size ? (Number(props.size)*0.85) +'px' : '85%'"
                            height: "=props.size ? (Number(props.size)*0.85) +'px' : '85%'"
                            background: "=props.colorControlRing ? props.colorControlRing : 'rgb(227, 228, 237)'"
                            animation: bound-in 0.6s ease forwards
                            top: 50%
                            left: 50%
                            transform: translate(-50%, -50%)
                            border-radius: "=(props.secondlayerradiusUVValue) ? props.secondlayerradiusUVValue +'%' : '5%'"
                            box-shadow: 0px 15px 35px 11px rgba(46, 44, 58,0.60)
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 50%
                            left: 50%
                            transform: translate(-50%, -50%)
                            text-align: center
                            background: "= (items[props.uvindexItem].state<=1) ? '#01AD4B' : (items[props.uvindexItem].state>1 && items[props.uvindexItem].state<=2) ? '#01D427' : (items[props.uvindexItem].state>2 && items[props.uvindexItem].state<=3) ? '#7FFF00' : (items[props.uvindexItem].state>3 && items[props.uvindexItem].state<=4) ? '#A2FF00' : (items[props.uvindexItem].state>4 && items[props.uvindexItem].state<=5) ? '#FFFF00' : (items[props.uvindexItem].state>5 && items[props.uvindexItem].state<=6) ? '#FFE500' : (items[props.uvindexItem].state>6 && items[props.uvindexItem].state<=7) ? '#FFd400' : (items[props.uvindexItem].state>7 && items[props.uvindexItem].state<=8) ? '#FF6300' : (items[props.uvindexItem].state>8 && items[props.uvindexItem].state<=9) ? '#FF6500' : (items[props.uvindexItem].state>9 && items[props.uvindexItem].state<=10) ? '#FF0000' : (items[props.uvindexItem].state>10) ? '#EA15EA' : 'white' "
                            width: "=props.size ? (Number(props.size)*0.8) +'px' : '80%'"
                            height: "=props.size ? (Number(props.size)*0.8) +'px' : '80%'"
                            border-radius: "=(props.secondlayerradiusUVValue) ? props.secondlayerradiusUVValue +'%' : '5%'"
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 75%
                            left: 50%
                            transform: translate(-50%, -50%)
                            text-align: center
                            background: yellow
                            width: "=(((items[props.solarradiationItem].state.split(' ')[0] / 700) * 100)*50/100)+'%'"
                            height: "=(((items[props.solarradiationItem].state.split(' ')[0] / 700) * 100)*50/100) < 10 ? '5%' : '15%'"
                            border-radius: 50%
                            border: "=(((items[props.solarradiationItem].state.split(' ')[0] / 700) * 100)*50/100) < 10 ? '2px solid white' : '4px solid white'"
                            box-shadow: 0px 15px 35px 11px rgba(46, 44, 58,0.60)
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 40%
                            left: 50%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: = items[props.uvindexItem].displayState + ' UV'
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.09) +'px' : '3em'"
                                  color: "=props.fontcolorUV ? props.fontcolorUV : 'orange'"
                                  font-weight: bold

                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            top: 60%
                            left: 50%
                            transform: translate(-50%, -50%)
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: = items[props.solarradiationItem].displayState
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.09) +'px' : '3em'"
                                  color: "=props.fontcolorUV ? props.fontcolorUV : 'orange'"
                                  font-weight: bold                            

          - component: f7-row
            config:
              resizableFixed: true
              resizable-absolute: true
              class:
                - justify-content-center
              style:
                background-color: transparent
                border: none
              visible: = props.displayUVData === true && props.displayUVWidget === true && props.displayAllData === false
            slots:
              default:
                - component: f7-block
                  config:
                    class: PWSdata
                    style:
                      background: "=props.backcolorDataSquare ? props.backcolorDataSquare : 'var(--f7-toggle-inactive-color)'"
                      border-radius: "=(props.datalayerradiusUVValue) ? props.datalayerradiusUVValue +'%' : '2%'"
                      border: 2px solid rgb(64, 60, 77)
                  slots:
                    default:
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: relative
                            top: 0%
                            left: 0%
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: "='Solar Radiation: '+ items[props.solarradiationItem].state"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "='UV Index: '+ items[props.uvindexItem].state"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold























          - component: f7-row
            config:
              resizableFixed: true
              resizable-absolute: true
              class:
                - justify-content-center
              style:
                background-color: transparent
                border: none
              visible: = props.displaypressionWidget === true
            slots:
              default:
                - component: f7-block
                  config:
                    class: PWS
                    style:
                      flex-shrink: 0
                      --f7-block-margin-vertical: 0px
                      --f7-block-padding-vertical: 0px
                      --f7-block-padding-horizontal: 0px
                      padding-left: 0px
                      padding-top: "=props.size ? '': '100%'"
                      width: "=props.size ? Number(props.size)+'px' : '100%'"
                      height: "=props.size ? Number(props.size)+'px' : '100%'"
                      background: "=props.colorWidget ? props.colorWidget : 'var(--f7-toggle-inactive-color)'"
                      border-radius: "=(props.firstlayerradiuspressionValue) ? props.firstlayerradiuspressionValue +'%' : '5%'"
                      border: 2px solid rgb(64, 60, 77)
                  slots:
                    default:
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: absolute
                            width: "=props.size ? (Number(props.size)*0.65) +'px' : '65%'"
                            height: "=props.size ? (Number(props.size)*0.65) +'px' : '65%'"
                            background: "=props.colorControlRing ? props.colorControlRing : 'rgb(227, 228, 237)'"
                            animation: bound-in 0.6s ease forwards
                            top: 50%
                            left: 50%
                            transform: translate(-50%, -50%)
                            border-radius: "=(props.secondlayerradiuspressionValue) ? props.secondlayerradiuspressionValue +'%' : '5%'"
                            box-shadow: 0px 15px 35px 11px rgba(46, 44, 58,0.60)
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                size: "=props.size ? (Number(props.size)*0.16) +'px' : '3em'"
                                style:
                                  position: absolute
                                  transform: ='translate(-50%, -50%) rotate('+ (((Number(items[props.pressureItem].state.split(' ')[0])-900)*180/200)-90) +'deg)'
                                  color: "=props.arrowindicatorpressionColor ? props.arrowindicatorpressionColor : 'red'"
                                  top: 50%
                                  left: 50%
                                  width: 115% !important
                                  height: 115% !important
                                  margin-top: auto
                                f7: arrowtriangle_up_fill    
                                
                            - component: f7-block
                              config:
                                class: center
                                style:
                                  margin-top: 0px
                                  position: absolute
                                  top: -10%
                                  left: 50%
                                  transform: translate(-50%, -50%)
                                  text-align: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: 1000 hPa
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.07) +'px' : '0,7em'"
                                        color: "=props.indicatorcolorPression ? props.indicatorcolorPression : 'orange'"
                                        font-weight: bold   
                                        
                            - component: f7-block
                              config:
                                class: center
                                style:
                                  margin-top: 0px
                                  position: absolute
                                  top: 50%
                                  left: -15%
                                  transform: translate(-50%, -50%)
                                  text-align: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: 900
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.06) +'px' : '0,6em'"
                                        color: "=props.indicatorcolorPression ? props.indicatorcolorPression : 'orange'"
                                        font-weight: bold 
                            - component: f7-block
                              config:
                                class: center
                                style:
                                  margin-top: 0px
                                  position: absolute
                                  top: 35%
                                  left: -5%
                                  transform: translate(-50%, -50%)
                                  text-align: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: 925
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.04) +'px' : '0,4em'"
                                        color: "=props.submiddleindicatorcolorPression ? props.submiddleindicatorcolorPression : 'black'"
                                        font-weight: bold  

                            - component: f7-block
                              config:
                                class: center
                                style:
                                  margin-top: 0px
                                  position: absolute
                                  top: 20%
                                  left: 0%
                                  transform: translate(-50%, -50%)
                                  text-align: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: 950
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.middleindicatorcolorPression ? props.middleindicatorcolorPression : 'white'"
                                        font-weight: bold                                         
                                        
                            - component: f7-block
                              config:
                                class: center
                                style:
                                  margin-top: 0px
                                  position: absolute
                                  top: 5%
                                  left: 15%
                                  transform: translate(-50%, -50%)
                                  text-align: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: 975
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.04) +'px' : '0,4em'"
                                        color: "=props.submiddleindicatorcolorPression ? props.submiddleindicatorcolorPression : 'black'"
                                        font-weight: bold 

                            - component: f7-block
                              config:
                                class: center
                                style:
                                  margin-top: 0px
                                  position: absolute
                                  top: 5%
                                  left: 85%
                                  transform: translate(-50%, -50%)
                                  text-align: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: 1025
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.04) +'px' : '0,4em'"
                                        color: "=props.submiddleindicatorcolorPression ? props.submiddleindicatorcolorPression : 'black'"
                                        font-weight: bold 

                            - component: f7-block
                              config:
                                class: center
                                style:
                                  margin-top: 0px
                                  position: absolute
                                  top: 20%
                                  left: 100%
                                  transform: translate(-50%, -50%)
                                  text-align: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: 1050
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.middleindicatorcolorPression ? props.middleindicatorcolorPression : 'white'"
                                        font-weight: bold 

                            - component: f7-block
                              config:
                                class: center
                                style:
                                  margin-top: 0px
                                  position: absolute
                                  top: 35%
                                  left: 105%
                                  transform: translate(-50%, -50%)
                                  text-align: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: 1075
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.04) +'px' : '0,4em'"
                                        color: "=props.submiddleindicatorcolorPression ? props.submiddleindicatorcolorPression : 'black'"
                                        font-weight: bold                                         

                            - component: f7-block
                              config:
                                class: center
                                style:
                                  margin-top: 0px
                                  position: absolute
                                  top: 50%
                                  left: 115%
                                  transform: translate(-50%, -50%)
                                  text-align: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: 1100
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.06) +'px' : '0,6em'"
                                        color: "=props.indicatorcolorPression ? props.indicatorcolorPression : 'orange'"
                                        font-weight: bold                                        

                            - component: f7-block
                              config:
                                class: center
                                style:
                                  margin-top: 0px
                                  position: absolute
                                  top: 50%
                                  left: 50%
                                  transform: translate(-50%, -50%)
                                  text-align: center
                              slots:
                                default:                            
                                  - component: Label
                                    config:
                                      text: = items[props.pressureItem].displayState
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.09) +'px' : '3em'"
                                        color: "=props.fontcolorPression ? props.fontcolorPression : 'orange'"
                                        font-weight: bold                                  




          - component: f7-row
            config:
              resizableFixed: true
              resizable-absolute: true
              class:
                - justify-content-center
              style:
                background-color: transparent
                border: none
              visible: = props.displayPressionData === true && props.displayPressionWidget === true && props.displayAllData === false
            slots:
              default:
                - component: f7-block
                  config:
                    class: PWSdata
                    style:
                      background: "=props.backcolorDataSquare ? props.backcolorDataSquare : 'var(--f7-toggle-inactive-color)'"
                      border-radius: "=(props.datalayerradiuspressionValue) ? props.datalayerradiuspressionValue +'%' : '2%'"
                      border: 2px solid rgb(64, 60, 77)
                  slots:
                    default:
                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: relative
                            top: 0%
                            left: 0%
                            text-align: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: "='Pression: '+ items[props.pressureItem].displayState"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold















































          - component: f7-row
            config:
              resizableFixed: true
              resizable-absolute: true
              class:
                - justify-content-center
              style:
                background-color: transparent
                border: none
              visible: = props.displayAllData === true 
            slots:
              default:
                - component: f7-block
                  config:
                    class: PWSdata
                    style:
                      background: "=props.backcolorDataSquare ? props.backcolorDataSquare : 'var(--f7-toggle-inactive-color)'"
                      border-radius: "=(props.datalayerradiuswindValue) ? props.datalayerradiuswindValue +'%' : '2%'"
                      border: 2px solid rgb(64, 60, 77)
                  slots:
                    default:

                      - component: f7-row
                        config:
                          resizableFixed: true
                          resizable-absolute: true
                          class:
                            - justify-content-center
                          style:
                            background-color: transparent
                            border: none
                          visible: = props.displayAllData === true && props.displaywindData === true
                        slots:
                          default:
                            - component: f7-block
                              config:
                                class: center
                                style:
                                  margin-top: 0px
                                  position: relative
                                  top: 0%
                                  left: 0%
                                  text-align: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: "='Wind Speed: '+ items[props.windspeedItem].displayState"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold
                                  - component: Label
                                    config:
                                      text: "='Wind Gust Speed: '+ items[props.windgustspeedItem].displayState"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold
                                  - component: Label
                                    config:
                                      text: "='Wind Direction: '+ items[props.winddirectionItem].state"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold
                                  - component: Label
                                    config:
                                      text: "='Wind Chill Temperature: '+ items[props.windchilltemperatureItem].displayState"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold


                      - component: f7-row
                        config:
                          resizableFixed: true
                          resizable-absolute: true
                          class:
                            - justify-content-center
                          style:
                            background-color: transparent
                            border: none
                          visible: = props.displayAllData === true && props.displaytemperatureData === true
                        slots:
                          default:                                        
                            - component: f7-block
                              config:
                                class: center
                                style:
                                  margin-top: 0px
                                  position: relative
                                  top: 0%
                                  left: 0%
                                  text-align: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: "='Temperature: '+ items[props.temperatureItem].displayState"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold
                                  - component: Label
                                    config:
                                      text: "='Humidity: '+ items[props.humidityItem].displayState"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold
                                  - component: Label
                                    config:
                                      text: "='Heat Index: '+ items[props.heatindextemperatureItem].displayState"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold
                                  - component: Label
                                    config:
                                      text: "='Wind Chill: '+ items[props.windchilltemperatureItem].displayState"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold
                                  - component: Label
                                    config:
                                      text: "='Dew Point: '+ items[props.dewpointtemperatureItem].displayState"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold
                                  - component: Label
                                    config:
                                      text: "='Pressure: '+ items[props.pressureItem].displayState"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold
                                  - component: Label
                                    config:
                                      text: "='Precipitation Rate: '+ items[props.precipitationrateItem].state"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold
                                  - component: Label
                                    config:
                                      text: "='Precipitation Total: '+ items[props.precipitationtotalItem].state"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold

                      - component: f7-row
                        config:
                          resizableFixed: true
                          resizable-absolute: true
                          class:
                            - justify-content-center
                          style:
                            background-color: transparent
                            border: none
                          visible: = props.displayAllData === true && props.displayUVData === true
                        slots:
                          default:                                         
                            - component: f7-block
                              config:
                                class: center
                                style:
                                  margin-top: 0px
                                  position: relative
                                  top: 0%
                                  left: 0%
                                  text-align: center
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: "='Solar Radiation: '+ items[props.solarradiationItem].state"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold
                                  - component: Label
                                    config:
                                      text: "='UV Index: '+ items[props.uvindexItem].state"
                                      style:
                                        font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                        color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                        font-weight: bold

                      - component: f7-block
                        config:
                          class: center
                          style:
                            margin-top: 0px
                            position: relative
                            top: 0%
                            left: 0%
                            text-align: center
                        slots:
                          default:                                  
                            - component: Label
                              config:
                                text: "='Elevation: '+ items[props.elevationItem].state"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "='Location: '+ items[props.locationItem].displayState"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "='Observation Time: '+ items[props.observationtimeItem].state"
                                style:
                                  font-size: "=props.size ? (Number(props.size)*0.05) +'px' : '0,5em'"
                                  color: "=props.fontcolorDataSquare ? props.fontcolorDataSquare : 'white'"
                                  font-weight: bold