A comprehensive Lovelace card for monitoring Pylontech (SOK) BMS battery systems in Home Assistant. Designed to work with entites created by the Pylontech BMS Integration https://github.com/jtubb/HA-Pylontech-BMS but should work with any that follow similar naming convetions.

• System Overview - Total voltage, power, average cycles, and time to empty/full estimates
• Multi-Pack Monitoring - Display 1-16+ battery packs in a responsive grid layout
• Interactive Heatmaps - Click temperature or voltage labels to view cell-level heatmaps
• History Graphs - Click any metric to view historical data powered by mini-graph-card
• Real-time Updates - Live monitoring with visual SOC indicators and color coding
• Responsive Design - Optimized layouts for desktop, tablet, and mobile devices
• Pack Metrics - Voltage, current, power, delta V, and temperature for each pack
• Visual Alerts - Instant warnings for packs with alarms or faults

• Home Assistant 2024.1.0 or newer
• Pylontech BMS Integration installed and configured
• mini-graph-card (required for history graphs)

1. Open HACS in Home Assistant
2. Go to "Frontend"
3. Click the three dots in the top right corner
4. Select "Custom repositories"
5. Add this repository URL: https://github.com/jtubb/pylontech-battery-card
6. Select category: "Lovelace"
7. Click "Add"
8. Find "Pylontech Battery Card" in the list and click "Install"
9. Install mini-graph-card from HACS
10. Add the resource (see below - this is required!)
11. Clear your browser cache (Ctrl+Shift+R or Cmd+Shift+R)
12. Restart Home Assistant

This step is required or you'll get "Custom element doesn't exist" error!

Method 1: Via UI (Recommended)

1. Go to Settings → Dashboards → Resources (three-dot menu in top right)
2. Click "Add Resource"
3. URL: /hacsfiles/pylontech-battery-card/pylontech-battery-overview.js
4. Type: JavaScript Module
5. Click "Create"
6. Clear browser cache (Ctrl+Shift+R)

Method 2: Via configuration.yaml

lovelace:
  resources:
    - url: /hacsfiles/pylontech-battery-card/pylontech-battery-overview.js
      type: module

1. Download pylontech-battery-overview.js from the latest release
2. Copy the file to config/www/ directory
3. Install mini-graph-card manually
4. Add to your Lovelace resources:

   - url: /local/pylontech-battery-overview.js
     type: module
   - url: /local/mini-graph-card-bundle.js
     type: module

5. Restart Home Assistant

type: custom:pylontech-battery-overview
entity_prefix: sensor.sok_rack_1
start_index: 1
end_index: 5

type: custom:pylontech-battery-overview
entity_prefix: sensor.sok_rack_1
start_index: 1
end_index: 5
title: Battery System Overview
show_system_overview: true
show_packs: true

The card expects entities to follow this naming pattern:

{entity_prefix}_pack_{N}_{metric}

Examples:

• sensor.sok_rack_1_pack_1_pack_voltage
• sensor.sok_rack_1_pack_1_state_of_charge
• sensor.sok_rack_1_pack_1_temperature_cells_1_4
• sensor.sok_rack_1_pack_1_cell_0_voltage

type: custom:pylontech-battery-overview
entity_prefix: sensor.sok_rack_1
start_index: 1
end_index: 5
title: Main Battery System

type: custom:pylontech-battery-overview
entity_prefix: sensor.sok_rack_1
start_index: 1
end_index: 1
title: Battery Pack

type: custom:pylontech-battery-overview
entity_prefix: sensor.sok_rack_1
start_index: 1
end_index: 5
title: System Statistics
show_system_overview: true
show_packs: false

type: custom:pylontech-battery-overview
entity_prefix: sensor.sok_rack_1
start_index: 1
end_index: 16
title: Large Battery System

