HTML layouts in OH2

Nguy_n_Phuc_Anh_D_ng · January 14, 2017, 4:45pm

Any ideas?

janw · January 15, 2017, 11:03am

I followed Benjys advice and do now get the webview displayed. But I still dont get the values:

https://i.imgur.com/QzgcZGG.png

I updated the item name for the current temperatur in exmple.html to reference to the correct item in my default.items. It still does not show the temperature. Any help?

Here’s the item from my default.items:

Number   Weather_Temperature   "Aussentemperatur [%.1f °C]" <temperature> (g_Weather)   {weather="locationId=home, type=temperature, property=current"}

Thanks!

janw · January 15, 2017, 3:52pm

Okay, I got it. It seems the provided example.html is outdated, as the “item”-tokens have been removed from the weather binding, as stated in the readme:

Important changes in 1.8: The item token for layouts has been removed to make the binding openHAB 2 compatible (see Example tokens) and new example weather-data file in download section.

So instead of referencing to the items in the items file, one has to directly address the values from the weather binding.

Instead of
${item:Weather_Temperature}
use
${weather:temperature.current}

Nguy_n_Phuc_Anh_D_ng · January 18, 2017, 4:11am

Hi janw can you show me your folders’ structure? @janw
I can not see anything display on my classic UI

janw · January 18, 2017, 6:10pm

Sure.

