Open Weather API Day Widget

[Gufti (Christoph)]

Hi all,

@mediatech15: thanks a lot for your work!

I translated the widget (at least the displayed text) to German and adjusted as well the temperature thresholds to match Celsius values instead of Fahrenheit.

The result:

Code:

uid: weather_one_api_day_basic_german
tags:
  - CM
  - Custom
props:
  parameters:
    - description: Card Label
      name: label
      required: false
      type: TEXT
      groupName: weather_widget_params
    - default: Today
      description: Time for card.
      name: day
      required: true
      type: TEXT
      groupName: weather_widget_params
      limitToOptions: true
      options:
        - label: Today
          value: Today
        - label: Tomorrow
          value: Tomorrow
        - label: Day 3
          value: Day2
        - label: Day 4
          value: Day3
        - label: Day 5
          value: Day4
        - label: Day 6
          value: Day5
        - label: Hour +1
          value: Hours01
        - label: Hour +2
          value: Hours02
        - label: Hour +3
          value: Hours03
        - label: Hour +4
          value: Hours04
        - label: Hour +5
          value: Hour05
        - label: Hour +6
          value: Hours06
        - label: Hour +7
          value: Hours07
        - label: Hour +8
          value: Hours08
        - label: Hour +9
          value: Hours09
        - label: Hour +10
          value: Hours10
        - label: Hour +11
          value: Hours11
        - label: Hour +12
          value: Hours12
    - description: Show Current Temps
      label: Enable
      name: current
      required: false
      type: BOOLEAN
      groupName: weather_widget_params
    - default: "#dde4ee"
      description: Background color
      name: bg
      required: false
      type: TEXT
      groupName: weather_widget_params
    - context: item
      description: One Call API Weather and Forecast Item
      label: Item
      name: api
      required: true
      type: TEXT
      groupName: weather_widget_params
  parameterGroups:
    - name: weather_widget_params
      label: Weather Widget Params
      description: This assumes standard <a class="external text-color-blue" target="_blank" href="https://openweathermap.org/api/one-call-api">One Call API</a> usage with stardard underscore naming.
timestamp: Jan 3, 2023, 12:14:41 PM
component: f7-card
config:
  expandable: false
  style:
    background-color: = props.bg
    border-radius: 15px
    box-shadow: '= themeOptions.dark === "light" ? "5px 5px 10px #dcdcdb" : "0"'
    margin: 6px
