uid: caddx_graphic_portrait_V1
tags: []
props:
  parameters:
    - context: item
      description: Partition Selection Proxy Item - used to define working partition
      label: Partition Selection Proxy Item
      name: partitionSelection
      required: false
      type: TEXT
    - context: item
      description: Alarm Feedback Item
      label: Alarm Feedback Item
      name: alarmFeedback
      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: Apr 30, 2021, 7:05:24 PM
component: f7-page
config:
  style:
    background-color: rgb(220,220,220)
    --f7-card-margin-horizontal: 0px
    border-radius: 20px
    width: 358px
    height: 400px
slots:
  default:
    - component: Label
      config:
        text: ="Caddx Control"
        style:
          position: absolute
          left: 110px
          top: 3px
          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
        text: PARTITION
        style:
          position: absolute
          left: 10px
          top: 40px
          width: 90px
          height: 35px
          border-radius: 12px
    - component: oh-button
      config:
        text: PARTITION
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Select Partition Required to view (requires activation)"'
        textColor: white
        action: options
        actionOptions: Partition1=1,Partition2=2,Partition3=3,Partition4=4
        actionItem: =props.partitionSelection
        style:
          position: absolute
          left: 8px
          top: 43px
          border-radius: 12px
          color: white
          font-size: 15px
    - component: f7-badge
      config:
        bgColor: gray
        style:
          position: absolute
          left: 103px
          top: 35px
          width: 150px
          height: 50px
          border-radius: 0px
    - component: oh-link
      config:
        text: =items[props.partitionSelection].state
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition to current run"'
        raised: true
        large: true
        textColor: white
        bgColor: gray
        action: variable
        actionVariable: Prefix
        actionVariableValue: =items[props.partitionSelection].state
        style:
          position: absolute
          left: 103px
          top: 40px
          width: 150px
    - 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: 103px
          top: 60px
          width: 150px
          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:
          position: absolute
          left: 103px
          top: 60px
          width: 150px
          z-index: 0
    - component: f7-badge
      config:
        bgColor: gray
        text: UP
        style:
          position: absolute
          right: 50px
          top: 35px
          width: 23px
          height: 23px
          border-radius: 5px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"'
        style:
          position: absolute
          top: 30px
          right: 42px
          color: white
        iconF7: arrowtriangle_up_fill
        iconSize: 20
        iconColor: black
        action: command
        actionCommand: ON
        actionItem: =(vars.Prefix) + '_PlaceHolder'
    - component: f7-badge
      config:
        bgColor: gray
        text: DOWN
        style:
          position: absolute
          right: 50px
          top: 62px
          width: 23px
          height: 23px
          border-radius: 5px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"'
        style:
          position: absolute
          top: 57px
          right: 42px
          color: white
        iconF7: arrowtriangle_down_fill
        iconSize: 20
        iconColor: black
        action: command
        actionCommand: ON
        actionItem: =(vars.Prefix) + '_PlaceHolder'
    - component: f7-badge
      config:
        bgColor: '=(items[vars.Prefix + "_Armed"].state === "ON") ? "red" : "gray"'
        text: Armed
        style:
          position: absolute
          left: 14px
          top: 95px
          width: 60px
          height: 20px
          border-radius: 12px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Partition Armed"'
        style:
          position: absolute
          top: 91px
          left: 10px
          color: white
        text: ARMED
    - component: f7-badge
      config:
        bgColor: '=(items[vars.Prefix + "_ReadyToArm"].state === "ON") ? "green" : "gray"'
        style:
          position: absolute
          left: 104px
          top: 95px
          width: 60px
          height: 20px
          border-radius: 12px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Show Faulted Zones (If any)"'
        text: READY
        textColor: white
        action: popup
        actionModal: '=(items[vars.Prefix + "_Zones"].state === "OPEN") ? "widget:CaddxFaultedCard" : ""'
        actionModalConfig:
          partitionPrefix: =(vars.Prefix)
        style:
          position: absolute
          top: 91px
          left: 101px
          color: white
    - component: f7-badge
      config:
        bgColor: gray
        style:
          position: absolute
          left: 194px
          top: 95px
          width: 60px
          height: 20px
          border-radius: 12px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"'
        style:
          position: absolute
          top: 91px
          left: 200px
          color: white
        text: FIRE
    - component: f7-badge
      config:
        bgColor: gray
        style:
          position: absolute
          right: 14px
          top: 95px
          width: 60px
          height: 20px
          border-radius: 12px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"'
        style:
          position: absolute
          top: 91px
          right: 11px
          color: white
        text: POWER
        action: command
        actionCommand: blue
        actionItem: =(vars.Prefix) + '_PlaceHolder'
    - component: f7-badge
      config:
        bgColor: '=(items[vars.Prefix + "_ErrorBeepTripleBeep"].state === "ON") ? "red" : "gray"'
        text: ERROR
        style:
          position: absolute
          left: 14px
          top: 140px
          width: 60px
          height: 20px
          border-radius: 12px
    - component: oh-link
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Indicates Tripple Beep Error"'
        style:
          position: absolute
          top: 139px
          left: 22px
          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: 107px
          top: 140px
          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: 157px
          top: 140px
          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: 207px
          top: 140px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items[vars.Prefix + "_EntryGuard"].state === "ON") ? "green" : "gray"'
        text: Stay
        style:
          position: absolute
          left: 244px
          top: 146px
          width: 25px
          height: 12px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: STAY
        style:
          position: absolute
          left: 283px
          top: 140px
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Arm in STAY Mode"'
        text: STAY
        textColor: white
        action: command
        actionCommand: ON
        actionItem: =(vars.Prefix) + '_Stay'
        style:
          position: absolute
          left: 283px
          top: 140px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: FIRE-PANIC
        style:
          position: absolute
          left: 14px
          top: 170px
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"'
        style:
          position: absolute
          top: 170px
          left: 23px
          color: white
        iconF7: flame
        iconSize: 24
        iconColor: red
        action: command
        actionCommand: ON
        actionItem: =(vars.Prefix) + '_PlaceHolder'
    - 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: 107px
          top: 180px
          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: 157px
          top: 180px
          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: 207px
          top: 180px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items[vars.Prefix + "_ChimeModeOn"].state === "ON") ? "green" : "gray"'
        text: Chime
        style:
          position: absolute
          left: 244px
          top: 187px
          width: 25px
          height: 12px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: CHIME
        style:
          position: absolute
          left: 283px
          top: 180px
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Toggle CHIME Mode"'
        text: CHIME
        textColor: white
        action: command
        actionCommand: ON
        actionItem: =(vars.Prefix) + '_Chime'
        style:
          position: absolute
          left: 280px
          top: 180px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: MEDICAL-PANIC
        style:
          position: absolute
          left: 14px
          top: 235px
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"'
        style:
          position: absolute
          top: 233px
          left: 22px
          color: white
        iconF7: plus
        iconSize: 30
        iconColor: green
        action: command
        actionCommand: green
        actionItem: =(vars.Prefix) + '_PlaceHolder'
    - 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: 107px
          top: 220px
          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: 157px
          top: 220px
          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: 207px
          top: 220px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items[vars.Prefix + "_Exit1"].state === "ON") ? "green" : "gray"'
        text: Exit
        style:
          position: absolute
          left: 244px
          top: 226px
          width: 25px
          height: 12px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: EXIT
        style:
          position: absolute
          left: 283px
          top: 220px
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Arm in EXIT Mode"'
        text: EXIT
        textColor: white
        action: command
        actionCommand: ON
        actionItem: =(vars.Prefix) + '_Exit'
        style:
          position: absolute
          left: 288px
          top: 220px
          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: 107px
          top: 260px
          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: 157px
          top: 260px
          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: 207px
          top: 260px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: '=(items[vars.Prefix + "_Bypass_Group"].state === "ON") ? "green" : "gray"'
        text: Bypass?
        style:
          position: absolute
          left: 244px
          top: 266px
          width: 25px
          height: 12px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: BYPASS
        style:
          position: absolute
          left: 283px
          top: 260px
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Allow Zone Bypass via Popup"'
        text: BYPASS
        textColor: white
        action: popup
        actionModal: widget:CaddxBypassCard
        actionModalConfig:
          partitionPrefix: =(vars.Prefix)
        style:
          position: absolute
          left: 279px
          top: 260px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: POLICE-PANIC
        style:
          position: absolute
          left: 14px
          top: 300px
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"'
        style:
          position: absolute
          top: 298px
          left: 22px
          color: white
        iconF7: shield_fill
        iconSize: 28
        iconColor: blue
        action: command
        actionCommand: green
        actionItem: =(vars.Prefix) + '_PlaceHolder'
    - component: f7-badge
      config:
        bgColor: gray
        text: CLEAR
        style:
          position: absolute
          left: 108px
          top: 300px
          width: 30px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        style:
          position: absolute
          top: 298px
          left: 102px
          color: white
        iconF7: trash
        iconSize: 21
        iconColor: white
        action: variable
        actionVariable: pincode
        actionVariableValue: ""
    - component: f7-badge
      config:
        bgColor: gray
        text: SUBMIT
        style:
          position: absolute
          left: 157px
          top: 300px
          width: 30px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        style:
          position: absolute
          top: 298px
          left: 152px
          color: white
        iconF7: hand_thumbsup
        iconSize: 21
        iconColor: white
        action: command
        disabled: =!vars.pincode
        closePopup: =props.closePopup
        actionItem: =(vars.Prefix) + '_Pin_Number' || 'TestString'
        actionCommand: =vars.pincode
        clearVariable: pincode
    - component: f7-badge
      config:
        bgColor: gray
        text: SUBMIT
        style:
          position: absolute
          left: 206px
          top: 300px
          width: 30px
          height: 30px
          border-radius: 12px
    - component: oh-button
      config:
        style:
          position: absolute
          top: 299px
          left: 200px
          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.Prefix + "_Cancel"].state === "ON") ? "green" : "gray"'
        text: Cancel
        style:
          position: absolute
          left: 244px
          top: 306px
          width: 25px
          height: 12px
          border-radius: 12px
    - component: f7-badge
      config:
        bgColor: gray
        text: CANCEL
        style:
          position: absolute
          left: 283px
          top: 300px
          width: 60px
          height: 30px
          border-radius: 10px
    - component: oh-button
      config:
        tooltip-trigger: hover
        tooltip: '=!(props.tooltipEnable) ? false : "Not yet Active"'
        text: CANCEL
        textColor: white
        action: command
        actionCommand: ON
        actionItem: =(vars.Prefix) + '_Cancel'
        style:
          position: absolute
          left: 277px
          top: 300px
          border-radius: 12px