Show (Pylontech) battery infos in Live View

* adding data age to battery data

* Add battery enabled flag

* Webapi and websocket api for Battery

* Webinterface for battery

* fixed bug due to naming inconsistencies

* cleaned up rounding

* dist update

* change typename to uppercase

* reverting to original file

include/Battery.h

@@ -5,6 +5,8 @@
 
 class BatteryClass {
 public:
+    uint32_t lastUpdate;
+
     float chargeVoltage;
     float chargeCurrentLimitation;
     float dischargeCurrentLimitation;

include/WebApi.h

@@ -27,6 +27,8 @@
 #include "WebApi_vedirect.h"
 #include "WebApi_ws_Huawei.h"
 #include "WebApi_Huawei.h"
+#include "WebApi_ws_Pylontech.h"
+#include "WebApi_Pylontech.h"
 #include <ESPAsyncWebServer.h>
 
 class WebApiClass {
@@ -70,6 +72,8 @@ private:
     WebApiVedirectClass _webApiVedirect;
     WebApiHuaweiClass _webApiHuaweiClass;
     WebApiWsHuaweiLiveClass _webApiWsHuaweiLive;
+    WebApiPylontechClass _webApiPylontechClass;
+    WebApiWsPylontechLiveClass _webApiWsPylontechLive;
     
 };
 

include/WebApi_Pylontech.h

@@ -0,0 +1,17 @@
+// SPDX-License-Identifier: GPL-2.0-or-later
+#pragma once
+
+#include <ESPAsyncWebServer.h>
+#include <AsyncJson.h>
+
+class WebApiPylontechClass {
+public:
+    void init(AsyncWebServer* server);
+    void loop();
+    void getJsonData(JsonObject& root);
+
+private:
+    void onStatus(AsyncWebServerRequest* request);
+
+    AsyncWebServer* _server;
+};

include/WebApi_ws_Pylontech.h

@@ -0,0 +1,23 @@
+// SPDX-License-Identifier: GPL-2.0-or-later
+#pragma once
+
+#include "ArduinoJson.h"
+#include <ESPAsyncWebServer.h>
+
+class WebApiWsPylontechLiveClass {
+public:
+    WebApiWsPylontechLiveClass();
+    void init(AsyncWebServer* server);
+    void loop();
+
+private:
+    void generateJsonResponse(JsonVariant& root);
+    void onLivedataStatus(AsyncWebServerRequest* request);
+    void onWebsocketEvent(AsyncWebSocket* server, AsyncWebSocketClient* client, AwsEventType type, void* arg, uint8_t* data, size_t len);
+
+    AsyncWebServer* _server;
+    AsyncWebSocket _ws;
+
+    uint32_t _lastWsCleanup = 0;
+    uint32_t _lastUpdateCheck = 0;
+};

src/PylontechCanReceiver.cpp

@@ -133,6 +133,7 @@ void PylontechCanReceiverClass::parseCanPackets()
             Battery.stateOfCharge = this->readUnsignedInt16(rx_message.data);
             Battery.stateOfChargeLastUpdate = millis();
             Battery.stateOfHealth = this->readUnsignedInt16(rx_message.data + 2);
+            Battery.lastUpdate = millis();
 
 #ifdef PYLONTECH_DEBUG_ENABLED
             MessageOutput.printf("[Pylontech] soc: %d soh: %d\n",

src/WebApi.cpp

@@ -43,6 +43,8 @@ void WebApiClass::init()
     _webApiVedirect.init(&_server);
     _webApiWsHuaweiLive.init(&_server);
     _webApiHuaweiClass.init(&_server);
+    _webApiWsPylontechLive.init(&_server);
+    _webApiPylontechClass.init(&_server);
 
     _server.begin();
 }
@@ -74,6 +76,8 @@ void WebApiClass::loop()
     _webApiVedirect.loop();
     _webApiWsHuaweiLive.loop();
     _webApiHuaweiClass.loop();
+    _webApiWsPylontechLive.loop();
+    _webApiPylontechClass.loop();
 }
 
 bool WebApiClass::checkCredentials(AsyncWebServerRequest* request)

src/WebApi_Pylontech.cpp

