API tools faq
paste
fablav

Soggiorno room card 2 colonne di bottoni

fablav
Apr 16th, 2024
221
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 13.14 KB | Software | 0 0
raw download clone embed print report
  1. type: custom:button-card
  2. name: Soggiorno
  3. icon: mdi:sofa
  4. entity: light.luce_soggiorno
  5. show_state: false
  6. show_label: true
  7. label: |
  8.  [[[
  9.     return Math.round(states['sensor.broadlink_rm4_soggiorno_temperature'].state) + "°C" + "<br>" + Math.round(states['sensor.broadlink_rm4_soggiorno_humidity'].state) + " %";
  10.   ]]]
  11. tap_action:
  12.   action: toggle
  13. double_tap_action:
  14.   action: toggle
  15. custom_fields:
  16.   btn:
  17.     card:
  18.       type: custom:mushroom-chips-card
  19.       chips:
  20.         - type: template
  21.           tap_action:
  22.             action: toggle
  23.           entity: light.luce_soggiorno
  24.           icon: |
  25.            {% if is_state(entity, 'on') %}
  26.               mdi:lightbulb-on
  27.             {% elif is_state(entity, 'off') %}
  28.             mdi:lightbulb-outline
  29.             {% else %}
  30.               mdi:lightbulb-alert-outline
  31.             {% endif %}
  32.           icon_color: |
  33.            {% if is_state(entity, 'on') %}
  34.               black
  35.             {% else %}
  36.              
  37.             {% endif %}
  38.         - type: template
  39.           tap_action:
  40.             action: toggle
  41.           entity: light.lampada_soggiorno
  42.           icon: |
  43.            {% if is_state(entity, 'on') %}
  44.               hue:floor-shade
  45.             {% else %}
  46.               hue:floor-shade
  47.             {% endif %}
  48.           icon_color: |
  49.            {% if is_state(entity, 'on') %}
  50.               black
  51.             {% else %}
  52.  
  53.             {% endif %}
  54.         - type: template
  55.           tap_action:
  56.             action: fire-dom-event
  57.             local_conditional_card:
  58.               action: set
  59.               ids:
  60.                 - sb_home: hide
  61.                 - sb_vacuum: show
  62.           entity: vacuum.vacky
  63.           icon: mdi:vacuum
  64.       card_mod:
  65.         style:
  66.           mushroom-template-chip:nth-child(1)$:
  67.             mushroom-chip$: |
  68.              ha-card {
  69.                 {% if states('light.luce_soggiorno') == 'on' %}
  70.                   --chip-background: rgba(235, 204, 52, 1);
  71.                 {% elif states('light.luce_soggiorno') == 'off' %}
  72.                   --chip-background: rgba(235, 204, 52, 0.3);
  73.                 {% else %}
  74.                   --chip-background: rgba(var(--rgb-disabled), 1);
  75.                 {% endif %}
  76.                 animation: {{ 'ping 2s ease-out infinite' if is_state('light.luce_soggiorno', 'on') }};
  77.                 padding: 5px !important;
  78.                 border-radius: 100px !important;
  79.               }
  80.               @keyframes ping {
  81.                 0% {
  82.                   box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
  83.                 }
  84.                 100% {
  85.                   box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
  86.                 }
  87.               }
  88.               ha-card:active {
  89.                 transform: translateY(1.5px);
  90.                 transition: 0s;
  91.                 box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  92.               }
  93.             .: |
  94.              ha-state-icon {
  95.                 animation: {{ 'illumination 2s infinite' if is_state('light.luce_soggiorno', 'on') }};
  96.               }
  97.               @keyframes illumination {
  98.                 0%, 100% { clip-path: inset(0 0 0 0); }
  99.                 95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
  100.               }
  101.           mushroom-template-chip:nth-child(2)$:
  102.             mushroom-chip$: |
  103.              ha-card {
  104.                 --chip-background: {{ 'rgba(250, 163, 0, 1)' if is_state('light.lampada_soggiorno', 'on') else 'rgba(250, 163, 0, 0.3)' }};
  105.                 animation: {{ 'ping 2s ease-out infinite' if is_state('light.lampada_soggiorno', 'on') }};
  106.                 padding: 5px !important;
  107.                 border-radius: 100px !important;
  108.               }
  109.               @keyframes ping {
  110.                 0% {
  111.                   box-shadow: 0 0 5px 1px rgba(250, 163, 0, 1);
  112.                 }
  113.                 100% {
  114.                   box-shadow: 0 0 5px 10px rgba(250, 163, 0, 0);
  115.                 }
  116.               }
  117.               ha-card:active {
  118.                 transform: translateY(1.5px);
  119.                 transition: 0s;
  120.                 box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  121.               }
  122.             .: |
  123.              ha-state-icon {
  124.                 animation: {{ 'scan 4s ease-in-out infinite' if is_state('light.lampada_soggiorno', 'on') }};
  125.                 transform-origin: 50% 100%
  126.               }
  127.               @keyframes scan {
  128.                 0%, 100% { transform: rotate(10deg); }
  129.                 50% { transform: rotate(-10deg); }
  130.               }
  131.           mushroom-template-chip:nth-child(3)$:
  132.             mushroom-chip$: |
  133.              ha-card {
  134.                 --chip-background: {{ 'rgba(166, 207, 152, 0.3)' if is_state('vacuum.vacky', 'docked') else 'rgba(166, 207, 152, 1)' }};
  135.                 animation: {{ 'ping 2.5s ease-out infinite' if not is_state('vacuum.vacky', 'docked') }};
  136.                 padding: 5px !important;
  137.                 border-radius: 100px !important;
  138.               }
  139.               @keyframes ping {
  140.                 0% {
  141.                   box-shadow: 0 0 5px 1px rgba(166, 207, 152, 1);
  142.                 }
  143.                 100% {
  144.                   box-shadow: 0 0 5px 10px rgba(166, 207, 152, 0);
  145.                 }
  146.             .: |
  147.              ha-state-icon {
  148.                 animation: {{ 'scan 5s ease-in-out infinite' if not is_state('vacuum.vacky', 'docked') }};
  149.               }
  150.               @keyframes scan {
  151.                 0%, 100% { transform: rotate(20deg); }
  152.                 50% { transform: rotate(-15deg); }
  153.               }
  154.   btn1:
  155.     card:
  156.       type: custom:mushroom-chips-card
  157.       chips:
  158.         - type: template
  159.           tap_action:
  160.             action: more-info
  161.           entity: cover.tapparella
  162.           icon: |
  163.            {% if is_state(entity, 'closed') %}
  164.               mdi:window-shutter
  165.             {% else %}
  166.               mdi:window-shutter
  167.             {% endif %}
  168.           icon_color: black
  169.         - type: template
  170.           tap_action:
  171.             action: more-info
  172.           entity: media_player.echo_show_in_soggiorno
  173.           icon: |
  174.            {% if is_state(entity, 'standby') %}
  175.               phu:echo-show-8-gen-2
  176.             {% else %}
  177.               mdi:speaker
  178.             {% endif %}
  179.           icon_color: |
  180.            {% if not is_state(entity, 'standby') %}
  181.               black
  182.             {% else %}
  183.  
  184.             {% endif %}
  185.         - type: template
  186.           tap_action:
  187.             action: more-info
  188.           entity: camera.soggiorno
  189.           icon: mdi:cctv
  190.       card_mod:
  191.         style:
  192.           mushroom-template-chip:nth-child(1)$:
  193.             mushroom-chip$: |
  194.              ha-card {
  195.                 --chip-background: {{ 'rgba(137, 207, 239, 1)' if is_state('cover.tapparella', 'open') else 'rgba(137, 207, 239, 0.3)' }};
  196.                 animation: {{ 'ping 2s ease-out infinite' if is_state('cover.tapparella', 'open') }};
  197.                 padding: 5px !important;
  198.                 border-radius: 100px !important;
  199.               }
  200.             .: |
  201.              ha-state-icon {
  202.                 {% if states('cover.tapparella') == 'opening' %}
  203.                 animation: open 3s steps(1) infinite;
  204.                 {% elif states('cover.tapparella') == 'closing' %}
  205.                 animation: close 3s steps(1) infinite;
  206.                 {% elif state_attr('cover.tapparella', 'current_position') > 91 %}
  207.                   clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 36%, 68% 36%, 68% 100%, 100% 100%, 100% 0);
  208.                 {% elif state_attr('cover.tapparella', 'current_position') > 71 %}
  209.                   clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 48%, 68% 48%, 68% 100%, 100% 100%, 100% 0);
  210.                 {% elif state_attr('cover.tapparella', 'current_position') > 51 %}
  211.                   clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 60%, 68% 60%, 68% 100%, 100% 100%, 100% 0);
  212.                 {% elif state_attr('cover.tapparella', 'current_position') > 10 %}
  213.                   clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 74%, 68% 74%, 68% 100%, 100% 100%, 100% 0);
  214.                 {% endif %}
  215.               }
  216.               @keyframes open {
  217.                 0% { clip-path: inset(0 0 0 0); }
  218.                 20%  { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 74%, 68% 74%, 68% 100%, 100% 100%, 100% 0); }
  219.                 40%  { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 60%, 68% 60%, 68% 100%, 100% 100%, 100% 0); }
  220.                 60% { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 48%, 68% 48%, 68% 100%, 100% 100%, 100% 0); }
  221.                 80% { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 36%, 68% 36%, 68% 100%, 100% 100%, 100% 0); }
  222.               }
  223.               @keyframes close {
  224.                 0% { clip-path: inset(0 0 0 0); }
  225.                 80%  { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 74%, 68% 74%, 68% 100%, 100% 100%, 100% 0); }
  226.                 60%  { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 60%, 68% 60%, 68% 100%, 100% 100%, 100% 0); }
  227.                 40% { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 48%, 68% 48%, 68% 100%, 100% 100%, 100% 0); }
  228.                 20% { clip-path: polygon(0 0, 0 100%, 32% 100%, 32% 36%, 68% 36%, 68% 100%, 100% 100%, 100% 0); }
  229.               }
  230.           mushroom-template-chip:nth-child(2)$:
  231.             mushroom-chip$: |
  232.              ha-card {
  233.                 --chip-background: {{ 'rgba(219, 145, 79, 0.3)' if is_state('media_player.echo_show_in_soggiorno', 'standby') else 'rgba(219, 145, 79, 1)' }};
  234.                 animation: {{ 'ping 1.3s ease-out infinite, beat 1.3s ease-out infinite both;' if not is_state('media_player.echo_show_in_soggiorno', 'standby') }};
  235.                 padding: 5px !important;
  236.                 border-radius: 100px !important;
  237.               }
  238.               @keyframes ping {
  239.                 0% {
  240.                   box-shadow: 0 0 5px 1px rgba(219, 145, 79, 1);
  241.                 }
  242.                 100% {
  243.                   box-shadow: 0 0 5px 10px rgba(219, 145, 79, 1), 0);
  244.                 }
  245.               }
  246.               @keyframes beat {
  247.                 0% { transform: scale(1); }
  248.                 10% { transform: scale(1.1); }
  249.                 17% { transform: scale(1.05); }
  250.                 33% { transform: scale(1.25); }
  251.                 60% { transform: scale(1); }
  252.               }
  253.             .: |
  254.              ha-state-icon {
  255.                 animation: {{ 'beat 1.3s ease-out infinite both;' if not is_state('media_player.echo_show_in_soggiorno', 'standby') }};
  256.               }
  257.               @keyframes beat {
  258.                 0% { transform: scale(1); }
  259.                 10% { transform: scale(1.1); }
  260.                 17% { transform: scale(1.05); }
  261.                 33% { transform: scale(1.25); }
  262.                 60% { transform: scale(1); }
  263.               }
  264.               ha-card:active {
  265.                 transform: translateY(1.5px);
  266.                 transition: 0s;
  267.                 box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
  268.               }
  269.           mushroom-template-chip:nth-child(3)$:
  270.             mushroom-chip$: |
  271.              ha-card {
  272.                 --chip-background: {{ 'rgba(223,130,108, 1)' if not is_state('sensor.agentdvr_soggiorno_persona_rilevata','on') else 'rgba(223,130,108, 0.3)' }};
  273.                 padding: 5px !important;
  274.                 border-radius: 100px !important;
  275.               }
  276.             .: |
  277.              ha-state-icon {
  278.                 animation: scan 5s ease-in-out infinite;
  279.                 transform-origin: 90% 80%
  280.               }
  281.               @keyframes scan {
  282.                 0%, 100% { transform: rotate(20deg); }
  283.                 50% { transform: rotate(-15deg); }
  284.               }
  285. styles:
  286.   grid:
  287.     - grid-template-areas: '"n btn btn1" "l btn btn1" "i btn btn1"'
  288.     - grid-template-columns: 1fr min-content min-content
  289.     - grid-template-rows: min-content min-content 1fr
  290.   img_cell:
  291.     - justify-content: center
  292.     - position: absolute
  293.     - width: 150px
  294.     - height: 150px
  295.     - left: 0
  296.     - bottom: 0
  297.     - margin: 0 0 -30px -30px
  298.     - background: "#FFC47E"
  299.     - border-radius: 200px
  300.   icon:
  301.     - width: 60px
  302.     - color: black
  303.     - opacity: "0.6"
  304.   card:
  305.     - height: 200px
  306.     - padding: 17px 3px 17px 17px
  307.     - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
  308.   custom_fields:
  309.     btn:
  310.       - justify-content: end
  311.       - align-self: start
  312.     btn1:
  313.       - justify-content: end
  314.       - align-self: start
  315.   name:
  316.     - justify-self: start
  317.     - align-self: start
  318.     - font-size: 18px
  319.     - font-weight: 500
  320.     - color: null
  321.   label:
  322.     - min-height: 80px
  323.     - justify-self: start
  324.     - align-self: start
  325.     - font-size: 14px
  326.     - font-weight: 300
  327.     - opacity: "0.7"
  328. state:
  329.   - value: "on"
  330.     styles:
  331.       card:
  332.         - border: solid 5px rgba(255, 196, 126, 1)
  333.   - value: "off"
  334.     styles:
  335.       card:
  336.         - border: solid 5px rgba(255, 196, 126, 0.2)
  337.       img_cell:
  338.         - background: "#FFC47E"
  339.         - opacity: 0.2
  340.   - value: unavailable
  341.     styles:
  342.       card:
  343.         - border: solid 5px rgba(255, 196, 126, 0.2)
  344.       img_cell:
  345.         - background: "#FFC47E"
  346.         - opacity: 0.2
Tags: ha
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!