slots:
  default:
    - component: f7-card-content
      config:
        style:
          padding-left: .75rem
          width: 100%
      slots:
        default:
          - component: f7-list
            config:
              style:
                width: 100%
            slots:
              default:
                - component: f7-list-item
                  config:
                    style:
                      width: calc(100% - .75rem)
                    stylesheet: >
                      .item-inner{
                        padding-right: 0px;
                      }
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            color: black
                            font-size: 1.25rem
                            font-weight: 700
                          text: >
                            = (props.label != undefined) ? props.label : props.day + "'s Weather"
                - component: f7-list-item
                  config:
                    style:
                      display: '= props.current == true ? "inherit" : "none"'
                      width: calc(100% - .75rem)
                    stylesheet: >
                      .item-inner{
                        padding-right: 0px;
                        display: block;
                      }

                      .item-content{
                        display: block;
                      }
                  slots:
                    default:
                      - component: f7-row
                        config:
                          style:
                            width: 100%
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-style: italic
                                  opacity: 70%
                                text: Aktuell
                      - component: f7-row
                        config:
                          style:
                            width: 100%
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-size: 1.25rem
                                  font-weight: bold
                                text: =(items[props.api + "_ForecastToday_Mintemperature"].displayState).split(' ')[0] + '/' + items[props.api + "_ForecastToday_Maxtemperature"].displayState
                            - component: f7-badge
                              config:
                                style:
                                  background-color: >
                                    = (Number.parseFloat(items[props.api + "_Current_Temperature"].state) >= 32.0) ? "red" 

                                    : (Number.parseFloat(items[props.api + "_Current_Temperature"].state) >= 26.0) ? "orange" 

                                    : (Number.parseFloat(items[props.api + "_Current_Temperature"].state) >= 23.0) ? "gold" 

                                    : (Number.parseFloat(items[props.api + "_Current_Temperature"].state) >= 17.0) ? "green" 

                                    : (Number.parseFloat(items[props.api + "_Current_Temperature"].state) >= 10.0) ? "lightblue" 

                                    : "lightblue"
                                  color: >
                                    = (Number.parseFloat(items[props.api + "_Current_Temperature"].state) >= 26.0) ? "white" 

                                    : (Number.parseFloat(items[props.api + "_Current_Temperature"].state) >= 23.0) ? "black" 

                                    : (Number.parseFloat(items[props.api + "_Current_Temperature"].state) >= 17.0) ? "white" 

                                    : "black"
                                  font-size: 1rem
                                  height: 1.25rem
                                  margin-top: .3rem
                                  padding: .5rem
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      text: >
                                        = (items[props.api + "_Current_Temperature"].displayState != undefined) ? items[props.api + "_Current_Temperature"].displayState  : items[props.api + "_Current_Temperature"].state
                - component: f7-list-item
                  config:
                    style:
                      display: >
                        = props.day == "Today" ? "inherit" 

                        : props.day == "Tomorrow" ? "inherit" 

                        : props.day == "Day2" ? "inherit" 

                        : props.day == "Day3" ? "inherit" 

                        : props.day == "Day4" ? "inherit" 

                        : props.day == "Day5" ? "inherit" 

                        : "none"
                      width: calc(100% - .75rem)
                    stylesheet: >
                      .item-inner{
                        padding-right: 0px;
                        display: block;
                      }

                      .item-content{
                        display: block;
                      }
                  slots:
                    default:
                      - component: f7-row
                        config:
                          style:
                            width: 100%
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-style: italic
                                  opacity: 70%
                                text: Temperaturen
                      - component: f7-row
                        config:
                          no-gap: true
                          style:
                            margin: 0rem
                            padding: 0rem
                            width: 100%
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  width: 48%
                              slots:
                                default:
                                  - component: f7-row
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            style:
                                              color: black
                                              font-size: 1rem
                                              font-weight: 600
                                              margin: .1rem
                                            text: Morgens
                                        - component: f7-badge
                                          config:
                                            style:
                                              background-color: >
                                                = (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Morningtemperature"].state) >= 32.0) ? "red" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Morningtemperature"].state) >= 26.0) ? "orange" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Morningtemperature"].state) >= 23.0) ? "gold" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Morningtemperature"].state) >= 17.0) ? "green" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Morningtemperature"].state) >= 10.0) ? "lightblue" 

                                                : "lightblue"
                                              color: >
                                                = (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Morningtemperature"].state) >= 26.0) ? "white" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Morningtemperature"].state) >= 23.0) ? "black" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Morningtemperature"].state) >= 17.0) ? "white" 

                                                : "black"
                                              font-size: .75rem
                                              font-weight: 700
                                              margin: .3rem
                                              padding: .5rem
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  text: >
                                                    = (items[props.api + "_Forecast" + props.day + "_Morningtemperature"].displayState != undefined) ? items[props.api + "_Forecast" + props.day + "_Morningtemperature"].displayState : items[props.api + "_Forecast" + props.day + "_Morningtemperature"].state
                                  - component: f7-row
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            style:
                                              color: black
                                              font-size: 1rem
                                              font-weight: 600
                                              margin: .1rem
                                            text: Abends
                                        - component: f7-badge
                                          config:
                                            style:
                                              background-color: >
                                                = (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Eveningtemperature"].state) >= 32.0) ? "red" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Eveningtemperature"].state) >= 26.0) ? "orange" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Eveningtemperature"].state) >= 23.0) ? "gold" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Eveningtemperature"].state) >= 17.0) ? "green" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Eveningtemperature"].state) >= 10.0) ? "lightblue" 

                                                : "lightblue"
                                              color: >
                                                = (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Eveningtemperature"].state) >= 26.0) ? "white" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Eveningtemperature"].state) >= 23.0) ? "black" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Eveningtemperature"].state) >= 17.0) ? "white" 

                                                : "black"
                                              font-size: .75rem
                                              font-weight: 700
                                              margin: .3rem
                                              padding: .5rem
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  text: >
                                                    = (items[props.api + "_Forecast" + props.day + "_Eveningtemperature"].displayState != undefined)  ? items[props.api + "_Forecast" + props.day + "_Eveningtemperature"].displayState  : items[props.api + "_Forecast" + props.day + "_Eveningtemperature"].state
                            - component: f7-col
                              config:
                                style:
                                  width: 48%
                              slots:
                                default:
                                  - component: f7-row
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            style:
                                              color: black
                                              font-size: 1rem
                                              font-weight: 600
                                              margin: .1rem
                                            text: Tags
                                        - component: f7-badge
                                          config:
                                            style:
                                              background-color: >
                                                = (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Daytemperature"].state) >= 32.0) ? "red" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Daytemperature"].state) >= 26.0) ? "orange" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Daytemperature"].state) >= 23.0) ? "gold" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Daytemperature"].state) >= 17.0) ? "green" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Daytemperature"].state) >= 10.0) ? "lightblue" 

                                                : "lightblue"
                                              color: >
                                                = (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Daytemperature"].state) >= 26.0) ? "white" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Daytemperature"].state) >= 26.0) ? "black" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Daytemperature"].state) >= 17.0) ? "white" 

                                                : "black"
                                              font-size: .75rem
                                              font-weight: 700
                                              margin: .3rem
                                              padding: .5rem
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  text: >
                                                    = (items[props.api + "_Forecast" + props.day + "_Daytemperature"].displayState != undefined) ? items[props.api + "_Forecast" + props.day + "_Daytemperature"].displayState : items[props.api + "_Forecast" + props.day + "_Daytemperature"].state
                                  - component: f7-row
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            style:
                                              color: black
                                              font-size: 1rem
                                              font-weight: 600
                                              margin: .1rem
                                            text: Nachts
                                        - component: f7-badge
                                          config:
                                            style:
                                              background-color: >
                                                = (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Nighttemperature"].state) >= 32.0) ? "red" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Nighttemperature"].state) >= 26.0) ? "orange" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Nighttemperature"].state) >= 23.0) ? "gold" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Nighttemperature"].state) >= 17.0) ? "green" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Nighttemperature"].state) >= 10.0) ? "lightblue" 

                                                : "lightblue"
                                              color: >
                                                = (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Nighttemperature"].state) >= 26.0) ? "white" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Nighttemperature"].state) >= 23.0) ? "black" 

                                                : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Nighttemperature"].state) >= 17.0) ? "white" 

                                                : "black"
                                              font-size: .75rem
                                              font-weight: 700
                                              margin: .3rem
                                              padding: .5rem
                                          slots:
                                            default:
                                              - component: Label
                                                config:
                                                  text: >
                                                    = (items[props.api + "_Forecast" + props.day + "_Nighttemperature"].displayState != undefined) ? items[props.api + "_Forecast" + props.day + "_Nighttemperature"].displayState : items[props.api + "_Forecast" + props.day + "_Nighttemperature"].state
                - component: f7-list-item
                  config:
                    style:
                      width: calc(100% - .75rem)
                    stylesheet: >
                      .item-inner{
                        padding-right: 0px;
                        display: block;
                      } .item-inner::after{
                        display:none;    
                       }
                      .item-content{
                        display: block;
                      }
                  slots:
                    default:
                      - component: f7-row
                        config:
                          style:
                            width: 100%
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-style: italic
                                  opacity: 70%
                                text: Bedingungen und Vorhersage
                      - component: f7-row
                        config:
                          class: d-flex
                          no-gap: true
                          style:
                            width: 100%
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  width: 33%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        font-weight: 600
                                        margin-top: .5rem
                                      text: Vorhersage
                            - component: f7-col
                              config:
                                style:
                                  width: 52%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        margin-top: .5rem
                                        overflow: hidden
                                        text-overflow: ellipsis
                                        text-transform: capitalize
                                        white-space: nowrap
                                      text: = items[props.api + "_Forecast" + props.day + "_Condition"].state
                            - component: f7-col
                              config:
                                style:
                                  width: 40px
                              slots:
                                default:
                                  - component: oh-image
                                    config:
                                      item: = props.api + "_Forecast" + props.day + "_Icon"
                                      refreshInterval: 10000
                                      style:
                                        height: 40px
                      - component: f7-row
                        config:
                          class: d-flex
                          no-gap: true
                          style:
                            margin-bottom: .3rem
                            width: 100%
                            display: >
                              = props.day == "Hours01" ? "flex" 

                              : props.day == "Hours02" ? "flex" 

                              : props.day == "Hours03" ? "flex" 

                              : props.day == "Hours04" ? "flex" 

                              : props.day == "Hours05" ? "flex" 

                              : props.day == "Hours06" ? "flex" 

                              : props.day == "Hours07" ? "flex" 

                              : props.day == "Hours08" ? "flex" 

                              : props.day == "Hours09" ? "flex" 

                              : props.day == "Hours10" ? "flex" 

                              : props.day == "Hours11" ? "flex" 

                              : props.day == "Hours12" ? "flex" 

                              : "none"
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  width: 33%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        font-weight: 600
                                        margin-top: .15rem
                                      text: Temperatur
                            - component: f7-col
                              config:
                                style:
                                  width: 52%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        margin-top: .15rem
                                        text-align: left
                                      text: = items[props.api + "_Forecast" + props.day + "_Temperature"].state
                            - component: f7-col
                              config:
                                style:
                                  width: 40px
                              slots:
                                default:
                                  - component: f7-icon
                                    config:
                                      f7: thermometer
                                      size: 30
                                      style:
                                        color: black
                                        padding-left: 5px
                      - component: f7-row
                        config:
                          class: d-flex
                          no-gap: true
                          style:
                            margin-bottom: .3rem
                            width: 100%
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  width: 33%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        font-weight: 600
                                        margin-top: .15rem
                                      text: Luftfeuchtigk.
                            - component: f7-col
                              config:
                                style:
                                  width: 52%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        margin-top: .15rem
                                        text-align: left
                                      text: = items[props.api + "_Forecast" + props.day + "_Humidity"].state
                            - component: f7-col
                              config:
                                style:
                                  width: 40px
                              slots:
                                default:
                                  - component: f7-icon
                                    config:
                                      f7: >
                                        = (Number.parseInt(items[props.api + "_Forecast" + props.day + "_Humidity"].state) >= 70) ? "drop_fill"

                                        : "drop"
                                      size: 30
                                      style:
                                        color: black
                                        padding-left: 5px
                      - component: f7-row
                        config:
                          class: d-flex
                          no-gap: true
                          style:
                            margin-bottom: .3rem
                            width: 100%
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  width: 33%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        font-weight: 600
                                        margin-top: .15rem
                                      text: Luftdruck
                            - component: f7-col
                              config:
                                style:
                                  width: 52%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        margin-top: .15rem
                                        text-align: left
                                      text: = items[props.api + "_Forecast" + props.day + "_Pressure"].displayState
                            - component: f7-col
                              config:
                                style:
                                  width: 40px
                              slots:
                                default:
                                  - component: f7-icon
                                    config:
                                      f7: graph_circle
                                      size: 30
                                      style:
                                        color: black
                                        padding-left: 5px
                      - component: f7-row
                        config:
                          class: d-flex
                          no-gap: true
                          style:
                            margin-bottom: .3rem
                            width: 100%
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  width: 33%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        font-weight: 600
                                        margin-top: .15rem
                                      text: Windgeschw.
                            - component: f7-col
                              config:
                                style:
                                  width: 52%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        margin-top: .15rem
                                        text-align: left
                                      text: = items[props.api + "_Forecast" + props.day + "_Windspeed"].displayState
                            - component: f7-col
                              config:
                                style:
                                  width: 40px
                              slots:
                                default:
                                  - component: f7-icon
                                    config:
                                      f7: wind
                                      size: 30
                                      style:
                                        color: black
                                        padding-left: 5px
                      - component: f7-row
                        config:
                          class: d-flex
                          no-gap: true
                          style:
                            margin-bottom: .3rem
                            width: 100%
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  width: 33%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        font-weight: 600
                                        margin-top: .15rem
                                      text: " & Richtung"
                            - component: f7-col
                              config:
                                style:
                                  width: 52%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        margin-top: .15rem
                                        text-align: left
                                      text: >
                                        = (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 22.5) ? "Nord"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 67.5) ? "Nord-Ost"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 112.5) ? "Ost"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 157.5) ? "Süd-Ost"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 202.5) ? "Süd"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 247.5) ? "Süd-West"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 292.5) ? "West"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 337.5) ? "Nord-West"

                                        : "North"
                            - component: f7-col
                              config:
                                style:
                                  width: 40px
                              slots:
                                default:
                                  - component: f7-icon
                                    config:
                                      f7: >
                                        = (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 22.5) ? "arrow_up"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 67.5) ? "arrow_up_right"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 112.5) ? "arrow_right"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 157.5) ? "arrow_down_right"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 202.5) ? "arrow_down"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 247.5) ? "arrow_down_left"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 292.5) ? "arrow_left"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Winddirection"].state) < 337.5) ? "arrow_up_left"

                                        : "arrow_up"
                                      size: 30
                                      style:
                                        color: black
                                        padding-left: 5px
                      - component: f7-row
                        config:
                          class: d-flex
                          no-gap: true
                          style:
                            display: >
                              = props.day == "Today" ? "flex" 

                              : props.day == "Tomorrow" ? "flex" 

                              : props.day == "Day2" ? "flex" 

                              : props.day == "Day3" ? "flex" 

                              : props.day == "Day4" ? "flex" 

                              : props.day == "Day5" ? "flex" 

                              : "none"
                            margin-bottom: .3rem
                            width: 100%
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  width: 33%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        font-weight: 600
                                        margin-top: .15rem
                                      text: UV Index
                            - component: f7-col
                              config:
                                style:
                                  width: 52%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        margin-top: .15rem
                                        text-align: left
                                      text: = items[props.api + "_Forecast" + props.day + "_Uvindex"].state
                            - component: f7-col
                              config:
                                style:
                                  width: 40px
                              slots:
                                default:
                                  - component: f7-icon
                                    config:
                                      f7: >
                                        = (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Uvindex"].state) > 5.0) ? "sun_max_fill"

                                        : "sun_min_fill"
                                      size: 30
                                      style:
                                        color: >
                                          = (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Uvindex"].state) > 9.0) ? "red"

                                          : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Uvindex"].state) > 7.5) ? "darkorange"

                                          : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Uvindex"].state) > 5.0) ? "orange"

                                          : "gold"
                                        padding-left: 5px
                      - component: f7-row
                        config:
                          class: d-flex
                          no-gap: true
                          style:
                            margin-bottom: .3rem
                            width: 100%
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  width: 33%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        font-weight: 600
                                        margin-top: .15rem
                                      text: Regenwahrsch.
                            - component: f7-col
                              config:
                                style:
                                  width: 52%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        margin-top: .15rem
                                        text-align: left
                                      text: = items[props.api + "_Forecast" + props.day + "_Precipprobability"].state
                            - component: f7-col
                              config:
                                style:
                                  width: 40px
                              slots:
                                default:
                                  - component: f7-icon
                                    config:
                                      f7: >
                                        = (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Precipprobability"].state) > 75.0) ? "cloud_heavyrain"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Precipprobability"].state) > 50.0) ? "cloud_drizzle"

                                        : (Number.parseFloat(items[props.api + "_Forecast" + props.day + "_Precipprobability"].state) > 25.0) ? "cloud_sun_rain"

                                        : "cloud_sun"
                                      size: 30
                                      style:
                                        color: black
                                        padding-left: 5px
                      - component: f7-row
                        config:
                          class: d-flex
                          no-gap: true
                          style:
                            width: 100%
                        slots:
                          default:
                            - component: f7-col
                              config:
                                style:
                                  width: 33%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        font-weight: 600
                                        margin-top: .15rem
                                      text: Regenmenge
                            - component: f7-col
                              config:
                                style:
                                  width: 52%
                              slots:
                                default:
                                  - component: Label
                                    config:
                                      style:
                                        color: black
                                        font-size: 1rem
                                        margin-top: .15rem
                                        text-align: left
                                      text: = items[props.api + "_Forecast" + props.day + "_Rain"].displayState
                            - component: f7-col
                              config:
                                style:
                                  width: 40px
                              slots:
                                default:
                                  - component: f7-icon
                                    config:
                                      f7: chart_bar_circle
                                      size: 30
                                      style:
                                        color: black
                                        padding-left: 5px
                - component: f7-list-item
                  config:
                    style:
                      display: >
                        = props.day == "Today" ? "inherit" 

                        : props.day == "Tomorrow" ? "inherit" 

                        : props.day == "Day2" ? "inherit" 

                        : props.day == "Day3" ? "inherit" 

                        : props.day == "Day4" ? "inherit" 

                        : props.day == "Day5" ? "inherit" 

                        : "none"
                      height: 0
                      margin-bottom: .3rem
                      padding: 0px
                      width: calc(100% - .75rem)
                    stylesheet: >
                      .item-inner{
                        padding-right: 0px;
                        display: block;
                      } .item-inner::after{
                        padding: 0;
                        margin: 0;
                        height: 1;
                        transform: 0;
                        position: relative;
                      } .item-content{
                        display: block;
                        min-height: 0;
                      }
                - component: f7-list-item
                  config:
                    style:
                      display: >
                        = props.day == "Today" ? "inherit" 

                        : props.day == "Tomorrow" ? "inherit" 

                        : props.day == "Day2" ? "inherit" 

                        : props.day == "Day3" ? "inherit" 

                        : props.day == "Day4" ? "inherit" 

                        : props.day == "Day5" ? "inherit" 

                        : "none"
                      width: calc(100% - .75rem)
                    stylesheet: >
                      .item-inner{
                        padding-right: 0px;
                        display: block;
                      }

                      .item-content{
                        display: block;
                      }
                  slots:
                    default:
                      - component: f7-row
                        config:
                          style:
                            width: 100%
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: black
                                  font-style: italic
                                  opacity: 70%
                                text: Sonne
                            - component: f7-row
                              config:
                                class: d-flex
                                no-gap: true
                                style:
                                  width: 100%
                              slots:
                                default:
                                  - component: f7-col
                                    config:
                                      style:
                                        width: 33%
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            style:
                                              color: black
                                              font-size: 1rem
                                              font-weight: 600
                                              margin-top: .15rem
                                            text: Aufgang
                                  - component: f7-col
                                    config:
                                      style:
                                        width: 52%
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            style:
                                              color: black
                                              font-size: 1rem
                                              margin-top: .15rem
                                              text-align: left
                                            text: = dayjs(items[props.api + "_Forecast" + props.day + "_Sunrise"].state).format("LTS")
                                  - component: f7-col
                                    config:
                                      style:
                                        width: 40px
                                    slots:
                                      default:
                                        - component: f7-icon
                                          config:
                                            f7: sunrise
                                            size: 30
                                            style:
                                              color: black
                                              padding-left: 5px
                            - component: f7-row
                              config:
                                class: d-flex
                                no-gap: true
                                style:
                                  width: 100%
                              slots:
                                default:
                                  - component: f7-col
                                    config:
                                      style:
                                        width: 33%
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            style:
                                              color: black
                                              font-size: 1rem
                                              font-weight: 600
                                              margin-top: .15rem
                                            text: Untergang
                                  - component: f7-col
                                    config:
                                      style:
                                        width: 52%
                                    slots:
                                      default:
                                        - component: Label
                                          config:
                                            style:
                                              color: black
                                              font-size: 1rem
                                              margin-top: .15rem
                                              text-align: left
                                            text: = dayjs(items[props.api + "_Forecast" + props.day + "_Sunset"].state).format("LTS")
                                  - component: f7-col
                                    config:
                                      style:
                                        width: 40px
                                    slots:
                                      default:
                                        - component: f7-icon
                                          config:
                                            f7: sunset
                                            size: 30
                                            style:
                                              color: black
                                              padding-left: 5px