type: vertical-stack
cards:
  - type: custom:pylontech-battery-overview
    entity_prefix: sensor.sok_rack_1
    start_index: 1
    end_index: 5
    title: Rack 1 - Main System

  - type: custom:pylontech-battery-overview
    entity_prefix: sensor.sok_rack_2
    start_index: 1
    end_index: 3
    title: Rack 2 - Backup System

• Temperature Heatmap: Click the "Temperature" label in any pack card to view cell temperature distribution
• Voltage Heatmap: Click the "Delta V" label to view cell voltage distribution
• Cell History: Click any individual cell in the heatmap to view its history graph

• Click any system metric (voltage, power, cycles, etc.) to view its history
• Click any pack metric to view that pack's history
• Zoom controls: 1h, 3h, 6h, 12h, 24h intervals
• Powered by mini-graph-card for smooth, interactive graphs

• Red (< 20%): Critical low battery
• Orange (20-50%): Low battery
• Normal (> 50%): Adequate charge

• Red border + warning icon: Pack has active alarms or faults
• Click the pack for detailed information

• Blue: Lower values (cooler temperature or lower voltage)
• Yellow/Orange: Medium values
• Red: Higher values (warmer temperature or higher voltage)

• Green checkmark: All systems normal
• Red warning icon: One or more packs have issues

This is the most common issue after HACS installation.

The JavaScript file hasn't been loaded as a resource.

Solution:

1. Go to Settings → Dashboards → Resources (click three dots in top right)
2. Verify resource is added: /hacsfiles/pylontech-battery-card/pylontech-battery-overview.js
3. If missing, click "Add Resource" and add it (Type: JavaScript Module)
4. Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
5. Refresh the page

Verify files exist:

ls /config/www/community/pylontech-battery-card/

You should see pylontech-battery-overview.js. If missing, reinstall from HACS.

1. Verify the Pylontech BMS integration is installed and working
2. Check sensors exist in Developer Tools → States
3. Verify mini-graph-card is installed from HACS
4. Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
5. Check browser console for errors (F12 → Console tab)
6. Verify the resource is loaded (see above)

1. Check entity prefix is correct (e.g., sensor.sok_rack_1)
2. Verify entities exist in Developer Tools → States
3. Check pack numbering matches your actual packs
4. Ensure entities follow the naming pattern: {prefix}_pack_{N}_{metric}

1. Ensure mini-graph-card is installed from HACS
2. Verify mini-graph-card is in Lovelace resources
3. Check browser console for errors (F12)
4. Verify entities have recorded history data in Home Assistant

1. Verify cell entities exist (e.g., sensor.sok_rack_1_pack_1_cell_0_voltage)
2. Check entity naming follows the expected pattern
3. Ensure entities have valid numeric values
4. Check browser console for errors

1. Reduce number of packs displayed (split into multiple cards)
2. Disable heatmaps by not clicking labels
3. Check Home Assistant system resources
4. Verify network connection is stable

1. Clone the repository
2. Make changes to pylontech-battery-overview.js
3. Copy to config/www/ for testing
4. Refresh browser cache to see changes

This card is written in vanilla JavaScript and doesn't require a build step. Simply edit the .js file directly.

Test on multiple screen sizes:

• Desktop (1920x1080)
• Tablet (768x1024)
• Mobile (375x667)

• Issues: GitHub Issues
• Integration: Pylontech BMS Integration
• mini-graph-card: GitHub

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test on multiple screen sizes
5. Submit a pull request

MIT License - see LICENSE file for details

• Created for use with the Pylontech BMS Integration
• History graphs powered by mini-graph-card by @kalkih

• Simplified: Removed single-pack card, overview card now handles all use cases
• Improved documentation and troubleshooting guides
• Clearer HACS installation instructions
• Better example configurations

• Added Battery Overview Card for multi-pack system monitoring
• Integrated mini-graph-card for history visualization
• Added interactive temperature and voltage heatmaps
• Implemented responsive design for mobile and desktop
• Added system-level statistics (total power, cycles, time estimates)