All,
I have been working on building out my dashboards in OpenHAB recently and am pushing through minor detail after minor detail… lol. I have taken a lot of your work and implemented in my environment and made it mine with little to no changes. Your stuff is that good. Thank you for putting this out there for everyone to use.
I have taken your weather widget and made a few modifications to it to suite my needs. Below is a screenshot of my Foyer dashboard (pretty bare right now, but trying to work through the major things first).
*** One note I would like to make is that with the weather binding in PaperUI, it doesn’t show up in the list of installed bindings as it was intended for OpenHAB 1.X. Just modify the file manually (I supplied mine below). It’s at /etc/openhab/services/weather.cfg
Also, I had an issue with it not working at all. The problem was that even though the weather.cfg file was configured correctly, it wasn’t working properly. To fix, stop openhab2 service and delete the following file below:
*If you take a quick look at this file before deleting it, you might notice incorrect text in it.
/var/lib/openhab2/config/org/openhab/weather.config
Restart openhab2 service and the file will get recreated correctly from the weather.cfg file (/etc/openhab2/services/weather.cfg).
I have made a few minor changes to the template code. One required an addition in the example.css file:
smallerfont {
font-style: normal;
font-size: 75%;
text-transform: uppercase;
}
The current weather widget code I’m using is below. Please take note to the comment lines I added explaining most of my changes.
<div ng-init="ServerPath='http://192.168.X.X:8080/static/weatherdata'; IconSet='colorful'">
<link rel="stylesheet" type="text/css" href="{{ServerPath}}/layouts/example.css" />
</div>
<!--Removed the Observation Time division simple to free up some space.-->
<table id="weather-table">
<tr>
<!--Changed ".replace(' ','-')" with ".split(' ').join('-')" as the original was giving me problems with loading image files.-->
<td rowspan="2"><img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition0').split(' ').join('-') | lowercase }}.png"/></td>
<!--Added in a "smallerfont" in the example.css spreadsheet to make the Fahrenheit "F" slightly smaller. 75% to be exact.-->
<td id="weather-temp">{{'%.0f' | sprintf:itemValue('Temperature_F')}} <smallerfont>°F</smallerfont></td>
</tr>
<tr>
<td colspan="2">
<table id="weather-table-details">
<tr>
<!--Added   for some spacing to match the pressure below.-->
<td>Humidity: </td>
<!--Added %.0f to get rid of the decimals on the humidity value.-->
<td>{{'%.0f' | sprintf:itemValue('Humidity')}} %</td>
</tr>
<tr>
<!--Added   for some spacing after the colon due to the extra characters in the pressure from changing it to inches of mercury.-->
<td>Pressure: </td>
<!--Changed the following line to give me pressure in inches of mercury. Also modified it to %.2f to add the common 2 decimal places in this value.-->
<td>{{'%.2f' | sprintf:itemValue('Pressure_Inches')}} Hg</td>
</tr>
</table>
<!--Added in the following 2 breaks for vertical spacing.-->
<br></br>
<br></br>
</td>
</tr>
<tr>
<!--Removed <td/> column for horizontal spacing.-->
<td>Today</td>
<td>{{itemValue('ObservationTime1') | date:'EEEE'}}</td>
<td>{{itemValue('ObservationTime2') | date:'EEEE'}}</td>
</tr>
<tr>
<!--Removed <td/> column for horizontal spacing.-->
<td>
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition0').split(' ').join('-') | lowercase }}.png"/>
<p>{{itemValue('Condition0')}}</p>
</td>
<td>
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition1').split(' ').join('-') | lowercase }}.png"/>
<p>{{itemValue('Condition1')}}</p>
</td>
<td>
<img id="weather-icon" src="{{ServerPath}}/images/{{IconSet}}/{{itemValue('Condition2').split(' ').join('-') | lowercase }}.png"/>
<p>{{itemValue('Condition2')}}</p>
</td>
</tr>
<tr>
<!--Removed Max text. This also removed a column from the bottom.-->
<td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('Temp_Max0')}} °F</td>
<td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('Temp_Max1')}} °F</td>
<td class="col-xs-4" style="color:red">{{'%.0f' | sprintf:itemValue('Temp_Max2')}} °F</td>
</tr>
<tr>
<!--Removed Min text. This also removed a column from the bottom.-->
<td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('Temp_Min0')}} °F</td>
<td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('Temp_Min1')}} °F</td>
<td class="col-xs-4" style="color:#0db9f0">{{'%.0f' | sprintf:itemValue('Temp_Min2')}} °F</td>
</tr>
</table>
<p/>
Almost forgot my items file. I commented out the items I’m not currently using.
// atmosphere
Number Humidity "Humidity [%d %%]" {weather="locationId=home, type=atmosphere, property=humidity"}
//Number Visibility "Visibility [%.2f km]" {weather="locationId=home, type=atmosphere, property=visibility"}
Number Visibility_Mph "Visibility [%.2f mi]" {weather="locationId=home, type=atmosphere, property=visibility, unit=mph"}
//Number Pressure "Pressure [%.2f mb]" {weather="locationId=home, type=atmosphere, property=pressure"}
Number Pressure_Inches "Pressure [%.2f in]" {weather="locationId=home, type=atmosphere, property=pressure, unit=inches"}
String Pressure_Trend "Pressuretrend [%s]" {weather="locationId=home, type=atmosphere, property=pressureTrend"}
Number Ozone "Ozone [%d ppm]" {weather="locationId=home, type=atmosphere, property=ozone"}
Number UV_Index "UV Index" {weather="locationId=home, 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=home, type=condition, property=text"}
String Condition0 "Condition [%s]" {weather="locationId=home, forecast=0, type=condition, property=text"}
String Condition1 "Condition [%s]" {weather="locationId=home, forecast=1, type=condition, property=text"}
String Condition2 "Condition [%s]" {weather="locationId=home, forecast=2, type=condition, property=text"}
String Condition_ID "Condition id [%s]" {weather="locationId=home, type=condition, property=id"}
DateTime ObservationTime "Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" {weather="locationId=home, type=condition, property=observationTime"}
DateTime ObservationTime0 "Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" {weather="locationId=home, forecast=0, type=condition, property=observationTime"}
DateTime ObservationTime1 "Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" {weather="locationId=home, forecast=1, type=condition, property=observationTime"}
DateTime ObservationTime2 "Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" {weather="locationId=home, forecast=2, type=condition, property=observationTime"}
DateTime ObservationTime3 "Observation time [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" {weather="locationId=home, forecast=2, type=condition, property=observationTime"}
DateTime LastUpdate "Last update [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" {weather="locationId=home, type=condition, property=lastUpdate"}
String CommonId "Common id [%s]" {weather="locationId=home, type=condition, property=commonId"}
// precipitation
Number Rain_Inches "Rain [%.2f in/h]" {weather="locationId=home, type=precipitation, property=rain, unit=inches"}
Number Snow_Inches "Snow [%.2f in/h]" {weather="locationId=home, type=precipitation, property=snow, unit=inches"}
Number Precip_Probability "Precip probability [%d %%]" {weather="locationId=home, type=precipitation, property=probability"}
// new total property in 1.8, only Wunderground
Number Precip_Total_Inches "Precip total [%d in]" {weather="locationId=home, type=precipitation, property=total, unit=inches"}
// temperature
Number Temperature_F "Temperature [%.2f °F]" {weather="locationId=home, type=temperature, property=current, unit=fahrenheit"}
Number Temp_Feel_F "Temperature feel [%.2f °F]" {weather="locationId=home, type=temperature, property=feel, unit=fahrenheit"}
Number Temp_Dewpoint_F "Dewpoint [%.2f °F]" {weather="locationId=home, type=temperature, property=dewpoint, unit=fahrenheit"}
// min and max values only available in forecasts
Number Temp_Min "Temperature min [%.2f °F]" {weather="locationId=home, type=temperature, property=min, unit=fahrenheit"}
Number Temp_Min0 "Temperature min [%.2f °F]" {weather="locationId=home, forecast=0, type=temperature, property=min, unit=fahrenheit"}
Number Temp_Min1 "Temperature min [%.2f °F]" {weather="locationId=home, forecast=1, type=temperature, property=min, unit=fahrenheit"}
Number Temp_Min2 "Temperature min [%.2f °F]" {weather="locationId=home, forecast=2, type=temperature, property=min, unit=fahrenheit"}
Number Temp_Max "Temperature max [%.2f °F]" {weather="locationId=home, type=temperature, property=max, unit=fahrenheit"}
Number Temp_Max0 "Temperature max [%.2f °F]" {weather="locationId=home, forecast=0, type=temperature, property=max, unit=fahrenheit"}
Number Temp_Max1 "Temperature max [%.2f °F]" {weather="locationId=home, forecast=1, type=temperature, property=max, unit=fahrenheit"}
Number Temp_Max2 "Temperature max [%.2f °F]" {weather="locationId=home, forecast=2, type=temperature, property=max, unit=fahrenheit"}
Number Temp_Max_F "Temperature max [%.2f °F]" {weather="locationId=home, type=temperature, property=max, unit=fahrenheit"}
String Temp_MinMax_F "Min/Max [%s °F]" {weather="locationId=home, type=temperature, property=minMax, unit=fahrenheit"}
// wind
//Number Wind_Speed "Windspeed [%.2f km/h]" {weather="locationId=home, type=wind, property=speed"}
//Number Wind_Speed_Beaufort "Windspeed Beaufort [%d]" {weather="locationId=home, type=wind, property=speed, unit=beaufort"}
//Number Wind_Speed_Knots "Windspeed [%.2f kn]" {weather="locationId=home, type=wind, property=speed, unit=knots"}
//Number Wind_Speed_Mps "Windspeed [%.2f mps]" {weather="locationId=home, type=wind, property=speed, unit=mps"}
Number Wind_Speed_Mph "Windspeed [%.2f mph]" {weather="locationId=home, type=wind, property=speed, unit=mph"}
String Wind_Direction "Wind direction [%s]" {weather="locationId=home, type=wind, property=direction"}
Number Wind_Degree "Wind degree [%.0f °]" {weather="locationId=home, type=wind, property=degree"}
//Number Wind_Gust "Wind gust [%.2f km/h]" {weather="locationId=home, type=wind, property=gust"}
//Number Wind_Gust_Beaufort "Wind gust Beaufort [%d]" {weather="locationId=home, type=wind, property=gust, unit=beaufort"}
//Number Wind_Gust_Knots "Wind gust [%.2f kn]" {weather="locationId=home, type=wind, property=gust, unit=knots"}
//Number Wind_Gust_Mps "Wind gust [%.2f mps]" {weather="locationId=home, type=wind, property=gust, unit=mps"}
Number Wind_Gust_Mph "Wind gust [%.2f mph]" {weather="locationId=home, type=wind, property=gust, unit=mph"}
//Number Wind_Chill "Wind chill [%.2f °C]" {weather="locationId=home, type=wind, property=chill"}
Number Wind_Chill_F "Wind chill [%.2f °F]" {weather="locationId=home, 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=home, type=station, property=name"}
String Station_Id "Station Id [%s]" {weather="locationId=home, type=station, property=id"}
Number Station_Latitude "Station Latitude [%.6f]" {weather="locationId=home, type=station, property=latitude, scale=6"}
Number Station_Longitude "Station Longitude [%.6f]" {weather="locationId=home, type=station, property=longitude, scale=6"}
This is my weather.cfg for the weather binding:
apikey.Wunderground=XXXXXXXXXXXXXXXX
# location configuration, you can specify multiple locations
location.home.name=home
location.home.latitude=XX.XXXXXX
location.home.longitude=-XX.XXXXXX
location.home.provider=Wunderground
location.home.language=en
location.home.updateInterval=10