Examples of HABPanel Solutions

Where is that? :blush:

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. :+1:

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

This is my start screen:

Also grafana for charts:

Very little english in the interface, sorry :slight_smile:

Some very cooler examples therefore. @JdeJong can you share / publish the widget you have for the the heating please? Itā€™s a great starting point for something Iā€™m trying to do.

C

1 Like

Hi,

Great interface, can you elaborate a little bit more on:

  1. How do you manage these errors/warnings that is on window 1 (Critical/Error/Warning)? What technique do you use? Care to share some code for the interface and the errors themselves?
  2. What sensor do you use for radiation monitoring on screen 2?

Here is my display at the exit for a quick overview.

It is a metal board which serves as magnetic pin board. In the middle is a tablet attached behind it.

Question: with the Dummy widgets you can indeed set the font size, but it is always displayed small, someone has a solution to it?

Sure thing! Will do so @CDriver

1 Like

OTGW-widget files
OTGW-Control.widget.json (5.8 KB) otgw.css (5.1 KB)

The items for OTGW:

Group OTGW_ITEMS "All OTGW Related Items"
Number:Temperature otgw_RoomTemp "Current room temperature: [%.1f %unit%]"  (OTGW_ITEMS)    {channel="openthermgateway:otgw:OTGW:roomtemp" }
Number:Temperature otgw_RoomSetpoint "Room setpoint: [%.1f %unit%]" (OTGW_ITEMS)    {channel="openthermgateway:otgw:OTGW:roomsetpoint"}
Number:Temperature otgw_RoomSetpointOverride "Room setpoint override: [%.1f]" (OTGW_ITEMS) {channel="openthermgateway:otgw:OTGW:temperaturetemporary"}
Number:Temperature otgw_RoomConstOverride "Room contstant override: [%.1f]" (OTGW_ITEMS)   {channel="openthermgateway:otgw:OTGW:temperatureconstant"}
Number:Temperature otgw_ControlSetpoint  "Control setpoint: [%.1f %unit%]" (OTGW_ITEMS)       {channel="openthermgateway:otgw:OTGW:controlsetpoint"}
Number:Temperature otgw_DomesticHotWaterTemp "Domestic Hot Water temp: [%.1f %unit%]" (OTGW_ITEMS)  {channel="openthermgateway:otgw:OTGW:dhwtemp"}
Number:Temperature otgw_DomesticHotWaterSetpoint "Domestic Hot Water setpoint: [%.1f %unit%]" (OTGW_ITEMS)    {channel="openthermgateway:otgw:OTGW:tdhwset"}  
Number:Temperature otgw_DomesticHotWaterSetpointOverride "Domestic Hot Water setpoint override: [%.1f %unit%]" (OTGW_ITEMS)    {channel="openthermgateway:otgw:OTGW:overridedhwsetpoint"}
Number:Temperature otgw_BoilerWaterTemp "Boiler Water temp: [%.1f %unit%]" (OTGW_ITEMS) {channel="openthermgateway:otgw:OTGW:flowtemp"}
Number:Temperature otgw_ReturnWaterTemp "Return Water temp: [%.1f %unit%]" (OTGW_ITEMS){channel="openthermgateway:otgw:OTGW:returntemp"}
Number:Temperature otgw_OutsideTemp "Outside temp: [%.1f %unit%]" (OTGW_ITEMS)     {channel="openthermgateway:otgw:OTGW:outsidetemp"} // NOT IN USE BY HOME SETUP
Number:Pressure otgw_CentHeatingPressure "Central Heating Pressure: [%.1f %unit%]" (OTGW_ITEMS) {channel="openthermgateway:otgw:OTGW:waterpressure"} // NOT IN USE BY HOME SETUP
Switch otgw_CentHeatingEnabled "Central Heating Enabled: " {channel="openthermgateway:otgw:OTGW:ch_enable"}
Switch otgw_CentHeatingActive  "Central Heating Active: " {channel="openthermgateway:otgw:OTGW:ch_mode"}
Switch otgw_DomesticHotWaterEnabled "Domestic Hot Water Enabled: " {channel="openthermgateway:otgw:OTGW:dhw_enable"}
Switch otgw_DomesticHotWaterActive "Domestic Hot Water Active: " {channel="openthermgateway:otgw:OTGW:dhw_mode"}
Switch otgw_BurnerActive "Burner Active: "   {channel="openthermgateway:otgw:OTGW:flame"}
Number otgw_RelativeModLevel "Relative Modulation level: "    {channel="openthermgateway:otgw:OTGW:modulevel"} // NOT IN USE BY HOME SETUP
Number otgw_RelativeModLevelMax "MAX Relative Modulation level: "{channel="openthermgateway:otgw:OTGW:maxrelmdulevel"} //NOT IN USE BY HOME SETUP
String otgw_SendCommand "Send OTGW_Command: " {channel="openthermgateway:otgw:OTGW:sendcommand"}