@@ -0,0 +1,87 @@
+// SPDX-License-Identifier: GPL-2.0-or-later
+/*
+ * Copyright (C) 2022 Thomas Basler and others
+ */
+#include "WebApi_Pylontech.h"
+#include "Battery.h"
+#include "Configuration.h"
+#include "MessageOutput.h"
+#include "WebApi.h"
+#include "WebApi_errors.h"
+#include <AsyncJson.h>
+#include <Hoymiles.h>
+
+void WebApiPylontechClass::init(AsyncWebServer* server)
+{
+    using std::placeholders::_1;
+
+    _server = server;
+
+    _server->on("/api/battery/livedata", HTTP_GET, std::bind(&WebApiPylontechClass::onStatus, this, _1));
+}
+
+void WebApiPylontechClass::loop()
+{
+}
+
+void WebApiPylontechClass::getJsonData(JsonObject& root) {
+
+    root["data_age"] = (millis() - Battery.lastUpdate) / 1000;
+
+    root[F("chargeVoltage")]["v"] = Battery.chargeVoltage ;
+    root[F("chargeVoltage")]["u"] = "V";
+    root[F("chargeCurrentLimitation")]["v"] = Battery.chargeCurrentLimitation ;
+    root[F("chargeCurrentLimitation")]["u"] = "A";
+    root[F("dischargeCurrentLimitation")]["v"] = Battery.dischargeCurrentLimitation ;
+    root[F("dischargeCurrentLimitation")]["u"] = "A";
+    root[F("stateOfCharge")]["v"] = Battery.stateOfCharge ;
+    root[F("stateOfCharge")]["u"] = "%";
+    root[F("stateOfHealth")]["v"] = Battery.stateOfHealth ;
+    root[F("stateOfHealth")]["u"] = "%";
+    root[F("voltage")]["v"] = Battery.voltage;
+    root[F("voltage")]["u"] = "V";
+    root[F("current")]["v"] = Battery.current ;
+    root[F("current")]["u"] = "A";
+    root[F("temperature")]["v"] = Battery.temperature ;
+    root[F("temperature")]["u"] = "°C";
+
+    // Alarms
+    root["alarms"][F("dischargeCurrent")] = Battery.alarmOverCurrentDischarge ;
+    root["alarms"][F("chargeCurrent")] = Battery.alarmOverCurrentCharge ;
+    root["alarms"][F("lowTemperature")] = Battery.alarmUnderTemperature ;
+    root["alarms"][F("highTemperature")] = Battery.alarmOverTemperature ;
+    root["alarms"][F("lowVoltage")] = Battery.alarmUnderVoltage ;
+    root["alarms"][F("highVoltage")] = Battery.alarmOverVoltage ;
+    root["alarms"][F("bmsInternal")] = Battery.alarmBmsInternal ;
+
+    // Warnings
+    root["warnings"][F("dischargeCurrent")] = Battery.warningHighCurrentDischarge ;
+    root["warnings"][F("chargeCurrent")] = Battery.warningHighCurrentCharge ;
+    root["warnings"][F("lowTemperature")] = Battery.warningLowTemperature ;
+    root["warnings"][F("highTemperature")] = Battery.warningHighTemperature ;
+    root["warnings"][F("lowVoltage")] = Battery.warningLowVoltage ;
+    root["warnings"][F("highVoltage")] = Battery.warningHighVoltage ;
+    root["warnings"][F("bmsInternal")] = Battery.warningBmsInternal ;
+
+    // Misc
+    root[F("manufacturer")] = Battery.manufacturer ;
+    root[F("chargeEnabled")] = Battery.chargeEnabled ;
+    root[F("dischargeEnabled")] = Battery.dischargeEnabled ;
+    root[F("chargeImmediately")] = Battery.chargeImmediately ;
+
+}
+
+void WebApiPylontechClass::onStatus(AsyncWebServerRequest* request)
+{
+    if (!WebApi.checkCredentialsReadonly(request)) {
+        return;
+    }
+
+    AsyncJsonResponse* response = new AsyncJsonResponse();
+    JsonObject root = response->getRoot();
+    getJsonData(root);
+
+    response->setLength();
+    request->send(response);
+}
+

src/WebApi_ws_Pylontech.cpp

