API tools faq
paste
fredrik_persson_

Custom Entity Card

fredrik_persson_
Jan 7th, 2023
3,055
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 9.84 KB | None | 0 0
raw download clone embed print report
  1. #copy and paste in manul-card in lovelace ui. Replace entity and variables.
  2. type: custom:button-card
  3. template: card_entitycard
  4. entity: sensor.monthly_cost_syrenvagen_34
  5. variables:
  6.   entity_1: sensor.monthly_cost_syrenvagen_34_round
  7.   entity_2: sensor.monthly_net_consumption_syrenvagen_34_round
  8.   #water / sun / electricity)
  9.   icon: water
  10.   name: Produktion denna månad
  11.   #image in local folder. Fallback is solid white.
  12.   background: center / cover no-repeat url("/local/images/wave-grey-light-02.png")
  13.   graph: sensor.nordpool_all_price_values_new
  14.  
  15. #copy and paste the template below to the "raw configuration editor in lovelace. #the first row "button_card_templates:" is only needed one time. "card_entitycard:" is the actual template provided by me. Under it, you can later on add more templates. The config should look someting like this:
  16.  
  17. #example-start
  18. views:
  19.   - title: Home
  20.     cards:
  21.         ...
  22. button_card_templates:
  23.     ...
  24. #example-end
  25.  
  26. button_card_templates:
  27.   card_entitycard:
  28.     variables:
  29.       entity_1:
  30.         entity_id: null
  31.         icon: '[[[ return entity.attributes.icon ]]]'
  32.         name: '[[[ return entity.attributes.friendly_name ]]]'
  33.         entity: '[[[ return entity.entity ]]]'
  34.       entity_2:
  35.         entity_id: null
  36.         icon: '[[[ return entity.attributes.icon ]]]'
  37.         name: '[[[ return entity.attributes.friendly_name ]]]'
  38.       icon: null
  39.       name: null
  40.       background: null
  41.       graph: null
  42.     show_label: false
  43.     show_name: false
  44.     show_icon: false
  45.     show_state: false
  46.     show_entity: false
  47.     styles:
  48.       card:
  49.         - overflow: visible
  50.         - border-radius: 15px
  51.         - padding: 0px
  52.         - background: '[[[ return variables.background ]]]'
  53.         - box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.1)
  54.       grid:
  55.         - grid-template-rows: 1fr
  56.         - grid-template-columns: 1fr min-content
  57.         - grid-template-areas: '"item1 item2"'
  58.     custom_fields:
  59.       item1:
  60.         card:
  61.           type: custom:button-card
  62.           entity: '[[[ return entity.entity_id ]]]'
  63.           tap_action: none
  64.           show_icon: false
  65.           show_label: false
  66.           show_name: false
  67.           styles:
  68.             custom_fields:
  69.               name:
  70.                 - align-self: end
  71.                 - justify-self: start
  72.               state:
  73.                 - align-self: center
  74.                 - justify-self: start
  75.               graph:
  76.                 - align-self: end
  77.                 - justify-self: start
  78.             grid:
  79.               - grid-template-areas: '"name" "state" "graph'
  80.              - grid-template-columns: max-content
  81.              - grid-template-rows: 1fr 1fr 2fr
  82.            card:
  83.              - box-shadow: none
  84.              - border-radius: 15px
  85.              - padding: 0px
  86.              - place-self: center start
  87.              - background: none
  88.              - z-index: 1
  89.              - overflow: hidden
  90.          custom_fields:
  91.            name:
  92.              card:
  93.                type: custom:button-card
  94.                entity: '[[[ return entity.entity_id ]]]'
  95.                tap_action: none
  96.                show_icon: false
  97.                show_label: false
  98.                show_name: false
  99.                show_state: false
  100.                custom_fields:
  101.                  name: '[[[ return variables.name ]]]'
  102.                styles:
  103.                  custom_fields:
  104.                    name:
  105.                      - font-weight: normal
  106.                      - font-size: 16px
  107.                      - color: '#000000'
  108.                  card:
  109.                    - box-shadow: none
  110.                    - padding: 0px 0px 0px 20px
  111.                    - margin: 0px
  112.                    - border-radius: 0px
  113.                    - background: none
  114.            state:
  115.              card:
  116.                type: custom:button-card
  117.                entity: '[[[ return variables.ulm_custom_card_entitycard_entity1 ]]]'
  118.                tap_action: none
  119.                show_icon: false
  120.                show_label: false
  121.                show_name: false
  122.                show_state: false
  123.                styles:
  124.                  grid:
  125.                    - grid-template-areas: '''item1 item2'''
  126.                    - grid-template-columns: 1fr 1fr
  127.                    - grid-template-rows: 1fr
  128.                    - column-gap: 6px
  129.                  card:
  130.                    - place-self: start
  131.                    - box-shadow: none
  132.                    - padding: 4px 0px 4px 20px
  133.                    - margin: 0px
  134.                    - border-radius: 0px
  135.                    - background: none
  136.                custom_fields:
  137.                  item1:
  138.                    card:
  139.                      type: custom:button-card
  140.                      entity: '[[[ return variables.entity_1 ]]]'
  141.                      tap_action: none
  142.                      show_icon: false
  143.                      show_label: false
  144.                      show_name: false
  145.                      show_state: true
  146.                      styles:
  147.                        state:
  148.                          - font-weight: bold
  149.                          - font-size: 24px
  150.                          - place-self: start
  151.                          - color: |
  152.                              [[[
  153.                                if(variables.icon == 'sun'){
  154.                                  return "#F7C934";
  155.                                 } if(variables.icon == 'water') {
  156.                                   return "#33A3FF";
  157.                                 } else {
  158.                                   return "#430E7C";
  159.                                 }
  160.                               ]]]
  161.                         card:
  162.                           - box-shadow: none
  163.                           - border-radius: 0px
  164.                           - background: none
  165.                   item2:
  166.                     card:
  167.                       type: custom:button-card
  168.                       entity: '[[[ return variables.entity_2 ]]]'
  169.                       tap_action: none
  170.                       show_icon: false
  171.                       show_label: false
  172.                       show_name: false
  173.                       show_state: true
  174.                       styles:
  175.                         state:
  176.                           - font-weight: normal
  177.                           - font-size: 24px
  178.                           - color: '#000000'
  179.                           - opacity: 25%
  180.                           - place-self: end start;
  181.                         card:
  182.                           - box-shadow: none
  183.                           - border-radius: 0px
  184.                           - background: none
  185.                           - place-self: end start;
  186.             graph:
  187.               card:
  188.                 type: custom:mini-graph-card
  189.                 entities:
  190.                  - '[[[ return variables.graph ]]]'
  191.                 points_per_hour: 1
  192.                 line_color: |
  193.                  [[[
  194.                     if(variables.icon == 'sun'){
  195.                       return "#F7C934";
  196.                     } if(variables.icon == 'water') {
  197.                       return "#33A3FF";
  198.                     } else {
  199.                       return "#430E7C";
  200.                     }
  201.                   ]]]
  202.                 show:
  203.                   icon: false
  204.                   name: false
  205.                   state: false
  206.                   fill: true
  207.                 styles:
  208.                   card:
  209.                     - padding: 0px 0px 0px 20px
  210.                 style: |
  211.                  ha-card {
  212.                     box-shadow: none;
  213.                     padding: 0px;
  214.                     background: none;
  215.                     border-radius: 0;
  216.                     width: 100%;
  217.                     -webkit-mask-image: -webkit-gradient(linear, left center, right center, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  218.                   }
  219.       item2:
  220.         card:
  221.           type: custom:button-card
  222.           entity: '[[[ return variables.entity_1 ]]]'
  223.           tap_action: none
  224.           show_icon: false
  225.           show_label: false
  226.           show_name: false
  227.           styles:
  228.             grid:
  229.               - position: relative
  230.             custom_fields:
  231.               icon_1:
  232.                 - position: absolute
  233.                 - transform: translate(-50%, -50%)
  234.                 - left: '-40px'
  235.                 - top: '-50px'
  236.               icon_2:
  237.                 - position: absolute
  238.                 - transform: translate(-50%, -50%)
  239.                 - left: '-100px'
  240.                 - top: 20px
  241.             card:
  242.               - box-shadow: none
  243.               - height: 100%
  244.               - width: 100%
  245.               - overflow: visible
  246.               - background: none
  247.               - z-index: 2
  248.           custom_fields:
  249.             icon_1: |
  250.              [[[
  251.                 if(variables.icon == 'sun'){
  252.                   return '<ha-icon icon="mdi:weather-sunny" style="width: 50px; color: #F7C934;"></ha-icon>';
  253.                 } if(variables.icon == 'water') {
  254.                   return '<ha-icon icon="mdi:water-outline" style="width: 50px; color: #33A3FF;"></ha-icon>';
  255.                 } else {
  256.                   return '<ha-icon icon="mdi:flash-outline" style="width: 50px; color: #430E7C;"></ha-icon>';
  257.                 }
  258.               ]]]
  259.             icon_2: |
  260.              [[[
  261.                 if(variables.icon == 'sun'){
  262.                   return '<ha-icon icon="mdi:weather-sunny" style="width: 125px; color: #F7C934;"></ha-icon>';
  263.                 } if(variables.icon == 'water') {
  264.                   return '<ha-icon icon="mdi:water-outline" style="width: 125px; color: #33A3FF;"></ha-icon>';
  265.                 } else {
  266.                   return '<ha-icon icon="mdi:flash-outline" style="width: 125px; color: #430E7C;"></ha-icon>';
  267.                 }
  268.               ]]]
  269.  
  270.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!