Hi
Did you try with the example.html?
If yes, just be sure that the item name are similar in the .html AND in the .item file
I had a similar problem and, for example, an item was “forecast(0):temperature.max(%.0f)” in the .item and was “item:temperature.max(%.0f)” in the .html .After correction, all is working
Ben
I tried with example, but still it isn’t working. I think I have problem with file location. Can you describe where do you have your weather files ? and what is the trick with webapps/weather-data directory ? I have created webapps/weather-data directory in openHAB2/userdata but I have not got any result. My webapps/weather-data directory is empty, maybe this is a reason ? I have all my layout files in openHAB/conf/html directory (.html, .js, css, .png).
That would be a problem.
I copied the layouts and images directory to openhab/userdata/webapps/weather-data and still don’t have value in html layout. Ufff !
he Gieemek, look at your items in the karaf console by typing items list
Then check if your temp, humidity, etc… items have some value
Yes, items have values. I can see them in karaf console and in the sitemap. They change for each 5 min (duration time), so the weather binding works. HTML layout is shown at sitemap. Only problem I have that html layout is not show values, as like Jaghova at the bigining of this topic.
This is image of my sitemap :
Thanks everybody for help.
Below I put all my files containing with weather binding - mayby somebodywill find my stupid mistake:
weather.cfg:
apikey.Hamweather=XxXXxxxxXXXxxXxxx
apikey2.Hamweather=XxXXxxxxXXXxxXxxxXxXXXxxxx
location.home-HAM.name=Town
location.home-HAM.latitude=XX.XXXXXX
location.home-HAM.longitude=YY.YYYYYY
location.home-HAM.provider=Hamweather
location.home-HAM.language=en
location.home-HAM.updateInterval=5
item file:
Number Humidity "Humidity [%d %%]" {weather="locationId=home-HAM, type=atmosphere, property=humidity"}
Number Pressure "Pressure [%.1f mb]" {weather="locationId=home-HAM, type=atmosphere, property=pressure"}
Number Temperature "Temperature [%.1f °C]" {weather="locationId=home-HAM, type=temperature, property=current"}
DateTime ObservationTime "Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" {weather="locationId=home-HAM, type=condition, property=observationTime"}
DateTime LastUpdate "Last update [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" {weather="locationId=home-HAM, type=condition, property=lastUpdate"}
String CommonId "Common id [%s]" {weather="locationId=home-HAM, type=condition, property=commonId"}
DateTime ObservationTime_1 "Observation time tomorrow [%1$tA]" {weather="locationId=home-HAM, forecast=1, type=condition, property=observationTime"}
DateTime ObservationTime_2 "Observation time after tomorrow [%1$tA]" {weather="locationId=home-HAM, forecast=2, type=condition, property=observationTime"}
String CommonId_1 "Common id tomorrow [%s]" {weather="locationId=home-HAM, forecast=1, type=condition, property=commonId"}
String CommonId_2 "Common id after tomorrow [%s]" {weather="locationId=home-HAM, forecast=2, type=condition, property=commonId"}
Number Temp_Min_0 "Temperature min [%.0f °C]" {weather="locationId=home-HAM, forecast=0, type=temperature, property=min"}
Number Temp_Max_0 "Temperature max [%.0f °C]" {weather="locationId=home-HAM, forecast=0, type=temperature, property=max"}
Number Temp_Min_1 "Temperature min tomorrow [%.0f °C]" {weather="locationId=home-HAM, forecast=1, type=temperature, property=min"}
Number Temp_Max_1 "Temperature max tomorrow [%.0f °C]" {weather="locationId=home-HAM, forecast=1, type=temperature, property=max"}
Number Temp_Min_2 "Temperature min after tomorrow [%.0f °C]" {weather="locationId=home-HAM, forecast=2, type=temperature, property=min"}
Number Temp_Max_2 "Temperature max after tomorrow [%.0f °C]" {weather="locationId=home-HAM, forecast=2, type=temperature, property=max"}
sitemap file
sitemap AGM label="Weather"
{
Webview url="http://localhost:8080/static/weather.html" height=20
Frame {
Text item=Humidity
Text item=Pressure
Text item=Temperature
Text item=CommonId
Text item=ObservationTime
Text item=LastUpdate
Text item=Temp_Min_0
Text item=Temp_Max_0
}
}
weather.html file in openhab/conf/html/ directory :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" CONTENT="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="weather-data/layouts/example.css" />
<script type="text/javascript" src="weather-data/layouts/example.js"></script>
</head>
<body id="weather-body" onload="formatIframe()">
<div id="weather-location-name">${config:name}, ${weather:condition.observationTime(%1$td.%1$tm.%1$tY %1$tH:%1$tM)}</div>
<table id="weather-table">
<tr>
<td rowspan="2"><img id="weather-icon" src="weather-data/images/${param:iconset}/${weather:condition.commonId}.png"/></td>
<td id="weather-temp">${weather:temperature.current(%.1f)}</td>
<td id="weather-temp-sign">°C</td>
</tr>
<tr>
<td colspan="2">
<table id="weather-table-details">
<tr>
<td>Humidity:</td>
<td>${weather:atmosphere.humidity} %</td>
</tr>
<tr>
<td>Pressure:</td>
<td>${weather:atmosphere.pressure(%.1f)} mb</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="weather-forecast-table">
<tr>
<td>Today</td>
<td>${forecast(1):condition.observationTime(%1$tA)}</td>
<td>${forecast(2):condition.observationTime(%1$tA)}</td>
</tr>
<tr>
<td><img src="weather-data/images/${param:iconset}/${forecast(0):condition.commonId}.png"/></td>
<td><img src="weather-data/images/${param:iconset}/${forecast(1):condition.commonId}.png"/></td>
<td><img src="weather-data/images/${param:iconset}/${forecast(2):condition.commonId}.png"/></td>
</tr>
<tr>
<td class="temp-max">${forecast(0):temperature.max(%.0f)}</td>
<td class="temp-max">${forecast(1):temperature.max(%.0f)}</td>
<td class="temp-max">${forecast(2):temperature.max(%.0f)}</td>
</tr>
<tr>
<td class="temp-min">${forecast(0):temperature.min(%.0f)}</td>
<td class="temp-min">${forecast(1):temperature.min(%.0f)}</td>
<td class="temp-min">${forecast(2):temperature.min(%.0f)}</td>
</tr>
</table>
</body>
</html>
I use openHAB 2 beta4 with Weather Binding 1.9.0.b4. Weather and HTTP bindings are installed only.
It’s due to the difference in how openHAB2 delivers static content.
<link rel="stylesheet" type="text/css" href="static/weather-data/layouts/example.css" />
/opt/openhab2/userdata/webapps
/var/lib/openhab2/webapps
Webview url="/weather?locationId=home-HAM&layout=weather&iconset=colorful" height=20
/opt/openhab2/conf/html
/etc/openhab2/html
Thanks a lot Benjy, it working and I have correct item value at html layout.
OpenHAB does not read the html pages from this directory. I move my page to openhab2/userdata/webapps/weather-data/layouts and then page has been loaded.
Thanks a lot once again.
This question is related to the html layout. Can we transform texts on the layout.
For example, change the “monday” in english for its translation in another lenguaje.
In OH .Items file is easy using [MAP(es.map):%s] where es.map is the transformation file, but how would it be done in the HTML layout?
Here is an example of the html layout that I would like to transform:
<table id="weather-forecast-table">
<tr>
<td>Today</td>
<td>${forecast(1):condition.observationTime(%1$tA)}</td>
<td>${forecast(2):condition.observationTime(%1$tA)}</td>
<td>${forecast(3):condition.observationTime(%1$tA)}</td>
<td>${forecast(4):condition.observationTime(%1$tA)}</td>
<td>${forecast(5):condition.observationTime(%1$tA)}</td>
</tr>For me it doesn’t work. Here is the output:
my folder structure:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" CONTENT="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="static/weather-data/layouts/example.css" />
<script type="text/javascript" src="static/weather-data/layouts/example.js"></script>
</head>
<body id="weather-body" onload="formatIframe()">
<div id="weather-location-name">${config:name}, ${weather:condition.observationTime(%1$td.%1$tm.%1$tY %1$tH:%1$tM)}</div>
<table id="weather-table">
<tr>
<td rowspan="2"><img id="weather-icon" src="static/weather-data/images/${param:iconset}/${weather:condition.commonId}.png"/></td>
<td id="weather-temp">${weather:temperature.current(%.1f)}</td>
<td id="weather-temp-sign">°C</td>
</tr>
<tr>
<td colspan="2">
<table id="weather-table-details">
<tr>
<td>Humidity:</td>
<td>${weather:atmosphere.humidity} %</td>
</tr>
<tr>
<td>Pressure:</td>
<td>${weather:atmosphere.pressure(%.1f)} mb</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="weather-forecast-table">
<tr>
<td>Today</td>
<td>${forecast(1):condition.observationTime(%1$tA)}</td>
<td>${forecast(2):condition.observationTime(%1$tA)}</td>
</tr>
<tr>
<td><img src="static/weather-data/images/${param:iconset}/${forecast(0):condition.commonId}.png"/></td>
<td><img src="static/weather-data/images/${param:iconset}/${forecast(1):condition.commonId}.png"/></td>
<td><img src="static/weather-data/images/${param:iconset}/${forecast(2):condition.commonId}.png"/></td>
</tr>
<tr>
<td class="temp-max">${forecast(0):temperature.max(%.0f)}</td>
<td class="temp-max">${forecast(1):temperature.max(%.0f)}</td>
<td class="temp-max">${forecast(2):temperature.max(%.0f)}</td>
</tr>
<tr>
<td class="temp-min">${forecast(0):temperature.min(%.0f)}</td>
<td class="temp-min">${forecast(1):temperature.min(%.0f)}</td>
<td class="temp-min">${forecast(2):temperature.min(%.0f)}</td>
</tr>
</table>
</body>
</html>
And it still shows nothing! I’m quite disappointed, maybe I did some silly error but I couldn’t figure out, can anyone help me?
Hi @Nguy_n_Phuc_Anh_D_ng, see my post above:
Particularly moving the /weather-data/layouts/weather.html folders and file to inside the userdata/webapps folder.
I did make a copy of weather-data folder and put it under the path /var/lib.openhab2/webapps (because I’m using package installation so there’s no userdata/webapps link)
Anyway thanks for your quick reply Ben <3
Thanks for that input again. I was at that point 2 days ago and solved it with the help of your post.
I do keep the *.css, *,js and images files under “/etc/opebhab2/html” by calling those files with “static/layouts/example.css” or “static/images/flat_colorful/${weather:condition.Icon}.png”. Working perfect 
One (dumb?) question, I tried to rename the example.html to weather.html, however that way it isn’t working.
The webview is called by “/weather…”. Why doesn’t it work with “weather.html” and why does it work with “example.html” at all?
You can have multiple layouts, have you renamed your item line to contain layout=weather instead of layout=example?
Since you have it working, would you mind listing your folder structure for @Nguy_n_Phuc_Anh_D_ng? I don’t have the weather binding installed and haven’t used it for a while so can’t be sure.
@ Oh sir, as Benji said, please show me how to do it! Thanks
Stupid me, I missunderstood Layout=example as the setting for the .css file, however that “link” is set in the html-file. Learned something, Thanks
@Nguy_n_Phuc_Anh_D_ng
I have only the html file in the folder “/var/lib/openhab2/webapps/weather-data/layouts/”
All other, i.e. the complete directory “weather-data” with the subfolders “images” and “layouts”, are in “/etc/opebhab2/html”.
The sitemap-line looks like that:
Webview url=“/weather?locationId=MyLocation&layout=example&iconset=flat_colorful” height=12
In the Html the calls to the .css- and .js-files look like:
“static/weather-data/layouts/example.css”
The call to a image looks like:
“static/weather-data/lmages/flat_colorful/${weather:condition.Icon}.png”
That’s what I did! Here are the pictures:
example.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" CONTENT="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="static/weather-data/layouts/example.css" />
<script type="text/javascript" src="static/weather-data/layouts/example.js"></script>
</head>
<body id="weather-body" onload="formatIframe()">
<div id="weather-location-name">${config:name}, ${weather:condition.observationTime(%1$td.%1$tm.%1$tY %1$tH:%1$tM)}</div>
<table id="weather-table">
<tr>
<td rowspan="2"><img id="weather-icon" src="static/weather-data/images/${param:iconset}/${weather:condition.commonId}.png"/></td>
<td id="weather-temp">${weather:temperature.current(%.1f)}</td>
<td id="weather-temp-sign">°C</td>
</tr>
<tr>
<td colspan="2">
<table id="weather-table-details">
<tr>
<td>Humidity:</td>
<td>${weather:atmosphere.humidity} %</td>
</tr>
<tr>
<td>Pressure:</td>
<td>${weather:atmosphere.pressure(%.1f)} mb</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="weather-forecast-table">
<tr>
<td>Today</td>
<td>${forecast(1):condition.observationTime(%1$tA)}</td>
<td>${forecast(2):condition.observationTime(%1$tA)}</td>
</tr>
<tr>
<td><img src="static/weather-data/images/${param:iconset}/${forecast(0):condition.commonId}.png"/></td>
<td><img src="static/weather-data/images/${param:iconset}/${forecast(1):condition.commonId}.png"/></td>
<td><img src="static/weather-data/images/${param:iconset}/${forecast(2):condition.commonId}.png"/></td>
</tr>
<tr>
<td class="temp-max">${forecast(0):temperature.max(%.0f)}</td>
<td class="temp-max">${forecast(1):temperature.max(%.0f)}</td>
<td class="temp-max">${forecast(2):temperature.max(%.0f)}</td>
</tr>
<tr>
<td class="temp-min">${forecast(0):temperature.min(%.0f)}</td>
<td class="temp-min">${forecast(1):temperature.min(%.0f)}</td>
<td class="temp-min">${forecast(2):temperature.min(%.0f)}</td>
</tr>
</table>
</body>
</html>
.sitemap:
Webview url="/weather?locationId=home&layout=example&iconset=colorful" height=7
but no progress is shown 
My fault, I’m sorry!
The “example.html” is under "/var/lib/ openhab2 /weather-data/layouts"
I updated my post above.
OK, I changed the directory structure as you said but still no luck:
.html file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" CONTENT="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="static/weather-data/layouts/example.css" />
<script type="text/javascript" src="static/weather-data/layouts/example.js"></script>
</head>
<body id="weather-body" onload="formatIframe()">
<div id="weather-location-name">${config:name}, ${weather:condition.observationTime(%1$td.%1$tm.%1$tY %1$tH:%1$tM)}</div>
<table id="weather-table">
<tr>
<td rowspan="2"><img id="weather-icon" src="static/weather-data/images/${param:iconset}/${weather:condition.commonId}.png"/></td>
<td id="weather-temp">${weather:temperature.current(%.1f)}</td>
<td id="weather-temp-sign">°C</td>
</tr>
<tr>
<td colspan="2">
<table id="weather-table-details">
<tr>
<td>Humidity:</td>
<td>${weather:atmosphere.humidity} %</td>
</tr>
<tr>
<td>Pressure:</td>
<td>${weather:atmosphere.pressure(%.1f)} mb</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="weather-forecast-table">
<tr>
<td>Today</td>
<td>${forecast(1):condition.observationTime(%1$tA)}</td>
<td>${forecast(2):condition.observationTime(%1$tA)}</td>
</tr>
<tr>
<td><img src="static/weather-data/images/${param:iconset}/${forecast(0):condition.commonId}.png"/></td>
<td><img src="static/weather-data/images/${param:iconset}/${forecast(1):condition.commonId}.png"/></td>
<td><img src="static/weather-data/images/${param:iconset}/${forecast(2):condition.commonId}.png"/></td>
</tr>
<tr>
<td class="temp-max">${forecast(0):temperature.max(%.0f)}</td>
<td class="temp-max">${forecast(1):temperature.max(%.0f)}</td>
<td class="temp-max">${forecast(2):temperature.max(%.0f)}</td>
</tr>
<tr>
<td class="temp-min">${forecast(0):temperature.min(%.0f)}</td>
<td class="temp-min">${forecast(1):temperature.min(%.0f)}</td>
<td class="temp-min">${forecast(2):temperature.min(%.0f)}</td>
</tr>
</table>
</body>
</html>
.sitemap:
Webview url=“/weather?locationId=home&layout=example&iconset=colorful” height=7
Anyway thanks for your quick reply!