40 lines
1.6 KiB
HTML
40 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
.bar-container { width:100%; background:#eee; border-radius:4px; overflow:hidden; height:18px; margin-bottom:8px; }
|
|
.bar { height:100%; float:left; }
|
|
.bar-cons { background:#4CAF50; }
|
|
.bar-feed { background:#8BC34A; }
|
|
.bar-pv { background:#FF9800; }
|
|
.bar-grid { background:#FF5722; }
|
|
.label { font-size:0.9em; margin:4px 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
<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>
|
|
<script>
|
|
function Apply(data) {
|
|
document.getElementById('prodLabel').innerText = "Produktion: " + data.value.prod + " kWh";
|
|
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 + "%";
|
|
}
|
|
function handleMessage(msg) { if(msg) Apply(msg); }
|
|
requestAction('update', true);
|
|
</script>
|
|
</body>
|
|
</html>
|