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?
Hi Bob,
I’m trying to do something similar but can’t for the life of me get rid of the title bars at the top of an embedded panel. Are all your singe stats individual or an entire dashboard shared?
Thanks
For further clarification, this is the bar I am trying to remove:
Hi there!
That took me some time, too! I have the single panels embedded. The trick is to delete the text in the title bar settings. Then it will disappear. As soon as you name the panel, the bar will show. There is no hide title button unfortunately…
Thanks! Something so simple… and I couldn’t find one bit of information online regarding that.
1 Like
Hi there.
I love the matrix theme and use it normaly.
But my wife consents an iPad as panel in the kitchen. So I needed a not so technical view.
I’m not good in CSS, much better in Photoshop.
So I made some jpegs that I use as switch areas in one widget.
I’m using modal poputs to have only one page without navigation.
6 Likes
How do you get those singlestats without borders?
I tried using image widgets and they looking nothing like yours!
I love your setup, looks great
2 Likes
Hi waspie,
in the Habpanel frame settings go to advanced and check “fill to edges” and “hide title”.
I hope that’s what they’re called, I have the German version here.
All of the 3x2 stat panels are actually one grafana panel - I used the option embed to get the link.
Also, leave the title text blank in the grafana panel settings.
You have to use the frame widget, not the image widget. Don’t set an refresh interval in the habpanel widget, but add &refresh=10s (or whatever refresh rate you want) to your embed URL.
Does this help you? If not, I’ll try to give you some Screenshots once I’m home!
All the best,
Bob
1 Like
Thank you Bob. I will try it out soon and report back.
1 Like
I have invested some time in my “SmartHome” project over the last few months. And here is the (visible) result.
The title bars are so thick because they are used as buttons for the corresponding page links.
I would like to take the opportunity to thank all programmers (Openhab with the many add-ons and “Vier_Bier” for the ingenious Habpanelviewer). And of course to all those who took the time to write tutorials and answer all the annoying questions of the newbies - which helped me enormously! 
8 Likes
This seems offline
Hello BobMiles, looks great! I have a short question, too: how did you set up Graphana to get the „ON/OFF“-Buttons displayed? Thanks!
Hi Sebastian,
Thank you! It is actually just a 0 or 1 value that is stored and I use the grafana value mapping function to show a string “OFF” or “ON” instead.
You can either override all stat panels or do an individual override on the override settings tab.
Hope that helps a bit!
Hello!
I’m trying to create a widget where i can regulate a number item via popup slider…
in the past weeks i have tried several approaches (approach: find something similiar already done and try to adapt…), this is what i got:
<style>
.slider-presets-wrap-adjust {
margin: -10px -10px 0px -10px;
}
.custom-modal-container {
background: rgba(0, 0, 0, 0.75);
opacity: 0;
color: white;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
transition: opacity 0.5s, visibility 0s linear 0.5s;
z-index: 99999;
}
.custom-modal-container.active {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.custom-modal {
position: absolute;
top: 50%;
left: 50%;
padding: 0em;
border-radius: 0.5em;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.custom-modal.close-modal-area {
width: 100%;
height: 100%;
}
.custom-modal.custom-modal-box {
background: #424242;
text-align: center;
}
.custom-modal-content .custom-modal {
width: 100%;
max-width: 600px;
}
.toggle-modal-button {
background-color: transparent;
color: white;
display: inline-block;
padding: 1em;
cursor: pointer;
border-radius: 0.5em;
box-shadow: inset 0 0 1px white;
}
.toggle-modal-button:hover, .toggle-modal-button:focus,
.toggle-modal-button:active {
background-color: rgba(0, 0, 0, 0.25);
box-shadow: none;
}
.custom-modal-content .toggle-modal-button {
color: rgba(255, 255, 255, 0.75);
margin-bottom: 1em;
}
.custom-modal-content {
color: peru;
width: 100%;
max-width: 600px;
padding-top: 0em;
margin: 0;
}
</style>
<section class="custom-modal-container" ng-class="{ active: show_modal }">
<div for="toggler" class="custom-modal close-modal-area" ng-click="show_modal=false"></div>
<div class="custom-modal custom-modal-box" style="width:90%">
<div ng-class="(ngModel.dontwrap) ? '' : 'slider-presets-wrap-adjust'" ng-init="sliderModel = { item: config.item, floor: config.floor, ceil: config.ceil, step: config.step, unit: config.unit }">
<widget-slider ng-model="sliderModel"></widget-slider>
</div>
</div>
</section>
<section class="custom-modal-content">
<button class="btn" style="width: 100%; height: 100%; background: inherit; padding: 0; outline: none;" ng-click="show_modal=true">
<div class="icon backdrop" ng-class="{backdrop: backdrop, center: center, inline: inline}" style="width: 100%; height: 100%; margin: auto auto auto -10px;"></div>
<div class="switch-content">
<div class="value" ng-class="{backdrop: backdrop, center: center, inline: inline}">
<div><span style="color: white">{{ngModel.name}}: {{itemValue(config.item)}} mins</span></div>
</div>
</div>
</button>
</section>
it seems to work but there’s only one problem… the slider area (normally invisible) blocks the buttons which are on the same position:
i can’t “click” on switch “1” on this area, areas from switches “2” and “3” are not affected…
visibility on this area (span.rz-bar-wrapper) is “visible”. if i change visibility to “hidden” the switch is clickable “everywhere” but the when i open the slider the blue bar isn’t blue anymore 
is there a way to fix this problem?
nobody? 
Hello.
I have made HABPanel interface for NSPanel Pro which I’ll be using as primary wall-mounted controller. Here are the screenshots of my interface, in case somebody needs an idea.
Navigation is done via top menu (buttons around panel name for 4 control panels - one still unfinished) and informational footer (click on date brings up calendar panel - orange squares are just family and wife’s name edited out - click on outside temperature brings up weather panel and click on time brings up analog clock with mode selection (day/night mode).
Best regards,
Davor
6 Likes
Wow, can you share the CSS?
Thanks
Hello!
Of course, you can find CSS in the attachment. Just to mention that, besides custom CSS there are some custom widgets made by myself (analog clock with onClick, calendar widget and footer), and some custom custom widgets (custom widgets from Widget gallery, customized further by myself - like weather and alarm panel).
orange-on-black.css (1.3 KB)
Best regards,
Davor
Well i love the fonts and background…
Nice work
1 Like