Advertisement
TBnt

Button card • Configuration Templates

Jul 16th, 2021
1,305
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ########################################################################################################
  2. #                                                                                                      #
  3. #                                            Design System                                             #
  4. #                                                                                                      #
  5. ########################################################################################################
  6.  
  7.   icon:
  8.     color: var(--google-grey-500)
  9.     show_icon: true
  10.     show_name: false
  11.     show_label: false
  12.     size: 20px
  13.     custom_fields:
  14.       notification: >
  15.        [[[
  16.           if (entity.state =='unavailable'){
  17.             return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: white;"></ha-icon>`
  18.           }
  19.         ]]]
  20.     state:
  21.       - styles:
  22.           custom_fields:
  23.             notification:
  24.               - border-radius: 50%
  25.               - position: absolute
  26.               - left: 24px
  27.               - top: -2px
  28.               - height: 16px
  29.               - width: 16px
  30.               - border: 2px solid var(--card-background-color)
  31.               - font-size: 12px
  32.               - line-height: 14px
  33.               - background-color: >
  34.                  [[[
  35.                     return "rgba(var(--couleur-rouge),1)";
  36.                   ]]]
  37.         value: unavailable
  38.     styles:
  39.       card:
  40.         - border-radius: 21px
  41.         - box-shadow: none
  42.         - padding: 0px
  43.       grid:
  44.         - grid-template-areas: '"i"'
  45.         - grid-template-columns: min-content
  46.         - grid-template-rows: min-content
  47.       icon:
  48.         - color: 'rgba(var(--couleur-theme),0.2)'
  49.       img_cell:
  50.         - background-color: 'rgba(var(--couleur-theme),0.05)'
  51.         - border-radius: 50%
  52.         - place-self: center
  53.         - width: 42px
  54.         - height: 42px
  55.  
  56. ########################################################################################################
  57.  
  58.   icon_info:
  59.     color: var(--google-grey-500)
  60.     show_icon: true
  61.     show_name: true
  62.     show_label: true
  63.     size: 20px
  64.     custom_fields:
  65.       notification: >
  66.        [[[
  67.           if (entity.state =='unavailable'){
  68.             return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: white;"></ha-icon>`
  69.           }
  70.         ]]]
  71.     state:
  72.       - styles:
  73.           custom_fields:
  74.             notification:
  75.               - border-radius: 50%
  76.               - position: absolute
  77.               - left: 24px
  78.               - top: -2px
  79.               - height: 16px
  80.               - width: 16px
  81.               - border: 2px solid var(--card-background-color)
  82.               - font-size: 12px
  83.               - line-height: 14px
  84.               - background-color: >
  85.                  [[[
  86.                     return "rgba(var(--couleur-rouge),1)";
  87.                   ]]]
  88.         value: unavailable
  89.     styles:
  90.       card:
  91.         - border-radius: 21px 8px 8px 21px
  92.         - box-shadow: none
  93.         - padding: 0px
  94.       grid:
  95.         - grid-template-areas: '"i n" "i l"'
  96.         - grid-template-columns: min-content auto
  97.         - grid-template-rows: min-content min-content
  98.       icon:
  99.         - color: 'rgba(var(--couleur-theme),0.2)'
  100.       img_cell:
  101.         - background-color: 'rgba(var(--couleur-theme),0.05)'
  102.         - border-radius: 50%
  103.         - place-self: center
  104.         - width: 42px
  105.         - height: 42px
  106.       name:
  107.         - align-self: end
  108.         - justify-self: start
  109.         - font-weight: bold
  110.         - font-size: 14px
  111.         - margin-left: 12px
  112.       label:
  113.         - justify-self: start
  114.         - align-self: start
  115.         - font-weight: bolder
  116.         - font-size: 12px
  117.         - filter: opacity(40%)
  118.         - margin-left: 12px
  119.       state:
  120.         - justify-self: start
  121.         - align-self: start
  122.         - font-weight: bolder
  123.         - font-size: 12px
  124.         - filter: opacity(40%)
  125.         - margin-left: 12px
  126.  
  127. ########################################################################################################
  128.  
  129.   icon_info_bg:
  130.     color: var(--google-grey-500)
  131.     show_icon: true
  132.     show_name: true
  133.     show_label: true
  134.     size: 20px
  135.     custom_fields:
  136.       notification: >
  137.        [[[
  138.           if (entity.state =='unavailable'){
  139.             return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: white;"></ha-icon>`
  140.           }
  141.         ]]]
  142.     state:
  143.       - styles:
  144.           custom_fields:
  145.             notification:
  146.               - border-radius: 50%
  147.               - position: absolute
  148.               - left: 38px
  149.               - top: 8px
  150.               - height: 16px
  151.               - width: 16px
  152.               - border: 2px solid var(--card-background-color)
  153.               - font-size: 12px
  154.               - line-height: 14px
  155.               - background-color: >
  156.                  [[[
  157.                     return "rgba(var(--couleur-rouge),1)";
  158.                   ]]]
  159.         value: unavailable
  160.     styles:
  161.       card:
  162.         - border-radius: 20px
  163.         - box-shadow: var(--box-shadow)
  164.         - padding: 12px
  165.       grid:
  166.         - grid-template-areas: '"i n" "i l"'
  167.         - grid-template-columns: min-content auto
  168.         - grid-template-rows: min-content min-content
  169.       icon:
  170.         - color: 'rgba(var(--couleur-theme),0.2)'
  171.       img_cell:
  172.         - background-color: 'rgba(var(--couleur-theme),0.05)'
  173.         - border-radius: 50%
  174.         - place-self: center
  175.         - width: 42px
  176.         - height: 42px
  177.       name:
  178.         - align-self: end
  179.         - justify-self: start
  180.         - font-weight: bold
  181.         - font-size: 14px
  182.         - margin-left: 12px
  183.       label:
  184.         - justify-self: start
  185.         - align-self: start
  186.         - font-weight: bolder
  187.         - font-size: 12px
  188.         - filter: opacity(40%)
  189.         - margin-left: 12px
  190.       state:
  191.         - justify-self: start
  192.         - align-self: start
  193.         - font-weight: bolder
  194.         - font-size: 12px
  195.         - filter: opacity(40%)
  196.         - margin-left: 12px
  197.  
  198. ########################################################################################################
  199.  
  200.   list_items:
  201.     styles:
  202.       card:
  203.         - box-shadow: none
  204.         - padding: 0px
  205.       grid:
  206.         - grid-template-areas: '"item1 item2 item3"'
  207.         - grid-template-columns: 1fr 1fr 1fr
  208.         - grid-template-rows: min-content
  209.         - column-gap: 7px
  210.  
  211.   list_items_line:
  212.     styles:
  213.       card:
  214.         - box-shadow: none
  215.         - padding: 0px
  216.       grid:
  217.         - grid-template-areas: '"item1 item2 item3"'
  218.         - grid-template-columns: max-content max-content max-content
  219.         - grid-template-rows: min-content
  220.         - column-gap: 8px
  221.  
  222. ########################################################################################################
  223.  
  224.   icon_info_line:
  225.     color: var(--google-grey-500)
  226.     show_icon: true
  227.     show_name: false
  228.     show_label: true
  229.     size: 100%
  230.     styles:
  231.       card:
  232.         - box-shadow: none
  233.         - padding: 0px
  234.       grid:
  235.         - grid-template-areas: '"i l"'
  236.         - grid-template-columns: max_content auto
  237.         - grid-template-rows: min-content
  238.       img_cell:
  239.         - place-self: center
  240.         - width: 14px
  241.         - height: 24px
  242.       label:
  243.         - justify-self: start
  244.         - align-self: center
  245.         - font-weight: bolder
  246.         - font-size: 12px
  247.         - margin-left: 0px
  248.         - filter: opacity(40%)
  249.  
  250. ########################################################################################################
  251. #                                                                                                      #
  252. #                                               VOLETS                                                 #
  253. #                                                                                                      #
  254. ########################################################################################################
  255.  
  256.   cover:
  257.     tap_action:
  258.       action: more-info
  259.     icon: |
  260.      [[[
  261.           var icon = 'mdi:window-shutter';
  262.           if (entity.attributes.current_position == 0){
  263.             var icon = 'mdi:window-shutter';
  264.           } else
  265.             var icon = 'mdi:window-shutter-open';
  266.           return icon ;
  267.       ]]]
  268.     label: >-
  269.       [[[
  270.           if (entity.attributes.power_consumption != '0'){
  271.             return 'Mouvement';
  272.           }else{
  273.             if (entity.attributes.current_position == 0){
  274.               var etat = "Fermé";
  275.             }else{
  276.               var etat = "Ouvert" + ' • ' + (entity.attributes.current_position) + '%' ;
  277.             }
  278.             return etat ;
  279.           }
  280.       ]]]
  281.     state:
  282.       - operator: template
  283.         value: >
  284.          [[[
  285.             return entity.attributes.current_position != 0;
  286.           ]]]
  287.         styles:
  288.           icon:
  289.             - color: 'rgba(var(--couleur-bleu),1)'
  290.           img_cell:
  291.             - background-color: 'rgba(var(--couleur-bleu),0.2)'
  292.  
  293. ####################################################
  294. #                                                  #
  295. #                VOLETS AVEC BOUTONS               #
  296. #                                                  #
  297. ####################################################
  298.  
  299.   cover_buttons:
  300.     variables:
  301.       entity: "cover.fibaro_cover_balcon"
  302.       name: "Default name"
  303.     styles:
  304.       card:
  305.         - border-radius: 20px
  306.         - box-shadow: var(--box-shadow)
  307.         - padding: 12px
  308.       grid:
  309.         - grid-template-areas: '"item1" "item2"'
  310.         - grid-template-columns: 1fr
  311.         - grid-template-rows: min-content  min-content
  312.         - row-gap: 12px
  313.     custom_fields:
  314.       item1:
  315.         card:
  316.           entity: '[[[ return variables.entity ]]]'
  317.           name: '[[[ return variables.name ]]]'
  318.           tap_action:
  319.             action: more-info
  320.           template:
  321.            - icon_info
  322.             - cover
  323.           type: 'custom:button-card'
  324.       item2:
  325.         card:
  326.           template: list_items
  327.           type: 'custom:button-card'
  328.           custom_fields:
  329.             item1:
  330.               card:
  331.                 icon: 'mdi:arrow-down'
  332.                 tap_action:
  333.                   action: call-service
  334.                   service: cover.close_cover
  335.                   service_data:
  336.                     entity_id: '[[[ return variables.entity ]]]'
  337.                 type: 'custom:button-card'
  338.                 template: widget_icon
  339.             item2:
  340.               card:
  341.                 icon: 'mdi:pause'
  342.                 tap_action:
  343.                   action: call-service
  344.                   service: cover.stop_cover
  345.                   service_data:
  346.                     entity_id: '[[[ return variables.entity ]]]'
  347.                 type: 'custom:button-card'
  348.                 template: widget_icon
  349.             item3:
  350.               card:
  351.                 icon: 'mdi:arrow-up'
  352.                 tap_action:
  353.                   action: call-service
  354.                   service: cover.open_cover
  355.                   service_data:
  356.                     entity_id: '[[[ return variables.entity ]]]'
  357.                 type: 'custom:button-card'
  358.                 template: widget_icon
  359.  
  360. ########################################################################################################
  361. #                                                                                                      #
  362. #                                             LUMIERES                                                 #
  363. #                                                                                                      #
  364. ########################################################################################################
  365.  
  366.   light:
  367.     tap_action:
  368.       action: toggle
  369.     hold_action:
  370.       action: more-info
  371.     label: >-
  372.       [[[ if (entity.state !='unavailable'){
  373.             if (entity.state =='off'){
  374.               var bri = Math.round(entity.attributes.brightness / 2.55);
  375.               return 'Off';  
  376.             }else{
  377.               var bri = Math.round(entity.attributes.brightness / 2.55);
  378.               return (bri ? bri : '0') + '%';
  379.             }
  380.           }else{
  381.             return "Indisponible";
  382.           }
  383.       ]]]
  384.     template:
  385.       - jaune
  386.  
  387. ########################################################################################################
  388. #                                                                                                      #
  389. #                                           GENERIQUE                                                  #
  390. #                                                                                                      #
  391. ########################################################################################################
  392.   generique:
  393.     label: >
  394.        [[[return entity.state + " " + entity.attributes.unit_of_measurement]]]
  395.     styles:
  396.       icon:
  397.         - color: 'rgba(var(--couleur-theme),0.9)'
  398.       grid:
  399.         - grid-template-areas: '"i l" "i n"'
  400.         - grid-template-columns: min-content auto
  401.         - grid-template-rows: min-content min-content
  402.       label:
  403.         - align-self: end
  404.         - justify-self: start
  405.         - font-weight: bold
  406.         - font-size: 14px
  407.         - margin-left: 12px
  408.         - filter: opacity(100%)
  409.       name:
  410.         - justify-self: start
  411.         - align-self: start
  412.         - font-weight: bolder
  413.         - font-size: 12px
  414.         - filter: opacity(40%)
  415.         - margin-left: 12px
  416.  
  417. ########################################################################################################
  418. #                                                                                                      #
  419. #                                             PRISE                                                    #
  420. #                                                                                                      #
  421. ########################################################################################################
  422.  
  423.   prise:
  424.     tap_action:
  425.       action: more-info
  426.     label: |-
  427.       [[[ if (entity.state =='on')
  428.          var etat = "On";
  429.          else
  430.         var etat = "Off";
  431.       return etat ; ]]]
  432.     template:
  433.       - jaune
  434.  
  435. ####################################################
  436.  
  437.   prise_conso:
  438.     hold_action:
  439.       action: more-info
  440.       entity: sensor.shelly_prise_salon_current_consumption
  441.     label: |-
  442.       [[[ if (entity.state =='on')
  443.          var etat = "On • " + states["sensor.shelly_prise_salon_current_consumption"].state + "W";
  444.          else
  445.         var etat = "Off";
  446.       return etat ; ]]]
  447.     template: prise
  448.    
  449. ########################################################################################################
  450. #                                                                                                      #
  451. #                                           MOUVEMENT                                                  #
  452. #                                                                                                      #
  453. ########################################################################################################
  454.  
  455.   mouvement:
  456.     show_last_changed: true
  457.     template:
  458.       - bleu
  459.  
  460. ########################################################################################################
  461. #                                                                                                      #
  462. #                                         CHAUFFE EAU                                                  #
  463. #                                                                                                      #
  464. ########################################################################################################
  465.  
  466.   chauffe-eau:
  467.     icon: 'mdi:waves'
  468.     tap_action:
  469.       action: more-info
  470.     hold_action:
  471.       action: more-info
  472.       entity: switch.shelly_module_couloir
  473.     label: >-
  474.       [[[
  475.           if (entity.state == 'off'){
  476.             return 'Arrêt forcé';
  477.           }else{
  478.             if (states["sensor.shelly_module_couloir_current_consumption"].state > 0){
  479.               var etat = "Chauffe • " + states["sensor.shelly_module_couloir_current_consumption"].state + "W";
  480.             }else{
  481.               var etat = "Inactif";
  482.             }
  483.             return etat ;
  484.           }
  485.       ]]]
  486.     styles:
  487.       icon:
  488.         - color: |
  489.            [[[
  490.                if (states["sensor.shelly_module_couloir_current_consumption"].state > 0)
  491.                  return 'rgba(var(--couleur-rouge),1)'
  492.                else
  493.                  return 'rgba(var(--couleur-theme),0.2)'
  494.             ]]]
  495.       img_cell:
  496.         - background-color: |
  497.            [[[
  498.                if (states["sensor.shelly_module_couloir_current_consumption"].state > 0)
  499.                  return 'rgba(var(--couleur-rouge),0.2)'
  500.                else
  501.                  return 'rgba(var(--couleur-theme),0.05)'
  502.             ]]]
  503.  
  504. ########################################################################################################
  505. #                                                                                                      #
  506. #                                           THERMOSTAT                                                 #
  507. #                                                                                                      #
  508. ########################################################################################################
  509.  
  510.   thermostat:
  511.     hold_action:
  512.       action: more-info
  513.       entity: input_boolean.radiateur_arret_force
  514.     label: >-
  515.       [[[
  516.           if (entity.state =='off'){
  517.             return 'Off' ;
  518.           }else{
  519.             if (states['light.qubino'].state == 'on'){
  520.               var etat = "Chauffe";
  521.             }else{
  522.               var etat = "Inactif";
  523.             }
  524.             return (entity.attributes.temperature ) + '°' + ' • ' + etat ;
  525.           }
  526.       ]]]
  527.     styles:
  528.       icon:
  529.         - color: |
  530.            [[[
  531.                if (states['light.qubino'].state == 'on')
  532.                  return 'rgba(var(--couleur-rouge),1)'
  533.                else
  534.                  return 'rgba(var(--couleur-theme),0.2)'
  535.             ]]]
  536.       img_cell:
  537.         - background-color: |
  538.            [[[
  539.                if (states['light.qubino'].state == 'on')
  540.                  return 'rgba(var(--couleur-rouge),0.2)'
  541.                else
  542.                  return 'rgba(var(--couleur-theme),0.05)'
  543.             ]]]
  544.            
  545. ########################################################################################################
  546. #                                                                                                      #
  547. #                                              NAS                                                     #
  548. #                                                                                                      #
  549. ########################################################################################################
  550.   nas:
  551.     tap_action:
  552.       action: more-info
  553.     show_label: true
  554.     label: |-
  555.       [[[ if (entity.state =='on')
  556.          var etat = states["sensor.nas_volume_1_used_space"].state + "/3.5To";
  557.          else
  558.         var etat = "Off";
  559.       return etat ; ]]]
  560.     template:
  561.       - bleu
  562. ########################################################################################################
  563. #                                                                                                      #
  564. #                                              MEDIA                                                   #
  565. #                                                                                                      #
  566. ########################################################################################################
  567.   media:
  568.     label: >-
  569.       [[[ if (entity.state =='off'){
  570.             return "Off";
  571.           }else{
  572.             return entity.state;
  573.           }
  574.       ]]]
  575.     icon: |
  576.      [[[
  577.           var application = states["media_player.chromecast_audio_appartement"].attributes.app_name;
  578.           var icon = 'mdi:speaker';
  579.           if (application == 'Oto music'){
  580.             var icon = 'mdi:music-circle';
  581.           } else if(application == 'Spotify'){
  582.             var icon = 'mdi:spotify';
  583.           } else if(application == 'Google Podcasts'){
  584.             var icon = 'mdi:google-podcast';
  585.           } else if(application == 'Plex'){
  586.             var icon = 'mdi:plex';
  587.           }
  588.           return icon ;
  589.       ]]]
  590.     styles:
  591.       icon:
  592.         - color: 'rgba(var(--couleur-theme),0.2)'
  593.       img_cell:
  594.         - background-color: 'rgba(var(--couleur-theme),0.05)'
  595.       card:
  596.         - background-blend-mode: multiply
  597.         - background: >
  598.            [[[
  599.               var image = entity.attributes.entity_picture_local;
  600.               var bg = entity.attributes.entity_picture_local;
  601.               if (image == null){
  602.                 var bg = '';
  603.               } else{
  604.                 var bg = 'center / cover url(' + image + ') rgba(0, 0, 0, 0.15)';
  605.               }
  606.               return bg;
  607.             ]]]
  608.     state:
  609.       - operator: template
  610.         value: >
  611.          [[[
  612.             return entity.state !='off'
  613.           ]]]
  614.         name: >
  615.            [[[
  616.               return entity.attributes.media_title;
  617.             ]]]
  618.         label: >
  619.            [[[
  620.               return entity.attributes.media_album_name;
  621.             ]]]
  622.         styles:
  623.           label:
  624.             - color: white
  625.             - filter: opacity(100%)
  626.           img_cell:
  627.             - background-color: 'rgba(var(--couleur-theme),0.0)'
  628.           icon:
  629.             - color: white
  630.           name:
  631.             - color: white
  632.            
  633. ####################################################
  634.  
  635.   media_mini_album:
  636.     label: >-
  637.       [[[ if (entity.state =='off'){
  638.             return "Off";
  639.           }else{
  640.             return entity.state;
  641.           }
  642.       ]]]
  643.     styles:
  644.       icon:
  645.         - color: 'rgba(var(--couleur-theme),0.2)'
  646.       img_cell:
  647.         - background-color: 'rgba(var(--couleur-theme),0.05)'
  648.     state:
  649.       - operator: template
  650.         value: >
  651.          [[[
  652.             return entity.state !='off'
  653.           ]]]
  654.         name: >
  655.            [[[
  656.               return entity.attributes.media_title;
  657.             ]]]
  658.         label: >
  659.            [[[
  660.               return entity.attributes.media_album_name;
  661.             ]]]
  662.         styles:
  663.           img_cell:
  664.             - background: >
  665.                [[[
  666.                   var image = entity.attributes.entity_picture;
  667.                   return 'center / cover url(' + image + ')';
  668.                 ]]]
  669.           icon:
  670.             - color: 'rgba(var(--couleur-theme),0.0)'
  671.  
  672. ########################################################################################################
  673. #                                                                                                      #
  674. #                                          PLAYSTATION                                                 #
  675. #                                                                                                      #
  676. ########################################################################################################
  677.  
  678.   ps4:
  679.     label: >-
  680.       [[[ if (entity.state =='unknown'){
  681.             return "Off";
  682.           }else if (entity.state =='standby'){
  683.             return "En veille";
  684.           }else{
  685.             return "On";
  686.           }
  687.       ]]]
  688.     styles:
  689.       icon:
  690.         - color: 'rgba(var(--couleur-theme),0.2)'
  691.       img_cell:
  692.         - background-color: 'rgba(var(--couleur-theme),0.05)'
  693.     state:
  694.       - value: 'idle'
  695.         styles:
  696.           icon:
  697.             - color: 'rgba(var(--couleur-bleu),1)'
  698.           img_cell:
  699.             - background-color: 'rgba(var(--couleur-bleu), 0.2)'
  700.       - value: 'standby'
  701.         styles:
  702.           icon:
  703.             - color: 'rgba(var(--couleur-theme),0.2)'
  704.           img_cell:
  705.             - background-color: 'rgba(var(--couleur-theme),0.05)'
  706.       - operator: template
  707.         value: >
  708.          [[[
  709.             return entity.state !='unknown'
  710.           ]]]
  711.         name: >
  712.            [[[
  713.               return entity.attributes.media_title;
  714.             ]]]
  715.         label: >
  716.            [[[
  717.               return entity.attributes.friendly_name;
  718.             ]]]
  719.         styles:
  720.           label:
  721.             - color: white
  722.             - filter: opacity(100%)
  723.           img_cell:
  724.             - background-color: 'none'
  725.           icon:
  726.             - color: white
  727.           name:
  728.             - color: white
  729.           card:
  730.             - background-blend-mode: multiply
  731.             - background: >
  732.                [[[
  733.                   var image = entity.attributes.entity_picture;
  734.                   return 'center / cover url(' + image + ') rgba(0, 0, 0, 0.15)';
  735.                 ]]]
  736.    
  737. ########################################################################################################
  738. #                                                                                                      #
  739. #                                            PERSONNE                                                  #
  740. #                                                                                                      #
  741. ########################################################################################################
  742.   personne:
  743.     tap_action:
  744.       action: more-info
  745.     show_label: true
  746.     label: >
  747.        [[[return entity.state]]]
  748.     styles:
  749.       icon:
  750.         - color: 'rgba(var(--couleur-theme),0.9)'
  751.       custom_fields:
  752.         notification:
  753.           - border-radius: 50%
  754.           - position: absolute
  755.           - left: 38px
  756.           - top: 8px
  757.           - height: 16px
  758.           - width: 16px
  759.           - border: 2px solid var(--card-background-color)
  760.           - font-size: 12px
  761.           - line-height: 14px
  762.  
  763. ####################################################
  764. #                                                  #
  765. #                     THOMAS                       #
  766. #                                                  #
  767. ####################################################
  768.  
  769.   personne-thomas:
  770.     template: personne
  771.     hold_action:
  772.       action: more-info
  773.       entity: input_boolean.thomas_nuit
  774.     styles:
  775.       custom_fields:
  776.         notification:
  777.           - background-color: >
  778.              [[[
  779.                 if (states['input_select.localisation_thomas'].state == 'Present'){
  780.                   return "rgba(var(--couleur-bleu),1)";
  781.                 }else{
  782.                   return "rgba(var(--couleur-vert),1)";
  783.                 }
  784.               ]]]
  785.     custom_fields:
  786.       notification: >
  787.        [[[
  788.           if (states['input_boolean.thomas_nuit'].state == 'on'){
  789.             return `<ha-icon icon="mdi:power-sleep" style="width: 10px; height: 10px; color: white;"></ha-icon>`
  790.           }else{
  791.             if (states['input_select.localisation_thomas'].state == 'Present'){
  792.               return `<ha-icon icon="mdi:home-variant" style="width: 10px; height: 10px; color: white;"></ha-icon>`
  793.             }else{
  794.               return `<ha-icon icon="mdi:walk" style="width: 10px; height: 10px; color: white;"></ha-icon>`
  795.             }
  796.           }
  797.         ]]]
  798.  
  799.  
  800. ####################################################
  801. #                                                  #
  802. #                     MILENA                       #
  803. #                                                  #
  804. ####################################################
  805.  
  806.   personne-milena:
  807.     template: personne
  808.     hold_action:
  809.       action: more-info
  810.       entity: input_boolean.milena_nuit
  811.     styles:
  812.       custom_fields:
  813.         notification:
  814.           - background-color: >
  815.              [[[
  816.                 if (states['input_select.localisation_milena'].state == 'Present'){
  817.                   return "rgba(var(--couleur-bleu),1)";
  818.                 }else{
  819.                   return "rgba(var(--couleur-vert),1)";
  820.                 }
  821.               ]]]
  822.     custom_fields:
  823.       notification: >
  824.        [[[
  825.           if (states['input_boolean.milena_nuit'].state == 'on'){
  826.             return `<ha-icon icon="mdi:power-sleep" style="width: 10px; height: 10px; color: white;"></ha-icon>`
  827.           }else{
  828.             if (states['input_select.localisation_milena'].state == 'Present'){
  829.               return `<ha-icon icon="mdi:home-variant" style="width: 10px; height: 10px; color: white;"></ha-icon>`
  830.             }else{
  831.               return `<ha-icon icon="mdi:walk" style="width: 10px; height: 10px; color: white;"></ha-icon>`
  832.             }
  833.           }
  834.         ]]]
  835.        
  836. ####################################################
  837. #                                                  #
  838. #                     INVITE                       #
  839. #                                                  #
  840. ####################################################
  841.  
  842.   personne-invite:
  843.     tap_action:
  844.       action: more-info
  845.     show_label: true
  846.     label: |-
  847.       [[[ if (entity.state =='on')
  848.          var etat = "Present";
  849.          else
  850.         var etat = "Désactivé";
  851.       return etat ; ]]]
  852.     styles:
  853.       grid:
  854.         - grid-template-areas: '"i n" "i l"'
  855.       icon:
  856.         - color: 'rgba(var(--couleur-theme),0.2)'
  857.       img_cell:
  858.         - background-color: 'rgba(var(--couleur-theme),0.05)'
  859.     custom_fields:
  860.       notification: >
  861.        [[[
  862.           if (entity.state =='on'){
  863.             return `<ha-icon icon="mdi:home-variant" style="width: 10px; height: 10px; color: white;"></ha-icon>`
  864.           }
  865.         ]]]
  866.     state:
  867.       - styles:
  868.           icon:
  869.             - color: 'rgba(var(--couleur-theme),0.9)'
  870.           custom_fields:
  871.             notification:
  872.               - border-radius: 50%
  873.               - position: absolute
  874.               - left: 38px
  875.               - top: 6px
  876.               - height: 16px
  877.               - width: 16px
  878.               - border: 2px solid var(--card-background-color)
  879.               - font-size: 12px
  880.               - line-height: 14px
  881.               - background-color: >
  882.                  [[[
  883.                     return "rgba(var(--couleur-bleu),1)";
  884.                   ]]]
  885.         value: 'on'
  886.        
  887. ########################################################################################################
  888. #                                                                                                      #
  889. #                                             QUBINO                                                   #
  890. #                                                                                                      #
  891. ########################################################################################################
  892.   qubino:
  893.     icon: 'mdi:memory'
  894.     tap_action:
  895.       action: more-info
  896.       entity: input_select.ordres_fil_pilote
  897.     label: >-
  898.       [[[ if (entity.state !='unavailable'){
  899.             var bri = Math.round(entity.attributes.brightness / 2.55);
  900.             var bri = (bri ? bri : '0')
  901.             var consigne = 'Inconnue';
  902.           if (bri >= 51){
  903.             var consigne = 'Confort';
  904.           } else if(bri < 51 && bri >= 41){
  905.             var consigne = 'Confort -1°C';
  906.           } else if(bri < 41 && bri >= 31){
  907.             var consigne = 'Confort -2°C️';
  908.           } else if(bri < 31 && bri >= 21){
  909.             var consigne = 'Eco️';
  910.           } else if(bri < 21 && bri >= 11){
  911.             var consigne = 'Hors Gel️';
  912.           } else if(bri < 11 && bri >= 0){
  913.             var consigne = 'Arrêt️';
  914.           }
  915.           return consigne + ' • ' + bri;  
  916.         }else{
  917.           return "Indisponible";
  918.         }
  919.       ]]]
  920.     template:
  921.       - bleu
  922.  
  923.  
  924. ####################################################
  925. #                                                  #
  926. #                    COULEUR                       #
  927. #                                                  #
  928. ####################################################
  929.   jaune:
  930.     state:
  931.       - styles:
  932.           icon:
  933.             - color: 'rgba(var(--couleur-jaune),1)'
  934.           img_cell:
  935.             - background-color: 'rgba(var(--couleur-jaune), 0.2)'
  936.         value: 'on'
  937.  
  938. ####################################################
  939.  
  940.   bleu:
  941.     state:
  942.       - styles:
  943.           icon:
  944.             - color: 'rgba(var(--couleur-bleu),1)'
  945.           img_cell:
  946.             - background-color: 'rgba(var(--couleur-bleu), 0.2)'
  947.         value: 'on'
  948.  
  949. ####################################################
  950. #                                                  #
  951. #                     GRAPHE                       #
  952. #                                                  #
  953. ####################################################
  954.  
  955.   graph:
  956.     variables:
  957.       entity: "sensor.xiaomi_multisensor_salon_humidite"
  958.       color: "var(--google-blue-500)"
  959.       name: "Default name"
  960.     styles:
  961.       card:
  962.         - border-radius: 20px
  963.         - box-shadow: var(--box-shadow)
  964.         - padding: 0px
  965.       grid:
  966.         - grid-template-areas: '"item1" "item2"'
  967.         - grid-template-columns: 1fr
  968.         - grid-template-rows: min-content  min-content
  969.     custom_fields:
  970.       item1:
  971.         card:
  972.           entity: '[[[ return variables.entity ]]]'
  973.           name: '[[[ return variables.name ]]]'
  974.           template:
  975.             - icon_info
  976.             - generique
  977.           styles:
  978.             card:
  979.               - padding: 12px
  980.           type: 'custom:button-card'
  981.       item2:
  982.         card:
  983.           type: 'custom:mini-graph-card'
  984.           entities:
  985.             - entity: '[[[ return variables.entity ]]]'
  986.           line_color: '[[[ return variables.color ]]]'
  987.           show:
  988.             name: false
  989.             icon: false
  990.             legend: false
  991.             state: false
  992.           style: |
  993.            ha-card {
  994.               box-shadow: none;
  995.               border-radius: var(--border-radius);
  996.             }
  997.  
  998. ####################################################
  999. #                                                  #
  1000. #                     BATTERY                      #
  1001. #                                                  #
  1002. ####################################################
  1003.   battery:
  1004.     template: generique
  1005.     icon: |
  1006.      [[[
  1007.           var battery = entity.state;
  1008.           var icon = 'mdi:help-circle-outline';
  1009.           if (battery >= 90){
  1010.             var icon = 'mdi:battery';
  1011.           } else if(battery < 90 && battery >= 80){
  1012.             var icon = 'mdi:battery-90';
  1013.           } else if(battery < 80 && battery >= 70){
  1014.             var icon = 'mdi:battery-80️';
  1015.           } else if(battery < 70 && battery >= 60){
  1016.             var icon = 'mdi:battery-70️';
  1017.           } else if(battery < 60 && battery >= 50){
  1018.             var icon = 'mdi:battery-60️';
  1019.           } else if(battery < 50 && battery >= 40){
  1020.             var icon = 'mdi:battery-50️';
  1021.           } else if(battery < 40 && battery >= 30){
  1022.             var icon = 'mdi:battery-40️';
  1023.           } else if(battery < 30 && battery >= 20){
  1024.             var icon = 'mdi:battery-30️';
  1025.           } else if(battery < 20 && battery >= 10){
  1026.             var icon = 'mdi:battery-20️';
  1027.           } else if(battery < 10 && battery >= 0){
  1028.             var icon = 'mdi:battery-10️';
  1029.           } else if(battery == 0){
  1030.             var icon = 'mdi:battery-outline️';
  1031.           }
  1032.            return icon ;
  1033.       ]]]
  1034.  
  1035. ########################################################################################################
  1036. #                                                                                                      #
  1037. #                                             WIDGET ICON                                              #
  1038. #                                                                                                      #
  1039. ########################################################################################################
  1040.  
  1041.   widget_icon:
  1042.     tap_action:
  1043.       action: toggle
  1044.     color: var(--google-grey-500)
  1045.     show_icon: true
  1046.     show_name: false
  1047.     size: 20px
  1048.     styles:
  1049.       card:
  1050.         - box-shadow: none
  1051.         - padding: 0px
  1052.         - background-color: 'rgba(var(--couleur-theme),0.05)'
  1053.         - border-radius: 14px
  1054.         - place-self: center
  1055.         - height: 42px
  1056.       grid:
  1057.         - grid-template-areas: '"i"'
  1058.       icon:
  1059.         - color: 'rgba(var(--couleur-theme),0.9)'
  1060.  
  1061.  
  1062. ####################################################
  1063. #                                                  #
  1064. #                    BURDURES                      #
  1065. #                                                  #
  1066. ####################################################
  1067.  
  1068.   bordures:
  1069.     styles:
  1070.       card:
  1071.         - width: 0px
  1072.  
  1073. ########################################################################################################
  1074. #                                                                                                      #
  1075. #                                                PILULE                                                #
  1076. #                                                                                                      #
  1077. ########################################################################################################
  1078.  
  1079.   pilule:
  1080.     tap_action:
  1081.       action: more-info
  1082.     show_icon: false
  1083.     show_name: false
  1084.     show_state: false
  1085.     show_label: true
  1086.     size: 80%
  1087.     styles:
  1088.       img_cell:
  1089.         - width: 24px
  1090.       card:
  1091.         - border-radius: 30px
  1092.         - box-shadow: var(--box-shadow)
  1093.         - height: 36px
  1094.         - width: auto
  1095.         - padding-left: 6px
  1096.         - padding-right: 6px
  1097.       grid:
  1098.         - grid-template-areas: '"l"'
  1099.       label:
  1100.         - justify-self: center
  1101.         - padding: 0px 6px
  1102.         - font-weight: bold
  1103.         - font-size: 14px
  1104.  
  1105. ####################################################
  1106. #                                                  #
  1107. #                  CONSOMMATION                    #
  1108. #                                                  #
  1109. ####################################################
  1110.  
  1111.   pilule_consommation:
  1112.     template: pilule
  1113.     tap_action:
  1114.       action: navigate
  1115.       navigation_path: /lovelace/consommation
  1116.     label: |
  1117.      [[[
  1118.         var price = states['sensor.atome_price_conso_today'].state;
  1119.         return '⚡ ' +  price + '€' ;
  1120.       ]]]
  1121.  
  1122.   pilule_consommation_prix:
  1123.     template: pilule
  1124.     show_icon: false
  1125.     show_state: false
  1126.     show_label: true
  1127.     tap_action:
  1128.       action: navigate
  1129.       navigation_path: /lovelace/consommation
  1130.     label: |
  1131.      [[[
  1132.         var price = states['sensor.atome_price_conso_today'].state;
  1133.         var conso = states['sensor.atome_daily'].state;
  1134.         return '⚡ ' +  price + '€ • ' + conso + 'kWh';
  1135.       ]]]
  1136. ####################################################
  1137. #                                                  #
  1138. #                   TEMPERATURE                    #
  1139. #                                                  #
  1140. ####################################################
  1141.  
  1142.   pilule_temperature:
  1143.     template: pilule
  1144.     tap_action:
  1145.         action: navigate
  1146.         navigation_path: /lovelace/temperature
  1147.     label: |
  1148.      [[[
  1149.         var inter = states['sensor.fibaro_multisensor_salon_temperature'].state;
  1150.         var exter = states['sensor.xiaomi_multisensor_chambre_temperature'].state;
  1151.         var icon = '☀️';
  1152.         if (states['sensor.dark_sky_icon'].state == 'clear-day'){
  1153.           var icon = '☀️';
  1154.         } else if(states['sensor.dark_sky_icon'].state == 'clear-night'){
  1155.           var icon = '🌙';
  1156.         } else if(states['sensor.dark_sky_icon'].state == 'rain'){
  1157.           var icon = '🌧️';
  1158.         } else if(states['sensor.dark_sky_icon'].state == 'snow'){
  1159.           var icon = '❄️';
  1160.         } else if(states['sensor.dark_sky_icon'].state == 'sleet'){
  1161.           var icon = '❄️';
  1162.         } else if(states['sensor.dark_sky_icon'].state == 'wind'){
  1163.           var icon = '🌫️';
  1164.         } else if(states['sensor.dark_sky_icon'].state == 'fog'){
  1165.           var icon = '🌫️';
  1166.         } else if(states['sensor.dark_sky_icon'].state == 'cloudy'){
  1167.           var icon = '☁️';
  1168.         } else if(states['sensor.dark_sky_icon'].state == 'partly-cloudy-day'){
  1169.           var icon = '⛅️';
  1170.         } else if(states['sensor.dark_sky_icon'].state == 'partly-cloudy-night'){
  1171.           var icon = '⛅';
  1172.         }
  1173.         return icon + ' ' + inter + '° / ' +  exter + '°' ;
  1174.       ]]]
  1175.  
  1176. ####################################################
  1177. #                                                  #
  1178. #                 localisation                     #
  1179. #                                                  #
  1180. ####################################################
  1181.   pilule_localisation_present:
  1182.     tap_action:
  1183.       action: navigate
  1184.       navigation_path: /lovelace/localisation
  1185.     label: |
  1186.      [[[
  1187.         var personnes_presentes = states['sensor.people_count_present'].state;
  1188.         return '🏠 ' +  personnes_presentes;
  1189.       ]]]
  1190.     template: pilule
  1191.  
  1192.   pilule_localisation_absent:
  1193.     tap_action:
  1194.       action: navigate
  1195.       navigation_path: /lovelace/localisation
  1196.     label: |
  1197.      [[[
  1198.         var personnes_presentes = states['sensor.people_count_absent'].state;
  1199.         return '🚶 ' +  personnes_presentes;
  1200.       ]]]
  1201.     template: pilule
  1202.    
  1203.   pilule_localisation_nuit:
  1204.     template: pilule
  1205.     tap_action:
  1206.       action: navigate
  1207.       navigation_path: /lovelace/localisation
  1208.     label: |
  1209.      [[[
  1210.         var personnes_presentes = states['sensor.people_count_nuit'].state;
  1211.         return '🌙 ' +  personnes_presentes;
  1212.       ]]]
  1213.      
  1214. ####################################################
  1215. #                                                  #
  1216. #                 BOUTON RETOUR                    #
  1217. #                                                  #
  1218. ####################################################
  1219.  
  1220.   return_button:
  1221.     template: pilule
  1222.     show_icon: true
  1223.     icon: 'mdi:arrow-left'
  1224.     size: 80%
  1225.     styles:
  1226.       grid:
  1227.         - grid-template-areas: '"i"'
  1228.     tap_action:
  1229.       action: navigate
  1230.       navigation_path: /lovelace/home
  1231.  
  1232. ########################################################################################################
  1233. #                                                                                                      #
  1234. #                                           LOCALISATION                                               #
  1235. #                                                                                                      #
  1236. ########################################################################################################
  1237.   scene:
  1238.     size: 20px
  1239.     show_label: true
  1240.     label: |
  1241.      [[[ return (entity.attributes.value )]]]
  1242.     styles:
  1243.       card:
  1244.         - border-radius: 20px
  1245.         - box-shadow: var(--box-shadow)
  1246.         - padding: 10px 0px 8px 0px
  1247.       grid:
  1248.         - grid-template-areas: '"i" "n" "l"'
  1249.       name:
  1250.         - margin-top: 10px
  1251.         - justify-self: center
  1252.         - font-weight: bold
  1253.         - font-size: 14px
  1254.       label:
  1255.         - justify-self: center
  1256.         - align-self: start
  1257.         - font-weight: bolder
  1258.         - font-size: 12px
  1259.         - filter: opacity(40%)
  1260.       icon:
  1261.         - color: |
  1262.            [[[
  1263.                if (states['input_select.localisation_thomas'].state == entity.attributes.friendly_name){
  1264.                  if (states['input_select.localisation_thomas'].state == 'Present')
  1265.                    return 'rgba(var(--couleur-bleu),1)'
  1266.                  else if (states['input_select.localisation_thomas'].state == 'Absent')
  1267.                    return 'rgba(var(--couleur-vert),1)'
  1268.                  else if (states['input_select.localisation_thomas'].state == 'Nuit')
  1269.                    return 'rgba(var(--couleur-bleu),1)'
  1270.                  else if (states['input_select.localisation_thomas'].state == 'Travail')
  1271.                    return 'rgba(var(--couleur-vert),1)'
  1272.                  else if (states['input_select.localisation_thomas'].state == 'Miléna')
  1273.                    return 'rgba(var(--couleur-vert),1)'
  1274.                  else if (states['input_select.localisation_thomas'].state == 'Parents')
  1275.                    return 'rgba(var(--couleur-vert),1)'
  1276.                }else{
  1277.                  return 'rgba(var(--couleur-theme),0.2)'
  1278.                }
  1279.             ]]]
  1280.       img_cell:
  1281.         - background-color: |
  1282.            [[[
  1283.                if (states['input_select.localisation_thomas'].state == entity.attributes.friendly_name){
  1284.                  if (states['input_select.localisation_thomas'].state == 'Present')
  1285.                    return 'rgba(var(--couleur-bleu),0.2)'
  1286.                  else if (states['input_select.localisation_thomas'].state == 'Absent')
  1287.                    return 'rgba(var(--couleur-vert),0.2)'
  1288.                  else if (states['input_select.localisation_thomas'].state == 'Nuit')
  1289.                    return 'rgba(var(--couleur-bleu),0.2)'
  1290.                  else if (states['input_select.localisation_thomas'].state == 'Travail')
  1291.                    return 'rgba(var(--couleur-vert),0.2)'
  1292.                  else if (states['input_select.localisation_thomas'].state == 'Miléna')
  1293.                    return 'rgba(var(--couleur-vert),0.2)'
  1294.                  else if (states['input_select.localisation_thomas'].state == 'Parents')
  1295.                    return 'rgba(var(--couleur-vert),0.2)'
  1296.                }else{
  1297.                  return 'rgba(var(--couleur-theme),0.05)'
  1298.                }
  1299.             ]]]
  1300.         - border-radius: 50%
  1301.         - place-self: center
  1302.         - width: 42px
  1303.         - height: 42px
  1304.        
  1305.   localisation:
  1306.     aspect_ratio: 4/5
  1307.     tap_action:
  1308.       action: more-info
  1309.       entity: input_select.localisation_thomas
  1310.     show_icon: true
  1311.     show_name: true
  1312.     show_state: false
  1313.     show_label: true
  1314.     label: |
  1315.      [[[ return (entity.attributes.value )]]]
  1316.     size: 20px
  1317.     styles:
  1318.       card:
  1319.         - border-radius: 20px
  1320.         - box-shadow: var(--box-shadow)
  1321.       grid:
  1322.         - grid-template-areas: '"i" "n" "l"'
  1323.         - grid-template-rows: 3fr 1fr 1fr
  1324.         - grid-template-columns: 1fr
  1325.       icon:
  1326.         - color: |
  1327.            [[[
  1328.                if (states['input_select.localisation_thomas'].state == entity.attributes.friendly_name){
  1329.                  if (states['input_select.localisation_thomas'].state == 'Present')
  1330.                    return 'rgba(var(--couleur-bleu),1)'
  1331.                  else if (states['input_select.localisation_thomas'].state == 'Absent')
  1332.                    return 'rgba(var(--couleur-vert),1)'
  1333.                  else if (states['input_select.localisation_thomas'].state == 'Nuit')
  1334.                    return 'rgba(var(--couleur-bleu),1)'
  1335.                  else if (states['input_select.localisation_thomas'].state == 'Travail')
  1336.                    return 'rgba(var(--couleur-vert),1)'
  1337.                  else if (states['input_select.localisation_thomas'].state == 'Miléna')
  1338.                    return 'rgba(var(--couleur-vert),1)'
  1339.                  else if (states['input_select.localisation_thomas'].state == 'Parents')
  1340.                    return 'rgba(var(--couleur-vert),1)'
  1341.                }else{
  1342.                  return 'rgba(var(--couleur-theme),0.2)'
  1343.                }
  1344.             ]]]
  1345.       img_cell:
  1346.         - background-color: |
  1347.            [[[
  1348.                if (states['input_select.localisation_thomas'].state == entity.attributes.friendly_name){
  1349.                  if (states['input_select.localisation_thomas'].state == 'Present')
  1350.                    return 'rgba(var(--couleur-bleu),0.2)'
  1351.                  else if (states['input_select.localisation_thomas'].state == 'Absent')
  1352.                    return 'rgba(var(--couleur-vert),0.2)'
  1353.                  else if (states['input_select.localisation_thomas'].state == 'Nuit')
  1354.                    return 'rgba(var(--couleur-bleu),0.2)'
  1355.                  else if (states['input_select.localisation_thomas'].state == 'Travail')
  1356.                    return 'rgba(var(--couleur-vert),0.2)'
  1357.                  else if (states['input_select.localisation_thomas'].state == 'Miléna')
  1358.                    return 'rgba(var(--couleur-vert),0.2)'
  1359.                  else if (states['input_select.localisation_thomas'].state == 'Parents')
  1360.                    return 'rgba(var(--couleur-vert),0.2)'
  1361.                }else{
  1362.                  return 'rgba(var(--couleur-theme),0.05)'
  1363.                }
  1364.             ]]]
  1365.         - border-radius: 50%
  1366.         - place-self: center
  1367.         - width: 42px
  1368.         - height: 42px
  1369.       name:
  1370.         - justify-self: center
  1371.         - padding: 0px 10px
  1372.         - font-weight: bold
  1373.         - font-size: 14px
  1374.       label:
  1375.         - justify-self: center
  1376.         - align-self: start
  1377.         - padding: 0px 10px
  1378.         - font-weight: bolder
  1379.         - font-size: 12px
  1380.         - filter: opacity(40%)
  1381.  
  1382. ####################################################
  1383. #                                                  #
  1384. #                       VIDE                       #
  1385. #                                                  #
  1386. ####################################################
  1387.  
  1388.   vide:
  1389.     styles:
  1390.       card:
  1391.         - background-color: rgba(0,0,0,0)
  1392.         - box-shadow: none
  1393.         - height: 0px
  1394.  
  1395. ########################################################################################################
  1396. #                                                                                                      #
  1397. #                                             TITRE                                                    #
  1398. #                                                                                                      #
  1399. ########################################################################################################
  1400.  
  1401.   titre:
  1402.     tap_action:
  1403.       action: none
  1404.     show_icon: false
  1405.     show_label: true
  1406.     show_name: true
  1407.     styles:
  1408.       card:
  1409.         - background-color: rgba(0,0,0,0)
  1410.         - box-shadow: none
  1411.         - height: auto
  1412.         - width: auto
  1413.         - margin-top: 12px
  1414.         - margin-left: 24px
  1415.         - margin-bottom: 0px
  1416.       grid:
  1417.         - grid-template-areas: '"n" "l"'
  1418.         - grid-template-columns: 1fr
  1419.         - grid-template-rows: min-content min-content
  1420.       name:
  1421.         - justify-self: start
  1422.         - font-weight: bold
  1423.         - font-size: '1.5rem'
  1424.       label:
  1425.         - justify-self: start
  1426.         - font-weight: bold
  1427.         - font-size: '1rem'
  1428.         - opacity: '0.4'
Advertisement
RAW Paste Data Copied
Advertisement