Examples of HABPanel Solutions


That’s probably something you should have to expect, it depends on the aspect ratio and a lot of things. The column count of the grid is fixed but their size depends on the width of your screen.

Would you be so kind to share your .js file for that?

Thank you!

Any chance of making this customisable? I find that the widget widths are either too large or too small (depending on the screen I am using - possibly dpi dependent)?


@bwhouse Simple solution. Are you doing the same with the download list?

I want to transform a json-file with train times. I could make separate items i OH, but I dont have any other use for them than showing in Habpanel, so I would prefer a way to just call the webpage which returns a json-file and transform this directly in a template. Is this possible? Does @ysc know of a way to do this?

Those advanced scanarios require coding a controller so that’s not possible just using a template. To recap, the only methods available in templates, apart from the standard arithmetic, string manipulation, filters (+ sprintf) are:

  • itemValue(name) - gets the value (state) of an item
  • sendCmd(name,value) - sets an item to the specified value
  • itemsInGroup(groupname) - gets an array of items in the specified group (useful for ng-repeat mostly)
  • itemsWithTag(tagname) gets an array of items with the specified tag.
1 Like

Maybe some day, had thought about this, for now the current number of columns is IMO the best compromise. But you’ll always have to design your dashboards with the target device in mind.

1 Like

Is it possible to use HABPanel to play a sound?
I am thinking about using text to speech to tell the user different things?

If you have a fairly recent snapshot of openHAB (i.e. including the following)

and the latest version of HABPanel then yes.

If the following Karaf command works:
openhab> audio play webaudio doorbell.mp3
you’re all set (assuming you have doorbell.mp3 in conf/sounds). How to use it in practice, I’ll let you discover by yourself. :slight_smile:

(As an alternative, HABPanel can use your browser’s text-to-speech engine configurable in the advanced settings. Choose a voice, point it to a String item, send some text via a rule and it should speak.)

1 Like

Thank you for the reply @ysc. I managed to transform the XML reply from the server in to an item in Openhab (using XSLT) as a string variable that contains this simple table:

<?xml version="1.0" encoding="UTF-8"?><h2>Togtider</h2><table border="1"><tr bgcolor="#9acd32"><th style="text-align:left">Bus</th><th style="text-align:left">Tid</th><th style="text-align:left">Real time</th><th style="text-align:left">Destination</th></tr><tr><td>Bus 81</td><td>22:17</td><td/><td>Odder Busterminal</td></tr><tr><td>Bus 100</td><td>22:20</td><td/><td>Odder Busterminal</td></tr><tr><td>Bus 100</td><td>22:24</td><td/><td>Hornslet rtb.</td></tr><tr><td>Bus 100</td><td>22:39</td><td/><td>Sønder Allé v. Aarhus Rutebilstation</td></tr><tr><td>Bus 81</td><td>22:46</td><td/><td>Viby Station (Aarhus)</td></tr><tr><td>Bus 100</td><td>22:50</td><td/><td>Odder Busterminal</td></tr><tr><td>Bus 100</td><td>23:20</td><td/><td>Odder Busterminal</td></tr><tr><td>Bus 302</td><td>23:25</td><td/><td>Beder Landevej/Byagervej (Aarhus)</td></tr><tr><td>Bus 100</td><td>23:39</td><td/><td>Sønder Allé v. Aarhus Rutebilstation</td></tr><tr><td>Bus 81</td><td>23:47</td><td/><td>Odder Busterminal</td></tr><tr><td>Bus 100</td><td>23:50</td><td/><td>Odder Busterminal</td></tr><tr><td>Bus 100</td><td>05:16</td><td/><td>Hornslet rtb.</td></tr><tr><td>Bus 100</td><td>05:36</td><td/><td>Hornslet rtb.</td></tr><tr><td>Bus 81</td><td>05:46</td><td/><td>Viby Station (Aarhus)</td></tr><tr><td>Bus 100</td><td>05:55</td><td/><td>Odder Busterminal</td></tr><tr><td>Bus 100</td><td>05:56</td><td/><td>Hornslet rtb.</td></tr><tr><td>Bus 302</td><td>06:06</td><td/><td>Beder Landevej/Byagervej (Aarhus)</td></tr><tr><td>Bus 100</td><td>06:10</td><td/><td>Odder Busterminal</td></tr><tr><td>Bus 100</td><td>06:11</td><td/><td>Hornslet rtb.</td></tr><tr><td>Bus 81</td><td>06:16</td><td/><td>Viby Station (Aarhus)</td></tr></table>

Can I in any way show this table as HTML instead of just as text in a template?

Hi guys, as the original poster it appears this topic is getting a little hijacked. It’d be great if we could keep it to the point and if you’d like to go into discussion with someone on how they achieved a certain layout or widget in HABPanel maybe you could start a new topic or message the person directly?



Would you mind sharing the details of the weather widget? I.e. your weather definition in the items file and how you implemented it into a widget (including the grey line! Presumably it’s HTML code in a custom widget?)

Edit: I’ve found some insight into how this may be done as explain by @yscTemplate widget - tutorial & examples - make your own widget!

it looks good

Hi :slight_smile:
how does Download Today and yesterday work ? what are you using ?

Here is Mine after a couple of hours playing with HABPanel


That’s very cool :slight_smile: I’m hoping to set up some multi-room audio on my dashboard. How did you get the album art into a panel?

And any chance of posting your setup to get the weather looking so good?

Great work

Nice feature display @Basem_AlSaeed, congratulations!

Sorryfor the delay @HomeBoss, that’s not possible at the moment, because external HTML has to be sanitized first (with ngSanitize). It might be included eventually if deemed relevant, but in the meantime you should try converting your HTML table to a JSON object (perhaps through a JS transform), if you manage to do then that it’s fairly easy to use ngRepeat and friends to render it in a template.

@UglyKidJoe thanks for your comment :slight_smile: in fact the weather template is not my work :slight_smile: I used a template shared here

and for the album art, I modified Kodi Web interface and called it in an IFrame from habpanel


First a big thanks to the originator(s) of Habpanel, it takes Openhab to a different level. My first attempt is here.

I have three cameras, one from Trendnet, and ones running on a Raspberry Pi and ESP8266. All display real time images in a custom widget. If you click the image you go to the full image in a different dashboard. Click the full image and you return to the home dashboard.

The custom widget couldn’t be simpler!

<a href="/habpanel/index.html#/view/Garden Camera"><img src ="" height="200" width="300" ></img></a>

The Office and Lounge sensors are currently being built but along with the Hall, are all ESP8266/Sonoff based.

The buttons at the bottom left are for testing Raspberry Pi GPIO input/outputs.


How did you make your cameras clickable to open a new page in full screen.
Love that the Local weather wiget. Like to do the same on mine.

Sorry, by “full image” I ment “full sized image” as in the native resolution of the camera rather than the small image on the main dashboard. It is still displayed in a normal dashboard.