//Below are items for the heating AUTOMATION!

Number otgw_auto_target "Override for automation [%.1f]" (OTGW_AUTO_ITEMS) {channel="openthermgateway:otgw:OTGW:temperatureconstant"}
String otgw_Heating_Mode "Current heating mode [%s]" //String type for setting / reading the current "rule"
Number otgw_PresetTempNormal "Heating preset (Normal Mode) [%.1f]" //Temp for normal mode
Switch otgw_UpdateHeaters "Send Target Temperatures to Heaters"

//helper for setting room temperature by Habpanel
Number:Temperature otgw_habPanel_Temp "HabPanel temperature [%.1f]"

//Wall plug switches for floor heating pumps
Switch otgw_floorHeatingPump1 {channel="zwave:device:3d4427ff:node23:switch_binary"}
Switch otgw_floorHeatingPump2 {channel="zwave:device:3d4427ff:node22:switch_binary"}

//Floor heating Electronical Meters

Number otgw_floorHeatingPump2_Volts {channel="zwave:device:3d4427ff:node22:meter_voltage"}
Number otgw_floorHeatingPump2_Amps {channel="zwave:device:3d4427ff:node22:meter_current"}
Number otgw_floorHeatingPump2_kWh {channel="zwave:device:3d4427ff:node22:meter_kwh"}
Number otgw_floorHeatingPump2_Watts {channel="zwave:device:3d4427ff:node22:meter_watts"}

Number otgw_floorHeatingPump1_Volts {channel="zwave:device:3d4427ff:node23:meter_voltage"}
Number otgw_floorHeatingPump1_Amps {channel="zwave:device:3d4427ff:node23:meter_current"}
Number otgw_floorHeatingPump1_kWh {channel="zwave:device:3d4427ff:node23:meter_kwh"}
Number otgw_floorHeatingPump1_Watts {channel="zwave:device:3d4427ff:node23:meter_watts"}

@CDriver
let me know in case you have questions ā€¦
/Jasper

  1. It is icinga2 web frame from the monitoring system. It works very well and monitors over 200 MQTT values + other normal IT things. It should be part of every DIY home automation system as you do not need to build logic. It is independent and can monitor if the range is in normal limit.

It says that the free space is low on one VM, that the rain sensor is unreachable and the air quality outside is poor. Also one PIR is with low battery.

  1. DIY Geiger kit + arduino nano with lan module that posts to MQTT broker.

This might be useful for some too : https://radmon.org/index.php

Hi glufonec,
how did you connect the geiger counter to openhab? What Infertace/Gateway?
Thanks,
Ingo

The Kit provides a pin that send pulses. That is connected to an Arduino with LAN module. The software inside is counting the pulses and posting them to an MQTT broker. Can be done with ESPEasy/ESP32 wifi chip too.

I can upload the code on github later (if you already have the counter)

Hi! Very nice work! Would you mind to share your pop-up widgets?

Yes, please upload the code. I ordered the kit some days ago, it was on sale on black friday.
Thanks!

This is a super cool idea. I like it.

Hey guys,
sorry for the delay, iā€™m very busy for weeks. This is my code for the modal pop-ups. The CSS-File is not cleaned, but it works for me.

modal.css (1.5 KB)

Just add this to your habpanel:

modal.txt (573 Bytes)

The popup is triggered by the switch-item. so you can easily open a popup with a rule.

Enjoy!

4 Likes

Hello,

i cant set the background to blur.
I added the following code, but unfortunately it doesnā€™t work that the background blurs. Does anyone have an idea?

div.section .custom-modal-container.active {
    -webkit-filter: blur(5px)        grayscale(90%);
    filter: blur(5px) grayscale(90%);
}

CSS:

