mirror of
https://github.com/jpawlowski/hass.tibber_prices.git
synced 2026-03-30 05:13:40 +00:00
1 line
No EOL
13 KiB
JavaScript
1 line
No EOL
13 KiB
JavaScript
"use strict";(globalThis.webpackChunkdocs_split_user=globalThis.webpackChunkdocs_split_user||[]).push([[1887],{4744:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>a,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>s,toc:()=>l});const s=JSON.parse('{"id":"dynamic-icons","title":"Dynamic Icons","description":"Many sensors in the Tibber Prices integration automatically change their icon based on their current state. This provides instant visual feedback about price levels, trends, and periods without needing to read the actual values.","source":"@site/docs/dynamic-icons.md","sourceDirName":".","slug":"/dynamic-icons","permalink":"/hass.tibber_prices/user/dynamic-icons","draft":false,"unlisted":false,"editUrl":"https://github.com/jpawlowski/hass.tibber_prices/tree/main/docs/user/docs/dynamic-icons.md","tags":[],"version":"current","lastUpdatedAt":1764985026000,"frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Period Calculation","permalink":"/hass.tibber_prices/user/period-calculation"},"next":{"title":"Dynamic Icon Colors","permalink":"/hass.tibber_prices/user/icon-colors"}}');var r=i(4848),t=i(8453);const o={},c="Dynamic Icons",a={},l=[{value:"What are Dynamic Icons?",id:"what-are-dynamic-icons",level:2},{value:"How to Check if a Sensor Has Dynamic Icons",id:"how-to-check-if-a-sensor-has-dynamic-icons",level:2},{value:"Using Dynamic Icons in Your Dashboard",id:"using-dynamic-icons-in-your-dashboard",level:2},{value:"Standard Entity Cards",id:"standard-entity-cards",level:3},{value:"Glance Card",id:"glance-card",level:3},{value:"Custom Button Card",id:"custom-button-card",level:3},{value:"Mushroom Entity Card",id:"mushroom-entity-card",level:3},{value:"Overriding Dynamic Icons",id:"overriding-dynamic-icons",level:2},{value:"In Entity Cards",id:"in-entity-cards",level:3},{value:"In Custom Button Card",id:"in-custom-button-card",level:3},{value:"Combining with Dynamic Colors",id:"combining-with-dynamic-colors",level:2},{value:"Icon Behavior Details",id:"icon-behavior-details",level:2},{value:"Binary Sensors",id:"binary-sensors",level:3},{value:"State-Based Icons",id:"state-based-icons",level:3},{value:"Troubleshooting",id:"troubleshooting",level:2},{value:"See Also",id:"see-also",level:2}];function d(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"dynamic-icons",children:"Dynamic Icons"})}),"\n",(0,r.jsx)(n.p,{children:"Many sensors in the Tibber Prices integration automatically change their icon based on their current state. This provides instant visual feedback about price levels, trends, and periods without needing to read the actual values."}),"\n",(0,r.jsx)(n.h2,{id:"what-are-dynamic-icons",children:"What are Dynamic Icons?"}),"\n",(0,r.jsx)(n.p,{children:"Instead of having a fixed icon, some sensors update their icon to reflect their current state:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Price level sensors"})," show different cash/money icons depending on whether prices are cheap or expensive"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Price rating sensors"})," show thumbs up/down based on how the current price compares to average"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Volatility sensors"})," show different chart types based on price stability"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Binary sensors"})," show different icons when ON vs OFF (e.g., piggy bank when in best price period)"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"The icons change automatically - no configuration needed!"}),"\n",(0,r.jsx)(n.h2,{id:"how-to-check-if-a-sensor-has-dynamic-icons",children:"How to Check if a Sensor Has Dynamic Icons"}),"\n",(0,r.jsx)(n.p,{children:"To see which icon a sensor currently uses:"}),"\n",(0,r.jsxs)(n.ol,{children:["\n",(0,r.jsxs)(n.li,{children:["Go to ",(0,r.jsx)(n.strong,{children:"Developer Tools"})," \u2192 ",(0,r.jsx)(n.strong,{children:"States"})," in Home Assistant"]}),"\n",(0,r.jsxs)(n.li,{children:["Search for your sensor (e.g., ",(0,r.jsx)(n.code,{children:"sensor.tibber_home_current_interval_price_level"}),")"]}),"\n",(0,r.jsx)(n.li,{children:"Look at the icon displayed in the entity row"}),"\n",(0,r.jsx)(n.li,{children:"Change conditions (wait for price changes) and check if the icon updates"}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Common sensor types with dynamic icons:"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Price level sensors (e.g., ",(0,r.jsx)(n.code,{children:"current_interval_price_level"}),")"]}),"\n",(0,r.jsxs)(n.li,{children:["Price rating sensors (e.g., ",(0,r.jsx)(n.code,{children:"current_interval_price_rating"}),")"]}),"\n",(0,r.jsxs)(n.li,{children:["Volatility sensors (e.g., ",(0,r.jsx)(n.code,{children:"volatility_today"}),")"]}),"\n",(0,r.jsxs)(n.li,{children:["Binary sensors (e.g., ",(0,r.jsx)(n.code,{children:"best_price_period"}),", ",(0,r.jsx)(n.code,{children:"peak_price_period"}),")"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"using-dynamic-icons-in-your-dashboard",children:"Using Dynamic Icons in Your Dashboard"}),"\n",(0,r.jsx)(n.h3,{id:"standard-entity-cards",children:"Standard Entity Cards"}),"\n",(0,r.jsx)(n.p,{children:"Dynamic icons work automatically in standard Home Assistant cards:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",children:"type: entities\nentities:\n - entity: sensor.tibber_home_current_interval_price_level\n - entity: sensor.tibber_home_current_interval_price_rating\n - entity: sensor.tibber_home_volatility_today\n - entity: binary_sensor.tibber_home_best_price_period\n"})}),"\n",(0,r.jsx)(n.p,{children:"The icons will update automatically as the sensor states change."}),"\n",(0,r.jsx)(n.h3,{id:"glance-card",children:"Glance Card"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",children:"type: glance\nentities:\n - entity: sensor.tibber_home_current_interval_price_level\n name: Price Level\n - entity: sensor.tibber_home_current_interval_price_rating\n name: Rating\n - entity: binary_sensor.tibber_home_best_price_period\n name: Best Price\n"})}),"\n",(0,r.jsx)(n.h3,{id:"custom-button-card",children:"Custom Button Card"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",children:"type: custom:button-card\nentity: sensor.tibber_home_current_interval_price_level\nname: Current Price Level\nshow_state: true\n# Icon updates automatically - no need to specify it!\n"})}),"\n",(0,r.jsx)(n.h3,{id:"mushroom-entity-card",children:"Mushroom Entity Card"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",children:"type: custom:mushroom-entity-card\nentity: sensor.tibber_home_volatility_today\nname: Price Volatility\n# Icon changes automatically based on volatility level\n"})}),"\n",(0,r.jsx)(n.h2,{id:"overriding-dynamic-icons",children:"Overriding Dynamic Icons"}),"\n",(0,r.jsx)(n.p,{children:"If you want to use a fixed icon instead of the dynamic one:"}),"\n",(0,r.jsx)(n.h3,{id:"in-entity-cards",children:"In Entity Cards"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",children:"type: entities\nentities:\n - entity: sensor.tibber_home_current_interval_price_level\n icon: mdi:lightning-bolt # Fixed icon, won't change\n"})}),"\n",(0,r.jsx)(n.h3,{id:"in-custom-button-card",children:"In Custom Button Card"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",children:"type: custom:button-card\nentity: sensor.tibber_home_current_interval_price_rating\nname: Price Rating\nicon: mdi:chart-line # Fixed icon overrides dynamic behavior\nshow_state: true\n"})}),"\n",(0,r.jsx)(n.h2,{id:"combining-with-dynamic-colors",children:"Combining with Dynamic Colors"}),"\n",(0,r.jsxs)(n.p,{children:["Dynamic icons work great together with dynamic colors! See the ",(0,r.jsx)(n.strong,{children:(0,r.jsx)(n.a,{href:"/hass.tibber_prices/user/icon-colors",children:"Dynamic Icon Colors Guide"})})," for examples."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Example: Dynamic icon AND color"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",children:"type: custom:button-card\nentity: sensor.tibber_home_current_interval_price_level\nname: Current Price\nshow_state: true\n# Icon changes automatically (cheap/expensive cash icons)\nstyles:\n icon:\n - color: |\n [[[\n return entity.attributes.icon_color || 'var(--state-icon-color)';\n ]]]\n"})}),"\n",(0,r.jsx)(n.p,{children:"This gives you both:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"\u2705 Different icon based on state (e.g., cash-plus when cheap, cash-remove when expensive)"}),"\n",(0,r.jsx)(n.li,{children:"\u2705 Different color based on state (e.g., green when cheap, red when expensive)"}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"icon-behavior-details",children:"Icon Behavior Details"}),"\n",(0,r.jsx)(n.h3,{id:"binary-sensors",children:"Binary Sensors"}),"\n",(0,r.jsx)(n.p,{children:"Binary sensors may have different icons for different states:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"ON state"}),": Typically shows an active/alert icon"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"OFF state"}),": May show different icons depending on whether future periods exist","\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Has upcoming periods: Timer/waiting icon"}),"\n",(0,r.jsx)(n.li,{children:"No upcoming periods: Sleep/inactive icon"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Example:"})," ",(0,r.jsx)(n.code,{children:"binary_sensor.tibber_home_best_price_period"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"When ON: Shows a piggy bank (good time to save money)"}),"\n",(0,r.jsx)(n.li,{children:"When OFF with future periods: Shows a timer (waiting for next period)"}),"\n",(0,r.jsx)(n.li,{children:"When OFF without future periods: Shows a sleep icon (no periods expected soon)"}),"\n"]}),"\n",(0,r.jsx)(n.h3,{id:"state-based-icons",children:"State-Based Icons"}),"\n",(0,r.jsxs)(n.p,{children:["Sensors with text states (like ",(0,r.jsx)(n.code,{children:"cheap"}),", ",(0,r.jsx)(n.code,{children:"normal"}),", ",(0,r.jsx)(n.code,{children:"expensive"}),") typically show icons that match the meaning:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Lower/better values \u2192 More positive icons"}),"\n",(0,r.jsx)(n.li,{children:"Higher/worse values \u2192 More cautionary icons"}),"\n",(0,r.jsx)(n.li,{children:"Normal/average values \u2192 Neutral icons"}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"The exact icons are chosen to be intuitive and meaningful in the Home Assistant ecosystem."}),"\n",(0,r.jsx)(n.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Icon not changing:"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Wait for the sensor state to actually change (prices update every 15 minutes)"}),"\n",(0,r.jsx)(n.li,{children:"Check in Developer Tools \u2192 States that the sensor state is changing"}),"\n",(0,r.jsx)(n.li,{children:"If you've set a custom icon in your card, it will override the dynamic icon"}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Want to see the icon code:"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"Look at the entity in Developer Tools \u2192 States"}),"\n",(0,r.jsxs)(n.li,{children:["The ",(0,r.jsx)(n.code,{children:"icon"})," attribute shows the current Material Design icon code (e.g., ",(0,r.jsx)(n.code,{children:"mdi:cash-plus"}),")"]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Want different icons:"})}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:"You can override icons in your card configuration (see examples above)"}),"\n",(0,r.jsx)(n.li,{children:"Or create a template sensor with your own icon logic"}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"see-also",children:"See Also"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.a,{href:"/hass.tibber_prices/user/icon-colors",children:"Dynamic Icon Colors"})," - Color your icons based on state"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.a,{href:"/hass.tibber_prices/user/sensors",children:"Sensors Reference"})," - Complete list of available sensors"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.a,{href:"/hass.tibber_prices/user/automation-examples",children:"Automation Examples"})," - Use dynamic icons in automations"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}}}]); |