DasMoorhuhn/atc_mithermometer_gateway
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: DasMoorhuhn:main
Branches Tags
DasMoorhuhn:main
DasMoorhuhn:develop
DasMoorhuhn:24-08-29
DasMoorhuhn:24-07-03
...
compare: DasMoorhuhn:24-07-03
Branches Tags
DasMoorhuhn:develop
DasMoorhuhn:main
DasMoorhuhn:24-08-29
DasMoorhuhn:24-07-03

1 Commits
main ... 24-07-03

Author SHA1 Message Date
DasMoorhuhn
c72a779865 Merge branch 'develop' into 'main' 
Develop

See merge request DasMoorhuhn/atc_mithermometer_gateway!2
 2024-07-03 02:57:46 +02:00
5 changed files with 2 additions and 2966 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,5 +2,6 @@ __pycache__
devices.yml devices.yml
history.* history.*
data/ data/
*.json
*.iso *.iso
*.cow *.cow

2578
Charts/data.json
View File

File diff suppressed because it is too large Load Diff

204
Charts/index.html
View File

@ -1,204 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geräte-Diagramme</title>
<style>
body {
background-color: #121212;
color: #ffffff;
font-family: Arial, sans-serif;
}
.chart-container {
width: 80%;
margin: 0 auto;
padding: 20px;
background: #1e1e1e;
padding: 10px;
border-radius: 8px;
margin-bottom: 20px;
}
.chart {
padding: 10px;
}
.device-info {
margin-bottom: 10px;
}
.datetimepicker-container {
width: 80%;
margin: 20px auto;
display: flex;
justify-content: space-between;
}
.datetimepicker-container input, .datetimepicker-container button {
padding: 10px;
font-size: 16px;
background-color: #1e1e1e;
border: 1px solid #444;
border-radius: 5px;
color: #ffffff;
}
.datetimepicker-container button {
cursor: pointer;
}
</style>
<!-- Lokale Kopie von Chart.js einbinden -->
<script src="chart.js"></script>
</head>
<body>
<h1>Geräte-Diagramme</h1>
<div class="datetimepicker-container">
<input type="date" id="startDate">
<input type="time" id="startTime">
<input type="date" id="endDate">
<input type="time" id="endTime">
<button onclick="applyDateTimeRange()">Anwenden</button>
</div>
<div id="charts"></div>
<script>
let allData = [];
fetch('data.json')
.then(response => response.json())
.then(jsonData => {
allData = jsonData;
console.log('Loaded data:', allData); // Konsolenausgabe für Debugging
displayCharts(jsonData);
})
.catch(error => console.error('Error loading data:', error));
function applyDateTimeRange() {
const startDate = new Date(document.getElementById('startDate').value);
const startTime = document.getElementById('startTime').value;
const endDate = new Date(document.getElementById('endDate').value);
const endTime = document.getElementById('endTime').value;
// Kombinieren von Datum und Zeit zu UTC-Zeit
const startDateTime = new Date(Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(),
parseInt(startTime.substring(0, 2)), parseInt(startTime.substring(3, 5))));
const endDateTime = new Date(Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(),
parseInt(endTime.substring(0, 2)), parseInt(endTime.substring(3, 5))));
const filteredData = allData.filter(entry => {
const entryDate = new Date(entry.data.timestamp);
return entryDate >= startDateTime && entryDate <= endDateTime;
});
console.log('Filtered data:', filteredData); // Konsolenausgabe für Debugging
displayCharts(filteredData);
}
function displayCharts(data) {
document.getElementById('charts').innerHTML = '';
const deviceDataMap = new Map();
data.forEach(entry => {
const deviceMac = entry.device.mac;
if (!deviceDataMap.has(deviceMac)) {
deviceDataMap.set(deviceMac, {info: entry.device, data: []});
}
deviceDataMap.get(deviceMac).data.push(entry.data);
});
console.log('Device data map:', deviceDataMap); // Konsolenausgabe für Debugging
deviceDataMap.forEach((deviceData, deviceMac) => createChart(deviceData));
}
function createChart(deviceData) {
const labels = deviceData.data.map(entry => new Date(entry.timestamp).toLocaleTimeString());
const temperatures = deviceData.data.map(entry => entry.temperature);
const humidities = deviceData.data.map(entry => entry.humidity);
const container = document.createElement('div');
container.className = 'chart-container';
const deviceInfo = document.createElement('div');
deviceInfo.className = 'device-info';
deviceInfo.innerHTML = `<strong>${deviceData.info.name}</strong> (${deviceData.info.room})`;
container.appendChild(deviceInfo);
const ctx = document.createElement('canvas');
ctx.className = 'chart';
container.appendChild(ctx);
document.getElementById('charts').appendChild(container);
// Überprüfen, ob Chart.js geladen ist, bevor das Chart-Objekt erstellt wird
if (typeof Chart !== 'undefined') {
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Temperatur (°C)',
data: temperatures,
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
yAxisID: 'y-axis-temp'
},
{
label: 'Feuchtigkeit (%)',
data: humidities,
borderColor: 'rgba(153, 102, 255, 1)',
backgroundColor: 'rgba(153, 102, 255, 0.2)',
yAxisID: 'y-axis-humidity'
}
]
},
options: {
responsive: true,
scales: {
yAxes: [
{
id: 'y-axis-temp',
type: 'linear',
position: 'left',
ticks: {
beginAtZero: true,
fontColor: 'white'
},
scaleLabel: {
display: true,
labelString: 'Temperatur (°C)',
fontColor: 'white'
}
},
{
id: 'y-axis-humidity',
type: 'linear',
position: 'right',
ticks: {
beginAtZero: true,
fontColor: 'white'
},
scaleLabel: {
display: true,
labelString: 'Feuchtigkeit (%)',
fontColor: 'white'
}
}
],
xAxes: [{
ticks: {
fontColor: 'white'
}
}]
},
legend: {
labels: {
fontColor: 'white'
}
}
}
});
} else {
console.error('Chart.js is not loaded.');
}
}
</script>
</body>
</html>