@@ -0,0 +1,146 @@
+// SPDX-License-Identifier: GPL-2.0-or-later
+/*
+ * Copyright (C) 2022 Thomas Basler and others
+ */
+#include "WebApi_ws_Pylontech.h"
+#include "AsyncJson.h"
+#include "Configuration.h"
+#include "Battery.h"
+#include "MessageOutput.h"
+#include "WebApi.h"
+#include "defaults.h"
+
+WebApiWsPylontechLiveClass::WebApiWsPylontechLiveClass()
+    : _ws("/batterylivedata")
+{
+}
+
+void WebApiWsPylontechLiveClass::init(AsyncWebServer* server)
+{
+    using std::placeholders::_1;
+    using std::placeholders::_2;
+    using std::placeholders::_3;
+    using std::placeholders::_4;
+    using std::placeholders::_5;
+    using std::placeholders::_6;
+
+    _server = server;
+    _server->on("/api/batterylivedata/status", HTTP_GET, std::bind(&WebApiWsPylontechLiveClass::onLivedataStatus, this, _1));
+
+    _server->addHandler(&_ws);
+    _ws.onEvent(std::bind(&WebApiWsPylontechLiveClass::onWebsocketEvent, this, _1, _2, _3, _4, _5, _6));
+}
+
+void WebApiWsPylontechLiveClass::loop()
+{
+    // see: https://github.com/me-no-dev/ESPAsyncWebServer#limiting-the-number-of-web-socket-clients
+    if (millis() - _lastWsCleanup > 1000) {
+        _ws.cleanupClients();
+        _lastWsCleanup = millis();
+    }
+
+    // do nothing if no WS client is connected
+    if (_ws.count() == 0) {
+        return;
+    }
+
+    if (millis() - _lastUpdateCheck < 1000) {
+        return;
+    }
+    _lastUpdateCheck = millis();
+
+    DynamicJsonDocument root(1024);
+    JsonVariant var = root;
+    generateJsonResponse(var);
+
+    String buffer;
+    if (buffer) {
+        serializeJson(root, buffer);
+
+        if (Configuration.get().Security_AllowReadonly) {
+            _ws.setAuthentication("", "");
+        } else {
+            _ws.setAuthentication(AUTH_USERNAME, Configuration.get().Security_Password);
+        }
+
+        _ws.textAll(buffer);
+    }
+
+    
+}
+
+void WebApiWsPylontechLiveClass::generateJsonResponse(JsonVariant& root)
+{
+    root["data_age"] = (millis() - Battery.lastUpdate) / 1000;
+
+    root[F("chargeVoltage")]["v"] = Battery.chargeVoltage ;
+    root[F("chargeVoltage")]["u"] = "V";
+    root[F("chargeCurrentLimitation")]["v"] = Battery.chargeCurrentLimitation ;
+    root[F("chargeCurrentLimitation")]["u"] = "A";
+    root[F("dischargeCurrentLimitation")]["v"] = Battery.dischargeCurrentLimitation ;
+    root[F("dischargeCurrentLimitation")]["u"] = "A";
+    root[F("stateOfCharge")]["v"] = Battery.stateOfCharge ;
+    root[F("stateOfCharge")]["u"] = "%";
+    root[F("stateOfHealth")]["v"] = Battery.stateOfHealth ;
+    root[F("stateOfHealth")]["u"] = "%";
+    root[F("voltage")]["v"] = Battery.voltage;
+    root[F("voltage")]["u"] = "V";
+    root[F("current")]["v"] = Battery.current ;
+    root[F("current")]["u"] = "A";
+    root[F("temperature")]["v"] = Battery.temperature ;
+    root[F("temperature")]["u"] = "°C";
+
+    // Alarms
+    root["alarms"][F("dischargeCurrent")] = Battery.alarmOverCurrentDischarge ;
+    root["alarms"][F("chargeCurrent")] = Battery.alarmOverCurrentCharge ;
+    root["alarms"][F("lowTemperature")] = Battery.alarmUnderTemperature ;
+    root["alarms"][F("highTemperature")] = Battery.alarmOverTemperature ;
+    root["alarms"][F("lowVoltage")] = Battery.alarmUnderVoltage ;
+    root["alarms"][F("highVoltage")] = Battery.alarmOverVoltage ;
+    root["alarms"][F("bmsInternal")] = Battery.alarmBmsInternal ;
+
+    // Warnings
+    root["warnings"][F("dischargeCurrent")] = Battery.warningHighCurrentDischarge ;
+    root["warnings"][F("chargeCurrent")] = Battery.warningHighCurrentCharge ;
+    root["warnings"][F("lowTemperature")] = Battery.warningLowTemperature ;
+    root["warnings"][F("highTemperature")] = Battery.warningHighTemperature ;
+    root["warnings"][F("lowVoltage")] = Battery.warningLowVoltage ;
+    root["warnings"][F("highVoltage")] = Battery.warningHighVoltage ;
+    root["warnings"][F("bmsInternal")] = Battery.warningBmsInternal ;
+
+    // Misc
+    root[F("manufacturer")] = Battery.manufacturer ;
+    root[F("chargeEnabled")] = Battery.chargeEnabled ;
+    root[F("dischargeEnabled")] = Battery.dischargeEnabled ;
+    root[F("chargeImmediately")] = Battery.chargeImmediately ;
+
+
+}
+
+void WebApiWsPylontechLiveClass::onWebsocketEvent(AsyncWebSocket* server, AsyncWebSocketClient* client, AwsEventType type, void* arg, uint8_t* data, size_t len)
+{
+    if (type == WS_EVT_CONNECT) {
+        char str[64];
+        snprintf(str, sizeof(str), "Websocket: [%s][%u] connect", server->url(), client->id());
+        Serial.println(str);
+        MessageOutput.println(str);
+    } else if (type == WS_EVT_DISCONNECT) {
+        char str[64];
+        snprintf(str, sizeof(str), "Websocket: [%s][%u] disconnect", server->url(), client->id());
+        Serial.println(str);
+        MessageOutput.println(str);
+    }
+}
+
+void WebApiWsPylontechLiveClass::onLivedataStatus(AsyncWebServerRequest* request)
+{
+    if (!WebApi.checkCredentialsReadonly(request)) {
+        return;
+    }
+    AsyncJsonResponse* response = new AsyncJsonResponse(false, 1024U);
+    JsonVariant root = response->getRoot().as<JsonVariant>();
+    generateJsonResponse(root);
+
+    response->setLength();
+    request->send(response);
+}

