This would work, yes.
It requires to manipulate the items metadata apart from the default settings to the system during the creation of the items via the UI and adding extra informations with the transformation map , which I left out on purpose to make this widget as beginner-friendly as its curently possible.
Hi @RGroll
Thanks for all your help so far.
I notice I am getting the following errors is my openhab.log file using the stock Weather popup #2 (extended) widget.
2021-03-31 08:33:34.472 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: undefined
2021-03-31 08:34:11.314 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: undefined
2021-03-31 08:34:23.965 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: undefined
2021-03-31 08:34:52.613 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: undefined
2021-03-31 08:35:24.470 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: undefined
2021-03-31 08:35:24.674 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: undefined
2021-03-31 08:35:24.674 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: ForecastToday_Sunset
2021-03-31 08:35:24.690 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: ForecastTomorrow_Sunset
2021-03-31 08:35:24.690 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: WeatherAtHome_ForecastHours26_Iconid
2021-03-31 08:35:24.690 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: WeatherAtHome_ForecastHours26_Temperature
2021-03-31 08:35:24.690 [WARN ] [e.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: WeatherAtHome_ForecastHours26_Precipprobability
Errors occur every time I access the Widget.
The items exist (other than the Hour26 - I have the Widget configured for 25 hours.
It appears that the Sunset feature is working well, see screen shot.
I have seen that the “Attempting to send a state update of an item which doesn’t exist: undefined” messages can be a result of some widgets?
Many Thanks
Mark
awesome widget 
I just implemented it and have 2 questions.
For me the lower right values on the card are not formatted correctly like on you screenshots.
Why could I not see the pipe separator?
For the Pop Ups… I tried to edit the item prefix directly in the widget code but this wont work.
I just didn’t get it where to acutally they should be edited as the props are not editable like when adding the card.
best
Hey @shorty707
thanks!
This is a known (and strange) artifact on the first save of a widget and the unicode symbols I used as an replacement for the space before and after the pipe.
I’ve updated the repo with a fix for this (I hope). So you could either use the new code or do it easily for yourself if you replace the value of the text parameter in line 363 and 677 with '=" | "'
There are lots of dependencies inside the expressions which could easily be messed up. Its definetely recommended to use the widget configuration.
I’m not 100% sure if I understand you correct here, but I think you would like to open the weather popup widget when you click on the weather card widget?
If yes, you have to click on the Code tab while you’re editing the page and add the widget configuration parameters to the page manually (as theres a bug with the action settings for custom widgets):
- component: widget:weatherCard
config:
itemPrefix: OneCallAPIweatherandforecast_
locationTitle: Some city
widget_action: popup
widget_actionModal: widget:weatherPopup
widget_actionModalConfig:
itemPrefix: OneCallAPIweatherandforecast_
forecastHours: "12"
forecastDays: "3"
sunIndicator: true
locationTitle: YourCity
You could also use any of the standard elements, like a Label card…
…Select Configure Widget → Inside the seen selection you’ve to choose Open Popup as Action, the desired weather popup as Modal Page or Widget and then click on Modal component configuration to set the widgets parameter.
Hope it helps
thanks
that explained it.
I played more with the widgets and 2 more things came to my mind.
I added the things and items per files.
Discovery then finds 2 more things automatically.
should I also add them via the things file?
best
How did you implemented the Rain Radar?
Hey @RGroll ,
trying to get these very beautilful widgets to work.
I’ve got the free OneCall API key with which I think that I should be able to have forecast data for the next 4 days.
Forecast for “hours” and “Days 1,2,3” are working fine, just the last day always shows NaN / NaN.
Thing “One Call API weather and forecast” is set with 4d/13h - same is done in the weather card as well as the weather popup widget.
I added the 172(!) items several times from UI as well as via “Add Items from Textual Definition” (source) - always the same result.
What is wrong?
Hi first thanks for the widget, i used the card widget and i found it cool.
Only issue i had so far is that the widget stop partially stop refreshing after sometimes : hourly forecast and all other forecast are not refreshing if i do not change the tab.
Anyone having the issue or an idea how this can be solved.
Great work with this widget!
If you want to display windirection by use of an arrow, I use this component:
- component: f7-icon
config:
f7: location_north_fill
size: 24
style:
transform: "=(('Rotate(') + (Math.round(Math.round(items[((!props.itemPrefix) ? '' : props.itemPrefix) + 'Forecast' + ((loop.day === 0) ? 'Today' : ((loop.day === 1) ? 'Tomorrow' : 'Day' + (loop.day_idx))) + '_Winddirection'].state.split(' ')[0])) - 180) )+ ('deg)')"
color: var(--weather-card-text-color)
text-shadow: var(--weather-text-shadow-strong)
padding-top: 5px
padding-bottom: 5pxDear @RGroll, how can i add background temperature trendline to this widget? I mean where can I insert the code:
- component: oh-trend
config:
trendItem: Forecast_Current_Apparenttemperature
trendGradient:
- "#aa2b1d"
- "#cc561e"
- "#ef8d32"
- "#beca5c"
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(90%)
position: absolute
width: 100%
height: 100%
top: 0px
left: 0px
z-index: 0
Is there any editor which can help me with widgets design?
Great idea!
Here’s another iteration on your arrow rotation code I which I also distinguish between NULL state (meaning variable wind direction), UNDEF state (item not found or other error), plus an extra label item which renders the 32-point windrose wind direction as name:
- component: f7-icon
config:
f7: >-
=
(! Number.isFinite(Number.parseFloat(items[
(props.itemPrefix ? props.itemPrefix : '') + 'Current_WindDirection'
].state))) ? 'question_circle' : 'location_north_fill'
size: 24
style:
transform: >-
=(! Number.isFinite(Number.parseFloat(items[
(props.itemPrefix ? props.itemPrefix : '') + 'Current_WindDirection'
].state))) ? 'Rotate(0 deg)' : (
'Rotate(' +
Math.round(
Number.parseFloat(items[
(props.itemPrefix ? props.itemPrefix : '') + 'Current_WindDirection'
].state) - 180.0)
+ 'deg)' )
color: var(--weather-card-text-color)
text-shadow: var(--weather-text-shadow-strong)
padding-top: 5px
padding-bottom: 5px
Windrose name label:
- component: Label
config:
text: >-
=items[
(props.itemPrefix ? props.itemPrefix : '') + 'Current_WindDirection'
].state == 'NULL' ? 'Var.' :
(Number.isFinite(Number.parseFloat(items[
(props.itemPrefix ? props.itemPrefix : '') + 'Current_WindDirection'
].state))) ?
([
"N", "NbE", "NNE", "NEbN", "NE", "NEbE", "ENE", "EbN",
"E", "EbS", "ESE", "SEbE", "SE", "SEbS", "SSE", "SbE",
"S", "SbW", "SSW", "SWbS", "SW", "SWbW", "WSW", "WbS",
"W", "WbN", "WNW", "NWbW", "NW", "NWbN", "NNW", "NbW",
])[ Math.floor( (1 + Number.parseFloat(items[
(props.itemPrefix ? props.itemPrefix : '') + 'Current_WindDirection'
].state) / 360.0 * 2 * 32) / 2) % 32 ]
: 'not defined'
class:
- no-padding-top
style:
font-size: var(--weather-normal-font-size)
text-shadow: .5px .5px var(--weather-text-shadow-color)
color: var(--weather-font-color)
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
It looks like the items cannot be found in the item registry.
Did you create the Items from the OneCallAPIweatherand Forecast thing’s channels?
THX, for this great widgets but i don’t understand to get my Items visible. Item prefix… what?
Additional item prefix… what? I use “owm” but the linked artikel is not very helpful what a item prefix is. Or i’m to dumb to see the logic? Can anyone give me a tip?
In the weather widget code, you’ll see constructs like:
=items[
(props.itemPrefix ? props.itemPrefix : '') + 'Current_WindDirection'
].state == 'NULL' ? 'Var.' :
When creating the Items that link to the OpenWeahterMap binding channels, you are free to give those items a name. When you don’t, then openHAB will try to generate a meaningful name based on the Thing (binding) and channel. For instance, Current_WindDirection would link to the current wind direction channel. OpenWeatherMap provides 2 Things that provide current weather and forecast information, hence openHAB will propose different item names in these cases. Fortunately the UI widget code can remain identical, by providing the item prefix used in your environment.
For instance, the current wind direction Item may be named OneCallAPIweatherAndForecast_Current_WindDurection in which case the item prefix is everything before Current_WindDurection (i.e., OneCallAPIweatherAndForecast_)…
I will try this.
Yes
I have the same problem. Is the widget broken? Or do i something wrong? I added Localweatherandforecast_ and OneCallAPIweatherandforecast_ in the widget but also on the widget page. Does it matter how you do this?
When i do Set Widget Props. Its not saved.
