API tools faq
paste
Albometer

New Dashboard UI - 10" V2

Albometer
Jan 23rd, 2022
198
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 114.48 KB | None | 0 0
raw download clone embed print report
  1. kiosk_mode: null
  2. styles:
  3.   grid:
  4.     - grid-template-areas: |
  5.        "icon  circle"
  6.         "n     n"
  7.         "s     s"
  8.     - grid-template-columns: repeat(2, 1fr)
  9.     - grid-template-rows: auto repeat(2, min-content)
  10.     - gap: 2%
  11.     - align-items: start
  12.   name:
  13.     - justify-self: start
  14.     - line-height: 115%
  15.   state:
  16.     - justify-self: start
  17.     - line-height: 115%
  18.   card:
  19.     - font-family: Sf Display
  20.     - border-radius: var(--custom-button-card-border-radius)
  21.     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  22.     - transition: none
  23.     - padding: 10%
  24.     - '--mdc-ripple-color': |
  25.        [[[
  26.           return variables.consider_on ?
  27.             'rgb(0, 0, 0)' :
  28.             'rgba(255, 255, 255, 0.3)';
  29.         ]]]
  30.     - color: |
  31.        [[[
  32.           return variables.consider_on ?
  33.             'rgba(0, 0, 0, 0.6)' :
  34.             'rgba(255, 255, 255, 0.3)';
  35.         ]]]
  36.     - background-color: |
  37.        [[[
  38.           return variables.consider_on ?
  39.             'rgba(255, 255, 255, 0.8)' :
  40.             'rgba(115, 115, 115, 0.2)';
  41.         ]]]
  42. extra_styles: |
  43.  [[[
  44.     if (entity) {
  45.       let hs = entity.attributes.hs_color == undefined,
  46.         h = hs || entity.attributes.hs_color[0],
  47.         s = hs || entity.attributes.hs_color[1],
  48.         l_min = 28,
  49.         l_max = 48,
  50.         l_calc =
  51.          entity.attributes.brightness / 2.54 * (l_max - l_min) / 100 + l_min;
  52.      var light_color =
  53.        entity.attributes.color_mode === 'color_temp'
  54.          ? `hsl(204, 58%, ${l_calc}%);`
  55.          : `hsl(${h}, ${s}%, ${l_calc}%);`;
  56.     }
  57.    return `
  58.       svg {
  59.        --light-color:
  60.         ${ variables.state === 'on' && entity.attributes.brightness != undefined
  61.            ? light_color
  62.            : variables.state === 'on' && entity.attributes.brightness == undefined
  63.            ? 'var(--state-icon-active-color);'
  64.            : 'var(--state-icon-color);'
  65.        }
  66.      }
  67.      #container {
  68.       text-align: left !important;
  69.      }
  70.       #name, #state {
  71.         font-size: 1.34vw;
  72.         letter-spacing: 0.05vw;
  73.      }
  74.      /* portrait */
  75.       @media screen and (max-width: 1200px) {
  76.        #name, #state {
  77.          font-size: 2vw;
  78.          letter-spacing: 0.05vw;
  79.       }
  80.      }
  81.      /* phone */
  82.       @media screen and (max-width: 800px) {
  83.        #name, #state {
  84.          font-size: 3.1vw;
  85.          letter-spacing: 0.12vw;
  86.        }
  87.           }
  88.       @keyframes card_bounce {
  89.         0% {
  90.           transform: scale(1);
  91.         }
  92.         15% {
  93.           transform: scale(0.9);
  94.         }
  95.         25% {
  96.           transform: scale(1);
  97.         }
  98.         30% {
  99.           transform: scale(0.98);
  100.         }
  101.         100% {
  102.           transform: scale(1);
  103.         }
  104.       }
  105.     `
  106.   ]]]
  107. views:
  108.   - type: custom:grid-layout
  109.     path: 0
  110.     layout:
  111.       grid-gap: var(--custom-layout-card-padding)
  112.       grid-template-columns: repeat(4, 1fr) 0
  113.       grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
  114.       grid-template-areas: |
  115.        "sidebar  .           .           .       ."
  116.         "sidebar  esszimmer   wohnzimmer  aussen  ."
  117.         "sidebar  media       heizung     familie ."
  118.         "sidebar  footer      footer      footer  ."
  119.       mediaquery:
  120.         '(max-width: 800px)':
  121.           grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
  122.           grid-template-columns: 0 repeat(2, 1fr) 0
  123.           grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
  124.           grid-template-areas: |
  125.            ".  .           .            ."
  126.             ".  sidebar     sidebar      ."
  127.             ".  esszimmer   wohnzimmer   ."
  128.             ".  aussen      heizung      ."
  129.             ".  media       familie      ."
  130.             ".  footer      footer       ."
  131.             ".  .           .            ."
  132.         '(max-width: 1200px)':
  133.           grid-gap: var(--custom-layout-card-padding)
  134.           grid-template-columns: repeat(3, 1fr) 0
  135.           grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
  136.           grid-template-areas: |
  137.            "sidebar  .           .           ."
  138.             "sidebar  esszimmer   wohnzimmer  ."
  139.             "sidebar  aussen      heizung     ."
  140.             "sidebar  media       familie     ."
  141.             "sidebar  footer      footer      ."
  142.             "sidebar  .           .           ."
  143.     badges: []
  144.     cards:
  145.       - type: grid
  146.         title: ⠀
  147.         cards:
  148.           - type: custom:simple-clock-card
  149.             use_military: true
  150.             hide_seconds: true
  151.             font_size: 6rem
  152.             padding_size: 1px
  153.             style: |
  154.              ha-card {
  155.                 height: 18px;
  156.                 box-shadow: none;
  157.                 background: transparent;
  158.                 font-family: SF Display;
  159.                 font-size: 25px;
  160.                 line-height: 15px;
  161.                 font-weight: 300;
  162.                 letter-spacing: 0.06vw;
  163.                 color: #6a7377;
  164.               }
  165.               :host {
  166.                 --mini-media-player-accent-color: white;
  167.               }
  168.             square: false
  169.             columns: 1
  170.           - type: markdown
  171.             style: |
  172.              ha-card {
  173.                  background-color: rgba(0,0,0,0) !important;
  174.                  box-shadow: none;
  175.                  padding-right: 10px;
  176.                  font-family: SF Display;
  177.                  font-size: 15px;
  178.                  line-height: var(--sidebar-line-height);
  179.                  font-weight: 10;
  180.                  letter-spacing: 0.06vw;
  181.                  color: #6a7377;
  182.             content: |-
  183.               <center>
  184.              <h3>
  185.              {{ now().strftime('%d.%m.%Y') }}
  186.               </h3>
  187.              </center>
  188.           - type: custom:weather-card
  189.             entity: weather.dark_sky
  190.             current: true
  191.             details: false
  192.             forecast: false
  193.             tap_action:
  194.               action: none
  195.             style: |
  196.              ha-card {
  197.               background-color:transparent;
  198.               box-shadow: none;
  199.               font-size: 0.65vw!important;
  200.               font-family: SF Display;
  201.               line-height: var(--sidebar-line-height);
  202.               font-weight: 10;
  203.               letter-spacing: 0.06vw;
  204.               color: #6a7377!important;
  205.               }
  206.             number_of_forecasts: '5'
  207.             icon: ''
  208.             name: ''
  209.           - type: markdown
  210.             style: |
  211.              ha-card {
  212.                  background-color: rgba(0,0,0,0) !important;
  213.                  box-shadow: none;
  214.                  padding-right: 10px;
  215.                  font-family: SF Display;
  216.                  font-size: 15px;
  217.                  line-height: 13px;
  218.                  font-weight: 20;
  219.                  letter-spacing: 0.05vw!important;
  220.                  color: #6a7377;
  221.             content: >-
  222.               <h4>
  224.               {{states.sensor.open_windows.state}}
  225.  
  226.  
  227.               {{states.sensor.open_doors.state}}
  228.  
  229.  
  230.               Zur Zeit sind {{ states.light
  231.  
  232.               | rejectattr('attributes.entity_id', 'defined')
  233.  
  234.               | selectattr('state','eq','on')
  235.  
  236.               | list | count }} Lampen an.
  237.  
  238.               </h4>
  240.               <h4><br>
  242.               {{ states.sensor.abfallnaechster.attributes.values() | first |
  244.               replace("papier","Papiermüll") | replace("bio","Biomüll") |
  245.  
  246.               replace("gelbersack", "Gelber Sack") | replace("rest", "Restmüll")
  247.               |
  248.               replace("papier","Papiermüll") }}
  249.               </h4>
  251.               <h4>
  252.               {{ states.sensor.abfallnaechster.attributes | first |
  253.                 as_timestamp | timestamp_custom("%d.%m.%Y") }}
  254.               <h4><br>
  255.               Spritpreis
  256.               </h4>
  258.               <h4>
  259.               {{states.sensor.tankerkoenig_star_tankstelle_e5.state}}
  260.           - type: custom:mini-media-player
  261.             padding-size: 80px
  262.             entity: media_player.wohnzimmer_2_2
  263.             style: |
  264.              ha-card {
  265.                 background-color:transparent;
  266.                 box-shadow: none;
  267.                 font-size: 0.85vw!important;
  268.               }
  269.             toggle_power: false
  270.             volume_stateless: false
  271.             group: true
  272.             source: icon
  273.             sound_mode: icon
  274.             replace_mute: stop
  275.             name: Sonos
  276.             icon: mdi:music-circle-outline
  277.             hide:
  278.               volume: true
  279.               source: true
  280.               controls: true
  281.               power: true
  282.             info: scroll
  283.             artwork: none
  284.         square: false
  285.         columns: 1
  286.         view_layout:
  287.           grid-area: sidebar
  288.       - type: grid
  289.         cards:
  290.           - type: custom:button-card
  291.             entity: light.cabinettw_z3_01
  292.             aspect_ratio: 1
  293.             name: Küche
  294.             color_type: card
  295.             show_state: true
  296.             hold_action:
  297.               action: fire-dom-event
  298.               browser_mod:
  299.                 command: popup
  300.                 title: Küche
  301.                 hide_header: false
  302.                 style:
  303.                   hui-light-popup-card:
  304.                     $hui-light-entity-card$: |
  305.                      #states {
  306.                         padding-top: 0.5em;
  307.                         padding-bottom: 1.2em;
  308.                         borderRadius: 1.7em;
  309.                       }
  310.                 card:
  311.                   type: custom:light-popup-card
  312.                   fullscreen: false
  313.                   entity: light.cabinettw_z3_01
  314.                   icon: none
  315.                   displayType: slider
  316.                   sliderColoredByLight: true
  317.                   actionsInARow: 2
  318.                   offStates: null
  319.                   brightnessWidth: 130px
  320.                   brightnessHeight: 320px
  321.                   borderRadius: 1.7em
  322.                   sliderColor: '#c7c7c7'
  323.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  324.                   actions:
  325.                     - action: fire-dom-event
  326.                       color: '#FDCA64'
  327.                       name: Farbe
  328.                       browser_mod:
  329.                         command: popup
  330.                         title: Farbe
  331.                         card:
  332.                           type: custom:light-entity-card
  333.                           entity: light.cabinettw_z3_01
  334.                           hide_header: true
  335.                           brightness: true
  336.                           color_temp: true
  337.                           white_value: true
  338.             custom_fields:
  339.               Circle: >
  340.                [[[ {
  341.  
  342.                 const temp = Math.round(entity.attributes.brightness / 2.64);
  343.  
  344.                 const radius = 20.5;
  345.  
  346.                 const circumference = radius * 2 * Math.PI;
  347.  
  348.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  349.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  350.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  351.                 * circumference};}
  352.  
  353.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  354.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  355.                 style="
  356.  
  357.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  358.  
  359.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  360.                 text-anchor="middle" alignment-baseline="middle"
  361.                 dominant-baseline="middle">${temp}%</text></svg>`; } ]]]
  362.             show_entity_picture: true
  363.             styles:
  364.               card:
  365.                 - font-family: Sf Display
  366.                 - border-radius: var(--custom-button-card-border-radius)
  367.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  368.                 - transition: none
  369.                 - padding: 10%
  370.               grid:
  371.                 - grid-template-areas: '"i" "n" "s"'
  372.                 - grid-template-columns: 1fr
  373.                 - grid-template-rows: 1fr min-content min-content
  374.               name:
  375.                 - justify-self: start
  376.                 - padding-left: 7px
  377.                 - font-weight: bold
  378.                 - font-family: SF Display
  379.                 - font-size: 14px
  380.               img_cell:
  381.                 - justify-content: start
  382.                 - padding-left: 5px
  383.                 - padding-top: 10px
  384.                 - align-items: start
  385.                 - margin: none
  386.               state:
  387.                 - justify-self: start
  388.                 - font-color: red
  389.                 - padding-left: 7px
  390.                 - padding-bottom: 10px
  391.                 - text-transform: capitalize
  392.                 - font-family: SF Display
  393.                 - font-size: 10px
  394.               icon:
  395.                 - width: 40%
  396.               custom_fields:
  397.                 Circle:
  398.                   - align-self: start
  399.                   - position: absolute
  400.                   - left: 55%
  401.                   - top: 10%
  402.                   - width: 40%
  403.                   - font-size: 18px
  404.                   - font-weight: 900
  405.                   - font-family: SF Display
  406.                   - text-transform: capitalize
  407.             state:
  408.               - value: 'on'
  409.                 entity_picture: \local\img\icons8-kitchen-room-48.png
  410.                 color: rgba(255,255,255,0.9)
  411.               - value: 'off'
  412.                 entity_picture: \local\img\icons8-kitchen-room-48.png
  413.                 color: rgba(65,65,63,0.8)
  414.                 styles:
  415.                   card:
  416.                     - filter: opacity(50%)
  417.                   icon:
  418.                     - filter: grayscale(100%)
  419.           - type: custom:button-card
  420.             entity: light.wohnzimmer_2
  421.             aspect_ratio: 1
  422.             name: Tresen
  423.             color_type: card
  424.             show_state: true
  425.             show_entity_picture: true
  426.             styles:
  427.               card:
  428.                 - font-family: Sf Display
  429.                 - border-radius: var(--custom-button-card-border-radius)
  430.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  431.                 - transition: none
  432.                 - padding: 10%
  433.               grid:
  434.                 - grid-template-areas: '"i" "n" "s"'
  435.                 - grid-template-columns: 1fr
  436.                 - grid-template-rows: 1fr min-content min-content
  437.               name:
  438.                 - justify-self: start
  439.                 - padding-left: 7px
  440.                 - font-weight: bold
  441.                 - font-family: SF Display
  442.                 - font-size: 14px
  443.               img_cell:
  444.                 - justify-content: start
  445.                 - padding-left: 5px
  446.                 - padding-top: 10px
  447.                 - align-items: start
  448.                 - margin: none
  449.               state:
  450.                 - justify-self: start
  451.                 - font-color: red
  452.                 - padding-left: 7px
  453.                 - padding-bottom: 10px
  454.                 - text-transform: capitalize
  455.                 - font-family: SF Display
  456.                 - font-size: 10px
  457.               icon:
  458.                 - width: 40%
  459.               custom_fields:
  460.                 Circle:
  461.                   - align-self: start
  462.                   - position: absolute
  463.                   - left: 55%
  464.                   - top: 10%
  465.                   - width: 40%
  466.                   - font-size: 18px
  467.                   - font-weight: 900
  468.                   - font-family: SF Display
  469.                   - text-transform: capitalize
  470.             state:
  471.               - value: 'on'
  472.                 entity_picture: \local\img\icons8-cupboard-48.png
  473.                 color: rgba(255,255,255,0.9)
  474.               - value: 'off'
  475.                 entity_picture: \local\img\icons8-cupboard-48.png
  476.                 color: rgba(65,65,63,0.8)
  477.                 styles:
  478.                   card:
  479.                     - filter: opacity(50%)
  480.                   icon:
  481.                     - filter: grayscale(100%)
  482.           - type: custom:button-card
  483.             entity: light.lampen_esstisch
  484.             aspect_ratio: 1
  485.             name: Esstisch
  486.             color_type: card
  487.             show_state: true
  488.             hold_action:
  489.               action: fire-dom-event
  490.               browser_mod:
  491.                 command: popup
  492.                 title: Esstisch
  493.                 card:
  494.                   type: custom:light-popup-card
  495.                   fullscreen: false
  496.                   entity: light.lampen_esstisch
  497.                   icon: none
  498.                   displayType: slider
  499.                   sliderColoredByLight: true
  500.                   actionsInARow: 1
  501.                   brightnessWidth: 130px
  502.                   brightnessHeight: 360px
  503.                   borderRadius: 1.7em
  504.                   sliderColor: '#c7c7c7'
  505.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  506.                   actions:
  507.                     - action: fire-dom-event
  508.                       color: '#FDCA64'
  509.                       name: Farbe
  510.                       browser_mod:
  511.                         command: popup
  512.                         title: []
  513.                         card:
  514.                           type: custom:light-entity-card
  515.                           entity: light.lampen_esstisch
  516.                           hide_header: true
  517.                           brightness: true
  518.                           color_temp: true
  519.             custom_fields:
  520.               Circle: >
  521.                [[[ {
  522.  
  523.                 const temp = Math.round(entity.attributes.brightness / 2.64);
  524.  
  525.                 const radius = 20.5;
  526.  
  527.                 const circumference = radius * 2 * Math.PI;
  528.  
  529.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  530.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  531.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  532.                 * circumference};}
  533.  
  534.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  535.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  536.                 style="
  537.  
  538.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  539.  
  540.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  541.                 text-anchor="middle" alignment-baseline="middle"
  542.                 dominant-baseline="middle">${temp}%</text></svg>`; } ]]]
  543.             show_entity_picture: true
  544.             styles:
  545.               card:
  546.                 - font-family: Sf Display
  547.                 - border-radius: var(--custom-button-card-border-radius)
  548.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  549.                 - transition: none
  550.                 - padding: 10%
  551.               grid:
  552.                 - grid-template-areas: '"i" "n" "s"'
  553.                 - grid-template-columns: 1fr
  554.                 - grid-template-rows: 1fr min-content min-content
  555.               name:
  556.                 - justify-self: start
  557.                 - padding-left: 7px
  558.                 - font-weight: bold
  559.                 - font-family: SF Display
  560.                 - font-size: 14px
  561.               img_cell:
  562.                 - justify-content: start
  563.                 - padding-left: 5px
  564.                 - padding-top: 10px
  565.                 - align-items: start
  566.                 - margin: none
  567.               state:
  568.                 - justify-self: start
  569.                 - font-color: red
  570.                 - padding-left: 7px
  571.                 - padding-bottom: 10px
  572.                 - text-transform: capitalize
  573.                 - font-family: SF Display
  574.                 - font-size: 10px
  575.               icon:
  576.                 - width: 40%
  577.               custom_fields:
  578.                 Circle:
  579.                   - align-self: start
  580.                   - position: absolute
  581.                   - left: 55%
  582.                   - top: 10%
  583.                   - width: 40%
  584.                   - font-size: 18px
  585.                   - font-weight: 900
  586.                   - font-family: SF Display
  587.                   - text-transform: capitalize
  588.             state:
  589.               - value: 'on'
  590.                 entity_picture: \local\img\icons8-beleuchtung-50.png
  591.                 color: rgba(255,255,255,0.9)
  592.               - value: 'off'
  593.                 entity_picture: \local\img\icons8-beleuchtung-50.png
  594.                 color: rgba(65,65,63,0.8)
  595.                 styles:
  596.                   card:
  597.                     - filter: opacity(50%)
  598.                   icon:
  599.                     - filter: grayscale(100%)
  600.           - type: custom:button-card
  601.             entity: light.esszimmer_1
  602.             aspect_ratio: 1
  603.             name: Esszimmer
  604.             color_type: card
  605.             show_state: true
  606.             hold_action:
  607.               action: fire-dom-event
  608.               browser_mod:
  609.                 command: popup
  610.                 title: Esszimmer
  611.                 card:
  612.                   type: custom:light-popup-card
  613.                   fullscreen: false
  614.                   entity: light.esszimmer_1
  615.                   icon: none
  616.                   displayType: slider
  617.                   sliderColoredByLight: true
  618.                   actionsInARow: 1
  619.                   brightnessWidth: 100px
  620.                   brightnessHeight: 300px
  621.                   borderRadius: 1.7em
  622.                   sliderColor: '#c7c7c7'
  623.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  624.                   actions:
  625.                     - action: fire-dom-event
  626.                       color: '#FDCA64'
  627.                       name: Farbe
  628.                       browser_mod:
  629.                         command: popup
  630.                         title: []
  631.                         card:
  632.                           type: custom:light-entity-card
  633.                           entity:
  634.                            - light.esszimmer
  635.                           hide_header: true
  636.                           brightness: true
  637.                           color_temp: true
  638.                           style: |
  639.                            ha-card {
  640.                               box-shadow: none;
  641.                               background: transparent!important;
  642.                             }
  643.             custom_fields:
  644.               Circle: >
  645.                [[[ {
  646.  
  647.                 const temp = Math.round(entity.attributes.brightness / 2.64);
  648.  
  649.                 const radius = 20.5;
  650.  
  651.                 const circumference = radius * 2 * Math.PI;
  652.  
  653.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  654.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  655.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  656.                 * circumference};}
  657.  
  658.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  659.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  660.                 style="
  661.  
  662.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  663.  
  664.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  665.                 text-anchor="middle" alignment-baseline="middle"
  666.                 dominant-baseline="middle">${temp}%</text></svg>`; } ]]]
  667.             show_entity_picture: true
  668.             styles:
  669.               card:
  670.                 - font-family: Sf Display
  671.                 - border-radius: var(--custom-button-card-border-radius)
  672.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  673.                 - transition: none
  674.                 - padding: 10%
  675.               grid:
  676.                 - grid-template-areas: '"i" "n" "s"'
  677.                 - grid-template-columns: 1fr
  678.                 - grid-template-rows: 1fr min-content min-content
  679.               name:
  680.                 - justify-self: start
  681.                 - padding-left: 7px
  682.                 - font-weight: bold
  683.                 - font-family: SF Display
  684.                 - font-size: 14px
  685.               img_cell:
  686.                 - justify-content: start
  687.                 - padding-left: 5px
  688.                 - padding-top: 10px
  689.                 - align-items: start
  690.                 - margin: none
  691.               state:
  692.                 - justify-self: start
  693.                 - font-color: red
  694.                 - padding-left: 7px
  695.                 - padding-bottom: 10px
  696.                 - text-transform: capitalize
  697.                 - font-family: SF Display
  698.                 - font-size: 10px
  699.               icon:
  700.                 - width: 40%
  701.               custom_fields:
  702.                 Circle:
  703.                   - align-self: start
  704.                   - position: absolute
  705.                   - left: 55%
  706.                   - top: 10%
  707.                   - width: 40%
  708.                   - font-size: 18px
  709.                   - font-weight: 900
  710.                   - font-family: SF Display
  711.                   - text-transform: capitalize
  712.             state:
  713.               - value: 'on'
  714.                 entity_picture: \local\img\icons8-dining-room-48.png
  715.                 color: rgba(255,255,255,0.9)
  716.               - value: 'off'
  717.                 entity_picture: \local\img\icons8-dining-room-48.png
  718.                 color: rgba(65,65,63,0.8)
  719.                 styles:
  720.                   card:
  721.                     - filter: opacity(50%)
  722.                   icon:
  723.                     - filter: grayscale(100%)
  724.         title: Esszimmer
  725.         columns: 2
  726.         view_layout:
  727.           grid-area: esszimmer
  728.       - type: grid
  729.         cards:
  730.           - type: custom:button-card
  731.             entity: light.fernseher
  732.             aspect_ratio: 1
  733.             name: Fernseher
  734.             color_type: card
  735.             show_state: true
  736.             hold_action:
  737.               action: fire-dom-event
  738.               browser_mod:
  739.                 command: popup
  740.                 title: Esszimmer
  741.                 card:
  742.                   type: custom:light-popup-card
  743.                   fullscreen: false
  744.                   entity: light.fernseher
  745.                   icon: none
  746.                   displayType: slider
  747.                   sliderColoredByLight: true
  748.                   actionsInARow: 1
  749.                   offStates: null
  750.                   brightnessWidth: 130px
  751.                   brightnessHeight: 320px
  752.                   borderRadius: 1.7em
  753.                   sliderColor: '#c7c7c7'
  754.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  755.                   actions:
  756.                     - action: fire-dom-event
  757.                       color: '#FDCA64'
  758.                       name: Farbe
  759.                       browser_mod:
  760.                         command: popup
  761.                         title: []
  762.                         card:
  763.                           type: custom:light-entity-card
  764.                           entity:
  765.                            - light.fernseher
  766.                           hide_header: true
  767.                           brightness: true
  768.                           color_temp: true
  769.             custom_fields:
  770.               Circle: >
  771.                [[[ {
  772.  
  773.                 const temp = Math.round(entity.attributes.brightness / 2.64);
  774.  
  775.                 const radius = 20.5;
  776.  
  777.                 const circumference = radius * 2 * Math.PI;
  778.  
  779.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  780.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  781.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  782.                 * circumference};}
  783.  
  784.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  785.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  786.                 style="
  787.  
  788.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  789.  
  790.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  791.                 text-anchor="middle" alignment-baseline="middle"
  792.                 dominant-baseline="middle">${temp}%</text></svg>`; } ]]]
  793.             show_entity_picture: true
  794.             styles:
  795.               card:
  796.                 - font-family: Sf Display
  797.                 - border-radius: var(--custom-button-card-border-radius)
  798.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  799.                 - transition: none
  800.                 - padding: 10%
  801.               grid:
  802.                 - grid-template-areas: '"i" "n" "s"'
  803.                 - grid-template-columns: 1fr
  804.                 - grid-template-rows: 1fr min-content min-content
  805.               name:
  806.                 - justify-self: start
  807.                 - padding-left: 7px
  808.                 - font-weight: bold
  809.                 - font-family: SF Display
  810.                 - font-size: 14px
  811.               img_cell:
  812.                 - justify-content: start
  813.                 - padding-left: 5px
  814.                 - padding-top: 10px
  815.                 - align-items: start
  816.                 - margin: none
  817.               state:
  818.                 - justify-self: start
  819.                 - font-color: red
  820.                 - padding-left: 7px
  821.                 - padding-bottom: 10px
  822.                 - text-transform: capitalize
  823.                 - font-family: SF Display
  824.                 - font-size: 10px
  825.               icon:
  826.                 - width: 40%
  827.               custom_fields:
  828.                 Circle:
  829.                   - align-self: start
  830.                   - position: absolute
  831.                   - left: 55%
  832.                   - top: 10%
  833.                   - width: 40%
  834.                   - font-size: 18px
  835.                   - font-weight: 900
  836.                   - font-family: SF Display
  837.                   - text-transform: capitalize
  838.             state:
  839.               - value: 'on'
  840.                 entity_picture: \local\img\icons8-scoop-beleuchtung-48.png
  841.                 color: rgba(255,255,255,0.9)
  842.               - value: 'off'
  843.                 entity_picture: \local\img\icons8-scoop-beleuchtung-48.png
  844.                 color: rgba(65,65,63,0.8)
  845.                 styles:
  846.                   card:
  847.                     - filter: opacity(50%)
  848.                   icon:
  849.                     - filter: grayscale(100%)
  850.               - value: unavailable
  851.                 entity_picture: \local\img\icons8-achtung-48.png
  852.                 color: rgba(255,0,0,0.8)
  853.           - type: custom:button-card
  854.             entity: light.licht_vitrine
  855.             aspect_ratio: 1
  856.             name: Vitrine
  857.             color_type: card
  858.             show_state: true
  859.             hold_action:
  860.               action: fire-dom-event
  861.               browser_mod:
  862.                 command: popup
  863.                 title: Vitrine
  864.                 card:
  865.                   type: custom:light-popup-card
  866.                   fullscreen: false
  867.                   entity: light.licht_vitrine
  868.                   icon: none
  869.                   displayType: slider
  870.                   sliderColoredByLight: true
  871.                   actionsInARow: 1
  872.                   offStates: null
  873.                   brightnessWidth: 130px
  874.                   brightnessHeight: 320px
  875.                   borderRadius: 1.7em
  876.                   sliderColor: '#c7c7c7'
  877.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  878.                   actions:
  879.                     - action: fire-dom-event
  880.                       color: '#FDCA64'
  881.                       name: Farbe
  882.                       browser_mod:
  883.                         command: popup
  884.                         title: []
  885.                         card:
  886.                           type: custom:light-entity-card
  887.                           entity:
  888.                            - light.licht_vitrine
  889.                           hide_header: true
  890.                           brightness: true
  891.                           color_temp: true
  892.             custom_fields:
  893.               Circle: >
  894.                [[[ {
  895.  
  896.                 const temp = Math.round(entity.attributes.brightness / 2.64);
  897.  
  898.                 const radius = 20.5;
  899.  
  900.                 const circumference = radius * 2 * Math.PI;
  901.  
  902.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  903.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  904.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  905.                 * circumference};}
  906.  
  907.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  908.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  909.                 style="
  910.  
  911.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  912.  
  913.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  914.                 text-anchor="middle" alignment-baseline="middle"
  915.                 dominant-baseline="middle">${temp}%</text></svg>`; } ]]]
  916.             show_entity_picture: true
  917.             styles:
  918.               card:
  919.                 - font-family: Sf Display
  920.                 - border-radius: var(--custom-button-card-border-radius)
  921.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  922.                 - transition: none
  923.                 - padding: 10%
  924.               grid:
  925.                 - grid-template-areas: '"i" "n" "s"'
  926.                 - grid-template-columns: 1fr
  927.                 - grid-template-rows: 1fr min-content min-content
  928.               name:
  929.                 - justify-self: start
  930.                 - padding-left: 7px
  931.                 - font-weight: bold
  932.                 - font-family: SF Display
  933.                 - font-size: 14px
  934.               img_cell:
  935.                 - justify-content: start
  936.                 - padding-left: 5px
  937.                 - padding-top: 10px
  938.                 - align-items: start
  939.                 - margin: none
  940.               state:
  941.                 - justify-self: start
  942.                 - font-color: red
  943.                 - padding-left: 7px
  944.                 - padding-bottom: 10px
  945.                 - text-transform: capitalize
  946.                 - font-family: SF Display
  947.                 - font-size: 10px
  948.               icon:
  949.                 - width: 40%
  950.               custom_fields:
  951.                 Circle:
  952.                   - align-self: start
  953.                   - position: absolute
  954.                   - left: 55%
  955.                   - top: 10%
  956.                   - width: 40%
  957.                   - font-size: 18px
  958.                   - font-weight: 900
  959.                   - font-family: SF Display
  960.                   - text-transform: capitalize
  961.             state:
  962.               - value: 'on'
  963.                 entity_picture: \local\img\icons8-schrank-mit-schiebetür-48.png
  964.                 color: rgba(255,255,255,0.9)
  965.               - value: 'off'
  966.                 entity_picture: \local\img\icons8-schrank-mit-schiebetür-48.png
  967.                 color: rgba(65,65,63,0.8)
  968.                 styles:
  969.                   card:
  970.                     - filter: opacity(50%)
  971.                   icon:
  972.                     - filter: grayscale(100%)
  973.           - type: custom:button-card
  974.             entity: light.color_temperature_light_5
  975.             aspect_ratio: 1
  976.             name: Schrank
  977.             color_type: card
  978.             show_state: true
  979.             hold_action:
  980.               action: fire-dom-event
  981.               browser_mod:
  982.                 command: popup
  983.                 title: Esszimmer
  984.                 card:
  985.                   type: custom:light-popup-card
  986.                   fullscreen: false
  987.                   entity: light.color_temperature_light_5
  988.                   icon: none
  989.                   displayType: slider
  990.                   sliderColoredByLight: true
  991.                   actionsInARow: 1
  992.                   offStates: null
  993.                   brightnessWidth: 130px
  994.                   brightnessHeight: 320px
  995.                   borderRadius: 1.7em
  996.                   sliderColor: '#c7c7c7'
  997.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  998.                   actions:
  999.                     - action: fire-dom-event
  1000.                       color: '#FDCA64'
  1001.                       name: Farbe
  1002.                       browser_mod:
  1003.                         command: popup
  1004.                         title: []
  1005.                         card:
  1006.                           type: custom:light-entity-card
  1007.                           entity:
  1008.                            - light.color_temperature_light_5
  1009.                           hide_header: true
  1010.                           brightness: true
  1011.                           color_temp: true
  1012.             custom_fields:
  1013.               Circle: >
  1014.                [[[ {
  1015.  
  1016.                 const temp = Math.round(entity.attributes.brightness / 2.64);
  1017.  
  1018.                 const radius = 20.5;
  1019.  
  1020.                 const circumference = radius * 2 * Math.PI;
  1021.  
  1022.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  1023.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  1024.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  1025.                 * circumference};}
  1026.  
  1027.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  1028.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  1029.                 style="
  1030.  
  1031.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  1032.  
  1033.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  1034.                 text-anchor="middle" alignment-baseline="middle"
  1035.                 dominant-baseline="middle">${temp}%</text></svg>`; } ]]]
  1036.             show_entity_picture: true
  1037.             styles:
  1038.               card:
  1039.                 - font-family: Sf Display
  1040.                 - border-radius: var(--custom-button-card-border-radius)
  1041.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1042.                 - transition: none
  1043.                 - padding: 10%
  1044.               grid:
  1045.                 - grid-template-areas: '"i" "n" "s"'
  1046.                 - grid-template-columns: 1fr
  1047.                 - grid-template-rows: 1fr min-content min-content
  1048.               name:
  1049.                 - justify-self: start
  1050.                 - padding-left: 7px
  1051.                 - font-weight: bold
  1052.                 - font-family: SF Display
  1053.                 - font-size: 14px
  1054.               img_cell:
  1055.                 - justify-content: start
  1056.                 - padding-left: 5px
  1057.                 - padding-top: 10px
  1058.                 - align-items: start
  1059.                 - margin: none
  1060.               state:
  1061.                 - justify-self: start
  1062.                 - font-color: red
  1063.                 - padding-left: 7px
  1064.                 - padding-bottom: 10px
  1065.                 - text-transform: capitalize
  1066.                 - font-family: SF Display
  1067.                 - font-size: 10px
  1068.               icon:
  1069.                 - width: 40%
  1070.               custom_fields:
  1071.                 Circle:
  1072.                   - align-self: start
  1073.                   - position: absolute
  1074.                   - left: 55%
  1075.                   - top: 10%
  1076.                   - width: 40%
  1077.                   - font-size: 18px
  1078.                   - font-weight: 900
  1079.                   - font-family: SF Display
  1080.                   - text-transform: capitalize
  1081.             state:
  1082.               - value: 'on'
  1083.                 entity_picture: \local\img\icons8-lampe-48.png
  1084.                 color: rgba(255,255,255,0.9)
  1085.               - value: 'off'
  1086.                 entity_picture: \local\img\icons8-lampe-48.png
  1087.                 color: rgba(65,65,63,0.8)
  1088.                 styles:
  1089.                   card:
  1090.                     - filter: opacity(50%)
  1091.                   icon:
  1092.                     - filter: grayscale(100%)
  1093.         title: Wohnzimmer
  1094.         columns: 2
  1095.         view_layout:
  1096.           grid-area: wohnzimmer
  1097.       - type: grid
  1098.         cards:
  1099.           - type: custom:button-card
  1100.             entity: script.1634564870887
  1101.             aspect_ratio: 1
  1102.             name: Haustür öffnen
  1103.             color_type: card
  1104.             show_state: true
  1105.             show_entity_picture: true
  1106.             tap_action:
  1107.               action: call-service
  1108.               service: script.1634564870887
  1109.               confirmation:
  1110.                 text: Haustür öffnen ?
  1111.             styles:
  1112.               card:
  1113.                 - font-family: Sf Display
  1114.                 - border-radius: var(--custom-button-card-border-radius)
  1115.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1116.                 - transition: none
  1117.                 - padding: 10%
  1118.               grid:
  1119.                 - grid-template-areas: '"i" "n" "s"'
  1120.                 - grid-template-columns: 1fr
  1121.                 - grid-template-rows: 1fr min-content min-content
  1122.               name:
  1123.                 - justify-self: start
  1124.                 - padding-left: 7px
  1125.                 - font-weight: bold
  1126.                 - font-family: SF Display
  1127.                 - font-size: 14px
  1128.               img_cell:
  1129.                 - justify-content: start
  1130.                 - padding-left: 5px
  1131.                 - padding-top: 10px
  1132.                 - align-items: start
  1133.                 - margin: none
  1134.               state:
  1135.                 - justify-self: start
  1136.                 - font-color: red
  1137.                 - padding-left: 7px
  1138.                 - padding-bottom: 10px
  1139.                 - text-transform: capitalize
  1140.                 - font-family: SF Display
  1141.                 - font-size: 10px
  1142.               icon:
  1143.                 - width: 40%
  1144.             state:
  1145.               - value: 'on'
  1146.                 entity_picture: \local\img\icons8-schloss-orientierung-48.png
  1147.                 color: rgba(255,255,255,0.9)
  1148.               - value: 'off'
  1149.                 entity_picture: \local\img\icons8-schloss-orientierung-48.png
  1150.                 color: rgba(65,65,63,0.8)
  1151.                 styles:
  1152.                   card:
  1153.                     - filter: opacity(50%)
  1154.                   icon:
  1155.                     - filter: grayscale(100%)
  1156.           - type: custom:button-card
  1157.             entity: lock.haustur
  1158.             aspect_ratio: 1
  1159.             name: Haustür
  1160.             tap_action:
  1161.               action: toggle
  1162.             color_type: card
  1163.             show_state: true
  1164.             show_entity_picture: true
  1165.             styles:
  1166.               card:
  1167.                 - font-family: Sf Display
  1168.                 - border-radius: var(--custom-button-card-border-radius)
  1169.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1170.                 - transition: none
  1171.                 - padding: 10%
  1172.               grid:
  1173.                 - grid-template-areas: '"i" "n" "s"'
  1174.                 - grid-template-columns: 1fr
  1175.                 - grid-template-rows: 1fr min-content min-content
  1176.               name:
  1177.                 - justify-self: start
  1178.                 - padding-left: 7px
  1179.                 - font-weight: bold
  1180.                 - font-family: SF Display
  1181.                 - font-size: 14px
  1182.               img_cell:
  1183.                 - justify-content: start
  1184.                 - padding-left: 5px
  1185.                 - padding-top: 10px
  1186.                 - align-items: start
  1187.                 - margin: none
  1188.               state:
  1189.                 - justify-self: start
  1190.                 - font-color: red
  1191.                 - padding-left: 7px
  1192.                 - padding-bottom: 10px
  1193.                 - text-transform: capitalize
  1194.                 - font-family: SF Display
  1195.                 - font-size: 10px
  1196.               icon:
  1197.                 - width: 40%
  1198.             state:
  1199.               - value: locked
  1200.                 entity_picture: \local\img\icons8-sperren-48.png
  1201.                 color: rgba(255,255,255,0.9)
  1202.               - value: unlocked
  1203.                 entity_picture: \local\img\icons8-entsperren-48.png
  1204.                 color: rgba(65,65,63,0.8)
  1205.                 styles:
  1206.                   card:
  1207.                     - filter: opacity(50%)
  1208.                   icon:
  1209.                     - filter: grayscale(100%)
  1210.           - type: custom:button-card
  1211.             entity: camera.vorderseite
  1212.             camera_view: live
  1213.             aspect_ratio: 1
  1214.             name: Kamera
  1215.             color_type: card
  1216.             show_state: true
  1217.             tap_action:
  1218.               action: fire-dom-event
  1219.               browser_mod:
  1220.                 command: popup
  1221.                 title: Eingang
  1222.                 style:
  1223.                   hui-vertical-stack-card:
  1224.                     $hui-entities-card$: |
  1225.                      #states {
  1226.                         padding-top: 0.5em;
  1227.                         padding-bottom: 1.2em;
  1228.                       }
  1229.                 card:
  1230.                   type: vertical-stack
  1231.                   cards:
  1232.                     - type: picture-entity
  1233.                       entity: camera.vorderseite
  1234.                       camera_view: live
  1235.                     - type: entities
  1236.                       card_mod:
  1237.                         class: content
  1238.                       entities:
  1239.                         - entity: binary_sensor.presence_47
  1240.                           secondary_info: last-changed
  1241.                           name: Bewegung Eingang
  1242.                         - entity: sensor.carport_temperature_2
  1243.                           name: Temperatur
  1244.                     - type: custom:mini-graph-card
  1245.                       entities:
  1246.                         - entity: sensor.carport_temperature_2
  1247.                       line_width: 6
  1248.                       hour24: true
  1249.                       group: true
  1250.                       lign_icon: left
  1251.                       align_state: right
  1252.                       align_header: left
  1253.                       hours_to_show: 24
  1254.                       show:
  1255.                         fill: fade
  1256.                         icon: false
  1257.                         name: false
  1258.                         state: false
  1259.                         name_adaptive_color: false
  1260.                         labels: hover
  1261.                         legend: false
  1262.                       tap_action:
  1263.                         action: none
  1264.             show_entity_picture: true
  1265.             styles:
  1266.               card:
  1267.                 - font-family: Sf Display
  1268.                 - border-radius: var(--custom-button-card-border-radius)
  1269.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1270.                 - transition: none
  1271.                 - padding: 10%
  1272.               grid:
  1273.                 - grid-template-areas: '"i" "n" "s"'
  1274.                 - grid-template-columns: 1fr
  1275.                 - grid-template-rows: 1fr min-content min-content
  1276.               name:
  1277.                 - justify-self: start
  1278.                 - padding-left: 7px
  1279.                 - font-weight: bold
  1280.                 - font-family: SF Display
  1281.                 - font-size: 14px
  1282.               img_cell:
  1283.                 - justify-content: start
  1284.                 - padding-left: 5px
  1285.                 - padding-top: 10px
  1286.                 - align-items: start
  1287.                 - margin: none
  1288.               state:
  1289.                 - justify-self: start
  1290.                 - font-color: red
  1291.                 - padding-left: 7px
  1292.                 - padding-bottom: 10px
  1293.                 - text-transform: capitalize
  1294.                 - font-family: SF Display
  1295.                 - font-size: 10px
  1296.               icon:
  1297.                 - width: 40%
  1298.             state:
  1299.               - value: 'on'
  1300.                 entity_picture: \local\img\icons8-außenkamera-48.png
  1301.                 color: rgba(255,255,255,0.9)
  1302.               - value: idle
  1303.                 entity_picture: \local\img\icons8-außenkamera-48.png
  1304.                 color: rgba(65,65,63,0.8)
  1305.                 styles:
  1306.                   card:
  1307.                     - filter: opacity(50%)
  1308.                   icon:
  1309.                     - filter: grayscale(100%)
  1310.           - type: custom:button-card
  1311.             entity: alarm_control_panel.home
  1312.             aspect_ratio: 1
  1313.             show_title: false
  1314.             tap_action:
  1315.               action: fire-dom-event
  1316.               browser_mod:
  1317.                 command: popup
  1318.                 title: Alarm
  1319.                 style:
  1320.                   hui-vertical-stack-card: null
  1321.                   $hui-entities-card$: |
  1322.                    #states {
  1323.                       padding-top: 0.5em;
  1324.                       padding-bottom: 1.2em;
  1325.                     }
  1326.                 card:
  1327.                   type: vertical-stack
  1328.                   cards:
  1329.                     - type: custom:alarmo-card
  1330.                       entity: alarm_control_panel.home
  1331.                       keep_keypad_visible: true
  1332.             show_entity_picture: true
  1333.             color_type: card
  1334.             show_state: true
  1335.             styles:
  1336.               card:
  1337.                 - font-family: Sf Display
  1338.                 - border-radius: var(--custom-button-card-border-radius)
  1339.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1340.                 - transition: none
  1341.                 - padding: 10%
  1342.               grid:
  1343.                 - grid-template-areas: '"i" "n" "s"'
  1344.                 - grid-template-columns: 1fr
  1345.                 - grid-template-rows: 1fr min-content min-content
  1346.               name:
  1347.                 - justify-self: start
  1348.                 - padding-left: 7px
  1349.                 - font-weight: bold
  1350.                 - font-family: SF Display
  1351.                 - font-size: 14px
  1352.               img_cell:
  1353.                 - justify-content: start
  1354.                 - padding-left: 5px
  1355.                 - padding-top: 10px
  1356.                 - align-items: start
  1357.                 - margin: none
  1358.               state:
  1359.                 - justify-self: start
  1360.                 - font-color: red
  1361.                 - padding-left: 7px
  1362.                 - padding-bottom: 10px
  1363.                 - text-transform: capitalize
  1364.                 - font-family: SF Display
  1365.                 - font-size: 10px
  1366.               icon:
  1367.                 - width: 40%
  1368.             state:
  1369.               - value: armed_away
  1370.                 entity_picture: \local\img\icons8-gesichert-durch-alarmanlage-48.png
  1371.                 color: rgba(255,255,255,0.9)
  1372.               - value: armed_home
  1373.                 entity_picture: \local\img\icons8-gesichert-durch-alarmanlage-48.png
  1374.                 color: rgba(255,255,255,0.9)
  1375.               - value: pending
  1376.                 entity_picture: \local\img\icons8-gesichert-durch-alarmanlage-48.png
  1377.                 color: rgba(255,255,255,0.9)
  1378.               - value: triggered
  1379.                 entity_picture: \local\img\icons8-gesichert-durch-alarmanlage-48.png
  1380.                 color: rgba(255,255,255,0.9)
  1381.               - value: arming
  1382.                 entity_picture: \local\img\icons8-gesichert-durch-alarmanlage-48.png
  1383.               - value: disarmed
  1384.                 entity_picture: \local\img\icons8-gesichert-durch-alarmanlage-48.png
  1385.                 color: rgba(65,65,63,0.8)
  1386.                 styles:
  1387.                   card:
  1388.                     - filter: opacity(50%)
  1389.                   icon:
  1390.                     - filter: grayscale(100%)
  1391.         title: Aussenbereich
  1392.         columns: 2
  1393.         view_layout:
  1394.           grid-area: aussen
  1395.       - type: grid
  1396.         cards:
  1397.           - type: custom:button-card
  1398.             entity: media_player.wohnzimmer_2_2
  1399.             aspect_ratio: 1
  1400.             tap_action:
  1401.               action: fire-dom-event
  1402.               browser_mod:
  1403.                 command: popup
  1404.                 title: Sonos
  1405.                 card:
  1406.                   type: custom:media_player-popup-card
  1407.                   fullscreen: false
  1408.                   sliderWidth: 130px
  1409.                   sliderHeight: 320px
  1410.                   borderRadius: 1.7em
  1411.                   sliderColor: '#c7c7c7'
  1412.                   sliderTrackColor: rgba(25, 25, 25, 0.9)
  1413.                   entity: media_player.wohnzimmer_2_2
  1414.                   actions:
  1415.                     - service: media_player.media_previous_track
  1416.                       service_data:
  1417.                         entity_id: this
  1418.                       name: previous
  1419.                       icon: mdi:skip-previous
  1420.                     - service: media_player.media_play_pause
  1421.                       service_data:
  1422.                         entity_id: this
  1423.                       name: play/pause
  1424.                       icon: mdi:play-pause
  1425.                     - service: media_player.media_next_track
  1426.                       service_data:
  1427.                         entity_id: this
  1428.                       name: next
  1429.                       icon: mdi:skip-next
  1430.             name: Sonos
  1431.             color_type: card
  1432.             show_state: false
  1433.             show_entity_picture: true
  1434.             styles:
  1435.               card:
  1436.                 - font-family: Sf Display
  1437.                 - border-radius: var(--custom-button-card-border-radius)
  1438.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1439.                 - transition: none
  1440.                 - padding: 10%
  1441.               grid:
  1442.                 - grid-template-areas: '"i" "n" "s"'
  1443.                 - grid-template-columns: 1fr
  1444.                 - grid-template-rows: 1fr min-content min-content
  1445.               name:
  1446.                 - justify-self: start
  1447.                 - padding-left: 7px
  1448.                 - font-weight: bold
  1449.                 - padding-bottom: 25px
  1450.                 - font-family: SF Display
  1451.                 - font-size: 14px
  1452.               img_cell:
  1453.                 - justify-content: start
  1454.                 - padding-left: 5px
  1455.                 - padding-top: 10px
  1456.                 - align-items: start
  1457.                 - margin: none
  1458.               state:
  1459.                 - justify-self: start
  1460.                 - font-color: red
  1461.                 - padding-left: 7px
  1462.                 - padding-bottom: 10px
  1463.                 - text-transform: capitalize
  1464.                 - font-family: SF Display
  1465.                 - font-size: 10px
  1466.               icon:
  1467.                 - width: 40%
  1468.               custom_fields:
  1469.                 Playing:
  1470.                   - align-self: start
  1471.                   - position: absolute
  1472.                   - left: 55%
  1473.                   - top: 10%
  1474.                   - width: 40%
  1475.                   - font-size: 18px
  1476.                   - font-weight: 900
  1477.                   - font-family: SF Display
  1478.                   - text-transform: capitalize
  1479.             state:
  1480.               - value: playing
  1481.                 entity_picture: \local\img\icons8-sonos-speaker-50.png
  1482.                 color: rgba(255,255,255,0.9)
  1483.               - value: paused
  1484.                 entity_picture: \local\img\icons8-sonos-speaker-50.png
  1485.                 color: rgba(65,65,63,0.8)
  1486.                 styles:
  1487.                   card:
  1488.                     - filter: opacity(50%)
  1489.                   icon:
  1490.                     - filter: grayscale(100%)
  1491.           - type: custom:button-card
  1492.             entity: switch.xbox_one
  1493.             aspect_ratio: 1
  1494.             color_type: card
  1495.             show_state: true
  1496.             name: XBox
  1497.             show_title: false
  1498.             tap_action:
  1499.               action: toggle
  1500.             hold_action:
  1501.               action: fire-dom-event
  1502.               browser_mod:
  1503.                 command: popup
  1504.                 title: Xbox One
  1505.                 card:
  1506.                   type: custom:stack-in-card
  1507.                   cards:
  1508.                     - entity: media_player.xboxone
  1509.                       type: custom:mini-media-player
  1510.                       artwork: material
  1511.                       icon: mdi:microsoft-xbox-controller
  1512.                       name: Spiel
  1513.                       group: true
  1514.                       scale: 0.8
  1515.                       hide:
  1516.                         volume: true
  1517.                         controls: true
  1518.                         power: true
  1519.                         info: false
  1520.             show_entity_picture: true
  1521.             styles:
  1522.               card:
  1523.                 - font-family: Sf Display
  1524.                 - border-radius: var(--custom-button-card-border-radius)
  1525.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1526.                 - transition: none
  1527.                 - padding: 10%
  1528.               grid:
  1529.                 - grid-template-areas: '"i" "n" "s"'
  1530.                 - grid-template-columns: 1fr
  1531.                 - grid-template-rows: 1fr min-content min-content
  1532.               name:
  1533.                 - justify-self: start
  1534.                 - padding-left: 7px
  1535.                 - font-weight: bold
  1536.                 - font-family: SF Display
  1537.                 - font-size: 14px
  1538.               img_cell:
  1539.                 - justify-content: start
  1540.                 - padding-left: 5px
  1541.                 - padding-top: 10px
  1542.                 - align-items: start
  1543.                 - margin: none
  1544.               state:
  1545.                 - justify-self: start
  1546.                 - font-color: red
  1547.                 - padding-left: 7px
  1548.                 - padding-bottom: 10px
  1549.                 - text-transform: capitalize
  1550.                 - font-family: SF Display
  1551.                 - font-size: 10px
  1552.               icon:
  1553.                 - width: 40%
  1554.             state:
  1555.               - value: 'on'
  1556.                 color: rgba(255,255,255,0.9)
  1557.                 entity_picture: \local\img\icons8-xbox-48.png
  1558.               - value: 'off'
  1559.                 color: rgba(65,65,63,0.8)
  1560.                 entity_picture: \local\img\icons8-xbox-48.png
  1561.                 styles:
  1562.                   card:
  1563.                     - filter: opacity(50%)
  1564.                   icon:
  1565.                     - filter: grayscale(100%)
  1566.           - type: custom:button-card
  1567.             entity: switch.sky_q
  1568.             show_title: false
  1569.             aspect_ratio: 1
  1570.             tap_action:
  1571.               action: toggle
  1572.             hold_action:
  1573.               action: fire-dom-event
  1574.               browser_mod:
  1575.                 command: popup
  1576.                 title: Sky Q
  1577.                 card:
  1578.                   type: custom:stack-in-card
  1579.                   cards:
  1580.                     - entity: media_player.sky_q
  1581.                       type: custom:mini-media-player
  1582.                       artwork: artwork
  1583.                       icon: mdi:television-classic
  1584.                       name: SKY Q
  1585.                       group: true
  1586.                       scale: 1
  1587.                       hide:
  1588.                         volume: true
  1589.                         controls: true
  1590.                         power: true
  1591.                         info: false
  1592.             show_entity_picture: true
  1593.             color_type: card
  1594.             show_state: true
  1595.             styles:
  1596.               card:
  1597.                 - font-family: Sf Display
  1598.                 - border-radius: var(--custom-button-card-border-radius)
  1599.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1600.                 - transition: none
  1601.                 - padding: 10%
  1602.               grid:
  1603.                 - grid-template-areas: '"i" "n" "s"'
  1604.                 - grid-template-columns: 1fr
  1605.                 - grid-template-rows: 1fr min-content min-content
  1606.               name:
  1607.                 - justify-self: start
  1608.                 - padding-left: 7px
  1609.                 - font-weight: bold
  1610.                 - font-family: SF Display
  1611.                 - font-size: 14px
  1612.               img_cell:
  1613.                 - justify-content: start
  1614.                 - padding-left: 5px
  1615.                 - padding-top: 10px
  1616.                 - align-items: start
  1617.                 - margin: none
  1618.               state:
  1619.                 - justify-self: start
  1620.                 - font-color: red
  1621.                 - padding-left: 7px
  1622.                 - padding-bottom: 10px
  1623.                 - text-transform: capitalize
  1624.                 - font-family: SF Display
  1625.                 - font-size: 10px
  1626.               icon:
  1627.                 - width: 40%
  1628.             state:
  1629.               - value: 'on'
  1630.                 color: rgba(255,255,255,0.9)
  1631.                 entity_picture: \local\img\icons8-sky-48.png
  1632.               - value: 'off'
  1633.                 color: rgba(65,65,63,0.8)
  1634.                 entity_picture: \local\img\icons8-sky-48.png
  1635.                 styles:
  1636.                   card:
  1637.                     - filter: opacity(50%)
  1638.                   icon:
  1639.                     - filter: grayscale(100%)
  1640.           - type: custom:swipe-card
  1641.             title: Lieblingssender
  1642.             aspect_ratio: 1
  1643.             show_title: false
  1644.             parameters:
  1645.               effect: coverflow
  1646.               grabCursor: true
  1647.               centeredSlides: true
  1648.               slidesPerView: auto
  1649.               coverflowEffect:
  1650.                 rotate: 50
  1651.                 stretch: 0
  1652.                 depth: 100
  1653.                 modifier: 1
  1654.                 slideShadows: true
  1655.               pagination:
  1656.                 type: none
  1657.             cards:
  1658.               - type: custom:button-card
  1659.                 entity: script.1633693084602
  1660.                 entity_picture: \local\img\icon_512-80s.png
  1661.                 aspect_ratio: 1/1
  1662.                 tap_action:
  1663.                   action: call-service
  1664.                   service: script.1633693084602
  1665.                 name: 80s80s
  1666.                 color_type: card
  1667.                 show_state: false
  1668.                 show_name: false
  1669.                 show_entity_picture: true
  1670.                 styles:
  1671.                   card:
  1672.                     - font-family: Sf Display
  1673.                     - border-radius: var(--custom-button-card-border-radius)
  1674.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1675.                     - transition: none
  1676.                     - padding: 10%
  1677.                   grid:
  1678.                     - grid-template-areas: '"i" "n" "s"'
  1679.                     - grid-template-columns: 1fr
  1680.                     - grid-template-rows: 1fr min-content min-content
  1681.                   name:
  1682.                     - justify-self: start
  1683.                     - padding-left: 7px
  1684.                     - font-weight: bold
  1685.                     - padding-bottom: 25px
  1686.                     - font-family: SF Display
  1687.                     - font-size: 14px
  1688.                   img_cell:
  1689.                     - justify-content: start
  1690.                     - padding-left: 0px
  1691.                     - padding-top: 0px
  1692.                     - align-items: start
  1693.                     - margin: none
  1694.                   state:
  1695.                     - justify-self: start
  1696.                     - font-color: red
  1697.                     - padding-left: 0px
  1698.                     - padding-bottom: 0px
  1699.                     - text-transform: capitalize
  1700.                     - font-family: SF Display
  1701.                     - font-size: 10px
  1702.                   icon:
  1703.                     - width: 100%
  1704.                     - border-radius: var(--custom-button-card-border-radius)
  1705.               - type: custom:button-card
  1706.                 entity: script.ndr2
  1707.                 entity_picture: \local\img\icon_512-ndr2.png
  1708.                 aspect_ratio: 1/1
  1709.                 tap_action:
  1710.                   action: call-service
  1711.                   service: script.ndr2
  1712.                 name: NDR 2
  1713.                 color_type: card
  1714.                 show_state: false
  1715.                 show_name: false
  1716.                 show_entity_picture: true
  1717.                 styles:
  1718.                   card:
  1719.                     - font-family: Sf Display
  1720.                     - border-radius: var(--custom-button-card-border-radius)
  1721.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1722.                     - transition: none
  1723.                     - padding: 10%
  1724.                   grid:
  1725.                     - grid-template-areas: '"i" "n" "s"'
  1726.                     - grid-template-columns: 1fr
  1727.                     - grid-template-rows: 1fr min-content min-content
  1728.                   name:
  1729.                     - justify-self: start
  1730.                     - padding-left: 7px
  1731.                     - font-weight: bold
  1732.                     - padding-bottom: 25px
  1733.                     - font-family: SF Display
  1734.                     - font-size: 14px
  1735.                   img_cell:
  1736.                     - justify-content: start
  1737.                     - padding-left: 0px
  1738.                     - padding-top: 0px
  1739.                     - align-items: start
  1740.                     - margin: none
  1741.                   state:
  1742.                     - justify-self: start
  1743.                     - font-color: red
  1744.                     - padding-left: 0px
  1745.                     - padding-bottom: 0px
  1746.                     - text-transform: capitalize
  1747.                     - font-family: SF Display
  1748.                     - font-size: 10px
  1749.                   icon:
  1750.                     - width: 100%
  1751.                     - border-radius: var(--custom-button-card-border-radius)
  1752.               - type: custom:button-card
  1753.                 entity: script.radio_hamburg
  1754.                 entity_picture: \local\img\icon_512-RHH.png
  1755.                 aspect_ratio: 1/1
  1756.                 tap_action:
  1757.                   action: call-service
  1758.                   service: script.radio_hamburg
  1759.                 name: Radio Hamburg
  1760.                 color_type: card
  1761.                 show_state: false
  1762.                 show_name: false
  1763.                 show_entity_picture: true
  1764.                 styles:
  1765.                   card:
  1766.                     - font-family: Sf Display
  1767.                     - border-radius: var(--custom-button-card-border-radius)
  1768.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1769.                     - transition: none
  1770.                     - padding: 10%
  1771.                   grid:
  1772.                     - grid-template-areas: '"i" "n" "s"'
  1773.                     - grid-template-columns: 1fr
  1774.                     - grid-template-rows: 1fr min-content min-content
  1775.                   name:
  1776.                     - justify-self: start
  1777.                     - padding-left: 7px
  1778.                     - font-weight: bold
  1779.                     - padding-bottom: 25px
  1780.                     - font-family: SF Display
  1781.                     - font-size: 14px
  1782.                   img_cell:
  1783.                     - justify-content: start
  1784.                     - padding-left: 0px
  1785.                     - padding-top: 0px
  1786.                     - align-items: start
  1787.                     - margin: none
  1788.                   state:
  1789.                     - justify-self: start
  1790.                     - font-color: red
  1791.                     - padding-left: 0px
  1792.                     - padding-bottom: 0px
  1793.                     - text-transform: capitalize
  1794.                     - font-family: SF Display
  1795.                     - font-size: 10px
  1796.                   icon:
  1797.                     - width: 100%
  1798.                     - border-radius: var(--custom-button-card-border-radius)
  1799.               - type: custom:button-card
  1800.                 entity: script.n_joy
  1801.                 entity_picture: \local\img\icon_512-Njoy.png
  1802.                 aspect_ratio: 1/1
  1803.                 tap_action:
  1804.                   action: call-service
  1805.                   service: script.n_joy
  1806.                 name: Radio Hamburg
  1807.                 color_type: card
  1808.                 show_state: false
  1809.                 show_name: false
  1810.                 show_entity_picture: true
  1811.                 styles:
  1812.                   card:
  1813.                     - font-family: Sf Display
  1814.                     - border-radius: var(--custom-button-card-border-radius)
  1815.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1816.                     - transition: none
  1817.                     - padding: 10%
  1818.                   grid:
  1819.                     - grid-template-areas: '"i" "n" "s"'
  1820.                     - grid-template-columns: 1fr
  1821.                     - grid-template-rows: 1fr min-content min-content
  1822.                   name:
  1823.                     - justify-self: start
  1824.                     - padding-left: 7px
  1825.                     - font-weight: bold
  1826.                     - padding-bottom: 25px
  1827.                     - font-family: SF Display
  1828.                     - font-size: 14px
  1829.                   img_cell:
  1830.                     - justify-content: start
  1831.                     - padding-left: 0px
  1832.                     - padding-top: 0px
  1833.                     - align-items: start
  1834.                     - margin: none
  1835.                   state:
  1836.                     - justify-self: start
  1837.                     - font-color: red
  1838.                     - padding-left: 0px
  1839.                     - padding-bottom: 0px
  1840.                     - text-transform: capitalize
  1841.                     - font-family: SF Display
  1842.                     - font-size: 10px
  1843.                   icon:
  1844.                     - width: 100%
  1845.                     - border-radius: var(--custom-button-card-border-radius)
  1846.               - type: custom:button-card
  1847.                 entity: script.spotify_mixtape
  1848.                 entity_picture: \local\img\icons8-spotify.PNG
  1849.                 aspect_ratio: 1/1
  1850.                 tap_action:
  1851.                   action: call-service
  1852.                   service: script.spotify_mixtape
  1853.                 name: Spotify Mixtape
  1854.                 color_type: card
  1855.                 show_state: false
  1856.                 show_name: false
  1857.                 show_entity_picture: true
  1858.                 styles:
  1859.                   card:
  1860.                     - font-family: Sf Display
  1861.                     - border-radius: var(--custom-button-card-border-radius)
  1862.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1863.                     - transition: none
  1864.                     - padding: 10%
  1865.                   grid:
  1866.                     - grid-template-areas: '"i" "n" "s"'
  1867.                     - grid-template-columns: 1fr
  1868.                     - grid-template-rows: 1fr min-content min-content
  1869.                   name:
  1870.                     - justify-self: start
  1871.                     - padding-left: 7px
  1872.                     - font-weight: bold
  1873.                     - padding-bottom: 25px
  1874.                     - font-family: SF Display
  1875.                     - font-size: 14px
  1876.                   img_cell:
  1877.                     - justify-content: start
  1878.                     - padding-left: 0px
  1879.                     - padding-top: 0px
  1880.                     - align-items: start
  1881.                     - margin: none
  1882.                   state:
  1883.                     - justify-self: start
  1884.                     - font-color: red
  1885.                     - padding-left: 0px
  1886.                     - padding-bottom: 0px
  1887.                     - text-transform: capitalize
  1888.                     - font-family: SF Display
  1889.                     - font-size: 10px
  1890.                   icon:
  1891.                     - width: 100%
  1892.                     - border-radius: var(--custom-button-card-border-radius)
  1893.               - type: custom:button-card
  1894.                 entity: script.fcsp_playlist
  1895.                 entity_picture: \local\img\icons8-fcsp.PNG
  1896.                 aspect_ratio: 1/1
  1897.                 tap_action:
  1898.                   action: call-service
  1899.                   service: script.fcsp_playlist
  1900.                 name: FCSP Playlist
  1901.                 color_type: card
  1902.                 show_state: false
  1903.                 show_name: false
  1904.                 show_entity_picture: true
  1905.                 styles:
  1906.                   card:
  1907.                     - font-family: Sf Display
  1908.                     - border-radius: var(--custom-button-card-border-radius)
  1909.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1910.                     - transition: none
  1911.                     - padding: 10%
  1912.                   grid:
  1913.                     - grid-template-areas: '"i" "n" "s"'
  1914.                     - grid-template-columns: 1fr
  1915.                     - grid-template-rows: 1fr min-content min-content
  1916.                   name:
  1917.                     - justify-self: start
  1918.                     - padding-left: 7px
  1919.                     - font-weight: bold
  1920.                     - padding-bottom: 25px
  1921.                     - font-family: SF Display
  1922.                     - font-size: 14px
  1923.                   img_cell:
  1924.                     - justify-content: start
  1925.                     - padding-left: 0px
  1926.                     - padding-top: 0px
  1927.                     - align-items: start
  1928.                     - margin: none
  1929.                   state:
  1930.                     - justify-self: start
  1931.                     - font-color: red
  1932.                     - padding-left: 0px
  1933.                     - padding-bottom: 0px
  1934.                     - text-transform: capitalize
  1935.                     - font-family: SF Display
  1936.                     - font-size: 10px
  1937.                   icon:
  1938.                     - width: 100%
  1939.                     - border-radius: var(--custom-button-card-border-radius)
  1940.               - type: custom:button-card
  1941.                 entity: script.mukke
  1942.                 entity_picture: \local\img\icons8-mukke.PNG
  1943.                 aspect_ratio: 1/1
  1944.                 tap_action:
  1945.                   action: call-service
  1946.                   service: script.mukke
  1947.                 name: Mukke
  1948.                 color_type: card
  1949.                 show_state: false
  1950.                 show_name: false
  1951.                 show_entity_picture: true
  1952.                 styles:
  1953.                   card:
  1954.                     - font-family: Sf Display
  1955.                     - border-radius: var(--custom-button-card-border-radius)
  1956.                     - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1957.                     - transition: none
  1958.                     - padding: 10%
  1959.                   grid:
  1960.                     - grid-template-areas: '"i" "n" "s"'
  1961.                     - grid-template-columns: 1fr
  1962.                     - grid-template-rows: 1fr min-content min-content
  1963.                   name:
  1964.                     - justify-self: start
  1965.                     - padding-left: 7px
  1966.                     - font-weight: bold
  1967.                     - padding-bottom: 25px
  1968.                     - font-family: SF Display
  1969.                     - font-size: 14px
  1970.                   img_cell:
  1971.                     - justify-content: start
  1972.                     - padding-left: 0px
  1973.                     - padding-top: 0px
  1974.                     - align-items: start
  1975.                     - margin: none
  1976.                   state:
  1977.                     - justify-self: start
  1978.                     - font-color: red
  1979.                     - padding-left: 0px
  1980.                     - padding-bottom: 0px
  1981.                     - text-transform: capitalize
  1982.                     - font-family: SF Display
  1983.                     - font-size: 10px
  1984.                   icon:
  1985.                     - width: 100%
  1986.                     - border-radius: var(--custom-button-card-border-radius)
  1987.             styles:
  1988.               card:
  1989.                 - font-family: Sf Display
  1990.                 - border-radius: var(--custom-button-card-border-radius)
  1991.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  1992.                 - transition: none
  1993.                 - padding: 10%
  1994.               grid:
  1995.                 - grid-template-areas: '"i" "n" "s"'
  1996.                 - grid-template-columns: 1fr
  1997.                 - grid-template-rows: 1fr min-content min-content
  1998.               name:
  1999.                 - justify-self: start
  2000.                 - padding-left: 7px
  2001.                 - font-weight: bold
  2002.                 - font-family: SF Display
  2003.                 - font-size: 14px
  2004.               img_cell:
  2005.                 - justify-content: start
  2006.                 - padding-left: 5px
  2007.                 - padding-top: 10px
  2008.                 - align-items: start
  2009.                 - margin: none
  2010.               state:
  2011.                 - justify-self: start
  2012.                 - font-color: red
  2013.                 - padding-left: 7px
  2014.                 - padding-bottom: 10px
  2015.                 - text-transform: capitalize
  2016.                 - font-family: SF Display
  2017.                 - font-size: 10px
  2018.         title: Media
  2019.         columns: 2
  2020.         view_layout:
  2021.           grid-area: media
  2022.       - type: grid
  2023.         cards:
  2024.           - type: custom:button-card
  2025.             entity: person.dirk_albrecht
  2026.             aspect_ratio: 1
  2027.             color_type: card
  2028.             name: Dirk
  2029.             triggers_update:
  2030.              - sensor.dirk_last_changed
  2031.               - sensor.time
  2032.             variables:
  2033.               retain: sensor.dirk_last_changed
  2034.             show_state: true
  2035.             tap_action:
  2036.               action: fire-dom-event
  2037.               browser_mod:
  2038.                 command: popup
  2039.                 title: Dirk
  2040.                 style:
  2041.                   hui-vertical-stack-card:
  2042.                     $hui-history-graph-card$: |
  2043.                      .content {
  2044.                         padding: 0.2em 1.7em 1.2em 1.7em !important;
  2045.                       }
  2046.                     $: |
  2047.                      button-card {
  2048.                         align-self: center;
  2049.                         padding: 0.2em 0 2.3em 0;
  2050.                       }
  2051.                     $hui-map-card:
  2052.                       $: |
  2053.                        mwc-icon-button {
  2054.                           color: var(--primary-color);
  2055.                         }
  2056.                         ha-card {
  2057.                           border-radius: 0;
  2058.                           animation: border 1s forwards;
  2059.                         }
  2060.                         @keyframes border {
  2061.                           0%, 100% {
  2062.                             border-top: 2px solid #1a1a1a;
  2063.                           }
  2064.                         }
  2065.                       $ha-map$: |
  2066.                        #map {
  2067.                           background-color: #191919 !important;
  2068.                         }
  2069.                         .leaflet-control-attribution {
  2070.                           display: none;
  2071.                         }
  2072.                         .leaflet-bar a {
  2073.                           background-color: rgba(47, 51, 51, 0.9) !important;
  2074.                           color: #9da0a2 !important;
  2075.                         }
  2076.                         a.leaflet-control-zoom-in {
  2077.                           border-bottom: 1px solid #181818 !important;
  2078.                         }
  2079.                         .leaflet-pane.leaflet-tile-pane {
  2080.                           filter: contrast(85%);
  2081.                         }
  2082.                 card:
  2083.                   type: vertical-stack
  2084.                   cards:
  2085.                     - type: entities
  2086.                       card_mod:
  2087.                         class: content
  2088.                       entities:
  2089.                         - entity: person.dirk_albrecht
  2090.                           secondary_info: last-changed
  2091.                     - type: history-graph
  2092.                       entities:
  2093.                         - entity: person.dirk_albrecht
  2094.                     - type: glance
  2095.                       show_state: false
  2096.                       entities:
  2097.                         - entity: device_tracker.iphone_von_dirk
  2098.                           name: Router
  2099.                           icon: mdi:wifi
  2100.                           style: |
  2101.                            state-badge {
  2102.                               color: {{ '#3182b7' if is_state(config.entity, 'home') else '#3c3f3f' }};
  2103.                             }
  2104.                         - entity: sensor.iphone_von_dirk_connection_type
  2105.                           name: Bluetooth
  2106.                           icon: mdi:bluetooth
  2107.                           style: |
  2108.                            state-badge {
  2109.                               color: {{ '#3182b7' if is_state(config.entity, 'home') else '#3c3f3f' }};
  2110.                             }
  2111.                     - type: custom:button-card
  2112.                       name: Ton abspielen
  2113.                       icon: mdi:volume-high
  2114.                       tap_action:
  2115.                         action: call-service
  2116.                         service: notify.mobile_app_iphone_von_dirk
  2117.                         service_data:
  2118.                           title: Wo ist mein Iphone
  2119.                           message: Hier ist mein Iphone
  2120.                           data:
  2121.                             push:
  2122.                               sound:
  2123.                                 name: findmy.wav
  2124.                                 critical: 1
  2125.                                 volume: 1
  2126.                     - type: map
  2127.                       default_zoom: 16
  2128.                       dark_mode: true
  2129.                       entities:
  2130.                        - device_tracker.iphone_von_dirk
  2131.             custom_fields:
  2132.               circle: |
  2133.                [[[
  2134.                  if (entity) {
  2135.                     let time = c => {
  2136.                       let s = (c/1e3), m = (c/6e4), h = (c/36e5), d = (c/864e5);
  2137.                       return s < 60 ? parseInt(s) + 's' : m < 60 ? parseInt(m) + 'm' : h < 24 ? parseInt(h) + 'h' : parseInt(d) + 'd';
  2138.                     };
  2139.                     let last_changed = states[variables.retain] == null || states[variables.retain].state == 'unavailable'
  2140.                         ? time(Date.now() - Date.parse(states[entity.entity_id].last_changed))
  2141.                         : time(Date.now() - Date.parse(states[variables.retain].state)),
  2142.                       stroke = variables.state === 'home' ? 'rgba(255,0,0,1.0)' : 'none',
  2143.                       fill = variables.state === 'not_home' ? 'rgba(255,0,0,1.0)' : 'none';
  2144.                  const radius = 100;
  2145.                  const circumference = radius * 2 * Math.PI;
  2146.                  return `<svg viewBox="0 0 50 50"><style>circle { transform: rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray: ${circumference};stroke-dashoffset: ${circumference - last_changed / 100 * circumference};}
  2147.                  tspan {font-size: 10px;}</style> <circle cx="25" cy="25" r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08" style="
  2148.                  transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2149.                  <text x="50%" y="54%" fill="#8d8e90" font-size="11" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${last_changed}</text></svg>`; }
  2150.                 ]]]
  2151.             show_entity_picture: true
  2152.             styles:
  2153.               card:
  2154.                 - font-family: Sf Display
  2155.                 - border-radius: var(--custom-button-card-border-radius)
  2156.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2157.                 - transition: none
  2158.                 - padding: 10%
  2159.               grid:
  2160.                 - grid-template-areas: '"i" "n" "s"'
  2161.                 - grid-template-columns: 1fr
  2162.                 - grid-template-rows: 1fr min-content min-content
  2163.               name:
  2164.                 - justify-self: start
  2165.                 - padding-left: 7px
  2166.                 - font-weight: bold
  2167.                 - font-family: SF Display
  2168.                 - font-size: 14px
  2169.               img_cell:
  2170.                 - justify-content: start
  2171.                 - padding-left: 5px
  2172.                 - padding-top: 10px
  2173.                 - align-items: start
  2174.                 - margin: none
  2175.               state:
  2176.                 - justify-self: start
  2177.                 - font-color: red
  2178.                 - padding-left: 7px
  2179.                 - padding-bottom: 10px
  2180.                 - text-transform: capitalize
  2181.                 - font-family: SF Display
  2182.                 - font-size: 11px
  2183.               icon:
  2184.                 - width: 40%
  2185.                 - clip-path: circle()
  2186.               custom_fields:
  2187.                 circle:
  2188.                   - align-self: start
  2189.                   - position: absolute
  2190.                   - left: 55%
  2191.                   - top: 10%
  2192.                   - width: 40%
  2193.                   - font-size: 18px
  2194.                   - font-weight: 900
  2195.                   - font-family: SF Display
  2196.                   - text-transform: capitalize
  2197.             state:
  2198.               - value: home
  2199.                 color: rgba(255,255,255,0.9)
  2200.                 entity_picture: /api/image/serve/b7f3b1e168629ad56234f2b585f907c7/512x512
  2201.               - value: not_home
  2202.                 color: rgba(65,65,63,0.8)
  2203.                 entity_picture: /api/image/serve/b7f3b1e168629ad56234f2b585f907c7/512x512
  2204.                 styles:
  2205.                   card:
  2206.                     - filter: opacity(50%)
  2207.                   icon:
  2208.                     - filter: grayscale(100%)
  2209.           - type: custom:button-card
  2210.             entity: person.christina_wolk
  2211.             aspect_ratio: 1
  2212.             color_type: card
  2213.             name: Christina
  2214.             triggers_update:
  2215.              - sensor.christina_last_changed
  2216.               - sensor.time
  2217.             variables:
  2218.               retain: sensor.christina_last_changed
  2219.             show_state: true
  2220.             tap_action:
  2221.               action: fire-dom-event
  2222.               browser_mod:
  2223.                 command: popup
  2224.                 title: Dirk
  2225.                 style:
  2226.                   hui-vertical-stack-card:
  2227.                     $hui-history-graph-card$: |
  2228.                      .content {
  2229.                         padding: 0.2em 1.7em 1.2em 1.7em !important;
  2230.                       }
  2231.                     $: |
  2232.                      button-card {
  2233.                         align-self: center;
  2234.                         padding: 0.2em 0 2.3em 0;
  2235.                       }
  2236.                     $hui-map-card:
  2237.                       $: |
  2238.                        mwc-icon-button {
  2239.                           color: var(--primary-color);
  2240.                         }
  2241.                         ha-card {
  2242.                           border-radius: 0;
  2243.                           animation: border 1s forwards;
  2244.                         }
  2245.                         @keyframes border {
  2246.                           0%, 100% {
  2247.                             border-top: 2px solid #1a1a1a;
  2248.                           }
  2249.                         }
  2250.                       $ha-map$: |
  2251.                        #map {
  2252.                           background-color: #191919 !important;
  2253.                         }
  2254.                         .leaflet-control-attribution {
  2255.                           display: none;
  2256.                         }
  2257.                         .leaflet-bar a {
  2258.                           background-color: rgba(47, 51, 51, 0.9) !important;
  2259.                           color: #9da0a2 !important;
  2260.                         }
  2261.                         a.leaflet-control-zoom-in {
  2262.                           border-bottom: 1px solid #181818 !important;
  2263.                         }
  2264.                         .leaflet-pane.leaflet-tile-pane {
  2265.                           filter: contrast(85%);
  2266.                         }
  2267.                 card:
  2268.                   type: vertical-stack
  2269.                   cards:
  2270.                     - type: entities
  2271.                       card_mod:
  2272.                         class: content
  2273.                       entities:
  2274.                         - entity: person.christina_wolk
  2275.                           secondary_info: last-changed
  2276.                     - type: history-graph
  2277.                       entities:
  2278.                         - entity: person.christina_wolk
  2279.                     - type: glance
  2280.                       show_state: false
  2281.                       entities:
  2282.                         - entity: device_tracker.iphonevhristina_6
  2283.                           name: Router
  2284.                           icon: mdi:wifi
  2285.                           style: |
  2286.                            state-badge {
  2287.                               color: {{ '#3182b7' if is_state(config.entity, 'home') else '#3c3f3f' }};
  2288.                             }
  2289.                         - entity: device_tracker.iphonevhristina_6
  2290.                           name: Bluetooth
  2291.                           icon: mdi:bluetooth
  2292.                           style: |
  2293.                            state-badge {
  2294.                               color: {{ '#3182b7' if is_state(config.entity, 'home') else '#3c3f3f' }};
  2295.                             }
  2296.                     - type: custom:button-card
  2297.                       name: Ton abspielen
  2298.                       icon: mdi:volume-high
  2299.                       tap_action:
  2300.                         action: call-service
  2301.                         service: notify.mobile_app_iphone_von_dirk
  2302.                         service_data:
  2303.                           title: Wo ist mein Iphone
  2304.                           message: Hier ist mein Iphone
  2305.                           data:
  2306.                             push:
  2307.                               sound:
  2308.                                 name: findmy.wav
  2309.                                 critical: 1
  2310.                                 volume: 1
  2311.                     - type: map
  2312.                       default_zoom: 16
  2313.                       dark_mode: true
  2314.                       entities:
  2315.                        - device_tracker.iphonevhristina_5
  2316.             custom_fields:
  2317.               circle: |
  2318.                [[[
  2319.                  if (entity) {
  2320.                     let time = c => {
  2321.                       let s = (c/1e3), m = (c/6e4), h = (c/36e5), d = (c/864e5);
  2322.                       return s < 60 ? parseInt(s) + 's' : m < 60 ? parseInt(m) + 'm' : h < 24 ? parseInt(h) + 'h' : parseInt(d) + 'd';
  2323.                     };
  2324.                     let last_changed = states[variables.retain] == null || states[variables.retain].state == 'unavailable'
  2325.                         ? time(Date.now() - Date.parse(states[entity.entity_id].last_changed))
  2326.                         : time(Date.now() - Date.parse(states[variables.retain].state)),
  2327.                       stroke = variables.state === 'home' ? 'rgba(255,0,0,1.0)' : 'none',
  2328.                       fill = variables.state === 'not_home' ? 'rgba(255,0,0,1.0)' : 'none';
  2329.                  const radius = 100;
  2330.                  const circumference = radius * 2 * Math.PI;
  2331.                  return `<svg viewBox="0 0 50 50"><style>circle { transform: rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray: ${circumference};stroke-dashoffset: ${circumference - last_changed / 100 * circumference};}
  2332.                  tspan {font-size: 10px;}</style> <circle cx="25" cy="25" r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08" style="
  2333.                  transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2334.                  <text x="50%" y="54%" fill="#8d8e90" font-size="11" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${last_changed}</text></svg>`; }
  2335.                 ]]]
  2336.             show_entity_picture: true
  2337.             styles:
  2338.               card:
  2339.                 - font-family: Sf Display
  2340.                 - border-radius: var(--custom-button-card-border-radius)
  2341.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2342.                 - transition: none
  2343.                 - padding: 10%
  2344.               grid:
  2345.                 - grid-template-areas: '"i" "n" "s"'
  2346.                 - grid-template-columns: 1fr
  2347.                 - grid-template-rows: 1fr min-content min-content
  2348.               name:
  2349.                 - justify-self: start
  2350.                 - padding-left: 7px
  2351.                 - font-weight: bold
  2352.                 - font-family: SF Display
  2353.                 - font-size: 14px
  2354.               img_cell:
  2355.                 - justify-content: start
  2356.                 - padding-left: 5px
  2357.                 - padding-top: 10px
  2358.                 - align-items: start
  2359.                 - margin: none
  2360.               state:
  2361.                 - justify-self: start
  2362.                 - font-color: red
  2363.                 - padding-left: 7px
  2364.                 - padding-bottom: 10px
  2365.                 - text-transform: capitalize
  2366.                 - font-family: SF Display
  2367.                 - font-size: 11px
  2368.               icon:
  2369.                 - width: 40%
  2370.                 - clip-path: circle()
  2371.               custom_fields:
  2372.                 circle:
  2373.                   - align-self: start
  2374.                   - position: absolute
  2375.                   - left: 55%
  2376.                   - top: 10%
  2377.                   - width: 40%
  2378.                   - font-size: 18px
  2379.                   - font-weight: 900
  2380.                   - font-family: SF Display
  2381.                   - text-transform: capitalize
  2382.             state:
  2383.               - value: home
  2384.                 color: rgba(255,255,255,0.9)
  2385.                 entity_picture: /api/image/serve/36316d04d8443179c55b829589922249/512x512
  2386.               - value: not_home
  2387.                 color: rgba(65,65,63,0.8)
  2388.                 entity_picture: /api/image/serve/36316d04d8443179c55b829589922249/512x512
  2389.                 styles:
  2390.                   card:
  2391.                     - filter: opacity(50%)
  2392.                   icon:
  2393.                     - filter: grayscale(100%)
  2394.           - type: custom:button-card
  2395.             entity: person.mia_wolk
  2396.             aspect_ratio: 1
  2397.             color_type: card
  2398.             name: Mia
  2399.             triggers_update:
  2400.              - sensor.mia_last_changed
  2401.               - sensor.time
  2402.             variables:
  2403.               retain: sensor.mia_last_changed
  2404.             show_state: true
  2405.             custom_fields:
  2406.               circle: |
  2407.                [[[
  2408.                  if (entity) {
  2409.                     let time = c => {
  2410.                       let s = (c/1e3), m = (c/6e4), h = (c/36e5), d = (c/864e5);
  2411.                       return s < 60 ? parseInt(s) + 's' : m < 60 ? parseInt(m) + 'm' : h < 24 ? parseInt(h) + 'h' : parseInt(d) + 'd';
  2412.                     };
  2413.                     let last_changed = states[variables.retain] == null || states[variables.retain].state == 'unavailable'
  2414.                         ? time(Date.now() - Date.parse(states[entity.entity_id].last_changed))
  2415.                         : time(Date.now() - Date.parse(states[variables.retain].state)),
  2416.                       stroke = variables.state === 'home' ? 'rgba(255,0,0,1.0)' : 'none',
  2417.                       fill = variables.state === 'not_home' ? 'rgba(255,0,0,1.0)' : 'none';
  2418.                  const radius = 100;
  2419.                  const circumference = radius * 2 * Math.PI;
  2420.                  return `<svg viewBox="0 0 50 50"><style>circle { transform: rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray: ${circumference};stroke-dashoffset: ${circumference - last_changed / 100 * circumference};}
  2421.                  tspan {font-size: 10px;}</style> <circle cx="25" cy="25" r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08" style="
  2422.                  transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2423.                  <text x="50%" y="54%" fill="#8d8e90" font-size="11" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${last_changed}</text></svg>`; }
  2424.                 ]]]
  2425.             show_entity_picture: true
  2426.             styles:
  2427.               card:
  2428.                 - font-family: Sf Display
  2429.                 - border-radius: var(--custom-button-card-border-radius)
  2430.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2431.                 - transition: none
  2432.                 - padding: 10%
  2433.               grid:
  2434.                 - grid-template-areas: '"i" "n" "s"'
  2435.                 - grid-template-columns: 1fr
  2436.                 - grid-template-rows: 1fr min-content min-content
  2437.               name:
  2438.                 - justify-self: start
  2439.                 - padding-left: 7px
  2440.                 - font-weight: bold
  2441.                 - font-family: SF Display
  2442.                 - font-size: 14px
  2443.               img_cell:
  2444.                 - justify-content: start
  2445.                 - padding-left: 5px
  2446.                 - padding-top: 10px
  2447.                 - align-items: start
  2448.                 - margin: none
  2449.               state:
  2450.                 - justify-self: start
  2451.                 - font-color: red
  2452.                 - padding-left: 7px
  2453.                 - padding-bottom: 10px
  2454.                 - text-transform: capitalize
  2455.                 - font-family: SF Display
  2456.                 - font-size: 11px
  2457.               icon:
  2458.                 - width: 40%
  2459.                 - clip-path: circle()
  2460.               custom_fields:
  2461.                 circle:
  2462.                   - align-self: start
  2463.                   - position: absolute
  2464.                   - left: 55%
  2465.                   - top: 10%
  2466.                   - width: 40%
  2467.                   - font-size: 18px
  2468.                   - font-weight: 900
  2469.                   - font-family: SF Display
  2470.                   - text-transform: capitalize
  2471.             state:
  2472.               - value: home
  2473.                 color: rgba(255,255,255,0.9)
  2474.                 entity_picture: /api/image/serve/8d30202bc3a6b04136ebb6702394f6c4/512x512
  2475.               - value: not_home
  2476.                 color: rgba(65,65,63,0.8)
  2477.                 entity_picture: /api/image/serve/8d30202bc3a6b04136ebb6702394f6c4/512x512
  2478.                 styles:
  2479.                   card:
  2480.                     - filter: opacity(50%)
  2481.                   icon:
  2482.                     - filter: grayscale(100%)
  2483.           - type: custom:button-card
  2484.             entity: person.tjark_wolk
  2485.             aspect_ratio: 1
  2486.             color_type: card
  2487.             name: Tjark
  2488.             triggers_update:
  2489.              - sensor.tjark_last_changed
  2490.               - sensor.time
  2491.             variables:
  2492.               retain: sensor.tjark_last_changed
  2493.             show_state: true
  2494.             custom_fields:
  2495.               circle: |
  2496.                [[[
  2497.                  if (entity) {
  2498.                     let time = c => {
  2499.                       let s = (c/1e3), m = (c/6e4), h = (c/36e5), d = (c/864e5);
  2500.                       return s < 60 ? parseInt(s) + 's' : m < 60 ? parseInt(m) + 'm' : h < 24 ? parseInt(h) + 'h' : parseInt(d) + 'd';
  2501.                     };
  2502.                     let last_changed = states[variables.retain] == null || states[variables.retain].state == 'unavailable'
  2503.                         ? time(Date.now() - Date.parse(states[entity.entity_id].last_changed))
  2504.                         : time(Date.now() - Date.parse(states[variables.retain].state)),
  2505.                       stroke = variables.state === 'home' ? 'rgba(255,0,0,1.0)' : 'none',
  2506.                       fill = variables.state === 'not_home' ? 'rgba(255,0,0,1.0)' : 'none';
  2507.                  const radius = 100;
  2508.                  const circumference = radius * 2 * Math.PI;
  2509.                  return `<svg viewBox="0 0 50 50"><style>circle { transform: rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray: ${circumference};stroke-dashoffset: ${circumference - last_changed / 100 * circumference};}
  2510.                  tspan {font-size: 10px;}</style> <circle cx="25" cy="25" r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08" style="
  2511.                  transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2512.                  <text x="50%" y="54%" fill="#8d8e90" font-size="11" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${last_changed}</text></svg>`; }
  2513.                 ]]]
  2514.             show_entity_picture: true
  2515.             styles:
  2516.               card:
  2517.                 - font-family: Sf Display
  2518.                 - border-radius: var(--custom-button-card-border-radius)
  2519.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2520.                 - transition: none
  2521.                 - padding: 10%
  2522.               grid:
  2523.                 - grid-template-areas: '"i" "n" "s"'
  2524.                 - grid-template-columns: 1fr
  2525.                 - grid-template-rows: 1fr min-content min-content
  2526.               name:
  2527.                 - justify-self: start
  2528.                 - padding-left: 7px
  2529.                 - font-weight: bold
  2530.                 - font-family: SF Display
  2531.                 - font-size: 14px
  2532.               img_cell:
  2533.                 - justify-content: start
  2534.                 - padding-left: 5px
  2535.                 - padding-top: 10px
  2536.                 - align-items: start
  2537.                 - margin: none
  2538.               state:
  2539.                 - justify-self: start
  2540.                 - font-color: red
  2541.                 - padding-left: 7px
  2542.                 - padding-bottom: 10px
  2543.                 - text-transform: capitalize
  2544.                 - font-family: SF Display
  2545.                 - font-size: 11px
  2546.               icon:
  2547.                 - width: 40%
  2548.                 - clip-path: circle()
  2549.               custom_fields:
  2550.                 circle:
  2551.                   - align-self: start
  2552.                   - position: absolute
  2553.                   - left: 55%
  2554.                   - top: 10%
  2555.                   - width: 40%
  2556.                   - font-size: 18px
  2557.                   - font-weight: 900
  2558.                   - font-family: SF Display
  2559.                   - text-transform: capitalize
  2560.             state:
  2561.               - value: home
  2562.                 color: rgba(255,255,255,0.9)
  2563.                 entity_picture: /api/image/serve/a80d7fb8ba5a8dec229bdb3aae94f5fc/512x512
  2564.               - value: not_home
  2565.                 color: rgba(65,65,63,0.8)
  2566.                 entity_picture: /api/image/serve/a80d7fb8ba5a8dec229bdb3aae94f5fc/512x512
  2567.                 styles:
  2568.                   card:
  2569.                     - filter: opacity(50%)
  2570.                   icon:
  2571.                     - filter: grayscale(100%)
  2572.         title: Familie
  2573.         columns: 2
  2574.         view_layout:
  2575.           grid-area: familie
  2576.       - type: grid
  2577.         cards:
  2578.           - type: custom:button-card
  2579.             entity: climate.heizung_wohnzimmer
  2580.             aspect_ratio: 1
  2581.             tap_action:
  2582.               action: fire-dom-event
  2583.               browser_mod:
  2584.                 command: popup
  2585.                 title: Wohnzimmer
  2586.                 card:
  2587.                   type: vertical-stack
  2588.                   cards:
  2589.                     - type: thermostat
  2590.                       entity: climate.heizung_wohnzimmer
  2591.                     - type: entities
  2592.                       card_mod:
  2593.                         class: content
  2594.                       entities:
  2595.                         - entity: sensor.temperatur_wohnraum_2
  2596.                           name: Raumtemperatur
  2597.                         - entity: sensor.temperatur_wohnraum_3
  2598.                           name: Luftfeuchtigkeit
  2599.                     - type: custom:mini-graph-card
  2600.                       entities:
  2601.                         - entity: sensor.temperatur_wohnraum_2
  2602.                       line_width: 6
  2603.                       hour24: true
  2604.                       group: true
  2605.                       lign_icon: left
  2606.                       align_state: right
  2607.                       align_header: left
  2608.                       hours_to_show: 24
  2609.                       show:
  2610.                         fill: fade
  2611.                         icon: false
  2612.                         name: false
  2613.                         state: false
  2614.                         name_adaptive_color: false
  2615.                         labels: hover
  2616.                         legend: false
  2617.                   style: |
  2618.                    ha-card {
  2619.                       box-shadow: none;
  2620.                       background: transparent!important;
  2621.                      }
  2622.             name: Wohnzimmer
  2623.             color_type: card
  2624.             show_state: true
  2625.             custom_fields:
  2626.               Temperature: >
  2627.                [[[ {
  2628.  
  2629.                 const temp = Math.round(entity.attributes.temperature);
  2630.  
  2631.                 const radius = 20.5;
  2632.  
  2633.                 const circumference = radius * 2 * Math.PI;
  2634.  
  2635.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  2636.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  2637.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  2638.                 * circumference};}
  2639.  
  2640.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  2641.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  2642.                 style="
  2643.  
  2644.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2645.  
  2646.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  2647.                 text-anchor="middle" alignment-baseline="middle"
  2648.                 dominant-baseline="middle">${temp}°</text></svg>`; } ]]]
  2649.             show_entity_picture: true
  2650.             styles:
  2651.               card:
  2652.                 - font-family: Sf Display
  2653.                 - border-radius: var(--custom-button-card-border-radius)
  2654.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2655.                 - transition: none
  2656.                 - padding: 10%
  2657.               grid:
  2658.                 - grid-template-areas: '"i" "n" "s"'
  2659.                 - grid-template-columns: 1fr
  2660.                 - grid-template-rows: 1fr min-content min-content
  2661.               name:
  2662.                 - justify-self: start
  2663.                 - padding-left: 7px
  2664.                 - font-weight: bold
  2665.                 - font-family: SF Display
  2666.                 - font-size: 14px
  2667.               img_cell:
  2668.                 - justify-content: start
  2669.                 - padding-left: 5px
  2670.                 - padding-top: 10px
  2671.                 - align-items: start
  2672.                 - margin: none
  2673.               state:
  2674.                 - justify-self: start
  2675.                 - font-color: red
  2676.                 - padding-left: 7px
  2677.                 - padding-bottom: 10px
  2678.                 - text-transform: capitalize
  2679.                 - font-family: SF Display
  2680.                 - font-size: 10px
  2681.               icon:
  2682.                 - width: 40%
  2683.               custom_fields:
  2684.                 Temperature:
  2685.                   - align-self: start
  2686.                   - position: absolute
  2687.                   - left: 55%
  2688.                   - top: 10%
  2689.                   - width: 40%
  2690.                   - font-size: 18px
  2691.                   - font-weight: 900
  2692.                   - font-family: SF Display
  2693.                   - text-transform: capitalize
  2694.             state:
  2695.               - value: heat
  2696.                 entity_picture: \local\img\icons8-heizkörper-48.png
  2697.                 color: rgba(255,255,255,0.9)
  2698.               - value: 'off'
  2699.                 entity_picture: \local\img\icons8-heizkörper-48.png
  2700.                 color: rgba(65,65,63,0.8)
  2701.                 styles:
  2702.                   card:
  2703.                     - filter: opacity(50%)
  2704.                   icon:
  2705.                     - filter: grayscale(100%)
  2706.           - type: custom:button-card
  2707.             entity: climate.heizung_esszimmer
  2708.             aspect_ratio: 1
  2709.             tap_action:
  2710.               action: fire-dom-event
  2711.               browser_mod:
  2712.                 command: popup
  2713.                 title: Esszimmer
  2714.                 style:
  2715.                   hui-vertical-stack-card:
  2716.                     $hui-entities-card$: |
  2717.                      #states {
  2718.                         padding-top: 0.5em;
  2719.                         padding-bottom: 1.2em;
  2720.                       }
  2721.                 card:
  2722.                   type: vertical-stack
  2723.                   cards:
  2724.                     - type: thermostat
  2725.                       entity: climate.heizung_esszimmer
  2726.                     - type: entities
  2727.                       card_mod:
  2728.                         class: content
  2729.                       entities:
  2730.                         - entity: sensor.temperatur_wohnraum_2
  2731.                           name: Raumtemperatur
  2732.                         - entity: sensor.temperatur_wohnraum_3
  2733.                           name: Luftfeuchtigkeit
  2734.                     - type: custom:mini-graph-card
  2735.                       entities:
  2736.                         - entity: sensor.temperatur_wohnraum_2
  2737.                       line_width: 6
  2738.                       hour24: true
  2739.                       group: true
  2740.                       lign_icon: left
  2741.                       align_state: right
  2742.                       align_header: left
  2743.                       hours_to_show: 24
  2744.                       show:
  2745.                         fill: fade
  2746.                         icon: false
  2747.                         name: false
  2748.                         state: false
  2749.                         name_adaptive_color: false
  2750.                         labels: hover
  2751.                         legend: false
  2752.                       tap_action:
  2753.                         action: none
  2754.                   style: |
  2755.                    ha-card {
  2756.                       box-shadow: none;
  2757.                       background: transparent!important;
  2758.                      }
  2759.             name: Esszimmer
  2760.             color_type: card
  2761.             show_state: true
  2762.             custom_fields:
  2763.               Temperature: >
  2764.                [[[ {
  2765.  
  2766.                 const temp = Math.round(entity.attributes.temperature);
  2767.  
  2768.                 const radius = 20.5;
  2769.  
  2770.                 const circumference = radius * 2 * Math.PI;
  2771.  
  2772.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  2773.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  2774.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  2775.                 * circumference};}
  2776.  
  2777.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  2778.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  2779.                 style="
  2780.  
  2781.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2782.  
  2783.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  2784.                 text-anchor="middle" alignment-baseline="middle"
  2785.                 dominant-baseline="middle">${temp}°</text></svg>`; } ]]]
  2786.             show_entity_picture: true
  2787.             styles:
  2788.               card:
  2789.                 - font-family: Sf Display
  2790.                 - border-radius: var(--custom-button-card-border-radius)
  2791.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2792.                 - transition: none
  2793.                 - padding: 10%
  2794.               grid:
  2795.                 - grid-template-areas: '"i" "n" "s"'
  2796.                 - grid-template-columns: 1fr
  2797.                 - grid-template-rows: 1fr min-content min-content
  2798.               name:
  2799.                 - justify-self: start
  2800.                 - padding-left: 7px
  2801.                 - font-weight: bold
  2802.                 - font-family: SF Display
  2803.                 - font-size: 14px
  2804.               img_cell:
  2805.                 - justify-content: start
  2806.                 - padding-left: 5px
  2807.                 - padding-top: 10px
  2808.                 - align-items: start
  2809.                 - margin: none
  2810.               state:
  2811.                 - justify-self: start
  2812.                 - font-color: red
  2813.                 - padding-left: 7px
  2814.                 - padding-bottom: 10px
  2815.                 - text-transform: capitalize
  2816.                 - font-family: SF Display
  2817.                 - font-size: 10px
  2818.               icon:
  2819.                 - width: 40%
  2820.               custom_fields:
  2821.                 Temperature:
  2822.                   - align-self: start
  2823.                   - position: absolute
  2824.                   - left: 55%
  2825.                   - top: 10%
  2826.                   - width: 40%
  2827.                   - font-size: 18px
  2828.                   - font-weight: 900
  2829.                   - font-family: SF Display
  2830.                   - text-transform: capitalize
  2831.             state:
  2832.               - value: heat
  2833.                 entity_picture: \local\img\icons8-heizkörper-48.png
  2834.                 color: rgba(255,255,255,0.9)
  2835.               - value: 'off'
  2836.                 entity_picture: \local\img\icons8-heizkörper-48.png
  2837.                 color: rgba(65,65,63,0.8)
  2838.                 styles:
  2839.                   card:
  2840.                     - filter: opacity(50%)
  2841.                   icon:
  2842.                     - filter: grayscale(100%)
  2843.           - type: custom:button-card
  2844.             entity: climate.heizung_gastebad
  2845.             aspect_ratio: 1
  2846.             tap_action:
  2847.               action: fire-dom-event
  2848.               browser_mod:
  2849.                 command: popup
  2850.                 title: Esszimmer
  2851.                 card:
  2852.                   type: vertical-stack
  2853.                   cards:
  2854.                     - type: thermostat
  2855.                       entity: climate.heizung_gastebad
  2856.                     - type: entities
  2857.                       card_mod:
  2858.                         class: content
  2859.                       entities:
  2860.                         - entity: sensor.temperature_7
  2861.                           name: Raumtemperatur
  2862.                         - entity: sensor.humidity_8
  2863.                           name: Luftfeuchtigkeit
  2864.                     - type: custom:mini-graph-card
  2865.                       entities:
  2866.                         - entity: sensor.temperatur_wohnraum_2
  2867.                       line_width: 6
  2868.                       hour24: true
  2869.                       group: true
  2870.                       lign_icon: left
  2871.                       align_state: right
  2872.                       align_header: left
  2873.                       hours_to_show: 24
  2874.                       show:
  2875.                         fill: fade
  2876.                         icon: false
  2877.                         name: false
  2878.                         state: false
  2879.                         name_adaptive_color: false
  2880.                         labels: hover
  2881.                         legend: false
  2882.                   style: |
  2883.                    ha-card {
  2884.                       box-shadow: none;
  2885.                       background: transparent;
  2886.                       font-size: 10px!important;
  2887.                       font-color: rgba(255,0,0,0.8)!important;
  2888.                     }
  2889.             name: Gästebad
  2890.             color_type: card
  2891.             show_state: true
  2892.             custom_fields:
  2893.               Temperature: >
  2894.                [[[ {
  2895.  
  2896.                 const temp = Math.round(entity.attributes.temperature);
  2897.  
  2898.                 const radius = 20.5;
  2899.  
  2900.                 const circumference = radius * 2 * Math.PI;
  2901.  
  2902.                 return `<svg viewBox="0 0 50 50"><style>circle { transform:
  2903.                 rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray:
  2904.                 ${circumference};stroke-dashoffset: ${circumference - temp / 100
  2905.                 * circumference};}
  2906.  
  2907.                 tspan {font-size: 10px;}</style> <circle cx="25" cy="25"
  2908.                 r="24.5" stroke="#b2b2b2" stroke-width="1.5" fill="#FFFFFF08"
  2909.                 style="
  2910.  
  2911.                 transform: rotate(-90deg); transform-origin: 50% 50%;" />
  2912.  
  2913.                 <text x="50%" y="54%" fill="#8d8e90" font-size="11"
  2914.                 text-anchor="middle" alignment-baseline="middle"
  2915.                 dominant-baseline="middle">${temp}°</text></svg>`; } ]]]
  2916.             show_entity_picture: true
  2917.             styles:
  2918.               card:
  2919.                 - font-family: Sf Display
  2920.                 - border-radius: var(--custom-button-card-border-radius)
  2921.                 - '-webkit-tap-highlight-color': rgba(0,0,0,0)
  2922.                 - transition: none
  2923.                 - padding: 10%
  2924.               grid:
  2925.                 - grid-template-areas: '"i" "n" "s"'
  2926.                 - grid-template-columns: 1fr
  2927.                 - grid-template-rows: 1fr min-content min-content
  2928.               name:
  2929.                 - justify-self: start
  2930.                 - padding-left: 7px
  2931.                 - font-weight: bold
  2932.                 - font-family: SF Display
  2933.                 - font-size: 14px
  2934.               img_cell:
  2935.                 - justify-content: start
  2936.                 - padding-left: 5px
  2937.                 - padding-top: 10px
  2938.                 - align-items: start
  2939.                 - margin: none
  2940.               state:
  2941.                 - justify-self: start
  2942.                 - font-color: red
  2943.                 - padding-left: 7px
  2944.                 - padding-bottom: 10px
  2945.                 - text-transform: capitalize
  2946.                 - font-family: SF Display
  2947.                 - font-size: 10px
  2948.               icon:
  2949.                 - width: 40%
  2950.               custom_fields:
  2951.                 Temperature:
  2952.                   - align-self: start
  2953.                   - position: absolute
  2954.                   - left: 55%
  2955.                   - top: 10%
  2956.                   - width: 40%
  2957.                   - font-size: 18px
  2958.                   - font-weight: 900
  2959.                   - font-family: SF Display
  2960.                   - text-transform: capitalize
  2961.             state:
  2962.               - value: heat
  2963.                 entity_picture: \local\img\icons8-heizkörper-48.png
  2964.                 color: rgba(255,255,255,0.9)
  2965.               - value: 'off'
  2966.                 entity_picture: \local\img\icons8-heizkörper-48.png
  2967.                 color: rgba(65,65,63,0.8)
  2968.                 styles:
  2969.                   card:
  2970.                     - filter: opacity(50%)
  2971.                   icon:
  2972.                     - filter: grayscale(100%)
  2973.         title: Heizung
  2974.         columns: 2
  2975.         view_layout:
  2976.           grid-area: heizung
  2977.  
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!