Dashboard UI suitable for tablets

Tags: #<Tag:0x00007fc8fc8703a8> #<Tag:0x00007fc8fc8702b8> #<Tag:0x00007fc8fc8701f0>

Continuing the discussion from Alternative UIs? OpenRemote, iRule, iViewer?:

For anyone else looking to try this out, my openHAB dashboards can be found at https://github.com/smar000/openhab-dashboard.

21 Likes

Yes!!! This is the type of stuff I was looking for. I was thinking about creating a php backend with some admin templates I have but this is stuff I wanna use and see. I have a nexus7 and this right here is how I want to work lol

wow, thank you so much…i’ll have a go and report back.

cool, will give it definetly a try :slight_smile:

but as not being a linx expert - i tried to follow the instructions on the http://dashing.io/#setup

page - but already the

gem install dashing

command is not working on my rPi. Any idea? I get the following error message:

/usr/bin/ruby1.9.1 extconf.rb
/usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require': cannot load such file -- mkmf (LoadError)
        from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
        from extconf.rb:2:in `<main>'

Cheers and thanks

I’m not very familiar with ruby myself, but that particular error looks as if the dev version of ruby is missing on your system. I think this is a requirement for dashing.

You could try sudo apt get install ruby-dev first, and then retry the gem install.

it took me an hour or so last night to get it up and running. just kept googling the errors and eventually got there, as there we’re quite a few dependencies needed. I’ve got it setup on my ubuntu PC (non server just to test/run etc) but will move it over to a rPi soon.

Have a look at these instructions specifically for dashing-pi:

This looks really nice and straight to the point for controlling the house. Will be watching to see how you guys get on…

This looks like a very good starting point for a openhab dashboard!

Will definitely give it a try.

Would it be possible to access it from my.openhab.org ?

-Frode

smar - which version of the Weather binding? I think the github was updated recently and the “Weather_” removed.

Thank you so much. I have been looking all over for dashboard alternatives. I will try your solution asap.

@frode_fuglestad I have not tried it with my.openhab.org so can’t really tell you if it works with it or not. If you are using my.openhab.org, maybe you can try out and let us know?

@apatel I am using the 1.7.1 binding. That “Weather_” prefix is just a label, and I most likely have it in my items from previous builds as it helps me keep my items list neat and easy to remember.

What I meant when referring back to the binding was not so much keeping the item names exactly the same as the binding documentation examples, but in case anyone is unfamiliar with the binding and wanted to know what the item name was referring to (e.g. the ones with _1 at the end for example refers to forecasts for tomorrow etc). In reality you can use any item names you like, and just update the refreshWeather function in the lib/ohapp.rb file to refer to the same item names.

appreciate the information, and I get it. I was just referring for others. All i can say so far is, amazing work. I’ve been spending the past few days trying to customize it; unfortunately, i didn’t know html/java until about last month, so progress is slow for me. all i can say is I hate css

I also don’t know ruby either, but doesn’t seem as easy as java for me. I think i’ll spend the next day few days just trying to figure out how to get the day of the week in there for a 5-day forecast.

One way would be to modify the coffeescript for the widget. You could then do something like:

tomorrow = new Date()
tomorrow.setDate(tomorrow.getDate() + 1) #Add 1 for tomorrow, 2 for day after etc
options = { weekday: 'long' };  #This is so that we can get just the day name from the locale function
console.log "Tomorrow: " + tomorrow.toLocaleDateString('en-GB', options)

This will give you the day names you need, which you just attach to your widget, along with your forecast data from openHAB.

I was playing with https://github.com/HomeAutomationForGeeks/openhab-controlpanel the other day, cause I just ordered a 7 inch tabled to control the house.
I will definitivly give this one a try.

Could you explain your wheather items that are set in openhab?
Also, which service provider do you choose?

I’d ike to implement this to my openhab server.

perfect thank you. I used that, but set a variable. so, in the html I have:

data-bind=“fDate1”>
data-bind=“fDate2”>
data-bind=“fDate3”>
data-bind=“fDate4”>

and in the coffee script I added this to the bottom:

ready: ->
setInterval(@startTime, 10000)

startTime: =>
day1 = new Date()
day2 = new Date()
day3 = new Date()
day4 = new Date()

day1.setDate(day1.getDate() + 1) 
day2.setDate(day2.getDate() + 2) 
day3.setDate(day3.getDate() + 3) 
day4.setDate(day4.getDate() + 4) 

options = { weekday: 'short' };
@set('fDate1', day1.toLocaleDateString('en-GB', options))
@set('fDate2', day2.toLocaleDateString('en-GB', options))
@set('fDate3', day3.toLocaleDateString('en-GB', options))
@set('fDate4', day4.toLocaleDateString('en-GB', options))

@apatel Great, glad to hear you got it working.

@sptzdmnc - I use wunderground for my weather reporting. My openhHAB weather items are as follows (though not all of them are necessarily in use for the dashboard):

/*Weather */
Group	Weather	(All)	
Group	Weather_Chart	""	(Weather_Chart)	
Number	Weather_Chart_Period	"Chart Period"	(Weather_Chart)	
Number	Weather_Temperature	"Temperature [%.2f °C]"	<KNXUF_temp_temperature>	(All, Weather, Weather_Chart)		{ weather="locationId=home, type=temperature, property=current, scale=1" }
String	Weather_Conditions	"Conditions [%s]"	(All, Weather)		{ weather="locationId=home, type=condition, property=text" }
String	Weather_Code	"Weather Common ID [%s]"	(All, Weather)		{ weather="locationId=home, type=condition, property=commonId" }
String	Weather_Code_1	"Tomorrow's Weather Common ID [%s]"	(All, Weather)		{ weather="locationId=home, type=condition, forecast=1, property=commonId" }
Number	Weather_Humidity	"Humidity [%d %%]"	(All, Weather) { weather="locationId=home, type=athmosphere, property=humidity, scale=1" }
Number	Weather_Temp_Max_0	"Today's highest temperature [%.1f °C]"	(All, Weather,Weather_Chart)		{ weather="locationId=home, forecast=0, type=temperature, property=max, scale=1" }
Number	Weather_Temp_Max_1	"Temperature max tomorrow [%.1f °C]" (All, Weather)	{ weather="locationId=home, forecast=1, type=temperature, property=max, scale=1" }
Number	Weather_Temp_Max_2	"Temperature max day after [%.1f °C]" (All, Weather)	{ weather="locationId=home, forecast=2, type=temperature, property=max, scale=1" }
Number	Weather_Temp_Min_0	"Today's lowest temperature [%.1f °C] " (All, Weather,Weather_Chart)		{ weather="locationId=home, forecast=0, type=temperature, property=min, scale=1" }
Number	Weather_Temp_Min_1	"Temperature min tomorrow [%.1f °C]" (All, Weather)	{ weather="locationId=home, forecast=1, type=temperature, property=min, scale=1" }
Number	Weather_Temp_Min_2	"Temperature min day after [%.1f °C]" (All, Weather)	{ weather="locationId=home, forecast=2, type=temperature, property=min, scale=1" }
Number	Weather_Pressure	"Pressure [%.2f mb]"	(All, Weather)		{ weather="locationId=home, type=athmosphere, property=pressure, scale=1" }
Number  Weather_Precipitation   "Precip probability [%d %%]" (All, Weather)  {weather="locationId=home, type=precipitation, property=probability"}
Number  Weather_Precipitation_1   "Precip probability [%d %%]" (All, Weather)  {weather="locationId=home, type=precipitation, forecast=1, property=probability"}
Number  Weather_Temperature_Feels   "Temperature feel [%.2f °C]" (All, Weather) {weather="locationId=home, type=temperature, property=feel"}
Number  Weather_Wind_Chill           "Wind chill [%.2f °C]"   (All, Weather)  {weather="locationId=home, type=wind, property=chill"}
Number  Weather_Wind_Speed       "Windspeed [%.2f mps]"    (All, Weather) {weather="locationId=home, type=wind, property=speed, unit=mps"}
String  Weather_Wind_Direction       "Wind direction [%s]"  (All, Weather)    {weather="locationId=home, type=wind, property=direction"}
Number  Weather_Wind_Gust        "Wind gust [%.2f mph]"  (All, Weather)   {weather="locationId=home, type=wind, property=gust, unit=mph"}
DateTime	Weather_ObsTime	"Observation time  [%1$td/%1$tm/%1$tY %1$tH:%1$tM]" (All, Weather)	{ weather="locationId=home, type=condition, property=observationTime" }
DateTime	Weather_LastUpdate	"Weather last updated [%1$td/%1$tm/%1$tY %1$tH:%1$tM]" (All, ,Weather)	{ weather="locationId=home, type=condition, property=observationTime" }

ok - seems that there had been some missing packages in my rPi - based on the link shared from @apatel i got the dashing installed via GEM.

will now work on the implementation. thx for now.

Number                Weather_Temperature            "Temperature [%.2f °C]"                                        (All,gDashboard, Weather, Weather_Chart)    {weather="locationId=home, type=temperature, property=current, scale=1" }
Number                Weather_Humidity            "Humidity [%d %%]"                                            (All,gDashboard, Weather)                     {weather="locationId=home, type=athmosphere, property=humidity, scale=1" }
Number                Weather_Temp_Max_0            "Today's highest temperature [%.1f °C]"                        (All,gDashboard, Weather,Weather_Chart)        {weather="locationId=home, forecast=0, type=temperature, property=max, scale=1" }
Number                Weather_Temp_Max_1            "Temperature max tomorrow [%.1f °C]"                         (All, gDashboard,Weather)                    {weather="locationId=home, forecast=1, type=temperature, property=max, scale=1" }
Number                Weather_Temp_Min_0            "Today's lowest temperature [%.1f °C] "                     (All, gDashboard,Weather,Weather_Chart)        {weather="locationId=home, forecast=0, type=temperature, property=min, scale=1" }
Number                Weather_Temp_Min_1            "Temperature min tomorrow [%.1f °C]"                        (All,gDashboard, Weather)                    {weather="locationId=home, forecast=1, type=temperature, property=min, scale=1" }
Number                Weather_Pressure            "Pressure [%.2f mb]"                                        (All,gDashboard, Weather)                    {weather="locationId=home, type=athmosphere, property=pressure, scale=1" }
Number              Weather_Precipitation         "Precip probability [%d %%]"                                 (All,gDashboard, Weather)                      {weather="locationId=home, type=precipitation, property=probability"}
Number              Weather_Precipitation_1        "Precip probability [%d %%]"                                 (All,gDashboard, Weather)                      {weather="locationId=home, type=precipitation, forecast=1, property=probability"}
Number              Weather_Wind_Speed             "Windspeed [%.2f mps]"                                       (All, gDashboard,Weather)                     {weather="locationId=home, type=wind, property=speed, unit=mps"}
Number              Weather_Wind_Gust           "Wind gust [%.2f mph]"                                      (All,gDashboard, Weather)                   {weather="locationId=home, type=wind, property=gust, unit=mph"}
String              Weather_Wind_Direction      "Wind direction [%s]"                                          (All,gDashboard, Weather)                    {weather="locationId=home, type=wind, property=direction"}
String                Weather_Conditions            "Conditions [%s]"                                            (All,gDashboard, Weather)                    {weather="locationId=home, type=condition, property=text" }
String                Weather_Code                "Weather Common ID [%s]"                                    (All,gDashboard, Weather)                    {weather="locationId=home, type=condition, property=commonId" }
DateTime            Weather_ObsTime                "Observation time  [%1$td/%1$tm/%1$tY %1$tH:%1$tM]"         (All,gDashboard, Weather)                    {weather="locationId=home, type=condition, property=observationTime" }
DateTime            Weather_LastUpdate            "Weather last updated [%1$td/%1$tm/%1$tY %1$tH:%1$tM]"         (All, ,Weather)                                {weather="locationId=home, type=condition, property=observationTime" }
DateTime             Sunrise_Time                  "Sunrise [%1$tH:%1$tM]"                                                                                  {astro="planet=sun, type=rise, property=start"}
DateTime             Sunset_Time                   "Sunset [%1$tH:%1$tM]"                                                                                   {astro="planet=sun, type=set, property=end"}

Are the Necessary items that are required for the dashboard.

Btw: Would you please adjust
Wind_Direction and Wind_Gust on your github page with the prefix “Weather”

Thanks :smile:

@sptzdmnc Thanks and yes, I missed the entries in the Readme. But if you check the source in the github repo, you’ll see that the those two parameters were updated accordingly a couple of days ago :smile:

Note that you will also need Weather_Code_1 for tomorrow’s weather forecast icon.