HTML layouts in OH2

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 :


HTML page is example from Weather Binding page, so should work.
I have created directories openhab/userdata/webapps/weather-data with files as described at Weather Binding page and as namraccr wrote.
I really don’t know where is my mistake.

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.

  1. First, edit weather.html (or example.html by default) so that all directories start with “static/” e.g.
<link rel="stylesheet" type="text/css" href="static/weather-data/layouts/example.css" />
  1. You need move dynamic html files to a place where openHAB can handle the webapp content:
  • If you’re using MANUAL Installation: Move your /weather-data/layouts/weather.html folders and file to /opt/openhab2/userdata/webapps
  • If you’re using AUTOMATIC Installation (e.g. apt-get): Move them to /var/lib/openhab2/webapps
  1. Change your sitemap to the following (You can change the values set for locationId=, layout=* and iconset=***):
Webview url="/weather?locationId=home-HAM&layout=weather&iconset=colorful" height=20
  1. Finally, make sure the static content (the /weather-data/ folder) is in your html folder:
  • If you’re using MANUAL Installation: /opt/openhab2/conf/html
  • If you’re using AUTOMATIC Installation (e.g. apt-get): /etc/openhab2/html
3 Likes

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.

2 Likes

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 .sitemap:
Webview url="/weather?locationId=home&layout=example&iconset=colorful"

my folder structure:

  1. /etc/openhab2/html => one folder called weather-data. Inside it contains 2 sub-folders images and layouts. And ofcourse the latter has example.html, example.css, example.js
    The content of .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>

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.

1 Like

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 :+1:

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.

1 Like

@ 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”

1 Like

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 :frowning:

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!