Widget: Alarm Keypad

habpanel
widgetgallery
customwidget
Tags: #<Tag:0x00007fd3140cfe60> #<Tag:0x00007fd3140cfc58> #<Tag:0x00007fd3140cfac8>

(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…


(Martin St-Pierre) #48

I am completely new to this, struggling like hell through the code, but i like it so much that i took your work, and modified it to suit my own needs, i wanted to have a remote control for my devices connected to my Harmony Hub, and that was just perfect, because 22 buttons out of 24 are for my set top box and 2 are assigned to my Home Cinema to control the volume, i have used the Alarm Panel Command for the first 22 buttons and used Alarm Panel Command for Away, to assign it to my Home Cinema. The learning curve is really steep for someone who never touched a single line of code in his whole life, but it’s worth the effort and the feeling was wonderful when i tried it, and worked like a charm. Thanks again luckymallari. Btw, instead of havng text , would it be possible to put icons for the Play,Pause, Rew and FF buttons ?, give me some hints please. i already have some icons from material-design-icons-master in .png and .svg formats in all sizes and resolutions.


(Lucky) #49

Instead of text, use the glyphicons from bootstrap:
Example:

Replace PLAY with:

<span class="glyphicon glyphicon-play"></span>