Template Example: Weather Binding

Hello together,

my dashboard is now running, too. Happy. :slight_smile: I use the API of ForecastIo. I would still like to show the rain probability in percent for each day. But somehow I donā€™t find the right item for it. Can someone help me?

1 Like

Hello

I have some issues with the images.
As you can see in the sreenshots, some of the images show up, some do not.

I have no clue, why this happens.

Maybe some of you can see the mistake?

Thank you

OH_Screenshots_Weather.pdf (79.5 KB)

Since at least one does show, you are using the correct folder. I would guess that the image not displayed is not in the folder, at least not with the correct name.

Hello Opus

that is what i thought too.
But the image is in the folder and with the correct name!
But this also happens to other images not only ran-and-snow.
So maybe there is an other reason - or at least there must be an other reason.

Thank you

Typing on the train, so I canā€™t verify this for you, but from memory the .replace command that replaces the spaces in condition names with hyphens only works on the first match.

So if you have two or more spaces it will not work or ratherā€¦

ā€œChance of rain dayā€ would become ā€œChance-of rain dayā€. So options to tryā€¦

A) rename files to match only first hyphen being replaced.

B) remove the .replace and use spaces in the file names. I probably only used this technique as I prefer to avoid issues with html encoding of special characters.

C) Add additional .replace statements to get the second instance of space. Clunky but should work.

Again note: not tested above, just suggestions to try.

Also check earlier in this thread as I have a distinct feeling of de ja vue, so this has probably been discussed above.

Andy

Anyone still using add on?

Hey @Andrew_Pawelski, did you end up posting this code somewhere? Iā€™ve been searching high and low and canā€™t seem to find itā€¦ looks pretty sweet. Iā€™ve integrated all the other bits of code - working fine, itā€™s just the pretty bits Iā€™m looking for nowā€¦ Cheers.

Hi i never did as noone ever asked and the BOM stuff is a fairly small audience I guess.
since then IOS 10 came out and that stuffed all the HABPanel svg stuff up ad I abandoned the animated images

Fair enough. Iā€™ve been pulling the BOM data for the past 12 months, using it in plain text boxes, on the app, and using the data in rules. ie Watering etc.
Iā€™ve been working on some HABPanel for 2x 24inch Touchscreens. Was looking to upgrade the weather graphics before they go ā€˜liveā€™ā€¦ Iā€™ll keep using the statics for now until I can find some codeā€¦

Well I do have this nowā€¦code isnt tidy, nor perfect, but responsive and has everything I need

That looks pretty sweet. Clean and simple. Would love to take a look at your ā€˜untidyā€™ code if youā€™re willing to shareā€¦the stuff Iā€™ve ā€˜hackedā€™ together isnā€™t going to plan so farā€¦

OK Itā€™s pretty bespoke and many layers of yuky CSS - mix from @pmpkkā€™s awesome work and I bastardised the weather widget from @bastiaan_van_h which is awesome and responsive but I needed something specific for the space left on my iPad.

here is my widget - if you need items etc let me know
Weather widget.json (9.2 KB)

Thanks @Andrew_Pawelski Appreciate the Widget. Changed a couple of the mapped items to match mine, but most were already there. When you get a minute, could you post the CSS as well? Iā€™m wondering if that is why I canā€™t get the images to display. Tried direct mapping them, but still no imagesā€¦Iā€™ll keep tinkeringā€¦not played with CSS much before thisā€¦

OK there are two css files - one from the master css setting in habpanel and the other which is based on the other weather widget already referenced - both hacked up a bit certainly could do with a tidy up buth here they are in their raw form
love to hear if you get it up and running
weather12345.css (4.7 KB)

aj-theme.css (16.2 KB)

Thanks Andrew. Plugged them in, tiny bit more tinkering in the Widget, and this is where Iā€™m at so farā€¦ nothing different from yours as yet, but running. Once iā€™ve finished the whole panel and mounted the screen, Iā€™ll post another photoā€¦ thanks againā€¦

Thanks again @Andrew_Pawelski. These are the updates Iā€™ve made so farā€¦hoping to get the screen mounted next weekā€¦need another trip into the roof to run some more Cat6 before I can mountā€¦

@greg_lamont I see you also are suffering from BOM inconsistent naming meaning things roll onto 3 lines and muck up row borders (also messes up the icon selection - thatā€™s what the array at the top of the code is for)

Are you happy with those icons? I personally prefer the flat ones - I can share where I got them if you prefer

Yes, the lines are a little annoying. I was going to edit them somehow so they are a fixed size.

I decided not to use the array because of inconsistent issue, and renamed my icon files to match the BOM icon code in the XML. Then as an example, I just display the file 1.png for a sunny day.

class="weather-icon-row pulse" src="{{config.server_path}}/images/{{itemValue('BOM_Forecast_Icon_Code_1')}}.png"/>

I found this easier that adding to the array when something different comes up.

Always happy to look at new icons. Need to get a good WAF on this installā€¦ :grinning:

aha i dont recall seeing this in the XML when I first started playing - can you share more details?

for the icons, I use the ones referenced in this post:

Using the Icon codes makes it much easier than relying on the description to be consistentā€¦

My XML is pulled from here: (yours would be different)
ftp://ftp.bom.gov.au/anon/gen/fwo/IDV10753.xml

Hereā€™s a snip from the XML

<forecast-period index="1" start-time-local="2018-08-30T00:00:00+10:00" end-time-local="2018-08-31T00:00:00+10:00" start-time-utc="2018-08-29T14:00:00Z" end-time-utc="2018-08-30T14:00:00Z">

<element type="forecast_icon_code">12</element>

<element type="precipitation_range">0 to 2 mm</element>
<element type="air_temperature_minimum" units="Celsius">2</element>
<element type="air_temperature_maximum" units="Celsius">13</element>
<text type="precis">Patchy rain developing.</text>
<text type="probability_of_precipitation">50%</text>
</forecast-period>

Icon codes are referenced here:
http://reg.bom.gov.au/info/forecast_icons.shtml

I referenced this page and your array, and manually renamed the files to match. There were lots of left over files as not all files had a matching code. I do remember seeing a .bat file to do it once, but it took me less than 5 minutes to rename them.

I havenā€™t moved the XML parsing into OpenHAB yet, Iā€™m still running the Python script to pull the data from BOM and put it into the OpenHAB api every hour. Below is one of the lines in the Python script that sets the Icon code to your OpenHAB item. (I have 7 lines, one for each forecast day)

setFWOItem("forecast_icon_code","BOM_Forecast_Icon_Code","0","element")

Itā€™s been running like this for probably a year now, no issues. I just hadnā€™t got a widget to work nicely. I was using individual blocks in HABpanelā€¦worked, but wasnā€™t prettyā€¦seeing how you had put your together was an awesome helpā€¦

Something I did also was at 6pm, copy the minimum temp from tomorrowā€™s forecast into todayā€™s forecast, as the BOM data is no longer available, and a NULL value is set. Doing this stopped the NULL valueā€¦