Template Example: Weather Binding

Apps & Services HABPanel
84

Hello Andy,

thanks for that work, i like your template very much! I hope you dont mind taking your template and adapt it to a responsive-friendly widget by me.

Wetter-Widget.widget.json (2.6 KB)

85

Hi Andrew, it would be great if you could share this as I was thinking of creating something similar but have never got around to it.

86

Hi All,

What do I need to add to the ā€œ.replaceā€ coding below in order to fix the fact I have two spaces in a condition type ( btw Iā€™ve changed the original icon ā€œscattered showersā€ to be ā€œchance-of-rainā€)

Returned Condition Type:
Chance of Rain

Code Snippet:

<tr>
		<td rowspan="2"><img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue(config.Condition0).replace(' ','-') | lowercase }}.png"/></td>
	</tr>

Thanks

87

Hi @Nathan_Wilcox,

Iā€™m not sure I really understand your problem, but assuming you get something like ā€œChance[space][space]of[space]rainā€ then by far the easiest way would be to rename the associated icon file to have a double hyphen where the double space occurs i.e. chanceā€“of-rain.png.

I guess you could try the line of code:

<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition_ID1').replace('  ',' ').replace(' ','-') | lowercase }}.png"/>

where the first .replace changes two spaces to one, but I have no idea if this will work and no quick way to test this for you. If you do try the line of code and it works, let the community know as it may help others.

Sorry if this is not the problem that you are trying to solve, if you need to can you provide the source you are getting and the output you need as this may make it a bit clearer to me.

Andy

88

Hi Andy,

The problem I am having is that my Forecast condition of tomorrow is telling me ā€œChance of Rainā€ When the .replace is kicking in it is changing the condition to show the following:

And when opening the image in a new tab:

HTTP ERROR: 404

Problem accessing /static/images/colorful/chance-of%20rain.png. Reason:

    Not Found3

Therefore it is not finding an icon called

chance-of%20rain.png

If this now makes sense?

Thanks

89

Hey

Iā€™m new to openHab and Linux as a Whole.

Iā€™ve managed to write the HTML files to the custom Widget Code Section,But my Putting the directory on the server, Iā€™m not sure how that Goes

Iā€™m using Ubuntu: 16.04
And the Server is hosted on the same PC

Could you please help me on how to Upload the Pics on the Serverā€¦

Thanks

90

Hi @Nathan_Wilcox,

OK, I can see the problem now. I think there are two potential causes:

  1. A double space between of and rain, as you suggested. In this case try:
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition_ID1').replace('  ',' ').replace(' ','-') | lowercase }}.png"/>
  1. They have used an inconsistent approach to adding spaces to the supplied condition. First they used a simple space (which was then replaced with a hyphen by the code), but the second space is encoded as %20. So we need a way to replace the %20 in the source.
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition_ID1').replace('%20','-').replace(' ','-') | lowercase }}.png"/>

I canā€™t be certain which is the problem as most browsers with remove double spaces when displaying text and they are hard to spot with a standard (non-fixed width font).

Let me know how you get on. Andy

91

Hi @Nduzi,

Check the documentation at: http://docs.openhab.org/installation/linux.html#file-locations.

The icons go in the Site configuration folder, html subdirectory. So for a repository installation that would be /etc/openhab2/html/.

If you have implemented the SAMBA shares as http://docs.openhab.org/installation/linux.html#network-sharing this is shared as \\your IP address\openHAB-conf. Again the subdirectory html is the place for the downloaded files. All my scripts and instructions are based upon deployment from a windows PC with a mapped drive in place, so if you have access to that technology it may be the easiest way to get going.

Hope this helps. Andy

92

Hi,
my settings
items
Number Precip_Probability ā€œPrecip probability [%d %%]ā€ {weather=ā€œlocationId=lublinFIO, type=precipitation, property=probabilityā€}

HABpanel
{{itemValue(ā€˜Precip_Probabilityā€™)}} %

I have Yahoo and ForecastIO, and see only 0 :frowning: where in sites yahoo and forecast this values is different
others valueas like temp, wind is works.

93

Hi Nathan,

I had a similar problem and found that .replace will only replace the first instance in a string, so in your string the first space is being changed to - but the second space is not.

I found some resources that referred to using regex to replace all instances in a string but in the end I found it was easier to change the image reference to look at ā€œcommonidā€ and rename my images based on this

1 Like
94

Hi @Nic_P / @Nathan_Wilcox,

Nicā€™s comments have made me look at this in more detail (for about two hours :persevere:)ā€¦ looks like I am beaten.

Nic is correct that the replace command only replaces the first instance of the space. In my defence Iā€™ve used loads of programming languages on Windows and none of them work in this way :frowning:ā€¦ ok I made a bad assumptionā€¦