src/WebApi_ws_live.cpp

@@ -189,6 +189,9 @@ void WebApiWsLiveClass::generateJsonResponse(JsonVariant& root)
     JsonObject huaweiObj = root.createNestedObject("huawei");
     huaweiObj[F("enabled")] = Configuration.get().Huawei_Enabled;
 
+    JsonObject batteryObj = root.createNestedObject("battery");
+    batteryObj[F("enabled")] = Configuration.get().Battery_Enabled;
+
 }
 
 void WebApiWsLiveClass::addField(JsonObject& root, uint8_t idx, std::shared_ptr<InverterAbstract> inv, ChannelType_t type, ChannelNum_t channel, FieldId_t fieldId, String topic)

webapp/src/components/BatteryView.vue

@@ -0,0 +1,359 @@
+<template>
+  <div class="text-center" v-if="dataLoading">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
+
+  <template v-else>
+    <div class="row gy-3">
+      <div class="tab-content col-sm-12 col-md-12" id="v-pills-tabContent">
+        <div class="card">
+          <div class="card-header d-flex justify-content-between align-items-center" :class="{
+            'text-bg-danger': batteryData.data_age > 20,
+            'text-bg-primary': batteryData.data_age < 20,
+          }">
+            <div class="p-1 flex-grow-1">
+              <div class="d-flex flex-wrap">
+                <div style="padding-right: 2em;">
+                  {{ $t('battery.battery') }}: {{ batteryData.manufacturer }}
+                </div>
+                <div style="padding-right: 2em;">
+                  {{ $t('battery.DataAge') }} {{ $t('battery.Seconds', { 'val': batteryData.data_age }) }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="card-body">
+            <div class="row flex-row flex-wrap align-items-start g-3">
+              <div class="col order-0">
+                <div class="card" :class="{ 'border-info': true }">
+                  <div class="card-header bg-info">{{ $t('battery.Status') }}</div>
+                  <div class="card-body">
+                    <table class="table table-striped table-hover">
+                      <thead>
+                        <tr>
+                          <th scope="col">{{ $t('battery.Property') }}</th>
+                          <th style="text-align: right" scope="col">{{ $t('battery.Value') }}</th>
+                          <th scope="col">{{ $t('battery.Unit') }}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <th scope="row">{{ $t('battery.stateOfCharge') }}</th>
+                          <td style="text-align: right">{{ batteryData.stateOfCharge.v.toFixed(1) }}</td>
+                          <td>{{ batteryData.stateOfCharge.u }}</td>
+                        </tr>
+                        <tr>
+                          <th scope="row">{{ $t('battery.stateOfHealth') }}</th>
+                          <td style="text-align: right">{{ batteryData.stateOfHealth.v.toFixed(1) }}</td>
+                          <td>{{ batteryData.stateOfHealth.u }}</td>
+                        </tr>
+                        <tr>
+                          <th scope="row">{{ $t('battery.voltage') }}</th>
+                          <td style="text-align: right">{{ batteryData.voltage.v.toFixed(1) }}</td>
+                          <td>{{ batteryData.voltage.u }}</td>
+                        </tr>
+                        <tr>
+                          <th scope="row">{{ $t('battery.current') }}</th>
+                          <td style="text-align: right">{{ batteryData.current.v.toFixed(1) }}</td>
+                          <td>{{ batteryData.current.u }}</td>
+                        </tr>
+                        <tr>
+                          <th scope="row">{{ $t('battery.temperature') }}</th>
+                          <td style="text-align: right">{{ batteryData.temperature.v.toFixed(1) }}</td>
+                          <td>{{ batteryData.temperature.u }}</td>
+                        </tr>
+                        <tr>
+                          <th scope="row">{{ $t('battery.chargeVoltage') }}</th>
+                          <td style="text-align: right">{{ batteryData.chargeVoltage.v.toFixed(1) }}</td>
+                          <td>{{ batteryData.chargeVoltage.u }}</td>
+                        </tr>
+                        <tr>
+                          <th scope="row">{{ $t('battery.chargeCurrentLimitation') }}</th>
+                          <td style="text-align: right">{{ batteryData.chargeCurrentLimitation.v }}</td>
+                          <td>{{ batteryData.chargeCurrentLimitation.u }}</td>
+                        </tr>
+                        <tr>
+                          <th scope="row">{{ $t('battery.dischargeCurrentLimitation') }}</th>
+                          <td style="text-align: right">{{ batteryData.dischargeCurrentLimitation.v }}</td>
+                          <td>{{ batteryData.dischargeCurrentLimitation.u }}</td>
+                        </tr> 
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+              <div class="col order-1">
+                <div class="card" :class="{ 'border-info': false }">
+                  <div class="card-header bg-info">{{ $t('battery.warn_alarm') }}</div>
+                  <div class="card-body">
+                    <table class="table table-striped table-hover">
+                      <thead>
+                        <tr>
+                          <th scope="col">{{ $t('battery.Property') }}</th>
+                          <th scope="col">{{ $t('battery.alarm') }}</th>
+                          <th scope="col">{{ $t('battery.warning') }}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <th scope="row">{{ $t('battery.dischargeCurrent') }}</th>
+                          <td>
+                            <span class="badge" :class="{
+                                'text-bg-danger': batteryData.alarms.dischargeCurrent,
+                                'text-bg-success': !batteryData.alarms.dischargeCurrent
+                            }">
+                                <template v-if="!batteryData.alarms.dischargeCurrent">{{ $t('battery.ok') }}</template>
+                                <template v-else="batteryData.alarms.dischargeCurrent">{{ $t('battery.alarm') }}</template>
+                            </span>
+                          </td>
+                          <td>
+                              <span class="badge" :class="{
+                                  'text-bg-warning text-dark': batteryData.warnings.dischargeCurrent,
+                                  'text-bg-success': !batteryData.warnings.dischargeCurrent
+                              }">
+                                  <template v-if="!batteryData.warnings.dischargeCurrent">{{ $t('battery.ok') }}</template>
+                                  <template v-else="batteryData.warnings.dischargeCurrent">{{ $t('battery.warning') }}</template>
+                              </span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <th scope="row">{{ $t('battery.chargeCurrent') }}</th>
+                          <td>
+                            <span class="badge" :class="{
+                                'text-bg-danger': batteryData.alarms.chargeCurrent,
+                                'text-bg-success': !batteryData.alarms.chargeCurrent
+                            }">
+                                <template v-if="!batteryData.alarms.chargeCurrent">{{ $t('battery.ok') }}</template>
+                                <template v-else="batteryData.alarms.chargeCurrent">{{ $t('battery.alarm') }}</template>
+                            </span>
+                          </td>
+                          <td>
+                              <span class="badge" :class="{
+                                  'text-bg-warning text-dark': batteryData.warnings.chargeCurrent,
+                                  'text-bg-success': !batteryData.warnings.chargeCurrent
+                              }">
+                                  <template v-if="!batteryData.warnings.chargeCurrent">{{ $t('battery.ok') }}</template>
+                                  <template v-else="batteryData.warnings.chargeCurrent">{{ $t('battery.warning') }}</template>
+                              </span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <th scope="row">{{ $t('battery.lowTemperature') }}</th>
+                          <td>
+                            <span class="badge" :class="{
+                                'text-bg-danger': batteryData.alarms.lowTemperature,
+                                'text-bg-success': !batteryData.alarms.lowTemperature
+                            }">
+                                <template v-if="!batteryData.alarms.lowTemperature">{{ $t('battery.ok') }}</template>
+                                <template v-else="batteryData.alarms.lowTemperature">{{ $t('battery.alarm') }}</template>
+                            </span>
+                          </td>
+                          <td>
+                              <span class="badge" :class="{
+                                  'text-bg-warning text-dark': batteryData.warnings.lowTemperature,
+                                  'text-bg-success': !batteryData.warnings.lowTemperature
+                              }">
+                                  <template v-if="!batteryData.warnings.lowTemperature">{{ $t('battery.ok') }}</template>
+                                  <template v-else="batteryData.warnings.lowTemperature">{{ $t('battery.warning') }}</template>
+                              </span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <th scope="row">{{ $t('battery.highTemperature') }}</th>
+                          <td>
+                            <span class="badge" :class="{
+                                'text-bg-danger': batteryData.alarms.highTemperature,
+                                'text-bg-success': !batteryData.alarms.highTemperature
+                            }">
+                                <template v-if="!batteryData.alarms.highTemperature">{{ $t('battery.ok') }}</template>
+                                <template v-else="batteryData.alarms.highTemperature">{{ $t('battery.alarm') }}</template>
+                            </span>
+                          </td>
+                          <td>
+                              <span class="badge" :class="{
+                                  'text-bg-warning text-dark': batteryData.warnings.highTemperature,
+                                  'text-bg-success': !batteryData.warnings.highTemperature
+                              }">
+                                  <template v-if="!batteryData.warnings.highTemperature">{{ $t('battery.ok') }}</template>
+                                  <template v-else="batteryData.warnings.highTemperature">{{ $t('battery.warning') }}</template>
+                              </span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <th scope="row">{{ $t('battery.lowVoltage') }}</th>
+                          <td>
+                            <span class="badge" :class="{
+                                'text-bg-danger': batteryData.alarms.lowVoltage,
+                                'text-bg-success': !batteryData.alarms.lowVoltage
+                            }">
+                                <template v-if="!batteryData.alarms.lowVoltage">{{ $t('battery.ok') }}</template>
+                                <template v-else="batteryData.alarms.lowVoltage">{{ $t('battery.alarm') }}</template>
+                            </span>
+                          </td>
+                          <td>
+                              <span class="badge" :class="{
+                                  'text-bg-warning text-dark': batteryData.warnings.lowVoltage,
+                                  'text-bg-success': !batteryData.warnings.lowVoltage
+                              }">
+                                  <template v-if="!batteryData.warnings.lowVoltage">{{ $t('battery.ok') }}</template>
+                                  <template v-else="batteryData.warnings.lowVoltage">{{ $t('battery.warning') }}</template>
+                              </span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <th scope="row">{{ $t('battery.highVoltage') }}</th>
+                          <td>
+                            <span class="badge" :class="{
+                                'text-bg-danger': batteryData.alarms.highVoltage,
+                                'text-bg-success': !batteryData.alarms.highVoltage
+                            }">
+                                <template v-if="!batteryData.alarms.highVoltage">{{ $t('battery.ok') }}</template>
+                                <template v-else="batteryData.alarms.highVoltage">{{ $t('battery.alarm') }}</template>
+                            </span>
+                          </td>
+                          <td>
+                              <span class="badge" :class="{
+                                  'text-bg-warning text-dark': batteryData.warnings.highVoltage,
+                                  'text-bg-success': !batteryData.warnings.highVoltage
+                              }">
+                                  <template v-if="!batteryData.warnings.highVoltage">{{ $t('battery.ok') }}</template>
+                                  <template v-else="batteryData.warnings.highVoltage">{{ $t('battery.warning') }}</template>
+                              </span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <th scope="row">{{ $t('battery.bmsInternal') }}</th>
+                          <td>
+                            <span class="badge" :class="{
+                                'text-bg-danger': batteryData.alarms.bmsInternal,
+                                'text-bg-success': !batteryData.alarms.bmsInternal
+                            }">
+                                <template v-if="!batteryData.alarms.bmsInternal">{{ $t('battery.ok') }}</template>
+                                <template v-else="batteryData.alarms.bmsInternal">{{ $t('battery.alarm') }}</template>
+                            </span>
+                          </td>
+                          <td>
+                              <span class="badge" :class="{
+                                  'text-bg-warning text-dark': batteryData.warnings.bmsInternal,
+                                  'text-bg-success': !batteryData.warnings.bmsInternal
+                              }">
+                                  <template v-if="!batteryData.warnings.bmsInternal">{{ $t('battery.ok') }}</template>
+                                  <template v-else="batteryData.warnings.bmsInternal">{{ $t('battery.warning') }}</template>
+                              </span>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </template>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type { Battery } from '@/types/BatteryDataStatus';
+import { handleResponse, authHeader, authUrl } from '@/utils/authentication';
+
+export default defineComponent({
+  components: {
+  },
+  data() {
+    return {
+      socket: {} as WebSocket,
+      heartInterval: 0,
+      dataAgeInterval: 0,
+      dataLoading: true,
+      batteryData: {} as Battery,
+      isFirstFetchAfterConnect: true,
+
+      alertMessageLimit: "",
+      alertTypeLimit: "info",
+      showAlertLimit: false,
+      checked: false,
+    };
+  },
+  created() {
+    this.getInitialData();
+    this.initSocket();
+    this.initDataAgeing();
+  },
+  unmounted() {
+    this.closeSocket();
+  },
+  methods: {
+    getInitialData() {
+      console.log("Get initalData for Battery");
+      this.dataLoading = true;
+
+      fetch("/api/battery/livedata", { headers: authHeader() })
+        .then((response) => handleResponse(response, this.$emitter, this.$router))
+        .then((data) => {
+          this.batteryData = data;
+          this.dataLoading = false;
+        });
+    },
+    initSocket() {
+      console.log("Starting connection to Battery WebSocket Server");
+
+      const { protocol, host } = location;
+      const authString = authUrl();
+      const webSocketUrl = `${protocol === "https:" ? "wss" : "ws"
+        }://${authString}${host}/batterylivedata`;
+
+      this.socket = new WebSocket(webSocketUrl);
+
+      this.socket.onmessage = (event) => {
+        console.log(event);
+        this.batteryData = JSON.parse(event.data);
+        this.dataLoading = false;
+        this.heartCheck(); // Reset heartbeat detection
+      };
+
+      this.socket.onopen = function (event) {
+        console.log(event);
+        console.log("Successfully connected to the Battery websocket server...");
+      };
+
+      // Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect
+      window.onbeforeunload = () => {
+        this.closeSocket();
+      };
+    },
+    initDataAgeing() {
+      this.dataAgeInterval = setInterval(()  => {
+        if (this.batteryData) {
+          this.batteryData.data_age++;
+        }
+      }, 1000);
+    },
+    // Send heartbeat packets regularly * 59s Send a heartbeat
+    heartCheck() {
+      this.heartInterval && clearTimeout(this.heartInterval);
+      this.heartInterval = setInterval(() => {
+        if (this.socket.readyState === 1) {
+          // Connection status
+          this.socket.send("ping");
+        } else {
+          this.initSocket(); // Breakpoint reconnection 5 Time
+        }
+      }, 59 * 1000);
+    },
+    /** To break off websocket Connect */
+    closeSocket() {
+      this.socket.close();
+      this.heartInterval && clearTimeout(this.heartInterval);
+      this.isFirstFetchAfterConnect = true;
+    }
+  },
+});
+</script>

