Widget: Alarm Keypad

habpanel
widgetgallery
customwidget
Tags: #<Tag:0x00007f6cf0c20448> #<Tag:0x00007f6cf0c27ba8> #<Tag:0x00007f6cf0c273d8>

(Dennis Von Der Bey) #41

Sorry that I am responding this late. I put the code to my keypad in the post. Please keep in mind it is written really bad as I don’t really know the Angular style and have pain writing CSS most of the time :stuck_out_tongue:

<style>
    @media screen and (max-width: 767px) {
 	      .alarmKpMainContainer {
  					height: 300px !important;
        }
	  }
    .alarmKpMainContainer {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
  			white-space: nowrap;
    }

    .alarmKpMainContainer .container {
        width: 100%;
        height: 100%;
        position: relative;
        padding-top: 0;
    }

    .alarmKpMainContainer .container .row {
        height: 25%;
    }

    .alarmKpMainContainer button.btn-default {
        background: #424242;
    }

    .alarmKpMainContainer button.leftmost {
        margin-left: 0;
    }

    .alarmKpMainContainer button.rightmost {
        margin-right: 0;
    }

    .alarmKpMainContainer button.col-sm-3 {
        width: calc(25% - 10px);
        height: calc(100% - 10px);
        margin: 5px;
    }
  
  	.alarmKpMainContainer .activated.col-sm-6 {
        width: calc(50% - 10px);
        height: calc(100% - 10px);
  			background-color: #424242;
        font-size: 1.5em;
        border-radius: 4px;
        border-color: transparent;
  			padding: 6px 12px 6px 12px;
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
  
    .alarmKpMainContainer .deactivated.col-sm-6 {
        width: calc(50% - 10px);
        height: calc(100% - 10px);
  			background-color: #424242;
        font-size: 1.5em;
        border-radius: 4px;
        border-color: transparent;
  			padding: 6px 12px 6px 12px;
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
  
  	.alarmKpMainContainer .padLabel.col-sm-3 {
        width: calc(25% - 10px);
        height: calc(100% - 10px);
  			background-color: #424242;
        font-size: 1.5em;
        border-radius: 4px;
        border-color: transparent;
  			padding: 6px 12px 6px 12px;
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
  
  	.alarmKpMainContainer .keyBox.col-sm-6 {
        width: calc(50% - 10px);
        height: calc(100% - 10px);
  			background-color: #424242;
        font-size: 4em;
        border-radius: 4px;
        border-color: transparent;
  			padding: 6px 12px 6px 12px;
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
  
  	.alarmKpMainContainer .emptyCell.col-sm-3 {
        width: calc(25% - 10px);
        height: calc(100% - 10px);
  			background-color: #424242;
        border-radius: 4px;
        border-color: transparent;
  			padding: 6px 12px 6px 12px;
        margin: 5px;
    }

    .alarmKpMainContainer button {
        position: relative;
        overflow: hidden;
        border-radius: 4px;
        border-color: transparent !important;
        color: #fff !important;
        font-size: 2em;
    }

    .alarmKpMainContainer button.leftmost {
        font-size: 1.25em;
    }

    .alarmKpMainContainer button:focus,
    .alarmKpMainContainer button:active {
        outline: none !important;
    }

    .alarmKpMainContainer button:focus:not(:active)::after {
        animation: ripple 1s ease-out;
    }

    .alarmKpMainContainer button:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, .5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%);
        transform-origin: 50% 50%;
    }

    .alarmKpMainContainer button .subText {
        font-size: .5em;
        position: absolute;
        top: 7px;
        right: 7px;
        font-style: italic;
        color: #7b6845;
    }

    .alarmKpMainContainer button .subText.bigger {
        font-size: .75em;
    }

    @keyframes ripple {
        0% {
            transform: scale(0, 0);
            opacity: 1;
        }
        20% {
            transform: scale(25, 25);
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: scale(40, 40);
        }
    }

    .alarmKpMainContainer .subText.offColor {
        color: #449d44;
    }

    .alarmKpMainContainer .subText.awayColor {
        color: #ec971f;
    }

    .alarmKpMainContainer .subText.stayColor {
        color: #31b0d5;
  	}
</style>
<div class="alarmKpMainContainer">
    <div class="container">
      	<div class="row gutter4">
            <div class="activated col-sm-6 leftmost" ng-if="itemValue('alarm') == 'ON'">
            		!! Alarm aktiviert !!
          	</div>
            <div class="activated col-sm-6 leftmost" ng-if="itemValue('alarm') == 'OFF' && itemValue('all_paths_closed') == 'OFF' && itemValue(config.alarmPnlStayArmedSwitch) == 'OFF' && itemValue(config.alarmPnlAwayArmedSwitch) == 'OFF'">
            		Fenster & Haustür schließen!
          	</div>
            <div class="deactivated col-sm-6 leftmost" ng-if="itemValue('alarm') == 'OFF' && itemValue(config.alarmPnlAwayArmedSwitch) == 'OFF' && itemValue(config.alarmPnlStayArmedSwitch) == 'OFF' && itemValue('all_paths_closed') == 'ON'">
            		Alarmanlage deaktiviert.
          	</div>
            <div class="activated col-sm-6 leftmost" ng-if="itemValue('alarm') == 'OFF' && itemValue(config.alarmPnlStayArmedSwitch) == 'ON'">
            		Alarmanlage scharf (Anwesend)
          	</div>
            <div class="activated col-sm-6 leftmost" ng-if="itemValue('alarm') == 'OFF' && itemValue(config.alarmPnlAwayArmedSwitch) == 'ON'">
            		Alarmanlage scharf (Abwesend)
          	</div>
            <div class="activated col-sm-6 rightmost" ng-if="itemValue(config.alarmPnlSafetySwitch) == 'ON'">
    						Sicherung aktiviert
          	</div>
            <div class="deactivated col-sm-6 rightmost" ng-if="itemValue(config.alarmPnlSafetySwitch) == 'OFF'">
    						Sicherung deaktiviert
          	</div>
        </div>
      	<div class="row gutter4">
            <div class="padLabel col-sm-3">
    						<span ng-if="itemValue('alarm_safety') == 'ON'">
            				PIN eingeben →
              	</span>
    						<span ng-if="itemValue('alarm_safety') == 'OFF'">
              			Aktion wählen ↓
              	</span>
          	</div>
            <div class="keyBox col-sm-6">
    						<span>{{itemState(config.alarmPnlKeyPadString)}}</span>
          	</div>
            <button data-ng-click="sendCmd(config.alarmPnlKeyPadString, '')" class="btn btn-primary col-sm-3 rightmost"  ng-disabled="itemValue('alarm_safety') == 'OFF'">
              Clear
          	</button>
        </div>
        <div class="row gutter4">
            <button data-ng-click="sendCmd(config.alarmPnlSwitch, 'OFF')" class="btn btn-success col-sm-3 leftmost" ng-disabled="itemValue('alarm_safety') == 'ON'">
              <span data-ng-bind-html="config.mainLabel_off"></span>
            	<span class="subText bigger">off</span>
          	</button>
            <button data-ng-click="sendCmd(config.alarmPnlKeyPadString, itemValue(config.alarmPnlKeyPadString) + '1')" class="btn btn-default col-sm-3" ng-disabled="itemValue('alarm_safety') == 'OFF'">
            	1
          	</button>
            <button data-ng-click="sendCmd(config.alarmPnlKeyPadString, itemValue(config.alarmPnlKeyPadString) + '2')" class="btn btn-default col-sm-3" ng-disabled="itemValue('alarm_safety') == 'OFF'">
              2 
            </button>
            <button data-ng-click="sendCmd(config.alarmPnlKeyPadString, itemValue(config.alarmPnlKeyPadString) + '3')" class="btn btn-default col-sm-3 rightmost" ng-disabled="itemValue('alarm_safety') == 'OFF'">
              3
            </button>
        </div>
        <div class="row gutter4">
            <button data-ng-click="sendCmd(config.alarmPnlStaySwitch, 'ON')" class="btn btn-info col-sm-3 leftmost" ng-disabled="itemValue('alarm_safety') == 'ON'">
              <span data-ng-bind-html="config.mainLabel_armStay"></span>
              <span class="subText bigger">arm stay</span>
            </button>
            <button data-ng-click="sendCmd(config.alarmPnlKeyPadString,  itemValue(config.alarmPnlKeyPadString) + '4')" class="btn btn-default col-sm-3" ng-disabled="itemValue('alarm_safety') == 'OFF'">
              4
            </button>
            <button data-ng-click="sendCmd(config.alarmPnlKeyPadString,  itemValue(config.alarmPnlKeyPadString) + '5')" class="btn btn-default col-sm-3" ng-disabled="itemValue('alarm_safety') == 'OFF'">
              5
            </button>
            <button data-ng-click="sendCmd(config.alarmPnlKeyPadString,  itemValue(config.alarmPnlKeyPadString) + '6')" class="btn btn-default col-sm-3 rightmost" ng-disabled="itemValue('alarm_safety') == 'OFF'">
              6
            </button>
        </div>
        <div class="row gutter4">
            <button data-ng-click="sendCmd(config.alarmPnlAwaySwitch, 'ON')" class="btn btn-warning col-sm-3 leftmost" ng-disabled="itemValue('alarm_safety') == 'ON'">
            <span data-ng-bind-html="config.mainLabel_armAway"></span>
              <span class="subText bigger">arm away</span>
          	</button>
            <button data-ng-click="sendCmd(config.alarmPnlKeyPadString,  itemValue(config.alarmPnlKeyPadString) + '7')" class="btn btn-default col-sm-3" ng-disabled="itemValue('alarm_safety') == 'OFF'">
              7
            </button>
            <button data-ng-click="sendCmd(config.alarmPnlKeyPadString,  itemValue(config.alarmPnlKeyPadString) + '8')" class="btn btn-default col-sm-3" ng-disabled="itemValue('alarm_safety') == 'OFF'">
              8
            </button>
            <button data-ng-click="sendCmd(config.alarmPnlKeyPadString,  itemValue(config.alarmPnlKeyPadString) + '9')" class="btn btn-default col-sm-3" ng-disabled="itemValue('alarm_safety') == 'OFF'">
              9
            </button>
        </div>
        <div class="row gutter4">
            <button data-ng-click="sendCmd(config.alarmPnlSosSwitch, 'ON')" class="btn btn-danger col-sm-3 leftmost">
              <strong>
                <em>Panic !</em>
              </strong>
          	</button>
            <div class="emptyCell col-sm-3"></div>
            <button data-ng-click="sendCmd(config.alarmPnlKeyPadString,  itemValue(config.alarmPnlKeyPadString) + '0')" class="btn btn-default col-sm-3" ng-disabled="itemValue('alarm_safety') == 'OFF'">
              0
          	</button>
            <div class="emptyCell col-sm-3"></div>
        </div>
    </div>
</div>

And if someone is interested in the contact state widget to the left of my keypad:

<style>
    .contactStateContainer {
        width: 100%;
        height: 400px !important;
        left: 0;
        top: 0;
    }
  
    .room {
  			font-weight: bold;
  			display: block;
  	}
  
    .state {
  			display: block;
  	}
  
  	.open {
  			color: #ff5b5b;
  	}
  
  	hr {
  			margin-top: 10px !important;
  			margin-bottom: 10px !important;
  	}
</style>
<div class="contactStateContainer">
    <span class="room">
      	Flur:
    </span>
    <span ng-if="itemValue('ShutterContactHallwayFrontdoor_ContactState') == 'CLOSED'" class="state">
      	Haustüre ✅
    </span>
    <span ng-if="itemValue('ShutterContactHallwayFrontdoor_ContactState') == 'OPEN'" class="state open">
      	Haustüre ✖
    </span>
  	<hr> 
    <span class="room">
      	Küche:
    </span>
    <span ng-if="itemValue('ShutterContactKitchenWindowLeft_ContactState') == 'CLOSED'" class="state">
      	Fenster (links) ✅
    </span>
    <span ng-if="itemValue('ShutterContactKitchenWindowLeft_ContactState') == 'OPEN'" class="state open">
      	Fenster (links) ✖
    </span>
    <span ng-if="itemValue('ShutterContactKitchenWindowRight_ContactState') == 'CLOSED'" class="state">
      	Fenster (rechts) ✅
    </span>
    <span ng-if="itemValue('ShutterContactKitchenWindowRight_ContactState') == 'OPEN'" class="state open">
      	Fenster (rechts) ✖
    </span>
  	<hr> 
    <span class="room">
      	Wohnzimmer:
    </span>
    <span ng-if="itemValue('ShutterContactLivingRoomWindowLeft_ContactState') == 'CLOSED'" class="state">
      	Fenster (links) ✅
    </span>
    <span ng-if="itemValue('ShutterContactLivingRoomWindowLeft_ContactState') == 'OPEN'" class="state open">
      	Fenster (links) ✖
    </span>
    <span ng-if="itemValue('ShutterContactLivingRoomWindowRight_ContactState') == 'CLOSED'" class="state">
      	Fenster (rechts) ✅
    </span>
    <span ng-if="itemValue('ShutterContactLivingRoomWindowRight_ContactState') == 'OPEN'" class="state open">
      	Fenster (rechts) ✖
    </span>
  	<hr> 
    <span class="room">
      	Badezimmer:
    </span>
    <span ng-if="itemValue('ShutterContactBathroomWindow_ContactState') == 'CLOSED'" class="state">
      	Fenster ✅
    </span>
    <span ng-if="itemValue('ShutterContactBathroomWindow_ContactState') == 'OPEN'" class="state open">
      	Fenster ✖
    </span>
  	<hr> 
    <span class="room">
      	Schlafzimmer (Dennis):
    </span>
    <span ng-if="itemValue('ShutterContactDennisBedroomWindow_ContactState') == 'CLOSED'" class="state">
      	Fenster ✅
    </span>
    <span ng-if="itemValue('ShutterContactDennisBedroomWindow_ContactState') == 'OPEN'" class="state open">
      	Fenster ✖
    </span>
  	<hr> 
    <span class="room">
      	Schlafzimmer (Kevin):
    </span>
    <span ng-if="itemValue('ShutterContactKevinBedroomWindow_ContactState') == 'CLOSED'" class="state">
      	Fenster ✅
    </span>
    <span ng-if="itemValue('ShutterContactKevinBedroomWindow_ContactState') == 'OPEN'" class="state open">
      	Fenster ✖
    </span>
</div>

You will have to change the code according to your items. Some are even hard coded into the Javascript, because I was lazy. Also I am using my own alarm system logic and it won’t really be applicable to yours.


(autoit) #42

Thank you! Will go through this later, hopefully the end result will be as nice as yours :slight_smile:


(Devin) #43

Lucky, If you don’t mind me asking, what type of alarm system do you use are you using envisalink? Do you disable yours the same way by entering a pin?


(Lucky) #44

I use AlarmDecoder. I enter my pin then 1 … for example 12341. I dont hardcode my pin anywhere for security reasons. Doing 1234OFF is same as 12341 in my rules since I bind OFF to 1


(Devin) #45

Ok. I have tried everything with the alarm keypad widget and can’t get it to work on the off command. I enter my pin and press off and the system goes into ZEA mode. I still can’t figure out how to make the rule and where that rule gets attached to the keypad widget


(autoit) #46

Any idea what’s happening with HABPanel when the screen resolution goes below ~768 pixels? It breaks the keypad @DennisVonDerBey shared as well as my own demo that only has one “LCD screen” added to the top (the “screen” width doesn’t match the numpads)? See here: https://streamable.com/dm1oe


(Lucky) #47

it’s using bootstrap grid, which is floated. I have not taken a look at his code above…