# Open Weather API Day Widget

**URL:** <https://community.openhab.org/t/open-weather-api-day-widget/136142>\
**Category:** UI Widgets\
**Tags:** stable, published\
**Created:** [May 24, 2022, 1:39am UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142 "2022-05-24T01:39:15Z")\
**Posts on this page:** 14\
**Page:** 2

<div class="post-metadata">

**Author:** ![Gufti](https://community.openhab.org/letter_avatar_proxy/v4/letter/g/7bcc69/32.png) [@Gufti](https://community.openhab.org/u/Gufti)\
**Post date:** [January 3, 2023, 12:25pm UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/21 "2023-01-03T12:25:22Z")

</div>

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:

 ![Screenshot_20230103_132334](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/d/7/d7c2ff5d82638ac38c1914a172ba6ebed2536052.png)

Code:

```yaml
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

```

---

<div class="post-metadata">

**Author:** ![pat281](https://community.openhab.org/user_avatar/community.openhab.org/pat281/32/77586_2.png) [@pat281](https://community.openhab.org/u/pat281)\
**Post date:** [August 2, 2023, 7:40am UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/22 "2023-08-02T07:40:31Z")

</div>

Hi,

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

hanks  
Patrick

---

<div class="post-metadata">

**Author:** ![greg\_nn](https://community.openhab.org/letter_avatar_proxy/v4/letter/g/eada6e/32.png) [@greg\_nn](https://community.openhab.org/u/greg_nn)\
**Post date:** [August 6, 2023, 3:10pm UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/23 "2023-08-06T15:10:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mediatech15](https://community.openhab.org/user_avatar/community.openhab.org/mediatech15/32/90012_2.png) [@mediatech15](https://community.openhab.org/u/mediatech15)\
**Post date:** [August 6, 2023, 3:24pm UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/24 "2023-08-06T15:24:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![mediatech15](https://community.openhab.org/user_avatar/community.openhab.org/mediatech15/32/90012_2.png) [@mediatech15](https://community.openhab.org/u/mediatech15)\
**Post date:** [August 6, 2023, 3:25pm UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/25 "2023-08-06T15:25:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![greg\_nn](https://community.openhab.org/letter_avatar_proxy/v4/letter/g/eada6e/32.png) [@greg\_nn](https://community.openhab.org/u/greg_nn)\
**Post date:** [August 6, 2023, 10:43pm UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/26 "2023-08-06T22:43:13Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Urs](https://community.openhab.org/user_avatar/community.openhab.org/urs/32/102305_2.png) [@Urs](https://community.openhab.org/u/Urs)\
**Post date:** [August 19, 2023, 3:02pm UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/27 "2023-08-19T15:02:34Z")

</div>

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

 ![Bildschirmfoto 2023-08-19 um 16.51.53](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/5/c/5c2068ca41dfd66bc1eb79aab926acc97e4fec25.png)

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

Thank you in advance and kind regards Urs

---

<div class="post-metadata">

**Author:** ![mediatech15](https://community.openhab.org/user_avatar/community.openhab.org/mediatech15/32/90012_2.png) [@mediatech15](https://community.openhab.org/u/mediatech15)\
**Post date:** [August 20, 2023, 7:57pm UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/28 "2023-08-20T19:57:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mediatech15](https://community.openhab.org/user_avatar/community.openhab.org/mediatech15/32/90012_2.png) [@mediatech15](https://community.openhab.org/u/mediatech15)\
**Post date:** [August 22, 2023, 4:47pm UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/29 "2023-08-22T16:47:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mediatech15](https://community.openhab.org/user_avatar/community.openhab.org/mediatech15/32/90012_2.png) [@mediatech15](https://community.openhab.org/u/mediatech15)\
**Post date:** [August 23, 2023, 8:18pm UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/30 "2023-08-23T20:18:48Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Dominik\_Forster](https://community.openhab.org/user_avatar/community.openhab.org/dominik_forster/32/102447_2.png) [@Dominik\_Forster](https://community.openhab.org/u/Dominik_Forster)\
**Post date:** [August 25, 2023, 11:59am UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/32 "2023-08-25T11:59:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dominik\_Forster](https://community.openhab.org/user_avatar/community.openhab.org/dominik_forster/32/102447_2.png) [@Dominik\_Forster](https://community.openhab.org/u/Dominik_Forster)\
**Post date:** [August 25, 2023, 12:37pm UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/33 "2023-08-25T12:37:01Z")

</div>

found it under development tools, thank you

---

<div class="post-metadata">

**Author:** ![greg\_nn](https://community.openhab.org/letter_avatar_proxy/v4/letter/g/eada6e/32.png) [@greg\_nn](https://community.openhab.org/u/greg_nn)\
**Post date:** [September 13, 2023, 12:22pm UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/34 "2023-09-13T12:22:21Z")

</div>

> [@mediatech15](#):
>
> f7-list-group

Hello Kyle,

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

Best regards  
Greg

---

<div class="post-metadata">

**Author:** ![Kathlyn](https://community.openhab.org/letter_avatar_proxy/v4/letter/k/74df32/32.png) [@Kathlyn](https://community.openhab.org/u/Kathlyn)\
**Post date:** [March 29, 2024, 6:06am UTC](https://community.openhab.org/t/open-weather-api-day-widget/136142/36 "2024-03-29T06:06:34Z")

</div>

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

[Previous page](https://community.openhab.org/t/open-weather-api-day-widget/136142.md?page=1)