API tools faq
paste
Advertisement
TBnt

Button card • Configuration Templates

TBnt
Jul 16th, 2021
1,745
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 50.64 KB | None | 0 0
raw download clone embed print report
  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
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!