Template Example: Weather Binding

Andrew_Pawelski · November 11, 2016, 12:45am

hi Ben x2 for me would love to see all your template, item and sitemap for this beauty

James_Hiscott · November 13, 2016, 9:21pm

@bwhouse Yes please, love the look of that widget, please do share

zacofunny · November 30, 2016, 10:22am

Does anybody know where can i find full list of weather icon filenames possible to occur? I often get blank icons because they don’t exist in icon set, for example “breeze.png”. I use yahoo weather.

UglyKidJoe · November 30, 2016, 11:48am

Hi Ben,

Definitely would like to see your HTML for this widget. Looks fantastic

AndyMB · November 30, 2016, 12:24pm

There does not seem to be an API call to list all the possible condition names (which are used in the code to match to the icons). There are several lists of these published from a web search, for example:

But that does not include “Breezy”. Some suggestions that there may be some discrepancy between the published lists and what “conditions” are being published by the API today.

You could try adding condition IDs to the HTML rendering to identify if these are a) new codes or b) they have changed the name for the ID.

String   Condition_ID0     "Condition id [%s]" 	{weather="locationId=[your location], forecast=0, type=condition, property=id"}
String   Condition_ID1     "Condition id [%s]" 	{weather="locationId=[your location], forecast=1, type=condition, property=id"}
String   Condition_ID2     "Condition id [%s]" 	{weather="locationId=[your location], forecast=2, type=condition, property=id"}

If it is a new condition ID then we will need a new icon (sorry I do not have the artistic skills to generate these). If it is a rename then a simple rename / copy of the icon as I indicted was necessary in some cases in my first post, would obviously do the job.

If you post back what you find, I will amend the first post to improve the code / instructions.

Cheers, Andy

bernieb · November 30, 2016, 6:04pm

@bwhouse Ben, I really like yours the best. I wonder if you can share your code. I am not ready to dive into Habpanel yet, but when ready, this would be the first thing that I implement. Thanks

kubawolanin · November 30, 2016, 6:34pm

I’ve submitted a pull request on HABPanel github where I created a weather widget using same Climacons that @bwhouse did
The icons can be animated as well (there’s an option in settings) and you can pass three additional items at the bottom (like humidity, pressure etc).
It’s still experimental, but I’d love some feedback on my pull requests page

zacofunny · November 30, 2016, 11:14pm

Hi Andy,
so the only I can say is that i don’t trust “text” property of ConditionID anymore.
I did something else to fix this issue:

downloaded set of icons from http://postimg.org/image/7ibc9nqy1/ with preassigned icons to Condition ID by filename. There are png and svg icons available.
I’ve exchanged icon sets from openhab/conf/html/images with the downloaded ones.
The only you need to do with the icon set is to remove “0” from every ‘single digit’ filename e.g. 05.png copy to 5.png and na.png copy to 3200.png.
This is according to https://developer.yahoo.com/weather/documentation.html#codes
Addedd new items to get Conditions ID property

String YCondition_id         "[%s]"     {weather="locationId=homeyahoo, type=condition, property=id"}
String YCondition0_id        "[%s]"     {weather="locationId=homeyahoo, forecast=0, type=condition, property=id"}
String YCondition1_id        "[%s]"     {weather="locationId=homeyahoo, forecast=1, type=condition, property=id"}
String YCondition2_id        "[%s]"     {weather="locationId=homeyahoo, forecast=2, type=condition, property=id"}

Changed html code to:

<div ng-init="ServerPath='http://192.168.0.1:8080/static'; IconSet='colorful'">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/layouts/example.css" />
</div>

<div id="weather-location-name" >
    My home {{itemValue('YObservationTime') | date:'short'}}
</div>

<table id="weather-table">
    <tr>
        <td rowspan="2"><img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/png/{{itemValue('YCondition_id')}}.png"/></td>
        <td id="weather-temp">{{'%.1f' | sprintf:itemValue('YTemperature')}}</td>
        <td id="weather-temp-sign">°C</td>
    </tr>
    <tr>
        <td colspan="2">
            <table id="weather-table-details">
                <tr>
                    <td>Humidity:</td>
                    <td>{{itemValue('YHumidity')}} %</td>
                </tr>
                <tr>
                    <td>Pressure:</td>
                    <td>{{'%.0f' | sprintf:itemValue('YPressure') / 1000}} MPa</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td/>
        <td>Today</td>
        <td>{{itemValue('YObservationTime1') | date:'EEEE'}}</td>
        <td>{{itemValue('YObservationTime2') | date:'EEEE'}}</td>
    </tr>
    <tr>
        <td/>
        <td>
            <img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/png/{{itemValue('YCondition0_id')}}.png"/>
            <p>{{itemValue('YCondition0')}}</p>
        </td>
        <td>
            <img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/png/{{itemValue('YCondition1_id')}}.png"/>
            <p>{{itemValue('YCondition1')}}</p>
        </td>
        <td>
            <img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/png/{{itemValue('YCondition2_id')}}.png"/>
            <p>{{itemValue('YCondition2')}}</p>
        </td>
    </tr>
    <tr>
        <td class="col-xs-4" style="color:red">Max</td>
        <td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('YTemp_Max0')}} °C</td>
        <td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('YTemp_Max1')}} °C</td>
        <td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('YTemp_Max2')}} °C</td>
    </tr>
    <tr>
        <td class="col-xs-4" style="color:#0db9f0">Min</td>
        <td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('YTemp_Min0')}} °C</td>
        <td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('YTemp_Min1')}} °C</td>
        <td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('YTemp_Min2')}} °C</td>
    </tr>
