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
Fantastic!
Cool Davor! My NSPanel HABpanel interface much less sophisticated than yours, but I need to control only one room with it and not a whole house.
Do you able navigate through screens via swipe? Will it return to main screen after some seconds of inactivity? I didn‘t check yet, but NSPanel Pro has a proximity sensor which could be used to switsch the screen from clock/weather to light buttons once you aproach the screen. Did you try to implement that?
Hi Davor
Could you also explain how did you make the button navigation above and removed the borders? I’m newbie in HABPanel yet, sorry.
Hello!
I’m not using swipe to switch panels. I don’t think it works in HABPanel, since swipe is used to open default menu. Topmost row of buttons is used for navigation, as well as informational footer (clicking on date, time, temperature to open calendar, clock and weather). Also, HABPanel is being shown in kiosk mode, so, menu and header are hidden.
Every navigation button is item in OpenHAB and the default panel is the one that only controls corridor’s light switch, where panel is located. I’m using expire binding to switch to that default panel after 5 minuts of inactivity.
NSPanel is set to turn screen off after 1 minute (it’s located near the bedroom, and I don’t want panel light to disturb us when we sleep), so, I use proximity sensor to turn it back on. In my opinion, no use of displaying clock when nobody is near, if it will switch to default corridor light panel when you approach it.
Best regards,
Davor
Hello!
I’m using switch items in OpenHAB, connected to buttons in HABPanel. When item is changed to ON, rule changes the item that contains panel name - that item is set in HABPanel to trigger change of panel on name change, and panel name (that item’s value) is displayed as label (top row, middle).
I’m not sure about your second question. Do you mean grey squares behind HABPanel items? If that’s the case, it’s custom CSS that makes background transparent. You can find my CSS attached to one of earlier posts.
Best regards,
Davor
Ah, OK. So you don’t use Navigate action button in HABPanel. I was thinking of the same - making a rule in OH, which changes the dashboards based on button touch and then returns to home screen after expiration timer, as I didn’t find this feature in HABPanel.
I guess you use Bakarder app for this, right? I use adaptive brightness setting in Android for this, which works in principle. I have my panel also near bed, so when it’s dark it is on minimum brightness and I still can see the clock, but it doesn’t disturb us. My idea is to get a big clock/weather shown all the time, visible from big distance, and automatic screen change to light switch when approaching. Not sure yet how to implement this.
Hello!
Yes, I’m using sideloaded BlackAdder’s application for this. Maybe you could try sideloading Tasker (it has a proximity sensor trigger) and then use HTTP request action to switch appropriate item to ON when proximity triggers. This is off the top of my head solution - I haven’t tried it myself, nor I have tried (yet) to sideload Tasker to NSPanel Pro.
Best regards,
Davor
Can the Nest products be used “standalone” without google? Or do you have to interface through their cloud (or at least have them google connected to “keep them alive”)?
I want keep my Habpanel setup also with the upgraded OH4 setup. However the code to send a value back to openHAB does not seem to work anymore - I suspect the UoM feature. Did anybody did a fix? The code sniplet shows the part of my widget, where I send a decreased value back by a buttons press:
<button class="btn btn-default"
ng-click="sendCmd(config.item, +itemValue(config.item)-0.5">
<i style="font-size: 1.5em" class="glyphicon glyphicon-arrow-down"></i>
</button>
it worked well in OH3, but with OH4 I do not get any reaction (no error, nothing…)
Hi, can you share link to code repository. I love the look and feel and would love to implement something similar.