webapp/src/locales/de.json

@@ -10,6 +10,7 @@
         "DTUSettings": "DTU",
         "DeviceManager": "Hardware",
         "VedirectSettings": "Ve.direct",
+        "PowerMeterSettings": "Power Meter",
         "BatterySettings": "Batterie",
         "AcChargerSettings": "AC Ladegerät",
         "ConfigManagement": "Konfigurationsverwaltung",
@@ -666,5 +667,33 @@
         "EnableHuawei": "Huawei R4850G2 an CAN Bus Interface aktiv",
         "Seconds": "@:dtuadmin.Seconds",
         "Save": "@:dtuadmin.Save"
+      },
+      "battery": {
+        "battery": "Batterie",
+        "DataAge": "letzte Aktualisierung: ",
+        "Seconds": "vor {val} Sekunden",
+        "Status": "Status",
+        "Property": "Eigenschaft",
+        "Value": "Wert",
+        "Unit": "Einheit",
+        "stateOfCharge": "Ladezustand (SOC)",
+        "stateOfHealth": "Batteriezustand (SOH)",
+        "voltage": "Spannung",
+        "current": "Strom",
+        "temperature": "Temperatur",
+        "chargeVoltage": "Gewünschte Ladespannung (BMS)",
+        "chargeCurrentLimitation": "Ladestromlimit",
+        "dischargeCurrentLimitation": "Entladestromlimit",
+        "warn_alarm": "Warnungen und Alarme",
+        "ok": "OK",
+        "alarm": "Alarm",
+        "warning": "Warnung",
+        "dischargeCurrent": "Entladestrom",
+        "chargeCurrent": "Ladestrom",
+        "lowTemperature": "Temperatur niedrig",
+        "highTemperature": "Temperatur hoch",
+        "lowVoltage": "Spannung niedrig",
+        "highVoltage": "Spannung hoch",
+        "bmsInternal": "BMS intern"
       }
 }