[pat281 (Pat)]

Hi,

Widget is not working after upgrade to OH 4.0.
How do i fix it?

hanks
Patrick

[greg_nn (Greg)]

Hello,

on my system widget is not working too after upgrading to OH 4.0.1…

Do someone know, what modules or other plugings are required for this widget?
can i see logs for MainUI widgets anywehere?

Best regards
Greg

[mediatech15 (Kyle Mason)]

As far as the modules or other plugins needed
OpenWeather Api

That said I have not upgraded my system to 4.0 yet due to some work to be done before migration. Is there any additional info you can provide to help me help you?

Does it install, show in UI, do widgets update, fully or partially?

[mediatech15 (Kyle Mason)]

depends on your logging setup but yes errors that are thrown by widgets will show in the logs. you can see them in the openhab cli/console.

[greg_nn (Greg)]

Hello Kyle,

i’m using german translated version, that i added manually.

I’ve looked in the log files and couldn’t find anything.
Only some messages like "Failed to update item ‘One_Call_API__Lokales_Wetter_und_Wettervorhersage_ForecastHours06_Visibility’ because ‘88 %’ could not be converted to the item unit ‘m’ ",
but i think, its not the cause of widget problem…

[Urs]

Hi All,
I have still a problem with this Widget on my german UI. After adding the widget, I see only

