At the risk of resurrecting an old thread, there have been changes made in OH 1.8 that make the example I listed in the above postings no longer valid. Changes had to be made in order to support OH 2 which resulted in the removal of the item: tag. This means we can no longer reference an Item’s state in the webview.
See above for links to how to get the icons and the .map file. My updated config is as follows:
String Condition_Id "Weather is [MAP(yahoo_weather_code.map):%s]" (Weather) { weather="locationId=home, type=condition, property=id" }
// Weather panel
Group gWeather_Chart (gWeather)
Number Weather_Temperature "Outside Temperature [%.0f] °F" <temperature> (gWeather_Chart) { weather="locationId=home, type=temperature, property=current, unit=fahrenheit" }
Number Weather_Humidity "Outside Humidity [%d%%]" <temperature> (gWeather) { weather="locationId=home, type=athmosphere, property=humidity" }
Number Weather_Pressure "Barometric Pressure [%.2f in]" <temperature> (gWeather) { weather="locationId=home, type=athmosphere, property=pressure, unit=inches" }
Number Weather_Pressure_Chart_Period "Chart Period"
Number Weather_Temp_Min "Today's Minimum [%.0f] °F" <temperature> (gWeather_Chart)
Number Weather_Temp_Max "Today's Maximum [%.0f] °F" <temperature> (gWeather_Chart)
Number Weather_Chart_Period "Chart Period"
DateTime Weather_LastUpdate "Last Update [%1$ta %1$tr]" <clock>
Number Weather_Humidity_Chart_Period "Chart Period"
Rules
rule "Update max and min temperatures"
when
Item Weather_Temperature changed or
Time cron "1 0 0 * * ?" or
System started
then
val startOfDay = now.withTimeAtStartOfDay
if(Weather_Temperature != null) {
postUpdate(Weather_Temp_Max, Weather_Temperature.maximumSince(startOfDay).state)
postUpdate(Weather_Temp_Min, Weather_Temperature.minimumSince(startOfDay).state)
}
end
Sitemap:
// Weather
Text item=Condition_Id icon="yahoo_weather" {
Frame {
Webview url="/weather?locationId=home&layout=example&iconset=colorful" height=13
Text item=Weather_LastUpdate visibility=[Weather_LastUpdate>30] valuecolor=[Weather_LastUpdate>120="orange", Weather_LastUpda
te>300="red"]
Text item=Weather_Temperature valuecolor=[Weather_LastUpdate=="Uninitialized"="lightgray",Weather_LastUpdate>90="lightgray",>77="orange",>60="green",>40="aqua",<=40="blue"]{
Frame {
Text item=Weather_Temp_Max valuecolor=[>77="orange",>60="green",>40="aqua",<=40="blue"]
Text item=Weather_Temp_Min valuecolor=[>77="orange",>60="green",>40="aqua",<=40="blue"]
}
Frame {
Switch item=Weather_Chart_Period label="Period" mappings=[0="Hour", 1="Day", 2="Week"]
Image url="http://user:password@localhost:8080/rrdchart.png?items=Weather_Temperature,Weather_Temp_Max,Weather_Temp_Min&period=h" refresh=6000 visibility=[Weather_Chart_Period==0, Weather_Chart_Period=="Uninitialized"]
Image url="http://user:password@localhost:8080/rrdchart.png?items=Weather_Temperature,Weather_Temp_Max,Weather_Temp_Min&period=D" refresh=30000 visibility=[Weather_Chart_Period==1]
Image url="http://user:password@localhost:8080/rrdchart.png?items=Weather_Temperature,Weather_Temp_Max,Weather_Temp_Min&period=W" refresh=30000 visibility=[Weather_Chart_Period==2]
}
}
Text item=Weather_Humidity {
Frame {
Switch item=Weather_Humidity_Chart_Period label="Period" mappings=[0="Hour", 1="Day", 2="Week"]
Image url="http://user:password@localhost:8080/rrdchart.png?items=Weather_Humidity&period=h" refresh=6000 visibility=[Weather_Humidity_Chart_Period==0, Weather_Humidity_Chart_Period=="Uninitialized"]
Image url="http://user:password@localhost:8080/rrdchart.png?items=Weather_Humidity&period=D" refresh=30000 visibility=[Weather_Humidity_Chart_Period==1]
Image url="http://user:password@localhost:8080/rrdchart.png?items=Weather_Humidity&period=W" refresh=30000 visibility=[Weather_Humidity_Chart_Period==2]
}
}
Text item=Weather_Pressure {
Frame {
Switch item=Weather_Pressure_Chart_Period label="Period" mappings=[0="Hour", 1="Day", 2="Week"]
Image url="http://user:password@localhost:8080/rrdchart.png?items=Weather_Pressure&period=h" refresh=6000 visibility=[Weather_Pressure_Chart_Period==0, Weather_Pressure_Chart_Period=="Uninitialized"]
Image url="http://user:password@localhost:8080/rrdchart.png?items=Weather_Pressure&period=D" refresh=30000 visibility=[Weather_Pressure_Chart_Period==1]
Image url="http://user:password@localhost:8080/rrdchart.png?items=Weather_Pressure&period=W" refresh=30000 visibility=[Weather_Pressure_Chart_Period==2]
}
}
Text item=Sunrise_Time
Text item=Sunset_Time
Text item=Twilight_Time
}
}
Webview (most of the changes are here):
<!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)}
<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)[fahrenheit]}</td>
<td id="weather-temp-sign">°F</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)[inches]} in</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(%.1f)[fahrenheit]} °F</td>
<td class="temp-max">${forecast(1):temperature.max(%.1f)[fahrenheit]} °F</td>
<td class="temp-max">${forecast(2):temperature.max(%.1f)[fahrenheit]} °F</td>
</tr>
<tr>
<td class="temp-min">${forecast(0):temperature.min(%.1f)[fahrenheit]} °F</td>
<td class="temp-min">${forecast(1):temperature.min(%.1f)[fahrenheit]} °F</td>
<td class="temp-min">${forecast(2):temperature.min(%.1f)[fahrenheit]} °F</td>
</tr>
</table>
</body>
</html>