Dashboard UI suitable for tablets

I haven’t yet tried with openHAB 2, but if the rest endpoints are the same, it should work. If you do try it out, please let us know how you get on.

@smar I am unable to get make the dashing autostart :frowning: I have followed the service file that comes with your github without success… I am running this on a raspberry pi 2.
Also, thanks for your great work with this project!

I created a simple two-way switch as I have a light I use two settings for - dim & bright:

Anyone interest can download the widget here - https://drive.google.com/open?id=0Bwfvf57HSA1oS2hKeE5SYlFYY3M

Hi @smar,
congratulation for your work!
Since the new version of the weather binding cannot be used anymore to get the status of other items I have to start from scratch with a new panel interface :sweat: . I downloaded your project and I was able to make it successfully running.
I’m just trying to understand how weather icons work. The weather icon info is got from the openhab items using the weather code (or id) and the job openhab.rb store the value in icon ; the weather widget data-bind is set to climacon[icon]. The climaicon is defined in ohweather.scss making an array of climaicon fonts; but the icon code from Yahoo Weather is a number from 0 to 47, how the correct value can be retrieved? I don’t understand the full logic, could you help me?
Thank you.

@sebastian_strindlund I have not tried using a Raspberry Pi myself and so am not familiar with how it starts services. The startup script in my repo is for Ubuntu. As long as you have the dashboard working correctly, I would expect that getting the service to automatically start at boot up should be relatively straight forward, and suggest you look into how to define daemon services on the RP.

@mortommy Its been a while since I last looked at that part of the code, but if I recall, the appropriate climaicon character is selected based the weather code (Weather_Code item). This is set in the ohapp.rb ruby script. The Weather_Code is a string code and not numeric. E.g. my openHAB is showing the current Weather_Code as sunny. Any dashes ("-") or the word “day” in the Weather_Code is also stripped out.

The weather widget (Ohweather) coffeescript then maps the stripped weather code from above to the corresponding character code number.

There are more climaicons available in the font than are currently being used. These can be easily incorporated by adding the appropriate mapping in the coffeescript.

Hope that helps.

I absolutely love this interface. I don’t so much love needing to run a ruby daemon and add rules to push data from openHAB. I ended up ripping out all of the ruby code and using the new SSE functionality from openHAB 2.0 to push the updates directly to the client. Doing that allows me to serve the dashboard directly from openHAB. I don’t know if there’s much interest, but if anyone wants to check it out - you can see it here: https://github.com/beowulfe/openhab-dashboard/tree/oh2

Just run ‘mvn package’ to build the artifact, and drop it in your addons folder of an openHAB 2.0 install.

I only got the weather, switch, and heating widgets working so far, as that’s all I need. Moving other widgets over wouldn’t be hard though.


Thanks @beowulfe. I have actually just installed a skeleton OH2 on a test machine to look into using SSE. Your work will hopefully save me the effort :slightly_smiling:

I’ve just had a quick look at your code but haven’t had a chance to try out yet. Looking through it though, are the widgets (and also the html in the views folders) compiled in into the OH addon binary? If so, it might be better if we can keep the widgets outside of the binary so that they can be quickly modified by end users.

Yes, they’re compiled in. I build application.js at compile time instead of runtime - mostly because the only non-ruby sprockets implementations I found were node modules.

The HTML for the widgets could be kept separate, but if users need to edit the CSS/JS too, I see three paths forward:

  1. Move application.js out of the JAR, and users need to install node and compile it themselves.

  2. Create a Java implementation of Sprockets to build the file at runtime. I think this might not be that bad.

  3. Figure out if the node build can be executed in Nashorn instead.

@beowulfe Each of the three options sounds better than having them compiled into the jar, which many users will not be able to do. I’ll leave it in your capable hands as to which to go for (option 1 seems quickest but again more work for end users).

Do let me know if there’s anything I can help with. Once you have a solution, I will put a link to your repo in my Readme file for OH2 users.

can anyone give me some pointers how to implement a background image for a dashboard site.

I would like to have one page similar to the default page without a background image and the second page should have an image as backgroung.

ok got it had much trouble to know where to put the image-files

<div class="gridster" style="background-image: url("/assets/image.jpg")>

image needs to be in assets or assets/images folder

Cause of the fact, that Im using a 15inch tablet I was looking for a way to implement a floorplan:

work in progress:

Changes made to get it working. I cant stress enough, that I dont really know what Im doing - have no programming skills and knowledge.

change to max widget size (depends on the used grid see next point)
max_size_x: 6,

application.coffee :
change to get a grid for your resolution eg 1920x1080 in my case: 192 colums @ 10px width
Dashing.widget_margins ||= [0, 0]
Dashing.widget_base_dimensions ||= [10, 10]
Dashing.numColumns ||= 192

e.g. insert data-icon="lightbulb-o" @ Ohswitch in the .erb-file

changed background to transparent !important to get icon only in erb file leave text empty(or not)