Any idea? Other widges are shown, whenever they are not configured.

Thank you in advance and kind regards Urs

[mediatech15 (Kyle Mason)]

Its actually possible that is the issue. There was changes to the units in OH 4 (one reason I haven’t moved yet as I have to update my config.

The widgets use the .state which in OH 3 is the raw state. displayState normally had the unit or modifications and transforms. I believe OH4 has better handling of units but in this widget the parseFloat will fail on values with units attached.

[mediatech15 (Kyle Mason)]

I will try to fix this once im on OH 4
In the mean time I am open to pulling in community changes.

[mediatech15 (Kyle Mason)]

@greg_nn @Urs @pat281

I found the issue. I havent fully tested with 3.x yet. But you can make the following change and should allow use.

replace instances of f7-list-item with f7-list-group

It appears the f7 package update had breaking changes.

[Dominik_Forster (Dom Fö)]

Hey Christoph,

can you help me how to get your translated code into my openHAB?
I have no clue where to find the code which must be replaced.

Regards,
Dominik

[Dominik_Forster (Dom Fö)]

found it under development tools, thank you

[greg_nn (Greg)]

@mediatech15

f7-list-group

Hello Kyle,

thank you! i was on vacation, so i tried your solution just today.
it works!!

Best regards
Greg

[Kathlyn]

Are there any limitations or usage restrictions associated with integrating the “Open Weather API Day Widget” into a project?