Examples of HABPanel Solutions

I use the “SystemInfo” Binding to collect most information. Then the “Pingable Network” binding to monitor some of the devices. The pulse of each binding I track by looking for changes for some of the items of each in simple rules.
The system log at the bottom is a custom made widget in combination with some python scripts und openhab rules. Quite a mess actually - I would like to clean this up some time.

Thanks a lot, that really does look great! I’ve got a much smaller tablet on the wall so I can’t quite fit that much on it, but that certainly helps as inspiration :wink:

I am using habPanel on my Ipad. When I tab on test button by voice supports in settings, it works and when string changes it reads the new value.
It works fine when I test it but the problem starts when the page refreshes. Voice stops reading the String and the only way to get it back is going to habpanel settings and clicking/tapping Test button.

I was wondering How can I activate the voice support by default?
Any ideas?

Hi @oklona, Your screen looks very nice.

Would you mind provide more details about it?

  • size
  • What screen is it exactly? Where can I get one :slight_smile:
  • Is it touch screen?
  • How did you integrate it into the glass?
  • What’s driving it? An rpi?

Hello @JimT. This screen is an Acer T232HL. I chose it because it fit the size of the other appliances most perfectly. I did run it using an rpi, but at a later stage, I chose to repurpose my old Mac Mini, that I hadn’t used for a few years. Using an SSD, and running OpenHAB on the Mac, performance was greatly improved over the rpi. I also have buttons on the screen for starting Chrome (since I use x86 software, it is “real” Chrome) and connect to streaming services. Streaming video was often an issue with rpi. I use a BT connection to speakers that are directly connected to Alexa :slight_smile:

The screen size is 23 inches, and it works perfectly with the built-in touch screen drivers in Raspbian and Ubuntu. The glass at the bottom is part of the actual screen, so I didn’t need to do much integration. I just mounted it on a standard Vesa monitor bracket for wall mount.

2 Likes

I was trying to use this modal, and it works fine, but a graph included in the modal takes forever to display. ~20 seconds. If I remove the ng-template ng-If=“itemValue(‘Object_Modal’)==‘ON’”, the modal is displayed when the page loads, and the included graph appears immediately.

The graph I’m using is from the widget, as shown here: New Pride Theme for HabPanel (Based on Matrix Theme) - Optimized for iPhone - #52 by crnjan

Are there some known issues with an ng-init / ng-model being contained inside a section controlled by by ng-If? Or the widget-chart? I tried to move the model init outside of the ng-If, and called it in the model as $parent.model, but that didn’t help…

(EDIT: fwiw, I moved items with a graph out of the ngIf, and am using them with ng-show/hide, instead. They stay in the flow of the page, so it works around the weird lag)

EDIT 2: I made some adjustments and moved to the modal, as defined in this link, and it works as expected.

Redesigned my Home Dashboard with the new Grafana 7.0. Really liking the way they allow Overrides and scaling on the Stat panel now!
Now if only the Stats could be linked to actions, that’d be great. I helped myself with a Selection Switch on the bottom right where I can trigger all the actions I need…

7 Likes

Can you show me the settings of the tempertaure and graph?

Of course!
What exactly do you want to know?
Here’s a screenshot:

i see you do this with series overrides, thank you :slight_smile:

Cool idea! Is it also possible to just open the modal panel on click without linking it to an openHab item?

how did you do the graph in the indoor temperature field, the lines are not connected when i do this, and i have no option for that

Hi,
what do you have for time group and fill in the query? I have the following setting:
mean()
time(1h)
fill(linear)
And for the panel link i have set: from=now/d&to=now/d
So the graph always fills up from left to right throughout the day.

fill(linear) was the setting i need.
thank you

I am following this topic for a while already now, and trying to set up my own habpanel also. Still a work in progress, but because i got a lot of inspiration from you guys i wanted to share mine also. For now i m working on the first page of my panel, and it’s starting to look like the way i wanted it to look. Suggestions or more ideas are still welcome :wink: Some values are not correct for the moment, because they are not implemented yet in the correct rules.

7 Likes

I figured it out myself and wanted to share the outcome with you:

The generic approach is as follows:
Html:

<div class="widget" ng-click="openModal('myFancyModal', false, 'lg')">
    <div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#processor"></use></svg></div>
    <div class="name">CPU Load (1min)</div>
    <div class="valueGroup"><div class="value">{{itemValue('CPU_Load1') | number:1}}%</div></div>			
</div>


<script type="text/ng-template" id="myFancyModal">
    <div class="modal-header">
        <a ng-click="$close()" class="pull-right btn btn-danger">X</a>
   </div>
       <!-- Your fancy iframe or whatever goes here-->
</script>

css (these are just my settings, feel free to adapt):

.modal-dialog {
  
  width: 80%;
  height: 80%;
  
  margin: 0 auto;
  margin-bottom: 1em;
  margin-top: 1em;
} 
.modal-content {
  color: peru;
  width: 100%;
  margin-top: 5em;
  height: 100%;
  background-color:#19201c;
  margin-bottom: 1em;
}     
.modal-backdrop{
  backdrop-filter: blur(1px);
  background-color: #3b4a53bb;
}
.modal-backdrop.in{
  opacity: 1 !important;
}
.custom-modal-container {
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
}```

I used it to open a grafana iframe graph on click of the respective object. If anyone is interested in the steps to do that let me know and I will post it
1 Like

hi,
i am searching now for a long time for a solution of my idea :wink:
I have some data where i do not need to interact with habpanel and for sure some standard stuff to controll (eg lights, rollershutter etc).
my idea would be to have a about 24" lcd with a intel stick or raspi just showing graphs, camera and other stuff for virtualization.
additionally i use a 10" tablet to control things.
basically i have tested this and all works as i expect but my problem is what i would like to get a good WAF :wink: and therefor it should just look awesome.
so anyone has an idea for a frame for the LCD to wallmount it e.g. that you do not see the monitor frame itself, just the display or something simliar?

i have found a good place in the kitchen where i could mount it to the side of the fridge but just mounting the lcd and the tablet beyond wouldnt look very nice :frowning:

maybe someone has a good idea how to make this happen :wink:

What about a magic-mirror, as long you don’t need touch functions.
https://blog.sebastianplattner.ch/tag/magicmirror/

Hi
Yes I am thinking already long time about this… As i cannot imagine another smooth solution I will start with this.
Got already a 22“ display, ikea frame, ordered controller and 4mm glass.
However i am still thinking of how to display… because i dont need a magic mirror app on raspi or similar, i just want to show my „special mirror“ habpanel.
I thought i could use an old firestick and show the panel in the browser… bit seems nobody did that so far but no clue which cons this would have? Then i would not need addirional power for raspi and less cables etc?
Additionally i want to power off and on the display with maybe a shelly via some trigger from the android tabletcamera - i think the firestick stays „always on“ when just switching off the display.
Any concerns or someone did something similar?

The graphics are grafana?