181
Charts/index_2.html
View File

@ -1,181 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geräte-Diagramme</title>
<style>
body {
background-color: #121212;
color: #ffffff;
font-family: Arial, sans-serif;
}
.chart-container {
width: 80%;
margin: 0 auto;
padding: 20px;
background: #1e1e1e;
padding: 10px;
border-radius: 8px;
margin-bottom: 20px;
}
.chart {
padding: 10px;
}
.device-info {
margin-bottom: 10px;
}
.datepicker-container {
width: 80%;
margin: 20px auto;
display: flex;
justify-content: space-between;
}
.datepicker-container input, .datepicker-container button {
padding: 10px;
font-size: 16px;
background-color: #1e1e1e;
border: 1px solid #444;
border-radius: 5px;
color: #ffffff;
}
.datepicker-container button {
cursor: pointer;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Geräte-Diagramme</h1>
<div class="datepicker-container">
<input type="date" id="startDate">
<input type="date" id="endDate">
<button onclick="applyDateRange()">Anwenden</button>
</div>
<div id="charts"></div>
<script>
let allData = [];
fetch('history.json')
.then(response => response.json())
.then(jsonData => {
allData = jsonData;
displayCharts(jsonData);
})
.catch(error => console.error('Error loading data:', error));
function applyDateRange() {
const startDate = new Date(document.getElementById('startDate').value);
const endDate = new Date(document.getElementById('endDate').value);
const filteredData = allData.filter(entry => {
const entryDate = new Date(entry.data.timestamp);
return entryDate >= startDate && entryDate <= endDate;
});
displayCharts(filteredData);
}
function displayCharts(data) {
document.getElementById('charts').innerHTML = '';
const deviceDataMap = new Map();
data.forEach(entry => {
const deviceMac = entry.device.mac;
if (!deviceDataMap.has(deviceMac)) {
deviceDataMap.set(deviceMac, {info: entry.device, data: []});
}
deviceDataMap.get(deviceMac).data.push(entry.data);
});
deviceDataMap.forEach((deviceData, deviceMac) => createChart(deviceData));
}
function createChart(deviceData) {
const labels = deviceData.data.map(entry => new Date(entry.timestamp).toLocaleTimeString());
const temperatures = deviceData.data.map(entry => entry.temperature);
const humidities = deviceData.data.map(entry => entry.humidity);
const container = document.createElement('div');
container.className = 'chart-container';
const deviceInfo = document.createElement('div');
deviceInfo.className = 'device-info';
deviceInfo.innerHTML = `<strong>${deviceData.info.name}</strong> (${deviceData.info.room})`;
container.appendChild(deviceInfo);
const ctx = document.createElement('canvas');
ctx.className = 'chart';
container.appendChild(ctx);
document.getElementById('charts').appendChild(container);
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Temperatur (°C)',
data: temperatures,
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
yAxisID: 'y-axis-temp'
},
{
label: 'Feuchtigkeit (%)',
data: humidities,
borderColor: 'rgba(153, 102, 255, 1)',
backgroundColor: 'rgba(153, 102, 255, 0.2)',
yAxisID: 'y-axis-humidity'
}
]
},
options: {
responsive: true,
scales: {
yAxes: [
{
id: 'y-axis-temp',
type: 'linear',
position: 'left',
ticks: {
beginAtZero: true,
fontColor: 'white'
},
scaleLabel: {
display: true,
labelString: 'Temperatur (°C)',
fontColor: 'white'
}
},
{
id: 'y-axis-humidity',
type: 'linear',
position: 'right',
ticks: {
beginAtZero: true,
fontColor: 'white'
},
scaleLabel: {
display: true,
labelString: 'Feuchtigkeit (%)',
fontColor: 'white'
}
}
],
xAxes: [{ // Hier war der Fehler
ticks: {
fontColor: 'white'
}
}]
},
legend: {
labels: {
fontColor: 'white'
}
}
}
});
}
</script>
</body>
</html>

4
run_gateway.sh
View File

@ -1,5 +1,3 @@
TAG="latest" TAG="latest"
CONTAINER="dasmoorhuhn/atc-mithermometer-gateway" CONTAINER="dasmoorhuhn/atc-mithermometer-gateway"
CONTAINER_NAME="ATC_MiThermometer_Gateway" CONTAINER_NAME="ATC_MiThermometer_Gateway"
@ -157,5 +155,5 @@ while [ "$1" != "" ]; do
esac esac
done done
# docker_run docker_run