Examples of HABPanel Solutions

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?

5 Likes

Outstanding!

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

10 Likes

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

2 Likes

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 ="http://192.168.1.92:8081/image" 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.

3 Likes

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.

would you share your json?

1 Like

Good day to you sir, i’m new to openhab2 and i’m trying to create a chart in habpanel but whenever i try to create and run the chart, my chart doesnt work. I have tried to research about creating chart in habpanel by linking it to my sensor but it seems i cannot find any info about it and lastly i was wondering where do you put the codes in?

Please help me, thanks

Not finish but this is what i got so far …

http://imgur.com/5Fa7AZp

Sorry it’s in french

4 Likes

You have an internet connected bin?!

1 Like