HABPanel - Yet another implementation of a no-frills dashboard

Hi,
I just wanted to let you know about the web dashboard project I’ve been hacking for the last few weeks, it began as a private project but I’ve decided to share it anyway in case others would be interested.
I know it’s similar to the quite popular Dashing-based project, I tried it and I think it’s very nice, and I don’t see it as “competition” because my needs were different… I wanted the last possible maintenance on the server side, so I put my modest AngularJS skills to use to find out if a 100% client solution would be achievable.

The GitHub repo is here: https://github.com/ghys/habpanel

As the readme says, just clone it into your OpenHAB static files directory, navigate to http://your_openhab_server:8080/static/habpanel/ and start designing your dashboards directly on the target device.

The choice of widgets is a bit limited, but it serves my own needs already, and developing new widgets should be relatively straightforward… I want to be open on this and would gladly accept any feedback or contributions, since I don’t know yet how far I want to take it.

Here are some screenshots of possible end results:

Cheers!

29 Likes

Installed it, worked right out of the box.

I found two small issues though:

  1. It’s very hard to change the size of the widgets with the small chevron. It works randomly with the stock Android browser and didn’t work at all with Android Chrome browser

  2. Transformations maps are not taken into consideration, f.e. I transform the season name from the astro binding via map into german language, but it is still shown in english language.

Keep up the good work!

Thanks for trying it out!

  1. it’s frustrating right? :slight_smile:
    It’s definitely working with Chrome on Android but you have to be super accurate. It works better when the widget isn’t on the last column of the grid. I’ll see what I can do, maybe simply making it bigger will do the trick.
    I have to admit I designed the bulk of my dashboards on the PC, retrieved the configuration object (with the dark gray link on the main menu in Edit mode), sent myself an email, and restored it on the tablet :wink:

  2. Yep, I wasn’t familiar with these transform services but I reproduced the issue. Unfortunately, that’s because they alter the display names of the items rather than the actual value (state), which aren’t exposed by the ``/rest/items```` API endpoint. As a workaround, there’s the non-ideal option of using another item and setting its value to the translated term via a rule, like this:

String Season_Name      "Jahreszeit [MAP(season.map):%s]"        {astro="planet=sun, type=season, property=name"}
String Season_Name_Ger
rule "Translate season"
  when
    Item Season_Name received update
  then
    var String jahreszeit = transform("MAP", "season.map", Season_Name.state.toString)
    sendCommand(Season_Name_Ger, jahreszeit)
end

Hi Yannick,

Really great work!
I directly tried it out and I like it a lot - although I can confirm that it isn’t yet compatible with openHAB 2.

If you plan to further maintain it and keep it open source, I would love to see it becoming the official dashboard app for openHAB 2 :slight_smile:

A few comments to show you what would be the benefit of directly targetting openHAB 2:

100% client-side application, put it inside your OpenHAB web installation as static files

In openHAB 2, tt is easy to package it as a feature, so that it can be installed by a button press by the users (and shipped as part of the standard distro).

Uses the REST API and receives item updates via Websockets or long polling (unfortunately, this is not working reliably yet);

openHAB 2 has replaced this by SSE which works very reliable (and the Paper UI uses this with AngularJS already successfully).

Dashboards are stored in the browser local storage, meaning they can be customized per device (a better way to backup and reuse configurations is definitely needed though);

I agree, there should be a way to save this information on the server side. And this is exactly the idea of the “new sitemap concept” - to have a JSON structure that can be edited in the client app and persisted on the server through the REST API and which defines the widgets and their data bindings. I think your dashboard app is the perfect candidate for this as it exactly resembles what I had in mind for the new sitemaps. It would be cool, if you could have a look at these ideas and join (and reactivate) the discussion there.

My idea there was also to create a default structure based on the available “Things”, which could be some initial content for the dashboard and a starting point for the customization by the user - so that people do not have to start with an empty screen. But this is probably a feature that could come later…

Let me know what you think!

Cheers,
Kai

Hi Kai,

Really glad you like it, let alone be considered for inclusion of the official distribution :slight_smile:

I know it might seem a little short-sighted to target openHAB 1.8 instead of the latest and greatest, but as stated before, it started as a personal pet project for my modest needs from an angular-gridster example, then iterated organically from there… and as a happy user of stable 1.8 .deb packages, quite frankly I didn’t find the courage to give openHAB 2.0 a try until now :flushed: But I guess it’s time! :slight_smile:

I did read up the docs however and watched a couple videos, and I really like the architecture of pluggable user interfaces - I agree it’s going to be a good fit for this project. I also have to get up to speed on the SSE details, but it seems it’s going to be a breeze afterwards.

