247 lines
8.1 KiB
HTML
247 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>E-Manager Demoboard</title>
|
|
<!-- Lade die Highcharts-Bibliothek -->
|
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px; /* Änderung: Hinzufügen von Margin rund um die Seite */
|
|
padding: 20px;
|
|
background-color: #f4f4f4;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
h2 {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
th, td {
|
|
border: 1px solid #dddddd;
|
|
text-align: left;
|
|
padding: 12px;
|
|
}
|
|
th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
tr:nth-child(even) {
|
|
background-color: #f9f9f9;
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
table {
|
|
overflow-x: auto;
|
|
display: block;
|
|
}
|
|
th, td {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>E-Manager Demoboard</h1> <!-- Änderung: Hinzufügen des Titels -->
|
|
|
|
<div id="container" style="width:80%; margin-left:10%; height:400px;"></div>
|
|
|
|
<script>
|
|
// Lade die JSON-Daten
|
|
fetch('data/BasToken.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Extrahiere die Zeitstempel und Werte für verschiedene Elemente
|
|
const timestamps = Object.keys(data);
|
|
const seriesData = timestamps.map(timestamp => {
|
|
const values = data[timestamp];
|
|
return {
|
|
x: new Date(timestamp).getTime(), // Zeitstempel in Millisekunden umwandeln
|
|
day_energy: values.producer_values.Producer_sum.day_energy,
|
|
pac: values.producer_values.Producer_sum.pac,
|
|
total_energy: values.producer_values.Producer_sum.total_energy,
|
|
year_energy: values.producer_values.Producer_sum.year_energy,
|
|
meter_phase_1: values.meter_values.Meter_Sum.Current_AC_Phase_1,
|
|
meter_phase_2: values.meter_values.Meter_Sum.Current_AC_Phase_2,
|
|
meter_phase_3: values.meter_values.Meter_Sum.Current_AC_Phase_3,
|
|
meter_real_power: values.meter_values.Meter_Sum.PowerReal_P_Sum
|
|
};
|
|
});
|
|
|
|
// Konfiguriere Highcharts
|
|
Highcharts.chart('container', {
|
|
chart: {
|
|
type: 'line'
|
|
},
|
|
title: {
|
|
text: 'Energiedaten'
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
title: {
|
|
text: 'Zeit'
|
|
}
|
|
},
|
|
yAxis: [{
|
|
title: {
|
|
text: 'Energie (Wh)'
|
|
}
|
|
}, {
|
|
title: {
|
|
text: 'Strom (A)'
|
|
},
|
|
opposite: true
|
|
}],
|
|
series: [{
|
|
name: 'Tagesenergie',
|
|
data: seriesData.map(entry => [entry.x, entry.day_energy]),
|
|
yAxis: 0
|
|
}, {
|
|
name: 'PAC',
|
|
data: seriesData.map(entry => [entry.x, entry.pac]),
|
|
yAxis: 0
|
|
}, {
|
|
name: 'Gesamtenergie',
|
|
data: seriesData.map(entry => [entry.x, entry.total_energy]),
|
|
yAxis: 0
|
|
}, {
|
|
name: 'Jahresenergie',
|
|
data: seriesData.map(entry => [entry.x, entry.year_energy]),
|
|
yAxis: 0
|
|
}, {
|
|
name: 'Meter Phase 1',
|
|
data: seriesData.map(entry => [entry.x, entry.meter_phase_1]),
|
|
yAxis: 1
|
|
}, {
|
|
name: 'Meter Phase 2',
|
|
data: seriesData.map(entry => [entry.x, entry.meter_phase_2]),
|
|
yAxis: 1
|
|
}, {
|
|
name: 'Meter Phase 3',
|
|
data: seriesData.map(entry => [entry.x, entry.meter_phase_3]),
|
|
yAxis: 1
|
|
}, {
|
|
name: 'Meter Real Power',
|
|
data: seriesData.map(entry => [entry.x, entry.meter_real_power]),
|
|
yAxis: 1
|
|
}]
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Fehler beim Laden der Daten:', error);
|
|
});
|
|
</script>
|
|
<h2>Config Table</h2>
|
|
<table id="configTable" style="width:80%; margin-left:10%; height:200px;">
|
|
<thead>
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>ID</th>
|
|
<th>User Priority</th>
|
|
<th>Lock Priority</th>
|
|
<!-- Additional fields for specific types -->
|
|
<th>Shelly IP</th>
|
|
<th>Boiler Power</th>
|
|
<th>Temperature</th>
|
|
<th>IP/Address</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Table body will be generated dynamically using JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
// JSON configuration data
|
|
var jsonData = {
|
|
"metadata":{"config_has_changed" : "1"},
|
|
"users": [
|
|
{"type": "User1", "config": {"ID":"Umod1","user_prio":1,"lock_prio":2}},
|
|
{"type": "User1", "config": {"ID":"Umod3","user_prio":3,"lock_prio":4}},
|
|
{"type": "User1", "config": {"ID":"Umod2.0","user_prio":2,"lock_prio":3}},
|
|
{"type": "User1", "config": {"ID":"Umod2.1","user_prio":2,"lock_prio":3}},
|
|
{"type": "User1", "config": {"ID":"Umod2.2","user_prio":2,"lock_prio":3}},
|
|
{"type": "User1", "config": {"ID":"Umod2.3","user_prio":2,"lock_prio":3}},
|
|
{"type": "User2", "config": {"ID":"Usta2.0","user_prio":2,"lock_prio":6}},
|
|
{"type": "Boiler_1Stufig_Shelly", "config": {"ID":"shelly_Boiler","user_prio":2,"lock_prio":6, "shelly_ip" : "192.168.20.233", "boilerpower": 5000, "temperatur": 38}}
|
|
],
|
|
"producers": [
|
|
{"type": "Fronius", "config": {"ID":"Fronius_15kW","IP":"192.168.20.51","Adr":1}},
|
|
{"type": "Fronius", "config": {"ID":"Fronius_20kW","IP":"192.168.20.51","Adr":2}}
|
|
],
|
|
"meters": [
|
|
{"type": "Fronius", "config": {"ID":"Meter_Fronius","IP":"192.168.20.51","Adr":1}}
|
|
]
|
|
};
|
|
|
|
// Function to generate table rows
|
|
function generateRows() {
|
|
var tableBody = document.querySelector('#configTable tbody');
|
|
|
|
// Clear existing rows
|
|
tableBody.innerHTML = '';
|
|
|
|
// Generate rows for users
|
|
jsonData.users.forEach(function(user) {
|
|
var row = '<tr>';
|
|
row += '<td>' + user.type + '</td>';
|
|
row += '<td>' + user.config.ID + '</td>';
|
|
row += '<td>' + user.config.user_prio + '</td>';
|
|
row += '<td>' + user.config.lock_prio + '</td>';
|
|
// Add empty cells for additional fields
|
|
row += '<td></td>';
|
|
row += '<td></td>';
|
|
row += '<td></td>';
|
|
row += '<td></td>';
|
|
row += '</tr>';
|
|
tableBody.innerHTML += row;
|
|
});
|
|
|
|
// Generate rows for producers
|
|
jsonData.producers.forEach(function(producer) {
|
|
var row = '<tr>';
|
|
row += '<td>' + producer.type + '</td>';
|
|
row += '<td>' + producer.config.ID + '</td>';
|
|
row += '<td></td>'; // Empty cell for user priority
|
|
row += '<td></td>'; // Empty cell for lock priority
|
|
row += '<td></td>'; // Empty cell for additional field
|
|
row += '<td></td>'; // Empty cell for additional field
|
|
row += '<td></td>'; // Empty cell for additional field
|
|
row += '<td>' + producer.config.IP + '</td>';
|
|
row += '</tr>';
|
|
tableBody.innerHTML += row;
|
|
});
|
|
|
|
// Generate rows for meters
|
|
jsonData.meters.forEach(function(meter) {
|
|
var row = '<tr>';
|
|
row += '<td>' + meter.type + '</td>';
|
|
row += '<td>' + meter.config.ID + '</td>';
|
|
row += '<td></td>'; // Empty cell for user priority
|
|
row += '<td></td>'; // Empty cell for lock priority
|
|
row += '<td></td>'; // Empty cell for additional field
|
|
row += '<td></td>'; // Empty cell for additional field
|
|
row += '<td></td>'; // Empty cell for additional field
|
|
row += '<td>' + meter.config.IP + '</td>';
|
|
row += '</tr>';
|
|
tableBody.innerHTML += row;
|
|
});
|
|
}
|
|
|
|
// Call the function to generate table rows
|
|
generateRows();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|