Widget: Alarm Keypad

Apps & Services HABPanel
, ,
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.

3 Likes
42

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

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?

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

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

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

47

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

48

AV_Keypad
AV_Keypad.jpg1909×848 59.8 KB
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.

49

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

Replace PLAY with:

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

More work needs to be done, but I have a managed to get it to work with my DSC panel.

Here’s the modified code (there are remnants in there from troubleshooting and there is some stuff there that doesn’t do anything that eventually should be cleaned up). I basically took code from @luckymallari’s universal keypad and added it to this, with some added switches and rules. There are no hard coded passwords to make this work.

<form name="_gkw" ng-init="config.marginPx = (config.marginPx < 0 ? 0 : config.marginPx)">
<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 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;
    }
  
    .genericKeypadWidget {
        display: flex;
        flex-wrap: wrap;
        flex: 0 1 100%;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding: {{config.marginPx / 2}}px;
    }
    
    .genericKeypadWidget button {
        outline: none;
    }
    
    .genericKeypadWidget .keys {
        display: flex;
      flex: 0 1 100%;
        overflow: hidden;
      flex-wrap: wrap;
        height: 100%;
    }
  
    .genericKeypadWidget .key {
        margin: {{config.marginPx / 2}}px;
      flex: 1;
        flex-basis: calc(33% - {{config.marginPx}}px - 1px);
        break-inside: avoid;
      justify-content: center;
      align-items: center;
            font-size: {{config.keyFontSize}};
      border: none;
      cursor: pointer;
            background: {{config.btnKeysBgColor}};
        overflow: hidden;
        height: calc({{config.isShowOutputBox?'20%':'25%'}} - {{config.marginPx}}px);
        position: relative;
        border-radius: {{config.btnBorderRadius}};
    }
    
    .genericKeypadWidget .key:not(:disabled)::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%;
    }
    
    .genericKeypadWidget .key:focus:not(:active)::after {
          animation: ripple 1s ease-out;
        }
    
    .genericKeypadWidget .key.outputBox {
      display: flex;
        margin: {{config.marginPx / 2}}px;
        flex-basis: 100%;
      justify-content: {{config.outputBoxTextAlign == 'right' ? 'flex-end': config.outputBoxTextAlign}};
      align-items: center;
      font-size: {{config.outputBoxFontSize}};
      background: #000;
      color: #fff;
      flex-basis: 100%;
        position: relative;
        pointer-events: {{ config.isOutputBoxClickable ? 'auto' : 'none' }};
        }    
    
    .genericKeypadWidget .key.btn_disabled::after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      background: rgba(0,0,0,.65);
         margin: 0px;
        border-radius: {{config.btnBorderRadius}};
     }    
    
    .genericKeypadWidget input.noshow {
      display: none;
    }

    .genericKeypadWidget .key.btn_ok {
            background: {{config.btnOkBgColor}};
    }
        
    .genericKeypadWidget .key.btn_del {
        background: {{config.btnDelBgColor}};
     }       
    
    .genericKeypadWidget .key.btn_clr {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.15);
        height: 100%;
        align-items: center;
        font-size: 1.5vh;
        pointer-events: auto;
        margin: 0;
        padding: 10px;
    }  
</style>
  
