Using your gas implementation (great idea!) as a foundation, I optimized that idea a bit by building a custom js-script with Geminis help to modify the frontend a bit.
Adding this in your configuration.yaml:
frontend:
extra_module_url:
- /local/fix-energy-text.js
and this as a new file called fix-energy-text.js in /config/www/:
(function() {
const translations = {
'Gas': 'Wallbox',
'Gasverbrauch': 'Wallbox-Ladung'
};
const pathEV = "M19.77,7.23L19.78,7.22L16.06,3.5L15,4.56L17.11,6.67C16.17,7.03 15.5,7.93 15.5,9A2.5,2.5 0 0,0 18,11.5C18.36,11.5 18.69,11.42 19,11.29V18.5A1,1 0 0,1 18,19.5A1,1 0 0,1 17,18.5V14A2,2 0 0,0 15,12H14V5A2,2 0 0,0 12,3H6A2,2 0 0,0 4,5V21H14V13.5H15.5V18.5A2.5,2.5 0 0,0 18,21A2.5,2.5 0 0,0 20.5,18.5V9C20.5,8.31 20.22,7.68 19.77,7.23M18,10A1,1 0 0,1 17,9A1,1 0 0,1 18,8A1,1 0 0,1 19,9A1,1 0 0,1 18,10M8,18V13.5H6L10,6V11H12L8,18Z";
const colorChartreuse = "#7FFF00";
const colorChartreuseAlpha = "rgba(127, 255, 0, 0.5)";
function processNode(node) {
// 1. Texte (global)
if (node.nodeType === Node.TEXT_NODE) {
for (const [oldText, newText] of Object.entries(translations)) {
if (node.nodeValue.includes(oldText)) {
node.nodeValue = node.nodeValue.replace(new RegExp(oldText, 'g'), newText);
}
}
}
if (node.nodeType === Node.ELEMENT_NODE) {
// 2. CSS Variablen fĂźr Charts
if (node.tagName === 'HA-PANEL-ENERGY') {
node.style.setProperty('--energy-gas-color', colorChartreuse);
node.style.setProperty('--state-gas-color', colorChartreuse);
}
// 3. ICON-PFADE & ANIMATION (Suche Ăźber den Pfad-Inhalt als Anker)
if (node.tagName === 'path') {
const d = node.getAttribute('d') || "";
// Check A: Ist es die Flamme? (Identifikation Ăźber Pfad-Anfang)
if (d.startsWith("M17.66")) {
// Wir prĂźfen, ob dieser Pfad in einem "gas" Container liegt (DOM-Tree hochwandern)
if (node.closest('.gas') || node.getRootNode().host?.closest('.gas')) {
node.setAttribute('d', pathEV);
}
}
// Check B: Ist es die Animations-Schiene?
if (node.id === 'gas' || d === "M40 0 v30" || d === "M40 0v30") {
node.setAttribute('d', "M40 30 v-30");
node.style.stroke = colorChartreuse;
}
}
// 4. FARBEN (Tabellen & Kreise)
// Kreis-Container einfärben
if (node.classList && node.classList.contains('gas')) {
if (node.classList.contains('circle-container') || node.classList.contains('circle')) {
node.style.color = colorChartreuse;
node.style.borderColor = colorChartreuse;
}
// Animations-Punkt umfärben
if (node.tagName === 'circle') {
node.style.fill = colorChartreuse;
}
}
// Tabellen-Balken Ăźber Hex-Code identifizieren
const styleAttrib = node.getAttribute('style') || "";
if (styleAttrib.toLowerCase().includes('8e021b')) {
node.style.backgroundColor = styleAttrib.includes('7f') ? colorChartreuseAlpha : colorChartreuse;
node.style.borderColor = colorChartreuse;
}
// 5. Shadow-DOM Untersuchung
if (node.shadowRoot) {
processShadow(node.shadowRoot);
}
}
node.childNodes.forEach(processNode);
}
function processShadow(root) {
processNode(root);
if (!root._observed) {
const observer = new MutationObserver(() => processNode(root));
observer.observe(root, { childList: true, subtree: true });
root._observed = true;
}
}
setInterval(() => processNode(document.body), 1500);
})();
you can get an Energy Card that looks like this:
Of course you have to make it work with your language by replacing the âGasâ and âGasverbrauchâ with whatever it says in the dashboard in your language and with whatever you want it to say instead of âWallboxâ and âWallboxverbrauchâ. As long as thereâs no 1st party way, Iâm pretty happy with that workaround!
After saving the file, you have to restart HA and hard reload (without caches!) the website for the changes to apply!
