Open Weather API Day Widget

I will say that the current colors and all for temps are in F vs C but I can make an update or you can adjust in the widget config to your liking.

Cool widget!

May I suggest this for the definition of your props:

props:
  parameters:
    - description: Card Label
      name: label
      required: false
      type: TEXT
      groupName: weather_widget_params
    - description: Time for card. Must be Today, Tomorrow, Day2, Day3, Day4, Day5, Hours01, Hours02, Hours03, Hours04, Hours05, Hours06, Hours07, Hours08, Hours09, Hours10, Hours11, Hours12
      name: day
      required: true
      type: TEXT
      pattern: Today|Tomorrow|Day2|Day3|Day4|Day5|Hours01|Hours02|Hours03|Hours04|Hours05|Hours06|Hours07|Hours08|Hours09|Hours10|Hours11|Hours12
      groupName: weather_widget_params
    - context: item
      description: Show Current Temps
      label: Enable
      name: current
      required: false
      type: BOOLEAN
      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.

If you put all your parameters into a group you have a chance to give it a description (basic HTML is allowed) so your explanation would look way better:

image

Also remember to put only a single link to your raw code in your post and add the published tag so folks can install your widget from the openHAB UI.

1 Like

Also this parameter which only accepts certain values could be defined like this:

    - description: Time for card. # Must be Today, Tomorrow, Day2, Day3, Day4, Day5, Hours01, Hours02, Hours03, Hours04, Hours05, Hours06, Hours07, Hours08, Hours09, Hours10, Hours11, Hours12
      name: day
      label: Time for card
      required: true
      type: TEXT
      limitToOptions: true
      defaultValue: Today
      options:
        - label: Today
          value: Today
        - label: Tomorrow
          value: Tomorrow
        - label: Day 2
          value: Day2
        - label: Day 3
          value: Day3
        - label: Day 4
          value: Day4
        - label: Day 5
          value: Day5
        # etc.
      groupName: weather_widget_params
1 Like

I was following the post that says maintainers/admins add the published tags. If that isn’t the case I can add them. Given im using snippets is there a way i can on the forum post have a history? and only the most recent link be consumed by karaf?

You add the published tag yourself, there’s no pre-moderation, if you screw up then hopefully a moderator or someone with rights to edit your post will intervene.

For the widget to be installable you need to provide a link whose URL ends in .yaml, for GitLab this would be this button:
image

which gives you this URL: https://gitlab.com/-/snippets/2330999/raw/main/widget.yaml
and that’s what you should include in your post (presumably this URL will always lead to the latest version in the “main” branch).

If you want to show the history of changes then it’s okay to add a link to the GitLab snippet page as well.

ahh so as long as latest only is the full raw link im ok.

Can I ask that Announcing the Community Marketplace be updated about tags and the template for this category? both state mods adding that tag. I feel alot of posts in this category that dont have the tag would if the users knew.

Where did you get this group? Seems to be different in german, but I don’t have any “root Onecall api item”…

There is a known issue with non-english items. Given the suffixes are appended in english. The root item is the the item that is created from the thing (typically just a group) that all the other (actual items with data) are held under.

Hi @mediatech15 ,

i cannot add the widget from marketplace:

2022-06-18 10:17:24.947 [ERROR] [munity.CommunityUIWidgetAddonHandler] - Unable to parse YAML: Unrecognized field "default" (class org.openhab.core.config.core.dto.ConfigDescriptionParameterDTO), not marked as ignorable (22 known properties: "readOnly", "max", "limitToOptions", "groupName", "name", "stepsize", "context", "defaultValue", "min", "label", "filterCriteria", "verify", "type", "description", "options", "required", "advanced", "unit", "multipleLimit", "pattern", "multiple", "unitLabel"])
 at [Source: (StringReader); line: 10, column: 21] (through reference chain: org.openhab.core.ui.components.RootUIComponent["props"]->org.openhab.core.config.core.dto.ConfigDescriptionDTO["parameters"]->java.util.ArrayList[1]->org.openhab.core.config.core.dto.ConfigDescriptionParameterDTO["default"])
2022-06-18 10:17:24.948 [ERROR] [munity.CommunityUIWidgetAddonHandler] - Widget from marketplace is invalid: Unable to parse YAML

I’m on 3.3M6. Any idea?

br

1 Like

So the error is caused by a default value but is working for me in M5. I wonder if the default property changed to defaultValue based on error message.

Actually im now running M6 but dont have it installed through marketplace. I also wonder if the marketplace parser is different from the actual app.

I’ve looked everywhere for this root item to no avail! There is nothing in my items list, and the channels for the onecall weather thing doesn’t contain anything that looks like what you describe. Can you point me in the right direction please?

After you have setup the OpenWeatherAccount Thing make sure you have added the thing below

Then once you have added that you should have something like this

Then in the channels There is a long list of everything the thing has. You need to add all the channels to items like normal. The key is

  • Don’t change default naming for items
  • Add all channels to items as the widget uses most (or a large majority) of them

Then you have them all added as items and they are all grouped under a single item like

![firefox_1PLG8h5DJq|356x499](upload://chWTfRi850epIif7cC2UIxuEm9j.pn

The Item the widget wants is the group

Let me know if this helps. Sorry for the delay.

As noted above this all assumes it is all done in English. There is a defect currently with it not working in other languages.

Same problem here. Cannot install through marketplace due to “Unrecognized field ‘default’”.

2023-01-03 00:51:05.688 [ERROR] [munity.CommunityUIWidgetAddonHandler] - Widget from marketplace is invalid: Unable to parse YAML

openHAB 3.4.0
Release Build
openhabian-pi-raspios32-202212201337

Hi all,

@mediatech15: thanks a lot for your work!

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

The result:

Code:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Hi,

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

hanks
Patrick

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

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?

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.