<div class="genericKeypadWidget" ng-init="gwk_data={ current: '071,1' }">
    <input type="text" class="noshow" name="current" ng-model="gwk_data.current" required="true"></input>
    <div class="keys">
      <div class="key outputBox" contenteditable="true" ng-if="config.isShowOutputBox">
          <span class="outputBoxText" ng-repeat="letter in gwk_data.current.split('') track by $index">{{config.isMaskOutputBox ? config.maskChar : letter}}</span>
          <button class="key btn_clr" contenteditable="false" ng-if="_gkw.current.$valid" ng-click="gwk_data.current=''">{{config.text_btnClear}}</button>
        </div>  
            <div class="alarmKpMainContainer">
                <div class="container">
                    <div class="row gutter4">
                        <button data-ng-click="sendCmd(config.alarmPnlCmdOff, '1')" class="btn btn-success col-sm-3 leftmost">
                          <span data-ng-bind-html="config.mainLabel_off"></span>
                        <span class="subText bigger"></span>
                              </button>
                        <button data-ng-click="gwk_data.current = gwk_data.current + '1'" class="btn btn-default col-sm-3">
                        1
                        </button>
                        <button data-ng-click="gwk_data.current = gwk_data.current + '2'" class="btn btn-default col-sm-3">
                        2 
                        </button>
                        <button data-ng-click="gwk_data.current = gwk_data.current + '3'" class="btn btn-default col-sm-3 rightmost">
                        3
                        </button>
                    </div>
                    <div class="row gutter4">
                        <button data-ng-click="sendCmd(config.alarmPnlCmdS, '1')" class="btn btn-info col-sm-3 leftmost">
                        <span data-ng-bind-html="config.mainLabel_armStay"></span>
                        </button>
                        <button data-ng-click="gwk_data.current = gwk_data.current + '4'" class="btn btn-default col-sm-3">
                        4
                        </button>
                        <button data-ng-click="gwk_data.current = gwk_data.current + '5'" class="btn btn-default col-sm-3">
                        5
                        </button>
                        <button data-ng-click="gwk_data.current = gwk_data.current + '6'" class="btn btn-default col-sm-3 rightmost">
                        6
                        </button>
                    </div>
                    <div class="row gutter4">
                        <button data-ng-click="sendCmd(config.alarmPnlCmdA, '1')" class="btn btn-warning col-sm-3 leftmost">
                        <span data-ng-bind-html="config.mainLabel_armAway"></span>
                        </button>
                        <button data-ng-click="gwk_data.current = gwk_data.current + '7'" class="btn btn-default col-sm-3">
                        7
                        </button>
                        <button data-ng-click="gwk_data.current = gwk_data.current + '8'" class="btn btn-default col-sm-3">
                        8
                        </button>
                        <button data-ng-click="gwk_data.current = gwk_data.current + '9'" class="btn btn-default col-sm-3">
                        9
                        </button>
                    </div>
                    <div class="row gutter4">
                        <button data-ng-click="sendCmd(config.alarmPnlCmdA, '1')" class="btn btn-danger col-sm-3 leftmost"><strong><em>Panic !</em></strong></button>
                        <button data-ng-click="sendCmd(config.alarmPnlCmd, '10')" class="btn btn-default col-sm-3">
                        *
                        </button>
                        <button data-ng-click="gwk_data.current = gwk_data.current + '0'" class="btn btn-default col-sm-3">0</button>
                        <button data-ng-click="sendCmd(config.alarmPnlCmd, gwk_data.current); sendCmd(config.alarmPnlCmdA, '0'); (gwk_data.current='071,1')" class="btn btn-default col-sm-3 rightmost" title="Submit">#</button>
                    </div>
                </div>
            </div>
    </div>
  </div>
</form>

To add the code, go to Edit the HABPanel screen, click on Add Widget, click on the gear icon next to “Custom Widgets”, click on the name Alarm Panel, then replace the code with the above and then save.

I have a couple “dummy” items to help make this work (they can get out of sync if power is lost or OpenHAB is restarted or something and will require a bit of future tweaking to get right)

Number Arm_Stay
Number Arm_Away

A couple rules

rule SetPartition1ArmModeStay
when
	Item Arm_Stay received command
then
	if(Arm_Stay.state == 1) {
		sendCommand(PARTITION1_ARM_MODE, 2)
	}
end

rule SetPartition1ArmModeAway
when
        Item Arm_Away received command
then
        if(Arm_Away.state == 1) {
                sendCommand(PARTITION1_ARM_MODE, 1)
        }
end

When configuring the widget, choose “Arm_Stay” for your “Alarm Panel Command for Stay” item. And choose “Arm_Away” for your “Alarm Panel Command for Away” item.
Use the send_command DSC item for the “Alarm Panel Command” item.

Glitches need to be worked out, but maybe others can help make it better.

Please note that the * key doesn’t do anything right now. The # key just sends the code that you typed in. Having said that, this does not replace the need for a keypad. Hopefully this is useful to someone.

51

First of all thanks for this great widget.
Has someone already tried to use this widget on a smartphone? Especially on a iPhone 7 it seems that it is not really shown correctly (responsive issue?).

53

Panic was sending the same signal as “Arm Away”, i’ve added an extra config option and updated the button event. But as a new member to the community I can’t add files to this !