Készíts látványos weboldalt a Raspberry Pi-hez, ami valós időben jeleníti meg az RPi szenzorai által mért adatokat!

socket.on('connect', function() { console.log('Sikeresen csatlakoztál a WebSockethez!'); });

socket.on('sensor_update', function(data) { document.getElementById('currentTemp').innerText = data.temperature; document.getElementById('currentHum').innerText = data.humidity;

if (chart) { // Maximum 10 adatpontot tartunk a grafikonon if (chart.data.labels.length > 10) { chart.data.labels.shift(); chart.data.datasets[0].data.shift(); chart.data.datasets[1].data.shift(); } chart.data.labels.push(new Date().toLocaleTimeString()); chart.data.datasets[0].data.push(data.temperature); chart.data.datasets[1].data.push(data.humidity); chart.update(); } });

window.onload = function() { const ctx = document.getElementById('sensorChart').getContext('2d'); chart = new Chart(ctx, { type: 'line', data: { labels: [], datasets: [{ label: 'Hőmérséklet (°C)', data: [], borderColor: 'rgb(255, 99, 132)', tension: 0.1 }, { label: 'Páratartalom (%)', data: [], borderColor: 'rgb(54, 162, 235)', tension: 0.1 }] }, options: { scales: { y: { beginAtZero: false } } } }); };