<style>
   .custom-modal-container {
      background: #19201c;
      opacity: 0;
      color: white;
      width: 80%;
      height: 80%;
      position: fixed;
      top: 30%;
      left: 10%;
      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-container2 {
      background: #19201c;
      opacity: 0;
      color: white;
      width: 80%;
      height: 80%;
      position: fixed;
      top: 30%;
      left: 10%;
      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 1s;
} 
   .custom-modal-container2.active {
      opacity: 1;
      visibility: visible;
      -webkit-transition: opacity 0.5s;
      transition: opacity 1s;
}
   .custom-modal {
      position: absolute;
      top: 50%;
      left: 50%;
      padding: 2em;
      border-radius: 0.5em;
      -webkit-transform: translateX(-50%) translateY(-50%);
              transform: translateX(-50%) translateY(-50%);
}
   .custom-modal2 {
      position: absolute;
      top: 50%;
      left: 50%;
      padding: 2em;
      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.close-modal-area2 {
      width: 100%;
      height: 100%;
}
   .custom-modal.custom-modal-box {
      background: #19201c;
      text-align: left;
      width: 80%;
}
   .custom-modal.custom-modal-box2 {
      background: #19201c;
      text-align: left;
      width: 80%;
}
   .custom-modal-content .custom-modal {
      width: 80%;
      max-width: 80em;
}
   .custom-modal-content2 .custom-modal {
      width: 80%;
      max-width: 80em;
}
   .toggle-modal-button {
      background-color: transparent;
      color: white;
      display: inline-block;
      padding: 1em;
      cursor: pointer;
      border: 1px solid #565f58;
      border-radius: 5px;
      width: 90%;
      text-align: center;
      font-weight: bold;
      margin-top: 0;
      margin-left: 5%;
}
    .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-content2 .toggle-modal-button {
      color: rgba(255, 255, 255, 0.75);
      margin-bottom: 1em;
}
   .custom-modal-content {
      color: #19201c;
      width: 100%;
      max-width: 600px;
      padding-top: 2em;
      margin: 0 auto;
}
   .custom-modal-content2 {
      color: #19201c;
      width: 100%;
      max-width: 600px;
      padding-top: 2em;
      margin: 0 auto;
}
   .col-sm-12 {
      display: flex;
      align-items: center;
      justify-content: center;
}
   button.btn.btn-secondary {
      Background-color: #26bf75;
      border: 1px solid #565f58;
      border-radius: 5px;
      display: inline-block;
      width: 200px;
      margin-left: 10px;
      height: 100px;
      margin-bottom: 10px;
      text-align: center;
      font-weight: bold;
      margin-left: 10px;
      margin-right: 10px;
      font-size: 15px;
}
</style>

Habpanel Code:

<div class="section">
  <div class="sectionIconContainer">
  <div class="sectionIcon" ng-if="itemValue('flur_bkasten') == 'ON'" ng-click="sendCmd('flur_bkasten', 'OFF')"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#briefja"></use></svg></div>
  <div class="sectionIcon" ng-if="itemValue('flur_bkasten') == 'OFF'"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#roxy"></use></svg></div>     
.
.
.
<div class="section2">
  <div class="widget">
   <div class="description1">Einstellungen</div>
   <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">
        <div class="section2">
          <div class="sectionIconContainer">
          <div class="sectionIcon"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#roxy"></use></svg></div>
          <div class="title"><div class="name">Zonen - Reinigung</div></div>
          <h4>Was soll gesaugt werden?</h4>
		     <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  			 <div class="btn-group mr-2" role="group" aria-label="First group">
             <div class="row ">
             <div class="col-sm-12">
				<button type="button" class="btn btn-secondary" ng-click="sendCmd('vacZoneCleaning', '4'); show_modal=false; sendCmd('Presence_Toggle', 'OFF')">Wohn- / Esszimmer</button>
                <button type="button" class="btn btn-secondary" ng-click="sendCmd('vacZoneCleaning', '2'); show_modal=false; sendCmd('Presence_Toggle', 'OFF')">Bad / Flur</button>
             </div>
             <div class="col-sm-12">
			    <button type="button" class="btn btn-secondary" ng-click="sendCmd('vacZoneCleaning', '3'); show_modal=false; sendCmd('Presence_Toggle', 'OFF')">Schlafzimmer</button>
                <button type="button" class="btn btn-secondary" ng-click="sendCmd('vacZoneCleaning', '1'); show_modal=false; sendCmd('Presence_Toggle', 'OFF')">KĆ¼che</button>
            </div>
          </div>
          </div>
          <div class="toggle-modal-button" ng-click="show_modal=false; sendCmd('Presence_Toggle', 'OFF')">Schliessen</div>
          </div>
  		</section>

thanks

Hey, does it still work? I get no data.