Looks like you should be able to use a regular expression instead .replace(/\s/g, '') but that does not seem to be supported within the HTML. Probably the various slashes screws things upā€¦

So went looking for other mechanisms, looks like a custom filter would do(lowercase is an example of a built-in filter). Iā€™ve had a go at this, but it looks like I would need a script in the <HEAD> section of the HTML to make this work. Our custom templates are in the <BODY> section of the HTML and so I canā€™t work out how to do it this eitherā€¦

Perhaps @ysc may be able to suggest the right way to replace multiple spaces. Iā€™m sure that there is a knack to make this happen, but right now my Google Foo is not getting me thereā€¦

For now Nic is right, switching to the Condition_ID0 method and renaming the icon files as I discussed in this post Template Example: Weather Binding is the only workaround I can offer.

Grrrrā€¦ I hate being beaten by computers!

Andy

1 Like
95

The right way would be a filter in a separate Javascript file, loaded with oc-lazy-load (check other threads for examples) as you suggest @AndyMB.

Now for a dirtier wayā€¦ well, here you go: 'chance of rain'.split(' ').join('-')
:slight_smile:

1 Like
96

Thanks @ysc,

I knew you would have the (two!) answer! Iā€™ve tested the ā€˜dirtyā€™ way with the line:

<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition1').split(' ').join('-')  | lowercase }}.png"/>

tested with a manually forced status and this works perfectly to solve @Nathan_Wilcox Nahanā€™s bug.

Iā€™ve taken a quick delve into the ā€˜rightā€™ way to, but Iā€™m going to need a bit more time to get my head around that. But I do think this will offer some better ways to deal with some of the workarounds that have been added over time that have bloated the HTML.

I can only apologise that I did not keep up-to speed with this addition functionality, delving into custom widgets has been on my to-do list for too long!

Thanks for your help solving this one.

Andy

1 Like
97

@Nic_P @AndyMB @ysc

Than you all for your assistance on this. I have now implemented the new ā€˜dirtyā€™ line and will await the result, shouldnā€™t be long as thereā€™s always ā€œChance of Rainā€ where I live :joy:

98

@AndyMB @ysc

So I thought I had implemented the change but now Iā€™m thinking Iā€™ve done something incorrect as I still Have the problem:

Screen Shot 2017-05-10 at 19.38.46.png832Ɨ506 31.9 KB

Code:

<td>
	<img src="{{ServerPath}}/images/{{IconSet}}/{{itemValue(config.Condition2).split(' ').join('-')  | lowercase }}.png"/>
	<p>{{itemValue(config.Condition2)}}</p>
</td>

Can you help please?

99

Hi @Nathan_Wilcox,

Can you repeat your trick of opening the broken image URL in a new tab and posting the URL. Without some idea of what you are getting as the URL now itā€™s difficult to guess what is going on here.

From my testing I know that chance of rain is successfully mapped to `chance-of-rainā€™. So I can only conclude that there is some weird character being used to generate the second space / supplied by the weather API. At a guess, it could be a double space being turned into a double hyphen or the inconsistent use of %20 in the condition being returned by the weather binding.

Can you also double check and confirm:

  • you have changed all four of the image URLs to use the .split(' ').join('-') method.
  • you have an icon of the name chance-of-rain in the correct icon folder (looks like you are using flat_colorful).

Iā€™m sure you have done the above, but worth double checking the obvious.

You may also like to use the ability to manually set the status of an item in the console. The command for the condition would be:

smarthome:update Condition0 "Chance of Rain"

I would manually set this for each of the conditions 0,1 and 2 using a SINGLE space between each word. If this all works it provides some more evidence that there is something strange in the condition data being provided by the binding (or more accurately the provider of the data).

If you see inconsistent display with all conditions manually set that would point to one of the image URLs not being right in the HTML.

Sorry but step-by-step, systematic diagnosis looks like the only way that we will get to the bottom of this one.

Regards, Andy

PS: you could always ā€˜give upā€™ on the 'named icon approach and change to the conditionID / number format for the icons. IMHO this is much more easier to maintain over time and allows you the option to switch providers without too much hassle should you ever need.

100

Hi,

I just gave this widget a try as it looks really good and exactly what I wanted. I have the same problem as some other people seem to be having, but havenā€™t had a chance yet to read through all the comments.

Basically, the conditions donā€™t match the icon names so no icons display. Does this only work with certain providers? If so, it might be an idea to update your first post with that. I just tried with OpenWeatherMap & ForecastIo.

Thanks

101

Hi Jay,

no its working with all providers. i actually had the same problem in the beginning.
the easiest way i thing is to copy/rename the existing icons to match the once you need.

regards
Matt

102

Thanks

Just what the doctor ordered

103

Can I Please ask: Where do I place the Icons in Ubuntu(Local Host) and how do I specify the directly in the HTML directory?

Thanksā€¦