I put the background image (of my floorplan) into:
<div class="gridster" style="background-image:url(/assets/erdge.png);background-repeat:no-repeat;background-position:40px 40px;background-attachment:scroll;">
- not sure if there is a more elegant way to do that

In google chrome / developer tools you can change the html data-row/col and try out the positioining of the items - update your .erb file (somehow I had to sort by rows ascendending - otherwise I would get some items in completly different places then specified.)

big thanks to smar and the OH community for the dashboard

open issues:

  • background image isnt fading in/out when changing pages (somehow in cycleDashboards.coffee) or change position of background into a own div?
  • change the floorplan page to block having draggable widgets - how to?
  • hopefully in the near future there will be some homeautomation icons @ fontawesome
  • any idea how to get other icons used in the widget? eg https://github.com/OpenAutomationProject/knx-uf-iconset
1 Like

Looks great! I haven’t really looked into the issues you raise so can’t really help. However, there is a lot of information on the net on dashing in general. You may find something there or in some of the other projects that you can adapt.

most important for me, is how to change the icons from fontawesome to images.

Great idea - I have set this up on a Raspberry Pi, Dashing + Openhab. It looks and works like a charm.

HOWEVER: The only issue I am having is that dashing is not updating anything. If I hit refresh in the browser, all the values are updated but otherwise not.

In the openhab console + frontend I can see that all the time values are updated, in Dashing in the console I don’t see them coming in / getting there. As I said, only if I hit refresh in the browser - there are new values/readings.

Where do I start looking / What went wrong - any ideas?

Check if the openhab rule is triggering. If not, check that the items you are forwarding to dashing are in the gDashboard group.

Before I start digging around and trying to find out how to make this work maybe someone here has already went down this road. I would like a single Widget for the thermostat that includes temp and setpoint. Is there a way for a single widget to access multiple devices. I’ve used dashing with smartthings and they have a widget already but the thermostat is a single device in smartthings. Here is the widget if anybody is curious. https://github.com/FlorianZ/hadashboard/pull/31/files

Have a look at the Ohheating widget. It does exactly that. However, it requires a rule to combine the data from the two items into a single json string, which is then sent to the dashboard. This rule is also in the dashboard.rules file.


I’ve got some trouble with Ohweather.

My wigdet doesn’t update value from Openhab.

Here is my configuration :


<li data-row="1" data-col="3" data-sizex="2" data-sizey="2">
  <div data-id="weather" data-view="Ohweather"></div>


require ‘json’

host_uri = ENV[“DASHING_URI”] || ‘http://localhost:3030

app = OHApp.new()

get ‘/openhab/dispatch’ do
app.getState(params[‘deviceId’], params)

post ‘/openhab/dispatch’ do
app.sendCommand(params[‘deviceId’], params[“command”],params)

SCHEDULER.every ‘5m’, :first_in => 0 do |job|

if app.currentConditions.length >0
send_event(‘weather’, {
now_temp: app.temperature,
humidity: app.humidity,
temp_low: app.temperatureLow,
temp_high: app.temperatureHigh,
precip: app.precipitation,
humidity: app.humidity,
icon: app.weatherIcon,
tomorrow_temp_low: app.tomorrowTemperatureLow,
tomorrow_temp_high: app.tomorrowTemperatureHigh,
tomorrow_icon: app.tomorrowWeatherIcon,
tomorrow_precip: app.tomorrowPrecipitation,
wind_speed: app.windSpeed,
wind_speed_gust: app.windGust,
wind_dir: app.windDirection})


Writing PID to tmp/pids/thin.pid
Thin web server (v1.6.2 codename Doc Brown)
Maximum connections set to 1024
Listening on, CTRL+C to stop
— !ruby/object:OHApp
temperature: 16
currentConditions: ''
humidity: 34
pressure: 0.0
precipitation: 0
windSpeed: 0
temperatureLow: 0.0
temperatureHigh: 0.0
weatherIcon: ''
weatherCode: ''
tomorrowTemperatureLow: 0.0
tomorrowTemperatureHigh: 0.0
tomorrowPrecipitation: 0
tomorrowWeatherIcon: ''
windGust: 0
windDirection: ''
sunset: - - [19/Mar/2016 17:03:15] “GET /events?lastEventId=&r=7277954920024854 HTTP/1.1” 200 - 44.8684 - - [19/Mar/2016 17:03:15] “GET /events?lastEventId=&r=1357259997864237 HTTP/1.1” 200 - 44.8338 - - [19/Mar/2016 17:03:15] “GET /events?lastEventId=&r=8759421512366101 HTTP/1.1” 200 - 44.8378 - - [19/Mar/2016 17:03:54] “GET /events?lastEventId=&r=8694336783915784 HTTP/1.1” 200 - 30.1782 - - [19/Mar/2016 17:03:54] “GET /events?lastEventId=&r=7625383899745213 HTTP/1.1” 200 - 30.1586

Any ideas ?

How have you defined your weather items in OH?