- Flow dots migrated from SVG SMIL to plain JS animation: The moving particles on the energy-flow lines and battery-flow line were positioned using SVG SMIL (
animateMotion+mpath), which some mobile WebViews render inconsistently or not at all — the dots would simply never appear, while the rest of the card worked normally. They're now positioned every frame viagetPointAtLength()+requestAnimationFrame, which behaves identically across browsers instead of depending on each engine's SMIL implementation. Also gates dot creation onprefers-reduced-motiondirectly, since that preference previously only stopped the CSS-based battery dash line, not the SMIL dots. Investigating #114 — marked pre-release pending confirmation from the reporter that this resolves it.
- "Usage" figure now consistent across the stat tile, house icon, and legend: When an EV charger was configured, the Usage stat tile at the top of the card correctly showed house-only consumption (either from your
self_consumption_entity, or the physics-derived total with EV subtracted), but the bar's house icon tooltip and the legend's "Usage" entry always showed the full physics-basedsolar − export + import + batterytotal — which already includes EV charging. Since EV charging is also broken out as its own tile/segment, this made the Usage value look inflated and inconsistent between the top of the card and the bar/legend below, especially for users whoseself_consumption_entityis a helper that nets out EV power. All three now derive from the same value, and EV usage is no longer double-counted under the "Usage" label. The bar's separate "Total usage" scale marker (used withshow_usage_indicator) is intentionally unchanged, as it's meant to reflect whole-home draw including EV. Resolves #112.
- Card-level tap action (
tap_action_card): The header title is now clickable whentap_action_cardis configured. Set it tonavigateto jump to a dedicated solar dashboard without interfering with the individual entity tap actions on stats tiles, bar segments, or legend items. Requiresshow_header: true. Resolves #110.
- Consumer 3 — EV slot alternative: Users without an EV can now configure a third consumer tile (
consumer_3_entity) that occupies the stats row slot previously reserved for EV. Works identically to Consumers 1 and 2 — optional display name, daily energy history sensor, idle visibility viashow_consumers_when_idle, and a tap action. Ifev_charger_sensoris also configured, EV takes priority and Consumer 3 is ignored, keeping the two features mutually exclusive. Resolves #109.
- HA 2026.6 card picker suggestions: Solar Bar Card now registers as a suggested card in the Home Assistant card picker. When a user selects a
sensorentity withdevice_class: powerordevice_class: energywhose entity ID or friendly name contains a solar keyword (solar,pv,photovoltaic,production, orpanel), Solar Bar Card appears in the "Community" suggestions section. Selecting it pre-fillsproduction_entitywith the chosen entity — ready to configure the rest via the visual editor.
-
disable_animationconfig option: New toggle that stops all moving animations — flow particles, the animated dashed battery line, everything. The card still updates live; only the motion stops. Useful for high-DPI displays, low-power devices, or anyone who suspects the animations are driving GPU load. Setdisable_animation: truein your card YAML or toggle it in the visual editor. -
Battery dashed-line animation migrated from SMIL to CSS: The
stroke-dashoffsetanimation on the battery flow path was a SMIL attribute animation, which browsers run on the main thread and software-render each frame. It's now a CSS@keyframesanimation injected directly into the SVG, which browsers can compositor-thread and GPU-accelerate. -
will-change: transformon all animated particles: Energy flow ellipses and battery flow circles now carrywill-change: transform, hinting the browser to promote each particle to its own GPU compositor layer before animation starts — avoiding per-frame paint promotion overhead. -
Reduced EV charging glow to single shadow layer: The
.ev-icon.chargingglow was a double box-shadow (0 0 10px+0 0 22px). Collapsed to a single0 0 12px— half the blur passes, same visual effect. -
prefers-reduced-motionmedia query: Users who have "reduce motion" set in their OS accessibility settings now automatically get all animations disabled via a CSS media query, with no card config needed.
-
Usage stat no longer mirrors Solar Production: When
self_consumption_entitywas configured, the Usage stat tile was incorrectly displaying a physics-derived fallback value (solar − export + import + battery) rather than the actual entity reading. For users who have no grid or battery entities configured, this fallback collapses to justsolarProduction, making Usage appear identical to Solar. The tile now always shows the value from your configuredself_consumption_entitydirectly. -
Grid stat tile now stays visible when the grid is idle: Previously, the Grid tile disappeared entirely whenever export and import were both 0 W — which happens during pure self-consumption (all solar goes directly to the house, no grid interaction). Users with a grid entity configured would see no grid tile at all, making it hard to tell whether the entity was wired up correctly. The tile now shows Grid Idle / 0 W whenever a grid entity is configured, regardless of current flow.
-
Massive GPU usage reduction: The battery flow animation was consuming up to 50% GPU on modern hardware (including an RTX 3090) due to a
feGaussianBlurSVG filter applied to a path that was simultaneously running a 60fps SMILstroke-dashoffsetanimation. When a filter is combined with a SMIL animation, the browser cannot cache the rasterized output — it re-rasterizes the full element and re-runs the blur kernel on every frame, indefinitely. The filter has been removed; the animated dashed line and flow particles are fully preserved. -
Eliminated
transition: allon interactive elements: Five elements (.battery-indicator,.grid-icon,.house-icon,.bar-segment,.ev-icon) usedtransition: all 0.3s ease, which forces the browser to track and interpolate every CSS property simultaneously on any state change — including paint-heavy properties likebox-shadowandbackground. Each is now scoped to only the properties that actually animate (transform,background-color,border-color, etc.). -
Battery SOC bar now uses GPU compositing: The battery fill bar switched from
width: X%(triggers layout reflow) totransform: scaleX(X)(GPU-composited, zero layout cost). The redundantborder-radiuson the fill was also removed — the parent container'soverflow: hiddenalready handles clipping.
-
Console badge restyled: The browser console load message now uses a two-tone pill badge — orange filled label on the left, light orange version number on the right — matching the style used by other popular HA custom cards.
-
EV icon changed to
mdi:car: Simpler, bolder silhouette that reads more clearly in white against the coloured circle backgrounds.
-
Power UnitandShow Power Unitnow display correctly in the config editor: Both fields were missing from the editor's label map and rendered as raw field names (power_unit,show_power_unit). -
ev_icon_colornow works correctly: The colour picker returns an RGB array but it was being interpolated directly into CSS, producing invalid output. It now goes through the sametoColor()conversion asgrid_icon_colorand defaults to white. The two ghost optionsev_icon_idle_colorandev_icon_charging_color, which appeared in the editor but were never applied anywhere, have been removed.
-
EV charging icon now shows grid state colour: While the EV is actively charging, the circle was always grey. It now mirrors the grid icon — orange when the grid is importing (you're drawing power from the grid to charge), green when net-zero or exporting (the car is running on solar/battery). The yellow glow remains in both states to indicate active charging.
-
Config editor label polish: The power unit dropdown now reads "Unit of measure" with options "kW — kilowatts" and "W — watts". The unit toggle reads "Show unit label (kW / W)" for clarity. The decimal places dropdown now has a proper "Power decimal places" label instead of displaying the raw field name.
- Legend values now respect
power_unitsetting: Whenpower_unit: Wwas configured, legend values for Solar, Usage, Export, and Battery were still displayed in kW — only Import and EV happened to use the correct formatter. All six legend items now consistently use thefmtPow()helper, so the unit shown in the legend always matches the unit chosen in your card configuration.
- EV icon: solid circle design: The EV circle has been restyled to match the grid icon's solid filled-circle approach — the ring border is gone. States are now communicated via fill color: idle is a dimmed grey circle; when excess solar covers ≥50% of the EV charger capacity the circle turns orange; at ≥100% it turns green. When the EV is actively charging the circle stays grey with a yellow/orange outer glow to indicate live charging without conflicting with the solar-availability colors.
- Battery SOC entity not appearing in config UI: The
battery_soc_entityselector was filtering strictly bydevice_class: "battery", which excluded valid sensors (e.g. from ESPHome, MQTT, or custom integrations) that report a percentage without a device class set. The selector now also includes any sensor withunit_of_measurement: "%", so these entities show up in the dropdown without any changes to the sensor itself.
-
HA Jinja2 label templates: Any label configurable via
custom_labelsorlabel_*YAML keys now accepts full Home Assistant Jinja2 template syntax. When a value contains{{, it is evaluated server-side via the HA websocketrender_templateAPI and updated reactively. Static label strings continue to work as before — no migration needed. The Custom Labels section has been removed from the visual editor (labels are YAML-only with template support); all previously configured labels remain fully compatible.custom_labels: solar: "{{ states('sensor.inverter_model') }}" export: "{{ 'Selling' if states('sensor.export_power')|float > 0 else 'Export' }}"
-
Bar segment text templates (
segment_text_*): Each of the five bar segments now accepts a freeform text template with token substitution. Configure via YAML; leave unset to use the defaultvalue labelformat. Available tokens:Token Description {value}Formatted power value (respects power_unitandshow_power_unit){label}Translated or custom label for this segment {percent}Segment width as a rounded percentage of the bar {raw}Raw numeric value (integer W or decimal kW, no unit suffix) Config keys and their segments:
Key Segment segment_text_solar_homeSolar → Home (self-consumption) segment_text_solar_evSolar → EV segment_text_battery_chargeSolar → Battery segment_text_exportExport segment_text_ev_potentialEV potential (pre-charge overlay) segment_text_solar_home: "{value}" segment_text_export: "{percent} → grid" segment_text_battery_charge: "⚡ {raw}W"
- Import legend value mismatch: The Import legend item was displaying
gridToHome(grid power allocated to the house only), while the Import stats tile correctly displayedtotalGridImport(the full raw sensor value). When an EV was charging from the grid, the legend showed a lower number — the difference beinggridToEv. Both now showtotalGridImport. As a bonus fix, the legend item will now also appear correctly when all grid import is going to the EV (previously it could vanish ifgridToHomewas 0).
- EV circle icon (
ev_charger_sensor): The EV car icon has been moved out of the solar bar and replaced with a dedicated circular icon element on the left side of the bar — sitting between the house icon and battery bar, so all consumers are on the left and the flow direction stays consistent. State is shown via ring and fill: grey ring when idle; colored ring border when excess solar is ≥50% of EV load; brighter ring glow at ≥100%; and full solid fill in the EV color when actively charging. Whenshow_energy_flowis enabled, animated dots connect solar and grid to the EV circle via the left bus, tracked as an independent flow group so EV state changes don't interrupt other animations. - EV icon symbol color (
ev_icon_color): New config option to set the color of the car icon inside the EV circle. Useful when the default (theme primary text color) doesn't contrast well against the circle's background color. Overrides to white automatically when the circle is in solid charging state. - Power unit selection (
power_unit): Choose betweenkW(default) andWto display all live power values in Watts. All value locations update consistently — tiles, bar segment labels, legend, bar capacity label, and tooltips. - Show/hide unit suffix (
show_power_unit): Toggle thekW/Wunit label after every power value. Defaults totrue. Useful for very compact displays where the unit can be inferred.
- Tile order: Solar → Usage → Export/Import: Stats tiles are now ordered Solar | Usage | Export (or Import) — matching the natural left-to-right flow of the energy bar and aligning with the legend order.
- Legend order aligned with tiles: Legend items now follow the same order as tiles — Solar, Usage, Export, Import, then EV and Battery. Previously EV and Battery appeared between Usage and Export.
- Export tile net indicator centering: The net position dot (green/red) after the "Export"/"Import" label no longer shifts the label text off-centre. A hidden spacer of equal width is added to the left so the label text stays visually centred while the dot trails it on the right.
- Forecast peak solar indicator (
peak_forecast_entity): Shows today's forecast peak solar power as a solid line on the bar, using the same color as the existing dashed forecast indicator. Whenuse_solcastis enabled, auto-detectssensor.solcast_pv_forecast_peak_forecast_today(with a fallback search for any Solcast entity containingpeakandtoday). A manual entity can also be configured independently. The indicator is shown whenever the peak forecast value is greater than zero and a source is configured. - Energy flow threshold (
energy_flow_threshold): Configurable deadband (default ±0.1 kW) for import/export flow detection. Power levels below this threshold are treated as idle, preventing rapid dot flickering when the system sits near zero. - Solar drop origin (
energy_flow_origin): Choose where the solar drop line originates —bar_center(default, middle of the full solar bar) orproduction_center(middle of the filled production segments, moves with solar output). Production center is rounded to 5 SVG units to reduce unnecessary path rebuilds. - House icon: New
show_house_iconoption adds a 32px house icon to the left of the bar, representing home consumption. Colored by the self-usage palette color, switches to import color when only grid power is being consumed. Tappable with the usage tap action. - Energy flow lines: New
show_energy_flowoption renders animated flow lines below the bar visualising energy paths between solar, house, grid, and battery using a shared bus architecture:- Left bus: solar junction → house. All consumption flows (solar self-use, battery discharge, grid import) travel left along this shared bus.
- Right bus: solar junction → grid. Export flows right; import flows left from grid across both buses to house.
- Vertical stubs: solar drops down to the junction; battery stub taps into the left bus (particles flow up for charge, down for discharge).
- One subtle neutral dashed line renders the bus infrastructure; colored particles animate per-flow on top.
- Solar drop-line is hidden when no solar is generated.
- Energy flow speed: New
energy_flow_speedoption to control animation speed (default 2 seconds).
- Split bus rendering: Energy flow dots are now split into two independent groups — stable flows (solar→house, solar→battery, battery→house) and grid flows (solar→grid, grid→house). When import/export state changes, only the grid group rebuilds with crossfade; left-side animations continue uninterrupted.
- Fully static bus lines: All bus line segments (including the no-solar grid-to-house stub) are now drawn based on element presence only, never on active flow state. This eliminates bus line redraws when flow direction changes.
- Power-scaled animation speed: Energy flow dot speed now reflects actual power levels — higher power flows move faster, lower power flows move slower. Uses compressed exponent scaling (
power^0.35) so even small flows remain visible. Speed is also normalized by path length so dots travel at consistent visual speed regardless of distance, fixing the issue where short-path dots appeared sluggish while long-path dots raced. - Dot visibility on vertical segments: Changed opacity fade-in/fade-out keyTimes from 10%/90% to 3%/97% of the animation cycle. Dots are now visible as they travel down the vertical drop lines and up the destination stubs, instead of being invisible during those segments.
- Crossfade on flow topology change: When energy flow paths change (e.g., export starts/stops, battery switches between charge/discharge), the old SVG fades out over 400ms while the new one appears, replacing the abrupt mid-path dot disappearance.
- Grid icon export threshold: Aligned the grid icon color threshold with the flow dot threshold (
> 0instead of> 0.05). The grid icon now shows its export color whenever export flow dots are visible, even at minimal export levels. - Persistent bus infrastructure: Bus lines (dashed) now always render between connected elements regardless of active flow. Only animated dots appear/disappear with actual power.
- Uniform dot spacing: Dot count per flow scales with path length (~1 dot per 150 SVG units, clamped 2–5) instead of a fixed 3 per flow, keeping consistent visual spacing across short and long buses.
- Grid icon circle colors not applying: Fixed
grid_icon_import_color,grid_icon_export_color, andgrid_icon_idle_colorconfig options being ignored. - Tower icon color flash on load: Fixed the transmission tower icon briefly appearing white before the configured
grid_icon_colortook effect.
- Grid icon circle colors not applying: Fixed
grid_icon_import_color,grid_icon_export_color, andgrid_icon_idle_colorconfig options being ignored. The colors were set as duplicate CSS rules that got overridden by later selectors. They are now applied directly in the grid icon class definitions so configured colors always take effect. - Tower icon color flash on load: Fixed the transmission tower icon briefly appearing white before the configured
grid_icon_colortook effect. The color is now set as an inline style so it applies immediately, before theha-iconweb component finishes rendering its shadow DOM.
- Grid icon tower color: New
grid_icon_colorconfig option with color picker to set the transmission tower icon color inside the circle. Eliminates card-mod flicker when styling the icon color.
- Idle circle transparency: Removed
opacity: 0.6from the idle grid icon circle that caused a washed-out, transparent appearance. The grey background already communicates the idle state.
- Clarified grid icon color option descriptions to distinguish circle background colors from the tower icon color.
- Configurable grid icon colors: New
grid_icon_import_color,grid_icon_export_color, andgrid_icon_idle_coloroptions with color pickers in the editor. Also configurable viacustom_colorsin YAML (grid_icon_import,grid_icon_export,grid_icon_idle). - Bar segment text spacing: Added a space between the value and "kW" in bar segment labels (e.g., "1.2 kW" instead of "1.2kW").
- Always-visible grid icon: New
show_grid_icon_alwaysoption keeps the grid transmission tower icon permanently visible next to the solar bar. When there is no import or export, the icon turns grey to indicate an idle grid connection. - Consumer tap actions: Added
tap_action_consumer_1andtap_action_consumer_2config options in the Tap Actions editor section.
- Usage tile mirrors production (#53): Fixed the Usage stats tile showing the same value as Solar when production dropped below actual house consumption. The calculation now uses an energy balance formula (solar - export + import + battery discharge - battery charge) which is always physically correct regardless of what the sensor reports.
- Total house consumption: The Usage stats tile now shows total house consumption from all sources (solar + grid import + battery discharge) rather than just solar self-consumption. The legend and bar tooltip also reflect total house load.
- Battery SOC decimal places: New
battery_soc_decimal_placesoption (0, 1, or 2) separate from the maindecimal_placessetting. Useful for batteries that only report whole percentages — set to 0 to avoid showing ".0". - Battery SOC formatting: Added a space between the SOC value and the percent symbol (e.g., "85 %" instead of "85%") across all displays — stats tile, bar label, and battery bar overlay.
- Auto-scaling stats tiles: Stats tiles now use CSS container queries to automatically scale down font sizes on narrow screens (panels, sidebar, mobile) before wrapping to a second row. Two breakpoints at 350px and 280px progressively reduce text size and padding.
- Editor consolidation: Merged the separate "EV Charger" and "Additional Consumers" editor sections into a single "Consumers" section. EV config appears first, followed by Consumer 1 and Consumer 2, with both idle toggles paired at the bottom.
- Inline stats detail mode: New
stats_detail_positionoption — set to"inline"to show the detail value next to the kW value separated by a slash (e.g., "1.2 kW / 12.5 kWh") instead of on a separate 3rd row. Saves vertical space while keeping the information visible. - EV always-show toggle: New
show_ev_when_idleoption (defaultfalse). When enabled, the EV tile always shows even when not charging — same pattern as battery and consumer idle toggles. - EV daily energy history: New
ev_history_entityconfig option. Connect a daily kWh sensor to show energy totals on the EV stats tile. - Consumer daily energy history: New
consumer_1_history_entityandconsumer_2_history_entityconfig options. Show daily kWh totals on consumer tiles, following the sameshow_stats_detail/stats_detail_positiontoggle as all other tiles. - Reduced tile spacing: Stats tiles now use tighter padding (6px vs 8px), smaller gaps (6px vs 8px), reduced margins, and smaller label font (11px vs 12px) for a more compact card.
- Inline detail styling: New
.stat-detail-inlineCSS class renders the slash-separated detail in a smaller, lighter font on the same line as the kW value.
- Dynamic stats tile layout: Stats tiles now adapt dynamically based on which entities are configured. No more fixed 4-tile maximum — the layout grows with your setup.
- Battery and EV coexistence: Battery and EV tiles are no longer mutually exclusive. If you have both configured, both tiles display simultaneously.
- Smart row splitting: The tile grid automatically splits into two rows when there are 5+ tiles (3 core tiles on row 1, extras on row 2). For 4 or fewer tiles, everything stays in a single row.
- Persistent battery tile: Battery tile now always shows when configured, even when idle — useful for monitoring SOC at a glance.
- Battery bar text fix: SOC percentage label on the battery bar now stays visible at all charge levels. Previously the text would disappear at low SOC because visibility was tied to the fill width rather than the full bar width.
- Additional consumer tiles: New
consumer_1_entity/consumer_1_nameandconsumer_2_entity/consumer_2_nameconfig options. Add up to 2 extra power consumers (heat pump, pool heater, hot water, AC, etc.) as stats tiles. Consumers show as tiles only — the bar stays clean. - Consumer idle visibility: New
show_consumers_when_idleoption (defaultfalse). When enabled, consumer tiles always show even when power is 0 (like battery). When disabled, tiles only appear while actively consuming (like EV). - Compact stats mode: New
show_stats_detailoption (defaulttrue). Set tofalseto hide the detail row on all stats tiles (daily kWh, net position, battery %) for a slimmer card. - Consumer tile background colors: New palette keys
stats_consumer_1_backgroundandstats_consumer_2_backgroundfor per-consumer tile styling viacustom_colors. - README overhaul: Streamlined documentation — concise feature overview, self-documenting config tables, version history moved to releases.md.
| Your Setup | Row 1 | Row 2 |
|---|---|---|
| No battery, no EV | Solar | Export/Import | Usage | — |
| No battery, EV charging | Solar | Export/Import | Usage | EV | — |
| Battery, no EV | Solar | Export/Import | Usage | Battery | — |
| Battery + EV charging | Solar | Export/Import | Usage | Battery | EV |
| Battery + EV + Heat Pump | Solar | Export/Import | Usage | Battery | EV | Heat Pump |
type: custom:solar-bar-card
show_stats: true
consumer_1_entity: sensor.heat_pump_power
consumer_1_name: "Heat Pump"
consumer_2_entity: sensor.pool_heater_power
consumer_2_name: "Pool"type: custom:solar-bar-card
show_stats: true
show_stats_detail: false- Custom background colors for stats tiles: Each stats tile (Solar, Export, Import, Usage, Battery, EV) can now have its own background color via the palette or
custom_colorsconfiguration. New color keys:stats_solar_background,stats_export_background,stats_import_background,stats_usage_background,stats_battery_background,stats_ev_background. - Custom card background color: The main card background can now be overridden with the
card_backgroundcolor key. - All new background color keys are included in every palette (defaulting to
nullto preserve existing Home Assistant theme behavior). Set a value in the palette or viacustom_colorsto override. - Stats tile border radius: New
stats_border_radiusoption (default8px) in the Display config section. Increase to match rounded card themes like Bubble Cards.
type: custom:solar-bar-card
stats_border_radius: 18
custom_colors:
card_background: '#1a1a2e'
stats_solar_background: '#2d2d44'
stats_export_background: '#1e3a2f'
stats_usage_background: '#3a1e2f'- Removed 'net' text from Export/Import tiles: The net position value in Export/Import stat tiles no longer displays the word "net" after the kWh value, reducing line breaks and card height.
- Battery percentage moved below kW value: The battery state of charge percentage is now displayed below the power value (in the same position as other stat history values) instead of next to the battery label, preventing line breaks that made the card taller than necessary.
- Standby mode embedded in bar: When the solar system is in standby mode, the "Standby Mode" text is now displayed directly inside the solar bar instead of as a separate message below the stats. This prevents the card from increasing in height when the system is idle, which was especially noticeable for users with battery configurations where the bar remained visible alongside the standalone message.
- Standby bar opacity increased from 0.3 to 0.6 for better visibility with the embedded label.
- Standby mode translation strings shortened for all 12 languages to fit cleanly within the bar.
- Custom Labels: Customize all labels displayed in the card (Solar, Import, Export, Usage, Battery, EV, Power Flow). Each label has its own text field in the visual editor; leave empty to use auto-detected language translation.
- Configurable Tap Actions: Each element supports its own tap action (more-info, navigate, call-service, url, none). Uses Home Assistant's standard
ui-actionselector per element. - Multi-Language Support: Built-in translations for 12 languages (EN, DE, FR, ES, IT, NL, PT, PL, SV, DA, NO, UK) with automatic detection from Home Assistant language settings. Zero configuration needed — custom labels override auto-detected translations when set.
- Full visual configuration editor integration with native Home Assistant controls.
- No breaking changes — fully backward compatible with v2.1.x configurations.
- Daily Solar Production and Usage statistics.
- Reorganized UI sections for better configuration experience.
- Net Import/Export history tracking.
- Header sensors with spread layout.
- Improved configuration organization.
- Battery integration: Side-by-side battery and solar bars with flow animations.
- Battery SOC display with charging/discharging indicators.
- SVG-based flow animation with configurable speed.
- Battery bar width proportional to capacity vs inverter size.