API tools faq
paste
Advertisement
pqpxoxa

HA - Person card with car

pqpxoxa
Mar 3rd, 2021
562
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.81 KB | None | 0 0
raw download clone embed print report
  1. type: 'custom:vertical-stack-in-card'
  2. cards:
  3. - type: 'custom:button-card'
  4. entity: device_tracker.eml_l29
  5. entity_picture: /local/facesam.png
  6. name: Sam
  7. show_entity_picture: true
  8. state:
  9. - entity_picture: /local/facesam.png
  10. styles:
  11. card:
  12. - height: 100px
  13. entity_picture:
  14. - width: 45%
  15. - opacity: 0.5
  16. - padding-top: 10px
  17. name:
  18. - font-size: 17px
  19. custom_fields:
  20. notification:
  21. - background-color: |
  22. [[[
  23. if (states['sensor.car_status'].state == 'Home')
  24. return "green";
  25. return "#AD5C5C";
  26. ]]]
  27. - border-radius: 20%
  28. - position: absolute
  29. - left: 73%
  30. - top: 8%
  31. - height: 24px
  32. - width: 24px
  33. - font-size: 8px
  34. - line-height: 20px
  35. custom_fields:
  36. notification: |
  37. [[[
  38. return `<ha-icon
  39. icon="mdi:car"
  40. style="padding-top: 1px; display: block; width: 20px; height: 20px; color: white; margin: auto; position: relative;">
  41. </ha-icon>`
  42. ]]]
  43. value: 'off'
  44. - color: white
  45. entity_picture: /local/facesam.png
  46. operator: default
  47. styles:
  48. card:
  49. - height: 100px
  50. entity_picture:
  51. - width: 45%
  52. - padding-top: 10px
  53. name:
  54. - font-size: 17px
  55. custom_fields:
  56. notification:
  57. - background-color: |
  58. [[[
  59. if (states['sensor.car_status'].state == 'Home')
  60. return "green";
  61. return "#AD5C5C";
  62. ]]]
  63. - border-radius: 20%
  64. - position: absolute
  65. - left: 73%
  66. - top: 8%
  67. - height: 24px
  68. - width: 24px
  69. - font-size: 8px
  70. - line-height: 20px
  71. custom_fields:
  72. notification: |
  73. [[[
  74. return `<ha-icon
  75. icon="mdi:car"
  76. style="padding-top: 1px; display: block; width: 20px; height: 20px; color: white; margin: auto; position: relative;">
  77. </ha-icon>`
  78. ]]]
  79. - type: horizontal-stack
  80. cards:
  81. - type: 'custom:button-card'
  82. entity: input_boolean.ground_floor_occupancy
  83. icon: 'mdi:doorbell'
  84. name: false
  85. show_name: false
  86. show_state: false
  87. state:
  88. - icon: 'mdi:home-floor-g'
  89. styles:
  90. card:
  91. - height: 50px
  92. icon:
  93. - width: 30px
  94. - opacity: 0.5
  95. - padding-bottom: 15px
  96. - padding-left: 10px
  97. value: 'off'
  98. - color: white
  99. icon: 'mdi:home-floor-g'
  100. operator: default
  101. styles:
  102. card:
  103. - height: 50px
  104. icon:
  105. - width: 30px
  106. - padding-bottom: 15px
  107. - padding-left: 10px
  108. - type: 'custom:button-card'
  109. entity: input_boolean.first_floor_occupancy
  110. icon: 'mdi:doorbell'
  111. name: false
  112. show_name: false
  113. show_state: false
  114. state:
  115. - icon: 'mdi:home-floor-1'
  116. styles:
  117. card:
  118. - height: 50px
  119. icon:
  120. - width: 30px
  121. - opacity: 0.5
  122. - padding-bottom: 15px
  123. value: 'off'
  124. - color: white
  125. icon: 'mdi:home-floor-1'
  126. operator: default
  127. styles:
  128. card:
  129. - height: 50px
  130. icon:
  131. - width: 30px
  132. - padding-bottom: 15px
  133. - type: 'custom:button-card'
  134. entity: input_boolean.second_floor_occupancy
  135. icon: 'mdi:doorbell'
  136. name: false
  137. show_name: false
  138. show_state: false
  139. state:
  140. - icon: 'mdi:home-floor-2'
  141. styles:
  142. card:
  143. - height: 50px
  144. icon:
  145. - width: 30px
  146. - opacity: 0.5
  147. - padding-bottom: 15px
  148. - padding-right: 10px
  149. value: 'off'
  150. - color: white
  151. icon: 'mdi:home-floor-2'
  152. operator: default
  153. styles:
  154. icon:
  155. - width: 30px
  156. - opacity: 0.9
  157. - padding-bottom: 15px
  158. - padding-right: 10px
  159. card:
  160. - height: 50px
  161.  
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!