API tools faq
paste
Advertisement
tiwing

Security Front Panel

tiwing
Feb 6th, 2025
75
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 10.62 KB | None | 0 0
raw download clone embed print report
  1. type: vertical-stack
  2. cards:
  3.   - type: custom:decluttering-card
  4.     template: normal_title
  5.     variables:
  6.       - content: Front
  7.       - sub-content: null
  8.   - type: picture-elements
  9.     image: /local/dashboard_photos/transparent/~transparent-4-3.png
  10.     card_mod:
  11.       style: |
  12.        ha-card {
  13.           {# method of putting overlay over or under by multiple backgrounds #}
  14.           background:
  15.             /* top, transparent red, faked with gradient */
  16.             linear-gradient(
  17.               rgba(0, 0, 0, 0.5),
  18.               rgba(0, 0, 0, 0.1)
  19.             ),
  20.             /* bottom, image */
  21.             url("/local/dashboard_photos/simple_blue_background.png");
  22.             #background-size: 60%;
  23.             background-position: center bottom;
  24.             #background-size: contain;
  25.             background-size: cover;
  26.             #background-size: auto;
  27.             #background-size: 100% auto;
  28.             background-repeat: no-repeat;
  29.  
  30.           {% set comment = "Use for spinning fan on fan on " %}
  31.           {% if is_state('binary_sensor.hvac_active','on') %}
  32.             --state-rotate-2s: rotation2s 2.5s linear infinite;
  33.           {% endif %}
  34.  
  35.           {% set comment = "iphone charging" %}
  36.           {% if is_state('sensor.iphone_battery_state','Charging') %}
  37.             --iphone-charging: redpulse 4.01s linear infinite;
  38.           {% endif %}
  39.  
  40.           {% set comment = "HVAC Cooling" %}
  41.           {% if is_state_attr('climate.t6_pro_thermostat','hvac_action','heating') %}
  42.             --hvac_cooling: bluepulse 4.01s linear infinite;
  43.           {% endif %}
  44.          
  45.         }
  46.         @keyframes rotation2s {
  47.           0% {transform: rotate(0deg)}
  48.           100% {transform: rotate(360deg)}
  49.         }
  50.         @keyframes redpulse {
  51.           0%   {color: red;}
  52.           45%  {color: grey;}
  53.           60%  {color: red;}
  54.           100% {color: red;}
  55.         }
  56.         @keyframes bluepulse {
  57.           0%   {color: lightblue;}
  58.           45%  {color: grey;}
  59.           60%  {color: lightblue;}
  60.           100% {color: lightblue;}
  61.         }
  62.     elements:
  63.       - type: image
  64.         tap_action:
  65.           action: more-info
  66.         double_tap_action: none
  67.         hold_action:
  68.           action: more-info
  69.           entity: camera.porch1
  70.         camera_image: camera.porch1
  71.         entity: camera.porch1
  72.         style:
  73.           transform: none
  74.           transform-origin: top left
  75.           top: 3%
  76.           left: 3%
  77.           width: 60%
  78.         card_mod:
  79.           style: |
  80.            :host {
  81.               border-radius: 8px;
  82.               {% if is_state('binary_sensor.porch1_porch_zone_person_occupancy','on') %}
  83.                 border: 2px dashed red;
  84.               {% elif is_state('binary_sensor.porch_mot_sticky','on') %}
  85.                 border: 2px solid red;
  86.               {% else %}
  87.                 border: 2px solid grey;
  88.               {% endif %}
  89.             }
  90.       - type: image
  91.         tap_action:
  92.           action: more-info
  93.         double_tap_action: none
  94.         hold_action:
  95.           action: more-info
  96.           entity: camera.front1
  97.         camera_image: camera.front1
  98.         entity: camera.front1
  99.         style:
  100.           transform: none
  101.           transform-origin: top right
  102.           top: 40%
  103.           right: 3%
  104.           width: 47%
  105.         card_mod:
  106.           style: |
  107.            :host {
  108.               border-radius: 8px;
  109.               {% if is_state('binary_sensor.front1_driveway_zone_person_occupancy','on') %}
  110.                 border: 2px dashed red;
  111.               {% elif is_state('binary_sensor.front_mot_sticky','on') %}
  112.                 border: 2px solid red;
  113.               {% else %}
  114.                 border: 2px solid grey;
  115.               {% endif %}
  116.             }
  117.       - type: custom:button-card
  118.         entity: sensor.front_door_2
  119.         color_type: card
  120.         show_icon: false
  121.         name: Front Door
  122.         color: auto
  123.         show_name: true
  124.         tap_action:
  125.           action: more-info
  126.         hold_action: none
  127.         style:
  128.           transform: none
  129.           top: 6%
  130.           right: 3%
  131.           width: 35%
  132.         card_mod:
  133.           style: |
  134.            ha-card {
  135.               {% if is_state('sensor.front_door_2', 'Violated') %}
  136.                 background: #660000 !important;
  137.               {% endif %}
  138.               border: 2px solid grey;
  139.               padding: 6px 14px !important;
  140.               font-weight: 500 !important;
  141.               font-size: 100% !important;
  142.             }
  143.       - type: custom:button-card
  144.         entity: sensor.tv_room_window
  145.         color_type: card
  146.         show_icon: false
  147.         name: TV Window
  148.         color: auto
  149.         show_name: true
  150.         tap_action:
  151.           action: more-info
  152.         hold_action: none
  153.         style:
  154.           transform: none
  155.           transform-origin: top right
  156.           top: 19%
  157.           right: 3%
  158.           width: 35%
  159.         card_mod:
  160.           style: |
  161.            ha-card {
  162.               {% if is_state('sensor.tv_room_window', 'Violated') %}
  163.                 background: #660000 !important;
  164.               {% endif %}
  165.               border: 2px solid grey;
  166.               padding: 6px 14px !important;
  167.               font-weight: 500 !important;
  168.               font-size: 100% !important;
  169.             }
  170.       - type: custom:button-card
  171.         entity: sensor.garage_oh_door
  172.         color_type: card
  173.         show_icon: false
  174.         name: Overhead Door
  175.         color: auto
  176.         show_name: true
  177.         tap_action:
  178.           action: more-info
  179.         hold_action: none
  180.         style:
  181.           transform: none
  182.           transform-origin: top right
  183.           top: 85%
  184.           right: 3%
  185.           width: 45%
  186.         card_mod:
  187.           style: |
  188.            ha-card {
  189.               {% if is_state('sensor.garage_oh_door', 'Violated') %}
  190.                 background: #660000 !important;
  191.               {% endif %}
  192.               border: 2px solid grey;
  193.               padding: 6px 14px !important;
  194.               font-weight: 500 !important;
  195.               font-size: 100% !important;
  196.             }
  197.       - type: custom:button-card
  198.         entity: light.outdoor_front_group
  199.         color_type: icon
  200.         show_icon: true
  201.         name: Front
  202.         color: auto
  203.         size: 55px
  204.         show_name: true
  205.         tap_action:
  206.           action: toggle
  207.         hold_action:
  208.           action: more-info
  209.         style:
  210.           transform: none
  211.           transform-origin: bottom left
  212.           bottom: 21%
  213.           left: 5%
  214.         card_mod:
  215.           style: |
  216.            ha-card {
  217.               background: rgba(0,0,0,0);
  218.               border: 0px solid red;
  219.               font-weight: 500 !important;
  220.               font-size: 100% !important;
  221.             }
  222.       - type: custom:button-card
  223.         entity: light.house_accent_lights_1_light
  224.         color_type: icon
  225.         show_icon: true
  226.         name: LED
  227.         color: auto
  228.         size: 55px
  229.         show_name: true
  230.         tap_action:
  231.           action: toggle
  232.         hold_action:
  233.           action: more-info
  234.         style:
  235.           transform: none
  236.           transform-origin: bottom left
  237.           bottom: 21%
  238.           left: 21%
  239.         card_mod:
  240.           style: |
  241.            ha-card {
  242.               background: rgba(0,0,0,0);
  243.               border: 0px solid red;
  244.               font-weight: 500 !important;
  245.               font-size: 100% !important;
  246.             }
  247.       - type: custom:button-card
  248.         entity: input_boolean.rotate_house_leds_rgb
  249.         color_type: icon
  250.         show_icon: true
  251.         name: Random
  252.         color: auto
  253.         size: 29px
  254.         show_name: true
  255.         tap_action:
  256.           action: toggle
  257.         hold_action:
  258.           action: more-info
  259.         style:
  260.           transform: none
  261.           transform-origin: bottom left
  262.           bottom: 26%
  263.           left: 37%
  264.           font-size: 80%
  265.         card_mod:
  266.           style: |
  267.            ha-card {
  268.               background: rgba(0,0,0,0);
  269.               border: 0px solid red;
  270.               font-size: 100% !important;
  271.             }
  272.       - type: custom:button-card
  273.         entity: input_boolean.match_house_lights_to_rgb
  274.         color_type: icon
  275.         show_icon: true
  276.         name: Match
  277.         color: auto
  278.         size: 29px
  279.         show_name: true
  280.         tap_action:
  281.           action: toggle
  282.         hold_action:
  283.           action: more-info
  284.         style:
  285.           transform: none
  286.           transform-origin: bottom left
  287.           bottom: 10%
  288.           left: 38%
  289.           font-size: 80%
  290.         card_mod:
  291.           style: |
  292.            ha-card {
  293.               background: rgba(0,0,0,0);
  294.               border: 0px solid red;
  295.               font-size: 100% !important;
  296.             }
  297.       - type: custom:button-card
  298.         entity: light.ext_front_1
  299.         color_type: icon
  300.         show_icon: true
  301.         name: L1
  302.         color: auto
  303.         size: 26px
  304.         show_name: true
  305.         tap_action: none
  306.         hold_action:
  307.           action: more-info
  308.         style:
  309.           transform: none
  310.           transform-origin: bottom left
  311.           bottom: 3%
  312.           left: 6%
  313.           font-size: 80%
  314.         card_mod:
  315.           style: |
  316.            ha-card {
  317.               background: rgba(0,0,0,0);
  318.               border: 0px solid red;
  319.               font-size: 100% !important;
  320.             }
  321.       - type: custom:button-card
  322.         entity: light.ext_front_2
  323.         color_type: icon
  324.         show_icon: true
  325.         name: L2
  326.         color: auto
  327.         size: 26px
  328.         show_name: true
  329.         tap_action: none
  330.         hold_action:
  331.           action: more-info
  332.         style:
  333.           transform: none
  334.           transform-origin: bottom left
  335.           bottom: 3%
  336.           left: 16%
  337.           font-size: 80%
  338.         card_mod:
  339.           style: |
  340.            ha-card {
  341.               background: rgba(0,0,0,0);
  342.               border: 0px solid red;
  343.               font-size: 100% !important;
  344.             }
  345.       - type: custom:button-card
  346.         entity: light.ext_front_3
  347.         color_type: icon
  348.         show_icon: true
  349.         name: L3
  350.         color: auto
  351.         size: 26px
  352.         show_name: true
  353.         tap_action: none
  354.         hold_action:
  355.           action: more-info
  356.         style:
  357.           transform: none
  358.           transform-origin: bottom left
  359.           bottom: 3%
  360.           left: 26%
  361.           font-size: 80%
  362.         card_mod:
  363.           style: |
  364.            ha-card {
  365.               background: rgba(0,0,0,0);
  366.               border: 0px solid red;
  367.               font-size: 100% !important;
  368.             }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!