API tools faq
paste
Pivotonian

Vehicle

Pivotonian
Sep 23rd, 2025
68
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.05 KB | None | 0 0
raw download clone embed print report
  1. type: custom:button-card
  2. entity: device_tracker.santa_fe_location
  3. tap_action:
  4. action: perform-action
  5. perform_action: kia_uvo.force_update
  6. target: {}
  7. data:
  8. device_id: bf39ddc2095c08139fc88772fabdd20c
  9. icon: |
  10. [[[
  11. let st = states['device_tracker.santa_fe_location'].state;
  12. st = st ? st.trim().toLowerCase() : "";
  13. let icons = {
  14. "home": "mdi:home",
  15. "bunnings": "mdi:tools",
  16. "leisurelink": "mdi:pool",
  17. "gmhba stadium": "mdi:football-australian",
  18. "work": "mdi:office-building",
  19. "aldi": "mdi:cart",
  20. "town village coles": "mdi:cart",
  21. "waurn ponds shopping centre": "mdi:cart",
  22. "coles": "mdi:cart",
  23. "woolworths": "mdi:cart",
  24. "chambers": "mdi:scale-balance",
  25. "court": "mdi:scale-balance"
  26. };
  27. return icons[st] || "mdi:map-marker";
  28. ]]]
  29. styles:
  30. grid:
  31. - grid-template-areas: '"s" "stack"'
  32. grid-template-columns: auto
  33. grid-template-rows: auto
  34. align-content: start
  35. align-self: start
  36. justify-content: start
  37. justify-self: start
  38. icon:
  39. - width: 15px
  40. - color: rgba(255,255,255,0.3)
  41. - padding-top: 5px
  42. card:
  43. - height: 375px
  44. width: 302.5px
  45. padding: 10px 0px 20px 0px
  46. margin: 0px 0px 0px 0px
  47. align-content: start
  48. justify-content: start
  49. align-self: start
  50. background: transparent
  51. border-radius: 30px
  52. border: solid 2px transparent
  53. box-shadow: 10 10 10 2px transparent
  54. state:
  55. - justify-self: start
  56. align-self: start
  57. text-align: left
  58. color: rgba(255,255,255,0.5)
  59. font-size: 16px
  60. font-weight: 550
  61. padding: 5px 0px 0px 15px
  62. margin: 0px 0px -5px 0px
  63. show_state: true
  64. show_name: false
  65. show_icon: false
  66. custom_fields:
  67. stack:
  68. card:
  69. type: custom:button-card
  70. show_state: false
  71. show_name: true
  72. show_icon: false
  73. styles:
  74. grid:
  75. - grid-template-areas: '"image" "fuel" "divider" "status"'
  76. align-content: start
  77. align-self: start
  78. justify-content: start
  79. justify-self: start
  80. card:
  81. - background-color: transparent
  82. padding: 15px 15px 15px 15px
  83. margin: 0px
  84. border-radius: 0px
  85. overflow-y: auto
  86. custom_fields:
  87. image:
  88. - align-content: start
  89. align-self: start
  90. justify-content: start
  91. justify-self: start
  92. width: 100%
  93. padding: 0px 0px 10px 0px
  94. fuel:
  95. - align-content: start
  96. align-self: start
  97. justify-content: start
  98. justify-self: start
  99. width: 100%
  100. padding: 0px 0px 5px 0px
  101. status:
  102. - align-content: start
  103. align-self: start
  104. justify-content: start
  105. justify-self: start
  106. width: 100%
  107. padding: 0px 0px 0px 0px
  108. custom_fields:
  109. image:
  110. card:
  111. type: custom:button-card
  112. entity_picture: >-
  113. https://media.chromedata.com/MediaGallery/media/MjkzOTU4Xk1lZGlhIEdhbGxlcnk/ZeqTu6EoxpdBKBCIVZH8aRafJmNlsE6tbL-F7itFxiwEi9OQTKvm8UtSJ1DD_XoR09Sq__BQwgEbCnvmGkofrq0xbrpHiyBuaGCikrUeqvq_8baGxOCe9KEmeq4gQhC0REUo0xU2zf19jsGiBIe1etufVFcxJtw4GIFhl-XreKESIQ6F04bgeQ/cc_2024HYS070029_01_640_NT2.png
  114. show_name: false
  115. show_entity_picture: true
  116. show_state: false
  117. styles:
  118. card:
  119. - background-color: transparent
  120. border-radius: 0px
  121. padding: 0px
  122. margin: '-20px 0px -30px 0px'
  123. icon:
  124. - width: 88%
  125. fuel:
  126. card:
  127. type: custom:button-card
  128. entity: sensor.santa_fe_total_driving_range
  129. icon: mdi:gas-station
  130. name: |
  131. [[[
  132. const km = Math.round(states['sensor.distance_since_last_fill'].state);
  133. return `${km}km since filled`;
  134. ]]]
  135. label: Range
  136. show_label: true
  137. show_icon: false
  138. show_name: true
  139. show_state: true
  140. styles:
  141. grid:
  142. - grid-template-areas: '"gauge l" "gauge s" "gauge n"'
  143. - grid-template-columns: min-content 1fr
  144. - grid-template-rows: 1fr
  145. card:
  146. - background-color: transparent
  147. padding: 0px
  148. margin: 0px 0px 5px 10px
  149. border-radius: 0px
  150. width: auto
  151. height: 100px
  152. label:
  153. - font-size: 18px
  154. font-weight: 500
  155. color: rgba(255,255,255,0.5)
  156. justify-self: start
  157. align-self: center
  158. text-align: left
  159. padding: 5px 0px 0px 12px
  160. font-family: SF Pro Rounded
  161. state:
  162. - font-size: 30px
  163. font-weight: 600
  164. letter-spacing: 0.03em
  165. color: white
  166. justify-self: start
  167. align-self: center
  168. text-align: left
  169. padding: 0px 0px 5px 12px
  170. font-family: SF Pro Rounded
  171. name:
  172. - font-size: 16px
  173. font-weight: 500
  174. color: rgba(255,255,255,0.5)
  175. justify-self: start
  176. align-self: center
  177. text-align: left
  178. padding: 0px 0px 10px 12px
  179. font-family: SF Pro Rounded
  180. letter-spacing: 0.03em
  181. custom_fields:
  182. gauge:
  183. - height: auto
  184. width: 110px
  185. justify-self: start
  186. align-self: center
  187. text-align: left
  188. margin: 0px 0px 0px -7px
  189. custom_fields:
  190. gauge:
  191. card:
  192. type: custom:modern-circular-gauge
  193. entity: sensor.santa_fe_fuel_level
  194. secondary: {}
  195. max: 100
  196. gauge_width: 10
  197. show_header: false
  198. adaptive_icon_color: true
  199. icon: |
  200. [[[
  201. return (entity && parseFloat(entity.state) > 3)
  202. ? 'mdi:gas-station'
  203. : 'mdi:gas-station';
  204. ]]]
  205. show_icon: true
  206. segments:
  207. - from: 0
  208. to: 25
  209. color:
  210. - 255
  211. - 69
  212. - 58
  213. - from: 25
  214. to: 50
  215. color:
  216. - 255
  217. - 159
  218. - 10
  219. - from: 50
  220. to: 75
  221. color:
  222. - 49
  223. - 209
  224. - 88
  225. - from: 75
  226. to: 100
  227. color:
  228. - 11
  229. - 132
  230. - 255
  231. unit: '%'
  232. smooth_segments: true
  233. needle: false
  234. min: 0
  235. show_unit: true
  236. show_state: true
  237. card_mod:
  238. style: |
  239. ha-card {
  240. background-color: transparent;
  241. font-size: 25px !important;
  242. width: 100% !important;
  243. height: 100% !important;
  244.  
  245. }
  246. text.value {
  247. font-size: 35px !important;
  248. font-weight: 600;
  249. }
  250. .arc.clear {
  251. stroke: rgba(0,0,0,0.3) !important;
  252. }
  253. .icon-container {
  254. margin-top: 0px;
  255. margin-bottom: -10px !important;
  256. margin-right: 5px;}
  257.  
  258. ha-state-icon {
  259. --mdc-icon-size: 150% !important;}
  260. divider:
  261. card:
  262. type: entities
  263. entities:
  264. - type: divider
  265. style:
  266. height: 1px
  267. width: 100%
  268. margin-left: auto
  269. margin-right: auto
  270. background: rgba(255,255,255,0.1)
  271. card_mod:
  272. style: |
  273. ha-card {
  274. background: transparent;
  275. }
  276.  
  277. #states.card-content {
  278. padding: 0px 10px 5px 0px;
  279. }
  280. status:
  281. card:
  282. type: custom:button-card
  283. styles:
  284. grid:
  285. - grid-template-areas: '"battery engine locked warning"'
  286. - grid-template-columns: auto auto auto auto
  287. - grid-template-rows: 1fr
  288. card:
  289. - background-color: transparent
  290. padding: 0px
  291. align-content: start
  292. justify-content: center
  293. border-radius: 0px
  294. height: 80px
  295. width: 280px
  296. margin: '-5px 0px 0px 0px'
  297. custom_fields:
  298. battery:
  299. card:
  300. type: custom:button-card
  301. entity: sensor.santa_fe_ev_battery_level
  302. name: |
  303. [[[
  304. let range = states['sensor.santa_fe_ev_battery_level'].state;
  305. return Math.floor(range) + "%";
  306. ]]]
  307. show_icon: false
  308. show_name: false
  309. show_state: false
  310. styles:
  311. grid:
  312. - grid-template-areas: '"gauge" "n"'
  313. - grid-template-columns: 1fr
  314. - grid-template-rows: 1fr
  315. card:
  316. - background-color: transparent
  317. padding: 0px
  318. margin: '-10px -8px 0px 0px'
  319. border-radius: 0px
  320. width: 65px
  321. height: 150px
  322. name:
  323. - margin-top: '-45px'
  324. margin-bottom: 42px
  325. font-size: 14px
  326. font-weight: 550
  327. color: grey
  328. custom_fields:
  329. gauge:
  330. - height: auto
  331. width: 65px
  332. margin-top: '-40px'
  333. custom_fields:
  334. gauge:
  335. card:
  336. type: custom:modern-circular-gauge
  337. entity: sensor.santa_fe_ev_battery_level
  338. secondary: {}
  339. max: 100
  340. gauge_width: 10
  341. show_header: false
  342. adaptive_icon_color: true
  343. icon: mdi:battery-high
  344. show_icon: true
  345. segments:
  346. - from: 0
  347. to: 25
  348. color:
  349. - 255
  350. - 69
  351. - 58
  352. - from: 25
  353. to: 50
  354. color:
  355. - 255
  356. - 159
  357. - 10
  358. - from: 50
  359. to: 75
  360. color:
  361. - 49
  362. - 209
  363. - 88
  364. - from: 75
  365. to: 100
  366. color:
  367. - 49
  368. - 209
  369. - 88
  370. unit: '%'
  371. smooth_segments: false
  372. needle: false
  373. min: 0
  374. show_unit: true
  375. show_state: true
  376. card_mod:
  377. style: |
  378. ha-card {
  379. background-color: transparent;
  380. font-size: 25px !important;
  381. width: 100% !important;
  382. height: 100% !important;
  383.  
  384. }
  385. text.value {
  386. font-size: 35px !important;
  387. font-weight: 600;
  388. }
  389. .arc.clear {
  390. stroke: rgba(0,0,0,0.3) !important;
  391. }
  392. .icon-container {
  393. margin-top: 10px;
  394. margin-right: 5px;}
  395.  
  396. ha-state-icon {
  397. --mdc-icon-size: 150% !important;}
  398. engine:
  399. card:
  400. type: custom:button-card
  401. show_name: false
  402. entity: binary_sensor.santa_fe_engine
  403. name: |
  404. [[[
  405. return states['binary_sensor.santa_fe_engine'].state === "on" ? "Running" : "Off";
  406. ]]]
  407. icon: mdi:engine
  408. styles:
  409. grid:
  410. - grid-template-areas: '"i" "n"'
  411. - grid-template-columns: 1fr
  412. - grid-template-rows: 1fr 1fr
  413. img_cell:
  414. - background: |
  415. [[[
  416. return states['binary_sensor.santa_fe_engine'].state === "off" ? "linear-gradient(45deg, rgba(255,255,255, 0.1) 20%, rgba(255,255,255, 0.2) 100%)" : "rgba(0,122,255,0.3)";
  417. ]]]
  418. - border-radius: 50px
  419. width: 45px
  420. height: 45px
  421. icon:
  422. - width: 30px
  423. color: |
  424. [[[
  425. return states['binary_sensor.santa_fe_engine'].state === "off" ? "rgba(255,255,255,0.7)" : "var(--label-badge-blue)";
  426. ]]]
  427. card:
  428. - background-color: transparent
  429. padding: 0px
  430. margin: '-10px 0px 0px 0px'
  431. width: 50px
  432. name:
  433. - font-size: 14px
  434. font-weight: 550
  435. color: grey
  436. locked:
  437. card:
  438. type: custom:button-card
  439. show_name: false
  440. entity: lock.santa_fe_door_lock
  441. name: |
  442. [[[
  443. return states['lock.santa_fe_door_lock'].state === "locked" ? "Locked" : "Unlocked";
  444. ]]]
  445. icon: mdi:lock
  446. styles:
  447. grid:
  448. - grid-template-areas: '"i" "n"'
  449. - grid-template-columns: 1fr
  450. - grid-template-rows: 1fr 1fr
  451. img_cell:
  452. - background: |
  453. [[[
  454. return states['lock.santa_fe_door_lock'].state === "locked" ? "linear-gradient(45deg, rgba(255,255,255, 0.1) 20%, rgba(255,255,255, 0.2) 100%)" : "var(--label-badge-red)";
  455. ]]]
  456. - border-radius: 50px
  457. width: 45px
  458. height: 45px
  459. icon:
  460. - width: 25px
  461. color: |
  462. [[[
  463. return states['lock.santa_fe_door_lock'].state === "locked" ? "rgba(255,255,255,0.7)" : "white";
  464. ]]]
  465. card:
  466. - background-color: transparent
  467. padding: 0px
  468. margin: '-10px 0px 0px 0px'
  469. width: 50px
  470. name:
  471. - font-size: 14px
  472. font-weight: 550
  473. color: grey
  474. warning:
  475. card:
  476. type: custom:button-card
  477. show_name: false
  478. entity: binary_sensor.santa_fe_warning
  479. name: |
  480. [[[
  481. return states['binary_sensor.santa_fe_warning'].state === "off" ? "Ok" : "Warning";
  482. ]]]
  483. icon: mdi:alert
  484. styles:
  485. grid:
  486. - grid-template-areas: '"i" "n"'
  487. - grid-template-columns: 1fr
  488. - grid-template-rows: 1fr 1fr
  489. img_cell:
  490. - background: |
  491. [[[
  492. return states['binary_sensor.santa_fe_warning'].state === "off" ? "linear-gradient(45deg, rgba(255,255,255, 0.1) 20%, rgba(255,255,255, 0.2) 100%)" : "var(--label-badge-red)";
  493. ]]]
  494. - border-radius: 50px
  495. width: 45px
  496. height: 45px
  497. icon:
  498. - width: 25px
  499. color: |
  500. [[[
  501. return states['binary_sensor.santa_fe_warning'].state === "off" ? "rgba(255,255,255,0.7)" : "white";
  502. ]]]
  503. card:
  504. - background-color: transparent
  505. padding: 0px
  506. margin: '-10px 0px 0px 0px'
  507. width: 50px
  508. name:
  509. - font-size: 14px
  510. font-weight: 550
  511. color: grey
  512. card_mod:
  513. style: |
  514. :host {
  515. display: block;
  516. position: relative; margin: 0px 6px 0px 0px;
  517. }
  518.  
  519. :host::before {
  520.  
  521. content: "";
  522. position: absolute;
  523. inset: 0;
  524. border-radius: 30px;
  525. -webkit-backdrop-filter: blur(50px);
  526. z-index: -1;
  527. padding: .1rem;
  528. background: linear-gradient(60deg,
  529. rgba(255,255,255,0.0) 0%,
  530. rgba(255,255,255,0.2) 49%,
  531. rgba(255,255,255,0.2) 51%,
  532. rgba(255,255,255,0.0) 100%);
  533. -webkit-mask:
  534. linear-gradient(#fff 0 0) content-box,
  535. linear-gradient(#fff 0 0);
  536. -webkit-mask-composite: xor;
  537. mask-composite: exclude;
  538. z-index: 0; filter: saturate(140%);
  539. }
  540.  
  541. :host::after {
  542. content: "";
  543. background: linear-gradient(180deg, rgba(255,255,255, 0.1) 20%, rgba(255,255,255, 0.0) 100%);
  544. position: absolute;
  545. inset: 0;
  546. border-radius: 30px;
  547. box-shadow: inset -8px 10px 15px rgba(0, 0, 0, 0.1);
  548. z-index: -1;
  549.  
  550. -webkit-backdrop-filter:blur(30px) saturate(110%) brightness(90%);
  551. filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.2)); }
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!