Dashboard UI suitable for tablets

@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.

@karsten_kaiser_1971 how is the performance on the raspberry pi?

@smar - the weather items do not have to be added to gDashboard group in openhab because there is a job that refreshes every five minutes, correct? (it wasn’t clear in the readme)

@apatel Yes that’s correct.

In theory we could have used the gDashboard group but then we would then have to hack the openHAB rule so that it collated all the weather items and formed a json string for the whole set, which it would then have to post to the dashing weather widget. As weather updates are not that time sensitive, I decided to keep the openHAB rule clean, and just use the 5 minute scheduler.

EDIT: Updated the Readme as well!

Great thanks, makes perfect sense. This seems to me to be the most appropriate approach.

havent it up and running so far. still suffering with the installation and getting the startup script running. When i have it live will let you know,

@smar sorry to keep pestering you with questions…but…

do you know if dashing loads all of the widgets in the widgets folder, or calls them when needed? The reason I ask is that in anticipation of moving this to a rapsberry pi, i’m thinking of ways to improve performance on a system with limited/fewer resources.

I have this running on my Ubuntu 14.04 desktop, and running other apps, seeding, etc, it feels a little sluggish as is. i.e. responsiveness from the tablet to dashing to openhab and back. (openhab is already running on an rPi and plan to put dashing on a second rPi that i have).

Once setup, I plan to disable most of the logging, and that should help. Any other thoughts on performance improvements?

@apatel No problem at all - please do ask whatever you need to know.

WRT dashing widgets, from what I’ve read I think that the widgets are only loaded once they are defined in a dashboard and that dashboard is loaded in a client. Logically also it wouldn’t make sense for them to be loaded before they are defined in a dashboard as then they wouldn’t have their widget IDs by which dashing/batman.js could track and moreover, they may be missing required parameter bindings etc.

I am running it on a an Ubuntu 14.10 server, which is itself running in a virtual machine (under esxi 6) on a HP Microserver Gen 8. The HP box is also running at least 4 other (linux based) VMs at any given time (pfSense firewall with caching proxy, Open Media Vault nas, Logstash and Zabbix). There are other VMs running from time to time.

My dashboards are VERY responsive. There is no lag that I nor my family have noticed. Until your post, I had just assumed that dashing was very light on resources and hence it’s responsiveness. My brother also has a similar set up, and again he does not experience any lag. In fact, I have configured his dashboard for him over the internet many times, and the dashboard responsiveness has been very good even over the internet.

In the first instance, I would suggest monitoring the performance on both your Ubuntu box and the rPi, whilst you are using the dashboard. I would start using a simple top command and monitor CPU/memory (I’m assuming your disk storage is ok). I would then open shells and monitor logs on all the systems at the same time, and try to see visually if there is any lag in the events/messages getting through.

Also I haven’t tried openHAB on an rPi, but from what I’ve read it seems as if this can be sluggish unless you have the latest hardware. Could this itself be your bottleneck?

You could also check the responsiveness of dashing itself by sending curl commands from a shell, first from the Ubuntu system and then from the rPi (examples are on the dashing page under API). That will hopefully highlight if there are any performance issues on this aspect.

Hope the above gives you some ideas to start from.

My first test was also to use a raspberry pi.
What about using a docker container?

Which files are needed by dashing?

config.ru /dashboards /widgets

anything else?

I haven’t tried putting together a docker container, but don’t see any issues - should be relatively straight forward.

I suspect though that you will need all the dashing related files and folders and not just the few you’ve listed. Certainly assets, dashboards, jobs and lib are also required which more or less makes it all the dashing default install folders.

First, thank you for all your suggestions. I think the sluggishness was due to a combination of a few factors including: 1) I was running tail -f on the openhab logs on the rPi whilst I was testing. . i’m using a LG gPad 7, and frankly, its not that great performance wise, but was only $100 bucks; 3. I had recently replaced my wifi router (used as an AP) with a new one, and some how my main cisco sg-300 lost its role as root-bridge.

With some network clean up, it’s much better than before on the gPad and it quite responsive on my Tab S2. So i think i’m good for now.

As a complete aside, I took your Ohdimmer widget and created a new called Ohdimmer2 that uses a horizontal slide bar to set the lights. The left 40% is a switch for on/off and the right side is the slider. The code is probably terribly inefficient and not very elegant, but I’m not nor have ever been a programmer (two months ago, i’d never written a single line of html/css/ruby/jQuery and its been over 10 yrs since I was forced to a semester of Java in college). I would greatly appreciate any feedback to improve it / make it better, as I find it to be a useful feature.

https://drive.google.com/file/d/0B2wRI0BstQFtenk1cGZuRktjM2c/view?usp=sharing

in the items file, i created a simplified dimmer item for the lights used:

Dimmer office_light (gDashboard) { hue=“7;brightness;2” }
Dimmer livingRoom_light (gDashboard) { hue=“8;brightness;2” }

And these are the items in default.rb

  <div data-id="livingRoom_light" data-view="Ohdimmer2" data-title="Living Room Floor Lamp" data-device="livingRoom_light"></div>