webapp/src/locales/en.json

@@ -671,5 +671,33 @@
         "EnableHuawei": "Enable Huawei R4850G2 on CAN Bus Interface",
         "Seconds": "@:dtuadmin.Seconds",
         "Save": "@:dtuadmin.Save"
+      },
+      "battery": {
+        "battery": "battery",
+        "DataAge": "Data Age: ",
+        "Seconds": " {val} seconds",
+        "Status": "Status",
+        "Property": "Property",
+        "Value": "Value",
+        "Unit": "Unit",
+        "stateOfCharge": "State of charge",
+        "stateOfHealth": "State of health",
+        "voltage": "Voltage",
+        "current": "Current",
+        "temperature": "Temperature",
+        "chargeVoltage": "Requested charge voltage",
+        "chargeCurrentLimitation": "Charge current limit",
+        "dischargeCurrentLimitation": "Discharge current limit",
+        "warn_alarm": "Alarms and warnings",
+        "ok": "OK",
+        "alarm": "Alarm",
+        "warning": "Warning",
+        "dischargeCurrent": "Discharge current",
+        "chargeCurrent": "Charge current",
+        "lowTemperature": "Low temperature",
+        "highTemperature": "High temperature",
+        "lowVoltage": "Low voltage",
+        "highVoltage": "High voltage",
+        "bmsInternal": "BMS internal"
       }
 }

