API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 7th, 2020
112
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 182.80 KB | None | 0 0
raw download clone embed print report diff
  1. resources:
  2. - url: /hacsfiles/config-template-card/config-template-card.js
  3. type: module
  4. - url: /local/config-template-card.js
  5. type: module
  6. - url: /hacsfiles/light-entity-card/light-entity-card.js
  7. type: module
  8. - url: /local/custom-lovelace/light-slider-card.js
  9. type: js
  10. - url: /community_plugin/mini-media-player/mini-media-player-bundle.js
  11. type: module
  12. - url: /hacsfiles/decluttering-card/decluttering-card.js
  13. type: module
  14. - url: /hacsfiles/lovelace-xiaomi-vacuum-card/xiaomi-vacuum-card.js
  15. type: module
  16. - url: /hacsfiles/lovelace-auto-entities/auto-entities.js
  17. type: module
  18. - url: /hacsfiles/lovelace-card-mod/card-mod.js
  19. type: module
  20. - url: /hacsfiles/custom-header/custom-header.js
  21. type: module
  22. - url: /hacsfiles/harmony-card/harmony-card.js
  23. type: module
  24. - url: /hacsfiles/lovelace-layout-card/layout-card.js
  25. type: module
  26. - url: /hacsfiles/lovelace-light-with-profiles/light-with-profiles.js
  27. type: module
  28. - url: /hacsfiles/lovelace-hass-aarlo/hass-aarlo.js
  29. type: module
  30. - url: /hacsfiles/lovelace-xiaomi-vacuum-map-card/xiaomi-vacuum-map-card.js
  31. type: module
  32. - url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js
  33. type: module
  34. - url: /hacsfiles/mini-media-player/mini-media-player-bundle.js
  35. type: module
  36. - url: /hacsfiles/rgb-light-card/card.js
  37. type: module
  38. - url: /hacsfiles/stack-in-card/stack-in-card.js
  39. type: module
  40. - url: /hacsfiles/thermostat-card/thermostat-card.js
  41. type: module
  42. - url: /hacsfiles/plan-coordinates/plan-coordinates.js
  43. type: module
  44. - url: /browser_mod.js
  45. type: module
  46. - url: /hacsfiles/vertical-stack-in-card/vertical-stack-in-card.js
  47. type: module
  48. - url: /hacsfiles/text-element/text-element.js
  49. type: module
  50. - url: /hacsfiles/Homekit-panel-card/homekit-panel-card.js
  51. type: module
  52. - url: /hacsfiles/light-popup-card/light-popup-card.js
  53. type: module
  54. - url: /hacsfiles/thermostat-popup-card/thermostat-popup-card.js
  55. type: module
  56. - url: /hacsfiles/spotify-card/spotify-card.js
  57. type: module
  58. - url: /hacsfiles/upcoming-media-card/upcoming-media-card.js
  59. type: module
  60. - url: /hacsfiles/garbage-collection-card/garbage-collection-card.js
  61. type: module
  62.  
  63. decluttering_templates:
  64. floorplan_light_colour:
  65. element:
  66. entity: '[[entity]]'
  67. hold_action:
  68. action: call-service
  69. service: browser_mod.popup
  70. service_data:
  71. card:
  72. type: custom:vertical-stack-in-card
  73. cards:
  74. - type: entities
  75. entities:
  76. - entity: '[[entity]]'
  77. secondary_info: last-changed
  78. style:
  79. z-index: 5
  80. - type: custom:layout-card
  81. column_num: 2
  82. layout: horizontal
  83. max_width:
  84. - 60%
  85. - 40%
  86. cards:
  87. - type: custom:layout-card
  88. layout: vertical
  89. column_height: 1
  90. cards:
  91. - type: custom:light-entity-card
  92. brightness: false
  93. color_picker: false
  94. effects_list: false
  95. entity: '[[entity]]'
  96. full_width_sliders: true
  97. header: false
  98. persist_features: true
  99. show_slider_percent: false
  100. smooth_color_wheel: true
  101. # color_temp: true
  102. # white_value: false
  103. style: |
  104. ha-card {
  105. box-shadow: none !important;
  106. }
  107. - type: custom:light-entity-card
  108. brightness: false
  109. color_temp: false
  110. entity: '[[entity]]'
  111. full_width_sliders: true
  112. header: false
  113. persist_features: true
  114. show_slider_percent: false
  115. smooth_color_wheel: true
  116. # color_picker: true
  117. # effects_list: true
  118. # white_value: false
  119. style: |
  120. ha-card {
  121. box-shadow: none !important;
  122. }
  123. - type: entities
  124. show_header_toggle: false
  125. style: |
  126. :host{
  127. height: 100%;
  128. z-index: 0;
  129. }
  130. ha-card {
  131. box-shadow: none !important;
  132. }
  133. entities:
  134. - entity: '[[entity]]'
  135. color_temp: true
  136. header: false
  137. persist_features: true
  138. type: custom:light-slider-card
  139. deviceID:
  140. - this
  141. style:
  142. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  143. border-radius: 0.8vw
  144. opacity: 0.9
  145. title: '[[name]]'
  146. icon: 'mdi:lightbulb'
  147. style:
  148. '--iron-icon-height': 1.7vw
  149. '--iron-icon-width': 1.7vw
  150. '--paper-item-icon-active-color': '#000000'
  151. '--paper-item-icon-color': darkgrey
  152. align-items: center
  153. background-color: '#FFFFFF'
  154. border-radius: 100%
  155. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  156. display: flex
  157. height: 3vw
  158. justify-content: center
  159. left: '[[left]]'
  160. margin-left: '-1.5vw'
  161. margin-top: '-1.5vw'
  162. top: '[[top]]'
  163. transform: scale(.9)
  164. width: 3vw
  165. tap_action:
  166. action: toggle
  167. type: state-icon
  168.  
  169. custom_header:
  170. compact_mode: true
  171. background: var(--app-header-background-color)
  172. elements_color: var(--app-header-text-color)
  173. active_tab_color: var(--state-icon-active-color)
  174. tab_indicator_color: var(--state-icon-active-color)
  175. editor_warnings: false
  176. exceptions:
  177. - conditions:
  178. device_id: deviceidhere
  179. config:
  180. disable_sidebar: true
  181. kiosk_mode: true
  182. - conditions:
  183. device_id: deviceidhere #desktop Edge
  184. config:
  185. disable_sidebar: true
  186. kiosk_mode: true
  187. - conditions:
  188. device_id: deviceidhere
  189. config:
  190. disable_sidebar: true
  191. kiosk_mode: true
  192. - conditions: #fireOS
  193. device_id: deviceidhere
  194. config:
  195. disable_sidebar: true
  196. kiosk_mode: true
  197. - conditions:
  198. device_id: deviceidhere #Samsung TabS3
  199. config:
  200. disable_sidebar: true
  201. kiosk_mode: true
  202. - condition:
  203. user: roommate
  204. config:
  205. disable_sidebar: true
  206. hide_help: true
  207. hide_unused: true
  208. hide_config: true
  209.  
  210.  
  211.  
  212.  
  213.  
  214. title: Seanville
  215. views:
  216.  
  217. #############################################################################################################################################
  218. # #
  219. # FOR TESTING #
  220. # #
  221. #############################################################################################################################################
  222.  
  223. # - title: Test
  224. # badges: []
  225. # icon: 'mdi:home-outline'
  226. # panel: true
  227. # cards:
  228. # - type: "custom:homekit-card"
  229. # statePositionTop: true
  230. # horizontalScroll: true
  231. # style: |
  232. # :host {
  233. # --tile-background: rgba(255, 255, 255, 0.8);
  234. # --tile-border-radius: 12px;
  235. # --tile-width: 100px;
  236. # --tile-height: 100px;
  237. # --tile-on-background: rgba(255, 255, 255, 1);
  238. # --tile-width-mobile: 60px;
  239. # --tile-height-mobile: 100px;
  240. # --tile-icon-size: 30px;
  241. # }
  242. # entities:
  243. # - title: Natural Lighting
  244. # entities:
  245. # - entity: switch.circadian_lighting_office
  246. # - entity: switch.circadian_lighting_bedroom
  247. # - entity: switch.circadian_lighting_kitchen
  248. # - entity: switch.circadian_lighting_living
  249. # - entity: switch.circadian_lighting_back_hallway
  250. # - entity: switch.circadian_lighting_bathroom
  251. # - entity: switch.circadian_lighting_kitchendimmer
  252.  
  253. #############################################################################################################################################
  254. # #
  255. # Floorplan View #
  256. # #
  257. #############################################################################################################################################
  258.  
  259.  
  260.  
  261. - title: Lights
  262. icon: 'mdi:floor-plan'
  263. panel: true
  264. path: lights
  265. badges: []
  266. cards:
  267. - type: 'custom:config-template-card'
  268. entities:
  269. - light.back_hallway
  270. - light.back_hallway_1
  271. - light.back_hallway_2
  272. - light.bathroom
  273. - light.bedroom_ceiling_fan_1
  274. - light.bedroom_ceiling_fan_2
  275. - light.bedroom_ceiling_fan_3
  276. - light.bedroom_lamp
  277. - light.hue_ambiance_lamp_1
  278. - light_kitchen_ceiling_lamp_1
  279. - light.kitchen_ceiling_lamp_2
  280. - light.kitchen_extended_1
  281. - light.kitchen_extended_2
  282. - light.kitchen_table
  283. - light.kitchen_table_1
  284. - light.kitchen_table_2
  285. - light.kitchen_table_3
  286. - light.living_lamp_1
  287. - light.nanoleaf
  288. - light.strip_1
  289. - light.strip_2
  290. - light.office_ambiance_lamp_1
  291. - light.office_ambiance_lamp_2
  292. - light.office_color_lamp_1
  293. - light.guest
  294. card:
  295. type: picture-elements
  296. image: /local/ui/floorplan/night.png
  297. style: |
  298. ha-card:first-child {
  299. background: rgba(42, 46, 48, 1)
  300. }
  301. elements:
  302.  
  303. ######################### DAY BASE FLOORPLAN OVERLAY #########################
  304.  
  305. - action: none
  306. entity: sun.sun
  307. hold_action:
  308. action: none
  309. state_image:
  310. above_horizon: /local/ui/floorplan/day.png
  311. below_horizon: /local/ui/floorplan/transparent.png
  312. style:
  313. height: 100%
  314. left: 50%
  315. mix-blend-mode: lighten
  316. opacity: '${ states[''sensor.sunlight_opacity''].state }'
  317. top: 50%
  318. width: 100%
  319. tap_action:
  320. action: none
  321. type: image
  322.  
  323.  
  324. ######################### WEATHER ANIMATIONS #########################
  325.  
  326. - action: none
  327. entity: weather.openweathermap
  328. hold_action:
  329. action: none
  330. image: /local/ui/floorplan/weather/rainstorm.gif
  331. state_filter:
  332. 'pouring': opacity(100%)
  333. style:
  334. left: 60%
  335. mix-blend-mode: color-dodge
  336. top: 50%
  337. width: 110%
  338. opacity: 0
  339. tap_action:
  340. action: none
  341. type: image
  342.  
  343. - action: none
  344. entity: weather.openweathermap
  345. hold_action:
  346. action: none
  347. image: /local/ui/floorplan/weather/rain2.gif
  348. state_filter:
  349. 'rainy': opacity(100%)
  350. style:
  351. left: 60%
  352. mix-blend-mode: color-dodge
  353. top: 50%
  354. width: 110%
  355. opacity: 0
  356. tap_action:
  357. action: none
  358. type: image
  359.  
  360.  
  361.  
  362. ######################### INDIVIDUAL LIGHTS - BLENDED IMAGE OVERLAYS #########################
  363. - action: none
  364. entity: light.office_ambiance_lamp_1
  365. hold_action:
  366. action: none
  367. image: /local/ui/floorplan/office1.png
  368. style:
  369. left: 50%
  370. mix-blend-mode: lighten
  371. top: 50%
  372. width: 100%
  373. opacity: >-
  374. ${states['light.office_ambiance_lamp_1'].state === 'on' ?
  375. (states['light.office_ambiance_lamp_1'].attributes.brightness / 255) :
  376. '0'}
  377. tap_action:
  378. action: none
  379. type: image
  380. - action: none
  381. entity: light.office_ambiance_lamp_2
  382. hold_action:
  383. action: none
  384. image: /local/ui/floorplan/office2.png
  385. style:
  386. left: 50%
  387. mix-blend-mode: lighten
  388. top: 50%
  389. width: 100%
  390. opacity: >-
  391. ${states['light.office_ambiance_lamp_2'].state === 'on' ?
  392. (states['light.office_ambiance_lamp_2'].attributes.brightness / 255) :
  393. '0'}
  394. tap_action:
  395. action: none
  396. type: image
  397. - action: none
  398. entity: light.bedroom_lamp
  399. hold_action:
  400. action: none
  401. image: /local/ui/floorplan/bedlamp.png
  402. style:
  403. filter: >-
  404. ${ "hue-rotate(" +
  405. (states['light.bedroom_lamp'].attributes.hs_color ?
  406. states['light.bedroom_lamp'].attributes.hs_color[0] : 0) +
  407. "deg)"}
  408. left: 50%
  409. mix-blend-mode: lighten
  410. opacity: >-
  411. ${states['light.bedroom_lamp'].state === 'on' ?
  412. (states['light.bedroom_lamp'].attributes.brightness / 255) :
  413. '0'}
  414. top: 50%
  415. width: 100%
  416. tap_action:
  417. action: none
  418. type: image
  419. - action: none
  420. entity: light.bedroom_ceiling_fan_1
  421. hold_action:
  422. action: none
  423. image: /local/ui/floorplan/bedlamp1.png
  424. style:
  425. filter: >-
  426. ${ "hue-rotate(" +
  427. (states['light.bedroom_ceiling_fan_1'].attributes.hs_color ?
  428. states['light.bedroom_ceiling_fan_1'].attributes.hs_color[0] :
  429. 0) + "deg)"}
  430. left: 50%
  431. mix-blend-mode: lighten
  432. opacity: >-
  433. ${states['light.bedroom_ceiling_fan_1'].state === 'on' ?
  434. (states['light.bedroom_ceiling_fan_1'].attributes.brightness /
  435. 255) : '0'}
  436. top: 50%
  437. width: 100%
  438. tap_action:
  439. action: none
  440. type: image
  441. - action: none
  442. entity: light.bedroom_ceiling_fan_2
  443. hold_action:
  444. action: none
  445. image: /local/ui/floorplan/bedlamp2.png
  446. style:
  447. filter: >-
  448. ${ "hue-rotate(" +
  449. (states['light.bedroom_ceiling_fan_2'].attributes.hs_color ?
  450. states['light.bedroom_ceiling_fan_2'].attributes.hs_color[0] :
  451. 0) + "deg)"}
  452. left: 50%
  453. mix-blend-mode: lighten
  454. opacity: >-
  455. ${states['light.bedroom_ceiling_fan_2'].state === 'on' ?
  456. (states['light.bedroom_ceiling_fan_2'].attributes.brightness /
  457. 255) : '0'}
  458. top: 50%
  459. width: 100%
  460. tap_action:
  461. action: none
  462. type: image
  463. - action: none
  464. entity: light.bedroom_ceiling_fan_3
  465. hold_action:
  466. action: none
  467. image: /local/ui/floorplan/bedlamp3.png
  468. style:
  469. filter: >-
  470. ${ "hue-rotate(" +
  471. (states['light.bedroom_ceiling_fan_3'].attributes.hs_color ?
  472. states['light.bedroom_ceiling_fan_3'].attributes.hs_color[0] :
  473. 0) + "deg)"}
  474. left: 50%
  475. mix-blend-mode: lighten
  476. opacity: >-
  477. ${states['light.bedroom_ceiling_fan_3'].state === 'on' ?
  478. (states['light.bedroom_ceiling_fan_3'].attributes.brightness /
  479. 255) : '0'}
  480. top: 50%
  481. width: 100%
  482. tap_action:
  483. action: none
  484. type: image
  485. - action: none
  486. entity: light.office_color_lamp_1
  487. hold_action:
  488. action: none
  489. image: /local/ui/floorplan/office3.png
  490. style:
  491. filter: >-
  492. ${ "hue-rotate(" +
  493. (states['light.bedroom_ceiling_fan_3'].attributes.hs_color ?
  494. states['light.bedroom_ceiling_fan_3'].attributes.hs_color[0] :
  495. 0) + "deg)"}
  496. left: 50%
  497. mix-blend-mode: lighten
  498. opacity: >-
  499. ${states['light.bedroom_ceiling_fan_3'].state === 'on' ?
  500. (states['light.bedroom_ceiling_fan_3'].attributes.brightness /
  501. 255) : '0'}
  502. top: 50%
  503. width: 100%
  504. tap_action:
  505. action: none
  506. type: image
  507. - action: none
  508. entity: light.kitchen_ceiling_lamp_1
  509. hold_action:
  510. action: none
  511. image: /local/ui/floorplan/ceiling1.png
  512. style:
  513. filter: >-
  514. ${ "hue-rotate(" +
  515. (states['light.kitchen_ceiling_lamp_1'].attributes.hs_color
  516. ?
  517. states['light.kitchen_ceiling_lamp_1'].attributes.hs_color[0]
  518. : 0) + "deg)"}
  519. left: 50%
  520. mix-blend-mode: lighten
  521. opacity: >-
  522. ${states['light.kitchen_ceiling_lamp_1'].state === 'on' ?
  523. (states['light.kitchen_ceiling_lamp_1'].attributes.brightness
  524. / 255) : '0'}
  525. top: 50%
  526. width: 100%
  527. tap_action:
  528. action: none
  529. type: image
  530. - action: none
  531. entity: light.kitchen_ceiling_lamp_2
  532. hold_action:
  533. action: none
  534. image: /local/ui/floorplan/ceiling2.png
  535. style:
  536. filter: >-
  537. ${ "hue-rotate(" +
  538. (states['light.kitchen_ceiling_lamp_2'].attributes.hs_color
  539. ?
  540. states['light.kitchen_ceiling_lamp_2'].attributes.hs_color[0]
  541. : 0) + "deg)"}
  542. left: 50%
  543. mix-blend-mode: lighten
  544. opacity: >-
  545. ${states['light.kitchen_ceiling_lamp_2'].state === 'on' ?
  546. (states['light.kitchen_ceiling_lamp_2'].attributes.brightness
  547. / 255) : '0'}
  548. top: 50%
  549. width: 100%
  550. tap_action:
  551. action: none
  552. type: image
  553. - action: none
  554. entity: light.kitchen_extended_lamp_1
  555. hold_action:
  556. action: none
  557. image: /local/ui/floorplan/extended1.png
  558. style:
  559. filter: >-
  560. ${ "hue-rotate(" +
  561. (states['light.kitchen_extended_lamp_1'].attributes.hs_color
  562. ?
  563. states['light.kitchen_extended_lamp_1'].attributes.hs_color[0]
  564. : 0) + "deg)"}
  565. left: 50%
  566. mix-blend-mode: lighten
  567. opacity: >-
  568. ${states['light.kitchen_extended_lamp_1'].state === 'on' ?
  569. (states['light.kitchen_extended_lamp_1'].attributes.brightness
  570. / 255) : '0'}
  571. top: 50%
  572. width: 100%
  573. tap_action:
  574. action: none
  575. type: image
  576. - action: none
  577. entity: light.kitchen_extended_lamp_2
  578. hold_action:
  579. action: none
  580. image: /local/ui/floorplan/extended2.png
  581. style:
  582. filter: >-
  583. ${ "hue-rotate(" +
  584. (states['light.kitchen_extended_lamp_2'].attributes.hs_color
  585. ?
  586. states['light.kitchen_extended_lamp_2'].attributes.hs_color[0]
  587. : 0) + "deg)"}
  588. left: 50%
  589. mix-blend-mode: lighten
  590. opacity: >-
  591. ${states['light.kitchen_extended_lamp_2'].state === 'on' ?
  592. (states['light.kitchen_extended_lamp_2'].attributes.brightness
  593. / 255) : '0'}
  594. top: 50%
  595. width: 100%
  596. tap_action:
  597. action: none
  598. type: image
  599. - action: none
  600. entity: light.kitchen_table_1
  601. hold_action:
  602. action: none
  603. image: /local/ui/floorplan/kitchentable1.png
  604. style:
  605. filter: >-
  606. ${ "hue-rotate(" +
  607. (states['light.kitchen_table_1'].attributes.hs_color ?
  608. states['light.kitchen_table_1'].attributes.hs_color[0] : 0) +
  609. "deg)"}
  610. left: 50%
  611. mix-blend-mode: lighten
  612. opacity: >-
  613. ${states['light.kitchen_table_1'].state === 'on' ?
  614. (states['light.kitchen_table_1'].attributes.brightness / 255) :
  615. '0'}
  616. top: 50%
  617. width: 100%
  618. tap_action:
  619. action: none
  620. type: image
  621. - action: none
  622. entity: light.kitchen_table_2
  623. hold_action:
  624. action: none
  625. image: /local/ui/floorplan/kitchentable2.png
  626. style:
  627. filter: >-
  628. ${ "hue-rotate(" +
  629. (states['light.kitchen_table_2'].attributes.hs_color ?
  630. states['light.kitchen_table_2'].attributes.hs_color[0] : 0) +
  631. "deg)"}
  632. left: 50%
  633. mix-blend-mode: lighten
  634. opacity: >-
  635. ${states['light.kitchen_table_2'].state === 'on' ?
  636. (states['light.kitchen_table_2'].attributes.brightness / 255) :
  637. '0'}
  638. top: 50%
  639. width: 100%
  640. tap_action:
  641. action: none
  642. type: image
  643. - action: none
  644. entity: light.kitchen_table_3
  645. hold_action:
  646. action: none
  647. image: /local/ui/floorplan/kitchentable3.png
  648. style:
  649. filter: >-
  650. ${ "hue-rotate(" +
  651. (states['light.kitchen_table_3'].attributes.hs_color ?
  652. states['light.kitchen_table_3'].attributes.hs_color[0] : 0) +
  653. "deg)"}
  654. left: 50%
  655. mix-blend-mode: lighten
  656. opacity: >-
  657. ${states['light.kitchen_table_3'].state === 'on' ?
  658. (states['light.kitchen_table_3'].attributes.brightness / 255) :
  659. '0'}
  660. top: 50%
  661. width: 100%
  662. tap_action:
  663. action: none
  664. type: image
  665. - action: none
  666. entity: light.bathroom
  667. hold_action:
  668. action: none
  669. image: /local/ui/floorplan/bath.png
  670. style:
  671. filter: >-
  672. ${ "hue-rotate(" +
  673. (states['light.bathroom'].attributes.hs_color ?
  674. states['light.bathroom'].attributes.hs_color[0] : 0) + "deg)"}
  675. left: 50%
  676. mix-blend-mode: lighten
  677. opacity: >-
  678. ${states['light.bathroom'].state === 'on' ?
  679. (states['light.bathroom'].attributes.brightness / 255) : '0'}
  680. top: 50%
  681. width: 100%
  682. tap_action:
  683. action: none
  684. type: image
  685. - action: none
  686. entity: light.living_lamp_1
  687. icon:
  688. hold_action:
  689. action: none
  690. image: /local/ui/floorplan/livinglamp.png
  691. style:
  692. filter: >-
  693. ${ "hue-rotate(" +
  694. (states['light.living_lamp_1'].attributes.hs_color ?
  695. states['light.living_lamp_1'].attributes.hs_color[0] : 0) +
  696. "deg)"}
  697. left: 50%
  698. mix-blend-mode: lighten
  699. opacity: >-
  700. ${states['light.living_lamp_1'].state === 'on' ?
  701. (states['light.living_lamp_1'].attributes.brightness / 255) :
  702. '0'}
  703. top: 50%
  704. width: 100%
  705. tap_action:
  706. action: none
  707. type: image
  708. - action: none
  709. entity: light.strip_1
  710. hold_action:
  711. action: none
  712. image: /local/ui/floorplan/tvbacklight.png
  713. style:
  714. filter: >-
  715. ${ "hue-rotate(" +
  716. (states['light.strip_1'].attributes.hs_color ?
  717. states['light.strip_1'].attributes.hs_color[0] : 0) + "deg)"}
  718. left: 50%
  719. mix-blend-mode: lighten
  720. opacity: >-
  721. ${states['light.strip_1'].state === 'on' ?
  722. (states['light.strip_1'].attributes.brightness / 255) : '0'}
  723. top: 50%
  724. width: 100%
  725. tap_action:
  726. action: none
  727. type: image
  728. - action: none
  729. entity: light.strip_2
  730. hold_action:
  731. action: none
  732. image: /local/ui/floorplan/couch.png
  733. style:
  734. filter: >-
  735. ${ "hue-rotate(" +
  736. (states['light.strip_2'].attributes.hs_color ?
  737. states['light.strip_2'].attributes.hs_color[0] : 0) + "deg)"}
  738. left: 50%
  739. mix-blend-mode: lighten
  740. opacity: >-
  741. ${states['light.strip_2'].state === 'on' ?
  742. (states['light.strip_2'].attributes.brightness / 255) : '0'}
  743. top: 50%
  744. width: 100%
  745. tap_action:
  746. action: none
  747. type: image
  748. - action: none
  749. entity: light.back_hallway
  750. hold_action:
  751. action: none
  752. image: /local/ui/floorplan/hallway.png
  753. style:
  754. filter: >-
  755. ${ "hue-rotate(" +
  756. (states['light.back_hallway'].attributes.hs_color ?
  757. states['light.back_hallway'].attributes.hs_color[0] :
  758. 0) + "deg)"}
  759. left: 50%
  760. mix-blend-mode: lighten
  761. opacity: >-
  762. ${states['light.back_hallway'].state === 'on' ?
  763. (states['light.back_hallway'].attributes.brightness /
  764. 255) : '0'}
  765. top: 50%
  766. width: 100%
  767. tap_action:
  768. action: none
  769. type: image
  770. - action: none
  771. entity: light.nanoleaf
  772. hold_action:
  773. action: none
  774. image: /local/ui/floorplan/canvas.png
  775. style:
  776. filter: >-
  777. ${ "hue-rotate(" +
  778. (states['light.nanoleaf'].attributes.hs_color ?
  779. states['light.nanoleaf'].attributes.hs_color[0] :
  780. 0) + "deg)"}
  781. left: 50%
  782. mix-blend-mode: lighten
  783. opacity: >-
  784. ${states['light.nanoleaf'].state === 'on' ?
  785. (states['light.nanoleaf'].attributes.brightness /
  786. 255) : '0'}
  787. top: 50%
  788. width: 100%
  789. tap_action:
  790. action: none
  791. type: image
  792. - action: none
  793. entity: light.stove
  794. hold_action:
  795. action: none
  796. image: /local/ui/floorplan/stove.png
  797. style:
  798. filter: >-
  799. ${ "hue-rotate(" +
  800. (states['light.stove'].attributes.hs_color ?
  801. states['light.stove'].attributes.hs_color[0] :
  802. 0) + "deg)"}
  803. left: 50%
  804. mix-blend-mode: lighten
  805. opacity: >-
  806. ${states['light.stove'].state === 'on' ?
  807. (states['light.stove'].attributes.brightness /
  808. 255) : '0'}
  809. top: 50%
  810. width: 100%
  811. tap_action:
  812. action: none
  813. type: image
  814. - action: none
  815. entity: light.guest
  816. hold_action:
  817. action: none
  818. image: /local/ui/floorplan/guest.png
  819. style:
  820. filter: >-
  821. ${ "hue-rotate(" + (states['light.guest'].attributes.hs_color
  822. ? states['light.guest'].attributes.hs_color[0] : 0) + "deg)"}
  823. left: 50%
  824. mix-blend-mode: lighten
  825. opacity: "${states['light.guest'].state === 'on' ? (states['light.guest'].attributes.brightness / 255) : '0'}"
  826. top: 50%
  827. width: 100%
  828. tap_action:
  829. action: none
  830. type: image
  831.  
  832. ######################### INDIVIDUAL LIGHT ICONS #########################
  833.  
  834.  
  835. - type: custom:decluttering-card
  836. template: floorplan_light_colour
  837. variables:
  838. - entity: light.office_ambiance_lamp_1
  839. - left: 40%
  840. - top: 66%
  841. - type: state-icon
  842. - name: Office Light 1
  843. - type: custom:decluttering-card
  844. template: floorplan_light_colour
  845. variables:
  846. - entity: light.office_ambiance_lamp_2
  847. - left: 44%
  848. - top: 71%
  849. - type: state-icon
  850. - name: Office Light 2
  851. - type: custom:decluttering-card
  852. template: floorplan_light_colour
  853. variables:
  854. - entity: light.office_color_lamp_1
  855. - left: 39%
  856. - top: 75%
  857. - type: state-icon
  858. - name: Office Color Light
  859. - type: custom:decluttering-card
  860. template: floorplan_light_colour
  861. variables:
  862. - entity: light.bedroom_ceiling_fan_1
  863. - left: 81%
  864. - top: 28%
  865. - type: state-icon
  866. - name: Bedroom Ceiling 1
  867. - type: custom:decluttering-card
  868. template: floorplan_light_colour
  869. variables:
  870. - entity: light.bedroom_ceiling_fan_2
  871. - left: 84%
  872. - top: 36%
  873. - type: state-icon
  874. - name: Bedroom Ceiling 2
  875. - type: custom:decluttering-card
  876. template: floorplan_light_colour
  877. variables:
  878. - entity: light.bedroom_ceiling_fan_3
  879. - left: 79%
  880. - top: 37%
  881. - type: state-icon
  882. - name: Bedroom Ceiling 3
  883.  
  884.  
  885. - type: state-icon
  886. entity: light.bedroom_lamp
  887. tap_action:
  888. action: toggle
  889. hold_action:
  890. action: call-service
  891. service: browser_mod.popup
  892. service_data:
  893. card:
  894. type: custom:vertical-stack-in-card
  895. cards:
  896. - type: entities
  897. entities:
  898. - entity: light.bedroom_lamp
  899. secondary_info: last-changed
  900. style:
  901. z-index: 5
  902. - type: custom:layout-card
  903. column_num: 2
  904. layout: horizontal
  905. max_width:
  906. - 60%
  907. - 40%
  908. cards:
  909. - type: custom:layout-card
  910. layout: vertical
  911. column_height: 1
  912. cards:
  913. - type: custom:light-entity-card
  914. brightness: false
  915. color_picker: false
  916. effects_list: false
  917. entity: light.bedroom_lamp
  918. full_width_sliders: true
  919. header: false
  920. persist_features: true
  921. show_slider_percent: false
  922. smooth_color_wheel: true
  923. style: |
  924. ha-card {
  925. box-shadow: none !important;
  926. }
  927. - type: custom:light-entity-card
  928. brightness: false
  929. color_temp: false
  930. entity: light.bedroom_lamp
  931. full_width_sliders: true
  932. header: false
  933. persist_features: true
  934. show_slider_percent: false
  935. smooth_color_wheel: true
  936. style: |
  937. ha-card {
  938. box-shadow: none !important;
  939. }
  940. - type: entities
  941. show_header_toggle: false
  942. style: |
  943. :host{
  944. height: 100%;
  945. z-index: 0;
  946. }
  947. ha-card {
  948. box-shadow: none !important;
  949. }
  950. entities:
  951. - type: custom:light-slider-card
  952. entity: light.bedroom_lamp
  953. color_temp: true
  954. header: false
  955. persist_features: true
  956. deviceID:
  957. - this
  958. style:
  959. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  960. border-radius: 0.8vw
  961. opacity: 0.9
  962. title: Nightstand
  963. icon: 'mdi:floor-lamp'
  964. style:
  965. '--iron-icon-height': 1.7vw
  966. '--iron-icon-width': 1.7vw
  967. '--paper-item-icon-active-color': '#000000'
  968. '--paper-item-icon-color': darkgrey
  969. align-items: center
  970. background-color: '#FFFFFF'
  971. border-radius: 100%
  972. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  973. display: flex
  974. height: 3vw
  975. justify-content: center
  976. left: 88%
  977. margin-left: '-1.5vw'
  978. margin-top: '-1.5vw'
  979. top: 20%
  980. transform: scale(1.2)
  981. width: 3vw
  982.  
  983.  
  984.  
  985.  
  986. - type: state-icon
  987. entity: light.kitchen_ceiling_lamp_1
  988. tap_action:
  989. action: toggle
  990. hold_action:
  991. action: call-service
  992. service: browser_mod.popup
  993. service_data:
  994. card:
  995. type: custom:vertical-stack-in-card
  996. cards:
  997. - type: entities
  998. entities:
  999. - entity: light.kitchen_ceiling_lamp_1
  1000. secondary_info: last-changed
  1001. style:
  1002. z-index: 5
  1003. - type: custom:layout-card
  1004. column_num: 2
  1005. layout: horizontal
  1006. max_width:
  1007. - 60%
  1008. - 40%
  1009. cards:
  1010. - type: custom:layout-card
  1011. layout: vertical
  1012. column_height: 1
  1013. cards:
  1014. - type: custom:light-entity-card
  1015. brightness: false
  1016. color_picker: false
  1017. effects_list: false
  1018. entity: light.kitchen_ceiling_lamp_1
  1019. full_width_sliders: true
  1020. header: false
  1021. persist_features: true
  1022. show_slider_percent: false
  1023. smooth_color_wheel: true
  1024. style: |
  1025. ha-card {
  1026. box-shadow: none !important;
  1027. }
  1028. - type: custom:light-entity-card
  1029. brightness: false
  1030. color_temp: false
  1031. entity: light.kitchen_ceiling_lamp_1
  1032. full_width_sliders: true
  1033. header: false
  1034. persist_features: true
  1035. show_slider_percent: false
  1036. smooth_color_wheel: true
  1037. style: |
  1038. ha-card {
  1039. box-shadow: none !important;
  1040. }
  1041. - type: entities
  1042. show_header_toggle: false
  1043. style: |
  1044. :host{
  1045. height: 100%;
  1046. z-index: 0;
  1047. }
  1048. ha-card {
  1049. box-shadow: none !important;
  1050. }
  1051. entities:
  1052. - type: custom:light-slider-card
  1053. entity: light.kitchen_ceiling_lamp_1
  1054. color_temp: true
  1055. header: false
  1056. persist_features: true
  1057. deviceID:
  1058. - this
  1059. style:
  1060. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  1061. border-radius: 0.8vw
  1062. opacity: 0.9
  1063. title: Kitchen Ceiling 1
  1064. icon: 'mdi:dome-light'
  1065. style:
  1066. '--iron-icon-height': 1.7vw
  1067. '--iron-icon-width': 1.7vw
  1068. '--paper-item-icon-active-color': '#000000'
  1069. '--paper-item-icon-color': darkgrey
  1070. align-items: center
  1071. background-color: '#FFFFFF'
  1072. border-radius: 100%
  1073. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  1074. display: flex
  1075. height: 3vw
  1076. justify-content: center
  1077. left: 61%
  1078. margin-left: '-1.5vw'
  1079. margin-top: '-1.5vw'
  1080. top: 55%
  1081. transform: scale(1.2)
  1082. width: 3vw
  1083.  
  1084.  
  1085.  
  1086. - type: state-icon
  1087. entity: light.kitchen_ceiling_lamp_2
  1088. tap_action:
  1089. action: toggle
  1090. hold_action:
  1091. action: call-service
  1092. service: browser_mod.popup
  1093. service_data:
  1094. card:
  1095. type: custom:vertical-stack-in-card
  1096. cards:
  1097. - type: entities
  1098. entities:
  1099. - entity: light.kitchen_ceiling_lamp_2
  1100. secondary_info: last-changed
  1101. style:
  1102. z-index: 5
  1103. - type: custom:layout-card
  1104. column_num: 2
  1105. layout: horizontal
  1106. max_width:
  1107. - 60%
  1108. - 40%
  1109. cards:
  1110. - type: custom:layout-card
  1111. layout: vertical
  1112. column_height: 1
  1113. cards:
  1114. - type: custom:light-entity-card
  1115. brightness: false
  1116. color_picker: false
  1117. effects_list: false
  1118. entity: light.kitchen_ceiling_lamp_2
  1119. full_width_sliders: true
  1120. header: false
  1121. persist_features: true
  1122. show_slider_percent: false
  1123. smooth_color_wheel: true
  1124. style: |
  1125. ha-card {
  1126. box-shadow: none !important;
  1127. }
  1128. - type: custom:light-entity-card
  1129. brightness: false
  1130. color_temp: false
  1131. entity: light.kitchen_ceiling_lamp_2
  1132. full_width_sliders: true
  1133. header: false
  1134. persist_features: true
  1135. show_slider_percent: false
  1136. smooth_color_wheel: true
  1137. style: |
  1138. ha-card {
  1139. box-shadow: none !important;
  1140. }
  1141. - type: entities
  1142. show_header_toggle: false
  1143. style: |
  1144. :host{
  1145. height: 100%;
  1146. z-index: 0;
  1147. }
  1148. ha-card {
  1149. box-shadow: none !important;
  1150. }
  1151. entities:
  1152. - type: custom:light-slider-card
  1153. entity: light.kitchen_ceiling_lamp_2
  1154. color_temp: true
  1155. header: false
  1156. persist_features: true
  1157. deviceID:
  1158. - this
  1159. style:
  1160. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  1161. border-radius: 0.8vw
  1162. opacity: 0.9
  1163. title: Kitchen Ceiling 2
  1164. icon: 'mdi:dome-light'
  1165. style:
  1166. '--iron-icon-height': 1.7vw
  1167. '--iron-icon-width': 1.7vw
  1168. '--paper-item-icon-active-color': '#000000'
  1169. '--paper-item-icon-color': darkgrey
  1170. align-items: center
  1171. background-color: '#FFFFFF'
  1172. border-radius: 100%
  1173. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  1174. display: flex
  1175. height: 3vw
  1176. justify-content: center
  1177. left: 61%
  1178. margin-left: '-1.5vw'
  1179. margin-top: '-1.5vw'
  1180. top: 39%
  1181. transform: scale(1.2)
  1182. width: 3vw
  1183.  
  1184.  
  1185. - type: state-icon
  1186. entity: light.kitchen_extended_lamp_1
  1187. tap_action:
  1188. action: toggle
  1189. hold_action:
  1190. action: call-service
  1191. service: browser_mod.popup
  1192. service_data:
  1193. card:
  1194. type: custom:vertical-stack-in-card
  1195. cards:
  1196. - type: entities
  1197. entities:
  1198. - entity: light.kitchen_extended_lamp_1
  1199. secondary_info: last-changed
  1200. style:
  1201. z-index: 5
  1202. - type: custom:layout-card
  1203. column_num: 2
  1204. layout: horizontal
  1205. max_width:
  1206. - 60%
  1207. - 40%
  1208. cards:
  1209. - type: custom:layout-card
  1210. layout: vertical
  1211. column_height: 1
  1212. cards:
  1213. - type: custom:light-entity-card
  1214. brightness: false
  1215. color_picker: false
  1216. effects_list: false
  1217. entity: light.kitchen_extended_lamp_1
  1218. full_width_sliders: true
  1219. header: false
  1220. persist_features: true
  1221. show_slider_percent: false
  1222. smooth_color_wheel: true
  1223. style: |
  1224. ha-card {
  1225. box-shadow: none !important;
  1226. }
  1227. - type: custom:light-entity-card
  1228. brightness: false
  1229. color_temp: false
  1230. entity: light.kitchen_extended_lamp_1
  1231. full_width_sliders: true
  1232. header: false
  1233. persist_features: true
  1234. show_slider_percent: false
  1235. smooth_color_wheel: true
  1236. style: |
  1237. ha-card {
  1238. box-shadow: none !important;
  1239. }
  1240. - type: entities
  1241. show_header_toggle: false
  1242. style: |
  1243. :host{
  1244. height: 100%;
  1245. z-index: 0;
  1246. }
  1247. ha-card {
  1248. box-shadow: none !important;
  1249. }
  1250. entities:
  1251. - type: custom:light-slider-card
  1252. entity: light.kitchen_extended_lamp_1
  1253. color_temp: true
  1254. header: false
  1255. persist_features: true
  1256. deviceID:
  1257. - this
  1258. style:
  1259. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  1260. border-radius: 0.8vw
  1261. opacity: 0.9
  1262. title: Kitchen Sink 1
  1263. icon: 'mdi:dome-light'
  1264. style:
  1265. '--iron-icon-height': 1.7vw
  1266. '--iron-icon-width': 1.7vw
  1267. '--paper-item-icon-active-color': '#000000'
  1268. '--paper-item-icon-color': darkgrey
  1269. align-items: center
  1270. background-color: '#FFFFFF'
  1271. border-radius: 100%
  1272. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  1273. display: flex
  1274. height: 3vw
  1275. justify-content: center
  1276. left: 58%
  1277. margin-left: '-1.5vw'
  1278. margin-top: '-1.5vw'
  1279. top: 66%
  1280. transform: scale(1.2)
  1281. width: 3vw
  1282.  
  1283.  
  1284. - type: state-icon
  1285. entity: light.kitchen_extended_lamp_2
  1286. tap_action:
  1287. action: toggle
  1288. hold_action:
  1289. action: call-service
  1290. service: browser_mod.popup
  1291. service_data:
  1292. card:
  1293. type: custom:vertical-stack-in-card
  1294. cards:
  1295. - type: entities
  1296. entities:
  1297. - entity: light.kitchen_extended_lamp_2
  1298. secondary_info: last-changed
  1299. style:
  1300. z-index: 5
  1301. - type: custom:layout-card
  1302. column_num: 2
  1303. layout: horizontal
  1304. max_width:
  1305. - 60%
  1306. - 40%
  1307. cards:
  1308. - type: custom:layout-card
  1309. layout: vertical
  1310. column_height: 1
  1311. cards:
  1312. - type: custom:light-entity-card
  1313. brightness: false
  1314. color_picker: false
  1315. effects_list: false
  1316. entity: light.kitchen_extended_lamp_2
  1317. full_width_sliders: true
  1318. header: false
  1319. persist_features: true
  1320. show_slider_percent: false
  1321. smooth_color_wheel: true
  1322. style: |
  1323. ha-card {
  1324. box-shadow: none !important;
  1325. }
  1326. - type: custom:light-entity-card
  1327. brightness: false
  1328. color_temp: false
  1329. entity: light.kitchen_extended_lamp_2
  1330. full_width_sliders: true
  1331. header: false
  1332. persist_features: true
  1333. show_slider_percent: false
  1334. smooth_color_wheel: true
  1335. style: |
  1336. ha-card {
  1337. box-shadow: none !important;
  1338. }
  1339. - type: entities
  1340. show_header_toggle: false
  1341. style: |
  1342. :host{
  1343. height: 100%;
  1344. z-index: 0;
  1345. }
  1346. ha-card {
  1347. box-shadow: none !important;
  1348. }
  1349. entities:
  1350. - type: custom:light-slider-card
  1351. entity: light.kitchen_extended_lamp_2
  1352. color_temp: true
  1353. header: false
  1354. persist_features: true
  1355. deviceID:
  1356. - this
  1357. style:
  1358. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  1359. border-radius: 0.8vw
  1360. opacity: 0.9
  1361. title: Kitchen Sink 1
  1362. icon: 'mdi:dome-light'
  1363. style:
  1364. '--iron-icon-height': 1.7vw
  1365. '--iron-icon-width': 1.7vw
  1366. '--paper-item-icon-active-color': '#000000'
  1367. '--paper-item-icon-color': darkgrey
  1368. align-items: center
  1369. background-color: '#FFFFFF'
  1370. border-radius: 100%
  1371. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  1372. display: flex
  1373. height: 3vw
  1374. justify-content: center
  1375. left: 64%
  1376. margin-left: '-1.5vw'
  1377. margin-top: '-1.5vw'
  1378. top: 66%
  1379. transform: scale(1.2)
  1380. width: 3vw
  1381.  
  1382.  
  1383.  
  1384. - type: state-icon
  1385. entity: light.kitchen_table_1
  1386. tap_action:
  1387. action: toggle
  1388. hold_action:
  1389. action: call-service
  1390. service: browser_mod.popup
  1391. service_data:
  1392. card:
  1393. type: custom:vertical-stack-in-card
  1394. cards:
  1395. - type: entities
  1396. entities:
  1397. - entity: light.kitchen_table_1
  1398. secondary_info: last-changed
  1399. style:
  1400. z-index: 5
  1401. - type: custom:layout-card
  1402. column_num: 2
  1403. layout: horizontal
  1404. max_width:
  1405. - 60%
  1406. - 40%
  1407. cards:
  1408. - type: custom:layout-card
  1409. layout: vertical
  1410. column_height: 1
  1411. cards:
  1412. - type: custom:light-entity-card
  1413. brightness: false
  1414. color_picker: false
  1415. effects_list: false
  1416. entity: light.kitchen_table_1
  1417. full_width_sliders: true
  1418. header: false
  1419. persist_features: true
  1420. show_slider_percent: false
  1421. smooth_color_wheel: true
  1422. style: |
  1423. ha-card {
  1424. box-shadow: none !important;
  1425. }
  1426. - type: custom:light-entity-card
  1427. brightness: false
  1428. color_temp: false
  1429. entity: light.kitchen_table_1
  1430. full_width_sliders: true
  1431. header: false
  1432. persist_features: true
  1433. show_slider_percent: false
  1434. smooth_color_wheel: true
  1435. style: |
  1436. ha-card {
  1437. box-shadow: none !important;
  1438. }
  1439. - type: entities
  1440. show_header_toggle: false
  1441. style: |
  1442. :host{
  1443. height: 100%;
  1444. z-index: 0;
  1445. }
  1446. ha-card {
  1447. box-shadow: none !important;
  1448. }
  1449. entities:
  1450. - type: custom:light-slider-card
  1451. entity: light.kitchen_table_1
  1452. color_temp: true
  1453. header: false
  1454. persist_features: true
  1455. deviceID:
  1456. - this
  1457. style:
  1458. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  1459. border-radius: 0.8vw
  1460. opacity: 0.9
  1461. title: Kitchen Table 1
  1462. icon: 'mdi:ceiling-light'
  1463. style:
  1464. '--iron-icon-height': 1.7vw
  1465. '--iron-icon-width': 1.7vw
  1466. '--paper-item-icon-active-color': '#000000'
  1467. '--paper-item-icon-color': darkgrey
  1468. align-items: center
  1469. background-color: '#FFFFFF'
  1470. border-radius: 100%
  1471. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  1472. display: flex
  1473. height: 3vw
  1474. justify-content: center
  1475. left: 58%
  1476. margin-left: '-1.5vw'
  1477. margin-top: '-1.5vw'
  1478. top: 23%
  1479. transform: scale(1.2)
  1480. width: 3vw
  1481.  
  1482.  
  1483.  
  1484. - type: state-icon
  1485. entity: light.kitchen_table_2
  1486. tap_action:
  1487. action: toggle
  1488. hold_action:
  1489. action: call-service
  1490. service: browser_mod.popup
  1491. service_data:
  1492. card:
  1493. type: custom:vertical-stack-in-card
  1494. cards:
  1495. - type: entities
  1496. entities:
  1497. - entity: light.kitchen_table_2
  1498. secondary_info: last-changed
  1499. style:
  1500. z-index: 5
  1501. - type: custom:layout-card
  1502. column_num: 2
  1503. layout: horizontal
  1504. max_width:
  1505. - 60%
  1506. - 40%
  1507. cards:
  1508. - type: custom:layout-card
  1509. layout: vertical
  1510. column_height: 1
  1511. cards:
  1512. - type: custom:light-entity-card
  1513. brightness: false
  1514. color_picker: false
  1515. effects_list: false
  1516. entity: light.kitchen_table_2
  1517. full_width_sliders: true
  1518. header: false
  1519. persist_features: true
  1520. show_slider_percent: false
  1521. smooth_color_wheel: true
  1522. style: |
  1523. ha-card {
  1524. box-shadow: none !important;
  1525. }
  1526. - type: custom:light-entity-card
  1527. brightness: false
  1528. color_temp: false
  1529. entity: light.kitchen_table_2
  1530. full_width_sliders: true
  1531. header: false
  1532. persist_features: true
  1533. show_slider_percent: false
  1534. smooth_color_wheel: true
  1535. style: |
  1536. ha-card {
  1537. box-shadow: none !important;
  1538. }
  1539. - type: entities
  1540. show_header_toggle: false
  1541. style: |
  1542. :host{
  1543. height: 100%;
  1544. z-index: 0;
  1545. }
  1546. ha-card {
  1547. box-shadow: none !important;
  1548. }
  1549. entities:
  1550. - type: custom:light-slider-card
  1551. entity: light.kitchen_table_2
  1552. color_temp: true
  1553. header: false
  1554. persist_features: true
  1555. deviceID:
  1556. - this
  1557. style:
  1558. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  1559. border-radius: 0.8vw
  1560. opacity: 0.9
  1561. title: Kitchen Table 2
  1562. icon: 'mdi:ceiling-light'
  1563. style:
  1564. '--iron-icon-height': 1.7vw
  1565. '--iron-icon-width': 1.7vw
  1566. '--paper-item-icon-active-color': '#000000'
  1567. '--paper-item-icon-color': darkgrey
  1568. align-items: center
  1569. background-color: '#FFFFFF'
  1570. border-radius: 100%
  1571. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  1572. display: flex
  1573. height: 3vw
  1574. justify-content: center
  1575. left: 61%
  1576. margin-left: '-1.5vw'
  1577. margin-top: '-1.5vw'
  1578. top: 29%
  1579. transform: scale(1.2)
  1580. width: 3vw
  1581.  
  1582.  
  1583.  
  1584. - type: state-icon
  1585. entity: light.kitchen_table_3
  1586. tap_action:
  1587. action: toggle
  1588. hold_action:
  1589. action: call-service
  1590. service: browser_mod.popup
  1591. service_data:
  1592. card:
  1593. type: custom:vertical-stack-in-card
  1594. cards:
  1595. - type: entities
  1596. entities:
  1597. - entity: light.kitchen_table_3
  1598. secondary_info: last-changed
  1599. style:
  1600. z-index: 5
  1601. - type: custom:layout-card
  1602. column_num: 2
  1603. layout: horizontal
  1604. max_width:
  1605. - 60%
  1606. - 40%
  1607. cards:
  1608. - type: custom:layout-card
  1609. layout: vertical
  1610. column_height: 1
  1611. cards:
  1612. - type: custom:light-entity-card
  1613. brightness: false
  1614. color_picker: false
  1615. effects_list: false
  1616. entity: light.kitchen_table_3
  1617. full_width_sliders: true
  1618. header: false
  1619. persist_features: true
  1620. show_slider_percent: false
  1621. smooth_color_wheel: true
  1622. style: |
  1623. ha-card {
  1624. box-shadow: none !important;
  1625. }
  1626. - type: custom:light-entity-card
  1627. brightness: false
  1628. color_temp: false
  1629. entity: light.kitchen_table_3
  1630. full_width_sliders: true
  1631. header: false
  1632. persist_features: true
  1633. show_slider_percent: false
  1634. smooth_color_wheel: true
  1635. style: |
  1636. ha-card {
  1637. box-shadow: none !important;
  1638. }
  1639. - type: entities
  1640. show_header_toggle: false
  1641. style: |
  1642. :host{
  1643. height: 100%;
  1644. z-index: 0;
  1645. }
  1646. ha-card {
  1647. box-shadow: none !important;
  1648. }
  1649. entities:
  1650. - type: custom:light-slider-card
  1651. entity: light.kitchen_table_3
  1652. color_temp: true
  1653. header: false
  1654. persist_features: true
  1655. deviceID:
  1656. - this
  1657. style:
  1658. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  1659. border-radius: 0.8vw
  1660. opacity: 0.9
  1661. title: Kitchen Table 3
  1662. icon: 'mdi:ceiling-light'
  1663. style:
  1664. '--iron-icon-height': 1.7vw
  1665. '--iron-icon-width': 1.7vw
  1666. '--paper-item-icon-active-color': '#000000'
  1667. '--paper-item-icon-color': darkgrey
  1668. align-items: center
  1669. background-color: '#FFFFFF'
  1670. border-radius: 100%
  1671. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  1672. display: flex
  1673. height: 3vw
  1674. justify-content: center
  1675. left: 63%
  1676. margin-left: '-1.5vw'
  1677. margin-top: '-1.5vw'
  1678. top: 23%
  1679. transform: scale(1.2)
  1680. width: 3vw
  1681.  
  1682.  
  1683.  
  1684.  
  1685. - type: state-icon
  1686. entity: light.bathroom
  1687. tap_action:
  1688. action: toggle
  1689. hold_action:
  1690. action: call-service
  1691. service: browser_mod.popup
  1692. service_data:
  1693. card:
  1694. type: custom:vertical-stack-in-card
  1695. cards:
  1696. - type: entities
  1697. entities:
  1698. - entity: light.bathroom
  1699. secondary_info: last-changed
  1700. style:
  1701. z-index: 5
  1702. - type: custom:layout-card
  1703. column_num: 2
  1704. layout: horizontal
  1705. max_width:
  1706. - 60%
  1707. - 40%
  1708. cards:
  1709. - type: custom:layout-card
  1710. layout: vertical
  1711. column_height: 1
  1712. cards:
  1713. - type: custom:light-entity-card
  1714. brightness: false
  1715. color_picker: false
  1716. effects_list: false
  1717. entity: light.bathroom
  1718. full_width_sliders: true
  1719. header: false
  1720. persist_features: true
  1721. show_slider_percent: false
  1722. smooth_color_wheel: true
  1723. style: |
  1724. ha-card {
  1725. box-shadow: none !important;
  1726. }
  1727. - type: custom:light-entity-card
  1728. brightness: false
  1729. color_temp: false
  1730. entity: light.bathroom
  1731. full_width_sliders: true
  1732. header: false
  1733. persist_features: true
  1734. show_slider_percent: false
  1735. smooth_color_wheel: true
  1736. style: |
  1737. ha-card {
  1738. box-shadow: none !important;
  1739. }
  1740. - type: entities
  1741. show_header_toggle: false
  1742. style: |
  1743. :host{
  1744. height: 100%;
  1745. z-index: 0;
  1746. }
  1747. ha-card {
  1748. box-shadow: none !important;
  1749. }
  1750. entities:
  1751. - type: custom:light-slider-card
  1752. entity: light.bathroom
  1753. color_temp: true
  1754. header: false
  1755. persist_features: true
  1756. deviceID:
  1757. - this
  1758. style:
  1759. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  1760. border-radius: 0.8vw
  1761. opacity: 0.9
  1762. title: Bathroom Lights
  1763. icon: 'mdi:vanity-light'
  1764. style:
  1765. '--iron-icon-height': 1.7vw
  1766. '--iron-icon-width': 1.7vw
  1767. '--paper-item-icon-active-color': '#000000'
  1768. '--paper-item-icon-color': darkgrey
  1769. align-items: center
  1770. background-color: '#FFFFFF'
  1771. border-radius: 100%
  1772. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  1773. display: flex
  1774. height: 3vw
  1775. justify-content: center
  1776. left: 66%
  1777. margin-left: '-1.5vw'
  1778. margin-top: '-1.5vw'
  1779. top: 83%
  1780. transform: scale(1.2)
  1781. width: 3vw
  1782.  
  1783.  
  1784.  
  1785. - type: state-icon
  1786. entity: light.living_lamp_1
  1787. tap_action:
  1788. action: toggle
  1789. hold_action:
  1790. action: call-service
  1791. service: browser_mod.popup
  1792. service_data:
  1793. card:
  1794. type: custom:vertical-stack-in-card
  1795. cards:
  1796. - type: entities
  1797. entities:
  1798. - entity: light.living_lamp_1
  1799. secondary_info: last-changed
  1800. style:
  1801. z-index: 5
  1802. - type: custom:layout-card
  1803. column_num: 2
  1804. layout: horizontal
  1805. max_width:
  1806. - 60%
  1807. - 40%
  1808. cards:
  1809. - type: custom:layout-card
  1810. layout: vertical
  1811. column_height: 1
  1812. cards:
  1813. - type: custom:light-entity-card
  1814. brightness: false
  1815. color_picker: false
  1816. effects_list: false
  1817. entity: light.living_lamp_1
  1818. full_width_sliders: true
  1819. header: false
  1820. persist_features: true
  1821. show_slider_percent: false
  1822. smooth_color_wheel: true
  1823. style: |
  1824. ha-card {
  1825. box-shadow: none !important;
  1826. }
  1827. - type: custom:light-entity-card
  1828. brightness: false
  1829. color_temp: false
  1830. entity: light.living_lamp_1
  1831. full_width_sliders: true
  1832. header: false
  1833. persist_features: true
  1834. show_slider_percent: false
  1835. smooth_color_wheel: true
  1836. style: |
  1837. ha-card {
  1838. box-shadow: none !important;
  1839. }
  1840. - type: entities
  1841. show_header_toggle: false
  1842. style: |
  1843. :host{
  1844. height: 100%;
  1845. z-index: 0;
  1846. }
  1847. ha-card {
  1848. box-shadow: none !important;
  1849. }
  1850. entities:
  1851. - type: custom:light-slider-card
  1852. entity: light.living_lamp_1
  1853. color_temp: true
  1854. header: false
  1855. persist_features: true
  1856. deviceID:
  1857. - this
  1858. style:
  1859. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  1860. border-radius: 0.8vw
  1861. opacity: 0.9
  1862. title: Living Light
  1863. icon: 'mdi:dome-light'
  1864. style:
  1865. '--iron-icon-height': 1.7vw
  1866. '--iron-icon-width': 1.7vw
  1867. '--paper-item-icon-active-color': '#000000'
  1868. '--paper-item-icon-color': darkgrey
  1869. align-items: center
  1870. background-color: '#FFFFFF'
  1871. border-radius: 100%
  1872. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  1873. display: flex
  1874. height: 3vw
  1875. justify-content: center
  1876. left: 81%
  1877. margin-left: '-1.5vw'
  1878. margin-top: '-1.5vw'
  1879. top: 68%
  1880. transform: scale(1.2)
  1881. width: 3vw
  1882.  
  1883.  
  1884.  
  1885. - type: state-icon
  1886. entity: light.strip_1
  1887. tap_action:
  1888. action: toggle
  1889. hold_action:
  1890. action: call-service
  1891. service: browser_mod.popup
  1892. service_data:
  1893. card:
  1894. type: custom:vertical-stack-in-card
  1895. cards:
  1896. - type: entities
  1897. entities:
  1898. - entity: light.strip_1
  1899. secondary_info: last-changed
  1900. style:
  1901. z-index: 5
  1902. - type: custom:layout-card
  1903. column_num: 2
  1904. layout: horizontal
  1905. max_width:
  1906. - 60%
  1907. - 40%
  1908. cards:
  1909. - type: custom:layout-card
  1910. layout: vertical
  1911. column_height: 1
  1912. cards:
  1913. - type: custom:light-entity-card
  1914. brightness: false
  1915. color_picker: false
  1916. effects_list: false
  1917. entity: light.strip_1
  1918. full_width_sliders: true
  1919. header: false
  1920. persist_features: true
  1921. show_slider_percent: false
  1922. smooth_color_wheel: true
  1923. style: |
  1924. ha-card {
  1925. box-shadow: none !important;
  1926. }
  1927. - type: custom:light-entity-card
  1928. brightness: false
  1929. color_temp: false
  1930. entity: light.strip_1
  1931. full_width_sliders: true
  1932. header: false
  1933. persist_features: true
  1934. show_slider_percent: false
  1935. smooth_color_wheel: true
  1936. style: |
  1937. ha-card {
  1938. box-shadow: none !important;
  1939. }
  1940. - type: entities
  1941. show_header_toggle: false
  1942. style: |
  1943. :host{
  1944. height: 100%;
  1945. z-index: 0;
  1946. }
  1947. ha-card {
  1948. box-shadow: none !important;
  1949. }
  1950. entities:
  1951. - type: custom:light-slider-card
  1952. entity: light.strip_1
  1953. color_temp: true
  1954. header: false
  1955. persist_features: true
  1956. deviceID:
  1957. - this
  1958. style:
  1959. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  1960. border-radius: 0.8vw
  1961. opacity: 0.9
  1962. title: TV Backlight
  1963. icon: 'mdi:led-strip-variant'
  1964. style:
  1965. '--iron-icon-height': 1.7vw
  1966. '--iron-icon-width': 1.7vw
  1967. '--paper-item-icon-active-color': '#000000'
  1968. '--paper-item-icon-color': darkgrey
  1969. align-items: center
  1970. background-color: '#FFFFFF'
  1971. border-radius: 100%
  1972. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  1973. display: flex
  1974. height: 3vw
  1975. justify-content: center
  1976. left: 82%
  1977. margin-left: '-1.5vw'
  1978. margin-top: '-1.5vw'
  1979. top: 56%
  1980. transform: scale(1.2)
  1981. width: 3vw
  1982.  
  1983.  
  1984.  
  1985. - type: state-icon
  1986. entity: light.strip_2
  1987. tap_action:
  1988. action: toggle
  1989. hold_action:
  1990. action: call-service
  1991. service: browser_mod.popup
  1992. service_data:
  1993. card:
  1994. type: custom:vertical-stack-in-card
  1995. cards:
  1996. - type: entities
  1997. entities:
  1998. - entity: light.strip_2
  1999. secondary_info: last-changed
  2000. style:
  2001. z-index: 5
  2002. - type: custom:layout-card
  2003. column_num: 2
  2004. layout: horizontal
  2005. max_width:
  2006. - 60%
  2007. - 40%
  2008. cards:
  2009. - type: custom:layout-card
  2010. layout: vertical
  2011. column_height: 1
  2012. cards:
  2013. - type: custom:light-entity-card
  2014. brightness: false
  2015. color_picker: false
  2016. effects_list: false
  2017. entity: light.strip_2
  2018. full_width_sliders: true
  2019. header: false
  2020. persist_features: true
  2021. show_slider_percent: false
  2022. smooth_color_wheel: true
  2023. style: |
  2024. ha-card {
  2025. box-shadow: none !important;
  2026. }
  2027. - type: custom:light-entity-card
  2028. brightness: false
  2029. color_temp: false
  2030. entity: light.strip_2
  2031. full_width_sliders: true
  2032. header: false
  2033. persist_features: true
  2034. show_slider_percent: false
  2035. smooth_color_wheel: true
  2036. style: |
  2037. ha-card {
  2038. box-shadow: none !important;
  2039. }
  2040. - type: entities
  2041. show_header_toggle: false
  2042. style: |
  2043. :host{
  2044. height: 100%;
  2045. z-index: 0;
  2046. }
  2047. ha-card {
  2048. box-shadow: none !important;
  2049. }
  2050. entities:
  2051. - type: custom:light-slider-card
  2052. entity: light.strip_2
  2053. color_temp: true
  2054. header: false
  2055. persist_features: true
  2056. deviceID:
  2057. - this
  2058. style:
  2059. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  2060. border-radius: 0.8vw
  2061. opacity: 0.9
  2062. title: Couch Light
  2063. icon: 'mdi:led-strip-variant'
  2064. style:
  2065. '--iron-icon-height': 1.7vw
  2066. '--iron-icon-width': 1.7vw
  2067. '--paper-item-icon-active-color': '#000000'
  2068. '--paper-item-icon-color': darkgrey
  2069. align-items: center
  2070. background-color: '#FFFFFF'
  2071. border-radius: 100%
  2072. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  2073. display: flex
  2074. height: 3vw
  2075. justify-content: center
  2076. left: 79%
  2077. margin-left: '-1.5vw'
  2078. margin-top: '-1.5vw'
  2079. top: 84%
  2080. transform: scale(1.2)
  2081. width: 3vw
  2082.  
  2083.  
  2084.  
  2085. - type: state-icon
  2086. entity: light.nanoleaf
  2087. tap_action:
  2088. action: toggle
  2089. hold_action:
  2090. action: call-service
  2091. service: browser_mod.popup
  2092. service_data:
  2093. card:
  2094. type: custom:vertical-stack-in-card
  2095. cards:
  2096. - type: entities
  2097. entities:
  2098. - entity: light.nanoleaf
  2099. secondary_info: last-changed
  2100. style:
  2101. z-index: 5
  2102. - type: custom:layout-card
  2103. column_num: 2
  2104. layout: horizontal
  2105. max_width:
  2106. - 60%
  2107. - 40%
  2108. cards:
  2109. - type: custom:layout-card
  2110. layout: vertical
  2111. column_height: 1
  2112. cards:
  2113. - type: custom:light-entity-card
  2114. brightness: false
  2115. color_picker: false
  2116. effects_list: false
  2117. entity: light.nanoleaf
  2118. full_width_sliders: true
  2119. header: false
  2120. persist_features: true
  2121. show_slider_percent: false
  2122. smooth_color_wheel: true
  2123. style: |
  2124. ha-card {
  2125. box-shadow: none !important;
  2126. }
  2127. - type: custom:light-entity-card
  2128. brightness: false
  2129. color_temp: false
  2130. entity: light.nanoleaf
  2131. full_width_sliders: true
  2132. header: false
  2133. persist_features: true
  2134. show_slider_percent: false
  2135. smooth_color_wheel: true
  2136. style: |
  2137. ha-card {
  2138. box-shadow: none !important;
  2139. }
  2140. - type: entities
  2141. show_header_toggle: false
  2142. style: |
  2143. :host{
  2144. height: 100%;
  2145. z-index: 0;
  2146. }
  2147. ha-card {
  2148. box-shadow: none !important;
  2149. }
  2150. entities:
  2151. - type: custom:light-slider-card
  2152. entity: light.nanoleaf
  2153. color_temp: true
  2154. header: false
  2155. persist_features: true
  2156. deviceID:
  2157. - this
  2158. style:
  2159. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  2160. border-radius: 0.8vw
  2161. opacity: 0.9
  2162. title: Canvas
  2163. icon: 'mdi:solar-panel-large'
  2164. style:
  2165. '--iron-icon-height': 1.7vw
  2166. '--iron-icon-width': 1.7vw
  2167. '--paper-item-icon-active-color': '#000000'
  2168. '--paper-item-icon-color': darkgrey
  2169. align-items: center
  2170. background-color: '#FFFFFF'
  2171. border-radius: 100%
  2172. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  2173. display: flex
  2174. height: 3vw
  2175. justify-content: center
  2176. left: 72%
  2177. margin-left: '-1.5vw'
  2178. margin-top: '-1.5vw'
  2179. top: 79%
  2180. transform: scale(1.2)
  2181. width: 3vw
  2182.  
  2183. - type: custom:decluttering-card
  2184. template: floorplan_light_colour
  2185. variables:
  2186. - entity: light.stove
  2187. - left: 67%
  2188. - top: 49%
  2189. - type: state-icon
  2190. - name: Stove
  2191.  
  2192.  
  2193. - type: state-icon
  2194. entity: light.back_hallway
  2195. tap_action:
  2196. action: toggle
  2197. hold_action:
  2198. action: call-service
  2199. service: browser_mod.popup
  2200. service_data:
  2201. card:
  2202. type: custom:vertical-stack-in-card
  2203. cards:
  2204. - type: entities
  2205. entities:
  2206. - entity: light.back_hallway
  2207. secondary_info: last-changed
  2208. style:
  2209. z-index: 5
  2210. - type: custom:layout-card
  2211. column_num: 2
  2212. layout: horizontal
  2213. max_width:
  2214. - 60%
  2215. - 40%
  2216. cards:
  2217. - type: custom:layout-card
  2218. layout: vertical
  2219. column_height: 1
  2220. cards:
  2221. - type: custom:light-entity-card
  2222. brightness: false
  2223. color_picker: false
  2224. effects_list: false
  2225. entity: light.back_hallway
  2226. full_width_sliders: true
  2227. header: false
  2228. persist_features: true
  2229. show_slider_percent: false
  2230. smooth_color_wheel: true
  2231. style: |
  2232. ha-card {
  2233. box-shadow: none !important;
  2234. }
  2235. - type: custom:light-entity-card
  2236. brightness: false
  2237. color_temp: false
  2238. entity: light.back_hallway
  2239. full_width_sliders: true
  2240. header: false
  2241. persist_features: true
  2242. show_slider_percent: false
  2243. smooth_color_wheel: true
  2244. style: |
  2245. ha-card {
  2246. box-shadow: none !important;
  2247. }
  2248. - type: entities
  2249. show_header_toggle: false
  2250. style: |
  2251. :host{
  2252. height: 100%;
  2253. z-index: 0;
  2254. }
  2255. ha-card {
  2256. box-shadow: none !important;
  2257. }
  2258. entities:
  2259. - type: custom:light-slider-card
  2260. entity: light.back_hallway
  2261. color_temp: true
  2262. header: false
  2263. persist_features: true
  2264.  
  2265. deviceID:
  2266. - this
  2267. style:
  2268. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  2269. border-radius: 0.8vw
  2270. opacity: 0.9
  2271. title: Hallway Lights
  2272. icon: 'mdi:ceiling-light'
  2273. style:
  2274. '--iron-icon-height': 1.7vw
  2275. '--iron-icon-width': 1.7vw
  2276. '--paper-item-icon-active-color': '#000000'
  2277. '--paper-item-icon-color': darkgrey
  2278. align-items: center
  2279. background-color: '#FFFFFF'
  2280. border-radius: 100%
  2281. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  2282. display: flex
  2283. height: 3vw
  2284. justify-content: center
  2285. left: 43%
  2286. margin-left: '-1.5vw'
  2287. margin-top: '-1.5vw'
  2288. top: 50%
  2289. transform: scale(1.2)
  2290. width: 3vw
  2291.  
  2292.  
  2293. - type: state-icon
  2294. entity: light.guest
  2295. tap_action:
  2296. action: toggle
  2297. hold_action:
  2298. action: call-service
  2299. service: browser_mod.popup
  2300. service_data:
  2301. card:
  2302. type: custom:vertical-stack-in-card
  2303. cards:
  2304. - type: entities
  2305. entities:
  2306. - entity: light.guest
  2307. secondary_info: last-changed
  2308. style:
  2309. z-index: 5
  2310. - type: custom:layout-card
  2311. column_num: 2
  2312. layout: horizontal
  2313. max_width:
  2314. - 60%
  2315. - 40%
  2316. cards:
  2317. - type: custom:layout-card
  2318. layout: vertical
  2319. column_height: 1
  2320. cards:
  2321. - type: custom:light-entity-card
  2322. brightness: false
  2323. color_picker: false
  2324. effects_list: false
  2325. entity: light.guest
  2326. full_width_sliders: true
  2327. header: false
  2328. persist_features: true
  2329. show_slider_percent: false
  2330. color_temp: true
  2331. white_value: false
  2332. style: |
  2333. ha-card {
  2334. box-shadow: none !important;
  2335. }
  2336. - type: custom:light-entity-card
  2337. brightness: false
  2338. color_temp: false
  2339. entity: light.guest
  2340. full_width_sliders: true
  2341. header: false
  2342. persist_features: true
  2343. show_slider_percent: false
  2344. smooth_color_wheel: true
  2345. white_value: true
  2346. style: |
  2347. ha-card {
  2348. box-shadow: none !important;
  2349. }
  2350. - type: entities
  2351. show_header_toggle: false
  2352. style: |
  2353. :host{
  2354. height: 100%;
  2355. z-index: 0;
  2356. }
  2357. ha-card {
  2358. box-shadow: none !important;
  2359. }
  2360. entities:
  2361. - entity: '[[entity]]'
  2362. color_temp: true
  2363. header: false
  2364. persist_features: true
  2365. type: custom:light-slider-card
  2366. deviceID:
  2367. - this
  2368. style:
  2369. '--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
  2370. border-radius: 0.8vw
  2371. opacity: 0.9
  2372. title: Guestroom
  2373. icon: 'mdi:ceiling-light'
  2374. style:
  2375. '--iron-icon-height': 1.7vw
  2376. '--iron-icon-width': 1.7vw
  2377. '--paper-item-icon-active-color': '#000000'
  2378. '--paper-item-icon-color': darkgrey
  2379. align-items: center
  2380. background-color: '#FFFFFF'
  2381. border-radius: 100%
  2382. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  2383. display: flex
  2384. height: 3vw
  2385. justify-content: center
  2386. left: 45%
  2387. margin-left: '-1.5vw'
  2388. margin-top: '-1.5vw'
  2389. top: 30%
  2390. transform: scale(.9)
  2391. width: 3vw
  2392.  
  2393.  
  2394. ### SIDE BAR ####
  2395.  
  2396. - action: none
  2397. hold_action:
  2398. action: none
  2399. image: /local/ui/sidebar/sidebarBG2.png
  2400. style:
  2401. height: 100%
  2402. left: 11.73828125%
  2403. top: 50%
  2404. width: 23.4765625%
  2405. tap_action:
  2406. action: none
  2407. type: image
  2408.  
  2409. ## Time and Date ##
  2410.  
  2411. - entity: sensor.normaltime
  2412. hold_action:
  2413. action: none
  2414. style:
  2415. color: 'rgba(255, 255, 255, 0.9)'
  2416. font-size: 5vw
  2417. font-weight: 200
  2418. left: 2%
  2419. letter-spacing: '-0.05vw'
  2420. max-width: 1px
  2421. top: 10%
  2422. tap_action:
  2423. action: none
  2424. type: state-label
  2425. - entity: sensor.date_string
  2426. hold_action:
  2427. action: none
  2428. style:
  2429. color: 'rgba(255, 255, 255, 0.6)'
  2430. font-size: 1.3vw
  2431. font-weight: 300
  2432. left: 18.1%
  2433. letter-spacing: '-0.05vw'
  2434. text-align: left
  2435. top: 17%
  2436. width: 30%
  2437. tap_action:
  2438. action: none
  2439. type: state-label
  2440.  
  2441.  
  2442.  
  2443. ## Menu Buttons ##
  2444.  
  2445.  
  2446.  
  2447. - action: none
  2448. image: /local/ui/sidebar/lights_on.png
  2449. style:
  2450. left: 11.7%
  2451. top: 26%
  2452. width: 20.5078125%
  2453. tap_action:
  2454. action: navigate
  2455. navigation_path: /lovelace/lights
  2456. type: image
  2457. - action: none
  2458. image: /local/ui/sidebar/cameras_off.png
  2459. style:
  2460. left: 11.7%
  2461. top: 34%
  2462. width: 20.5078125%
  2463. tap_action:
  2464. action: navigate
  2465. navigation_path: /lovelace/2
  2466. type: image
  2467. - action: none
  2468. image: /local/ui/sidebar/climate_off.png
  2469. style:
  2470. left: 11.7%
  2471. top: 42%
  2472. width: 20.5078125%
  2473. tap_action:
  2474. action: navigate
  2475. navigation_path: /lovelace/3
  2476. type: image
  2477. - action: none
  2478. image: /local/ui/sidebar/cleanUp_off.png
  2479. style:
  2480. left: 11.7%
  2481. top: 50%
  2482. width: 20.5078125%
  2483. tap_action:
  2484. action: navigate
  2485. navigation_path: /lovelace/4
  2486. type: image
  2487. - type: image
  2488. action: none
  2489. image: /local/ui/sidebar/1down.gif
  2490. style:
  2491. left: 11.7%
  2492. top: 60%
  2493. width: 10%
  2494. tap_action:
  2495. action: navigate
  2496. navigation_path: /lovelace/5
  2497.  
  2498.  
  2499.  
  2500.  
  2501. #### People Home ####
  2502.  
  2503. - style:
  2504. color: white
  2505. font-size: 1vw
  2506. font-weight: 300
  2507. left: 8.8%
  2508. opacity: 0
  2509. top: 66%
  2510. width: 10%
  2511. text: 'People at home:'
  2512. type: 'custom:text-element'
  2513.  
  2514. - action: none
  2515. entity: person.sean
  2516. state_image:
  2517. home: /local/people/seann.png
  2518. not_home: /local/people/seannGone.png
  2519. style:
  2520. background-color: 'rgba(255, 255, 255, 0.0)'
  2521. border-radius: 10vw
  2522. height: 7vw
  2523. left: 5.8%
  2524. top: 72%
  2525. width: 7vw
  2526. tap_action: none
  2527. type: image
  2528.  
  2529. - action: none
  2530. entity: person.roommate
  2531. state_image:
  2532. home: /local/people/roommate.png
  2533. not_home: /local/people/roommateGone.png
  2534. style:
  2535. background-color: 'rgba(255, 255, 255, 0.0)'
  2536. border-radius: 10vw
  2537. height: 7vw
  2538. left: 16%
  2539. top: 72%
  2540. width: 7vw
  2541. tap_action: none
  2542. type: image
  2543.  
  2544. - action: none
  2545. entity: person.percy
  2546. state_image:
  2547. home: /local/people/percyy.png
  2548. not_home: /local/people/percyyGone.png
  2549. style:
  2550. background-color: 'rgba(255, 255, 255, 0.0)'
  2551. border-radius: 10vw
  2552. height: 7vw
  2553. left: 5.8%
  2554. top: 90%
  2555. width: 7vw
  2556. tap_action: none
  2557. type: image
  2558.  
  2559.  
  2560.  
  2561.  
  2562.  
  2563. #############################################################################################################################################
  2564. # #
  2565. # Cameras View #
  2566. # #
  2567. #############################################################################################################################################
  2568.  
  2569.  
  2570.  
  2571. - title: Cameras
  2572. icon: 'mdi:security'
  2573. panel: true
  2574. cards:
  2575. - type: picture-elements
  2576. image: /local/ui/floorplan/night.png
  2577. style: |
  2578. ha-card {
  2579. background: rgba(42, 46, 48, 1)
  2580. }
  2581. elements:
  2582.  
  2583.  
  2584.  
  2585. ######################### DAY BASE FLOORPLAN OVERLAY #########################
  2586. - action: none
  2587. entity: sun.sun
  2588. hold_action:
  2589. action: none
  2590. state_image:
  2591. above_horizon: /local/ui/floorplan/day.png
  2592. below_horizon: /local/transparent.png
  2593. style:
  2594. height: 100%
  2595. left: 50%
  2596. mix-blend-mode: lighten
  2597. opacity: '${ states[''sensor.sunlight_opacity''].state }'
  2598. top: 50%
  2599. width: 100%
  2600. tap_action:
  2601. action: none
  2602. type: image
  2603.  
  2604.  
  2605. ######################### WEATHER ANIMATIONS #########################
  2606.  
  2607. - action: none
  2608. entity: weather.openweathermap
  2609. hold_action:
  2610. action: none
  2611. image: /local/ui/floorplan/weather/rainstorm.gif
  2612. state_filter:
  2613. 'pouring': opacity(100%)
  2614. style:
  2615. left: 60%
  2616. mix-blend-mode: color-dodge
  2617. top: 50%
  2618. width: 110%
  2619. opacity: 0
  2620. tap_action:
  2621. action: none
  2622. type: image
  2623. - action: none
  2624. entity: weather.openweathermap
  2625. hold_action:
  2626. action: none
  2627. image: /local/ui/floorplan/weather/rain2.gif
  2628. state_filter:
  2629. 'rainy': opacity(100%)
  2630. style:
  2631. left: 60%
  2632. mix-blend-mode: color-dodge
  2633. top: 50%
  2634. width: 110%
  2635. opacity: 0
  2636. tap_action:
  2637. action: none
  2638. type: image
  2639.  
  2640.  
  2641.  
  2642.  
  2643.  
  2644.  
  2645.  
  2646. - type: state-icon
  2647. entity: binary_sensor.wyzeoffice
  2648. tap_action: none
  2649. style:
  2650. top: 65%
  2651. left: 42%
  2652. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2653. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2654. transform: scale(2,2)
  2655. - type: state-icon
  2656. entity: binary_sensor.wyzeguest
  2657. tap_action: none
  2658. style:
  2659. top: 30%
  2660. left: 40%
  2661. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2662. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2663. transform: scale(2,2)
  2664. - type: state-icon
  2665. entity: binary_sensor.wyzehallway
  2666. tap_action: none
  2667. style:
  2668. top: 47%
  2669. left: 40%
  2670. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2671. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2672. transform: scale(2,2)
  2673. - type: state-icon
  2674. entity: binary_sensor.back_door_sensor
  2675. tap_action: none
  2676. style:
  2677. top: 47%
  2678. left: 31%
  2679. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2680. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2681. transform: scale(2,2)
  2682. - type: state-icon
  2683. entity: binary_sensor.wyzekitchen
  2684. tap_action: none
  2685. style:
  2686. top: 38%
  2687. left: 58%
  2688. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2689. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2690. transform: scale(2,2)
  2691.  
  2692. - type: state-icon
  2693. entity: binary_sensor.wyzekitchen2
  2694. tap_action: none
  2695. style:
  2696. top: 38%
  2697. left: 58%
  2698. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2699. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2700. transform: scale(2,2)
  2701. - type: state-icon
  2702. entity: binary_sensor.wyzeliving
  2703. tap_action: none
  2704. style:
  2705. top: 63%
  2706. left: 77%
  2707. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2708. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2709. transform: scale(2,2)
  2710. - type: state-icon
  2711. entity: binary_sensor.wyzeliving2
  2712. tap_action: none
  2713. style:
  2714. top: 63%
  2715. left: 77%
  2716. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2717. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2718. transform: scale(2,2)
  2719. - type: state-icon
  2720. entity: binary_sensor.wyzebedroom
  2721. tap_action: none
  2722. style:
  2723. top: 29%
  2724. left: 79%
  2725. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2726. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2727. transform: scale(2,2)
  2728. - type: state-icon
  2729. entity: binary_sensor.wyzebedroom2
  2730. tap_action: none
  2731. style:
  2732. top: 29%
  2733. left: 79%
  2734. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2735. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2736. transform: scale(2,2)
  2737. - type: state-icon
  2738. entity: binary_sensor.hue_bathroom_motion
  2739. tap_action: none
  2740. style:
  2741. top: 77%
  2742. left: 59%
  2743. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2744. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2745. transform: scale(2,2)
  2746. - type: state-icon
  2747. entity: binary_sensor.aarlo_motion_backyard
  2748. tap_action: none
  2749. style:
  2750. top: 50%
  2751. left: 24%
  2752. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2753. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2754. transform: scale(2,2)
  2755.  
  2756. - type: state-icon
  2757. entity: binary_sensor.blueiris_backyard2_motion
  2758. tap_action: none
  2759. style:
  2760. top: 17%
  2761. left: 24%
  2762. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2763. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2764. transform: scale(2,2)
  2765. - type: state-icon
  2766. entity: binary_sensor.blueiris_backyard_motion
  2767. tap_action: none
  2768. style:
  2769. top: 80%
  2770. left: 24%
  2771. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2772. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2773. transform: scale(2,2)
  2774. - type: state-icon
  2775. entity: binary_sensor.blueiris_frontdoor_motion
  2776. tap_action: none
  2777. style:
  2778. top: 57%
  2779. left: 96%
  2780. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2781. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2782. transform: scale(2,2)
  2783. - type: state-icon
  2784. entity: binary_sensor.front_door_sensor
  2785. tap_action: none
  2786. style:
  2787. top: 60%
  2788. left: 85%
  2789. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2790. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2791. transform: scale(2,2)
  2792. - type: state-icon
  2793. entity: binary_sensor.blueiris_sideyard_motion
  2794. tap_action: none
  2795. style:
  2796. top: 5%
  2797. left: 40%
  2798. '--paper-item-icon-color': 'rgba(0, 0, 0, 0)'
  2799. '--paper-item-icon-active-color': 'rgba(255, 0, 0, 1)'
  2800. transform: scale(2,2)
  2801. - entity: camera.blueiris_frontdoor
  2802. icon: 'mdi:cctv'
  2803. style:
  2804. '--iron-icon-stroke-color': '#969696'
  2805. '--paper-item-icon-active-color': '#ff0000'
  2806. background-color: 'rgba(255, 255, 255, 0.3)'
  2807. border-radius: 50%
  2808. left: 93%
  2809. text-align: center
  2810. top: 50%
  2811. transform: scale(2, 2)
  2812. title: front camera
  2813. type: icon
  2814. - entity: camera.front_door
  2815. icon: 'mdi:doorbell-video'
  2816. style:
  2817. '--iron-icon-stroke-color': '#969696'
  2818. '--paper-item-icon-active-color': '#ff0000'
  2819. background-color: 'rgba(255, 255, 255, 0.3)'
  2820. border-radius: 50%
  2821. left: 92.5%
  2822. text-align: center
  2823. top: 63%
  2824. transform: scale(2, 2)
  2825. title: doorbell camera
  2826. type: icon
  2827. tap_action:
  2828. action: call-service
  2829. service: browser_mod.more_info
  2830. service_data:
  2831. entity_id: camera.front_door
  2832. deviceID:
  2833. - this
  2834. style:
  2835. width: 50%
  2836. hide_header: true
  2837. - entity: camera.blueiris_kitchen
  2838. icon: 'mdi:cctv'
  2839. style:
  2840. '--iron-icon-stroke-color': '#969696'
  2841. '--paper-item-icon-active-color': '#ff0000'
  2842. background-color: 'rgba(255, 255, 255, 0.3)'
  2843. border-radius: 50%
  2844. left: 54%
  2845. text-align: center
  2846. top: 15%
  2847. transform: scale(2, 2)
  2848. title: kitchen camera
  2849. type: icon
  2850. - entity: camera.aarlo_back_hallway
  2851. icon: 'mdi:cctv'
  2852. style:
  2853. '--iron-icon-stroke-color': '#969696'
  2854. '--paper-item-icon-active-color': '#ff0000'
  2855. background-color: 'rgba(255, 255, 255, 0.3)'
  2856. border-radius: 50%
  2857. left: 51%
  2858. text-align: center
  2859. top: 45%
  2860. transform: scale(2, 2)
  2861. title: back hallway camera
  2862. type: icon
  2863. - entity: camera.aarlo_office
  2864. icon: 'mdi:cctv'
  2865. style:
  2866. '--iron-icon-stroke-color': '#969696'
  2867. '--paper-item-icon-active-color': '#ff0000'
  2868. background-color: 'rgba(255, 255, 255, 0.3)'
  2869. border-radius: 50%
  2870. left: 51%
  2871. text-align: center
  2872. top: 55%
  2873. transform: scale(2, 2)
  2874. title: office camera
  2875. type: icon
  2876. - entity: camera.aarlo_backyard
  2877. icon: 'mdi:cctv'
  2878. style:
  2879. '--iron-icon-stroke-color': '#969696'
  2880. '--paper-item-icon-active-color': '#ff0000'
  2881. background-color: 'rgba(255, 255, 255, 0.3)'
  2882. border-radius: 50%
  2883. left: 28%
  2884. text-align: center
  2885. top: 45%
  2886. transform: scale(2, 2)
  2887. title: backyard camera
  2888. type: icon
  2889. - entity: camera.blueiris_sideyard
  2890. icon: 'mdi:cctv'
  2891. style:
  2892. '--iron-icon-stroke-color': '#969696'
  2893. '--paper-item-icon-active-color': '#ff0000'
  2894. background-color: 'rgba(255, 255, 255, 0.3)'
  2895. border-radius: 50%
  2896. left: 32%
  2897. text-align: center
  2898. top: 7%
  2899. transform: scale(2, 2)
  2900. title: sideyard camera
  2901. type: icon
  2902. - entity: camera.blueiris_backyard
  2903. icon: 'mdi:cctv'
  2904. style:
  2905. '--iron-icon-stroke-color': '#969696'
  2906. '--paper-item-icon-active-color': '#ff0000'
  2907. background-color: 'rgba(255, 255, 255, 0.3)'
  2908. border-radius: 50%
  2909. left: 28%
  2910. text-align: center
  2911. top: 80%
  2912. transform: scale(2, 2)
  2913. title: backyard camera
  2914. type: icon
  2915. - entity: camera.blueiris_backyard2
  2916. icon: 'mdi:cctv'
  2917. style:
  2918. '--iron-icon-stroke-color': '#969696'
  2919. '--paper-item-icon-active-color': '#ff0000'
  2920. background-color: 'rgba(255, 255, 255, 0.3)'
  2921. border-radius: 50%
  2922. left: 28%
  2923. text-align: center
  2924. top: 18%
  2925. transform: scale(2, 2)
  2926. title: backyard camera
  2927. type: icon
  2928. - entity: camera.aarlo_driveway
  2929. icon: 'mdi:cctv'
  2930. style:
  2931. '--iron-icon-stroke-color': '#969696'
  2932. '--paper-item-icon-active-color': '#ff0000'
  2933. background-color: 'rgba(255, 255, 255, 0.3)'
  2934. border-radius: 50%
  2935. left: 96%
  2936. text-align: center
  2937. top: 30%
  2938. transform: scale(2, 2)
  2939. title: office camera
  2940. type: icon
  2941.  
  2942.  
  2943.  
  2944. ### SIDE BAR ####
  2945.  
  2946. - action: none
  2947. hold_action:
  2948. action: none
  2949. image: /local/ui/sidebar/sidebarBG2.png
  2950. style:
  2951. height: 100%
  2952. left: 11.73828125%
  2953. top: 50%
  2954. width: 23.4765625%
  2955. tap_action:
  2956. action: none
  2957. type: image
  2958.  
  2959. ## Time and Date ##
  2960.  
  2961. - entity: sensor.normaltime
  2962. hold_action:
  2963. action: none
  2964. style:
  2965. color: 'rgba(255, 255, 255, 0.9)'
  2966. font-size: 5vw
  2967. font-weight: 200
  2968. left: 2%
  2969. letter-spacing: '-0.05vw'
  2970. max-width: 1px
  2971. top: 10%
  2972. tap_action:
  2973. action: none
  2974. type: state-label
  2975. - entity: sensor.date_string
  2976. hold_action:
  2977. action: none
  2978. style:
  2979. color: 'rgba(255, 255, 255, 0.6)'
  2980. font-size: 1.3vw
  2981. font-weight: 300
  2982. left: 18.1%
  2983. letter-spacing: '-0.05vw'
  2984. text-align: left
  2985. top: 17%
  2986. width: 30%
  2987. tap_action:
  2988. action: none
  2989. type: state-label
  2990.  
  2991. ## Menu Buttons ##
  2992.  
  2993.  
  2994. - action: none
  2995. image: /local/ui/sidebar/lights_off.png
  2996. style:
  2997. left: 11.7%
  2998. top: 26%
  2999. width: 20.5078125%
  3000. tap_action:
  3001. action: navigate
  3002. navigation_path: /lovelace/lights
  3003. type: image
  3004. - action: none
  3005. image: /local/ui/sidebar/cameras_on.png
  3006. style:
  3007. left: 11.7%
  3008. top: 34%
  3009. width: 20.5078125%
  3010. tap_action:
  3011. action: navigate
  3012. navigation_path: /lovelace/2
  3013. type: image
  3014. - action: none
  3015. image: /local/ui/sidebar/climate_off.png
  3016. style:
  3017. left: 11.7%
  3018. top: 42%
  3019. width: 20.5078125%
  3020. tap_action:
  3021. action: navigate
  3022. navigation_path: /lovelace/3
  3023. type: image
  3024. - action: none
  3025. image: /local/ui/sidebar/cleanUp_off.png
  3026. style:
  3027. left: 11.7%
  3028. top: 50%
  3029. width: 20.5078125%
  3030. tap_action:
  3031. action: navigate
  3032. navigation_path: /lovelace/4
  3033. type: image
  3034. - type: image
  3035. action: none
  3036. image: /local/ui/sidebar/1down.gif
  3037. style:
  3038. left: 11.7%
  3039. top: 60%
  3040. width: 10%
  3041. tap_action:
  3042. action: navigate
  3043. navigation_path: /lovelace/5
  3044.  
  3045.  
  3046. #### People Home ####
  3047.  
  3048. - style:
  3049. color: white
  3050. font-size: 1vw
  3051. font-weight: 300
  3052. left: 8.8%
  3053. opacity: 0
  3054. top: 66%
  3055. width: 10%
  3056. text: 'People at home:'
  3057. type: 'custom:text-element'
  3058.  
  3059. - action: none
  3060. entity: person.sean
  3061. state_image:
  3062. home: /local/people/seann.png
  3063. not_home: /local/people/seannGone.png
  3064. style:
  3065. background-color: 'rgba(255, 255, 255, 0.0)'
  3066. border-radius: 10vw
  3067. height: 7vw
  3068. left: 5.8%
  3069. top: 72%
  3070. width: 7vw
  3071. tap_action: none
  3072. type: image
  3073.  
  3074. - action: none
  3075. entity: person.roommate
  3076. state_image:
  3077. home: /local/people/roommate.png
  3078. not_home: /local/people/roommateGone.png
  3079. style:
  3080. background-color: 'rgba(255, 255, 255, 0.0)'
  3081. border-radius: 10vw
  3082. height: 7vw
  3083. left: 16%
  3084. top: 72%
  3085. width: 7vw
  3086. tap_action: none
  3087. type: image
  3088.  
  3089. - action: none
  3090. entity: person.percy
  3091. state_image:
  3092. home: /local/people/percyy.png
  3093. not_home: /local/people/percyyGone.png
  3094. style:
  3095. background-color: 'rgba(255, 255, 255, 0.0)'
  3096. border-radius: 10vw
  3097. height: 7vw
  3098. left: 5.8%
  3099. top: 90%
  3100. width: 7vw
  3101. tap_action: none
  3102. type: image
  3103.  
  3104.  
  3105.  
  3106.  
  3107.  
  3108.  
  3109. #############################################################################################################################################
  3110. # #
  3111. # Climate View #
  3112. # #
  3113. #############################################################################################################################################
  3114.  
  3115.  
  3116.  
  3117. - title: Climate
  3118. icon: 'mdi:thermostat'
  3119. panel: true
  3120. cards:
  3121. - type: picture-elements
  3122. image: /local/ui/floorplan/night.png
  3123. style: |
  3124. ha-card {
  3125. background: rgba(42, 46, 48, 1)
  3126. }
  3127. elements:
  3128. - action: none
  3129. entity: sun.sun
  3130. hold_action:
  3131. action: none
  3132. state_image:
  3133. above_horizon: /local/ui/floorplan/day.png
  3134. below_horizon: /local/transparent.png
  3135. style:
  3136. height: 100%
  3137. left: 50%
  3138. mix-blend-mode: lighten
  3139. opacity: '${ states[''sensor.sunlight_opacity''].state }'
  3140. top: 50%
  3141. width: 100%
  3142. tap_action:
  3143. action: none
  3144. type: image
  3145.  
  3146. - type: state-label
  3147. entity: sensor.office_temperature
  3148. tap_action:
  3149. action: call-service
  3150. service: browser_mod.popup
  3151. service_data:
  3152. title: Office Temperature
  3153. card:
  3154. type: custom:mini-graph-card
  3155. entities:
  3156. - sensor.office_temperature
  3157. show:
  3158. name: false
  3159. labels: true
  3160. color_thresholds:
  3161. - value: 69
  3162. color: "#0086d3"
  3163. - value: 71
  3164. color: "#00d3d3"
  3165. - value: 73
  3166. color: "#FFFF00"
  3167. - value: 75
  3168. color: "#f39c12"
  3169. - value: 77
  3170. color: "#d35400"
  3171. - value: 80
  3172. color: "#c0392b"
  3173. deviceID:
  3174. - this
  3175. style:
  3176. top: 65%
  3177. left: 42%
  3178. color: 'rgba(255, 255, 255, 1)'
  3179. font-size: 3vw
  3180. font-weight: 500
  3181. text-shadow: 1px 1px black
  3182.  
  3183. - type: state-icon
  3184. entity: fan.sonoff_office
  3185. style:
  3186. '--iron-icon-height': 2vw
  3187. '--iron-icon-width': 2vw
  3188. '--paper-item-icon-active-color': 'rgba(0, 0, 255, 1)'
  3189. '--paper-item-icon-color': 'rgba(255, 0, 0, 1)'
  3190. align-items: center
  3191. background-color: 'rgba(255, 255, 255, 0.5)'
  3192. border-radius: 100%
  3193. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  3194. display: flex
  3195. height: 3vw
  3196. justify-content: center
  3197. left: 42%
  3198. margin-left: '-1.5vw'
  3199. margin-top: '-1.5vw'
  3200. top: 72%
  3201. transform: scale(1.5)
  3202. width: 3vw
  3203. tap_action:
  3204. action: toggle
  3205. - type: state-label
  3206. entity: sensor.backdoor_temp
  3207. tap_action:
  3208. action: call-service
  3209. service: browser_mod.popup
  3210. service_data:
  3211. title: Hallway Temperature
  3212. card:
  3213. type: custom:mini-graph-card
  3214. entities:
  3215. - sensor.backdoor_temp
  3216. show:
  3217. name: false
  3218. labels: true
  3219. color_thresholds:
  3220. - value: 69
  3221. color: "#0086d3"
  3222. - value: 71
  3223. color: "#00d3d3"
  3224. - value: 73
  3225. color: "#FFFF00"
  3226. - value: 75
  3227. color: "#f39c12"
  3228. - value: 77
  3229. color: "#d35400"
  3230. - value: 80
  3231. color: "#c0392b"
  3232. deviceID:
  3233. - this
  3234. style:
  3235. top: 50%
  3236. left: 40%
  3237. color: 'rgba(255, 255, 255, 1)'
  3238. font-size: 3vw
  3239. font-weight: 500
  3240. text-shadow: 1px 1px black
  3241. - type: state-label
  3242. entity: sensor.kitchen_temp
  3243. tap_action:
  3244. action: call-service
  3245. service: browser_mod.popup
  3246. service_data:
  3247. title: Kitchen Temperature
  3248. card:
  3249. type: custom:mini-graph-card
  3250. entities:
  3251. - sensor.kitchen_temp
  3252. show:
  3253. name: false
  3254. labels: true
  3255. color_thresholds:
  3256. - value: 69
  3257. color: "#0086d3"
  3258. - value: 71
  3259. color: "#00d3d3"
  3260. - value: 73
  3261. color: "#FFFF00"
  3262. - value: 75
  3263. color: "#f39c12"
  3264. - value: 77
  3265. color: "#d35400"
  3266. - value: 80
  3267. color: "#c0392b"
  3268. deviceID:
  3269. - this
  3270. style:
  3271. top: 38%
  3272. left: 60%
  3273. color: 'rgba(255, 255, 255, 1)'
  3274. font-size: 3vw
  3275. font-weight: 500
  3276. text-shadow: 1px 1px black
  3277. - type: state-icon
  3278. entity: switch.kitchen_fan
  3279. style:
  3280. top: 45%
  3281. left: 60%
  3282. '--iron-icon-height': 2vw
  3283. '--iron-icon-width': 2vw
  3284. '--paper-item-icon-active-color': 'rgba(0, 0, 255, 1)'
  3285. '--paper-item-icon-color': 'rgba(255, 0, 0, 1)'
  3286. align-items: center
  3287. background-color: 'rgba(255, 255, 255, 0.5)'
  3288. border-radius: 100%
  3289. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  3290. display: flex
  3291. height: 3vw
  3292. justify-content: center
  3293. margin-left: '-1.5vw'
  3294. margin-top: '-1.5vw'
  3295. transform: scale(1.5)
  3296. width: 3vw
  3297. tap_action:
  3298. action: toggle
  3299. - type: state-icon
  3300. entity: fan.sonoff_living
  3301. style:
  3302. '--iron-icon-height': 2vw
  3303. '--iron-icon-width': 2vw
  3304. '--paper-item-icon-active-color': 'rgba(0, 0, 255, 1)'
  3305. '--paper-item-icon-color': 'rgba(255, 0, 0, 1)'
  3306. align-items: center
  3307. background-color: 'rgba(255, 255, 255, 0.5)'
  3308. border-radius: 100%
  3309. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  3310. display: flex
  3311. height: 3vw
  3312. justify-content: center
  3313. left: 77%
  3314. margin-left: '-1.5vw'
  3315. margin-top: '-1.5vw'
  3316. top: 72%
  3317. transform: scale(1.5)
  3318. width: 3vw
  3319. tap_action:
  3320. action: toggle
  3321. - type: state-label
  3322. entity: sensor.living_room_temp
  3323. tap_action:
  3324. action: call-service
  3325. service: browser_mod.popup
  3326. service_data:
  3327. title: Living Room Temperature
  3328. card:
  3329. type: custom:mini-graph-card
  3330. entities:
  3331. - sensor.living_room_temp
  3332. show:
  3333. name: false
  3334. labels: true
  3335. color_thresholds:
  3336. - value: 69
  3337. color: "#0086d3"
  3338. - value: 71
  3339. color: "#00d3d3"
  3340. - value: 73
  3341. color: "#FFFF00"
  3342. - value: 75
  3343. color: "#f39c12"
  3344. - value: 77
  3345. color: "#d35400"
  3346. - value: 80
  3347. color: "#c0392b"
  3348. deviceID:
  3349. - this
  3350. style:
  3351. top: 65%
  3352. left: 77%
  3353. color: 'rgba(255, 255, 255, 1)'
  3354. font-size: 3vw
  3355. font-weight: 500
  3356. text-shadow: 1px 1px black
  3357. - type: state-label
  3358. entity: sensor.bedroom_temp
  3359. tap_action:
  3360. action: call-service
  3361. service: browser_mod.popup
  3362. service_data:
  3363. title: Bedroom Temperature
  3364. card:
  3365. type: custom:mini-graph-card
  3366. entities:
  3367. - sensor.bedroom_temp
  3368. show:
  3369. name: false
  3370. labels: true
  3371. color_thresholds:
  3372. - value: 69
  3373. color: "#0086d3"
  3374. - value: 71
  3375. color: "#00d3d3"
  3376. - value: 73
  3377. color: "#FFFF00"
  3378. - value: 75
  3379. color: "#f39c12"
  3380. - value: 77
  3381. color: "#d35400"
  3382. - value: 80
  3383. color: "#c0392b"
  3384. deviceID:
  3385. - this
  3386. style:
  3387. top: 35%
  3388. left: 79%
  3389. color: 'rgba(255, 255, 255, 1)'
  3390. font-size: 3vw
  3391. font-weight: 500
  3392. text-shadow: 2px 2px black
  3393.  
  3394. - type: state-icon
  3395. entity: fan.sonoff_bedroom
  3396. style:
  3397. '--iron-icon-height': 2vw
  3398. '--iron-icon-width': 2vw
  3399. '--paper-item-icon-active-color': 'rgba(0, 0, 255, 1)'
  3400. '--paper-item-icon-color': 'rgba(255, 0, 0, 1)'
  3401. align-items: center
  3402. background-color: 'rgba(255, 255, 255, 0.5)'
  3403. border-radius: 100%
  3404. box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
  3405. display: flex
  3406. height: 3vw
  3407. justify-content: center
  3408. left: 79%
  3409. margin-left: '-1.5vw'
  3410. margin-top: '-1.5vw'
  3411. top: 42%
  3412. transform: scale(1.5)
  3413. width: 3vw
  3414. tap_action:
  3415. action: toggle
  3416.  
  3417. - type: state-label
  3418. entity: sensor.bathroom_temp
  3419. tap_action:
  3420. action: call-service
  3421. service: browser_mod.popup
  3422. service_data:
  3423. title: Bathroom Temperature
  3424. card:
  3425. type: custom:mini-graph-card
  3426. entities:
  3427. - sensor.bathroom_temp
  3428. show:
  3429. name: false
  3430. labels: true
  3431. color_thresholds:
  3432. - value: 69
  3433. color: "#0086d3"
  3434. - value: 71
  3435. color: "#00d3d3"
  3436. - value: 73
  3437. color: "#FFFF00"
  3438. - value: 75
  3439. color: "#f39c12"
  3440. - value: 77
  3441. color: "#d35400"
  3442. - value: 80
  3443. color: "#c0392b"
  3444. deviceID:
  3445. - this
  3446. style:
  3447. top: 82%
  3448. left: 60%
  3449. color: 'rgba(255, 255, 255, 1)'
  3450. font-size: 3vw
  3451. font-weight: 500
  3452. text-shadow: 2px 2px black
  3453. - type: state-label
  3454. entity: sensor.owm_temperature
  3455. tap_action:
  3456. action: call-service
  3457. service: browser_mod.popup
  3458. service_data:
  3459. title: Outside Temperature
  3460. card:
  3461. type: custom:mini-graph-card
  3462. entities:
  3463. - sensor.owm_temperature
  3464. show:
  3465. name: false
  3466. labels: true
  3467. color_thresholds:
  3468. - value: 70
  3469. color: "#FFFF00"
  3470. - value: 85
  3471. color: "#f39c12"
  3472. - value: 90
  3473. color: "#d35400"
  3474. - value: 95
  3475. color: "#c0392b"
  3476. deviceID:
  3477. - this
  3478. style:
  3479. top: 3%
  3480. left: 60%
  3481. color: 'rgba(255, 255, 255, 1)'
  3482. font-size: 3vw
  3483. font-weight: 500
  3484. text-shadow: 1px 1px black
  3485. - type: state-label
  3486. entity: sensor.owm_humidity
  3487. tap_action:
  3488. action: call-service
  3489. service: browser_mod.popup
  3490. service_data:
  3491. title: Outside Humidity
  3492. card:
  3493. type: custom:mini-graph-card
  3494. entities:
  3495. - sensor.own_humidity
  3496. deviceID:
  3497. - this
  3498. style:
  3499. top: 8%
  3500. left: 60%
  3501. color: 'rgba(255, 255, 255, 1)'
  3502. font-size: 2vw
  3503. font-weight: 300
  3504. text-shadow: 1px 1px black
  3505.  
  3506.  
  3507.  
  3508.  
  3509.  
  3510. ### SIDE BAR ####
  3511.  
  3512. - action: none
  3513. hold_action:
  3514. action: none
  3515. image: /local/ui/sidebar/sidebarBG2.png
  3516. style:
  3517. height: 100%
  3518. left: 11.73828125%
  3519. top: 50%
  3520. width: 23.4765625%
  3521. tap_action:
  3522. action: none
  3523. type: image
  3524.  
  3525. ## Time and Date ##
  3526.  
  3527. - entity: sensor.normaltime
  3528. hold_action:
  3529. action: none
  3530. style:
  3531. color: 'rgba(255, 255, 255, 0.9)'
  3532. font-size: 5vw
  3533. font-weight: 200
  3534. left: 2%
  3535. letter-spacing: '-0.05vw'
  3536. max-width: 1px
  3537. top: 10%
  3538. tap_action:
  3539. action: none
  3540. type: state-label
  3541. - entity: sensor.date_string
  3542. hold_action:
  3543. action: none
  3544. style:
  3545. color: 'rgba(255, 255, 255, 0.6)'
  3546. font-size: 1.3vw
  3547. font-weight: 300
  3548. left: 18.1%
  3549. letter-spacing: '-0.05vw'
  3550. text-align: left
  3551. top: 17%
  3552. width: 30%
  3553. tap_action:
  3554. action: none
  3555. type: state-label
  3556.  
  3557. ## Menu Buttons ##
  3558.  
  3559.  
  3560. - action: none
  3561. image: /local/ui/sidebar/lights_off.png
  3562. style:
  3563. left: 11.7%
  3564. top: 26%
  3565. width: 20.5078125%
  3566. tap_action:
  3567. action: navigate
  3568. navigation_path: /lovelace/lights
  3569. type: image
  3570. - action: none
  3571. image: /local/ui/sidebar/cameras_off.png
  3572. style:
  3573. left: 11.7%
  3574. top: 34%
  3575. width: 20.5078125%
  3576. tap_action:
  3577. action: navigate
  3578. navigation_path: /lovelace/2
  3579. type: image
  3580. - action: none
  3581. image: /local/ui/sidebar/climate_on.png
  3582. style:
  3583. left: 11.7%
  3584. top: 42%
  3585. width: 20.5078125%
  3586. tap_action:
  3587. action: navigate
  3588. navigation_path: /lovelace/3
  3589. type: image
  3590. - action: none
  3591. image: /local/ui/sidebar/cleanUp_off.png
  3592. style:
  3593. left: 11.7%
  3594. top: 50%
  3595. width: 20.5078125%
  3596. tap_action:
  3597. action: navigate
  3598. navigation_path: /lovelace/4
  3599. type: image
  3600. - type: image
  3601. action: none
  3602. image: /local/ui/sidebar/1down.gif
  3603. style:
  3604. left: 11.7%
  3605. top: 60%
  3606. width: 10%
  3607. tap_action:
  3608. action: navigate
  3609. navigation_path: /lovelace/5
  3610.  
  3611.  
  3612. #### People Home ####
  3613.  
  3614. - style:
  3615. color: white
  3616. font-size: 1vw
  3617. font-weight: 300
  3618. left: 8.8%
  3619. opacity: 0
  3620. top: 66%
  3621. width: 10%
  3622. text: 'People at home:'
  3623. type: 'custom:text-element'
  3624.  
  3625. - action: none
  3626. entity: person.sean
  3627. state_image:
  3628. home: /local/people/seann.png
  3629. not_home: /local/people/seannGone.png
  3630. style:
  3631. background-color: 'rgba(255, 255, 255, 0.0)'
  3632. border-radius: 10vw
  3633. height: 7vw
  3634. left: 5.8%
  3635. top: 72%
  3636. width: 7vw
  3637. tap_action: none
  3638. type: image
  3639.  
  3640. - action: none
  3641. entity: person.roommate
  3642. state_image:
  3643. home: /local/people/roommate.png
  3644. not_home: /local/people/roommateGone.png
  3645. style:
  3646. background-color: 'rgba(255, 255, 255, 0.0)'
  3647. border-radius: 10vw
  3648. height: 7vw
  3649. left: 16%
  3650. top: 72%
  3651. width: 7vw
  3652. tap_action: none
  3653. type: image
  3654.  
  3655. - action: none
  3656. entity: person.percy
  3657. state_image:
  3658. home: /local/people/percyy.png
  3659. not_home: /local/people/percyyGone.png
  3660. style:
  3661. background-color: 'rgba(255, 255, 255, 0.0)'
  3662. border-radius: 10vw
  3663. height: 7vw
  3664. left: 5.8%
  3665. top: 90%
  3666. width: 7vw
  3667. tap_action: none
  3668. type: image
  3669.  
  3670.  
  3671.  
  3672.  
  3673.  
  3674.  
  3675.  
  3676. #############################################################################################################################################
  3677. # #
  3678. # Xiaomi Clean Up View #
  3679. # #
  3680. #############################################################################################################################################
  3681.  
  3682.  
  3683.  
  3684. - title: Clean Up
  3685. icon: 'mdi:robot-vacuum'
  3686. panel: true
  3687. cards:
  3688. - type: picture-elements
  3689. image: /local/ui/floorplan/night.png
  3690. style: |
  3691. ha-card {
  3692. background: rgba(42, 46, 48, 1)
  3693. }
  3694. elements:
  3695. - action: none
  3696. entity: sun.sun
  3697. hold_action:
  3698. action: none
  3699. state_image:
  3700. above_horizon: /local/ui/floorplan/day.png
  3701. below_horizon: /local/transparent.png
  3702. style:
  3703. height: 100%
  3704. left: 50%
  3705. mix-blend-mode: lighten
  3706. opacity: '${ states[''sensor.sunlight_opacity''].state }'
  3707. top: 50%
  3708. width: 100%
  3709. tap_action:
  3710. action: none
  3711. type: image
  3712. - type: state-icon
  3713. entity: binary_sensor.car_wash
  3714. style:
  3715. left: 96%
  3716. top: 29%
  3717. "--paper-item-icon-color": red
  3718. "--paper-item-icon-active-color": green
  3719. transform: scale(1.5,1.5)
  3720. - type: state-label
  3721. entity: sensor.days_trash
  3722. style:
  3723. left: 96%
  3724. top: 20%
  3725. color: 'rgba(255,255,255,1)'
  3726. font-size: 3vw
  3727. font-weight: 500
  3728. text-shadow: 2px 2px black
  3729. tap_action:
  3730. action: call-service
  3731. service: browser_mod.popup
  3732. service_data:
  3733. title: Trash Countdown
  3734. card:
  3735. type: entities
  3736. entities:
  3737. - entity: sensor.days_trash
  3738. icon: mdi:delete
  3739. - entity: sensor.days_recycle
  3740. icon: mdi:recycle
  3741. - entity: sensor.days_junkwaste
  3742. icon: mdi:dump-truck
  3743. - entity: sensor.days_treewaste
  3744. icon: mdi:pine-tree
  3745. deviceID:
  3746. - this
  3747. - type: state-label
  3748. entity: sensor.days_recycle
  3749. style:
  3750. left: 96.5%
  3751. top: 14%
  3752. color: 'rgba(255,255,255,1)'
  3753. font-size: 3vw
  3754. font-weight: 500
  3755. text-shadow: 2px 2px black
  3756. tap_action:
  3757. action: call-service
  3758. service: browser_mod.popup
  3759. service_data:
  3760. title: Trash Countdown
  3761. card:
  3762. type: entities
  3763. entities:
  3764. - entity: sensor.days_trash
  3765. icon: mdi:delete
  3766. - entity: sensor.days_recycle
  3767. icon: mdi:recycle
  3768. - entity: sensor.days_junkwaste
  3769. icon: mdi:dump-truck
  3770. - entity: sensor.days_treewaste
  3771. icon: mdi:pine-tree
  3772. deviceID:
  3773. - this
  3774. - action: none
  3775. entity: input_text.room_cleaning
  3776. hold_action:
  3777. action: none
  3778. state_image:
  3779. bedroom: /local/transparent.png
  3780. charging: /local/ui/floorplan/crop/clean_living.png
  3781. guest: /local/transparent.png
  3782. goinghome: /local/ui/floorplan/crop/clean_living.png
  3783. kitchen: /local/transparent.png
  3784. living: /local/ui/floorplan/crop/clean_livingSelected.png
  3785. office: /local/transparent.png
  3786. style:
  3787. left: 81%
  3788. top: 71%
  3789. width: 23%
  3790. tap_action:
  3791. action: call-service
  3792. service: script.clean_living
  3793. type: image
  3794. - action: none
  3795. entity: input_text.room_cleaning
  3796. hold_action:
  3797. action: none
  3798. state_image:
  3799. bedroom: /local/transparent.png
  3800. charging: /local/ui/floorplan/crop/clean_kitchen.png
  3801. guest: /local/transparent.png
  3802. goinghome: /local/ui/floorplan/crop/clean_kitchen.png
  3803. kitchen: /local/ui/floorplan/crop/clean_kitchenSelected.png
  3804. living: /local/transparent.png
  3805. office: /local/transparent.png
  3806. style:
  3807. left: 61.5%
  3808. top: 52.5%
  3809. width: 16.25%
  3810. tap_action:
  3811. action: call-service
  3812. service: script.clean_kitchen
  3813. type: image
  3814. - action: none
  3815. entity: input_text.room_cleaning
  3816. hold_action:
  3817. action: none
  3818. state_image:
  3819. bedroom: /local/ui/floorplan/crop/clean_bedroomSelected.png
  3820. charging: /local/ui/floorplan/crop/clean_bedroom.png
  3821. guest: /local/transparent.png
  3822. goinghome: /local/ui/floorplan/crop/clean_bedroom.png
  3823. kitchen: /local/transparent.png
  3824. living: /local/transparent.png
  3825. office: /local/transparent.png
  3826. style:
  3827. left: 81%
  3828. top: 34%
  3829. width: 23.25%
  3830. tap_action:
  3831. action: call-service
  3832. service: script.clean_bedroom
  3833. type: image
  3834. - action: none
  3835. entity: input_text.room_cleaning
  3836. hold_action:
  3837. action: none
  3838. state_image:
  3839. bedroom: /local/transparent.png
  3840. charging: /local/ui/floorplan/crop/clean_guest.png
  3841. guest: /local/ui/floorplan/crop/clean_guestSelected.png
  3842. goinghome: /local/ui/floorplan/crop/clean_guest.png
  3843. kitchen: /local/transparent.png
  3844. living: /local/transparent.png
  3845. office: /local/transparent.png
  3846. style:
  3847. left: 42%
  3848. top: 30.5%
  3849. width: 22%
  3850. tap_action:
  3851. action: call-service
  3852. service: script.clean_guest
  3853. type: image
  3854. - action: none
  3855. entity: input_text.room_cleaning
  3856. hold_action:
  3857. action: none
  3858. state_image:
  3859. bedroom: /local/transparent.png
  3860. charging: /local/ui/floorplan/crop/clean_office.png
  3861. guest: /local/transparent.png
  3862. goinghome: /local/ui/floorplan/crop/clean_office.png
  3863. kitchen: /local/transparent.png
  3864. living: /local/transparent.png
  3865. office: /local/ui/floorplan/crop/clean_officeSelected.png
  3866. style:
  3867. left: 42.25%
  3868. top: 64%
  3869. width: 22.5%
  3870. tap_action:
  3871. action: call-service
  3872. service: script.clean_office
  3873. type: image
  3874.  
  3875.  
  3876.  
  3877. #################################################################
  3878. # #
  3879. # SIDEBAR : Cleanup #
  3880. # #
  3881. #################################################################
  3882.  
  3883.  
  3884. ######################### Background #########################
  3885.  
  3886. - action: none
  3887. hold_action:
  3888. action: none
  3889. image: /local/ui/cleanUp/robotControlsBG.png
  3890. style:
  3891. height: 100%
  3892. left: 11.73828125%
  3893. top: 50%
  3894. width: 23.4765625%
  3895. tap_action:
  3896. action: none
  3897. type: image
  3898.  
  3899. ########### Vacuum Robot Control Panel buttons ###########
  3900.  
  3901. # Note: uses input_text from configuration.yaml to show
  3902. # the right text, EG: "Cleaning Kitchen" status text
  3903.  
  3904. - action: none
  3905. entity: input_text.room_cleaning
  3906. hold_action:
  3907. action: none
  3908. state_image:
  3909. bedroom: /local/ui/cleanUp/cleaningStatusLivee.png
  3910. charging: /local/transparent.png
  3911. goinghome: /local/ui/cleanUp/cleaningStatusLivee.png
  3912. kitchen: /local/ui/cleanUp/cleaningStatusLivee.png
  3913. livingroom: /local/ui/cleanUp/cleaningStatusLivee.png
  3914. study: /local/ui/cleanUp/cleaningStatusLivee.png
  3915. style:
  3916. left: 12%
  3917. top: 19.5%
  3918. width: 18%
  3919. type: image
  3920.  
  3921. - conditions:
  3922. - entity: input_text.room_cleaning
  3923. state_not: charging
  3924. elements:
  3925. - entity: sensor.vacuum_cleaning_status
  3926. style:
  3927. color: 'rgba(255,255,255,1)'
  3928. font-size: 1.1vw
  3929. font-weight: 300
  3930. left: 12%
  3931. text-align: center
  3932. top: 21.2%
  3933. width: 15%
  3934. type: state-label
  3935. type: conditional
  3936. - action: none
  3937. hold_action:
  3938. action: none
  3939. image: /local/ui/cleanUp/btns/ring.png
  3940. style:
  3941. left: 6%
  3942. top: 75%
  3943. width: 9%
  3944. tap_action:
  3945. action: call-service
  3946. service: vacuum.locate
  3947. service_data:
  3948. entity_id: vacuum.roborock
  3949. type: image
  3950. - action: none
  3951. hold_action:
  3952. action: none
  3953. image: /local/ui/cleanUp/btns/gohome.png
  3954. style:
  3955. left: 17%
  3956. top: 75%
  3957. width: 9%
  3958. tap_action:
  3959. action: call-service
  3960. service: vacuum.return_to_base
  3961. service_data:
  3962. entity_id: vacuum.roborock
  3963. type: image
  3964. - action: none
  3965. hold_action:
  3966. action: none
  3967. image: /local/ui/cleanUp/btns/start.png
  3968. style:
  3969. left: 6%
  3970. top: 91.5%
  3971. width: 9%
  3972. tap_action:
  3973. action: call-service
  3974. service: vacuum.start
  3975. service_data:
  3976. entity_id: vacuum.roborock
  3977. type: image
  3978. - action: none
  3979. hold_action:
  3980. action: none
  3981. image: /local/ui/cleanUp/btns/pause.png
  3982. style:
  3983. left: 17%
  3984. top: 91.5%
  3985. width: 9%
  3986. tap_action:
  3987. action: call-service
  3988. service: vacuum.pause
  3989. service_data:
  3990. entity_id: vacuum.roborock
  3991. type: image
  3992. - action: none
  3993. entity: sensor.vacuum_fan
  3994. hold_action:
  3995. action: none
  3996. state_image:
  3997. Gentle: local/ui/cleanUp/fan_0_selected.png
  3998. Standard: local/ui/cleanUp/fan_0.png
  3999. Turbo: local/ui/cleanUp/fan_0.png
  4000. Silent: local/ui/cleanUp/fan_0.png
  4001. Medium: local/ui/cleanUp/fan_0.png
  4002. style:
  4003. left: 3%
  4004. top: 62.75%
  4005. width: 4.1796875%
  4006. tap_action:
  4007. action: call-service
  4008. service: vacuum.set_fan_speed
  4009. service_data:
  4010. entity_id: vacuum.roborock
  4011. fan_speed: Gentle
  4012. type: image
  4013. - action: none
  4014. entity: sensor.vacuum_fan
  4015. hold_action:
  4016. action: none
  4017. state_image:
  4018. Gentle: local/ui/cleanUp/fann_1.png
  4019. Standard: local/ui/cleanUp/fann_1.png
  4020. Turbo: local/ui/cleanUp/fann_1.png
  4021. Silent: local/ui/cleanUp/fann_1_selected.png
  4022. Medium: local/ui/cleanUp/fann_1.png
  4023. style:
  4024. left: 7.3%
  4025. top: 62.75%
  4026. width: 4.1796875%
  4027. tap_action:
  4028. action: call-service
  4029. service: vacuum.set_fan_speed
  4030. service_data:
  4031. entity_id: vacuum.roborock
  4032. fan_speed: Silent
  4033. type: image
  4034. - action: none
  4035. entity: sensor.vacuum_fan
  4036. hold_action:
  4037. action: none
  4038. state_image:
  4039. Gentle: local/ui/cleanUp/fan_2.png
  4040. Standard: local/ui/cleanUp/btns/fan_2_selected.png
  4041. Turbo: local/ui/cleanUp/btns/fan_2.png
  4042. Silent: local/ui/cleanUp/btns/fan_2.png
  4043. Medium: local/ui/cleanUp/btns/fan_2.png
  4044. style:
  4045. left: 11.58%
  4046. top: 62.75%
  4047. width: 4.1796875%
  4048. tap_action:
  4049. action: call-service
  4050. service: vacuum.set_fan_speed
  4051. service_data:
  4052. entity_id: vacuum.roborock
  4053. fan_speed: Standard
  4054. type: image
  4055. - action: none
  4056. entity: sensor.vacuum_fan
  4057. hold_action:
  4058. action: none
  4059. state_image:
  4060. Gentle: local/ui/cleanUp/fan_3.png
  4061. Standard: local/ui/cleanUp/btns/fan_3.png
  4062. Turbo: local/ui/cleanUp/btns/fan_3.png
  4063. Silent: local/ui/cleanUp/btns/fan_3.png
  4064. Medium: local/ui/cleanUp/btns/fan_3_selected.png
  4065. style:
  4066. left: 15.85%
  4067. top: 62.75%
  4068. width: 4.1796875%
  4069. tap_action:
  4070. action: call-service
  4071. service: vacuum.set_fan_speed
  4072. service_data:
  4073. entity_id: vacuum.roborock
  4074. fan_speed: Medium
  4075. type: image
  4076. - action: none
  4077. entity: sensor.vacuum_fan
  4078. hold_action:
  4079. action: none
  4080. state_image:
  4081. Gentle: local/ui/cleanUp/fan_4.png
  4082. Standard: local/ui/cleanUp/btns/fan_4.png
  4083. Turbo: local/ui/cleanUp/btns/fan_4_selected.png
  4084. Silent: local/ui/cleanUp/btns/fan_4.png
  4085. Medium: local/ui/cleanUp/btns/fan_4.png
  4086. style:
  4087. left: 20.15%
  4088. top: 62.75%
  4089. width: 4.1796875%
  4090. tap_action:
  4091. action: call-service
  4092. service: vacuum.set_fan_speed
  4093. service_data:
  4094. entity_id: vacuum.roborock
  4095. fan_speed: Turbo
  4096. type: image
  4097. - entity: sensor.vacuum_battery_icon
  4098. style:
  4099. '--iron-icon-height': 1.5vw
  4100. '--iron-icon-width': 1.5vw
  4101. color: 'rgba(255,255,0,1)'
  4102. left: 19%
  4103. top: 10%
  4104. type: state-icon
  4105. state_color: false
  4106. - entity: sensor.vacuum_status
  4107. style:
  4108. color: 'rgba(255,255,255,1)'
  4109. font-size: 1.1vw
  4110. font-weight: 300
  4111. left: 12%
  4112. text-align: center
  4113. top: 18.5%
  4114. width: 15%
  4115. type: state-label
  4116.  
  4117.  
  4118.  
  4119. ######################### TIME & DATE #########################
  4120.  
  4121. # - entity: sensor.time
  4122. # hold_action:
  4123. # action: none
  4124. # style:
  4125. # color: 'rgba(255, 255, 255, 0.7)'
  4126. # font-size: 5.41vw
  4127. # font-weight: 200
  4128. # left: 2.7%
  4129. # letter-spacing: '-0.05vw'
  4130. # max-width: 1px
  4131. # top: 10%
  4132. # tap_action:
  4133. # action: none
  4134. # type: state-label
  4135. # - entity: sensor.date_string
  4136. # hold_action:
  4137. # action: none
  4138. # style:
  4139. # color: 'rgba(255, 255, 255, 0.3)'
  4140. # font-size: 1.3vw
  4141. # font-weight: 300
  4142. # left: 18.1%
  4143. # letter-spacing: '-0.05vw'
  4144. # text-align: left
  4145. # top: 17%
  4146. # width: 30%
  4147. # tap_action:
  4148. # action: none
  4149. # type: state-label
  4150.  
  4151.  
  4152. ######################### MENU BUTTONS #########################
  4153.  
  4154.  
  4155. - action: none
  4156. image: /local/ui/sidebar/lights_off.png
  4157. style:
  4158. left: 11.7%
  4159. top: 26%
  4160. width: 20.5078125%
  4161. tap_action:
  4162. action: navigate
  4163. navigation_path: /lovelace/lights
  4164. type: image
  4165. - action: none
  4166. image: /local/ui/sidebar/cameras_off.png
  4167. style:
  4168. left: 11.7%
  4169. top: 34%
  4170. width: 20.5078125%
  4171. tap_action:
  4172. action: navigate
  4173. navigation_path: /lovelace/2
  4174. type: image
  4175. - action: none
  4176. image: /local/ui/sidebar/climate_off.png
  4177. style:
  4178. left: 11.7%
  4179. top: 42%
  4180. width: 20.5078125%
  4181. tap_action:
  4182. action: navigate
  4183. navigation_path: /lovelace/3
  4184. type: image
  4185. - action: none
  4186. image: /local/ui/sidebar/cleanUp_on.png
  4187. style:
  4188. left: 11.7%
  4189. top: 50%
  4190. width: 20.5078125%
  4191. tap_action:
  4192. action: navigate
  4193. navigation_path: /lovelace/4
  4194. type: image
  4195. - type: image
  4196. action: none
  4197. image: /local/ui/sidebar/1down.gif
  4198. style:
  4199. left: 11.7%
  4200. top: 56.5%
  4201. width: 5%
  4202. tap_action:
  4203. action: navigate
  4204. navigation_path: /lovelace/5
  4205.  
  4206.  
  4207. ## Overlay Shadow Images ##
  4208. # - action: none
  4209. # image: /local/ui/sidebar/sideShadow.png
  4210. # style:
  4211. # height: 35%
  4212. # left: 18.45%
  4213. # pointer-events: none
  4214. # top: 83%
  4215. # width: 10%
  4216. # type: image
  4217. # - action: none
  4218. # image: /local/ui/sidebar/sidebarInnerShadow.png
  4219. # style:
  4220. # left: 22.83%
  4221. # opacity: 0.7
  4222. # pointer-events: none
  4223. # top: 50%
  4224. # width: 1.2109375%
  4225. # type: image
  4226.  
  4227.  
  4228.  
  4229.  
  4230.  
  4231. #############################################################################################################################################
  4232. # #
  4233. # WORKOUT #
  4234. # #
  4235. #############################################################################################################################################
  4236.  
  4237.  
  4238.  
  4239.  
  4240.  
  4241.  
  4242. - title: Workout
  4243. icon: 'mdi:weight-lifter'
  4244. panel: true
  4245. cards:
  4246. - type: picture-elements
  4247. image: /local/ui/floorplan/livingroom.png
  4248. style: |
  4249. ha-card {
  4250. background: rgba(42, 46, 48, 1)
  4251. }
  4252. elements:
  4253.  
  4254.  
  4255.  
  4256.  
  4257. #################################################################
  4258. # #
  4259. # Homekit Styled Card: #
  4260. # https://github.com/DBuit/Homekit-panel-card #
  4261. # #
  4262. #################################################################
  4263.  
  4264.  
  4265. - enableColumns: true
  4266. popup:
  4267. brightnessHeight: 350px
  4268. brightnessWidth: 130px
  4269. scenesInARow: 2
  4270. switchHeight: 300px
  4271. switchWidth: 110px
  4272. type: 'custom:light-popup-card'
  4273. rows:
  4274. - row: 1
  4275. columns:
  4276. - column: 1
  4277. entities:
  4278. - entities:
  4279. - entity: input_boolean.living_motion
  4280. icon: 'mdi:motion-sensor'
  4281. name: Living Room Motion
  4282. - entity: light.living
  4283. title: Lights
  4284. tileOnRow: 2
  4285. - column: 2
  4286. entities:
  4287. - entities:
  4288. - entity: input_boolean.workout
  4289. name: Fun Workout
  4290. icon: 'mdi:music'
  4291. - entity: input_boolean.bike_workout
  4292. name: Fun Bike Workout
  4293. icon: 'mdi:music'
  4294. - entity: input_boolean.bike_study
  4295. name: Normal Bike Workout
  4296. icon: 'mdi:bike'
  4297.  
  4298. title: Workout
  4299. tileOnRow: 2
  4300.  
  4301. statePositionTop: true
  4302. horizontalScroll: true
  4303. style:
  4304. height: 95%
  4305. left: 62%
  4306. top: 50%
  4307. width: 80%
  4308. type: 'custom:homekit-card'
  4309.  
  4310.  
  4311.  
  4312.  
  4313.  
  4314. ### SIDE BAR ####
  4315.  
  4316. - action: none
  4317. hold_action:
  4318. action: none
  4319. image: /local/ui/sidebar/sidebarBG2.png
  4320. style:
  4321. height: 100%
  4322. left: 11.73828125%
  4323. top: 50%
  4324. width: 23.4765625%
  4325. tap_action:
  4326. action: none
  4327. type: image
  4328.  
  4329. ## Time and Date ##
  4330.  
  4331. - entity: sensor.normaltime
  4332. hold_action:
  4333. action: none
  4334. style:
  4335. color: 'rgba(255, 255, 255, 0.9)'
  4336. font-size: 5vw
  4337. font-weight: 200
  4338. left: 2%
  4339. letter-spacing: '-0.05vw'
  4340. max-width: 1px
  4341. top: 10%
  4342. tap_action:
  4343. action: none
  4344. type: state-label
  4345. - entity: sensor.date_string
  4346. hold_action:
  4347. action: none
  4348. style:
  4349. color: 'rgba(255, 255, 255, 0.6)'
  4350. font-size: 1.3vw
  4351. font-weight: 300
  4352. left: 18.1%
  4353. letter-spacing: '-0.05vw'
  4354. text-align: left
  4355. top: 17%
  4356. width: 30%
  4357. tap_action:
  4358. action: none
  4359. type: state-label
  4360.  
  4361. ## Menu Buttons ##
  4362.  
  4363.  
  4364. - action: none
  4365. image: /local/ui/sidebar/1up.gif
  4366. style:
  4367. left: 11.7%
  4368. top: 26%
  4369. width: 10%
  4370. tap_action:
  4371. action: navigate
  4372. navigation_path: /lovelace/4
  4373. type: image
  4374. - action: none
  4375. image: /local/ui/sidebar/workout_on.png
  4376. style:
  4377. left: 11.7%
  4378. top: 34%
  4379. width: 20.5078125%
  4380. tap_action:
  4381. action: navigate
  4382. navigation_path: /lovelace/5
  4383. type: image
  4384. - action: none
  4385. image: /local/ui/sidebar/media_off.png
  4386. style:
  4387. left: 11.7%
  4388. top: 42%
  4389. width: 20.5078125%
  4390. tap_action:
  4391. action: navigate
  4392. navigation_path: /lovelace/6
  4393. type: image
  4394. - action: none
  4395. image: /local/ui/sidebar/all_off.png
  4396. style:
  4397. left: 11.7%
  4398. top: 50%
  4399. width: 20.5078125%
  4400. tap_action:
  4401. action: navigate
  4402. navigation_path: /lovelace/7
  4403. type: image
  4404.  
  4405.  
  4406.  
  4407. #### People Home ####
  4408.  
  4409. - style:
  4410. color: white
  4411. font-size: 1vw
  4412. font-weight: 300
  4413. left: 8.8%
  4414. opacity: 0
  4415. top: 66%
  4416. width: 10%
  4417. text: 'People at home:'
  4418. type: 'custom:text-element'
  4419.  
  4420. - action: none
  4421. entity: person.sean
  4422. state_image:
  4423. home: /local/people/seann.png
  4424. not_home: /local/people/seannGone.png
  4425. style:
  4426. background-color: 'rgba(255, 255, 255, 0.0)'
  4427. border-radius: 10vw
  4428. height: 7vw
  4429. left: 5.8%
  4430. top: 72%
  4431. width: 7vw
  4432. tap_action: none
  4433. type: image
  4434.  
  4435. - action: none
  4436. entity: person.roommate
  4437. state_image:
  4438. home: /local/people/roommate.png
  4439. not_home: /local/people/roommateGone.png
  4440. style:
  4441. background-color: 'rgba(255, 255, 255, 0.0)'
  4442. border-radius: 10vw
  4443. height: 7vw
  4444. left: 16%
  4445. top: 72%
  4446. width: 7vw
  4447. tap_action: none
  4448. type: image
  4449.  
  4450. - action: none
  4451. entity: person.percy
  4452. state_image:
  4453. home: /local/people/percyy.png
  4454. not_home: /local/people/percyyGone.png
  4455. style:
  4456. background-color: 'rgba(255, 255, 255, 0.0)'
  4457. border-radius: 10vw
  4458. height: 7vw
  4459. left: 5.8%
  4460. top: 90%
  4461. width: 7vw
  4462. tap_action: none
  4463. type: image
  4464.  
  4465.  
  4466.  
  4467.  
  4468.  
  4469.  
  4470. #############################################################################################################################################
  4471. # #
  4472. # Media #
  4473. # #
  4474. #############################################################################################################################################
  4475.  
  4476.  
  4477.  
  4478.  
  4479.  
  4480.  
  4481. - title: Media
  4482. icon: 'mdi:play-circle'
  4483. panel: true
  4484. cards:
  4485. - type: picture-elements
  4486. image: /local/ui/floorplan/livingroom.png
  4487. style: |
  4488. ha-card {
  4489. background: rgba(42, 46, 48, 1)
  4490. }
  4491. elements:
  4492.  
  4493. ###########################################################################
  4494. # #
  4495. # IF PLEX NOT PLAYING, SHOW SPOTIFY: #
  4496. # #
  4497. ###########################################################################
  4498.  
  4499. # Mini Media Player Card:
  4500. # https://github.com/kalkih/mini-media-player
  4501.  
  4502. - conditions:
  4503. - entity: sensor.living_room_tv_source
  4504. state_not: Plex
  4505.  
  4506. elements:
  4507. - artwork: full-cover
  4508. entity: media_player.spotify_sean
  4509. hide:
  4510. power: true
  4511. progress: false
  4512. runtime: false
  4513. volume: true
  4514. style: |
  4515. :host {
  4516. left: 46% !important;
  4517. top: 39.8% !important;
  4518. width: 33% !important;
  4519. height: 62.3% !important;
  4520. }
  4521. ha-card{
  4522. border-radius: 1vw !important;
  4523. overflow: hidden !important;
  4524. height: 100%;
  4525. }
  4526. :host #primaryProgress{
  4527. background: #474A52 !important;
  4528. }
  4529.  
  4530. type: 'custom:mini-media-player'
  4531. type: conditional
  4532.  
  4533. # Spotify Playlists Card:
  4534. # https://github.com/dnguyen800/spotify-playlist-card
  4535. # I like this one that uses a sensor, as you dont need to keep activating it
  4536. - type: conditional
  4537. conditions:
  4538. - entity: sensor.living_room_tv_source
  4539. state_not: Plex
  4540. elements:
  4541. - type: 'custom:spotify-card'
  4542. client_id: aa12a9aa6ed94f729691813ecb7f2d63
  4543. limit: 8
  4544. random_song: true
  4545. style:
  4546. left: 79.5%
  4547. top: 39.8%
  4548. width: 31%
  4549. height: 62.3%
  4550.  
  4551.  
  4552.  
  4553. ###########################################################################
  4554. # #
  4555. # IF PLEX IS SELECTED, SHOW PLEX & RECENTLY ADDED: #
  4556. # #
  4557. ###########################################################################
  4558.  
  4559. # Mini Media Player Card:
  4560. # https://github.com/kalkih/mini-media-player
  4561.  
  4562. - conditions:
  4563. - entity: sensor.living_room_tv_source
  4564. state: Plex
  4565. - entity: media_player.spotify_sean
  4566. state_not: playing
  4567. elements:
  4568. - artwork: cover
  4569. entity: media_player.plex_plex_for_vizio_living_room_tv
  4570. hide:
  4571. icon: true
  4572. mute: false
  4573. power: true
  4574. power_state: true
  4575. info: short
  4576. style: |
  4577. :host {
  4578. border-radius: 1vw;
  4579. overflow: hidden;
  4580. height: 300px;
  4581. box-shadow: none !important;
  4582. left: 50% !important;
  4583. top: 43% !important;
  4584. width: 42.3% !important;
  4585. height: 66%
  4586. }
  4587. ha-card {
  4588. border-radius: 1vw;
  4589. height: 100%;
  4590. overflow: hidden !important;
  4591. box-shadow: none !important;
  4592. }
  4593. type: 'custom:mini-media-player'
  4594. type: conditional
  4595.  
  4596.  
  4597. # Upcoming Media Card:
  4598. # https://github.com/custom-cards/upcoming-media-card
  4599.  
  4600. # Enabled by, Plex Recently Added Sensor:
  4601. # https://github.com/custom-components/sensor.plex_recently_added
  4602.  
  4603. - conditions:
  4604. - entity: sensor.living_room_tv_source
  4605. state: Plex
  4606. - entity: media_player.spotify_sean
  4607. state_not: playing
  4608. elements:
  4609. - entity: sensor.recently_added_tv
  4610. style:
  4611. left: 84%
  4612. top: 25%
  4613. width: 18%
  4614. title: Recently Added Tv
  4615. type: 'custom:upcoming-media-card'
  4616. type: conditional
  4617. - conditions:
  4618. - entity: sensor.living_room_tv_source
  4619. state: Plex
  4620. - entity: media_player.spotify_sean
  4621. state_not: playing
  4622. elements:
  4623. - entity: sensor.recently_added_movies
  4624. style:
  4625. left: 84%
  4626. top: 59.5%
  4627. width: 18%
  4628. title: Recently Added Movies
  4629. type: 'custom:upcoming-media-card'
  4630. type: conditional
  4631.  
  4632.  
  4633. ### SIDE BAR ####
  4634.  
  4635. - action: none
  4636. hold_action:
  4637. action: none
  4638. image: /local/ui/sidebar/sidebarBG2.png
  4639. style:
  4640. height: 100%
  4641. left: 11.73828125%
  4642. top: 50%
  4643. width: 23.4765625%
  4644. tap_action:
  4645. action: none
  4646. type: image
  4647.  
  4648. ## Time and Date ##
  4649.  
  4650. - entity: sensor.normaltime
  4651. hold_action:
  4652. action: none
  4653. style:
  4654. color: 'rgba(255, 255, 255, 0.9)'
  4655. font-size: 5vw
  4656. font-weight: 200
  4657. left: 2%
  4658. letter-spacing: '-0.05vw'
  4659. max-width: 1px
  4660. top: 10%
  4661. tap_action:
  4662. action: none
  4663. type: state-label
  4664. - entity: sensor.date_string
  4665. hold_action:
  4666. action: none
  4667. style:
  4668. color: 'rgba(255, 255, 255, 0.6)'
  4669. font-size: 1.3vw
  4670. font-weight: 300
  4671. left: 18.1%
  4672. letter-spacing: '-0.05vw'
  4673. text-align: left
  4674. top: 17%
  4675. width: 30%
  4676. tap_action:
  4677. action: none
  4678. type: state-label
  4679.  
  4680. ## Menu Buttons ##
  4681.  
  4682. - action: none
  4683. image: /local/ui/sidebar/1up.gif
  4684. style:
  4685. left: 11.7%
  4686. top: 26%
  4687. width: 10%
  4688. tap_action:
  4689. action: navigate
  4690. navigation_path: /lovelace/4
  4691. type: image
  4692. - action: none
  4693. image: /local/ui/sidebar/workout_off.png
  4694. style:
  4695. left: 11.7%
  4696. top: 34%
  4697. width: 20.5078125%
  4698. tap_action:
  4699. action: navigate
  4700. navigation_path: /lovelace/5
  4701. type: image
  4702. - action: none
  4703. image: /local/ui/sidebar/media_on.png
  4704. style:
  4705. left: 11.7%
  4706. top: 42%
  4707. width: 20.5078125%
  4708. tap_action:
  4709. action: navigate
  4710. navigation_path: /lovelace/6
  4711. type: image
  4712. - action: none
  4713. image: /local/ui/sidebar/all_off.png
  4714. style:
  4715. left: 11.7%
  4716. top: 50%
  4717. width: 20.5078125%
  4718. tap_action:
  4719. action: navigate
  4720. navigation_path: /lovelace/7
  4721. type: image
  4722.  
  4723.  
  4724. #### People Home ####
  4725.  
  4726. - style:
  4727. color: white
  4728. font-size: 1vw
  4729. font-weight: 300
  4730. left: 8.8%
  4731. opacity: 0
  4732. top: 66%
  4733. width: 10%
  4734. text: 'People at home:'
  4735. type: 'custom:text-element'
  4736.  
  4737. - action: none
  4738. entity: person.sean
  4739. state_image:
  4740. home: /local/people/seann.png
  4741. not_home: /local/people/seannGone.png
  4742. style:
  4743. background-color: 'rgba(255, 255, 255, 0.0)'
  4744. border-radius: 10vw
  4745. height: 7vw
  4746. left: 5.8%
  4747. top: 72%
  4748. width: 7vw
  4749. tap_action: none
  4750. type: image
  4751.  
  4752. - action: none
  4753. entity: person.roommate
  4754. state_image:
  4755. home: /local/people/roommate.png
  4756. not_home: /local/people/roommateGone.png
  4757. style:
  4758. background-color: 'rgba(255, 255, 255, 0.0)'
  4759. border-radius: 10vw
  4760. height: 7vw
  4761. left: 16%
  4762. top: 72%
  4763. width: 7vw
  4764. tap_action: none
  4765. type: image
  4766.  
  4767. - action: none
  4768. entity: person.percy
  4769. state_image:
  4770. home: /local/people/percyy.png
  4771. not_home: /local/people/percyyGone.png
  4772. style:
  4773. background-color: 'rgba(255, 255, 255, 0.0)'
  4774. border-radius: 10vw
  4775. height: 7vw
  4776. left: 5.8%
  4777. top: 90%
  4778. width: 7vw
  4779. tap_action: none
  4780. type: image
  4781.  
  4782.  
  4783.  
  4784.  
  4785.  
  4786. #############################################################################################################################################
  4787. # #
  4788. # All Devices (Entities) Homekit Style View #
  4789. # #
  4790. #############################################################################################################################################
  4791.  
  4792. - title: Tasks
  4793. icon: 'mdi:home'
  4794. panel: true
  4795. cards:
  4796. - type: picture-elements
  4797. image: /local/ui/floorplan/blurredFloorplan.png
  4798. style: |
  4799. ha-card {
  4800. background: rgba(42, 46, 48, 1)
  4801. }
  4802. elements:
  4803.  
  4804. #################################################################
  4805. # #
  4806. # Homekit Styled Card: #
  4807. # https://github.com/DBuit/Homekit-panel-card #
  4808. # #
  4809. #################################################################
  4810.  
  4811. - type: 'custom:homekit-card'
  4812. statePositionTop: true
  4813. horizontalScroll: true
  4814. style:
  4815. height: 95%
  4816. left: 62%
  4817. top: 50%
  4818. width: 80%
  4819. tile-width: 100px
  4820. tile-height: 100px
  4821. tile-width-mobile: 90px
  4822. tile-height-mobile: 90px
  4823. enableColumns: true
  4824. popup:
  4825. brightnessHeight: 350px
  4826. brightnessWidth: 130px
  4827. scenesInARow: 2
  4828. switchHeight: 300px
  4829. switchWidth: 110px
  4830. type: 'custom:light-popup-card'
  4831. rows:
  4832. - row: 1
  4833. columns:
  4834. - column: 1
  4835. entities:
  4836. - entities:
  4837. - entity: input_boolean.natural_lighting
  4838. icon: 'mdi:theme-light-dark'
  4839. name: Daytime Lights
  4840. - entity: input_boolean.evening_lights
  4841. - entity: input_boolean.sleep_lights
  4842. icon: 'mdi:sleep'
  4843. title: Lights
  4844. tileOnRow: 2
  4845. - column: 2
  4846. entities:
  4847. - entities:
  4848. - entity: input_boolean.kitchen_motion
  4849. - entity: input_boolean.living_motion
  4850. - entity: input_boolean.bathroom_motion
  4851. - entity: input_boolean.office_motion
  4852. title: Motion Sensors
  4853. tileOnRow: 2
  4854.  
  4855.  
  4856.  
  4857.  
  4858.  
  4859.  
  4860.  
  4861.  
  4862.  
  4863. #################################################################
  4864. # #
  4865. # SIDEBAR : ALL DEVICES #
  4866. # #
  4867. #################################################################
  4868.  
  4869. ######################### BACKGROUND #########################
  4870.  
  4871. - action: none
  4872. hold_action:
  4873. action: none
  4874. image: /local/ui/sidebar/sidebarBG2.png
  4875. style:
  4876. height: 100%
  4877. left: 11.73828125%
  4878. top: 50%
  4879. width: 23.4765625%
  4880. tap_action:
  4881. action: none
  4882. type: image
  4883.  
  4884. ######################### TIME & DATE #########################
  4885.  
  4886. - entity: sensor.normaltime
  4887. hold_action:
  4888. action: none
  4889. style:
  4890. color: 'rgba(255, 255, 255, 0.9)'
  4891. font-size: 5vw
  4892. font-weight: 200
  4893. left: 2%
  4894. letter-spacing: '-0.05vw'
  4895. max-width: 1px
  4896. top: 10%
  4897. tap_action:
  4898. action: none
  4899. type: state-label
  4900. - entity: sensor.date_string
  4901. hold_action:
  4902. action: none
  4903. style:
  4904. color: 'rgba(255, 255, 255, 0.6)'
  4905. font-size: 1.3vw
  4906. font-weight: 300
  4907. left: 18.1%
  4908. letter-spacing: '-0.05vw'
  4909. text-align: left
  4910. top: 17%
  4911. width: 30%
  4912. tap_action:
  4913. action: none
  4914. type: state-label
  4915.  
  4916. ################### MENU BUTTONS ##############################
  4917.  
  4918.  
  4919. - action: none
  4920. image: /local/ui/sidebar/1up.gif
  4921. style:
  4922. left: 11.7%
  4923. top: 26%
  4924. width: 10%
  4925. tap_action:
  4926. action: navigate
  4927. navigation_path: /lovelace/4
  4928. type: image
  4929. - action: none
  4930. image: /local/ui/sidebar/workout_off.png
  4931. style:
  4932. left: 11.7%
  4933. top: 34%
  4934. width: 20.5078125%
  4935. tap_action:
  4936. action: navigate
  4937. navigation_path: /lovelace/5
  4938. type: image
  4939. - action: none
  4940. image: /local/ui/sidebar/media_off.png
  4941. style:
  4942. left: 11.7%
  4943. top: 42%
  4944. width: 20.5078125%
  4945. tap_action:
  4946. action: navigate
  4947. navigation_path: /lovelace/6
  4948. type: image
  4949. - action: none
  4950. image: /local/ui/sidebar/all_on.png
  4951. style:
  4952. left: 11.7%
  4953. top: 50%
  4954. width: 20.5078125%
  4955. tap_action:
  4956. action: navigate
  4957. navigation_path: /lovelace/7
  4958. type: image
  4959.  
  4960.  
  4961. #### People Home ####
  4962.  
  4963. - style:
  4964. color: white
  4965. font-size: 1vw
  4966. font-weight: 300
  4967. left: 8.8%
  4968. opacity: 0
  4969. top: 66%
  4970. width: 10%
  4971. text: 'People at home:'
  4972. type: 'custom:text-element'
  4973.  
  4974. - action: none
  4975. entity: person.sean
  4976. state_image:
  4977. home: /local/people/seann.png
  4978. not_home: /local/people/seannGone.png
  4979. style:
  4980. background-color: 'rgba(255, 255, 255, 0.0)'
  4981. border-radius: 10vw
  4982. height: 7vw
  4983. left: 5.8%
  4984. top: 72%
  4985. width: 7vw
  4986. tap_action: none
  4987. type: image
  4988.  
  4989. - action: none
  4990. entity: person.roommate
  4991. state_image:
  4992. home: /local/people/roommate.png
  4993. not_home: /local/people/roommateGone.png
  4994. style:
  4995. background-color: 'rgba(255, 255, 255, 0.0)'
  4996. border-radius: 10vw
  4997. height: 7vw
  4998. left: 16%
  4999. top: 72%
  5000. width: 7vw
  5001. tap_action: none
  5002. type: image
  5003.  
  5004. - action: none
  5005. entity: person.percy
  5006. state_image:
  5007. home: /local/people/percyy.png
  5008. not_home: /local/people/percyyGone.png
  5009. style:
  5010. background-color: 'rgba(255, 255, 255, 0.0)'
  5011. border-radius: 10vw
  5012. height: 7vw
  5013. left: 5.8%
  5014. top: 90%
  5015. width: 7vw
  5016. tap_action: none
  5017. type: image
  5018.  
  5019.  
  5020.  
  5021.  
  5022.  
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!