From 5434d0642ea8f780c80e4da7e9b1e27c22e2a90f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20H=C3=A4fliger?= <dh@belevo.ch>
Date: Tue, 24 Jun 2025 16:40:35 +0200
Subject: [PATCH] no message

---
 PV_Visu/module.html | 61 ++++++++++++++++++++++++++-------------------
 1 file changed, 36 insertions(+), 25 deletions(-)
diff --git a/PV_Visu/module.html b/PV_Visu/module.html
index 5459afd..1d239c2 100644
--- a/PV_Visu/module.html
+++ b/PV_Visu/module.html
@@ -1,51 +1,62 @@
-<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <style>
         html, body { margin: 0; padding: 4px; background: transparent; }
-        .bar-container { width: 100%; background: #eee; border-radius: 4px; overflow: hidden; height: 20px; margin-bottom: 10px; }
-        .bar { height: 100%; float: left; }
+        #pv_visu { padding-top: 10px; }
+        .bar-block { margin-bottom: 20px; }
+        .bar-title { font-size: 1em; font-weight: bold; margin-bottom: 4px; color: #333; }
+        .bar-container { width: 100%; background: #eee; border-radius: 4px; overflow: hidden; height: 24px; position: relative; }
+        .bar { height: 100%; float: left; position: relative; }
+        .bar span { position: absolute; width: 100%; text-align: center; line-height: 24px; font-size: 0.8em; color: #fff; }
         .bar-cons { background: #4CAF50; }
         .bar-feed { background: #8BC34A; }
         .bar-pv { background: #FF9800; }
         .bar-grid { background: #FF5722; }
-        .label { font-size: 0.9em; margin-bottom: 4px; color: #333; }
+        .value-text { font-size: 0.8em; margin-top: 4px; color: #555; }
     </style>
 </head>
 <body>
-    
     <div id="pv_visu">
-        <div class="label" id="prodLabel"></div>
-        <div class="bar-container">
-            <div class="bar bar-cons" id="barCons"></div>
-            <div class="bar bar-feed" id="barFeed"></div>
+        <div class="bar-block">
+            <div class="bar-title">Produktion</div>
+            <div class="bar-container">
+                <div class="bar bar-cons" id="barCons"><span id="barConsText"></span></div>
+                <div class="bar bar-feed" id="barFeed"><span id="barFeedText"></span></div>
+            </div>
+            <div class="value-text" id="prodValues"></div>
         </div>
-        <div class="label" id="consLabel"></div>
-        <div class="bar-container">
-            <div class="bar bar-pv" id="barPV"></div>
-            <div class="bar bar-grid" id="barGrid"></div>
+        <div class="bar-block">
+            <div class="bar-title">Verbrauch</div>
+            <div class="bar-container">
+                <div class="bar bar-pv" id="barPV"><span id="barPVText"></span></div>
+                <div class="bar bar-grid" id="barGrid"><span id="barGridText"></span></div>
+            </div>
+            <div class="value-text" id="consValues"></div>
         </div>
     </div>
     <script>
         function Apply(data) {
-            document.getElementById('prodLabel').innerText = 'Produktion: ' + data.value.prod + ' kWh';
+            // Set widths
             document.getElementById('barCons').style.width  = data.prodCons + '%';
             document.getElementById('barFeed').style.width  = data.prodFeed + '%';
-            document.getElementById('consLabel').innerText = 'Verbrauch: ' + data.value.cons + ' kWh';
             document.getElementById('barPV').style.width    = data.consPV + '%';
             document.getElementById('barGrid').style.width  = data.consGrid + '%';
+            // Set text inside bars
+            document.getElementById('barConsText').innerText  = data.prodCons + '%';
+            document.getElementById('barFeedText').innerText  = data.prodFeed + '%';
+            document.getElementById('barPVText').innerText    = data.consPV + '%';
+            document.getElementById('barGridText').innerText  = data.consGrid + '%';
+            // Set detailed values below
+            document.getElementById('prodValues').innerText =
+                'Eigenverbrauch: ' + data.value.prodCons/100*data.value.prod + ' kWh, ' +
+                'Einspeisung: ' + data.value.feed + ' kWh';
+            document.getElementById('consValues').innerText =
+                'PV-Anteil: ' + data.value.consPV/100*data.value.cons + ' kWh, ' +
+                'Netz-Anteil: ' + data.value.grid + ' kWh';
         }
-        function handleMessage(msg) {
-            try {
-                var data = (typeof msg === 'string') ? JSON.parse(msg) : msg;
-                Apply(data);
-            } catch(e) {
-                console.error('PV_Visu handleMessage error:', e, msg);
-            }
-        }
-        // Bind to HTML-SDK
+        function handleMessage(msg) { Apply(msg); }
         if (typeof registerMessageHandler === 'function') {
             registerMessageHandler(handleMessage);
         }
-    </script>
+    </script>
\ No newline at end of file