webapp/src/locales/fr.json

@@ -10,6 +10,7 @@
         "DTUSettings": "DTU",
         "DeviceManager": "Périphériques",
         "VedirectSettings": "Ve.direct",
+        "PowerMeterSettings": "Power Meter",
         "BatterySettings": "Battery",
         "AcChargerSettings": "AC Charger",
         "ConfigManagement": "Gestion de la configuration",
@@ -608,5 +609,33 @@
         "EnableHuawei": "Enable Huawei R4850G2 on CAN Bus Interface",
         "Seconds": "@:dtuadmin.Seconds",
         "Save": "@:dtuadmin.Save"
+      },
+      "battery": {
+        "battery": "battery",
+        "DataAge": "Data Age: ",
+        "Seconds": " {val} seconds",
+        "Status": "Status",
+        "Property": "Property",
+        "Value": "Value",
+        "Unit": "Unit",
+        "stateOfCharge": "State of charge",
+        "stateOfHealth": "State of health",
+        "voltage": "Voltage",
+        "current": "Current",
+        "temperature": "Temperature",
+        "chargeVoltage": "Requested charge voltage",
+        "chargeCurrentLimitation": "Charge current limit",
+        "dischargeCurrentLimitation": "Discharge current limit",
+        "warn_alarm": "Alarms and warnings",
+        "ok": "OK",
+        "alarm": "Alarm",
+        "warning": "Warning",
+        "dischargeCurrent": "Discharge current",
+        "chargeCurrent": "Charge current",
+        "lowTemperature": "Low temperature",
+        "highTemperature": "High temperature",
+        "lowVoltage": "Low voltage",
+        "highVoltage": "High voltage",
+        "bmsInternal": "BMS internal"
       }
 }