root@hostname:/home/user# find / -name ‘weather-data’
/var/lib/openhab2/webapps/weather-data
/etc/openhab2/html/weather-data

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}</td>
			<td id="weather-temp-sign">°C</td>
		</tr>
		<tr>
			<td colspan="2">
				<table id="weather-table-details">
					<tr>
						<td>Luftfeuchte:</td>
						<td>${weather:atmosphere.humidity} %</td>
					</tr>
					<tr>
						<td>Luftdruck:</td>
						<td>${weather:atmosphere.pressure} mb</td>
					</tr>
					<tr>
						<td>Wind:</td>
						<td>${weather:wind.speed} km/h aus ${weather:wind.direction}</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

	<table id="weather-forecast-table">
		<tr>
			<td>Today</td>
			<td>${forecast(0):temperature.min(%.0f)}</td>
			<td>${forecast(0):temperature.max(%.0f)}</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>
			<td><img src="static/weather-data/images/${param:iconset}/${forecast(3):condition.commonId}.png"/></td>
			<td><img src="static/weather-data/images/${param:iconset}/${forecast(4):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>
			<td class="temp-max">${forecast(3):temperature.max(%.0f)}</td>
			<td class="temp-max">${forecast(4):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>
			<td class="temp-min">${forecast(3):temperature.min(%.0f)}</td>
			<td class="temp-min">${forecast(4):temperature.min(%.0f)}</td>
		</tr>
	</table>

</body>

</html>

Nguy_n_Phuc_Anh_D_ng · January 22, 2017, 6:40am

My configuration is exactly just like you

.sitemap:

Webview url="/weather?locationId=home&layout=example&iconset=colorful" height=7

but the result still:

It’s sooooo frustrating!!! Please help me

janw · January 22, 2017, 9:33am

Maybe try webview url with the absolute path?

Webview url="http://[IP]:8080/weather?locationId=home&layout=example&iconset=colorful" height=7

jammoyano · March 3, 2017, 1:38pm

Hi everybody!!

I’m using weather-config on OH2, and works as expected if I access trough web explorer (firefox, chrome, …) but if i’ll use openhab app (android) its only shows a white square. (when i was using OH1.9 it woks both ways)

Any ideas??

Files located in:

/var/lib/openhab2/webapps/weather-data

sitemap pointing to:

Webview url="/weather?locationId=home&layout=example&iconset=colorful" height=11

Thanks

levers · March 7, 2017, 9:00am

I found out that fore a Synology setup the dynamic files need to be in the directory

/userdata/webapps/weather-data/layouts

And that you need to restart OH2 after making this directory.

jammoyano · March 9, 2017, 1:38pm

Hi @levers,

In raspbian /var/lib/openhab2/ is “/userdata” … so the problem wasn’t the folder …

I’ve solved the issue just using the complete route:

Webview url="http://my_public_address:8080/weather?locationId=home&layout=example&iconset=colorful"

Thanks!!

pveldi · March 31, 2017, 6:50pm

Hello Team,
I’m pretty new to Openhab. I’m trying to implement the Wunderground weather. I have followed the above experts instructions to implement the webview. The issue is that I’m receiving pure html file like below instead of the parsed html:

I did a manual installation and here is my file structure:

Here is my Sitemap:

sitemap _default label="My Home"
{
Frame label="Today" {
        Text item=Temperature_F 	icon="temperature" 	valuecolor=[>77="orange",>60="green",>40="aqua]",<=40="blue"]
      Text item=Humidity 		icon="p_humidity"
      Text item=Visibility_Mph 	icon="temperature"
      Text item=Pressure_Inches 	icon="temperature"
      Text item=Pressure_Trend 	icon="temperature"
      Text item=Condition 		icon="p_clear_sky"
      Text item=ObservationTime 		icon="p_clear_sky"
      }
  Frame label="Today" {
        Webview url="http://pi:8080/weather?locationId=homeEdmond&layout=weather&iconset=colorful" height=7
      }
  }

Here is my weather.cfg file (I have replaced my info with xxxx):

apikey.Wunderground=xxxx

location.homeEdmond.language=en
location.homeEdmond.latitude=xxxx
location.homeEdmond.longitude=xxxx
location.homeEdmond.name=xxxx
location.homeEdmond.provider=Wunderground
location.homeEdmond.updateInterval=1

Here is my weather.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}</td>
        <td id="weather-temp-sign">°C</td>
    </tr>
    <tr>
        <td colspan="2">
            <table id="weather-table-details">
                <tr>
                    <td>Luftfeuchte:</td>
                    <td>${weather:atmosphere.humidity} %</td>
                </tr>
                <tr>
                    <td>Luftdruck:</td>
                    <td>${weather:atmosphere.pressure} mb</td>
                </tr>
                <tr>
                    <td>Wind:</td>
                    <td>${weather:wind.speed} km/h aus ${weather:wind.direction}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<table id="weather-forecast-table">
    <tr>
        <td>Today</td>
        <td>${forecast(0):temperature.min(%.0f)}</td>
        <td>${forecast(0):temperature.max(%.0f)}</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>
        <td><img src="static/weather-data/images/${param:iconset}/${forecast(3):condition.commonId}.png" /></td>
        <td><img src="static/weather-data/images/${param:iconset}/${forecast(4):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>
        <td class="temp-max">${forecast(3):temperature.max(%.0f)}</td>
        <td class="temp-max">${forecast(4):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>
        <td class="temp-min">${forecast(3):temperature.min(%.0f)}</td>
        <td class="temp-min">${forecast(4):temperature.min(%.0f)}</td>
    </tr>
    </table>

</body>

Here is my default.items file:

// atmosphere
Number   Humidity    	  "Humidity [%d %%]"  	  {weather="locationId=homeEdmond, type=atmosphere, property=humidity"}
Number   Visibility    	  "Visibility [%.2f km]"  {weather="locationId=homeEdmond, type=atmosphere, property=visibility"}
Number   Visibility_Mph   "Visibility [%.2f mi]"  {weather="locationId=homeEdmond, type=atmosphere, property=visibility, unit=mph"}
Number   Pressure    	  "Pressure [%.2f mb]"    {weather="locationId=homeEdmond, type=atmosphere, property=pressure"}
Number   Pressure_Inches  "Pressure [%.2f in]"    {weather="locationId=homeEdmond, type=atmosphere,     property=pressure, unit=inches"}
String   Pressure_Trend   "Pressure Trend [%s]"    {weather="locationId=homeEdmond, type=atmosphere, property=pressureTrend"}
//Number   Ozone            "Ozone [%d ppm]"    	  {weather="locationId=homeEdmond, type=atmosphere, property=ozone"}
//Number   UV_Index         "UV Index"              {weather="locationId=homeEdmond, type=atmosphere, property=uvIndex, scale=0"}

// clouds
//Number   Clouds   "Clouds [%.0f %%]"   {weather="locationId=home, type=clouds, property=percent"}

// condition
String   Condition        "Condition [%s]"      {weather="locationId=homeEdmond, type=condition, property=text"}
String   Condition_ID     "Condition id [%s]"   {weather="locationId=homeEdmond, type=condition, property=id"}
DateTime ObservationTime  "Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"       {weather="locationId=homeEdmond, type=condition, property=observationTime"}
DateTime LastUpdate       "Last update [%1$td.%1$tm.%1$tY %1$tH:%1$tM]"            {weather="locationId=homeEdmond, type=condition, property=lastUpdate"}
String   CommonId         "Common id [%s]"      {weather="locationId=homeEdmond, type=condition,     property=commonId"}

// precipitation
Number   Rain          "Rain [%.2f mm/h]"   {weather="locationId=homeEdmond, type=precipitation, property=rain"}
Number   Rain_Inches   "Rain [%.2f in/h]"   {weather="locationId=homeEdmond, type=precipitation, property=rain, unit=inches"}
Number   Snow          "Snow [%.2f mm/h]"   {weather="locationId=homeEdmond, type=precipitation, property=snow"}
Number   Snow_Inches   "Snow [%.2f in/h]"   {weather="locationId=homeEdmond, type=precipitation, property=snow, unit=inches"}
Number   Precip_Probability   "Precip probability [%d %%]"   {weather="locationId=homeEdmond, type=precipitation, property=probability"}
// new total property in 1.8, only Wunderground
Number   Precip_Total         "Precip total [%d mm]"   {weather="locationId=homeEdmond, type=precipitation, property=total"}
Number   Precip_Total_Inches  "Precip total [%d in]"   {weather="locationId=homeEdmond, type=precipitation, property=total, unit=inches"}

// temperature
Number   Temperature      "Temperature [%.2f °C]"       {weather="locationId=homeEdmond, type=temperature,     property=current"}
Number   Temperature_F    "Temperature [%.2f F]"       {weather="locationId=homeEdmond, type=temperature, property=current, unit=fahrenheit"}
Number   Temp_Feel        "Temperature feel [%.2f °C]"  {weather="locationId=homeEdmond, type=temperature, property=feel"}
Number   Temp_Feel_F      "Temperature feel [%.2f °F]"  {weather="locationId=homeEdmond, type=temperature, property=feel, unit=fahrenheit"}
Number   Temp_Dewpoint    "Dewpoint [%.2f °C]"          {weather="locationId=homeEdmond, type=temperature, property=dewpoint"}
Number   Temp_Dewpoint_F  "Dewpoint [%.2f °F]"          {weather="locationId=homeEdmond, type=temperature, 
property=dewpoint, unit=fahrenheit"}
    // min and max values only available in forecasts
    Number   Temp_Min         "Temperature min [%.2f °C]"   {weather="locationId=homeEdmond, type=temperature,     property=min"}
Number   Temp_Min_F       "Temperature min [%.2f °F]"   {weather="locationId=homeEdmond, type=temperature,     property=min, unit=fahrenheit"}
Number   Temp_Max         "Temperature max [%.2f °C]"   {weather="locationId=homeEdmond, type=temperature, property=max"}
Number   Temp_Max_F       "Temperature max [%.2f °F]"   {weather="locationId=homeEdmond, type=temperature, property=max, unit=fahrenheit"}
String   Temp_MinMax      "Min/Max [%s °C]"             {weather="locationId=homeEdmond, type=temperature, property=minMax"}
String   Temp_MinMax_F    "Min/Max [%s °F]"             {weather="locationId=homeEdmond, type=temperature, property=minMax, unit=fahrenheit"}

// wind
Number   Wind_Speed           "Windspeed [%.2f km/h]"    {weather="locationId=homeEdmond, type=wind, property=speed"}
Number   Wind_Speed_Beaufort  "Windspeed Beaufort [%d]"  {weather="locationId=homeEdmond, type=wind, property=speed, unit=beaufort"}
Number   Wind_Speed_Knots     "Windspeed [%.2f kn]"      {weather="locationId=homeEdmond, type=wind, property=speed, unit=knots"}
Number   Wind_Speed_Mps       "Windspeed [%.2f mps]"     {weather="locationId=homeEdmond, type=wind, property=speed, unit=mps"}
Number   Wind_Speed_Mph       "Windspeed [%.2f mph]"     {weather="locationId=homeEdmond, type=wind, property=speed, unit=mph"}
String	 Wind_Direction       "Wind direction [%s]"      {weather="locationId=homeEdmond, type=wind, property=direction"}
Number   Wind_Degree          "Wind degree [%.0f °]"     {weather="locationId=homeEdmond, type=wind, property=degree"}
Number   Wind_Gust            "Wind gust [%.2f km/h]"    {weather="locationId=homeEdmond, type=wind, property=gust"}
Number   Wind_Gust_Beaufort   "Wind gust Beaufort [%d]"  {weather="locationId=homeEdmond, type=wind, property=gust, unit=beaufort"}
Number   Wind_Gust_Knots      "Wind gust [%.2f kn]"      {weather="locationId=homeEdmond, type=wind, property=gust, unit=knots"}
Number   Wind_Gust_Mps        "Wind gust [%.2f mps]"     {weather="locationId=homeEdmond, type=wind, property=gust, unit=mps"}
Number   Wind_Gust_Mph        "Wind gust [%.2f mph]"     {weather="locationId=homeEdmond, type=wind, property=gust, unit=mph"}
Number   Wind_Chill           "Wind chill [%.2f °C]"     {weather="locationId=homeEdmond, type=wind, property=chill"}
Number   Wind_Chill_F         "Wind chill [%.2f °F]"     {weather="locationId=homeEdmond, type=wind, property=chill,     unit=fahrenheit"}

// weather station (only Wunderground and Hamweather), needs version 1.7 or greater of the binding
String   Station_Name         "Station Name [%s]"        {weather="locationId=homeEdmond, type=station, property=name"}
String   Station_Id           "Station Id [%s]"          {weather="locationId=homeEdmond, type=station, property=id"}
Number   Station_Latitude     "Station Latitude [%.6f]"  {weather="locationId=homeEdmond, type=station, property=latitude, scale=6"}
Number   Station_Longitude    "Station Longitude [%.6f]" {weather="locationId=homeEdmond, type=station, property=longitude, scale=6"}

Please let me know if you need any other information.

Not sure why I’m getting the html into the app instead of the parsed html.

Thanks!

pveldi · March 31, 2017, 8:19pm

For some reason, this is happening in Google Chrome, Firefox and the iOS app. My Internet Explorer is displaying it perfectly. Please shed some light.

Here is the screenshot from Chrome:

Here is the screenshot from Internet Explorer:

NCO · April 22, 2017, 6:27am

Hi @Jaghova,

have you been able to find a solution for transforming the “Monday” by a map file?
Any tipps would be greatly appreciated.

oakguy · September 11, 2017, 9:03pm

Benjy,

I’m can’t locate this folder - /opt/openhab2/userdata/webapps. I did the manual install. I have a limited knowledge of the file structure.

Thanks
Oakguy

oakguy · September 11, 2017, 9:13pm

Benjy,

I can’t locate this folder. What is the correct path?

Thanks
Guy

Benjy · September 11, 2017, 9:30pm

Hi @oakguy, can you find the userdata folder? You’d need to make the webapps folder inside it, it might not be immediately there. If you’re using Linux, then you should also give openHAB the permissions to use it after you’ve made the directory:

sudo chown -R openhab:openhab [folder path]

oakguy · September 12, 2017, 12:26am

Thank you. I appreciate the assist. I believe now I have to just translate Celsius to Fahrenheit and I should be there. Can that be done in the webview url?

Thanks!
Oakguy

sitemap name label=“name”
{
Frame label=“Today” {
Webview url=“http://192.168.1.54:8080/weather?locationId=Mora&layout=weather&iconset=colorful” height=7

I have figured out the difference between the example and your own html layout. I’m just having an issue changing Celsius to Fahrenheit.

hendrik1287 · November 18, 2017, 4:31pm

Hi everyone,

I’m currently struggling with this html layout. It’s perfectly working in the browser, but not in the openhab android app, there is only a white area instead of the weather forecast. The normal webview is working. Here is my sample code. I get a white area for the first entry and the correct page for heise-online for the second entry.

	Frame{ 
		Webview url="/weather?locationId=home&layout=weather&iconset=colorful" height=8
	}

    Frame{ 
		Webview url="http://heise-online.mobi/" height=8
	}

Has anyone any idea how to solve this problem?

jmelhus · January 2, 2018, 10:07pm

I found it easiest to configure this webview url, then it works both locally and remote…

Webview url="https://home.myopenhab.org/weather?locationId=home&layout=example&iconset=colorful" height=9

Ihor_Bat · May 9, 2018, 8:10am

Hello
I also need help. there is a solution?

I have a solution. Thank you