As for sitemaps, while I think it’s a good thing to have a simple common denominator for all clients (I like the idea of designing once and having them available everywhere from the web to my phone to my Pebble watch), I chose to bypass them in this case because it allowed greater flexibility - but having the ability to persist them from the client to the server with a flexible JSON-based model and a simple REST API would be a game changer. The proposals on the Eclipse SmartHome thread seem to go in the right direction, though I still have to wrap my head around the whole thing. Your idea to pre-populate dashboards with bindings already in place and design only the layout and presentation in the browser is also interesting.

I’ll try to find some time soon to have a openHAB 2 installation working, then start an OH2 branch and package it as a feature - in any case I’m going to push updates more regularly to the GitHub repo.

Thanks a lot for your feedback!

I’ve just started with OpenHab and this looks like an AWESOME dashboard. Unfortunately I’ve jumped on the bandwagon with OpenHab2. I look forward to the day you update this to accommodate OH2.

I’m considering downgrading to OH1.8 to setup up my on my iPad2.

A quick question in the meantime. I’ve tried running HABPanel fullscreen on the iPad by saving it to home screen. Are you able to implement the web code to run fullscreen on an iPad?

Apparently Safari on iOS doesn’t support the fullscreen API: http://caniuse.com/#feat=fullscreen

However I just found this: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html and added the <meta name="apple-mobile-web-app-capable" content="yes"> tag to the main html file - let me know if it works :slight_smile:

Perfect. Worked like a charm.

Now the only thing would be OH2 compatibility :slight_smile: just kidding. It’s great work and much easier to install for the end user than some other panel layout UI. Keep up the good work.

Turns out I’m now running openHAB 2, this was way easier than I expected :slight_smile:

The REST API is almost compatible with OH1, I made a small fix (you can pull it right now) so it’s compatible with both versions, and also dropped Atmosphere and server push updates altogether until I figure out SSE and a better solution for OH1.

For now you still have to copy or clone the GitHub repo into your static files folder, which is conf/html in openHAB 2 (you should find a ‘Hello World!’ index.html file already in there).

Cheers!

1 Like

WOW. that was quick. I’ll try it out when I get home.

Great job! I install it and it runs very well. I like it and interested how it will go on …
BR

When i switch light on at HABPanel the classic sitemap didn’t recognize it - but switch the light on at the sidemap will shown immediately in HABPanel. How can i recognize changes in HABPanel on my sitemap(s)? Thanks.

Hey ysc
I don’t have many Things setup yet so I am unable to get to test it to the extent that others may.

I can confirm that on an OH2 setup running the most recent beta it works well! Yeah!

I’ve got some setting up to do.

Other than bring it fully up to speed with some of the suggestions that Kai made, what sort of additions are you or have you considered?

I love the simplicity in setup and config of HABpanel, but, I’m also attracted to the widgets and icon styles of the dashing adaptation by smar. Would be thinking of adding more widgets and options are time goes on?

It would probably be very easy to add font awesome icons to this.

Wow, seriously impressive work, well done.

I was up and running in minutes, one git clone to install and an intuitive interface to build the dashboards.

Pat yourself on the back… oh here, let me :clap: :clap: :clap:

Hi,
I’m not convinced by the approach of designing complex widgets with info from multiple items (showing extensive weather info, temperature with humidity, etc.), everyone will have their own ideas and it would be a mess to manage. I believe everything should be implemented with a limited set of simple widgets, like the sitemaps.

A color picker, up/down button for roller shutters and hyperlinks between dashboards will be added eventually though.
Icons are definitely a must too, I’m still reviewing how do do it and which icon sets to include; FontAwesome is a good candidate even if it’s a little “generic” and will be missing a lot of icons you might want in a smart home dashboard.

First of all, very impressive :slight_smile: Good Work.
I would like to show some graphs, for example last week RH%. Its quite simple with sitemap, is it possible with Habpanel?

This is outstanding!
Even better - it’s opensource! Are you using any kind of task runner like Gulp?
It would be beneficial for further contributing (I’m interested! :))

Keep up the great work.

First of all very impressive work - tried it with OH1.8.3 and worked out of the box.

Im looking forward to this project growing.
In my opinion it is just one thing OH is missing - i like the look of the OH2 Basic view, but nevertheless a easy to install, dedicated gui for tablet user is very much appreciated.

Found some things which arent optimized for my personal use like max width, but need to dable a little bit more with this project.

No idea, it the lights switches on or off it means openHAB received the command, so it’s probably not a HABpanel-related problem. I have had some problems with the hue binding in OH2 too, namely getting feedback from switches mapped to a color channel; I think there are a few open issues on GitHub about it already.

I planned on using bower and gulp from the beginning but no, right now it’s still in a “quick & dirty hack” shape :slight_smile:
Contributions are very much welcome!