Hi guys,
I lately decided to share with community my UI using habpanel. I have been working on this since a year or so. Every now and then I introduce new features.
Short introduction of myself: I am .NET Developer and I have been professionally programming in AngularJS for 2 years in different projects, so that’s why for me it was pretty easy to built everything in the code. Widget is responsive on different phones etc.
How it’s built: I have one widget where I paste all the html from file stored on repository - it meant to be mobile view, however I am using it on the pc as well - it’s enough for me at this moment.
How it looks like:
View: Main:
UI features:
1. Notifications: At the top of the page we can see notifications, there are few kinds:
1.1 Events notifications from calendar for that particular day (We can see in Shortcuts section Calendar icon with red label “1” - that means there is one event for today)
1.2 Reminder based notifications: In Groups section we can see bell icon with number of reminders configured in the system. Every reminder has date set and if that date will be in less than 15 days it will show on top notifications bar. If days are less than 30 days the alert popup will be shown when accessing hab panel as follows:
1.2 Vacuum cleaner errors: when vacuum cleaner will have any error that is stuck it will be shown also on the top notification bar
2. Rooms: I have 3 rooms configured: LivingRoom, Bedroom and Office every room has icon and temperature, humidity displayed based on the sensors
When we click any room icon, popup with temperature/humidity history will be shown in the popup as follows:
3. Owners alias Presence: We can see me and my wife, if anybody is not in home the icon will have red top line above avatar picture. If we are in home we can see the green line:
4. Shortcuts: This is the heart of this UI in my opinion, especially for me it’s so important, especially the Admin Panel (every icon is clickable and opens new window in the popup)
4.1 Power: I could simply move that to Groups section, because it only displays the generic popup window as follows:
We can see G next to Lights so it’s also clickable because it’s group (everything is dynamic and configured based on backend, so I don’t have to change anything if something is removed or added)
4.2 Calendar: As I mentioned before the icon has possibility of having red label with number of events in a day. 7 days calendar is displayed with events/no events etc. It says which event is in progress etc. It’s based on my wife and my google calendar.So it’s really useful for me.
4.3 Weather: It also have possibility to have a label: either green or blue with number.(the number is related with temperature outside in °C. I am using openweatherapi of something like that. It displays 3 days.
4.4 Leds: It is a controller for setting up different colors etc for led strips.
4.5 Vacuum Cleaner: I added that yesterday, the UI is ready however the backend rules are not yet, but it would work like this: Automation can turn on/off automatic cleaning. Last Clean shows basically when last time vacuum cleaner was cleaning. So let’s say: today/1day ago/2days ago. Every: 3days is configurable using backend and it’s related with how often vacuum cleaner should be cleaning. So if last clean was 3 days ago and should clean every 3 days vacuum cleaner would start cleaning when no one is in home for longer than 15mins.
4.6 Admin Panel: That’s the big one.
4.6.1 Raspberry Pi: We can see CPU temp, RAM usage, disk usage, IP number, Zigbee stick status plugged in into RPI (online/offline). Number of days after last restart (22 dni temu - 22 days ago)
There is on action: Restart which restarts raspberry PI
We can click at Raspberry Pi title and graph with CPU Temp is shown:
4.6.2 Open HAB: same thing Number of days after last restart, number of days after last backup: 6dni temu - 6 days ago (every week backup is completed via shell script)
Two actions: Restart - restarts openhab instance, very useful, and backup - backup on demand
4.6.3 Speedtest - Network information updated every hour in work week etc. Download/upload/ping and one action to restart the network measurement
4.6.4 Links: I added that a month ago or so and have been using that almost every day. It contains links to different pages opened on new tab after click, configured via app.js file so doesn’t require changing the widget content itself. I could move that to items based configuration, but it’s not changing ever and it’s pretty fast and easy to change/add anything.
4.6.5 Automations: just generic popup window same as power, we can see all available automations, it’s configured in items with Switches so we can click and change anything. It was oryginally done, because my wife complained at some features and I had to open PC to change/disable that so it’s pretty easy right now to just disable anything. Sorry for the polish there.
4.6.6 Zigbee: Also generic popup with items inside (groups in this case)
5. Modes: Simple as that. When we are not in home Away Mode is set and if we go to sleep and press bedroom bed button sleep mode is activated and it’s turned off after 6AM. Leave Mode will be deleted soon - it was something before I had presence set.
6. Scenes: Basically small shortcut buttons for playing radio on speaker or opening wedding movie on TV or anything. Configured using items and rules so no coding involved if something is changed.
7. Groups: When clicking on the icon generic popup window is opened. Configured via items, so if we want to add UI for new devices/sensors we can just add it into items and assign them to group: gGroup and it will be shown automatically on UI with option to change switches and read values.
7.1 Plugs & Lights works the same - switches inside:
7.2 Presence & Security works the same: they only display values - there is no way to change presence of a person by clicking, it shows when last status change was done for every person, what’s the confidence and what devices are configured. Currently only our phones, it’s using via well-known monitor project. Security has information about motion detectors and door bell.
7.3 Reminders: Shows all configured reminders, configured via items, every item has set date, it’s set using UI:
I must broke some css styles for those buttons, however we can set date and press “Ustaw” which means “Set”.
Feel free to add any questions. Sorry for making it harder to understand because of polish language in some parts. If anyone will be interested I can record a walkthrough video of the whole UI and discuss how to set something similar. I am not there to make it usable to every user that was never a goal. However if there will be a possibility to help more people I will consider.
Thanks