Hi,
this is my habpanel, based on matrix-theme. Just one site with modal-popups
19 Likes
Hi,
can you share your widget 
i Like it.
Nice! I’m always struggling with keeping it simple for ease of use. Looks like you’ve got it figured out heh, I might just have to rethink mine now 
Nice Hendrick - how do you do the pop up? Need a simple way to add a Volume control pop up to an existing remote
1 Like
Agree, the Pop up stuff is fantastic and volume control is great! also to make charts bigger perhaps?
nice that you like it! 
I try to post den code in the next weeks, much work to do
2 Likes
My result so far. Based on custom widgets.
Lots to add and to optimize but so far so good!
Now working on modals for the weather widget, where you can press the icon for extended forecast or current conditions.
Thanks to all the super info here in the community
2 Likes
Looks great, mind sharing your code for the custom widgets ?
1 Like
No problem, of course I’m ok to share everything
1 Like
How can I add the CSS in the code? or do I need to post that separately?
I’m including them …so when I save the widget, it’s not included…
sorry…maybe a stupid question…sorry for that
You can post it like this guy
1 Like
Here are the files…
There is still much overlapping code in the CSS files.
But I need(ed) to keep it separated to not to destroy the other ones…
Anyway…here they are!
darksky.css (1.3 KB) livingroom.css (1.1 KB) trash.css (1.1 KB) Trash 0.1.widget.json (4.4 KB) GroundFloorLightControl-01.widget.json (5.7 KB) Darksky.widget.json (4.7 KB)
in addition:
- The weather widget is based on the Darksky Binding, seems to be the most accurate
- The Light Control widget is using a simple scaling for the icons of the dimmer lamps (0…100% divided in 10 chunks)
- The Trash widget is using 3 different icons, based on what is in the calendar, it uses the correct color of the icon. Here we have 3 different pickups (green bin is garden, vedgetables and fruit…Blue is for paper…orange is for the rest)
3 Likes
OK, thanks, one last questions, where did you get the nice lamp and the trash icons ?
The lamp icons are from Fibaro, free to use
The trash icon(s) are just flat icons from the web, free to use
can’t upload a zip/ rar file, but I can mail them to you if you want
2 Likes
That is very good looking.
Can you add the raw code to the marketplace thread? I’ve got a small number of (ugly) widgets there but it makes it so simple for others to use.
Where is that? 
That looks amazing.
I am also very interested to see your code.
Sorry, missed this:
https://community.openhab.org/c/apps-services/habpanel is a goo start.
Simply copy / paste your widget with accompanying screen shot.
If you tag it with widgetgallery and customwidget it will appear in the widget gallery which others can browse.
The gallery has become a bit stale of late yet there are so many custom widgets out there.
1 Like
Very impressive work KidSquid!
Updated my panel with dynamic SVG icons instead of ng-if statements for e.g. dimmer lights and blinds control.
Also added a new widget for my Opentherm Gateway (OTGW+ESP12F) and OpenthermGateway binding (binding is under development but works great!)
For the rest, I’m rewriting the code with CSS-grids instead of tables…Like grids a bit more since tables can sometimes act weird when you need nested tables…
Result so far:
/Jasper
4 Likes