# UI Widget: Weather

**URL:** <https://community.openhab.org/t/ui-widget-weather/106842>\
**Category:** UIs\
**Tags:** widget, openhab3\
**Created:** [October 21, 2020, 4:30am UTC](https://community.openhab.org/t/ui-widget-weather/106842 "2020-10-21T04:30:34Z")\
**Posts on this page:** 20\
**Page:** 11

<div class="post-metadata">

**Author:** ![TuxTux](https://community.openhab.org/user_avatar/community.openhab.org/tuxtux/32/93106_2.png) [@TuxTux](https://community.openhab.org/u/TuxTux)\
**Post date:** [September 26, 2022, 3:20pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/208 "2022-09-26T15:20:11Z")

</div>

Hello again,

so i figured out. The Item Prefix has to be set in widget configuration on the page itself.

 ![2022-09-26 17_15_59-openHAB](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/c/0/c06b01b533115080d8e4e7a37cab4a449f64d7bb.png)

Thank you for the nice widget!!!

👍🏻 👍🏻 👍🏻 👍🏻 👍🏻 👍🏻

---

<div class="post-metadata">

**Author:** ![scouseboy99](https://community.openhab.org/letter_avatar_proxy/v4/letter/s/8e8cbc/32.png) [@scouseboy99](https://community.openhab.org/u/scouseboy99)\
**Post date:** [October 21, 2022, 9:35pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/209 "2022-10-21T21:35:19Z")

</div>

Good Evening,  
I have setup up OH3 on RPI4 and have managed to get OWM working with this excellent widget. every thing works fine and displays fine but I can not seem to get the precipitation to display on any of the widgets. Could someone please give me a nudge in the right direction!

Cheers

 ![Screenshot 2022-10-21 at 22.30.19](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/d/1/d183a6e8c3db8c3e2950b5b3496492e884bc9dbc.jpeg)

---

<div class="post-metadata">

**Author:** ![Schrott.Micha](https://community.openhab.org/user_avatar/community.openhab.org/schrott.micha/32/22121_2.png) [@Schrott.Micha](https://community.openhab.org/u/Schrott.Micha)\
**Post date:** [November 26, 2022, 9:49pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/210 "2022-11-26T21:49:34Z")

</div>

Hi @RGroll,  
do you still work on this widget?  
I created some Pull request on your [repo](https://github.com/rgrollfitz/oh3-widgets) - but there was no activiy for the last 2 years.

---

<div class="post-metadata">

**Author:** ![JHC](https://community.openhab.org/letter_avatar_proxy/v4/letter/j/e79b87/32.png) [@JHC](https://community.openhab.org/u/JHC)\
**Post date:** [March 26, 2023, 10:07am UTC](https://community.openhab.org/t/ui-widget-weather/106842/211 "2023-03-26T10:07:59Z")

</div>

I would like to pick up this post here.  
Is it possible to build the temperature curve on the various forecast items with on-board tools?

---

<div class="post-metadata">

**Author:** ![martiniman](https://community.openhab.org/user_avatar/community.openhab.org/martiniman/32/60179_2.png) [@martiniman](https://community.openhab.org/u/martiniman)\
**Post date:** [March 26, 2023, 11:09am UTC](https://community.openhab.org/t/ui-widget-weather/106842/212 "2023-03-26T11:09:55Z")

</div>

Here another weather widget: [oh3-widgets/openmeteo at main · LazyGatto/oh3-widgets · GitHub](https://github-com.translate.goog/LazyGatto/oh3-widgets/tree/main/openmeteo?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=ru&_x_tr_pto=wapp)

 ![изображение](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/e/7/e737a3440a662febc7b5ee651cd08c5954c9ba00.jpeg)

---

<div class="post-metadata">

**Author:** ![kristofejro](https://community.openhab.org/user_avatar/community.openhab.org/kristofejro/32/50458_2.png) [@kristofejro](https://community.openhab.org/u/kristofejro)\
**Post date:** [June 12, 2023, 6:20pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/213 "2023-06-12T18:20:58Z")

</div>

Does “Weather popup #1” widget works for anyone on OH 4.0 M3?  
For me when I expand forcasted days there is no information/data (only maximum and minimum temperature)

 ![widget](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/7/9/79b9f51ce945ad95821e93f566a070a4f95decda.jpeg)

---

<div class="post-metadata">

**Author:** ![Borbosch](https://community.openhab.org/letter_avatar_proxy/v4/letter/b/53a042/32.png) [@Borbosch](https://community.openhab.org/u/Borbosch)\
**Post date:** [August 3, 2023, 8:34pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/214 "2023-08-03T20:34:23Z")

</div>

Unfortunately i have the same problem with openHAB 4.0.1 …

---

<div class="post-metadata">

**Author:** ![neuling10](https://community.openhab.org/letter_avatar_proxy/v4/letter/n/35a633/32.png) [@neuling10](https://community.openhab.org/u/neuling10)\
**Post date:** [August 17, 2023, 5:57pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/215 "2023-08-17T17:57:16Z")

</div>

Hey guys,

@oh11: First thank you very much for the widget 😊

Would it be possible to add a line break between temperature and wind speed in the hourly view?  
What would need to be added to the code?

 ![image](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/d/e/deafcbd1af30a16a2d76d37d47df2dc6e0842997.jpeg)

---

<div class="post-metadata">

**Author:** ![oh11](https://community.openhab.org/letter_avatar_proxy/v4/letter/o/919ad9/32.png) [@oh11](https://community.openhab.org/u/oh11)\
**Post date:** [August 18, 2023, 5:55pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/216 "2023-08-18T17:55:14Z")

</div>

thanks for the compliments - but it is a community work

 ![image](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/3/b/3be358acd43c5058838931b533f0d6b5f12cb694.jpeg)

Attached is the requested change.

```yaml
uid: weather_card
tags: []
props:
  parameters:
    - description: <b>Optional prefix</b> for item names.
      label: Item prefix
      name: itemPrefix
      required: false
      type: TEXT
      groupName: general
    - description: The number of hours you want to forecast <b>(<u>default:</u> 11)</b>
      label: Number of hours to forecast
      name: forecastHours
      required: false
      type: TEXT
      groupName: general
    - description: The number of days you want to forecast <b>(<u>default:</u> 5)</b>
      label: Number of days to forecast
      name: forecastDays
      required: false
      type: TEXT
      groupName: general
    - label: Background image-url
      name: backgroundUrl
      required: false
      type: TEXT
      groupName: general
    - description: Background blur
      label: Intensity of the background-blur (0 - 10)
      name: backgroundBlur
      required: false
      type: TEXT
      groupName: general
    - description: Acitvate 24-hour clock-format <b>(<u>default:</u> 12-hour clock-format)</b>
      label: 24h clock-format
      name: dateFormat
      required: false
      type: BOOLEAN
      groupName: general
    - description: Acitvate Sun-Indicator <b>(<u>default:</u> no)</b>
      label: Sun-Indicator
      name: sunIndicator
      required: false
      type: BOOLEAN
      groupName: general
    - description: Item for extra Information eg. local Temperature Sensor
      label: Information Item (optional)
      name: itemInform
      required: false
      type: TEXT
      groupName: general
      advanced: true
    - description: Alternative title for 'Hourly' within the segmented control <b>(<u>default:</u> Hourly)</b>
      label: Alternative text for 'Hourly'
      name: wordingForecastHours
      required: false
      type: TEXT
      groupName: wording
      advanced: true
    - description: Alternative title for 'Daily' within the segmented control <b>(<u>default:</u> Daily)</b>
      label: Alternative text for 'Daily'
      name: wordingForecastDays
      required: false
      type: TEXT
      groupName: wording
      advanced: true
    - description: Alternative title for 'Precipitation' within the segmented control <b>(<u>default:</u> Daily)</b>
      label: Alternative text for 'Precipitation'
      name: wordingForecastPrecib
      required: false
      type: TEXT
      groupName: wording
      advanced: true
    - description: Alternative text for 'Now' in the hourly-forecast & precipitation-forecast tab
      label: Translation 'Now'
      name: wordingNow
      required: false
      type: TEXT
      groupName: wording
      advanced: true
    - description: Alternative text for 'Today' in the daily-forecast tab
      label: Translation 'Today'
      name: wordingToday
      required: false
      type: TEXT
      groupName: wording
      advanced: true
    - description: Alternative text for 'Feel' in the feel-temperature display
      label: Translation 'Feel'
      name: wordingFeel
      required: false
      type: TEXT
      groupName: wording
      advanced: true
    - description: Alternative text for 'h' as Hour in the timeline (z.B. Uhr)
      label: Translation 'h'
      name: wordingHour
      required: false
      type: TEXT
      groupName: wording
      advanced: true
    - description: Enable Times of Day feature for background image
      label: item 'Times of Day'
      name: itemTimesOfDay
      required: false
      type: TEXT
      groupName: wording
      advanced: true
  parameterGroups:
    - name: general
      label: General settings
    - name: wording
      label: Wording
timestamp: Aug 19, 2023, 11:41:54 AM
component: f7-card
config:
  class:
    - padding
  style:
    --weather-card-color: 255,255,255
    --weather-card-text-color: rgba(var(--weather-card-color),1)
    -moz-user-select: none
    -ms-user-select: none
    -webkit-user-select: none
    background-image: "='url(' + props.backgroundUrl.substring(0, (props.backgroundUrl.length -4)) + ((props.itemTimesOfDay === undefined || items[props.itemTimesOfDay].state === 'NULL') ? '' : '_' + items[props.itemTimesOfDay].state) + props.backgroundUrl.substr(-4) + ')'"
    background-position: 100% 100%
    background-repeat: no-repeat
    background-size: cover
    border-radius: 20px
    overflow: hidden
    user-select: none
slots:
  default:
    - component: f7-block
      config:
        class:
          - no-padding
          - no-margin
        style:
          backdrop-filter: ='blur(' + props.backgroundBlur + 'px)'
          background-color: rgba(255,255,255,.15)
          border-radius: 20px
          height: 100%
          left: 0
          position: absolute
          top: 0
          width: 100%
    - component: f7-row
      slots:
        default:
          - component: f7-col
            config:
              class: col-80
              style:
                z-index: 999
            slots:
              default:
                - component: Label
                  config:
                    style:
                      color: var(--weather-card-text-color)
                      font-size: 26px
                      line-height: 32px
                      overflow: hidden
                      text-overflow: ellipsis
                      text-shadow: -1px 1px 1px hsl(0,0%,66%)
                      white-space: nowrap
                    text: "=items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'StationName'].state"
                - component: Label
                  config:
                    style:
                      color: var(--weather-card-text-color)
                      font-size: 12px
                      overflow: hidden
                      text-overflow: ellipsis
                      text-shadow: -1px 1px 1px hsl(0,0%,66%)
                      white-space: nowrap
                    text: =dayjs().format("DD. MMMM YYYY")
                - component: f7-icon
                  config:
                    class:
                      - align-content-center
                    f7: "=(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '01d') ? 'sun_max_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '01n') ? 'moon_stars_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '02d') ? 'cloud_sun_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '02n') ? 'cloud_moon_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '03d') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '03n') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '04d') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '04n') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '09d') ? 'cloud_heavyrain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '09n') ? 'cloud_heavyrain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '10d') ? 'cloud_sun_rain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '10n') ? 'cloud_moon_rain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '11d') ? 'cloud_sun_bolt_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '11n') ? 'cloud_moon_bolt_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '13d') ? 'cloud_snow_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '13n') ? 'cloud_snow_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '50d') ? 'cloud_fog_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Iconid'].state === '50n') ? 'cloud_fog_fill' : '?'"
                    size: 60
                    style:
                      color: rgba(var(--weather-card-color),.9)
                      padding-bottom: 5px
                      padding-top: 5px
                - component: Label
                  config:
                    style:
                      color: var(--weather-card-text-color)
                      font-size: 16px
                      line-height: 21px
                      overflow: hidden
                      text-overflow: ellipsis
                      text-shadow: -1px 1px 1px hsl(0,0%,66%)
                      white-space: nowrap
                    text: "=items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Current_Condition'].state"
          - component: f7-col
            config:
              class: col-20
              style:
                overflow: hidden
                text-align: center
                width: fit-content
                z-index: 999
            slots:
              default:
                - component: Label
                  config:
                    style:
                      color: var(--weather-card-text-color)
                      font-size: 58px
                      font-weight: 100
                      line-height: 58px
                      overflow: hidden
                      text-overflow: ellipsis
                      text-shadow: -1px 1px 1px hsl(0,0%,66%)
                      white-space: nowrap
                    text: "=(props.itemPrefix === undefined) ? Math.round(items.localCurrent_Temperature.state.split(' ')[0]) + '°' : Math.round(items[props.itemPrefix + 'Current_Temperature'].state.split(' ')[0])+'°'"
                - component: Label
                  config:
                    style:
                      color: var(--weather-card-text-color)
                      font-size: 21px
                      font-weight: 100
                      overflow: hidden
                      text-overflow: ellipsis
                      text-shadow: -1px 1px 1px hsl(0,0%,66%)
                      white-space: nowrap
                    text: "=(props.itemPrefix === undefined) ? 'gefühlt: ' + Math.round(items.localCurrent_Apparenttemperature.state.split(' ')[0]) +'°' : ((props.wordingFeel === undefined) ? 'Feel: ' : props.wordingFeel + ': ') + Math.round(items[props.itemPrefix + 'Current_Apparenttemperature'].state.split(' ')[0]) +'°'"
                - component: Label
                  config:
                    style:
                      color: var(--weather-card-text-color)
                      font-size: 21px
                      font-weight: 100
                      overflow: hidden
                      text-overflow: ellipsis
                      text-shadow: -1px 1px 1px hsl(0,0%,66%)
                      white-space: nowrap
                    text: "=(props.itemPrefix === undefined) ? Math.round(items.localCurrent_Humidity.state.split(' ')[0] * 100 )+'% ' : Math.round(items[props.itemPrefix + 'Current_Humidity'].state.split(' ')[0] * 100 ) + '% ' + Math.round(items[props.itemPrefix + 'Current_Windspeed'].state.split(' ')[0]) + ' km/h'"
                - component: Label
                  config:
                    style:
                      color: var(--weather-card-text-color)
                      font-size: 16px
                      font-weight: 100
                      overflow: hidden
                      text-overflow: ellipsis
                      text-shadow: -1px 1px 1px hsl(0,0%,66%)
                      white-space: nowrap
                    text: "=(props.itemInform === undefined) ? '' : items[props.itemInform].state "
    - component: f7-segmented
      config:
        class: margin-top
        strong: true
        style:
          --f7-button-active-text-color: rgba(var(--weather-card-color),1)
          --f7-button-border-radius: 0
          --f7-button-raised-box-shadow: none
          --f7-button-text-color: rgba(var(--weather-card-color),.5)
          --f7-segmented-strong-button-active-bg-color: transparent
          --f7-segmented-strong-button-active-box-shadow: 0px 4px 0px -1px white
          --f7-segmented-strong-button-active-text-color: rgba(var(--weather-card-color),1)
          --f7-segmented-strong-padding: 3px
          --f7-segmented-strong-text-color: rgba(var(--weather-card-color),.5)
          background: transparent
          border-bottom: 3px solid rgba(var(--weather-card-color),.5)
          z-index: 999
        textColor: white
      slots:
        default:
          - component: oh-button
            config:
              action: variable
              actionVariable: tab
              actionVariableValue: hourly_forecast
              active: =vars.tab === 'hourly_forecast'
              color: var(--weather-card-text-color)
              text: "=(props.wordingForecastHours === undefined) ? 'Hourly' : props.wordingForecastHours"
          - component: oh-button
            config:
              action: variable
              actionVariable: tab
              actionVariableValue: daily_forecast
              active: =vars.tab === 'daily_forecast'
              color: var(--weather-card-text-color)
              text: "=(props.wordingForecastDays === undefined) ? 'Daily' : props.wordingForecastDays"
          - component: oh-button
            config:
              action: variable
              actionVariable: tab
              actionVariableValue: precip_forecast
              active: =vars.tab === 'precip_forecast'
              color: var(--weather-card-text-color)
              text: "=(props.wordingForecastPrecib === undefined) ? 'Precipitation' : props.wordingForecastPrecib"
    - component: f7-swiper
      config:
        class:
          - padding-top
        navigation: true
        params:
          breakpoints:
            "0":
              slidesPerView: 1
            "240":
              slidesPerView: 2
            "320":
              slidesPerView: 3
            "480":
              slidesPerView: 4
            "640":
              slidesPerView: 5
          grabCursor: true
          initalSlide: 0
          keyboard: true
          mousewheel: true
          observeSlideChildren: true
          observer: true
          runCallbacksOnInit: true
          spaceBetween: 5
          updateOnWindowResize: true
          watchOverflow: true
        style:
          --swiper-navigation-color: var(--weather-card-text-color)
          --swiper-navigation-size: 30px
        visible: =!vars.tab || vars.tab === 'hourly_forecast'
      slots:
        default:
          - component: oh-repeater
            config:
              for: hour
              fragment: true
              rangeStart: 0
              rangeStop: "=(props.forecastHours === undefined) ? 11 : Number(props.forecastHours)"
              sourceType: range
            slots:
              default:
                - component: f7-swiper-slide
                  config:
                    expandable: true
                    id: =loop.hour_idx
                    style:
                      background: "=(props.sunIndicator === true) ? ((dayjs().add(loop.hour,'hour').format() >= items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').format() ? 'Today' : (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').add(1,'day').format() ? 'Tomorrow' : 'Day2')) + '_Sunrise'].state && dayjs().add(loop.hour,'hour').format() <= items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').format() ? 'Today' : (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').add(1,'day').format() ? 'Tomorrow' : 'Day2')) + '_Sunset'].state) ? 'rgba(44,130,201,.15)' : 'rgba(190,144,212,.15)') : 'none'"
                      border-radius: 5px
                  slots:
                    default:
                      - component: f7-row
                        config:
                          class:
                            - justify-content-center
                            - align-items-center
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: var(--weather-card-text-color)
                                  font-size: 18px
                                  font-weight: 600
                                text: "=(loop.hour === 0) ? ((props.wordingNow === undefined) ? 'Now' : props.wordingNow) : ((props.dateFormat === false) ? dayjs().add(loop.hour,'hour').startOf('hour').format('h A') : dayjs().add(loop.hour,'hour').startOf('hour').format('HH') + ((props.wordingHour === undefined) ? ' h' : ' ' + props.wordingHour))"
                      - component: f7-col
                        config:
                          class:
                            - justify-content-center
                            - align-items-center
                            - text-align-center
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: "=(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '01d') ? 'sun_max_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '01n') ? 'moon_stars_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '02d') ? 'cloud_sun_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '02n') ? 'cloud_moon_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '03d') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '03n') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '04d') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '04n') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '09d') ? 'cloud_heavyrain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '09n') ? 'cloud_heavyrain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '10d') ? 'cloud_sun_rain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '10n') ? 'cloud_moon_rain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '11d') ? 'cloud_sun_bolt_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '11n') ? 'cloud_moon_bolt_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '13d') ? 'cloud_snow_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '13n') ? 'cloud_snow_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '50d') ? 'cloud_fog_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Iconid'].state === '50n') ? 'cloud_fog_fill' : ''"
                                size: 40
                                style:
                                  color: var(--weather-card-text-color)
                                  padding-right: 5px
                            - component: Label
                              config:
                                style:
                                  color: var(--weather-card-text-color)
                                  font-size: 18px
                                  font-weight: 400
                                text: "=Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Temperature'].state.split(' ')[0]) + '°C' "
                            - component: Label
                              config:
                                style:
                                  color: var(--weather-card-text-color)
                                  font-size: 18px
                                  font-weight: 400
                                text: "=Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + '' + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0')) + '_Windspeed'].state.split(' ')[0]) + ' km/h'"
    - component: f7-swiper
      config:
        class:
          - padding-top
        navigation: true
        params:
          breakpoints:
            "0":
              slidesPerView: 1
            "210":
              slidesPerView: "=(props.forecastDays === undefined) ? 2 : ((props.forecastDays < 2) ? Math.round(Number(props.forecastDays) + 1) : 2)"
            "320":
              slidesPerView: "=(props.forecastDays === undefined) ? 3 : ((props.forecastDays < 3) ? Math.round(Number(props.forecastDays) + 1) : 3)"
            "480":
              slidesPerView: "=(props.forecastDays === undefined) ? 4 : ((props.forecastDays < 4) ? Math.round(Number(props.forecastDays) + 1) : 4)"
            "640":
              slidesPerView: "=(props.forecastDays === undefined) ? 5 : ((props.forecastDays < 5) ? Math.round(Number(props.forecastDays) + 1) : 5)"
          grabCursor: true
          initalSlide: 0
          keyboard: true
          mousewheel: true
          observeSlideChildren: true
          observer: true
          spaceBetween: 1
          updateOnWindowResize: true
          watchOverflow: true
        style:
          --swiper-navigation-color: var(--weather-card-text-color)
          --swiper-navigation-size: 30px
        visible: =vars.tab === 'daily_forecast'
      slots:
        default:
          - component: oh-repeater
            config:
              for: day
              fragment: true
              rangeStart: 0
              rangeStop: "=(props.forecastDays === undefined) ? 5 : Number(props.forecastDays)"
              sourceType: range
            slots:
              default:
                - component: f7-swiper-slide
                  config:
                    class:
                      - text-align-center
                  slots:
                    default:
                      - component: f7-row
                        config:
                          class:
                            - justify-content-center
                            - align-items-center
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: var(--weather-card-text-color)
                                  font-size: 18px
                                  font-weight: 600
                                text: "=(loop.day === 0) ? ((props.wordingToday === undefined) ? 'Today' : props.wordingToday) : dayjs().add(loop.day,'day').startOf('day').format('dddd')"
                      - component: f7-icon
                        config:
                          class:
                            - align-center
                          f7: "=(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '01d') ? 'sun_max_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '01n') ? 'moon_stars_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '02d') ? 'cloud_sun_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '02n') ? 'cloud_moon_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '03d') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '03n') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '04d') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '04n') ? 'cloud_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '09d') ? 'cloud_heavyrain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '09n') ? 'cloud_heavyrain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '10d') ? 'cloud_sun_rain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '10n') ? 'cloud_moon_rain_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '11d') ? 'cloud_sun_bolt_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '11n') ? 'cloud_moon_bolt_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '13d') ? 'cloud_snow_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '13n') ? 'cloud_snow_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '50d') ? 'cloud_fog_fill' : (items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + loop.day_idx))) + '_Iconid'].state === '50n') ? 'cloud_fog_fill' : '?'"
                          size: 40
                          style:
                            color: var(--weather-card-text-color)
                      - component: f7-row
                        config:
                          class:
                            - justify-content-center
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: var(--weather-card-text-color)
                                  font-size: 18px
                                  font-weight: 400
                                text: "=Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + ((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + (loop.day_idx))) + '_Maxtemperature'].state.split(' ')[0]) +'°'"
                            - component: Label
                              config:
                                style:
                                  color: rgba(var(--weather-card-color),.5)
                                  font-size: 18px
                                text: /
                            - component: Label
                              config:
                                style:
                                  color: rgba(var(--weather-card-color),.75)
                                  font-size: 18px
                                  font-weight: 400
                                text: "=Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + ((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + (loop.day_idx))) + '_Mintemperature'].state.split(' ')[0]) +'°'"
                      - component: f7-row
                        config:
                          class:
                            - justify-content-center
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: var(--weather-card-text-color)
                                  font-size: 18px
                                  font-weight: 400
                                text: "=Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + ((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + (loop.day_idx))) + '_Windspeed'].state.split(' ')[0]) +' km/h'"
    - component: f7-swiper
      config:
        class:
          - padding-top
        navigation: true
        params:
          breakpoints:
            "0":
              slidesPerView: 1
            "240":
              slidesPerView: 2
            "320":
              slidesPerView: 3
            "480":
              slidesPerView: 4
            "640":
              slidesPerView: 5
          grabCursor: true
          initalSlide: 0
          keyboard: true
          mousewheel: true
          observeSlideChildren: true
          observer: true
          runCallbacksOnInit: true
          spaceBetween: 5
          updateOnWindowResize: true
          watchOverflow: true
        style:
          --swiper-navigation-color: var(--weather-card-text-color)
          --swiper-navigation-size: 30px
        visible: =vars.tab === 'precip_forecast'
      slots:
        default:
          - component: oh-repeater
            config:
              for: hour
              fragment: true
              rangeStart: 0
              rangeStop: "=(props.forecastHours === undefined) ? 11 : Number(props.forecastHours)"
              sourceType: range
            slots:
              default:
                - component: f7-swiper-slide
                  config:
                    expandable: true
                    id: =loop.hour_idx
                    style:
                      background: "=(props.sunIndicator === true) ? ((dayjs().add(loop.hour,'hour').format() >= items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').format() ? 'Today' : (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').add(1,'day').format() ? 'Tomorrow' : 'Day2')) + '_Sunrise'].state && dayjs().add(loop.hour,'hour').format() <= items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'Forecast' + (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').format() ? 'Today' : (dayjs().add(loop.hour,'hour').startOf('day').format() === dayjs().startOf('day').add(1,'day').format() ? 'Tomorrow' : 'Day2')) + '_Sunset'].state) ? 'rgba(44,130,201,.15)' : 'rgba(190,144,212,.15)') : 'none'"
                      border-radius: 5px
                  slots:
                    default:
                      - component: f7-row
                        config:
                          class:
                            - justify-content-center
                            - align-items-center
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: var(--weather-card-text-color)
                                  font-size: 18px
                                  font-weight: 600
                                text: "=(loop.hour === 0) ? ((props.wordingNow === undefined) ? 'Now' : props.wordingNow) : ((props.dateFormat === false) ? dayjs().add(loop.hour,'hour').startOf('hour').format('h A') : dayjs().add(loop.hour,'hour').startOf('hour').format('HH') + ((props.wordingHour === undefined) ? ' h' : ' ' + props.wordingHour))"
                      - component: f7-col
                        config:
                          class:
                            - justify-content-center
                            - align-items-center
                            - text-align-center
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: "=(Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0') + '_Precipprobability'].state.split(' ')[0] ) >= 50 ) ? 'umbrella_fill' : 'umbrella' "
                                size: 40
                                style:
                                  color: var(--weather-card-text-color)
                                  padding-right: 5px
                            - component: Label
                              config:
                                style:
                                  color: var(--weather-card-text-color)
                                  font-size: 18px
                                  font-weight: 400
                                text: "=Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0') + '_Precipprobability'].state.split(' ')[0] ) +' %'"
                            - component: Label
                              config:
                                style:
                                  color: var(--weather-card-text-color)
                                  font-size: 18px
                                  font-weight: 400
                                text: "=Math.round(items[((props.itemPrefix === undefined) ? '' : props.itemPrefix) + 'ForecastHours' + (loop.hour_idx+1).toString().padStart(2,'0') + '_Humidity'].state *100) +' % rh'"

                                  

```

---

<div class="post-metadata">

**Author:** ![neuling10](https://community.openhab.org/letter_avatar_proxy/v4/letter/n/35a633/32.png) [@neuling10](https://community.openhab.org/u/neuling10)\
**Post date:** [August 18, 2023, 7:33pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/217 "2023-08-18T19:33:48Z")

</div>

It work’s, thank you very much 😊

---

<div class="post-metadata">

**Author:** ![oh11](https://community.openhab.org/letter_avatar_proxy/v4/letter/o/919ad9/32.png) [@oh11](https://community.openhab.org/u/oh11)\
**Post date:** [August 21, 2023, 7:12pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/218 "2023-08-21T19:12:40Z")

</div>

![image](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/3/9/39f8443bd4ed88b8106020ef73c81bc2c1465655.jpeg)  
The humidity was not displayed correctly.  
The error is now fixed. (Line 243: I added " \* 100")

---

<div class="post-metadata">

**Author:** ![kdb](https://community.openhab.org/letter_avatar_proxy/v4/letter/k/7feea3/32.png) [@kdb](https://community.openhab.org/u/kdb)\
**Post date:** [January 16, 2024, 6:01pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/219 "2024-01-16T18:01:08Z")

</div>

Is there anywhere a description to import that fantastic widget into OpenHAB 4.  
Thank you  
Klaus-Dieter

---

<div class="post-metadata">

**Author:** ![Johny\_Corbie](https://community.openhab.org/user_avatar/community.openhab.org/johny_corbie/32/106854_2.png) [@Johny\_Corbie](https://community.openhab.org/u/Johny_Corbie)\
**Post date:** [January 27, 2024, 4:27pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/220 "2024-01-27T16:27:55Z")

</div>

Are these widgets still working? Im getting NaN values everywhere

---

<div class="post-metadata">

**Author:** ![stue](https://community.openhab.org/letter_avatar_proxy/v4/letter/s/34f0e0/32.png) [@stue](https://community.openhab.org/u/stue)\
**Post date:** [January 28, 2024, 6:53pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/221 "2024-01-28T18:53:32Z")

</div>

I just got it working again today after not using it for a while. Maybe I could help, but don’t know your starting point.

---

<div class="post-metadata">

**Author:** ![stue](https://community.openhab.org/letter_avatar_proxy/v4/letter/s/34f0e0/32.png) [@stue](https://community.openhab.org/u/stue)\
**Post date:** [January 29, 2024, 10:02pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/222 "2024-01-29T22:02:50Z")

</div>

// **1.** - create **OWM-Account**  
[https://home.openweathermap.org/users/sign\_up](https://home.openweathermap.org/users/sign_up)

// **2.** - sign in and copy **API-key**  
[https://home.openweathermap.org/api\_keys](https://home.openweathermap.org/api_keys)

// **3.** - install **Add-On**  
openhab → Add-On Store → OpenWeatherMap Binding → install

// **4.** - create things on Web-UI (Account API **bridge** )  
openhab → Things → + → OpenWeatherMap Binding → OpenWeatherMap Account (bridge)

```auto
Unique ID: owmAPI

Identifier (UID):	openweathermap:weather-api:owmAPI
Label: OpenWeatherMap Account
API Schlüssel: 1a23bc45sd8j5324lkj234fsd9a0234s (copied in step 2)
Version 2.5
refreshInterval: 60 (note the specifications from owm!)
language: your language

```

// **5.** - create things on Web-UI (Channel **Resolver** )  
openhab → Things → + → OpenWeatherMap Binding → Add Manually → (openweathermap:onecall)

```auto
One Call API -> Wetterinformationen:
Unique ID: owmMyCity      

Identifier (UID): openweathermap:onecall:owmAPI:owmMyCity
Label: owmMyCity (automatic generated items gets Label as prefix (remember for Widget props))
Parent Bridge: OpenWeatherMap Account
Location of Weather:	12.345678910111213,12.345678910111213
Number of Days: 7 (or less)
Number of Hours: 48 (or less)
Number of Minutes: 60 (or less)

```

// **6.** - create **items**  
openhab → Things → owmMyCity → Channels → Add Points To Model (bottom of page) ( → Expert Mode)  
Choose all you want/need

// **7.** - **drop your background** image in /openhab/html/  
on Raspberry:  
/etc/openhab/html/myDirectory

// **8.** - create **widget**  
openhab → Developer Tools → Widgets → +  
paste one of the code-snippets, you can find above in this topic  
([UI Widget: Weather - #216 by oh11](https://community.openhab.org/t/ui-widget-weather/106842/216))  
change uid

// **9.** - Set Widget **Props**  
Item prefix:  
owmMyCity\_ (Label of onecall-API-thing / should be prefix of your items)

Number of hours to forecast:  
47 (as stated in step 5 (-1!))

Background image-url  
/static/myDirectory/myPicture.jpg (as stated in step 7., but without “root directory”)

---

<div class="post-metadata">

**Author:** ![kdb](https://community.openhab.org/letter_avatar_proxy/v4/letter/k/7feea3/32.png) [@kdb](https://community.openhab.org/u/kdb)\
**Post date:** [January 29, 2024, 10:31pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/223 "2024-01-29T22:31:24Z")

</div>

Paste the Code you can find. That doesn’t help. Where is code for a weather widget ?  
Thank you

---

<div class="post-metadata">

**Author:** ![stue](https://community.openhab.org/letter_avatar_proxy/v4/letter/s/34f0e0/32.png) [@stue](https://community.openhab.org/u/stue)\
**Post date:** [January 29, 2024, 11:41pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/224 "2024-01-29T23:41:44Z")

</div>

…above in this topic

> [@UI Widget: Weather](https://community.openhab.org/t/ui-widget-weather/106842/216):
>
> thanks for the compliments - but it is a community work Attached is the requested change. uid: weather\_card tags: [] props: parameters: - description: \<b\>Optional prefix\</b\> for item names. label: Item prefix name: itemPrefix required: false type: TEXT groupName: general - description: The number of hours you want to forecast \<b\>(\<u\>default:\</u\> 11)\</b\> label: Number of hours to forecast name: forecastHours required: false …

---

<div class="post-metadata">

**Author:** ![kdb](https://community.openhab.org/letter_avatar_proxy/v4/letter/k/7feea3/32.png) [@kdb](https://community.openhab.org/u/kdb)\
**Post date:** [February 12, 2024, 3:25pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/225 "2024-02-12T15:25:54Z")

</div>

Hello, using UI and German as language the names of the items don t match to the names of the widget and it doesn t work.  
ITS IMPORTANT TO GENERATE ITEMS IN ENGLISH

---

<div class="post-metadata">

**Author:** ![alda1](https://community.openhab.org/letter_avatar_proxy/v4/letter/a/a6a055/32.png) [@alda1](https://community.openhab.org/u/alda1)\
**Post date:** [March 12, 2024, 8:39am UTC](https://community.openhab.org/t/ui-widget-weather/106842/226 "2024-03-12T08:39:31Z")

</div>

Hi, please can you explain me in the Weather card this code :

```auto
text: "=Math.round(items[((!props.itemPrefix) ? '' : props.itemPrefix) + ((loop.hour === 0) ? 'Current' : 'ForecastHours' + ((loop.hour_idx+1 < 10 ? '0'+(loop.hour_idx+1) : loop.hour_idx+1))) + '_Temperature'].state.split(' ')[0]) + '°'"

```

why there is : loop.hour\_idx+1  
because for me it looks like, that one hour forecast is missing  
Thanks for explanation  
Alex

---

<div class="post-metadata">

**Author:** ![Alexander\_Munch](https://community.openhab.org/user_avatar/community.openhab.org/alexander_munch/32/103248_2.png) [@Alexander\_Munch](https://community.openhab.org/u/Alexander_Munch)\
**Post date:** [May 1, 2024, 9:29pm UTC](https://community.openhab.org/t/ui-widget-weather/106842/227 "2024-05-01T21:29:23Z")

</div>

Hey there.  
I have the same issue.  
Is there any solution about this Problem?  
Maybe @RGroll can help here?

[Previous page](https://community.openhab.org/t/ui-widget-weather/106842.md?page=10)

[Next page](https://community.openhab.org/t/ui-widget-weather/106842.md?page=12)