</table>
<p/>

Of course you need to change YCondition_id, YCondition0_id, YCondition1_id, YCondition2_id and YCondition, YCondition0, YCondition1, YCondition2 to your own items.
Corrected weather_eng.map to compliant with https://developer.yahoo.com/weather/documentation.html#codes

EDIT: Additional exception - na.png should be copied to UNDEF.png

mikyh · December 9, 2016, 2:00pm

Many thanks for this thread. I’m not a programmer, so I need an examples like this to get me started. I have managed to get this widget working but am confused about the icon names.

I get my weather from OpenWeatherMap and it works fine in the Paper Ui from the example.html file rather than from the items file. The condition names and hence the icons are however completely different using the above code than from the html file.

For example in the html example it’s few-showers but in the widget it is light-rain, sunny is clear-sky, fog is mist. I have therefore got to copy and rename all the icons as and when they occur!

My ‘example.html’ doesn’t use any mapping, nor the items in the ‘home.items’ file (I had to add them to get the widget to work) and uses the following for the current day’s forecast:

<img src="static/weather-data/images/${param:iconset}/${forecast(0):condition.commonId}.png"/>

The widget uses the following:

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

Can anyone please explain why I get different results?

Mike

mikyh · December 10, 2016, 11:37am

I have solved my icon problem by changing the property in the Condition items from ‘text’ to ‘commonId’.

String   Condition0         "Condition [%s]"    	{weather="locationId=home, type=condition, property=commonId"}

UglyKidJoe · December 10, 2016, 5:36pm

The day something works for me first time in OpenHAB I’m going straight to the bar for a whiskey.

My panel doesn’t display the icons, though the weather data seems fine.

<div ng-init="ServerPath='http://192.168.178.51:8080/static'; IconSet='flat_white'">```

Would anyone have an idea why?

Edit: I noticed the Karaf consol through some messages for a clue:
<img src="//community-openhab-org.s3-eu-central-1.amazonaws.com/original/2X/7/79c2077095601a2f18c51d84eb6414671aae9ddf.png" width="499" height="334">

mikyh · December 10, 2016, 5:47pm

If you are using the example at the begining of this thread you will have to add an extra ‘weather-data’ directory for images and the css file.

<link rel="stylesheet" type="text/css" href="{{ServerPath}}/weather-data/layouts/example.css" />

UglyKidJoe · December 10, 2016, 6:01pm

Thanks @mikyh for the quick response.

Ye’s I’m using the example from the first post. The layouts directory was created when I unzipped the files and I see it contains ‘example.css’. I’ve only changed the first line to my IP address where OH is running and the folder for the icons.

I added the folder in the path and it’s changed the panel but still no icons…

<div ng-init="ServerPath='http://192.168.178.51:8080/static'; IconSet='flat_white'">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/weather-data/layouts/example.css" />

mikyh · December 10, 2016, 6:25pm

The image doesn’t show anything. Probably better to move the layout and image folders to the html directory missing out the weather-data directory.

UglyKidJoe · December 10, 2016, 6:48pm

Yeah I’ll try that. In the meantime I got the Icons to display by adding the weather-data folder to the server path itself…

<div ng-init="ServerPath='http://192.168.178.51:8080/static/weather-data'; IconSet='flat_white'">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/weather-data/layouts/example.css" />

Though it brings back the icons now it broke some of the data. I’ll try your method…

Edit:

That’s got the job done…

Thanks a million for your help

0per8or · December 10, 2016, 7:23pm

Very nice template. I just made an small modification to my code. I replaced all absolute paths with relative paths to fit different URLs. To achieve this I removed the ServerPath from ng-init and replaced every {{ServerPath}} entry with ../static to look like this:

<div ng-init="IconSet='flat_white'">
<link rel="stylesheet" type="text/css" href="../static/layouts/example.css" />
</div>

This makes me able to access my HABpanel from internal and external URL now

Dominic_Bonneau · December 22, 2016, 5:10pm

Would it be possible to translate this result in french ?

Also, I know it’s for a template but let say i want a custom widget how could i modify this to set item value to a custom items

i try : {{itemValue(‘ITEMSVALUE’) | date:‘EEEE’}}

(ITEMSVALUE is the name i put in my setting )

t_schmidt · January 1, 2017, 6:01pm

Hello,
i have exactly the same problem to translate weekdays into german. I just realized that it is impossible to load any kind of translation (i18n) extension of angularjs with a template. Is there any best practice for that ?

Many Thanks
Kind Regards
Thomas S

ysc · January 1, 2017, 6:16pm

This is relatively ugly but works, and since there’s not really a best practice…

<div ng-init="daysnames={'Sunday': 'dimanche', 'Monday': 'lundi', 'Tuesday': 'mardi', and so on...}">
{{daysnames[(itemValue('Sunrise_Time') | date:'EEEE')]}}
</div>

…and in German your ng-init would be of course: daysnames={'Sunday': 'Sonntag', 'Monday': 'Montag', 'Tuesday': 'Dienstag', and so on...}".
You could also use a similar technique for month names.

opus · January 3, 2017, 6:47pm

I used the “relatively ugly” way to translate the daynames into german. Working! Thanks
Now I’d like to have the weather condition in german as well. Fairly easy using the binding, just set the “location.LocID.language” to “de”. However that way I’m loosing the connection to the images!

Does anybody have a suggestion for that “problem”?
I could be using the “relatively ugly” way, but …