From 9b557272de6962d5d72b7a71d5ce4a5cde522f22 Mon Sep 17 00:00:00 2001 From: Ian Boston Date: Sun, 23 Jun 2024 11:41:30 +0100 Subject: [PATCH] Added charge dischage guage --- ui/lifepo4/README.md | 1 + ui/lifepo4/index.html | 110 ++++++++++++++++++++++++++++++++++++++++++ ui/lifepo4/index.js | 32 ++++++++++++ ui/lifepo4/main.css | 44 ++++++++++++++++- 4 files changed, 186 insertions(+), 1 deletion(-) diff --git a/ui/lifepo4/README.md b/ui/lifepo4/README.md index 79b7a8e..8d474e0 100644 --- a/ui/lifepo4/README.md +++ b/ui/lifepo4/README.md @@ -23,4 +23,5 @@ The Bluetooth adapter for these BMS exposes Modbus RTE from the BMS UART over 2 - [x] Convert into a PWA. - [x] Extend time window to 24h and allow zooming into the graphs. - [-] ~~Make the BLE work in the background ~~ The Web Bluetooth API is not available in any background task. +- [x] Add charge discharge gauge in svg diff --git a/ui/lifepo4/index.html b/ui/lifepo4/index.html index 4298125..2067564 100644 --- a/ui/lifepo4/index.html +++ b/ui/lifepo4/index.html @@ -18,7 +18,117 @@
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + ?v + + ?A + + + ?Ah + + + +
  • State
  • Voltage: ? V
    • diff --git a/ui/lifepo4/index.js b/ui/lifepo4/index.js index 66f344e..549de11 100644 --- a/ui/lifepo4/index.js +++ b/ui/lifepo4/index.js @@ -50,6 +50,7 @@ window.addEventListener('load', () => { document.getElementById('connect').addEventListener('click', bleReader.connectBMS); document.getElementById('disconnect').addEventListener('click', bleReader.disconnectBMS); + const setInnerHtmlById = (id, value) => { const el = document.getElementById(id); if (el) { @@ -69,7 +70,38 @@ window.addEventListener('load', () => { setClass('disconnect', connected, '', 'hidden'); }); + const updateGuage = (statusUpdate) => { + setInnerHtmlById('guageVoltageText', `${statusUpdate.voltage.toFixed(2)}V`); + setInnerHtmlById('guageCurrentText', `${statusUpdate.current.toFixed(1)}A`); + const stateOfChargeAh = (statusUpdate.capacity.stateOfCharge / 100) + * statusUpdate.capacity.fullCapacity; + setInnerHtmlById('guageStateOfChargeText', `${stateOfChargeAh.toFixed(0)}Ah`); + setClass('currentWidget', (statusUpdate.current > 0), 'charging', 'discharging'); + + + const currentGuage = document.getElementById('currentGuage'); + + const currentGuageLength = (Math.abs(statusUpdate.current) / 100) * 353; + currentGuage.setAttribute('stroke-dasharray', `${currentGuageLength} 471`); + if (statusUpdate.current > 0) { + currentGuage.setAttribute('stroke', 'url(#currentGradCharge)'); + } else { + currentGuage.setAttribute('stroke', 'url(#currentGradDischarge)'); + } + + const stateOfChargeGauge = document.getElementById('chargeGuage'); + const stateOfChargeBase = document.getElementById('stateOfChargeBase'); + + const stateOfChageLength = 120 - (statusUpdate.capacity.stateOfCharge / 100) * 120; + stateOfChargeGauge.setAttribute('stroke-dasharray', `${stateOfChageLength} 471`); + + const socp = Math.min(100, 10 * Math.floor((statusUpdate.capacity.stateOfCharge + 5) / 10)); + stateOfChargeBase.setAttribute('class', `guageSubBase_${socp}`); + }; + bleReader.on('statusUpdate', (statusUpdate) => { + updateGuage(statusUpdate); + setInnerHtmlById('status.voltage', statusUpdate.voltage.toFixed(2)); setInnerHtmlById('status.current', statusUpdate.current.toFixed(1)); setInnerHtmlById('status.capacity.stateOfCharge', statusUpdate.capacity.stateOfCharge.toFixed(0)); diff --git a/ui/lifepo4/main.css b/ui/lifepo4/main.css index 61e8a3d..db373b0 100644 --- a/ui/lifepo4/main.css +++ b/ui/lifepo4/main.css @@ -39,4 +39,46 @@ body { .hidden { display: none; -} \ No newline at end of file +} + +.guage text { + fill: white; +} + +#guageVoltageText { + font-size: 2rem; +} + +.guageSubBase_0 { + stroke: #ff1f00; +} +.guageSubBase_10 { + stroke: #ff5b00f7; +} +.guageSubBase_20 { + stroke: #ff8b00f7; +} +.guageSubBase_30 { + stroke: #ffba00f7; +} +.guageSubBase_40 { + stroke: #ffdf00f7; +} +.guageSubBase_50 { + stroke: #daff00f7; +} +.guageSubBase_60 { + stroke: #5fd80bf7; +} +.guageSubBase_70 { + stroke: #24d80bf7; +} +.guageSubBase_80 { + stroke: #14c20af7; +} +.guageSubBase_90 { + stroke: #1ba213f7; +} +.guageSubBase_100 { + stroke: #228c1cf7; +}