Openhab2 - Weather Binding Issue

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.

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:

1 Like

Where did you place your example.html? I did a symlink and placed the file under /etc/openhab2/html/weather-data/layouts/, so

$ ls -l /var/lib/openhab2/webapps/weather-data/layouts/
insgesamt 0
lrwxrwxrwx 1 root root 52 Mär 31 12:14 weather.html -> /etc/openhab2/html/weather-data/layouts/weather.html

(I renamed example.html to weather.html and changed all links accordingly, only makeup…)

I can see the weather page in Google Chrome, Firefox and Safari (for Windows), Internet Explorer also works, but it can’t render the start page correctly (choose Basic UI, Paper UI and so on), I don’t use it anyway… I did not try it via iOS app or HABdroid yet.

Hi,
I have my html file in openhab2\userdata\webapps\weather-data\layouts

Have you done manual installation?

In question of openHAB2: no, I installed through apt-get (unstable aka snapshot version).
For weather binding, the only manual thing was to copy the html stuff the right way. As mentioned, I decided not to move the html file but to symlink to the file, so all configuration is done in /etc/openhab2/.

I’m using bootstrap css and that might be the reason. I will try to remove it and check.