API tools faq
paste
Pivotonian

Health Tile

Pivotonian
Sep 23rd, 2025
60
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.70 KB | None | 0 0
raw download clone embed print report
  1. type: custom:button-card
  2. show_name: false
  3. show_state: false
  4. styles:
  5. grid:
  6. - grid-template-areas: '"header" "stack_alistair" "stack_andreia"'
  7. grid-template-columns: 1fr
  8. grid-template-rows: auto
  9. align-content: start
  10. align-self: start
  11. justify-content: start
  12. justify-self: start
  13. column-gap: 20px
  14. card:
  15. - background-color: transparent
  16. border: solid 2px transparent
  17. height: 375px
  18. width: 302.5px
  19. padding: 0px 10px 10px 10px
  20. margin: 0px 0px 0px 0px
  21. custom_fields:
  22. header:
  23. card:
  24. type: custom:button-card
  25. name: Health
  26. styles:
  27. grid:
  28. - grid-template-areas: '"n toggle"'
  29. align-content: center
  30. align-self: center
  31. justify-content: center
  32. justify-self: center
  33. name:
  34. - font-size: 18px
  35. font-weight: 600
  36. justify-self: start
  37. align-self: center
  38. text-align: left
  39. padding: 10px 0px 0px 0px
  40. card:
  41. - background-color: transparent
  42. border-radius: 0px
  43. padding: 0px 15px 0px 15px
  44. height: 50px
  45. custom_fields:
  46. toggle:
  47. card:
  48. type: custom:button-card
  49. styles:
  50. grid:
  51. - grid-template-areas: '"alistair andreia"'
  52. grid-template-columns: 1fr 1fr
  53. align-content: center
  54. align-self: center
  55. justify-content: center
  56. justify-self: center
  57. card:
  58. - background: rgba(255,255,255,0.1)
  59. width: 140px
  60. border-radius: 25px
  61. padding: 0px 0px 0px 0px
  62. margin: 0px 0px -5px 0px
  63. align-content: end
  64. custom_fields:
  65. alistair:
  66. card:
  67. type: custom:button-card
  68. name: Alistair
  69. entity: input_select.health_toggle
  70. show_icon: false
  71. show_name: true
  72. show_state: false
  73. tap_action:
  74. action: perform-action
  75. perform_action: input_select.select_option
  76. target:
  77. entity_id:
  78. - input_select.health_toggle
  79. data:
  80. option: Alistair
  81. state:
  82. - value: Alistair
  83. styles:
  84. card:
  85. - background-color: rgba(255,255,255,0.4)
  86. name:
  87. - color: white
  88. styles:
  89. card:
  90. - background-color: transparent
  91. border-radius: 25px
  92. height: 25px
  93. name:
  94. - font-size: 12px
  95. font-weight: 400
  96. color: rgba(255,255,255,0.3)
  97. andreia:
  98. card:
  99. type: custom:button-card
  100. name: Andreia
  101. entity: input_select.health_toggle
  102. show_icon: false
  103. show_name: true
  104. show_state: false
  105. tap_action:
  106. action: perform-action
  107. perform_action: input_select.select_option
  108. target:
  109. entity_id:
  110. - input_select.health_toggle
  111. data:
  112. option: Andreia
  113. state:
  114. - value: Andreia
  115. styles:
  116. card:
  117. - background-color: rgba(255,255,255,0.4)
  118. name:
  119. - color: white
  120. styles:
  121. card:
  122. - background-color: transparent
  123. border-radius: 25px
  124. height: 25px
  125. name:
  126. - font-size: 12px
  127. font-weight: 400
  128. color: rgba(255,255,255,0.3)
  129. stack_alistair:
  130. card:
  131. type: conditional
  132. conditions:
  133. - condition: state
  134. entity: input_select.health_toggle
  135. state: Alistair
  136. card:
  137. type: custom:button-card
  138. template: health_template
  139. variables:
  140. var_sleep: sensor.alistair_total_sleep_hmm
  141. var_sleep_score: sensor.alistair_bed_sensor_sleep_score
  142. var_deep: sensor.alistair_bed_sensor_deep_sleep
  143. var_rem: sensor.alistair_bed_sensor_rem_sleep
  144. var_light: sensor.alistair_bed_sensor_light_sleep
  145. var_min: input_number.alistair_heart_rate_min
  146. var_avg: sensor.alistair_bed_sensor_average_heart_rate
  147. var_max: input_number.alistair_heart_rate_max
  148. var_steps: input_number.alistair_steps
  149. var_move: input_number.alistair_move
  150. var_template: circular-gauge-alistair
  151. stack_andreia:
  152. card:
  153. type: conditional
  154. conditions:
  155. - condition: state
  156. entity: input_select.health_toggle
  157. state: Andreia
  158. card:
  159. type: custom:button-card
  160. template: health_template
  161. variables:
  162. var_sleep: sensor.andreia_total_sleep_hhmm
  163. var_sleep_score: sensor.andreia_bed_sensor_sleep_score
  164. var_deep: sensor.andreia_bed_sensor_deep_sleep
  165. var_rem: sensor.andreia_bed_sensor_rem_sleep
  166. var_light: sensor.andreia_bed_sensor_light_sleep
  167. var_min: input_number.andreia_heart_rate_min
  168. var_avg: sensor.andreia_bed_sensor_average_heart_rate
  169. var_max: input_number.andreia_heart_rate_max
  170. var_steps: input_number.andreia_steps
  171. var_move: input_number.andreia_move
  172. var_template: circular-gauge-andreia
  173. card_mod:
  174. style: |
  175. :host {
  176. display: block;
  177. position: relative; margin: 0px 6px 0px 0px;
  178. }
  179.  
  180. :host::before {
  181.  
  182. content: "";
  183. position: absolute;
  184. inset: 0;
  185. border-radius: 30px;
  186. -webkit-backdrop-filter: blur(50px);
  187. z-index: -1;
  188. padding: .1rem;
  189. background: linear-gradient(60deg,
  190. rgba(255,255,255,0.0) 0%,
  191. rgba(255,255,255,0.2) 49%,
  192. rgba(255,255,255,0.2) 51%,
  193. rgba(255,255,255,0.0) 100%);
  194. -webkit-mask:
  195. linear-gradient(#fff 0 0) content-box,
  196. linear-gradient(#fff 0 0);
  197. -webkit-mask-composite: xor;
  198. mask-composite: exclude;
  199. z-index: 0; filter: saturate(140%);
  200. }
  201.  
  202. :host::after {
  203. content: "";
  204. background: linear-gradient(180deg, rgba(255,255,255, 0.1) 20%, rgba(255,255,255, 0.0) 100%);
  205. position: absolute;
  206. inset: 0;
  207. border-radius: 30px;
  208. box-shadow: inset -8px 10px 15px rgba(0, 0, 0, 0.1);
  209. z-index: -1;
  210.  
  211. -webkit-backdrop-filter:blur(30px) saturate(110%) brightness(90%);
  212. filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.2)); }
  213. health_template:
  214. variables:
  215. var_sleep: null
  216. var_sleep_score: null
  217. var_deep: null
  218. var_rem: null
  219. var_light: null
  220. var_min: null
  221. var_avg: null
  222. var_max: null
  223. var_steps: null
  224. var_move: null
  225. type: custom:button-card
  226. show_state: false
  227. show_name: true
  228. show_icon: false
  229. styles:
  230. grid:
  231. - grid-template-areas: '"divider1" "sleep" "divider2" "heart" "divider3" "stats"'
  232. align-content: start
  233. align-self: start
  234. justify-content: start
  235. justify-self: start
  236. card:
  237. - background-color: transparent
  238. padding: 0px
  239. border-radius: 0px
  240. align-content: start
  241. align-self: start
  242. justify-content: start
  243. justify-self: start
  244. custom_fields:
  245. divider1:
  246. card:
  247. type: custom:button-card
  248. template: divider
  249. styles:
  250. card:
  251. - margin: 0px 0px 5px 0px
  252. divider2:
  253. card:
  254. type: custom:button-card
  255. template: divider
  256. styles:
  257. card:
  258. - margin: 2px 0px 2px 0px
  259. divider3:
  260. card:
  261. type: custom:button-card
  262. template: divider
  263. sleep:
  264. card:
  265. type: custom:button-card
  266. styles:
  267. grid:
  268. - grid-template-areas: '"header" "timeline" "legend"'
  269. card:
  270. - background-color: transparent
  271. border-radius: 0px
  272. padding: 0px 15px 0px 15px
  273. custom_fields:
  274. timeline:
  275. - justify-self: center
  276. align-self: center
  277. justify-items: center
  278. custom_fields:
  279. header:
  280. card:
  281. type: custom:button-card
  282. entity: |
  283. [[[ return variables.var_sleep; ]]]
  284. label: |
  285. [[[ return `${states[variables.var_sleep_score].state}`; ]]]
  286. name: /100
  287. icon: mdi:medal
  288. show_state: true
  289. show_name: true
  290. show_icon: true
  291. show_label: true
  292. styles:
  293. grid:
  294. - grid-template-areas: '"s i l n"'
  295. grid-template-columns: auto min-content min-content min-content
  296. grid-template-rows: auto
  297. align-items: center
  298. state:
  299. - font-size: 20px
  300. font-weight: 600
  301. justify-self: start
  302. icon:
  303. - width: 25px
  304. color: |
  305. [[[
  306. const score = parseFloat(states[variables.var_sleep_score].state);
  307. if (score > 90) return 'rgba(255,159,10,1)';
  308. if (score > 75) return 'rgba(10,132,255,1)';
  309. if (score > 50) return 'rgba(255,69,58,1)';
  310. return 'gray';
  311. ]]]
  312. - justify-self: end
  313. padding-right: 10px
  314. label:
  315. - font-size: 20px
  316. font-weight: 550
  317. color: rgba(255,255,255,1)
  318. justify-self: end
  319. name:
  320. - font-size: 20px
  321. font-weight: 550
  322. color: rgba(255,255,255,0.3)
  323. justify-self: end
  324. card:
  325. - background-color: transparent
  326. - border-radius: 0px
  327. - padding: 0px
  328. - margin: 0px 0px 20px 0px
  329. timeline:
  330. card:
  331. type: horizontal-stack
  332. cards:
  333. - type: custom:button-card
  334. entity: |
  335. [[[ return variables.var_deep; ]]]
  336. icon: nul
  337. show_state: false
  338. show_name: false
  339. show_icon: true
  340. styles:
  341. card:
  342. - width: |
  343. [[[
  344. const deep = parseInt(states[variables.var_deep].state) || 0;
  345. const rem = parseInt(states[variables.var_rem].state) || 0;
  346. const light = parseInt(states[variables.var_light].state) || 0;
  347. const total = deep + rem + light || 1;
  348. return ((deep / total) * 240) + 'px';
  349. ]]]
  350. - height: 15px
  351. - margin: 0px
  352. - padding: 0
  353. - border-radius: 15px 0px 0px 15px
  354. - background-color: rgba(255,69,58,1)
  355. - type: custom:button-card
  356. entity: |
  357. [[[ return variables.var_rem; ]]]
  358. icon: nul
  359. show_state: false
  360. show_name: false
  361. show_icon: true
  362. styles:
  363. card:
  364. - width: |
  365. [[[
  366. const deep = parseInt(states[variables.var_deep].state) || 0;
  367. const rem = parseInt(states[variables.var_rem].state) || 0;
  368. const light = parseInt(states[variables.var_light].state) || 0;
  369. const total = deep + rem + light || 1;
  370. return ((rem / total) * 240) + 'px';
  371. ]]]
  372. - background-color: rgba(0,122,255,1)
  373. - height: 15px
  374. - margin: 0px 0px 0px -8px
  375. - padding: 0
  376. - border-radius: 0px
  377. name:
  378. - font-size: 10px
  379. align-self: end
  380. - type: custom:button-card
  381. entity: |
  382. [[[ return variables.var_light; ]]]
  383. icon: nul
  384. show_state: false
  385. show_name: false
  386. show_icon: true
  387. styles:
  388. card:
  389. - width: |
  390. [[[
  391. const deep = parseInt(states[variables.var_deep].state) || 0;
  392. const rem = parseInt(states[variables.var_rem].state) || 0;
  393. const light = parseInt(states[variables.var_light].state) || 0;
  394. const total = deep + rem + light || 1;
  395. return ((light / total) * 240) + 'px';
  396. ]]]
  397. - background-color: rgba(90,200,255,1)
  398. - height: 15px
  399. - margin: 0px 0px 0px -8px
  400. - padding: 0
  401. - border-radius: 0px 15px 15px 0px
  402. name:
  403. - font-size: 10px
  404. align-self: end
  405. legend:
  406. card:
  407. type: custom:button-card
  408. styles:
  409. card:
  410. - background-color: transparent
  411. border-radius: 0px
  412. overflow-x: auto
  413. padding: 0px 0px 10px 0px
  414. justify-content: center
  415. grid:
  416. - grid-template-areas: '"deep rem light"'
  417. grid-template-columns: auto auto auto
  418. justify-content: center
  419. column-gap: 5px
  420. custom_fields:
  421. deep:
  422. card:
  423. type: custom:button-card
  424. entity: |
  425. [[[ return variables.var_deep; ]]]
  426. show_state: false
  427. show_name: true
  428. show_icon: true
  429. show_label: true
  430. label: Deep
  431. icon: null
  432. name: |
  433. [[[
  434. let seconds = parseInt(states[variables.var_deep].state, 10);
  435. let hours = Math.floor(seconds / 3600);
  436. let minutes = Math.floor((seconds % 3600) / 60);
  437. if (hours === 0) {
  438. return `${minutes}m`;
  439. } else {
  440. return `${hours}h ${minutes}m`;
  441. }
  442. ]]]
  443. styles:
  444. grid:
  445. - grid-template-areas: '"i n l"'
  446. grid-template-rows: 1fr
  447. grid-template-columns: min-content min-content min-content
  448. card:
  449. - border-radius: 0px
  450. width: 100%
  451. height: 25px
  452. padding: 0px
  453. margin: 0px
  454. background-color: transparent
  455. img_cell:
  456. - background-color: rgba(255,69,58,1)
  457. border-radius: 2px
  458. width: 13px
  459. height: 13px
  460. justify-self: start
  461. align-self: end
  462. name:
  463. - font-size: 11px
  464. font-weight: 550
  465. color: white
  466. justify-self: start
  467. padding-left: 5px
  468. align-self: end
  469. label:
  470. - font-size: 9px
  471. font-weight: 550
  472. color: rgba(255,255,255,0.3)
  473. justify-self: start
  474. align-self: end
  475. padding: 0px 0px 0px 5px
  476. rem:
  477. card:
  478. type: custom:button-card
  479. entity: |
  480. [[[ return variables.var_rem; ]]]
  481. show_state: false
  482. show_name: true
  483. show_icon: true
  484. show_label: true
  485. label: REM
  486. name: |
  487. [[[
  488. let seconds = parseInt(states[variables.var_rem].state, 10);
  489. let hours = Math.floor(seconds / 3600);
  490. let minutes = Math.floor((seconds % 3600) / 60);
  491. return `${hours}h ${minutes}m`;
  492. ]]]
  493. icon: null
  494. styles:
  495. grid:
  496. - grid-template-areas: '"i n l"'
  497. grid-template-rows: 1fr
  498. grid-template-columns: min-content min-content min-content
  499. card:
  500. - border-radius: 0px
  501. width: 100%
  502. height: 25px
  503. padding: 0px
  504. margin: 0px
  505. background-color: transparent
  506. img_cell:
  507. - background-color: rgba(0,122,255,1)
  508. border-radius: 2px
  509. width: 13px
  510. height: 13px
  511. justify-self: start
  512. align-self: end
  513. name:
  514. - font-size: 11px
  515. font-weight: 550
  516. color: white
  517. justify-self: start
  518. padding-left: 5px
  519. align-self: end
  520. label:
  521. - font-size: 9px
  522. font-weight: 550
  523. color: rgba(255,255,255,0.3)
  524. justify-self: start
  525. align-self: end
  526. padding: 0px 0px 0px 5px
  527. light:
  528. card:
  529. type: custom:button-card
  530. entity: |
  531. [[[ return variables.var_light; ]]]
  532. show_state: false
  533. show_name: true
  534. show_icon: true
  535. show_label: true
  536. icon: null
  537. label: Light
  538. name: |
  539. [[[
  540. let seconds = parseInt(states[variables.var_light].state, 10);
  541. let hours = Math.floor(seconds / 3600);
  542. let minutes = Math.floor((seconds % 3600) / 60);
  543. return `${hours}h ${minutes}m`;
  544. ]]]
  545. styles:
  546. grid:
  547. - grid-template-areas: '"i n l"'
  548. grid-template-rows: 1fr
  549. grid-template-columns: min-content min-content
  550. card:
  551. - border-radius: 0px
  552. width: 100%
  553. height: 25px
  554. padding: 0px
  555. margin: 0px
  556. background-color: transparent
  557. img_cell:
  558. - background-color: rgba(90,200,255,1)
  559. border-radius: 2px
  560. width: 13px
  561. height: 13px
  562. justify-self: start
  563. align-self: end
  564. name:
  565. - font-size: 11px
  566. font-weight: 550
  567. color: white
  568. justify-self: start
  569. padding-left: 5px
  570. align-self: end
  571. label:
  572. - font-size: 9px
  573. font-weight: 550
  574. color: rgba(255,255,255,0.3)
  575. justify-self: start
  576. align-self: end
  577. padding: 0px 0px 0px 5px
  578. heart:
  579. card:
  580. type: custom:button-card
  581. show_state: false
  582. show_name: true
  583. show_icon: false
  584. show_units: false
  585. name: Heart Rate
  586. icon: mdi:heart-pulse
  587. styles:
  588. grid:
  589. - grid-template-areas: '"n gauge" "minimum gauge" "average gauge" "maximum gauge"'
  590. - grid-template-columns: 1fr 1fr
  591. - grid-template-rows: min-content min-content min-content
  592. name:
  593. - font-size: 18px
  594. - font-weight: 600
  595. - justify-self: start
  596. - align-self: start
  597. - text-align: left
  598. - padding: 0px 0px 10px 0px
  599. card:
  600. - background-color: transparent
  601. border-radius: 0px
  602. padding: 10px 15px 0px 15px
  603. margin: 0px 0px 15px 0px
  604. custom_fields:
  605. gauge:
  606. - margin: 0px -20px 0px 0px
  607. custom_fields:
  608. gauge:
  609. card:
  610. type: custom:button-card
  611. template: '[[[ return variables.var_template; ]]]'
  612. minimum:
  613. card:
  614. type: custom:button-card
  615. entity: '[[[ return variables.var_min; ]]]'
  616. show_state: true
  617. show_name: false
  618. show_icon: true
  619. show_label: true
  620. show_units: false
  621. icon: mdi:tortoise
  622. label: Min
  623. styles:
  624. grid:
  625. - grid-template-areas: '"i s l"'
  626. grid-template-rows: 1fr
  627. grid-template-columns: min-content min-content min-content
  628. card:
  629. - border-radius: 0px
  630. width: 150px
  631. height: 25px
  632. padding: 0px 0px 0px 0px
  633. margin: 0px
  634. background-color: transparent
  635. img_cell:
  636. - background-color: rgba(90,200,250,1)
  637. border-radius: 5px
  638. width: 20px
  639. height: 20px
  640. justify-self: start
  641. state:
  642. - font-size: 16px
  643. font-weight: 550
  644. color: white
  645. justify-self: start
  646. padding-left: 10px
  647. label:
  648. - font-size: 12px
  649. font-weight: 550
  650. color: rgba(255,255,255,0.3)
  651. justify-self: start
  652. padding: 5px 0px 0px 5px
  653. icon:
  654. - width: 25px
  655. average:
  656. card:
  657. type: custom:button-card
  658. entity: '[[[ return variables.var_avg; ]]]'
  659. show_state: true
  660. show_name: false
  661. show_icon: true
  662. show_label: true
  663. show_units: false
  664. label: Avg
  665. icon: mdi:minus
  666. styles:
  667. grid:
  668. - grid-template-areas: '"i s l"'
  669. grid-template-rows: 1fr
  670. grid-template-columns: min-content min-content min-content
  671. card:
  672. - border-radius: 0px
  673. width: 150px
  674. height: 25px
  675. padding: 0px
  676. margin: 0px
  677. background-color: transparent
  678. img_cell:
  679. - background-color: rgba(0,122,255,1)
  680. border-radius: 5px
  681. width: 20px
  682. height: 20px
  683. justify-self: start
  684. icon:
  685. - width: 25px
  686. state:
  687. - font-size: 16px
  688. font-weight: 550
  689. color: white
  690. justify-self: start
  691. padding-left: 10px
  692. label:
  693. - font-size: 12px
  694. font-weight: 550
  695. color: rgba(255,255,255,0.3)
  696. justify-self: start
  697. padding: 5px 0px 0px 5px
  698. maximum:
  699. card:
  700. type: custom:button-card
  701. entity: '[[[ return variables.var_max; ]]]'
  702. show_state: true
  703. show_name: false
  704. show_icon: true
  705. show_label: true
  706. show_units: false
  707. label: Max
  708. icon: mdi:rabbit
  709. styles:
  710. grid:
  711. - grid-template-areas: '"i s l"'
  712. grid-template-rows: 1fr
  713. grid-template-columns: min-content min-content min-content
  714. card:
  715. - border-radius: 0px
  716. width: 150px
  717. height: 25px
  718. padding: 0px
  719. margin: 0px
  720. background-color: transparent
  721. img_cell:
  722. - background-color: rgba(255,69,58,1)
  723. border-radius: 5px
  724. width: 20px
  725. height: 20px
  726. justify-self: start
  727. state:
  728. - font-size: 16px
  729. font-weight: 550
  730. color: white
  731. justify-self: start
  732. padding-left: 10px
  733. label:
  734. - font-size: 12px
  735. font-weight: 550
  736. color: rgba(255,255,255,0.3)
  737. justify-self: start
  738. padding: 5px 0px 0px 5px
  739. icon:
  740. - width: 25px
  741. color: white
  742. stats:
  743. card:
  744. type: custom:button-card
  745. styles:
  746. card:
  747. - background-color: transparent
  748. height: 40px
  749. border-radius: 0px
  750. overflow-x: auto
  751. margin: 0px 15px 10px 15px
  752. padding: 0px
  753. justify-content: start
  754. grid:
  755. - grid-template-areas: '"steps move"'
  756. grid-template-columns: auto auto
  757. justify-content: start
  758. align-content: start
  759. column-gap: 10px
  760. custom_fields:
  761. steps:
  762. card:
  763. type: custom:button-card
  764. entity: |
  765. [[[ return variables.var_steps; ]]]
  766. label: Steps
  767. show_name: false
  768. show_label: true
  769. show_icon: true
  770. show_state: true
  771. show_units: false
  772. styles:
  773. grid:
  774. - grid-template-areas: '"i s l"'
  775. grid-template-rows: 1fr
  776. grid-template-columns: min-content min-content min-content
  777. align-content: center
  778. card:
  779. - border-radius: 0px
  780. - padding: 0px
  781. - margin: 0px
  782. - background-color: transparent
  783. img_cell:
  784. - background-color: transparent
  785. - border-radius: 0px
  786. - width: 25px
  787. - height: 40px
  788. - justify-self: start
  789. icon:
  790. - width: 25px
  791. - color: rgba(255,69,58,1)
  792. state:
  793. - font-size: 18px
  794. font-weight: 600
  795. color: white
  796. justify-self: start
  797. padding-left: 5px
  798. label:
  799. - font-size: 12px
  800. font-weight: 550
  801. color: rgba(255,255,255,0.3)
  802. justify-self: start
  803. padding: 5px 0px 0px 5px
  804. move:
  805. card:
  806. type: custom:button-card
  807. entity: |
  808. [[[ return variables.var_move; ]]]
  809. label: kcal
  810. name: /806
  811. show_name: true
  812. show_label: true
  813. show_icon: true
  814. show_state: true
  815. show_units: false
  816. styles:
  817. grid:
  818. - grid-template-areas: '"i s n l"'
  819. grid-template-rows: 1fr
  820. grid-template-columns: min-content min-content min-content
  821. card:
  822. - border-radius: 0px
  823. - background-color: transparent
  824. img_cell:
  825. - background-color: transparent
  826. - border-radius: 0px
  827. - width: 25px
  828. - height: 40px
  829. - justify-self: start
  830. icon:
  831. - width: 25px
  832. - color: rgba(255,69,58,1)
  833. state:
  834. - font-size: 18px
  835. - font-weight: 600
  836. - color: white
  837. - justify-self: start
  838. - padding-left: 5px
  839. label:
  840. - font-size: 12px
  841. - font-weight: 550
  842. - color: rgba(255,255,255,0.3)
  843. - justify-self: start
  844. - padding: 5px 0px 0px 5px
  845. name:
  846. - font-size: 18px
  847. - font-weight: 600
  848. - color: rgba(255,255,255,0.3)
  849. - justify-self: start
  850. - padding: 0px 0px 0px 2px
  851. circular-gauge-andreia:
  852. type: custom:button-card
  853. show_icon: false
  854. show_name: false
  855. show_state: false
  856. styles:
  857. grid:
  858. - grid-template-areas: '"gauge"'
  859. card:
  860. - padding: 0px
  861. margin: 0px
  862. height: 110px
  863. width: 110px
  864. background-color: transparent
  865. custom_fields:
  866. gauge:
  867. card:
  868. type: custom:modern-circular-gauge
  869. entity: sensor.andreia_bed_sensor_average_heart_rate
  870. secondary: {}
  871. max: >
  872. {{ states('input_number.andreia_heart_rate_max') | float
  873. }}
  874. gauge_foreground_style:
  875. color: adaptive
  876. width: 6
  877. gauge_background_style:
  878. width: 6
  879. color: adaptive
  880. opacity: 1
  881. show_header: false
  882. adaptive_icon_color: true
  883. icon: mdi:heart-pulse
  884. show_icon: true
  885. segments:
  886. - from: 50
  887. to: 100
  888. color:
  889. - 100
  890. - 210
  891. - 255
  892. - from: 100
  893. to: 150
  894. color:
  895. - 10
  896. - 132
  897. - 255
  898. - from: 150
  899. to: 150
  900. color:
  901. - 255
  902. - 69
  903. - 58
  904. unit: bpm
  905. smooth_segments: true
  906. needle: true
  907. min: >
  908. {{ states('input_number.andreia_heart_rate_min') | float
  909. }}
  910. show_unit: true
  911. show_state: true
  912. card_mod:
  913. style: |
  914. ha-card {
  915. background-color: transparent;
  916. font-size: 25px !important;
  917. width: 100% !important;
  918. height: 100% !important;
  919.  
  920. }
  921. text.value {
  922. font-size: 35px !important;
  923. font-weight: 600;
  924. }
  925. .arc.clear {
  926. stroke: rgba(0,0,0,0.3) !important;
  927. }
  928. .icon-container {
  929. margin-top: 0px;
  930. margin-bottom: -10px !important;
  931. margin-right: 5px;}
  932.  
  933. ha-state-icon {
  934. --mdc-icon-size: 150% !important;}
  935. circular-gauge-alistair:
  936. type: custom:button-card
  937. show_icon: false
  938. show_name: false
  939. show_state: false
  940. styles:
  941. grid:
  942. - grid-template-areas: '"gauge"'
  943. card:
  944. - padding: 0px
  945. margin: 0px
  946. height: 110px
  947. width: 110px
  948. background-color: transparent
  949. custom_fields:
  950. gauge:
  951. card:
  952. type: custom:modern-circular-gauge
  953. entity: sensor.alistair_bed_sensor_average_heart_rate
  954. secondary: {}
  955. max: >
  956. {{ states('input_number.alistair_heart_rate_max') | float
  957. }}
  958. gauge_foreground_style:
  959. color: adaptive
  960. width: 6
  961. gauge_background_style:
  962. width: 6
  963. color: adaptive
  964. opacity: 1
  965. show_header: false
  966. adaptive_icon_color: true
  967. icon: mdi:heart-pulse
  968. show_icon: true
  969. segments:
  970. - from: 50
  971. to: 100
  972. color:
  973. - 100
  974. - 210
  975. - 255
  976. - from: 100
  977. to: 150
  978. color:
  979. - 10
  980. - 132
  981. - 255
  982. - from: 150
  983. to: 150
  984. color:
  985. - 255
  986. - 69
  987. - 58
  988. unit: bpm
  989. smooth_segments: true
  990. needle: true
  991. min: >
  992. {{ states('input_number.alistair_heart_rate_min') | float
  993. }}
  994. show_unit: true
  995. show_state: true
  996. card_mod:
  997. style: |
  998. ha-card {
  999. background-color: transparent;
  1000. font-size: 25px !important;
  1001. width: 100% !important;
  1002. height: 100% !important;
  1003.  
  1004. }
  1005. text.value {
  1006. font-size: 35px !important;
  1007. font-weight: 600;
  1008. }
  1009. .arc.clear {
  1010. stroke: rgba(0,0,0,0.3) !important;
  1011. }
  1012. .icon-container {
  1013. margin-top: 0px;
  1014. margin-bottom: -10px !important;
  1015. margin-right: 5px;}
  1016.  
  1017. ha-state-icon {
  1018. --mdc-icon-size: 150% !important;}
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!