Examples of HABPanel Solutions

Yes using the CalDAV binding
Got it working with ICloud you can read here [SOLVED] Apple icloud CalDav connection
I used a modified CSS from the awesome work of @pmpkk Custom Theme in HabPanel 2.1 Example
I will share via a widget but I have found experience varies - if there is no place on an event the binding crashes everything and the sitemaps wont load which is a real shame
Heres the custom widget page any more info please let me know
Custom Widget: Up Next Calendar

@nibi79

Thank you for this code, looks awesome on my computer. Problem is now that it doesn’t scale to phone size. How might I allow it to do this? Also, can you explain what should be changed to match my items, ive pakyed a bit, but cant figure it out, i have no knowledge of html…for example, the “name” i assume is the name of the thing. “Item” i assume is the name of the item itself. I coukd be wring in my assumption, as i have entered my own stuff in those areas, but cannot get it to work.

Also, this would be awesome if it were responsive. Do you know how, and can you help? Id like to use your example as its exactly the dashboard i want to use.

Is there a way to set the button position to be constrained to the template widget its on? That way when it gets resized on a different screen size, it stays where its meant to be. Im trying this on the mobile experimental option, but the button is constrained to the screen, not the template widget.

Maybe use percentage instead of pixels for top and left i.e. left: 17.3% etc.? Just an idea, I haven’t really tested it.

thank you for that, it worked…how do i change the icon color in nibi79s widget

Ciao, mi spiegate come fare?

English only please.

1 Like

Hello, I hope to make me understand …
You can tell me how to do it

Hello Omar,

welcome to this forum.
It is not clear what you want to know.

If you are looking for basic HABPanel instructions, take a look here:

http://docs.openhab.org/addons/uis/habpanel/readme.html

If you don’t speak English, just feed it through https://translate.google.com, a lot of us don’t speak native English :+1:

PeterJ,

Regarding your actual Nest Protect Icon, where are you grabbing the icon/image file from on your server?

I see the following lines that are pertinent:

<div ng-init="ServerPath='/static'; IconSet='nest'"></div>
<td rowspan="4" style="padding: 0px; padding-top: 0px; padding-bottom: 0px"><img id="nest-icon" height="80" width="80" src="{{ServerPath}}/images/{{IconSet}}/nest-protect-glow-blue.png"/></td>

I tried to just modify the second line there to the following:

<td rowspan="4" style="padding: 0px; padding-top: 0px; padding-bottom: 0px"><img id="nest-icon" height="80" width="80" src="/etc/openhab2/icons/classic/nest_protect_32.png"/></td>

I have couple .png files I made of a nest protect, one is 80x80 and the other is 32x32. I tried forcing the widget to use them, but am unable.

The icons are stored in /etc/openhab2/html/images/nest/. The /static/ directory maps to /etc/openhab2/html/ directory on the filesystem.

1 Like

Thank you so much. That did it!!!

Marcel, thanks a lot for jumping in here, I only returned to the forum today to answer the question, to find you already did.

1 Like

Hey guys love seeing all your panel layouts. I have a couple questions and I am very new so please stick with me.

I have a Panel Developed but can’t seem to get the Weather to integrate into the panel.

I’d also like to see a interactive list of sensors (Doors and Windows) any thoughts on that as to who to show it?

The other question is to display Pandora Music info any thoughts on showing this on the screen?

Thanks Guys!

What problem are you having with the weather?

Cant seem to get it to display anything. Just a empty box.

Can you post your code?

HTTP Code

My Weather {{itemValue('ObservationTime0') | date:'short'}}
{{'%.1f' | sprintf:itemValue('Temperature_F')}} °F
Humidity: {{itemValue('Humidity')}} %
Pressure: {{'%.0f' | sprintf:itemValue('Pressure') / 1000}} MPa

Today {{itemValue('ObservationTime1') | date:'EEEE'}} {{itemValue('ObservationTime2') | date:'EEEE'}}

{{itemValue('Condition0')}}

{{itemValue('Condition1')}}

{{itemValue('Condition2')}}

Max {{'%.0f' | sprintf:itemValue('Temp_Max0_F')}} °F {{'%.0f' | sprintf:itemValue('Temp_Max1_F')}} °F {{'%.0f' | sprintf:itemValue('Temp_Max2_F')}} °F
Min {{'%.0f' | sprintf:itemValue('Temp_Min0_F')}} °F {{'%.0f' | sprintf:itemValue('Temp_Min1_F')}} °F {{'%.0f' | sprintf:itemValue('Temp_Min2_F')}} °F

Weather Service .ctg

The apikey for the different weather providers, at least one must be specified

Note: Hamweather requires two apikeys: client_id=apikey, client_secret=apikey2

#apikey.ForecastIo=
#apikey.OpenWeatherMap=
#apikey.WorldWeatherOnline=
#apikey.Wunderground=
#apikey.Hamweather=
#apikey2.Hamweather=
#apikey.Meteoblue=

location configuration, you can specify multiple locations

location..name=Albuquerque
location..woeid=12794959
location..provider=Yahoo
location..language=en
location..updateInterval=10
location..units=us

#location..name=
#location..latitude= (not required for Yahoo provider)
#location..longitude= (not required for Yahoo provider)
#location..woeid= (required for Yahoo provider)
#location..provider=
#location..language=
#location..updateInterval=
#location..units=