API tools faq
paste
Advertisement
pqpxoxa

HA - Floor Plan with Buttons

pqpxoxa
Nov 6th, 2020 (edited)
857
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 47.07 KB | None | 0 0
raw download clone embed print report
  1. #########################################################################
  2. ###### Custom Components:
  3. ###### - 'custom:button-card'
  4. ###### - 'custom:state-switch'
  5. ###### - 'browser_mod'
  6. ###### - 'custom:light-popup-card'
  7. ###### - 'custom:vertical-stack-in-card'
  8. #########################################################################
  9.  
  10.  
  11. cards:
  12.  
  13. #########################################################################
  14. ###### ↓ Header card ↓
  15. #########################################################################
  16.  
  17. - content: |
  18. # Ground Floor
  19. style:
  20. .: |
  21. ha-card {
  22. background-color: transparent !important;
  23. box-shadow: none !important;
  24. }
  25. ha-markdown:
  26. $: |
  27. h1 {
  28. font-size: 30px;
  29. color: transparent;
  30. #font-weight: bold;
  31. text-align: center;
  32. letter-spacing: '-0.01em';
  33. }
  34. type: markdown
  35.  
  36. #########################################################################
  37. ###### ↓ 'Gap' Card (Left of Horizontal row) ↓
  38. #########################################################################
  39.  
  40. - cards:
  41. - color_type: blank-card
  42. icon: 'mdi:led-strip-variant'
  43. name: Floor
  44. styles:
  45. card:
  46. - width: 25px
  47. type: 'custom:button-card'
  48.  
  49. #########################################################################
  50. ###### ↓ Start of button selection - Lights ↓
  51. #########################################################################
  52.  
  53. - type: 'custom:button-card'
  54. entity: input_select.ground_floor_plan
  55. extra_styles: |
  56. @keyframes mymove {
  57. 30% {box-shadow: 0 0 20px white;}
  58. }
  59. icon: 'mdi:lightbulb-group-outline'
  60. name: Lights
  61. state:
  62. - icon: 'mdi:lightbulb-group-outline'
  63. styles:
  64. card:
  65. - height: 80px
  66. icon:
  67. - width: 45%
  68. - opacity: 0.5
  69. - padding-top: 10px
  70. name:
  71. - padding: 10px
  72. - font-size: 10px
  73. - text-overflow: unset
  74. - white-space: unset
  75. - word-break: break-word
  76. value: Security
  77. - icon: 'mdi:lightbulb-group-outline'
  78. styles:
  79. card:
  80. - height: 80px
  81. icon:
  82. - width: 45%
  83. - opacity: 0.5
  84. - padding-top: 10px
  85. name:
  86. - padding: 10px
  87. - font-size: 10px
  88. - text-overflow: unset
  89. - white-space: unset
  90. - word-break: break-word
  91. value: Temperature
  92. - icon: 'mdi:lightbulb-group-outline'
  93. styles:
  94. card:
  95. - height: 80px
  96. icon:
  97. - width: 45%
  98. - opacity: 0.5
  99. - padding-top: 10px
  100. name:
  101. - padding: 10px
  102. - font-size: 10px
  103. - text-overflow: unset
  104. - white-space: unset
  105. - word-break: break-word
  106. value: Media
  107. - color: white
  108. icon: 'mdi:lightbulb-group-outline'
  109. operator: default
  110. styles:
  111. card:
  112. - height: 80px
  113. - animation: mymove 10s infinite
  114. icon:
  115. - width: 45%
  116. - padding-top: 10px
  117. name:
  118. - padding: 10px
  119. - font-size: 10px
  120. - text-overflow: unset
  121. - white-space: unset
  122. - word-break: break-word
  123. value: Lights
  124. tap_action:
  125. action: call-service
  126. service: input_select.select_option
  127. service_data:
  128. entity_id: input_select.ground_floor_plan
  129. option: Lights
  130.  
  131. #########################################################################
  132. ###### ↓ Start of button selection - Security ↓
  133. #########################################################################
  134.  
  135. - type: 'custom:button-card'
  136. entity: input_select.ground_floor_plan
  137. extra_styles: |
  138. @keyframes mymove {
  139. 30% {box-shadow: 0 0 20px white;}
  140. }
  141. icon: 'mdi:shield-home'
  142. name: Security
  143. state:
  144. - icon: 'mdi:shield-home'
  145. styles:
  146. card:
  147. - height: 80px
  148. icon:
  149. - width: 45%
  150. - opacity: 0.5
  151. - padding-top: 10px
  152. name:
  153. - padding: 10px
  154. - font-size: 10px
  155. - text-overflow: unset
  156. - white-space: unset
  157. - word-break: break-word
  158. value: Lights
  159. - icon: 'mdi:shield-home'
  160. styles:
  161. card:
  162. - height: 80px
  163. icon:
  164. - width: 45%
  165. - opacity: 0.5
  166. - padding-top: 10px
  167. name:
  168. - padding: 10px
  169. - font-size: 10px
  170. - text-overflow: unset
  171. - white-space: unset
  172. - word-break: break-word
  173. value: Temperature
  174. - icon: 'mdi:shield-home'
  175. styles:
  176. card:
  177. - height: 80px
  178. icon:
  179. - width: 45%
  180. - opacity: 0.5
  181. - padding-top: 10px
  182. name:
  183. - padding: 10px
  184. - font-size: 10px
  185. - text-overflow: unset
  186. - white-space: unset
  187. - word-break: break-word
  188. value: Media
  189. - color: white
  190. icon: 'mdi:shield-home'
  191. operator: default
  192. styles:
  193. card:
  194. - height: 80px
  195. - animation: mymove 10s infinite
  196. icon:
  197. - width: 45%
  198. - padding-top: 10px
  199. name:
  200. - padding: 10px
  201. - font-size: 10px
  202. - text-overflow: unset
  203. - white-space: unset
  204. - word-break: break-word
  205. value: Security
  206. tap_action:
  207. action: call-service
  208. service: input_select.select_option
  209. service_data:
  210. entity_id: input_select.ground_floor_plan
  211. option: Security
  212.  
  213. #########################################################################
  214. ###### ↓ Start of button selection - Temperature ↓
  215. #########################################################################
  216.  
  217. - type: 'custom:button-card'
  218. entity: input_select.ground_floor_plan
  219. extra_styles: |
  220. @keyframes mymove {
  221. 30% {box-shadow: 0 0 20px white;}
  222. }
  223. icon: 'mdi:home-thermometer'
  224. name: Temperature
  225. state:
  226. - icon: 'mdi:home-thermometer'
  227. styles:
  228. card:
  229. - height: 80px
  230. icon:
  231. - width: 45%
  232. - opacity: 0.5
  233. - padding-top: 10px
  234. name:
  235. - padding: 10px
  236. - font-size: 10px
  237. - text-overflow: unset
  238. - white-space: unset
  239. - word-break: break-word
  240. value: Lights
  241. - icon: 'mdi:home-thermometer'
  242. styles:
  243. card:
  244. - height: 80px
  245. icon:
  246. - width: 45%
  247. - opacity: 0.5
  248. - padding-top: 10px
  249. name:
  250. - padding: 10px
  251. - font-size: 10px
  252. - text-overflow: unset
  253. - white-space: unset
  254. - word-break: break-word
  255. value: Security
  256. - icon: 'mdi:home-thermometer'
  257. styles:
  258. card:
  259. - height: 80px
  260. icon:
  261. - width: 45%
  262. - opacity: 0.5
  263. - padding-top: 10px
  264. name:
  265. - padding: 10px
  266. - font-size: 10px
  267. - text-overflow: unset
  268. - white-space: unset
  269. - word-break: break-word
  270. value: Media
  271. - color: white
  272. icon: 'mdi:home-thermometer'
  273. operator: default
  274. styles:
  275. card:
  276. - height: 80px
  277. - animation: mymove 10s infinite
  278. icon:
  279. - width: 45%
  280. - padding-top: 10px
  281. name:
  282. - padding: 10px
  283. - font-size: 10px
  284. - text-overflow: unset
  285. - white-space: unset
  286. - word-break: break-word
  287. value: Temperature
  288. tap_action:
  289. action: call-service
  290. service: input_select.select_option
  291. service_data:
  292. entity_id: input_select.ground_floor_plan
  293. option: Temperature
  294.  
  295. #########################################################################
  296. ###### ↓ Start of button selection - Media ↓
  297. #########################################################################
  298.  
  299. - type: 'custom:button-card'
  300. entity: input_select.ground_floor_plan
  301. extra_styles: |
  302. @keyframes mymove {
  303. 30% {box-shadow: 0 0 20px white;}
  304. }
  305. icon: 'mdi:google-home'
  306. name: Media
  307. state:
  308. - icon: 'mdi:google-home'
  309. styles:
  310. card:
  311. - height: 80px
  312. icon:
  313. - width: 45%
  314. - opacity: 0.5
  315. - padding-top: 10px
  316. name:
  317. - padding: 10px
  318. - font-size: 10px
  319. - text-overflow: unset
  320. - white-space: unset
  321. - word-break: break-word
  322. value: Lights
  323. - icon: 'mdi:google-home'
  324. styles:
  325. card:
  326. - height: 80px
  327. icon:
  328. - width: 45%
  329. - opacity: 0.5
  330. - padding-top: 10px
  331. name:
  332. - padding: 10px
  333. - font-size: 10px
  334. - text-overflow: unset
  335. - white-space: unset
  336. - word-break: break-word
  337. value: Security
  338. - icon: 'mdi:google-home'
  339. styles:
  340. card:
  341. - height: 80px
  342. icon:
  343. - width: 45%
  344. - opacity: 0.5
  345. - padding-top: 10px
  346. name:
  347. - padding: 10px
  348. - font-size: 10px
  349. - text-overflow: unset
  350. - white-space: unset
  351. - word-break: break-word
  352. value: Temperature
  353. - color: white
  354. icon: 'mdi:google-home'
  355. operator: default
  356. styles:
  357. card:
  358. - height: 80px
  359. - animation: mymove 10s infinite
  360. icon:
  361. - width: 45%
  362. - padding-top: 10px
  363. name:
  364. - padding: 10px
  365. - font-size: 10px
  366. - text-overflow: unset
  367. - white-space: unset
  368. - word-break: break-word
  369. value: Media
  370. tap_action:
  371. action: call-service
  372. service: input_select.select_option
  373. service_data:
  374. entity_id: input_select.ground_floor_plan
  375. option: Media
  376.  
  377. #########################################################################
  378. ###### ↓ 'Gap' Card (Right of Horizontal row) ↓
  379. #########################################################################
  380.  
  381. - color_type: blank-card
  382. icon: 'mdi:led-strip-variant'
  383. name: Floor
  384. styles:
  385. card:
  386. - width: 25px
  387. type: 'custom:button-card'
  388. type: horizontal-stack
  389.  
  390. #########################################################################
  391. ###### ↓ 'Gap' Card (Between elements - Buttons and Floorplan) ↓
  392. #########################################################################
  393.  
  394. - color_type: blank-card
  395. styles:
  396. card:
  397. - height: 5px
  398. type: 'custom:button-card'
  399.  
  400. #########################################################################
  401. ###### ↓ 'Gap' Card (Left of Horizontal row) ↓
  402. #########################################################################
  403.  
  404. - type: horizontal-stack
  405. cards:
  406. - color_type: blank-card
  407. icon: 'mdi:led-strip-variant'
  408. name: Floor
  409. styles:
  410. card:
  411. - width: 25px
  412. type: 'custom:button-card'
  413.  
  414. #########################################################################
  415. ###### ↓ Start of Floor Plan Image and Picture Elements ↓
  416. #########################################################################
  417.  
  418. - type: 'custom:state-switch'
  419. entity: input_select.ground_floor_plan
  420. states:
  421. Lights:
  422. type: picture-elements
  423. image: local/floorg.png
  424. elements:
  425. - type: state-icon
  426. entity: switch.front_door_lamp
  427. icon: 'mdi:lamp'
  428. tap_action:
  429. action: toggle
  430. style:
  431. top: 6%
  432. left: 8%
  433. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  434. '--paper-item-icon-active-color': white
  435. border-radius: 100%
  436. background-color: '#0f1b29'
  437. border: 2px solid white
  438. transform: 'scale(1.1,1.1)'
  439. - type: state-icon
  440. entity: switch.front_door_lamp
  441. icon: 'mdi:wall-sconce-flat'
  442. tap_action:
  443. action: toggle
  444. style:
  445. top: 20%
  446. left: 15%
  447. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  448. '--paper-item-icon-active-color': white
  449. border-radius: 100%
  450. background-color: '#0f1b29'
  451. border: 2px solid white
  452. transform: 'scale(1.1,1.1)'
  453. - type: state-icon
  454. entity: switch.front_door_lamp
  455. icon: 'mdi:wall-sconce-flat'
  456. tap_action:
  457. action: toggle
  458. style:
  459. top: 12%
  460. left: 65%
  461. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  462. '--paper-item-icon-active-color': white
  463. border-radius: 100%
  464. background-color: '#0f1b29'
  465. border: 2px solid white
  466. transform: 'scale(1.1,1.1)'
  467. - type: state-icon
  468. entity: switch.front_door_lamp
  469. icon: 'mdi:wall-sconce-flat'
  470. tap_action:
  471. action: toggle
  472. style:
  473. top: 72%
  474. left: 63%
  475. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  476. '--paper-item-icon-active-color': white
  477. border-radius: 100%
  478. background-color: '#0f1b29'
  479. border: 2px solid white
  480. transform: 'scale(1.1,1.1)'
  481. - type: state-icon
  482. entity: switch.sonoff_10004008d2
  483. icon: 'mdi:floor-lamp'
  484. tap_action:
  485. action: toggle
  486. style:
  487. top: 29%
  488. left: 50%
  489. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  490. '--paper-item-icon-active-color': white
  491. border-radius: 100%
  492. background-color: '#0f1b29'
  493. border: 2px solid white
  494. transform: 'scale(1.1,1.1)'
  495. - type: state-icon
  496. entity: light.kitchen_corner_rgb
  497. icon: 'mdi:led-strip-variant'
  498. tap_action:
  499. action: call-service
  500. service: browser_mod.popup
  501. service_data:
  502. title: Light
  503. deviceID: this
  504. style:
  505. $: >
  506. .mdc-dialog {
  507. backdrop-filter: blur(10px);
  508. background: rgba(0,0,0,0.5);
  509. }
  510.  
  511. .mdc-dialog .mdc-dialog__container .mdc-dialog__surface
  512. {
  513. background: none;
  514. box-shadow: none;
  515. border-radius: 1em;
  516. }
  517.  
  518. ha-card {
  519. background-color: transparent;
  520. box-shadow: none;
  521. }
  522. card:
  523. type: entities
  524. entities:
  525. - type: 'custom:light-popup-card'
  526. entity: light.kitchen_corner_rgb
  527. icon: none
  528. style:
  529. $: >
  530. .mdc-dialog .mdc-dialog__container {
  531. width: 100%;
  532. }
  533.  
  534. .mdc-dialog .mdc-dialog__container
  535. .mdc-dialog__surface {
  536. width:100%;
  537. box-shadow:none;
  538. }
  539. .: |
  540. :host {
  541. --mdc-theme-surface: rgba(0,0,0,0);
  542. --secondary-background-color: rgba(0,0,0,0);
  543. --ha-card-background: rgba(0,0,0,0);
  544. --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
  545. --mdc-dialog-min-height: 100%;
  546. --mdc-dialog-min-width: 100%;
  547. --mdc-dialog-max-width: 100%;
  548. }
  549. mwc-icon-button {
  550. color: #FFF;
  551. }
  552. fullscreen: false
  553. brightnessWidth: 130px
  554. brightnessHeight: 360px
  555. borderRadius: 1.7em
  556. sliderColor: '#c7c7c7'
  557. sliderTrackColor: 'rgba(25, 25, 25, 0.9)'
  558. actionSize: 4.5em
  559. actionsInARow: 2
  560. actions:
  561. - service: light.turn_on
  562. service_data:
  563. entity_id: light.kitchen_corner_rgb
  564. rgb_color:
  565. - 255
  566. - 255
  567. - 255
  568. color: '#FFFFFF'
  569. - service: light.turn_on
  570. service_data:
  571. entity_id: light.kitchen_corner_rgb
  572. rgb_color:
  573. - 255
  574. - 0
  575. - 0
  576. color: '#FF0000'
  577. - service: light.turn_on
  578. service_data:
  579. entity_id: light.kitchen_corner_rgb
  580. rgb_color:
  581. - 0
  582. - 102
  583. - 204
  584. color: '#0066CC'
  585. - service: light.turn_on
  586. service_data:
  587. entity_id: light.kitchen_corner_rgb
  588. rgb_color:
  589. - 0
  590. - 255
  591. - 0
  592. color: '#00FF00'
  593. style:
  594. top: 39%
  595. left: 83%
  596. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  597. '--paper-item-icon-active-color': white
  598. border-radius: 100%
  599. background-color: '#0f1b29'
  600. border: 2px solid white
  601. transform: 'scale(1.1,1.1)'
  602. - type: state-icon
  603. entity: light.kitchen_sink_rgb
  604. icon: 'mdi:led-strip-variant'
  605. tap_action:
  606. action: call-service
  607. service: browser_mod.popup
  608. service_data:
  609. title: Light
  610. deviceID: this
  611. style:
  612. $: >
  613. .mdc-dialog {
  614. backdrop-filter: blur(10px);
  615. background: rgba(0,0,0,0.5);
  616. }
  617.  
  618. .mdc-dialog .mdc-dialog__container .mdc-dialog__surface
  619. {
  620. background: none;
  621. box-shadow: none;
  622. border-radius: 1em;
  623. }
  624.  
  625. ha-card {
  626. background-color: transparent;
  627. box-shadow: none;
  628. }
  629. card:
  630. type: entities
  631. entities:
  632. - type: 'custom:light-popup-card'
  633. entity: light.kitchen_sink_rgb
  634. icon: none
  635. style:
  636. $: >
  637. .mdc-dialog .mdc-dialog__container {
  638. width: 100%;
  639. }
  640.  
  641. .mdc-dialog .mdc-dialog__container
  642. .mdc-dialog__surface {
  643. width:100%;
  644. box-shadow:none;
  645. }
  646. .: |
  647. :host {
  648. --mdc-theme-surface: rgba(0,0,0,0);
  649. --secondary-background-color: rgba(0,0,0,0);
  650. --ha-card-background: rgba(0,0,0,0);
  651. --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
  652. --mdc-dialog-min-height: 100%;
  653. --mdc-dialog-min-width: 100%;
  654. --mdc-dialog-max-width: 100%;
  655. }
  656. mwc-icon-button {
  657. color: #FFF;
  658. }
  659. fullscreen: false
  660. brightnessWidth: 130px
  661. brightnessHeight: 360px
  662. borderRadius: 1.7em
  663. sliderColor: '#c7c7c7'
  664. sliderTrackColor: 'rgba(25, 25, 25, 0.9)'
  665. actionSize: 4.5em
  666. actionsInARow: 2
  667. actions:
  668. - service: light.turn_on
  669. service_data:
  670. entity_id: light.kitchen_sink_rgb
  671. rgb_color:
  672. - 255
  673. - 255
  674. - 255
  675. color: '#FFFFFF'
  676. - service: light.turn_on
  677. service_data:
  678. entity_id: light.kitchen_sink_rgb
  679. rgb_color:
  680. - 255
  681. - 0
  682. - 0
  683. color: '#FF0000'
  684. - service: light.turn_on
  685. service_data:
  686. entity_id: light.kitchen_sink_rgb
  687. rgb_color:
  688. - 0
  689. - 102
  690. - 204
  691. color: '#0066CC'
  692. - service: light.turn_on
  693. service_data:
  694. entity_id: light.kitchen_sink_rgb
  695. rgb_color:
  696. - 0
  697. - 255
  698. - 0
  699. color: '#00FF00'
  700. style:
  701. top: 60%
  702. left: 83%
  703. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  704. '--paper-item-icon-active-color': white
  705. border-radius: 100%
  706. background-color: '#0f1b29'
  707. border: 2px solid white
  708. transform: 'scale(1.1,1.1)'
  709. - type: state-icon
  710. entity: light.kitchen_corner_rgb
  711. icon: 'mdi:ceiling-light'
  712. style:
  713. top: 76%
  714. left: 26%
  715. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  716. '--paper-item-icon-active-color': white
  717. border-radius: 100%
  718. background-color: '#0f1b29'
  719. border: 2px solid white
  720. transform: 'scale(1.1,1.1)'
  721. Security:
  722. type: picture-elements
  723. image: local/floorg.png
  724. elements:
  725. - type: state-icon
  726. entity: binary_sensor.openclose_26
  727. icon: 'mdi:door-closed'
  728. tap_action:
  729. action: call-service
  730. service: browser_mod.popup
  731. service_data:
  732. title: sss
  733. hide_header: true
  734. deviceID: this
  735. style:
  736. $: >
  737. .mdc-dialog {
  738. backdrop-filter: blur(10px);
  739. background: rgba(0,0,0,0.5);
  740. }
  741.  
  742. .mdc-dialog .mdc-dialog__container .mdc-dialog__surface
  743. {
  744. background: none;
  745. box-shadow: none;
  746. border-radius: 1em;
  747. }
  748.  
  749. ha-card {
  750. background-color: transparent;
  751. box-shadow: none;
  752. text-color: red;
  753. }
  754. card:
  755. type: 'custom:vertical-stack-in-card'
  756. cards:
  757. - type: entity
  758. entity: binary_sensor.openclose_26
  759. name: false
  760. hide_name: true
  761. show_label: false
  762. show_name: false
  763. secondary_info: last-changed
  764. - type: history-graph
  765. entities:
  766. - entity: binary_sensor.openclose_26
  767. hours_to_show: 6
  768. refresh_interval: 0
  769. style:
  770. top: 0.5%
  771. left: 21%
  772. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  773. '--paper-item-icon-active-color': white
  774. border-radius: 100%
  775. background-color: '#0f1b29'
  776. border: 2px solid white
  777. transform: 'scale(1.1,1.1)'
  778. - type: state-icon
  779. entity: binary_sensor.openclose_30
  780. icon: 'mdi:door-closed'
  781. tap_action:
  782. action: call-service
  783. service: browser_mod.popup
  784. service_data:
  785. title: sss
  786. hide_header: true
  787. deviceID: this
  788. style:
  789. $: >
  790. .mdc-dialog {
  791. backdrop-filter: blur(10px);
  792. background: rgba(0,0,0,0.5);
  793. }
  794.  
  795. .mdc-dialog .mdc-dialog__container .mdc-dialog__surface
  796. {
  797. background: none;
  798. box-shadow: none;
  799. border-radius: 1em;
  800. }
  801.  
  802. ha-card {
  803. background-color: transparent;
  804. box-shadow: none;
  805. text-color: red;
  806. }
  807. card:
  808. type: 'custom:vertical-stack-in-card'
  809. cards:
  810. - type: entity
  811. entity: binary_sensor.openclose_30
  812. name: false
  813. hide_name: true
  814. show_label: false
  815. show_name: false
  816. secondary_info: last-changed
  817. - type: history-graph
  818. entities:
  819. - entity: binary_sensor.openclose_30
  820. hours_to_show: 6
  821. refresh_interval: 0
  822. style:
  823. top: 25%
  824. left: 35%
  825. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  826. '--paper-item-icon-active-color': white
  827. border-radius: 100%
  828. background-color: '#0f1b29'
  829. border: 2px solid white
  830. transform: 'scale(1.1,1.1)'
  831. - type: state-icon
  832. entity: binary_sensor.openclose_20
  833. icon: 'mdi:door-closed'
  834. tap_action:
  835. action: call-service
  836. service: browser_mod.popup
  837. service_data:
  838. title: sss
  839. hide_header: true
  840. deviceID: this
  841. style:
  842. $: >
  843. .mdc-dialog {
  844. backdrop-filter: blur(10px);
  845. background: rgba(0,0,0,0.5);
  846. }
  847.  
  848. .mdc-dialog .mdc-dialog__container .mdc-dialog__surface
  849. {
  850. background: none;
  851. box-shadow: none;
  852. border-radius: 1em;
  853. }
  854.  
  855. ha-card {
  856. background-color: transparent;
  857. box-shadow: none;
  858. text-color: red;
  859. }
  860. card:
  861. type: 'custom:vertical-stack-in-card'
  862. cards:
  863. - type: entity
  864. entity: binary_sensor.openclose_20
  865. name: false
  866. hide_name: true
  867. show_label: false
  868. show_name: false
  869. secondary_info: last-changed
  870. - type: history-graph
  871. entities:
  872. - entity: binary_sensor.openclose_20
  873. hours_to_show: 6
  874. refresh_interval: 0
  875. style:
  876. top: 46.5%
  877. left: 42%
  878. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  879. '--paper-item-icon-active-color': white
  880. border-radius: 100%
  881. background-color: '#0f1b29'
  882. border: 2px solid white
  883. transform: 'scale(1.1,1.1)'
  884. - type: state-icon
  885. entity: binary_sensor.openclose_19
  886. icon: 'mdi:door-closed'
  887. tap_action:
  888. action: call-service
  889. service: browser_mod.popup
  890. service_data:
  891. title: sss
  892. hide_header: true
  893. deviceID: this
  894. style:
  895. $: >
  896. .mdc-dialog {
  897. backdrop-filter: blur(10px);
  898. background: rgba(0,0,0,0.5);
  899. }
  900.  
  901. .mdc-dialog .mdc-dialog__container .mdc-dialog__surface
  902. {
  903. background: none;
  904. box-shadow: none;
  905. border-radius: 1em;
  906. }
  907.  
  908. ha-card {
  909. background-color: transparent;
  910. box-shadow: none;
  911. text-color: red;
  912. }
  913. card:
  914. type: 'custom:vertical-stack-in-card'
  915. cards:
  916. - type: entity
  917. entity: binary_sensor.openclose_19
  918. name: false
  919. hide_name: true
  920. show_label: false
  921. show_name: false
  922. secondary_info: last-changed
  923. - type: history-graph
  924. entities:
  925. - entity: binary_sensor.openclose_19
  926. hours_to_show: 6
  927. refresh_interval: 0
  928. style:
  929. color: red
  930. top: 89%
  931. left: 65%
  932. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  933. '--paper-item-icon-active-color': white
  934. border-radius: 100%
  935. background-color: '#0f1b29'
  936. border: 2px solid white
  937. transform: 'scale(1.1,1.1)'
  938. - type: state-icon
  939. entity: binary_sensor.hall_pir
  940. icon: 'mdi:motion-sensor'
  941. tap_action:
  942. action: call-service
  943. service: browser_mod.popup
  944. service_data:
  945. title: sss
  946. hide_header: true
  947. deviceID: this
  948. style:
  949. $: >
  950. .mdc-dialog {
  951. backdrop-filter: blur(10px);
  952. background: rgba(0,0,0,0.5);
  953. }
  954.  
  955. .mdc-dialog .mdc-dialog__container .mdc-dialog__surface
  956. {
  957. background: none;
  958. box-shadow: none;
  959. border-radius: 1em;
  960. }
  961.  
  962. ha-card {
  963. background-color: transparent;
  964. box-shadow: none;
  965. text-color: red;
  966. }
  967. card:
  968. type: 'custom:vertical-stack-in-card'
  969. cards:
  970. - type: entity
  971. entity: binary_sensor.ground_hallway_motion
  972. name: false
  973. hide_name: true
  974. show_label: false
  975. show_name: false
  976. secondary_info: last-changed
  977. - type: history-graph
  978. entities:
  979. - entity: binary_sensor.ground_hallway_motion
  980. hours_to_show: 6
  981. refresh_interval: 0
  982. style:
  983. top: 52%
  984. left: 31%
  985. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  986. '--paper-item-icon-active-color': white
  987. border-radius: 100%
  988. background-color: '#0f1b29'
  989. border: 2px solid white
  990. transform: 'scale(1.1,1.1)'
  991. - type: state-icon
  992. entity: binary_sensor.hall_pir
  993. tap_action:
  994. action: more-info
  995. icon: 'mdi:motion-sensor'
  996. style:
  997. top: 3%
  998. left: 85%
  999. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  1000. '--paper-item-icon-active-color': white
  1001. border-radius: 100%
  1002. background-color: '#0f1b29'
  1003. border: 2px solid white
  1004. transform: 'scale(1.1,1.1)'
  1005. - type: state-icon
  1006. entity: binary_sensor.kitchen_motion_sensor2
  1007. icon: 'mdi:motion-sensor'
  1008. tap_action:
  1009. action: call-service
  1010. service: browser_mod.popup
  1011. service_data:
  1012. title: sss
  1013. hide_header: true
  1014. deviceID: this
  1015. style:
  1016. $: >
  1017. .mdc-dialog {
  1018. backdrop-filter: blur(10px);
  1019. background: rgba(0,0,0,0.5);
  1020. }
  1021.  
  1022. .mdc-dialog .mdc-dialog__container .mdc-dialog__surface
  1023. {
  1024. background: none;
  1025. box-shadow: none;
  1026. border-radius: 1em;
  1027. }
  1028.  
  1029. ha-card {
  1030. background-color: transparent;
  1031. box-shadow: none;
  1032. text-color: red;
  1033. }
  1034. card:
  1035. type: 'custom:vertical-stack-in-card'
  1036. cards:
  1037. - type: entity
  1038. entity: binary_sensor.kitchen_motion_sensor2
  1039. name: false
  1040. hide_name: true
  1041. show_label: false
  1042. show_name: false
  1043. secondary_info: last-changed
  1044. - type: history-graph
  1045. entities:
  1046. - entity: binary_sensor.kitchen_motion_sensor2
  1047. hours_to_show: 6
  1048. refresh_interval: 0
  1049. style:
  1050. top: 89%
  1051. left: 50%
  1052. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  1053. '--paper-item-icon-active-color': white
  1054. border-radius: 100%
  1055. background-color: '#0f1b29'
  1056. border: 2px solid white
  1057. transform: 'scale(1.1,1.1)'
  1058. - type: state-icon
  1059. entity: camera.uvc_g3_back_2
  1060. icon: 'mdi:cctv'
  1061. tap_action:
  1062. action: call-service
  1063. service: browser_mod.popup
  1064. service_data:
  1065. title: sss
  1066. hide_header: true
  1067. deviceID: this
  1068. style:
  1069. $: >
  1070. .mdc-dialog {
  1071. backdrop-filter: blur(10px);
  1072. background: rgba(0,0,0,0.5);
  1073. }
  1074.  
  1075. .mdc-dialog .mdc-dialog__container .mdc-dialog__surface
  1076. {
  1077. background: none;
  1078. box-shadow: none;
  1079. border-radius: 1em;
  1080. }
  1081.  
  1082. ha-card {
  1083. background-color: transparent;
  1084. box-shadow: none;
  1085. text-color: red;
  1086. }
  1087. card:
  1088. type: picture-entity
  1089. entity: camera.uvc_g3_back_2
  1090. show_name: false
  1091. show_state: false
  1092. camera_view: live
  1093. style:
  1094. top: 37.5%
  1095. left: 66%
  1096. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  1097. '--paper-item-icon-active-color': white
  1098. border-radius: 100%
  1099. background-color: '#0f1b29'
  1100. border: 2px solid white
  1101. transform: 'scale(1.1,1.1)'
  1102. Temperature:
  1103. type: picture-elements
  1104. image: local/floorg.png
  1105. elements:
  1106. - type: state-icon
  1107. entity: sensor.temperature_27
  1108. icon: 'mdi:thermometer'
  1109. tap_action:
  1110. action: call-service
  1111. service: browser_mod.popup
  1112. service_data:
  1113. title: sss
  1114. hide_header: true
  1115. deviceID: this
  1116. style:
  1117. $: >
  1118. .mdc-dialog {
  1119. backdrop-filter: blur(10px);
  1120. background: rgba(0,0,0,0.5);
  1121. }
  1122.  
  1123. .mdc-dialog .mdc-dialog__container .mdc-dialog__surface
  1124. {
  1125. background: none;
  1126. box-shadow: none;
  1127. border-radius: 1em;
  1128. }
  1129.  
  1130. ha-card {
  1131. background-color: transparent;
  1132. box-shadow: none;
  1133. text-color: red;
  1134. }
  1135. card:
  1136. type: entities
  1137. entities:
  1138. - type: 'custom:mini-graph-card'
  1139. entities:
  1140. - entity: sensor.temperature_27
  1141. name: Hallway
  1142. icon: 'mdi:home-floor-g'
  1143. align_state: right
  1144. align_header: right
  1145. name: Ground Hallway Temperature
  1146. show:
  1147. name: true
  1148. icon: false
  1149. style:
  1150. top: 12%
  1151. left: 29%
  1152. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  1153. '--paper-item-icon-active-color': white
  1154. border-radius: 100%
  1155. background-color: '#0f1b29'
  1156. border: 2px solid white
  1157. transform: 'scale(1.1,1.1)'
  1158. - type: state-icon
  1159. entity: sensor.temperature_27
  1160. icon: 'mdi:thermometer'
  1161. tap_action:
  1162. action: more-info
  1163. style:
  1164. top: 30%
  1165. left: 63%
  1166. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  1167. '--paper-item-icon-active-color': white
  1168. border-radius: 100%
  1169. background-color: '#0f1b29'
  1170. border: 2px solid white
  1171. transform: 'scale(1.1,1.1)'
  1172. - type: state-icon
  1173. entity: sensor.temperature_27
  1174. icon: 'mdi:thermometer'
  1175. tap_action:
  1176. action: more-info
  1177. style:
  1178. top: 57%
  1179. left: 43%
  1180. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  1181. '--paper-item-icon-active-color': white
  1182. border-radius: 100%
  1183. background-color: '#0f1b29'
  1184. border: 2px solid white
  1185. transform: 'scale(1.1,1.1)'
  1186. - type: state-icon
  1187. entity: light.kitchen_sink_rgb
  1188. icon: 'mdi:water-alert'
  1189. style:
  1190. top: 72%
  1191. left: 83%
  1192. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  1193. '--paper-item-icon-active-color': white
  1194. border-radius: 100%
  1195. background-color: '#0f1b29'
  1196. border: 2px solid white
  1197. transform: 'scale(1.1,1.1)'
  1198. Media:
  1199. type: picture-elements
  1200. image: local/floorg.png
  1201. elements:
  1202. - type: state-icon
  1203. entity: media_player.snug_tv
  1204. icon: 'mdi:television'
  1205. tap_action:
  1206. action: more-info
  1207. style:
  1208. top: 10%
  1209. left: 85%
  1210. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  1211. '--paper-item-icon-active-color': white
  1212. border-radius: 100%
  1213. background-color: '#0f1b29'
  1214. border: 2px solid white
  1215. transform: 'scale(1.1,1.1)'
  1216. - type: state-icon
  1217. entity: media_player.googlehome4654
  1218. icon: 'mdi:google-home'
  1219. tap_action:
  1220. action: more-info
  1221. style:
  1222. top: 43%
  1223. left: 85%
  1224. '--paper-item-icon-color': 'rgba(255,255,255,0.5)'
  1225. '--paper-item-icon-active-color': white
  1226. border-radius: 100%
  1227. background-color: '#0f1b29'
  1228. border: 2px solid white
  1229. transform: 'scale(1.1,1.1)'
  1230.  
  1231. #########################################################################
  1232. ###### ↓ 'Gap' Card (Right of Horizontal row) ↓
  1233. #########################################################################
  1234.  
  1235. - color_type: blank-card
  1236. icon: 'mdi:led-strip-variant'
  1237. name: Floor
  1238. styles:
  1239. card:
  1240. - width: 25px
  1241. type: 'custom:button-card'
  1242.  
  1243. #########################################################################
  1244. ###### ↓ 'Gap' Card (Gap at the end of Floorplan) ↓
  1245. #########################################################################
  1246.  
  1247. - color_type: blank-card
  1248. styles:
  1249. card:
  1250. - height: 20px
  1251. type: 'custom:button-card'
  1252. type: vertical-stack
  1253.  
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!