uid: caddx_graphic_portrait_V6 tags: [] props: parameters: - context: item description: Alarm Feedback Item label: Alarm Feedback Item name: alarmFeedback required: false type: TEXT - context: item description: Send Command Item label: Send Command Item name: sendCommand required: true type: TEXT - default: Partition1 description: Default (Fallback) Partition label: Default (Fallback) Partition name: selectedPartition required: false type: TEXT - description: Show Tooltips in Widget label: Show Tooltips in Widget name: tooltipEnable required: false type: BOOLEAN - description: Replace pincode characters with this string, leave blank to show it as-is label: Mask character name: mask required: false parameterGroups: [] timestamp: Jul 22, 2021, 10:29:31 AM component: f7-page config: style: --f7-popup-tablet-width: 40px --f7-navbar-height: 35px --f7-navbar-font-size: 15px --f7-navbar-bg-color: transparent --f7-navbar-border-color: transparent --f7-navbar-link-color: white --f7-navbar-text-color: white --f7-navbar-shadow-image: none text-overflow: ellipsis left: 0px top: 0px background-color: rgb(220,220,220) --f7-card-margin-horizontal: 0px border-radius: 30px width: 100% height: 100% --f7-bars-translucent-opacity: none --f7-bars-translucent-blur: none slots: default: - component: Label config: text: ="Caddx Control" style: position: absolute left: 40% top: 0% color: white font-size: 25px line-height: 32px white-space: nowrap overflow: hidden text-overflow: ellipsis text-shadow: -1px 1px 1px hsl(0,0%,66%) - component: f7-badge config: bgColor: gray style: position: absolute left: 20% top: 5% width: 60% height: 55px border-radius: 0px - component: oh-link config: text: '=(vars.selectedPartition === NULL) ? "Select Partition" : vars.selectedPartition ' tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Selected Partition"' raised: true large: true textColor: white bgColor: gray style: position: absolute left: 20% top: 5.5% width: 60% - component: oh-link config: text: '=(items[props.alarmFeedback].state === "-") ? "" : (items[props.alarmFeedback].state) ' raised: true large: true textColor: white bgColor: gray style: position: absolute left: 20% top: 5.5% width: 60% z-index: 999 - component: oh-link config: text: "=(props.mask && vars.pincode) ? props.mask.repeat(vars.pincode.length || 0) : vars.pincode" raised: true large: true textColor: white bgColor: gray style: left: 25% top: 4% width: 50% z-index: 0 - component: oh-button config: bgColor: gray tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Show Alarm Logs Drop Down"' style: position: absolute top: 4.0% right: 6.8% color: white iconF7: arrowtriangle_up_fill iconSize: 20 iconColor: black action: variable actionVariable: showLogs actionVariableValue: '=(vars.showLogs == "null") ? true : !(vars.showLogs)' - component: oh-button config: bgColor: gray tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Show Faulted Zones"' style: position: absolute top: 9.0% right: 6.8% color: white border-radius: 5px iconF7: arrowtriangle_down_fill iconSize: 20 iconColor: black action: variable actionVariable: Faulted actionVariableValue: '=(vars.Faulted == "null") ? true : !(vars.Faulted)' - component: f7-badge config: tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Partition Armed"' bgColor: '=(items[vars.selectedPartition + "_Armed"].state === "ON") ? "red" : "gray"' style: position: absolute left: 5% top: 15% width: 60px height: 20px border-radius: 12px slots: default: - component: Label config: text: ARMED - component: f7-badge config: tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Partiton ready or faulted?"' bgColor: '=(items[vars.selectedPartition + "_ReadyToArm"].state === "ON") ? "green" : "gray"' style: position: absolute left: 30% top: 15% width: 60px height: 20px border-radius: 12px slots: default: - component: Label config: text: READY - component: f7-badge config: bgColor: gray tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"' style: position: absolute left: 55% top: 15% width: 60px height: 20px border-radius: 12px slots: default: - component: Label config: text: FIRE - component: f7-badge config: tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Panel has AC Power (Green)"' bgColor: '=(items.Panel_ACPowerOn.state === "ON") ? "green" : "gray"' style: position: absolute left: 80% top: 15% width: 60px height: 20px border-radius: 12px slots: default: - component: Label config: text: POWER - component: oh-button config: bgColor: '=(items[vars.selectedPartition + "_ErrorBeepTripleBeep"].state === "ON") ? "red" : "gray"' tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Indicates Tripple Beep Error"' style: border-radius: 12px position: absolute top: 20% left: 5% color: white text: ERROR - component: oh-button config: text: "1" raised: true large: false textColor: white bgColor: gray action: variable actionVariable: pincode actionVariableValue: "=(vars.pincode) ? vars.pincode + '1' : '1'" style: position: absolute left: 25% top: 20% border-radius: 12px - component: oh-button config: text: "2" raised: true large: false textColor: white bgColor: gray action: variable actionVariable: pincode actionVariableValue: "=(vars.pincode) ? vars.pincode + '2' : '2'" style: position: absolute left: 42% top: 20% border-radius: 12px - component: oh-button config: text: "3" raised: true large: false textColor: white bgColor: gray action: variable actionVariable: pincode actionVariableValue: "=(vars.pincode) ? vars.pincode + '3' : '3'" style: position: absolute left: 60% top: 20% border-radius: 12px - component: f7-badge config: bgColor: '=(items[vars.selectedPartition + "_EntryGuard"].state === "ON") ? "green" : "gray"' text: StayLED style: position: absolute left: 71% top: 21% width: 25px height: 12px border-radius: 12px - component: oh-button config: bgColor: gray tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Arm in STAY Mode"' iconF7: person_2_square_stack_fill iconSize: 20 textColor: white action: command actionCommand: '="partition_secondary_command|0," + (1 << (((vars.selectedPartition === NULL) ? props.selectedPartition : vars.selectedPartition).substr(-1) - 1))' actionItem: =props.sendCommand style: position: absolute left: 79% top: 20% border-radius: 12px width: 12% - component: oh-button config: bgColor: gray tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Fire Panic"' style: border-radius: 12px position: absolute top: 26% left: 6% color: white iconF7: flame iconSize: 26 iconColor: red action: command actionCommand: ="partition_secondary_command|4,1" actionItem: =props.sendCommand - component: oh-button config: text: "4" raised: true large: false textColor: white bgColor: gray action: variable actionVariable: pincode actionVariableValue: "=(vars.pincode) ? vars.pincode + '4' : '4'" style: position: absolute left: 25% top: 26% border-radius: 12px - component: oh-button config: text: "5" raised: true large: false textColor: white bgColor: gray action: variable actionVariable: pincode actionVariableValue: "=(vars.pincode) ? vars.pincode + '5' : '5'" style: position: absolute left: 42% top: 26% border-radius: 12px - component: oh-button config: text: "6" raised: true large: false textColor: white bgColor: gray action: variable actionVariable: pincode actionVariableValue: "=(vars.pincode) ? vars.pincode + '6' : '6'" style: position: absolute left: 60% top: 26% border-radius: 12px - component: f7-badge config: bgColor: '=(items[vars.selectedPartition + "_ChimeModeOn"].state === "ON") ? "green" : "gray"' text: ChimeLED style: position: absolute left: 71% top: 27% width: 25px height: 12px border-radius: 12px - component: oh-button config: bgColor: gray tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Toggle CHIME Mode"' iconF7: music_note_2 iconSize: 20 textColor: white action: command actionCommand: '="partition_secondary_command|1," + (1 << (((vars.selectedPartition === NULL) ? props.selectedPartition : vars.selectedPartition).substr(-1) - 1))' actionItem: =props.sendCommand style: position: absolute left: 79% top: 26% border-radius: 12px width: 12% - component: oh-button config: bgColor: gray tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Medical Panic"' style: border-radius: 12px position: absolute top: 35% left: 6% color: white iconF7: plus iconSize: 30 iconColor: green action: command actionCommand: ="partition_secondary_command|5,1" actionItem: =props.sendCommand - component: oh-button config: text: "7" raised: true large: false textColor: white bgColor: gray action: variable actionVariable: pincode actionVariableValue: "=(vars.pincode) ? vars.pincode + '7' : '7'" style: position: absolute left: 25% top: 32% border-radius: 12px - component: oh-button config: text: "8" raised: true large: false textColor: white bgColor: gray action: variable actionVariable: pincode actionVariableValue: "=(vars.pincode) ? vars.pincode + '8' : '8'" style: position: absolute left: 42% top: 32% border-radius: 12px - component: oh-button config: text: "9" raised: true large: false textColor: white bgColor: gray action: variable actionVariable: pincode actionVariableValue: "=(vars.pincode) ? vars.pincode + '9' : '9'" style: position: absolute left: 60% top: 32% border-radius: 12px - component: f7-badge config: bgColor: '=(items[vars.selectedPartition + "_Exit1"].state === "ON") ? "green" : "gray"' text: ExitLED style: position: absolute left: 71% top: 33% width: 25px height: 12px border-radius: 12px - component: oh-button config: bgColor: gray tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Arm in EXIT Mode"' iconF7: house_alt iconSize: 20 textColor: white action: command actionCommand: '="partition_secondary_command|2," + (1 << (((vars.selectedPartition === NULL) ? props.selectedPartition : vars.selectedPartition).substr(-1) - 1))' actionItem: =props.sendCommand style: position: absolute left: 79% top: 32% border-radius: 12px width: 12% - component: oh-button config: tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"' text: "*" raised: true large: false textColor: white bgColor: gray style: position: absolute left: 25% top: 38% border-radius: 12px - component: oh-button config: text: "0" raised: true large: false textColor: white bgColor: gray action: variable actionVariable: pincode actionVariableValue: "=(vars.pincode) ? vars.pincode + '0' : '0'" style: position: absolute left: 42% top: 38% border-radius: 12px - component: oh-button config: tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"' text: "#" raised: true large: false textColor: white bgColor: gray style: position: absolute left: 60% top: 38% border-radius: 12px - component: f7-badge config: bgColor: '=(items[vars.selectedPartition + "_Bypass_Group"].state === "ON") ? "green" : "gray"' text: BypassLED style: position: absolute left: 71% top: 39% width: 25px height: 12px border-radius: 12px - component: oh-button config: bgColor: gray tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Allow Zone Bypass via Popup"' iconF7: arrow_branch iconSize: 20 textColor: white action: variable actionVariable: Bypass actionVariableValue: '=(vars.Bypass == "null") ? true : !(vars.Bypass)' style: position: absolute left: 79% top: 38% border-radius: 12px width: 12% - component: oh-button config: bgColor: gray tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Police Panic"' style: border-radius: 12px position: absolute top: 44% left: 6% color: white iconF7: shield_fill iconSize: 30 iconColor: blue action: command actionCommand: ="partition_secondary_command|6,1" actionItem: =props.sendCommand - component: oh-button config: bgColor: gray style: border-radius: 12px position: absolute top: 44% left: 24.5% color: white iconF7: trash iconSize: 21 iconColor: white action: variable actionVariable: pincode actionVariableValue: "" - component: oh-button config: bgColor: gray style: border-radius: 12px position: absolute top: 44% left: 41.5% color: white iconF7: hand_thumbsup iconSize: 21 iconColor: white action: command disabled: =!vars.pincode closePopup: =props.closePopup actionItem: =props.sendCommand actionCommand: '="partition_primary_command_with_pin|0x" + (vars.pincode).substr(1,1) + (vars.pincode).substr(0,1) + ",0x" + (vars.pincode).substr(3,1) + (vars.pincode).substr(2,1) + ",0x" + (vars.pincode+"00").substr(4,1) + (vars.pincode+"00").substr(4,1) + "," + ((items[((vars.selectedPartition === NULL) ? props.selectedPartition : vars.selectedPartition) + "_Armed"].state === "ON") ? "1" : "2") + "," + (1 << (((vars.selectedPartition === NULL) ? props.selectedPartition : vars.selectedPartition).substr(-1) - 1))' clearVariable: pincode - component: oh-button config: bgColor: gray style: border-radius: 12px position: absolute top: 44% left: 59% color: white iconF7: delete_left iconSize: 21 iconColor: white action: variable actionVariable: pincode actionVariableValue: '=(vars.pincode) ? vars.pincode.substring(0, vars.pincode.length - 1) : ""' - component: f7-badge config: bgColor: '=(items[vars.selectedPartition + "_Cancel"].state === "ON") ? "green" : "gray"' text: CancelLED style: position: absolute left: 71% top: 45% width: 25px height: 12px border-radius: 12px - component: oh-button config: bgColor: gray tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"' iconF7: xmark_circle iconSize: 20 textColor: white action: command actionCommand: ON actionItem: =(vars.selectedPartition) + '_Cancel' style: position: absolute left: 79% top: 44% border-radius: 12px width: 12% - component: f7-list config: visible: =(vars.Faulted) == true style: background: rgb(235, 232, 232) position: absolute left: 20% top: 16% width: 60% --f7-list-border-color: transparent opacity: 80% class: - padding-bottom slots: default: - component: Label config: text: Zones Faulted style: background: rgb(191, 189, 189) padding-left: 20px font-weight: 500 line-height: 20px font-size: 75% - component: oh-repeater config: fragment: true for: item sourceType: itemsInGroup groupItem: =(vars.selectedPartition) + '_Zones' slots: default: - component: oh-list-item config: visible: =items[loop.item.name].state == "OPEN" title: =loop.item.label item: =loop.item.name color: '=(items[loop.item.name].state == "ON") ? "red" : "gray"' style: backgroundColor: rgb(235, 232, 232) font-size: 70% --f7-list-item-min-height: 14px --f7-list-item-padding-vertical: 1px --f7-list-item-border-color: transparent - component: f7-list config: visible: =(vars.Bypass) == true style: position: absolute left: 20% top: 16% width: 60% --f7-list-border-color: transparent opacity: 80% class: - padding-bottom - big-toggles slots: default: - component: Label config: text: Zones Bypassed style: padding-left: 20px font-weight: 500 line-height: 20px backgroundColor: rgb(191, 189, 189) font-size: 75% - component: oh-repeater config: fragment: true for: item sourceType: itemsInGroup groupItem: =(vars.selectedPartition) + '_Bypass_Group' slots: default: - component: oh-toggle-item config: title: =loop.item.label item: =loop.item.name color: '=(items[loop.item.name].state == "ON") ? "green" : "gray"' style: backgroundColor: rgb(235, 232, 232) font-size: 70% --f7-toggle-width: 35px --f7-toggle-height: 10px --f7-list-item-min-height: 14px --f7-list-item-padding-vertical: 1px --f7-list-item-border-color: transparent - component: f7-list config: visible: =(vars.showLogs) == true noChevron: false style: background: rgb(235, 232, 232) position: absolute left: 20% top: 16% width: 60% --f7-list-border-color: transparent opacity: 80% class: - padding-bottom slots: default: - component: Label config: text: Alarm Logs style: padding-left: 1% font-weight: 500 line-height: 150% backgroundColor: rgb(191, 189, 189) font-size: 80% - component: f7-list-item config: accordionItem: true title: =items.Panel_LogMessage10.state style: font-size: 75% color: black backgroundColor: rgb(235, 232, 232) --f7-list-item-border-color: transparent --f7-list-item-title-line-height: 100% --f7-list-item-padding-horizontal: 10px --f7-list-item-min-height: 14px slots: default: - component: f7-accordion-content slots: default: - component: f7-list-item config: title: =items.Panel_LogMessage9.state style: font-size: 75% - component: f7-list-item config: title: =items.Panel_LogMessage8.state style: font-size: 75% - component: f7-list-item config: title: =items.Panel_LogMessage7.state style: font-size: 75% - component: f7-list-item config: title: =items.Panel_LogMessage6.state style: font-size: 75% - component: f7-list-item config: title: =items.Panel_LogMessage5.state style: font-size: 75% - component: f7-list-item config: title: =items.Panel_LogMessage4.state style: font-size: 75% - component: f7-list-item config: title: =items.Panel_LogMessage3.state style: font-size: 75% - component: f7-list-item config: title: =items.Panel_LogMessage2.state style: font-size: 75% - component: f7-list-item config: title: =items.Panel_LogMessage1.state style: font-size: 75% - component: f7-block config: style: --f7-button-text-color: var(--f7-text-color) --f7-button-bg-color: var(--f7-card-bg-color) --f7-theme-color-rgb: var(--f7-color-blue-rgb) top: 46% position: absolute width: 100% class: - padding slots: default: - component: f7-row config: style: --f7-theme-color: var(--f7-color-blue) --f7-button-bg-color: transparent class: no-gap slots: default: - component: oh-repeater config: fragment: true for: partition in: - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 slots: default: - component: f7-row config: width: "10" slots: default: - component: oh-button config: tooltip-trigger: hover tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition to current run"' bgColor: '=(items["Partition" + loop.partition + "_Armed"].state === "-") ? "gray" : (items["Partition" + loop.partition + "_Armed"].state === "ON") ? "red" : "green"' style: --f7-button-hover-bg-color: var(--f7-color-blue-tint) --f7-button-pressed-bg-color: var(--f7-color-blue-tint) border-radius: 12px text-overflow: ellipsis white-space: nowrap overflow: hidden text: =["P" + loop.partition] fill: true textColor: white disabled: '=(items["Partition" + loop.partition + "_Armed"].state === "-") ? true : false' raised: false action: variable actionVariable: selectedPartition actionVariableValue: ='Partition' + loop.partition