webapp/src/types/BatteryDataStatus.ts

@@ -0,0 +1,32 @@
+import type { ValueObject } from '@/types/LiveDataStatus';
+
+interface BatteryFlags {
+    dischargeCurrent: boolean;
+    chargeCurrent: boolean;
+    lowTemperature: boolean;
+    highTemperature: boolean;
+    lowVoltage: boolean;
+    highVoltage: boolean;
+    bmsInternal: boolean;
+}
+
+
+// Battery
+export interface Battery {
+    data_age: 0;
+    chargeVoltage: ValueObject;
+    chargeCurrentLimitation: ValueObject;
+    dischargeCurrentLimitation: ValueObject;
+    stateOfCharge: ValueObject;
+    stateOfChargeLastUpdate: ValueObject;
+    stateOfHealth: ValueObject;
+    voltage: ValueObject;
+    current: ValueObject;
+    temperature: ValueObject;
+    warnings: BatteryFlags;
+    alarms: BatteryFlags;
+    manufacturer: string;
+    chargeEnabled: boolean;
+    dischargeEnabled: boolean;
+    chargeImmediately: boolean;
+}

webapp/src/types/LiveDataStatus.ts

@@ -54,10 +54,15 @@ export interface Huawei {
   enabled: boolean;
 }
 
+export interface Battery {
+  enabled: boolean;
+}
+
 export interface LiveData {
     inverters: Inverter[];
     total: Total;
     hints: Hints;
     vedirect: Vedirect;
     huawei: Huawei;
+    battery: Battery;
 }

webapp/src/views/HomeView.vue

@@ -114,6 +114,9 @@
             </div>
         </div>
         <VedirectView v-show="liveData.vedirect.enabled" />
+        <div v-show="liveData.battery.enabled" >
+          <BatteryView/>
+        </div>
         <div v-show="liveData.huawei.enabled" >
           <HuaweiView/>
         </div>
@@ -329,6 +332,7 @@ import InverterChannelInfo from "@/components/InverterChannelInfo.vue";
 import InverterTotalInfo from '@/components/InverterTotalInfo.vue';
 import VedirectView from '@/components/VedirectView.vue';
 import HuaweiView from '@/components/HuaweiView.vue'
+import BatteryView from '@/components/BatteryView.vue'
 import type { DevInfoStatus } from '@/types/DevInfoStatus';
 import type { EventlogItems } from '@/types/EventlogStatus';
 import type { LimitConfig } from '@/types/LimitConfig';
@@ -370,7 +374,8 @@ export default defineComponent({
         BIconToggleOn,
         BIconXCircleFill,
         VedirectView,
-        HuaweiView
+        HuaweiView,
+        BatteryView
     },
     data() {
         return {