API tools faq
paste
Suneman

Nest Hub Front 3.0

Suneman
Jan 20th, 2023
317
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.47 KB | None | 0 0
raw download clone embed print report
  1. type: vertical-stack
  2. cards:
  3. - type: custom:button-card
  4. styles:
  5. grid:
  6. - grid-template-areas: '"weather ute stue kjeller kaffe vvb mode automode"'
  7. - grid-template-columns: 110px 180px 180px 180px 90px 90px 90px 90px
  8. card:
  9. - padding: 10px
  10. - height: 92px
  11. - background-color: '#262626'
  12. - width: 1025px
  13. custom_fields:
  14. weather:
  15. card:
  16. type: custom:button-card
  17. show_entity_picture: true
  18. size: 100%
  19. styles:
  20. card:
  21. - height: 100px
  22. - top: '-1.88em'
  23. entity_picture: |
  24. [[[
  25. var weatherIconsDay = {
  26. clear: "day",
  27. "clear-night": "night",
  28. cloudy: "cloudy",
  29. fog: "cloudy",
  30. hail: "rainy-7",
  31. lightning: "thunder",
  32. "lightning-rainy": "thunder",
  33. partlycloudy: "cloudy-day-3",
  34. pouring: "rainy-6",
  35. rainy: "rainy-5",
  36. snowy: "snowy-6",
  37. "snowy-rainy": "rainy-7",
  38. sunny: "day",
  39. windy: "cloudy",
  40. "windy-variant": "cloudy-day-3",
  41. exceptional: "!!",
  42. };
  43.  
  44. var weatherIconsNight = {
  45. ...weatherIconsDay,
  46. clear: "night",
  47. sunny: "night",
  48. partlycloudy: "cloudy-night-3",
  49. "windy-variant": "cloudy-night-3",
  50. };
  51. var weather = states["weather.home"].state;
  52. var sun = states["sun.sun"].state;
  53. if (sun == 'below_horizon') {
  54. var icon = weatherIconsNight[weather];
  55. return "https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/icons/" + icon + ".svg";
  56. }
  57. else {
  58. var icon = weatherIconsDay[weather];
  59. return "https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/icons/" + icon + ".svg";
  60. }
  61. ]]]
  62. tap_action:
  63. action: navigate
  64. navigation_path: /google-nest/var
  65. automode:
  66. card:
  67. type: custom:button-card
  68. entity: input_boolean.automation_house
  69. icon: mdi:solar-power
  70. size: 40%
  71. name: Auto
  72. tap_action:
  73. action: toggle
  74. styles:
  75. card:
  76. - top: '-1.8em'
  77. - height: 80px
  78. - width: 80px
  79. - box-shadow: 0px 0px 10px 0px
  80. - border-radius: 40px
  81. - padding: 15px 15px
  82. name:
  83. - font-size: 20px
  84. color_type: card
  85. color: green
  86. ute:
  87. card:
  88. type: custom:button-card
  89. entity: sensor.temperature_ute_veranda
  90. show_state: true
  91. icon: mdi:thermometer
  92. name: Ute
  93. show_units: true
  94. show_icon: false
  95. styles:
  96. card:
  97. - font-size: 50px
  98. - top: '-0.8em'
  99. name:
  100. - font-size: 30px
  101. color_type: icon
  102. color: grey
  103. tap_action:
  104. action: navigate
  105. navigation_path: /google-nest/temperatur
  106. stue:
  107. card:
  108. type: custom:button-card
  109. entity: sensor.temperature_spisestue
  110. show_state: true
  111. icon: mdi:thermometer
  112. name: Stue
  113. show_units: true
  114. show_icon: false
  115. styles:
  116. card:
  117. - font-size: 50px
  118. - top: '-0.8em'
  119. name:
  120. - font-size: 30px
  121. color_type: icon
  122. color: grey
  123. tap_action:
  124. action: navigate
  125. navigation_path: /google-nest/temperatur
  126. kjeller:
  127. card:
  128. type: custom:button-card
  129. entity: sensor.temperature_hall_1etg
  130. show_state: true
  131. icon: mdi:thermometer
  132. name: Kjeller
  133. show_units: true
  134. show_icon: false
  135. styles:
  136. card:
  137. - font-size: 50px
  138. - top: '-0.8em'
  139. name:
  140. - font-size: 30px
  141. color_type: icon
  142. color: grey
  143. tap_action:
  144. action: navigate
  145. navigation_path: /google-nest/temperatur
  146. post:
  147. card:
  148. type: custom:button-card
  149. entity: sensor.post_levering
  150. show_state: true
  151. icon: mdi:mail
  152. name: Post
  153. show_units: true
  154. show_icon: false
  155. styles:
  156. card:
  157. - height: 70px
  158. - font-size: 25px
  159. - top: '-1.7em'
  160. name:
  161. - font-size: 20px
  162. - color: grey
  163. color_type: icon
  164. color: grey
  165. mode:
  166. card:
  167. type: custom:button-card
  168. size: 40%
  169. entity: input_select.house_mode
  170. tap_action:
  171. action: call-service
  172. service: input_select.select_next
  173. service_data:
  174. entity_id: input_select.house_mode
  175. color_type: card
  176. show_name: false
  177. show_state: true
  178. color: '#1C1C1C'
  179. styles:
  180. card:
  181. - top: '-1.8em'
  182. - height: 80px
  183. - width: 80px
  184. - box-shadow: 0px 0px 10px 0px
  185. - border-radius: 40px
  186. - padding: 15px 15px
  187. name:
  188. - font-size: 20px
  189. state:
  190. - value: Av
  191. color: grey
  192. icon: mdi:radiator-off
  193. - value: Eco
  194. color: yellow
  195. icon: hass:weather-night
  196. - value: Comfy
  197. color: green
  198. icon: hass:white-balance-sunny
  199. - value: Boost
  200. color: red
  201. icon: hass:heat-wave
  202. vvb:
  203. card:
  204. type: custom:button-card
  205. size: 40%
  206. styles:
  207. card:
  208. - top: '-1.8em'
  209. - height: 80px
  210. - width: 80px
  211. - animation: >
  212. [[[ if (states['input_boolean.vvb_kjorer'].state == 'on' )
  213. return 'blink 4s ease infinite'; ]]]
  214. - box-shadow: 0px 0px 10px 0px
  215. - border-radius: 40px
  216. - padding: 15px 15px
  217. name:
  218. - font-size: 20px
  219. icon: hass:water-boiler
  220. entity: switch.varmtvannsbereder
  221. name: VVB
  222. show_name: true
  223. color_type: card
  224. color: green
  225. kaffe:
  226. card:
  227. type: custom:button-card
  228. size: 40%
  229. styles:
  230. card:
  231. - top: '-1.8em'
  232. - height: 80px
  233. - width: 80px
  234. - animation: >
  235. [[[ if (states['input_boolean.kaffemaskin_kjorer'].state ==
  236. 'on' ) return 'blink 4s ease infinite'; ]]]
  237. - box-shadow: 0px 0px 10px 0px
  238. - border-radius: 40px
  239. - padding: 15px 15px
  240. name:
  241. - font-size: 20px
  242. icon: hass:coffee
  243. entity: switch.kaffemaskin
  244. name: Kaffe
  245. show_name: true
  246. color_type: card
  247. color: green
  248. - type: custom:button-card
  249. styles:
  250. grid:
  251. - grid-template-areas: '"calendar info"'
  252. - grid-template-columns: 370px 1fr
  253. card:
  254. - padding: 0px
  255. - background-color: black
  256. - width: 1025px
  257. - height: 430px
  258. custom_fields:
  259. info:
  260. card:
  261. type: vertical-stack
  262. cards:
  263. - type: custom:button-card
  264. styles:
  265. card:
  266. - font-size: 150px
  267. - padding: 0px
  268. - height: 130px
  269. entity: sensor.time
  270. show_icon: false
  271. show_state: true
  272. show_name: false
  273. - type: grid
  274. cards:
  275. - type: gauge
  276. entity: sensor.power_production_now
  277. max: 5000
  278. name: Lages
  279. min: 0
  280. severity:
  281. green: 1
  282. yellow: 0
  283. red: 0
  284. style: |
  285. div.name {
  286. font-size: 30px;
  287. }
  288. ha-card.type-gauge {
  289. padding: 1x;
  290. }
  291. - type: gauge
  292. entity: sensor.power_ovre_masan_26
  293. min: 0
  294. max: 20000
  295. name: Kjøpes
  296. severity:
  297. green: 1
  298. yellow: 10000
  299. red: 12500
  300. style: |
  301. div.name {
  302. font-size: 20px;
  303. }
  304. ha-card.type-gauge {
  305. padding: 1px;
  306. }
  307. - type: gauge
  308. entity: sensor.oppvarming_power_rounded
  309. min: 0
  310. max: 8410
  311. name: Oppvarming
  312. severity:
  313. green: 1
  314. yellow: 0
  315. red: 0
  316. style: |
  317. div.name {
  318. font-size: 20px;
  319. }
  320. ha-card.type-gauge {
  321. padding: 1px;
  322. }
  323. - type: gauge
  324. entity: sensor.power_production_ovre_masan_26
  325. min: 0
  326. max: 5400
  327. name: Selges
  328. style: |
  329. div.name {
  330. font-size: 20px;
  331. }
  332. ha-card.type-gauge {
  333. padding: 1px;
  334. }
  335. columns: 4
  336. square: false
  337. - type: grid
  338. cards:
  339. - type: custom:button-card
  340. size: 30%
  341. entity: input_boolean.oppvaskmaskin_kjorer
  342. name: Oppvask
  343. show_name: true
  344. show_icon: false
  345. color_type: card
  346. state:
  347. - value: 'on'
  348. color: green
  349. styles:
  350. card:
  351. - animation: blink 3s ease infinite
  352. tap_action:
  353. action: none
  354. styles:
  355. card:
  356. - border-radius: 200px
  357. - height: 30px
  358. - type: custom:button-card
  359. size: 30%
  360. entity: input_boolean.vaskemaskin_kjorer
  361. name: Klesvask
  362. show_name: true
  363. show_icon: false
  364. color_type: card
  365. state:
  366. - value: 'on'
  367. color: green
  368. styles:
  369. card:
  370. - animation: blink 3s ease infinite
  371. tap_action:
  372. action: none
  373. styles:
  374. card:
  375. - border-radius: 200px
  376. - height: 30px
  377. - type: custom:button-card
  378. size: 30%
  379. entity: input_boolean.torketrommel_kjorer
  380. name: Tørketrommel
  381. show_name: true
  382. show_icon: false
  383. color_type: card
  384. state:
  385. - value: 'on'
  386. color: green
  387. styles:
  388. card:
  389. - animation: blink 3s ease infinite
  390. tap_action:
  391. action: none
  392. styles:
  393. card:
  394. - border-radius: 200px
  395. - height: 30px
  396. square: false
  397. columns: 3
  398. - type: grid
  399. cards:
  400. - type: custom:button-card
  401. color_type: icon
  402. styles:
  403. card:
  404. - height: 70px
  405. - box-shadow: 0px 0px 10px 1px
  406. - border-radius: 40px
  407. - width: 140px
  408. - padding: 15px 15px
  409. - background-color: '#3D3D3D'
  410. name:
  411. - font-size: 25px
  412. tap_action:
  413. action: navigate
  414. navigation_path: /google-nest/multi
  415. icon: mdi:information-outline
  416. show_icon: false
  417. name: Info
  418. - type: custom:button-card
  419. color_type: icon
  420. styles:
  421. card:
  422. - height: 70px
  423. - box-shadow: 0px 0px 10px 1px
  424. - border-radius: 40px
  425. - width: 140px
  426. - padding: 15px 15px
  427. - background-color: '#3D3D3D'
  428. name:
  429. - font-size: 25px
  430. tap_action:
  431. action: navigate
  432. navigation_path: /google-nest/sonos
  433. name: Sonos
  434. icon: mdi:music
  435. show_icon: false
  436. show_name: true
  437. - type: custom:button-card
  438. color_type: icon
  439. styles:
  440. card:
  441. - height: 70px
  442. - box-shadow: 0px 0px 10px 1px
  443. - border-radius: 40px
  444. - width: 140px
  445. - padding: 15px 15px
  446. - background-color: '#3D3D3D'
  447. name:
  448. - font-size: 25px
  449. tap_action:
  450. action: call-service
  451. service: nodered.trigger
  452. service_data:
  453. entity_id: switch.nyheter_kjokken
  454. name: Nyheter
  455. icon: mdi:music
  456. show_icon: false
  457. label: Kjøkken
  458. show_label: true
  459. - type: custom:button-card
  460. color_type: icon
  461. styles:
  462. card:
  463. - height: 70px
  464. - box-shadow: 0px 0px 10px 1px
  465. - border-radius: 40px
  466. - width: 140px
  467. - padding: 15px 15px
  468. - background-color: '#3D3D3D'
  469. name:
  470. - font-size: 25px
  471. tap_action:
  472. action: call-service
  473. service: button.press
  474. service_data:
  475. entity_id: button.stop_alle_sonos
  476. name: Stopp
  477. label: All Musikk
  478. icon: mdi:stop
  479. show_icon: false
  480. show_label: true
  481. columns: 4
  482. square: false
  483. calendar:
  484. card:
  485. type: custom:atomic-calendar-revive
  486. name: Kalender
  487. enableModeChange: true
  488. entities:
  489. - calendar.suneworld_gmail_com
  490. - calendar.natalie_narud_gmail_com
  491. firstDayOfWeek: 1
  492. refreshInterval: 60
  493. maxDaysToShow: 10
  494. sortByStartTime: true
  495. hideDuplicates: true
  496. hideFinishedEvents: false
  497. showWeekDay: true
  498. disableEventLink: true
  499. showNoEventsForToday: true
  500. showFullDayProgress: false
  501. showEventIcon: false
  502. showHiddenText: false
  503. showLastCalendarWeek: true
  504. disableCalEventLink: true
  505. disableCalLocationLink: true
  506. disableCalLink: true
  507. calShowDescription: false
  508. dimFinishedEvents: false
  509. showLocation: false
  510. showDate: true
  511. showProgressBar: false
  512. showRelativeTime: false
  513. cardHeight: 410px
  514. style: |
  515. .event-title {
  516. text-align: left;
  517. font-size: 23px
  518. }
  519. .event-titleRunning {
  520. text-align: left;
  521. font-size: 23px
  522. }
  523. div.hoursHTML, div.relativeTime {
  524. color: grey;
  525. font-size: 30px
  526. }
  527. div.calDate {
  528. font-size: 27px
  529. }
  530. - type: custom:button-card
  531. styles:
  532. grid:
  533. - grid-template-areas: >-
  534. "brukt produsert solgt pris kam_inne kam_terrasse kam_hushjorne
  535. kam_inngang alarm"
  536. - grid-template-columns: 180px 180px 180px 200px 50px 60px 55px 55px 55px
  537. card:
  538. - padding: 10px
  539. - height: 65px
  540. - background-color: '#262626'
  541. - width: 1025px
  542. custom_fields:
  543. brukt:
  544. card:
  545. type: custom:button-card
  546. show_state: true
  547. name: Brukt i dag/i går
  548. state_display: >
  549. [[[ return +
  550. Math.round(Number(states['sensor.used_object'].attributes.daily)) +
  551. ' / ' +
  552. Math.round(Number(states['sensor.used_object'].attributes.daily_last_period))
  553. + ' kWt']]]
  554. size: 35px
  555. styles:
  556. card:
  557. - background-color: '#262626'
  558. - font-size: 25px
  559. - top: '-0.6em'
  560. name:
  561. - font-size: 20px
  562. - color: '#989898'
  563. color_type: icon
  564. produsert:
  565. card:
  566. type: custom:button-card
  567. show_state: true
  568. name: Kostnad i dag/i går
  569. state_display: >
  570. [[[ return +
  571. Math.round(Number(states['sensor.cost_object'].attributes.daily)) +
  572. ' / ' +
  573. Math.round(Number(states['sensor.cost_object'].attributes.daily_last_period))
  574. + ' kr']]]
  575. size: 35px
  576. styles:
  577. card:
  578. - height: 70px
  579. - font-size: 25px
  580. - top: '-0.6em'
  581. - background-color: '#262626'
  582. name:
  583. - font-size: 20px
  584. - color: '#989898'
  585. color_type: icon
  586. solgt:
  587. card:
  588. type: custom:button-card
  589. show_state: true
  590. name: Solgt i dag/i går
  591. state_display: >
  592. [[[ return +
  593. Math.round(Number(states['sensor.sold_object'].attributes.daily)) +
  594. ' / ' +
  595. Math.round(Number(states['sensor.sold_object'].attributes.daily_last_period))
  596. + ' kWt']]]
  597. size: 35px
  598. styles:
  599. card:
  600. - height: 70px
  601. - font-size: 25px
  602. - top: '-0.6em'
  603. - background-color: '#262626'
  604. name:
  605. - font-size: 20px
  606. - color: '#989898'
  607. color_type: icon
  608. pris:
  609. card:
  610. type: custom:button-card
  611. show_state: true
  612. name: Pr time nå/Pr kWt
  613. state_display: |
  614. [[[ return +
  615. (states['sensor.cost_balance'].state)
  616. + '/ '+
  617. Math.round(Number(states['sensor.price_pr_kwh_including_nettleie_and_compensation'].state)*100)/100
  618. + ' kr']]]
  619. size: 35px
  620. styles:
  621. card:
  622. - height: 70px
  623. - font-size: 25px
  624. - top: '-0.6em'
  625. - background-color: '#262626'
  626. name:
  627. - font-size: 20px
  628. - color: '#989898'
  629. color_type: icon
  630. alarm:
  631. card:
  632. type: custom:button-card
  633. entity: alarm_control_panel.verisure_alarm
  634. show_name: true
  635. name: Alarm
  636. icon: mdi:security
  637. show_icon: true
  638. show_state: false
  639. color_type: icon
  640. state:
  641. - value: disarmed
  642. operator: '=='
  643. color: green
  644. size: 30px
  645. styles:
  646. card:
  647. - height: 50px
  648. - color: white
  649. - padding: 0%
  650. - top: '-1.0em'
  651. - font-size: 15px
  652. - background-color: '#262626'
  653. - operator: default
  654. color: red
  655. size: 20px
  656. styles:
  657. card:
  658. - height: 50px
  659. - color: white
  660. - padding: 0%
  661. - top: '-1.0em'
  662. - font-size: 15px
  663. - background-color: '#262626'
  664. kam_inne:
  665. card:
  666. type: custom:button-card
  667. entity: alarm_control_panel.aarlo_inne
  668. show_icon: true
  669. color_type: icon
  670. state:
  671. - value: armed_away
  672. operator: '=='
  673. color: red
  674. styles:
  675. card:
  676. - height: 50px
  677. - color: white
  678. - padding: 0%
  679. - top: '-1.0em'
  680. - font-size: 15px
  681. - background-color: '#262626'
  682. - operator: default
  683. color: green
  684. styles:
  685. card:
  686. - height: 50px
  687. - padding: 0%
  688. - background-color: '#262626'
  689. - top: '-1.0em'
  690. - font-size: 15px
  691. kam_terrasse:
  692. card:
  693. type: custom:button-card
  694. entity: alarm_control_panel.aarlo_terrasse
  695. show_icon: true
  696. color_type: icon
  697. state:
  698. - value: armed_away
  699. operator: '=='
  700. color: red
  701. styles:
  702. card:
  703. - height: 50px
  704. - color: white
  705. - padding: 0%
  706. - top: '-1.0em'
  707. - font-size: 15px
  708. - background-color: '#262626'
  709. - operator: default
  710. color: green
  711. styles:
  712. card:
  713. - height: 50px
  714. - padding: 0%
  715. - background-color: '#262626'
  716. - top: '-1.0em'
  717. - font-size: 15px
  718. kam_hushjorne:
  719. card:
  720. type: custom:button-card
  721. entity: alarm_control_panel.aarlo_hushjorne
  722. show_icon: true
  723. color_type: icon
  724. name: Hjørne
  725. state:
  726. - value: armed_away
  727. operator: '=='
  728. color: red
  729. styles:
  730. card:
  731. - height: 50px
  732. - color: white
  733. - padding: 0%
  734. - top: '-1.0em'
  735. - font-size: 15px
  736. - background-color: '#262626'
  737. - operator: default
  738. color: green
  739. styles:
  740. card:
  741. - height: 50px
  742. - padding: 0%
  743. - background-color: '#262626'
  744. - top: '-1.0em'
  745. - font-size: 15px
  746. kam_inngang:
  747. card:
  748. type: custom:button-card
  749. entity: alarm_control_panel.aarlo_inngangsdor
  750. show_icon: true
  751. name: Inngang
  752. color_type: icon
  753. state:
  754. - value: armed_away
  755. operator: '=='
  756. color: red
  757. styles:
  758. card:
  759. - height: 50px
  760. - color: white
  761. - padding: 0%
  762. - top: '-1.0em'
  763. - font-size: 15px
  764. - background-color: '#262626'
  765. - operator: default
  766. color: green
  767. styles:
  768. card:
  769. - height: 50px
  770. - padding: 0%
  771. - background-color: '#262626'
  772. - top: '-1.0em'
  773. - font-size: 15px
  774.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!