What you need
- Home Assistant, with the button-card add-on installed from HACS (Frontend category).
- Your Xpeng’s data in Home Assistant: the XPENG Direct app, the WiCAN Pro dongle, or both. The Xpeng guide explains how.
- The card uses XPENG Direct data when it is less than 30 minutes old, otherwise the WiCAN data. A missing entity simply shows “—” and breaks nothing.
1Install the card
- Paste the main cardDashboard → edit → add card → Manual, then paste the code from the next section.
- Set the variablesThe
variablesblock at the top of the code holds everything that depends on your setup (table below). The most important one isapp: on my setup the XPENG Direct entities are calledsensor.xpeng_vehicle_0000_soc. Keep the start of their name, before_soc. - Add the diagnostics (optional)A second card, pasted the same way, shows the temperatures, cell voltages and 12 V read by the WiCAN.
The main card
State of charge, range, charging, lock, cable, cabin temperature, tyres and windows.
type: custom:button-card
show_name: false
show_icon: false
show_state: false
show_label: true
tap_action:
action: none
hold_action:
action: none
triggers_update: all
grid_options:
columns: full
variables:
nom: Xpeng G6 # nom affiché en haut de la carte
image: https://wattbudget.fr/assets/ha/xpeng-g6.webp # photo de la voiture ; '' pour aucune, ou /local/… (dossier config/www)
capacite_kwh: 80.8 # capacité de la batterie (80,8 kWh sur les G6 2026), pour estimer les kWh manquants
pression_min: 2.3 # plage de pression des pneus jugée normale (bar)
pression_max: 2.8
app: xpeng_vehicle_0000 # début du nom de vos entités XPENG Direct (sensor.xpeng_vehicle_0000_soc…)
wican_soc: sensor.xpeng_g6_soc # entités du WiCAN (noms proposés dans le tutoriel Xpeng)
wican_temp_min: sensor.xpeng_g6_temperature_batterie_min
wican_temp_max: sensor.xpeng_g6_temperature_batterie_max
wican_cell_min: sensor.xpeng_g6_tension_cellule_min
wican_cell_max: sensor.xpeng_g6_tension_cellule_max
wican_12v: sensor.xpeng_g6_tension_12v
wican_courant: sensor.xpeng_g6_courant_batterie
wican_odometre: sensor.xpeng_g6_odometre_fiable
extra_styles: >-
@keyframes g6mv { to { background-position: 26px 0; } }
@keyframes g6pulse { 50% { opacity: .4; } }
.g6halo { animation: g6pulse 2.4s ease-in-out infinite; }
@keyframes g6pl { 50% { opacity: .7; } }
styles:
card:
- background: |
[[[
const V = variables;
const s0 = parseFloat((((Date.now() - new Date(states['sensor.' + V.app + '_last_seen']?.state || 0).getTime()) < 1800000) ? states['sensor.' + V.app + '_soc']?.state : null) ?? states[V.wican_soc]?.state);
const s = isNaN(s0) ? 76 : Math.max(0, Math.min(100, s0));
const S = [[0, [255, 93, 93]], [25, [255, 138, 61]], [45, [247, 209, 84]], [70, [61, 220, 151]], [100, [79, 163, 255]]];
let c = [79, 163, 255];
for (let i = 1; i < S.length; i++) { if (s <= S[i][0]) { const t = (s - S[i - 1][0]) / (S[i][0] - S[i - 1][0]); c = S[i - 1][1].map((x, j) => Math.round(x + (S[i][1][j] - x) * t)); break; } }
return 'radial-gradient(60% 190px at 50% 0, rgba(' + c.join(',') + ',0.14), transparent 75%), #1c1f24';
]]]
- border: 1px solid #2b3038
- border-radius: 18px
- padding: 16px
- box-shadow: none
- overflow: hidden
- pointer-events: auto
label:
- width: 100%
- text-align: left
- white-space: normal
- justify-self: stretch
- pointer-events: auto
label: |
[[[
const V = variables;
const S = e => states[e]?.state;
const N = e => { const x = parseFloat(S(e)); return isNaN(x) ? null : x; };
const lang = String(hass.language || 'fr').slice(0, 2);
const PC = lang === 'en' ? '%' : ' %';
const fr = (x, d) => x === null ? '—' : x.toFixed(d).replace('.', lang === 'en' ? '.' : ',');
const TT = {
fr: { charging: 'En charge', driving: 'En route', asleep: 'En veille', parked: 'Garée', home: 'À la maison', away: 'Hors domicile', seen: 'vu', nodata: 'pas de donnée', now: "à l'instant", ago: (n, u) => 'il y a ' + n + ' ' + u, d: 'j', target: 'Cible', targetIn: (t, d) => t + PC + ' dans ' + d, maxAt: k => 'Max ' + k + ' km à 100 %', missing: k => 'manque ' + k + ' kWh', locked: 'Verrouillée', unlocked: 'Déverrouillée', plugged: 'Branchée', unplugged: 'Non branchée', online: 'En ligne', offline: 'Hors ligne', homeChip: 'Maison', lvl: ['Critique', 'Bas', 'Moyen', 'Bon', 'Plein'], cabin: 'Habitacle', hv: 'Batt. HV', odo: 'Odomètre', tw: 'Pneus et vitres', closed: 'fermée', open: p => 'ouv. ' + p + ' %', ok: 'Tout est OK', tyres: n => n + ' pneu' + (n > 1 ? 's' : '') + ' à vérifier', wins: n => n + ' vitre' + (n > 1 ? 's' : '') + ' ouverte' + (n > 1 ? 's' : ''), hist: 'Historique de la batterie' },
en: { charging: 'Charging', driving: 'Driving', asleep: 'Asleep', parked: 'Parked', home: 'At home', away: 'Away from home', seen: 'seen', nodata: 'no data', now: 'just now', ago: (n, u) => n + ' ' + u + ' ago', d: 'd', target: 'Target', targetIn: (t, d) => t + PC + ' in ' + d, maxAt: k => 'Max ' + k + ' km at 100%', missing: k => k + ' kWh missing', locked: 'Locked', unlocked: 'Unlocked', plugged: 'Plugged in', unplugged: 'Unplugged', online: 'Online', offline: 'Offline', homeChip: 'Home', lvl: ['Critical', 'Low', 'Medium', 'Good', 'Full'], cabin: 'Cabin', hv: 'HV batt.', odo: 'Odometer', tw: 'Tyres and windows', closed: 'closed', open: p => 'open ' + p + '%', ok: 'All good', tyres: n => n + ' tyre' + (n > 1 ? 's' : '') + ' to check', wins: n => n + ' window' + (n > 1 ? 's' : '') + ' open', hist: 'Battery history' },
es: { charging: 'Cargando', driving: 'En marcha', asleep: 'En reposo', parked: 'Aparcado', home: 'En casa', away: 'Fuera de casa', seen: 'visto', nodata: 'sin datos', now: 'ahora mismo', ago: (n, u) => 'hace ' + n + ' ' + u, d: 'd', target: 'Objetivo', targetIn: (t, d) => t + PC + ' en ' + d, maxAt: k => 'Máx. ' + k + ' km al 100 %', missing: k => 'faltan ' + k + ' kWh', locked: 'Bloqueado', unlocked: 'Desbloqueado', plugged: 'Conectado', unplugged: 'Desconectado', online: 'En línea', offline: 'Sin conexión', homeChip: 'Casa', lvl: ['Crítico', 'Bajo', 'Medio', 'Bueno', 'Lleno'], cabin: 'Habitáculo', hv: 'Bat. AV', odo: 'Cuentakm', tw: 'Neumáticos y ventanillas', closed: 'cerrada', open: p => 'abierta ' + p + ' %', ok: 'Todo correcto', tyres: n => n + ' neumático' + (n > 1 ? 's' : '') + ' a revisar', wins: n => n + ' ventanilla' + (n > 1 ? 's' : '') + ' abierta' + (n > 1 ? 's' : ''), hist: 'Historial de la batería' },
de: { charging: 'Lädt', driving: 'Unterwegs', asleep: 'Standby', parked: 'Geparkt', home: 'Zu Hause', away: 'Nicht zu Hause', seen: 'zuletzt gesehen', nodata: 'keine Daten', now: 'gerade eben', ago: (n, u) => 'vor ' + n + ' ' + u, d: 'T', target: 'Ziel', targetIn: (t, d) => t + PC + ' in ' + d, maxAt: k => 'Max. ' + k + ' km bei 100 %', missing: k => 'es fehlen ' + k + ' kWh', locked: 'Verriegelt', unlocked: 'Entriegelt', plugged: 'Angesteckt', unplugged: 'Nicht angesteckt', online: 'Online', offline: 'Offline', homeChip: 'Zuhause', lvl: ['Kritisch', 'Niedrig', 'Mittel', 'Gut', 'Voll'], cabin: 'Innenraum', hv: 'HV-Akku', odo: 'Kilometer', tw: 'Reifen und Fenster', closed: 'geschlossen', open: p => 'offen ' + p + ' %', ok: 'Alles in Ordnung', tyres: n => n + ' Reifen prüfen', wins: n => n + ' Fenster offen', hist: 'Akkuverlauf' }
};
const T = TT[lang] || TT.en;
const P = 'sensor.' + V.app + '_', B = 'binary_sensor.' + V.app + '_';
const fresh = (Date.now() - new Date(S(P + 'last_seen') || 0).getTime()) < 1800000;
const soc = (fresh ? N(P + 'soc') : null) ?? N(V.wican_soc);
const socV = soc === null ? 0 : Math.max(0, Math.min(100, soc));
const rng = fresh ? N(P + 'range') : ((N(P + 'range') !== null && N(P + 'soc') && soc !== null) ? N(P + 'range') * soc / N(P + 'soc') : null);
const tgt = (fresh ? N(P + 'targetsoc') : null) ?? 100;
const miss = fresh ? N(P + 'estimated_kwh_missing') : (soc !== null ? Math.max(0, (tgt - soc) / 100 * V.capacite_kwh) : null);
const online = S(B + 'direct_online') === 'on';
const cable = S(B + 'cable_connected') === 'on';
const locked = S(B + 'driver_door_lock') === 'off';
const charging = S(B + 'charging') === 'on';
const pw = N(P + 'charge_power');
const rem = N(P + 'charge_remaining');
const spd = N(P + 'speed') || 0;
const driving = !charging && spd > 3;
const la = N(P + 'latitude'), lo = N(P + 'longitude');
const hz = states['zone.home']?.attributes;
let home = null;
if (la !== null && lo !== null && hz) {
const dLa = (la - hz.latitude) * 111320, dLo = (lo - hz.longitude) * 111320 * Math.cos(hz.latitude * Math.PI / 180);
home = Math.sqrt(dLa * dLa + dLo * dLo) < 200;
}
const seen = S(P + 'last_seen');
const age = seen ? Math.round((Date.now() - new Date(seen).getTime()) / 60000) : null;
const ageTxt = age === null ? T.nodata : age < 1 ? T.now : age < 60 ? T.ago(age, 'min') : age < 1440 ? T.ago(Math.round(age / 60), 'h') : T.ago(Math.round(age / 1440), T.d);
const C = { g: '#3ddc97', am: '#f5a524', rd: '#ff5d5d', bl: '#4fa3ff', yl: '#f7d154', vi: '#b18cff', or: '#ff8a3d', mu: '#8a919c' };
const STOPS = [[0, [255, 93, 93]], [25, [255, 138, 61]], [45, [247, 209, 84]], [70, [61, 220, 151]], [100, [79, 163, 255]]];
const colAt = s => { for (let i = 1; i < STOPS.length; i++) { if (s <= STOPS[i][0]) { const a = STOPS[i - 1], b = STOPS[i], t = (s - a[0]) / (b[0] - a[0]); return '#' + a[1].map((v, j) => Math.round(v + (b[1][j] - v) * t).toString(16).padStart(2, '0')).join(''); } } return '#4fa3ff'; };
const sc = colAt(socV);
const lvl = T.lvl[socV < 20 ? 0 : socV < 40 ? 1 : socV < 60 ? 2 : socV <= 90 ? 3 : 4];
const mix = (c, a) => c + Math.round(a * 255).toString(16).padStart(2, '0');
const IC = (ic, n, c) => '<span style="width:' + n + 'px;height:' + n + 'px;flex:none;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;line-height:0"><ha-icon icon="' + ic + '" style="--mdc-icon-size:' + n + 'px' + (c ? ';color:' + c : '') + '"></ha-icon></span>';
let st, stIc, stC;
if (charging) { st = T.charging + (pw ? ' ' + fr(pw, 1) + ' kW' : ''); stIc = 'mdi:lightning-bolt'; stC = C.g; }
else if (driving) { st = T.driving; stIc = 'mdi:steering'; stC = C.bl; }
else if (!online) { st = T.asleep; stIc = 'mdi:sleep'; stC = C.mu; }
else { st = T.parked; stIc = 'mdi:parking'; stC = C.vi; }
const where = home === null ? '' : home ? T.home : T.away;
const sub = where + (where ? ' · ' : '') + (driving ? Math.round(spd) + ' km/h' : (age === null ? T.nodata : T.seen + ' ' + ageTxt));
let line;
if (charging) {
line = rem ? T.targetIn(Math.round(tgt), rem >= 60 ? Math.floor(rem / 60) + ' h ' + String(rem % 60).padStart(2, '0') : rem + ' min') : T.target + ' ' + Math.round(tgt) + PC;
} else if (driving) {
line = T.maxAt(fr(N(P + 'max_range'), 0));
} else {
line = T.target + ' ' + Math.round(tgt) + PC + (miss !== null && miss > 0 ? ' · ' + T.missing(fr(miss, 1)) : '');
}
const chip = (ic, t, c) => '<span style="display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:4px 10px;font-size:12px;margin:0 4px 5px 0;background:' + mix(c, 0.14) + ';color:' + c + '">' + IC(ic, 15) + t + '</span>';
let chips = '';
chips += locked ? chip('mdi:lock', T.locked, C.g) : chip('mdi:lock-open-variant', T.unlocked, C.am);
if (charging) chips += chip('mdi:ev-plug-type2', pw ? fr(pw, 1) + ' kW' : T.charging, C.yl);
else chips += cable ? chip('mdi:power-plug', T.plugged, C.bl) : chip('mdi:power-plug-off', T.unplugged, C.mu);
chips += online ? chip('mdi:wifi', T.online, C.g) : chip('mdi:wifi-off', T.offline, C.mu);
if (home) chips += chip('mdi:home', T.homeChip, C.vi);
const tile = (ic, k, v, c, vc) => '<div style="background:#252a31;border-radius:12px;padding:8px 10px;min-width:0;text-align:center;border-top:2px solid ' + c + '"><div style="font-size:11px;color:' + C.mu + ';display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap">' + IC(ic, 14, c) + '<span>' + k + '</span></div><div style="font-size:14px;font-weight:500;white-space:nowrap;margin-top:3px;text-align:center;color:' + (vc || '#e8eaed') + '">' + v + '</div></div>';
const tMin = N(V.wican_temp_min), tMax = N(V.wican_temp_max);
const tb = tMin === null ? '—' : (tMin === tMax ? fr(tMin, 0) : fr(tMin, 0) + '–' + fr(tMax, 0)) + ' °C';
const v12 = N(V.wican_12v);
const odo = N(V.wican_odometre) ?? N(P + 'odometer');
const odoTxt = odo === null ? '—' : Math.round(odo).toLocaleString(lang) + ' km';
const W = { fl: 'front_left', fr: 'front_right', rl: 'rear_left', rr: 'rear_right' };
let nWin = 0, nTyre = 0;
const pill = k => {
const p = N(P + W[k] + '_tire_pressure'), w = N(P + W[k] + '_window_position');
const pOk = p !== null && p >= V.pression_min && p <= V.pression_max, wOk = w === null || w >= 100;
if (!pOk) nTyre++; if (!wOk) nWin++;
const pc = pOk ? C.g : C.am, wc = wOk ? C.g : C.am;
const wt = w === null ? '—' : wOk ? T.closed : T.open(Math.round(100 - w));
return { pc: pc, wc: wc, h: '<div style="display:flex;align-items:center;gap:6px;background:#252a31;border-radius:10px;padding:6px 8px;font-size:13px"><span style="width:8px;height:8px;border-radius:50%;background:' + pc + ';flex:none"></span><b style="font-weight:500">' + fr(p, 2) + '</b><span style="color:' + C.mu + ';font-size:11px;margin-left:auto;display:flex;align-items:center;gap:3px;white-space:nowrap">' + IC('mdi:car-door', 13, wc) + wt + '</span></div>' };
};
const q = { fl: pill('fl'), fr: pill('fr'), rl: pill('rl'), rr: pill('rr') };
const sumTxt = (nTyre === 0 && nWin === 0) ? T.ok : [nTyre ? T.tyres(nTyre) : '', nWin ? T.wins(nWin) : ''].filter(x => x).join(' · ');
const sumC = (nTyre === 0 && nWin === 0) ? C.g : C.am;
const SEC = 'background:#20242a;border:1px solid #2b3038;border-radius:14px;padding:10px 12px;margin-top:10px';
const H4 = (ic, t, r, rc) => '<div style="display:flex;justify-content:space-between;align-items:center;font-size:12px;color:' + C.mu + ';margin-bottom:8px"><span style="display:flex;align-items:center;gap:5px">' + IC(ic, 15) + t + '</span><span style="color:' + rc + '">' + r + '</span></div>';
const MORE = 'onclick="event.stopPropagation();this.dispatchEvent(new CustomEvent(\'hass-more-info\',{bubbles:true,composed:true,detail:{entityId:\'' + P + 'soc\'}}))" title="' + T.hist + '"';
let H = '<div style="color:#e8eaed;font-size:13px;line-height:1.35">';
H += '<div style="display:flex;justify-content:space-between;align-items:flex-start"><div><div style="font-size:18px;font-weight:500">' + V.nom + '</div><div style="font-size:12px;color:' + C.mu + '">' + sub + '</div></div>';
H += '<span style="font-size:12px;padding:3px 10px;border-radius:20px;background:' + mix(stC, 0.18) + ';color:' + stC + ';display:inline-flex;gap:4px;align-items:center;white-space:nowrap">' + IC(stIc, 14) + st + '</span></div>';
if (V.image) {
H += '<div style="position:relative;margin:4px 0 0">';
if (charging) H += '<div class="g6halo" style="position:absolute;left:8%;right:8%;bottom:0;height:26%;border-radius:50%;background:radial-gradient(closest-side,' + mix(sc, 0.6) + ',transparent)"></div>';
H += '<img src="' + V.image + '" style="width:100%;max-width:460px;display:block;margin:0 auto;position:relative"></div>';
} else { H += '<div style="height:10px"></div>'; }
H += '<div ' + MORE + ' style="display:flex;align-items:baseline;gap:10px;white-space:nowrap;cursor:pointer"><span style="font-size:34px;font-weight:500;line-height:1;color:' + sc + '">' + (soc === null ? '—' : Math.round(soc) + PC) + '</span><span style="font-size:16px">' + (rng === null ? '' : fr(rng, 0) + ' km') + '</span><span style="font-size:12px;margin-left:auto;color:' + sc + '">' + lvl + '</span></div>';
H += '<div style="font-size:12px;color:' + C.mu + ';margin:5px 0 7px">' + line + '</div>';
const SPEC = 'linear-gradient(90deg,#ff5d5d 0%,#ff8a3d 25%,#f7d154 45%,#3ddc97 70%,#4fa3ff 100%)';
H += '<div ' + MORE + ' style="position:relative;height:12px;margin:2px 0 4px;cursor:pointer">';
H += '<div style="position:absolute;inset:0;border-radius:6px;overflow:hidden"><div style="position:absolute;inset:0;background:' + SPEC + '"></div>';
if (charging) H += '<div style="position:absolute;top:0;bottom:0;left:0;width:' + socV + '%;background:repeating-linear-gradient(110deg,rgba(255,255,255,.22) 0 8px,transparent 8px 20px);background-size:26px 100%;animation:g6mv .9s linear infinite"></div>';
H += '<div style="position:absolute;top:0;bottom:0;right:0;width:' + (100 - socV) + '%;background:#252a31"></div></div>';
H += '<div style="position:absolute;top:-1px;bottom:-1px;left:calc(' + Math.min(100, tgt) + '% - 1px);width:2px;background:#ffffff66;border-radius:1px"></div>';
H += '<div style="position:absolute;top:-3px;bottom:-3px;left:calc(' + socV + '% - 2px);width:4px;border-radius:2px;background:#fff;box-shadow:0 0 8px #fff' + (charging ? ';animation:g6pl 1.6s ease-in-out infinite' : '') + '"></div></div>';
H += '<div style="display:flex;justify-content:space-between;font-size:10px;color:#5d646e;margin-bottom:10px"><span>0</span><span>20</span><span>40</span><span>60</span><span>80</span><span>100</span></div>';
H += '<div>' + chips + '</div>';
H += '<div style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:5px">';
H += tile('mdi:car-seat', T.cabin, fr(N(P + 'interior_temp'), 0) + ' °C', C.or);
H += tile('mdi:battery-high', T.hv, tb, C.bl);
H += tile('mdi:car-battery', '12 V', fr(v12, 1) + ' V', C.yl, v12 !== null && v12 < 12.2 ? C.rd : null);
H += tile('mdi:counter', T.odo, odoTxt, C.vi);
H += '</div>';
H += '<div style="' + SEC + '">' + H4('mdi:tire', T.tw, sumTxt, sumC);
H += '<div style="display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);gap:8px;align-items:stretch">';
H += '<div style="display:flex;flex-direction:column;justify-content:space-between;padding:16px 0 10px">' + q.fl.h + q.rl.h + '</div>';
H += '<svg viewBox="0 0 92 150" width="92"><rect x="22" y="8" width="48" height="134" rx="22" fill="#2b3038" stroke="#3a414b"/><rect x="28" y="36" width="36" height="24" rx="6" fill="#14171b"/><rect x="28" y="98" width="36" height="20" rx="6" fill="#14171b"/>';
H += '<rect x="22" y="62" width="4" height="16" rx="2" fill="' + q.fl.wc + '"/><rect x="66" y="62" width="4" height="16" rx="2" fill="' + q.fr.wc + '"/><rect x="22" y="82" width="4" height="14" rx="2" fill="' + q.rl.wc + '"/><rect x="66" y="82" width="4" height="14" rx="2" fill="' + q.rr.wc + '"/>';
H += '<rect x="14" y="28" width="9" height="22" rx="3" fill="' + q.fl.pc + '"/><rect x="69" y="28" width="9" height="22" rx="3" fill="' + q.fr.pc + '"/><rect x="14" y="104" width="9" height="22" rx="3" fill="' + q.rl.pc + '"/><rect x="69" y="104" width="9" height="22" rx="3" fill="' + q.rr.pc + '"/>';
H += '<text x="46" y="20" text-anchor="middle" fill="#8a919c" font-size="9">▲</text></svg>';
H += '<div style="display:flex;flex-direction:column;justify-content:space-between;padding:16px 0 10px">' + q.fr.h + q.rr.h + '</div>';
H += '</div></div>';
return H + '</div>';
]]]Battery diagnostics (WiCAN)
Optional. High-voltage current, temperatures, cell voltages, 12 V. Needs the WiCAN entities.
type: custom:button-card
show_name: false
show_icon: false
show_state: false
show_label: true
tap_action:
action: none
hold_action:
action: none
triggers_update: all
grid_options:
columns: full
variables:
wican_soc: sensor.xpeng_g6_soc # entités du WiCAN (noms proposés dans le tutoriel Xpeng)
wican_temp_min: sensor.xpeng_g6_temperature_batterie_min
wican_temp_max: sensor.xpeng_g6_temperature_batterie_max
wican_cell_min: sensor.xpeng_g6_tension_cellule_min
wican_cell_max: sensor.xpeng_g6_tension_cellule_max
wican_12v: sensor.xpeng_g6_tension_12v
wican_courant: sensor.xpeng_g6_courant_batterie
styles:
card:
- background: '#1c1f24'
- border: 1px solid #2b3038
- border-radius: 18px
- padding: 16px
- box-shadow: none
- overflow: hidden
label:
- width: 100%
- text-align: left
- white-space: normal
- justify-self: stretch
label: |
[[[
const V = variables;
const S = e => states[e]?.state;
const N = e => { const x = parseFloat(S(e)); return isNaN(x) ? null : x; };
const lang = String(hass.language || 'fr').slice(0, 2);
const fr = (x, d) => (x === null || isNaN(x)) ? '—' : x.toFixed(d).replace('.', lang === 'en' ? '.' : ',');
const TT = {
fr: { title: 'Diagnostic batterie', nodata: 'pas de donnée', upd: n => 'maj il y a ' + n + ' min', hvOn: 'HV active', hvOff: 'HV en veille', cur: 'Courant HV', tmin: 'Temp. min', tmax: 'Temp. max', cmin: 'Cellule min', cmax: 'Cellule max', spread: 'Écart cellules', note: "Lecture directe OBD par le WiCAN Pro (MQTT), complétée par XPENG Direct pour les portes, vitres, pneus et la position. L'état de santé (SOH) et la tension du pack ne sont pas exposés." },
en: { title: 'Battery diagnostics', nodata: 'no data', upd: n => 'updated ' + n + ' min ago', hvOn: 'HV active', hvOff: 'HV asleep', cur: 'HV current', tmin: 'Min temp.', tmax: 'Max temp.', cmin: 'Min cell', cmax: 'Max cell', spread: 'Cell spread', note: 'Read straight from the OBD port by the WiCAN Pro (MQTT), with XPENG Direct adding doors, windows, tyres and position. State of health (SOH) and pack voltage are not exposed.' },
es: { title: 'Diagnóstico de la batería', nodata: 'sin datos', upd: n => 'actualizado hace ' + n + ' min', hvOn: 'AV activa', hvOff: 'AV en reposo', cur: 'Corriente AV', tmin: 'Temp. mín.', tmax: 'Temp. máx.', cmin: 'Celda mín.', cmax: 'Celda máx.', spread: 'Dif. celdas', note: 'Lectura directa del OBD con el WiCAN Pro (MQTT), completada con XPENG Direct para puertas, ventanillas, neumáticos y posición. El estado de salud (SOH) y la tensión del pack no están disponibles.' },
de: { title: 'Akku-Diagnose', nodata: 'keine Daten', upd: n => 'aktualisiert vor ' + n + ' Min.', hvOn: 'HV aktiv', hvOff: 'HV im Standby', cur: 'HV-Strom', tmin: 'Temp. min.', tmax: 'Temp. max.', cmin: 'Zelle min.', cmax: 'Zelle max.', spread: 'Zellspreizung', note: 'Direkt über den OBD-Anschluss vom WiCAN Pro gelesen (MQTT), ergänzt durch XPENG Direct für Türen, Fenster, Reifen und Position. Gesundheitszustand (SOH) und Packspannung sind nicht verfügbar.' }
};
const T = TT[lang] || TT.en;
const C = { g: '#3ddc97', am: '#f5a524', rd: '#ff5d5d', bl: '#4fa3ff', yl: '#f7d154', vi: '#b18cff', or: '#ff8a3d', mu: '#8a919c' };
const mix = (c, a) => c + Math.round(a * 255).toString(16).padStart(2, '0');
const IC = (ic, n, c) => '<span style="width:' + n + 'px;height:' + n + 'px;flex:none;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;line-height:0"><ha-icon icon="' + ic + '" style="--mdc-icon-size:' + n + 'px' + (c ? ';color:' + c : '') + '"></ha-icon></span>';
const tile = (ic, k, val, c, vc) => '<div style="background:#252a31;border-radius:12px;padding:8px 6px;min-width:0;text-align:center;border-top:2px solid ' + c + '"><div style="font-size:11px;color:#8a919c;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap">' + IC(ic, 14, c) + '<span>' + k + '</span></div><div style="font-size:15px;font-weight:500;white-space:nowrap;margin-top:3px;color:' + (vc || '#e8eaed') + '">' + val + '</div></div>';
const grid = (n, a) => '<div style="display:grid;grid-template-columns:repeat(' + n + ',minmax(0,1fr));gap:8px;margin-top:10px">' + a.join('') + '</div>';
const badge = (t, ic, c) => '<span style="margin-left:auto;font-size:12px;padding:3px 10px;border-radius:20px;background:' + mix(c, .18) + ';color:' + c + ';display:inline-flex;gap:4px;align-items:center;white-space:nowrap">' + IC(ic, 14) + '<span>' + t + '</span></span>';
const hd = (ic, c, t, s, b) => '<div style="display:flex;align-items:center;gap:10px"><div style="width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:' + mix(c, .18) + ';flex:none">' + IC(ic, 19, c) + '</div><div style="min-width:0"><div style="font-size:15px;font-weight:500">' + t + '</div><div style="font-size:12px;color:#8a919c">' + s + '</div></div>' + (b || '') + '</div>';
const tMin = N(V.wican_temp_min), tMax = N(V.wican_temp_max);
const cMin = N(V.wican_cell_min), cMax = N(V.wican_cell_max);
const v12 = N(V.wican_12v), cur = N(V.wican_courant);
const lu = states[V.wican_soc]?.last_updated;
const age = lu ? Math.round((Date.now() - new Date(lu).getTime()) / 60000) : null;
const hv = v12 !== null && v12 > 13.3;
let H = '<div style="color:#e8eaed;font-size:13px;line-height:1.35;width:100%">';
H += hd('mdi:car-wrench', C.bl, T.title, 'WiCAN OBD · ' + (age === null ? T.nodata : T.upd(age)), badge(hv ? T.hvOn : T.hvOff, 'mdi:flash', hv ? C.g : C.mu));
H += grid(3, [
tile('mdi:current-dc', T.cur, fr(cur, 1) + ' A', C.bl),
tile('mdi:thermometer-low', T.tmin, fr(tMin, 0) + ' °C', C.bl),
tile('mdi:thermometer-high', T.tmax, fr(tMax, 0) + ' °C', C.or),
tile('mdi:sine-wave', T.cmin, fr(cMin, 3) + ' V', C.g),
tile('mdi:sine-wave', T.cmax, fr(cMax, 3) + ' V', C.g),
tile('mdi:car-battery', '12 V', fr(v12, 1) + ' V', C.yl, v12 !== null && v12 < 12.2 ? C.rd : null)
]);
H += grid(1, [tile('mdi:delta', T.spread, (cMin !== null && cMax !== null) ? fr((cMax - cMin) * 1000, 0) + ' mV' : '—', C.vi)]);
H += '<div style="display:flex;gap:6px;margin-top:10px;font-size:11px;color:#6b727c;line-height:1.5">' + IC('mdi:information-outline', 14) + '<span>' + T.note + '</span></div>';
return H + '</div>';
]]]The variables
| Variable | Purpose |
|---|---|
| nom | Name shown at the top of the card. |
| image | Car photo. By default, the one hosted on this site. To avoid depending on the site, save it in config/www and enter /local/xpeng-g6.webp; '' shows no image. |
| capacite_kwh | Battery capacity, used to estimate the missing kWh when XPENG Direct stops answering (80.8 on 2026 G6). |
| pression_min, pression_max | Tyre pressure range considered normal, in bar. Outside it, the tyre turns orange. |
| app | Start of your XPENG Direct entity names, before _soc (e.g. xpeng_vehicle_0000). |
| wican_soc | Battery level read by the WiCAN, used when XPENG Direct has sent nothing for 30 minutes. |
| wican_temp_min, wican_temp_max | High-voltage battery temperatures. |
| wican_cell_min, wican_cell_max | Lowest and highest cell voltages (diagnostics). |
| wican_12v, wican_courant | 12 V battery voltage and high-voltage current (diagnostics). |
| wican_odometre | Accurate odometer from the WiCAN; otherwise the XPENG Direct one. |

The G6 photo is hosted on this site: download the image. For another car or colour, just change the image variable.
On my own dashboard the card also shows the solar share of every charge and the year’s summary: those figures come from my charging station, batteries and tariffs, so they are not in this code.
Going further
Does your car reach Home Assistant another way? Share your method: the next guides will follow your feedback.
What does a charge really cost you? Off-peak tariffs, solar, rapid chargers and XCombo codes: Watt Budget works it all out, free and without an account.
Open Watt Budget