API tools faq
paste
Advertisement
pqpxoxa

HA - Button Card with bars

pqpxoxa
Feb 27th, 2021
582
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.57 KB | None | 0 0
raw download clone embed print report
  1. - cards:
  2. - color_type: blank-card
  3. icon: 'mdi:led-strip-variant'
  4. name: Floor
  5. styles:
  6. card:
  7. - width: 50px
  8. type: 'custom:button-card'
  9. - entity: switch.front_door_lamp
  10. extra_styles: |
  11. @keyframes mymove {
  12. 30% {box-shadow: 0 0 20px white;}
  13. }
  14. icon: 'mdi:lamp'
  15. name: Front Door Lamp
  16. state:
  17. - icon: 'mdi:lamp'
  18. styles:
  19. card:
  20. - height: 100px
  21. icon:
  22. - width: 25%
  23. - opacity: 0.5
  24. name:
  25. - padding: 5px 0px
  26. - font-size: 15px
  27. - text-overflow: unset
  28. - white-space: unset
  29. - word-break: break-word
  30. custom_fields:
  31. notification:
  32. - background-color: |
  33. [[[
  34. if (states['automation.front_door_lamp_timer'].state == 'on')
  35. return "green";
  36. return "#AD5C5C";
  37. ]]]
  38. - border-radius: 20%
  39. - position: absolute
  40. - left: 10%
  41. - top: 91%
  42. - opacity: 0.5
  43. - height: 4px
  44. - width: 80%
  45. custom_fields:
  46. notification: |
  47. [[[
  48. return `<ha-icon
  49. icon="mdi:robot"
  50. style="display: block; width: 1px; height: 1px; color: white; margin: auto; position: relative;">
  51. </ha-icon>`
  52. ]]]
  53. value: 'off'
  54. - color: white
  55. icon: 'mdi:lamp'
  56. operator: default
  57. styles:
  58. card:
  59. - height: 100px
  60. - animation: mymove 10s infinite
  61. icon:
  62. - width: 25%
  63. name:
  64. - padding: 5px 0px
  65. - font-size: 15px
  66. - text-overflow: unset
  67. - white-space: unset
  68. - word-break: break-word
  69. custom_fields:
  70. notification:
  71. - background-color: |
  72. [[[
  73. if (states['automation.front_door_lamp_timer'].state == 'on')
  74. return "green";
  75. return "#AD5C5C";
  76. ]]]
  77. - border-radius: 20%
  78. - position: absolute
  79. - left: 10%
  80. - top: 91%
  81. - opacity: 0.5
  82. - height: 4px
  83. - width: 80%
  84. custom_fields:
  85. notification: |
  86. [[[
  87. return `<ha-icon
  88. icon="mdi:robot"
  89. style="display: block; width: 1px; height: 1px; color: white; margin: auto; position: relative;">
  90. </ha-icon>`
  91. ]]]
  92. type: 'custom:button-card'
  93. - entity: light.first_hallway
  94. tap_action:
  95. action: call-service
  96. service: light.toggle
  97. service_data:
  98. entity_id: light.first_hallway
  99. brightness: 254
  100. color_temp: 140
  101. double_tap_action:
  102. action: call-service
  103. service: light.toggle
  104. service_data:
  105. entity_id: light.first_hallway
  106. brightness: 50
  107. color_temp: 140
  108. extra_styles: |
  109. @keyframes mymove {
  110. 30% {box-shadow: 0 0 20px white;}
  111. }
  112. hold_action:
  113. action: more-info
  114. icon: 'mdi:wall-sconce-flat'
  115. name: Ground Floor Ceiling
  116. state:
  117. - icon: 'mdi:wall-sconce-flat'
  118. styles:
  119. card:
  120. - height: 100px
  121. icon:
  122. - width: 25%
  123. - opacity: 0.5
  124. name:
  125. - padding: 5px 0px
  126. - font-size: 15px
  127. - text-overflow: unset
  128. - white-space: unset
  129. - word-break: break-word
  130. custom_fields:
  131. notification:
  132. - background-color: |
  133. [[[
  134. if (states['automation.ikea_ceiling_ground_floor'].state == 'on')
  135. return "green";
  136. return "#AD5C5C";
  137. ]]]
  138. - border-radius: 20%
  139. - position: absolute
  140. - left: 10%
  141. - top: 91%
  142. - opacity: 0.5
  143. - height: 4px
  144. - width: 80%
  145. custom_fields:
  146. notification: |
  147. [[[
  148. return `<ha-icon
  149. icon="mdi:robot"
  150. style="display: block; width: 1px; height: 1px; color: white; margin: auto; position: relative;">
  151. </ha-icon>`
  152. ]]]
  153. value: 'off'
  154. - color: white
  155. icon: 'mdi:wall-sconce-flat'
  156. operator: default
  157. styles:
  158. card:
  159. - height: 100px
  160. - animation: mymove 10s infinite
  161. icon:
  162. - width: 25%
  163. name:
  164. - padding: 5px 0px
  165. - font-size: 15px
  166. - text-overflow: unset
  167. - white-space: unset
  168. - word-break: break-word
  169. custom_fields:
  170. notification:
  171. - background-color: |
  172. [[[
  173. if (states['automation.ikea_ceiling_ground_floor'].state == 'on')
  174. return "green";
  175. return "#AD5C5C";
  176. ]]]
  177. - border-radius: 20%
  178. - position: absolute
  179. - left: 10%
  180. - top: 91%
  181. - opacity: 0.5
  182. - height: 4px
  183. - width: 80%
  184. custom_fields:
  185. notification: |
  186. [[[
  187. return `<ha-icon
  188. icon="mdi:robot"
  189. style="display: block; width: 1px; height: 1px; color: white; margin: auto; position: relative;">
  190. </ha-icon>`
  191. ]]]
  192. type: 'custom:button-card'
  193. - color_type: blank-card
  194. icon: 'mdi:led-strip-variant'
  195. name: Floor
  196. styles:
  197. card:
  198. - width: 50px
  199. type: 'custom:button-card'
  200. type: horizontal-stack
  201. - cards:
  202. - color_type: blank-card
  203. icon: 'mdi:led-strip-variant'
  204. name: Floor
  205. styles:
  206. card:
  207. - width: 50px
  208. type: 'custom:button-card'
  209. - entity: light.first_floor_hallway
  210. tap_action:
  211. action: call-service
  212. service: light.toggle
  213. service_data:
  214. entity_id: light.first_floor_hallway
  215. brightness: 254
  216. double_tap_action:
  217. action: call-service
  218. service: light.toggle
  219. service_data:
  220. entity_id: light.first_floor_hallway
  221. brightness: 50
  222. extra_styles: |
  223. @keyframes mymove {
  224. 30% {box-shadow: 0 0 20px white;}
  225. }
  226. hold_action:
  227. action: more-info
  228. icon: 'mdi:wall-sconce-flat'
  229. name: First Floor Ceiling
  230. state:
  231. - icon: 'mdi:wall-sconce-flat'
  232. styles:
  233. card:
  234. - height: 100px
  235. icon:
  236. - width: 25%
  237. - opacity: 0.5
  238. name:
  239. - padding: 5px 0px
  240. - font-size: 15px
  241. - text-overflow: unset
  242. - white-space: unset
  243. - word-break: break-word
  244. custom_fields:
  245. notification:
  246. - background-color: |
  247. [[[
  248. if (states['automation.ikea_ceiling_first_floor'].state == 'on')
  249. return "green";
  250. return "#AD5C5C";
  251. ]]]
  252. - border-radius: 20%
  253. - position: absolute
  254. - left: 10%
  255. - top: 91%
  256. - opacity: 0.5
  257. - height: 4px
  258. - width: 80%
  259. custom_fields:
  260. notification: |
  261. [[[
  262. return `<ha-icon
  263. icon="mdi:robot"
  264. style="display: block; width: 1px; height: 1px; color: white; margin: auto; position: relative;">
  265. </ha-icon>`
  266. ]]]
  267. value: 'off'
  268. - color: white
  269. icon: 'mdi:wall-sconce-flat'
  270. operator: default
  271. styles:
  272. card:
  273. - height: 100px
  274. - animation: mymove 10s infinite
  275. icon:
  276. - width: 25%
  277. name:
  278. - padding: 5px 0px
  279. - font-size: 15px
  280. - text-overflow: unset
  281. - white-space: unset
  282. - word-break: break-word
  283. custom_fields:
  284. notification:
  285. - background-color: |
  286. [[[
  287. if (states['automation.ikea_ceiling_first_floor'].state == 'on')
  288. return "green";
  289. return "#AD5C5C";
  290. ]]]
  291. - border-radius: 20%
  292. - position: absolute
  293. - left: 10%
  294. - top: 91%
  295. - opacity: 0.5
  296. - height: 4px
  297. - width: 80%
  298. custom_fields:
  299. notification: |
  300. [[[
  301. return `<ha-icon
  302. icon="mdi:robot"
  303. style="display: block; width: 1px; height: 1px; color: white; margin: auto; position: relative;">
  304. </ha-icon>`
  305. ]]]
  306. type: 'custom:button-card'
  307. - entity: light.second_ceiling_lights
  308. tap_action:
  309. action: call-service
  310. service: light.toggle
  311. service_data:
  312. entity_id: light.second_ceiling_lights
  313. brightness: 254
  314. color_temp: 140
  315. double_tap_action:
  316. action: call-service
  317. service: light.toggle
  318. service_data:
  319. entity_id: light.second_ceiling_lights
  320. brightness: 50
  321. color_temp: 140
  322. extra_styles: |
  323. @keyframes mymove {
  324. 30% {box-shadow: 0 0 20px white;}
  325. }
  326. hold_action:
  327. action: more-info
  328. icon: 'mdi:wall-sconce-flat'
  329. name: Second Floor Ceiling
  330. state:
  331. - icon: 'mdi:wall-sconce-flat'
  332. styles:
  333. card:
  334. - height: 100px
  335. icon:
  336. - width: 25%
  337. - opacity: 0.5
  338. name:
  339. - padding: 5px 0px
  340. - font-size: 15px
  341. - text-overflow: unset
  342. - white-space: unset
  343. - word-break: break-word
  344. custom_fields:
  345. notification:
  346. - background-color: |
  347. [[[
  348. if (states['automation.ikea_ceiling_second_floor'].state == 'on')
  349. return "green";
  350. return "#AD5C5C";
  351. ]]]
  352. - border-radius: 20%
  353. - position: absolute
  354. - left: 10%
  355. - top: 91%
  356. - opacity: 0.5
  357. - height: 4px
  358. - width: 80%
  359. custom_fields:
  360. notification: |
  361. [[[
  362. return `<ha-icon
  363. icon="mdi:robot"
  364. style="display: block; width: 1px; height: 1px; color: white; margin: auto; position: relative;">
  365. </ha-icon>`
  366. ]]]
  367. value: 'off'
  368. - color: white
  369. icon: 'mdi:wall-sconce-flat'
  370. operator: default
  371. styles:
  372. card:
  373. - height: 100px
  374. - animation: mymove 10s infinite
  375. icon:
  376. - width: 25%
  377. name:
  378. - padding: 5px 0px
  379. - font-size: 15px
  380. - text-overflow: unset
  381. - white-space: unset
  382. - word-break: break-word
  383. custom_fields:
  384. notification:
  385. - background-color: |
  386. [[[
  387. if (states['automation.ikea_ceiling_second_floor'].state == 'on')
  388. return "green";
  389. return "#AD5C5C";
  390. ]]]
  391. - border-radius: 20%
  392. - position: absolute
  393. - left: 10%
  394. - top: 91%
  395. - opacity: 0.5
  396. - height: 4px
  397. - width: 80%
  398. custom_fields:
  399. notification: |
  400. [[[
  401. return `<ha-icon
  402. icon="mdi:robot"
  403. style="display: block; width: 1px; height: 1px; color: white; margin: auto; position: relative;">
  404. </ha-icon>`
  405. ]]]
  406. type: 'custom:button-card'
  407. - color_type: blank-card
  408. icon: 'mdi:led-strip-variant'
  409. name: Floor
  410. styles:
  411. card:
  412. - width: 50px
  413. type: 'custom:button-card'
  414. type: horizontal-stack
  415. - cards:
  416. - color_type: blank-card
  417. icon: 'mdi:led-strip-variant'
  418. name: Floor
  419. styles:
  420. card:
  421. - width: 50px
  422. type: 'custom:button-card'
  423. - type: 'custom:button-card'
  424. entity: automation.front_door_lamp_timer
  425. name: Hallway Timing<br>Automation
  426. show_name: false
  427. state:
  428. - icon: 'mdi:lamp'
  429. styles:
  430. card:
  431. - height: 70px
  432. icon:
  433. - opacity: 0.5
  434. value: 'off'
  435. - color: white
  436. icon: 'mdi:lamp'
  437. operator: default
  438. styles:
  439. card:
  440. - height: 70px
  441. icon: null
  442. - type: 'custom:button-card'
  443. entity: automation.ikea_ceiling_ground_floor
  444. name: Hallway Timing<br>Automation
  445. show_name: false
  446. state:
  447. - icon: 'mdi:home-floor-g'
  448. styles:
  449. card:
  450. - height: 70px
  451. icon:
  452. - opacity: 0.5
  453. value: 'off'
  454. - color: white
  455. icon: 'mdi:home-floor-g'
  456. operator: default
  457. styles:
  458. card:
  459. - height: 70px
  460. icon: null
  461. - type: 'custom:button-card'
  462. entity: automation.ikea_ceiling_first_floor
  463. name: Hallway Timing<br>Automation
  464. show_name: false
  465. state:
  466. - icon: 'mdi:home-floor-1'
  467. styles:
  468. card:
  469. - height: 70px
  470. icon:
  471. - opacity: 0.5
  472. value: 'off'
  473. - color: white
  474. icon: 'mdi:home-floor-1'
  475. operator: default
  476. styles:
  477. card:
  478. - height: 70px
  479. icon: null
  480. - type: 'custom:button-card'
  481. entity: automation.ikea_ceiling_second_floor
  482. name: Hallway Timing<br>Automation
  483. show_name: false
  484. state:
  485. - icon: 'mdi:home-floor-2'
  486. styles:
  487. card:
  488. - height: 70px
  489. icon:
  490. - opacity: 0.5
  491. value: 'off'
  492. - color: white
  493. icon: 'mdi:home-floor-2'
  494. operator: default
  495. styles:
  496. card:
  497. - height: 70px
  498. icon: null
  499. - color_type: blank-card
  500. icon: 'mdi:led-strip-variant'
  501. name: Floor
  502. styles:
  503. card:
  504. - width: 50px
  505. type: 'custom:button-card'
  506. type: horizontal-stack
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!