Skip to content
GitLab
Commit f2b1d5e1 authored by Gezer's avatar Gezer
Browse files

modified main.css so the content is in the center 

also modified AboutView with some content
parent 6068d9e3
Hide whitespace changes
Inline Side-by-side
frontend/src/assets/main.css
View file @ f2b1d5e1
......@@ -28,7 +28,7 @@ a,
}
#app {
display: grid;
display: flex;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
......
frontend/src/components/NavBar.vue
View file @ f2b1d5e1
......@@ -8,6 +8,7 @@ import { RouterLink, RouterView } from 'vue-router'
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="100" height="100" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink to="/login">Login</RouterLink>
<RouterLink to="/register">Registrieren</RouterLink>
<RouterLink to="/buildingsView">Gebäude</RouterLink>
......
frontend/src/views/AboutView.vue
View file @ f2b1d5e1
<template>
<div class="about">
<h1>This is an about page</h1>
<ChartCard
title="Testdaten CO₂"
:labels="labels"
:data="co2Data"
borderColor="#ff6384"
/>
<!-- Debug-Ausgabe zur Kontrolle -->
<pre>Labels: {{ labels }}</pre>
<pre>Daten: {{ co2Data }}</pre>
<div class="about-page">
<h1>Über das Projekt</h1>
<p>
Dieses Webportal dient der Visualisierung von Umweltdaten, die mithilfe der von der
Hochschule für Technik Stuttgart entwickelten <strong>HFT CO₂-Ampel</strong> erfasst werden.
Ziel ist es, CO₂-Konzentration, Temperatur und Luftfeuchtigkeit in Innenräumen
kontinuierlich zu messen, auszuwerten und in benutzerfreundlicher Form anzuzeigen.
</p>
<h2>Was ist die HFT CO₂-Ampel?</h2>
<p>
Die CO₂-Ampel ist ein einfach zusammenbaubarer Bausatz auf Basis eines ESP8266 (NodeMCU)
und eines Sensirion SCD30 CO₂-Sensors. Sie ist in der Lage, CO₂-Werte hochauflösend zu
messen, die Luftqualität per LED-Farbring darzustellen und Daten kabellos zu übertragen.
</p>
<p>
Die Anzeige erfolgt farblich anhand der Luftqualität gemäß DIN EN 13779:
<ul>
<li>Grün: gute Luftqualität (bis 800 ppm)</li>
<li>Gelb/Orange: erhöhte Werte, Lüften empfohlen</li>
<li>Rot: schlechte Luftqualität (> 1600 ppm), Lüften erforderlich</li>
<li>Blinkend Rot: sehr schlechte Luftqualität (> 2000 ppm)</li>
</ul>
</p>
<h2>Hardware & Technik</h2>
<ul>
<li><strong>Sensor:</strong> Sensirion SCD30 CO₂-, Temperatur- und Feuchtigkeitssensor</li>
<li><strong>Steuerung:</strong> ESP8266 Microcontroller (NodeMCU)</li>
<li><strong>Anzeige:</strong> WS2812 RGB-LED-Ring</li>
<li><strong>Gehäuse:</strong> Plexiglas mit Wand- oder Tischmontage</li>
<li><strong>Software:</strong> Arduino-basierte Firmware mit WLAN/MQTT-Unterstützung</li>
</ul>
<h2>Webinterface</h2>
<p>
Die von der Ampel gemessenen Daten werden in einer zentralen Datenbank gespeichert
und über dieses Portal visualisiert. Nutzerinnen und Nutzer können z. B. den Verlauf der
CO₂-Konzentration eines Raumes einsehen und so datenbasiert lüften oder auf
Luftqualitätsveränderungen reagieren.
</p>
<h2>Open Source & Bildung</h2>
<p>
Die gesamte CO₂-Ampel ist <strong>Open Source</strong> (GPLv3) und wurde mit Blick auf Bildung,
Transparenz und Erweiterbarkeit entwickelt. Sie eignet sich ideal für Hochschulen,
Schulen und private Anwendungen.
</p>
<h2>Projektteam</h2>
<p>
Das Projekt wurde an der HFT Stuttgart unter anderem von Eric Duminil, Tobias Erhart,
Myriam Guedey, Nathalie Heimsch, Benjamin Hueber, Robert Otto und Jonas Stave entwickelt.
</p>
<p>
Weitere Infos und Bauanleitungen unter:
<a href="https://transfer.hft-stuttgart.de/gitlab/co2ampel" target="_blank">
https://transfer.hft-stuttgart.de/gitlab/co2ampel
</a>
</p>
<h2>Technologie</h2>
<ul>
<li><strong>Frontend:</strong> Vue.js 3</li>
<li><strong>Backend:</strong> Django REST Framework</li>
<li><strong>Datenbank:</strong> SQLite (Testumgebung)</li>
<li><strong>Datenquelle:</strong> CO₂-, Temperatur- und Feuchtigkeitssensoren in HT Gebäuden</li>
</ul>
<h2>Beispielhafte Sensoren</h2>
<div class="sensor-gallery">
<img src="../assets/co2_ampel.png" alt="Ampel Hardware" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import ChartCard from '../components/ChartCard.vue';
const availableRooms = ['1/121', '1/131', '1/210', '1/211']
export default defineComponent({
name: 'AboutView',
components: { ChartCard },
setup() {
const labels = ref<string[]>([]);
const co2Data = ref<number[]>([]);
onMounted(async () => {
try {
const url = 'http://localhost:8000/api/room_data_range?room=1/210&start=-7d&stop=now()';
//const url = 'http://localhost:8000/api/room_data_range?room=${room.value}&start=${start.value}&stop=${stop.value}';
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP-Fehler: ${response.status}`);
}
const json = await response.json();
console.log('📦 JSON:', json);
console.log('🔍 JSON.data:', json.data);
const entries = Object.entries(json.data).sort(
([a], [b]) => new Date(a).getTime() - new Date(b).getTime()
);
const labelsArray = entries.map(([timestamp]) =>
new Date(timestamp).toLocaleTimeString()
);
const co2DataArray = entries.map(([, values]) => values.co2);
labels.value = labelsArray;
co2Data.value = co2DataArray;
console.log('✅ Labels:', labelsArray);
console.log('✅ CO₂-Werte:', co2DataArray);
} catch (err) {
console.error('❌ Fehler beim Laden der Daten:', err);
}
});
return { labels, co2Data };
}
});
<script setup lang="ts">
// Kein Script nötig für statische Seite
</script>
<style scoped>
.about-page {
max-width: 800px;
margin: 3rem auto;
padding: 1rem 2rem;
background-color: #f9f9f9;
border-radius: 8px;
font-family: sans-serif;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.about-page h1 {
color: #333;
text-align: center;
margin-bottom: 1.5rem;
}
.about-page h2 {
margin-top: 2rem;
color: #333;
}
.about-page li {
color: #333;
}
.about-page p {
line-height: 1.6;
color: #444;
}
.about-page ul {
padding-left: 1.5rem;
}
.sensor-gallery {
display: flex;
gap: 1rem;
margin-top: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.sensor-gallery img {
width: 180px;
height: auto;
border-radius: 6px;
border: 1px solid #ccc;
}
</style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal