Hallo liebe Freunde es Arduino
ich hab Mir ein kleines Smart Home erstelle das ich über einem eps32 wo ich als Access Point drauf zugriff habe ich hab da aber ein paar kleine Fehler eingebaut die ich nicht gelöst bekomme.
wenn ich die Schalter betätige schalten die ersten 3 Schalter perfekt aber die anderen Änderen einfach ihre Farbe nicht b.z.w. halten sie nicht ihre farbe.
2 wollte ich die webseite auf einem separaten touchdisplay (eps32 Tpm408-2.8 ) anzeigen lassen um sie darüber anzusteuen dazu fehlt mir leider der komplette code vielleicht hat da jemand eine Idee und könnte mir da ein code schreiben oder zur seite stehen
Das wäre der Code Für den esp32
#include <WebServer.h>
#include "index_html.h" // In dieser Datei befindet sich die Steuerung Webseite
const char* ssid = ""; // WLAN-Name
const char* password = ""; // WLAN-Passwort
#define RelaisPin 21 // Beispiel-Pin für Relais 1
#define RelaisPin1 22 // Beispiel-Pin für Relais 2
#define RelaisPin2 23 // Beispiel-Pin für Licht
#define RelaisPin3 19 // Beispiel-Pin für Front
#define RelaisPin4 18 // Beispiel-Pin für Front
#define TasterPin 34 // Beispiel-Pin für den Taster (GPIO34 ist input only)
int active_low = 0; // Relais aktiv, wenn LOW
int active_low1 = 0;
int active_low2 = 0;
int active_low3 = 0;
int active_low4 = 0;
WebServer server(80); // Serverport hier einstellen
int val = 0; // Hier wird der Schaltzustand gespeichert
int val1 = 0;
int val3 = 3;
int val4 = 6;
int val5 = 0;
void setup() {
pinMode(RelaisPin, OUTPUT);
pinMode(RelaisPin1, OUTPUT);
pinMode(RelaisPin2, OUTPUT);
pinMode(RelaisPin3, OUTPUT);
pinMode(RelaisPin4, OUTPUT);
pinMode(TasterPin, INPUT_PULLUP);
digitalWrite(RelaisPin, active_low);
digitalWrite(RelaisPin1, active_low1);
digitalWrite(RelaisPin2, active_low2);
digitalWrite(RelaisPin3, active_low3);
digitalWrite(RelaisPin4, active_low4);
Serial.begin(115200); // Serielle Schnittstelle initialisieren
Serial.println("Warte auf Verbindung");
WiFi.mode(WIFI_AP); // Access Point Modus
WiFi.softAP("Test", "12345678"); // Name des Wi-Fi Netzes und Passwort
delay(500);
Serial.print("IP Adresse: ");
Serial.println(WiFi.softAPIP());
// Behandlungsereignisse anschließen
server.on("/", Ereignis_Index);
server.onNotFound(handleNotFound);
server.begin(); // Starte den Server
Serial.println("HTTP Server gestartet");
}
void loop() {
server.handleClient();
if (!digitalRead(TasterPin)) { // Wenn Taster betätigt "Signal 0"
val = !val;
val1 = !val1;
val3 = !val3;
val4 = !val4;
val5 = !val5; // Umschalten
digitalWrite(RelaisPin, active_low ^ val);
digitalWrite(RelaisPin1, active_low1 ^ val1);
digitalWrite(RelaisPin2, active_low2 ^ val3);
digitalWrite(RelaisPin3, active_low3 ^ val4);
digitalWrite(RelaisPin4, active_low4 ^ val5); // Wenn active_low - Variable ist "1", das Zustand "val" wird invertiert
Serial.println("Umschalten per Taster auf " + String(val));
delay(200); // Entprellung
while (!digitalRead(TasterPin)) server.handleClient(); // warten bis der Taster losgelassen wurde
}
}
void Ereignis_Index() { // Wird ausgeführt wenn "http://<ip address>/" aufgerufen wurde
if (server.args() > 0) { // wenn Argumente im GET Anfrage vorhanden sind
if (server.arg("relais") == "6") {
Serial.println("Ausschalten");
val4 = 6;
val5 = 0;
digitalWrite(RelaisPin3, active_low3 ^ val5);
digitalWrite(RelaisPin4, active_low4 ^ val4);
server.send(200, "text/plain", String(int(val4)));
}
if (server.arg("relais") == "7") {
Serial.println("Runter");
val4 = 0;
val5 = 4;
digitalWrite(RelaisPin4, active_low4 ^ val4);
digitalWrite(RelaisPin3, active_low3 ^ val5);
server.send(200, "text/plain", String(int(val5)));
}
if (server.arg("relais") == "8") {
Serial.println("Hoch");
val4 = 5;
val5 = 0;
digitalWrite(RelaisPin4, active_low4 ^ val4);
digitalWrite(RelaisPin3, active_low3 ^ val5);
server.send(200, "text/plain", String(int(val4)));
}
if (server.arg("relais") == "2") {
Serial.println("Ausschalten");
val = 0;
val1 = 0;
digitalWrite(RelaisPin1, active_low ^ val);
digitalWrite(RelaisPin, active_low1 ^ val1);
}
if (server.arg("relais") == "3") {
Serial.println("Aus");
val1 = 0;
val = 2;
digitalWrite(RelaisPin, active_low1 ^ val1);
digitalWrite(RelaisPin1, active_low ^ val);
}
if (server.arg("relais") == "1") {
Serial.println("Ein");
val = 1;
val1 = 1;
digitalWrite(RelaisPin, active_low1 ^ val1);
digitalWrite(RelaisPin1, active_low ^ val);
}
if (server.arg("relais") == "4") {
Serial.println("Ein");
val3 = 3;
digitalWrite(RelaisPin2, active_low2 ^ val3);
server.send(200, "text/plain", String(int(val3)));
}
if (server.arg("relais") == "5") {
Serial.println("Aus");
val3 = 8;
digitalWrite(RelaisPin2, active_low2 ^ val3);
server.send(200, "text/plain", String(int(val3)));
}
server.sendHeader("Cache-Control", "no-cache"); // wichtig! damit Daten nicht aus dem Browser cache kommen
server.send(200, "text/plain", String(int(val))); // Antwort an Internet Browser senden
} else { // wenn keine Argumente im GET Anfrage
Serial.println("Sende Index.html");
server.send(200, "text/html", indexHTML); // dann Index Webseite senden
}
}
void handleNotFound() {
server.send(404, "text/plain", "404: Not found"); // Send HTTP status 404 (Not Found)
}
Das wäre der Code für die HTML.H
<!DOCTYPE html>
<html>
<head>
<title>Web Schalter 3.1</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
var Url = "/";
window.onload = start; // Funktion nach dem Laden des HTMLs ausführen
function start () {
myAjax = new XMLHttpRequest(); // Bilden eines AJAX-Objekts
myAjax.onreadystatechange = LesenAjax; // Wenn Ereignis vom Server kommt, wird Funktion LesenAjax ausgeführt
setInterval(aktualisieren, 1000); // Initialisiert das Timer-gesteuerte Ausführen von Funktion aktualisieren();
aktualisieren(); // Relais Zustand holen beim Laden der Webseite
}
function aktualisieren() {
myAjax.open("GET", Url + "?Zustand=r", true); // GET-Anfrage an Server senden asynchron
myAjax.send();
}
function LesenAjax() { // AJAX-Ereignis ist passiert
if (myAjax.readyState == 4 && myAjax.status == 200) { // Wenn Antwort vollständig und OK
var datenstr = myAjax.responseText; // empfangene Daten als Text
// Button-Farben ändern basierend auf dem Status
document.getElementById('aus').style.backgroundColor = (datenstr == '2') ? '#FF0000' : '#0000FF';
document.getElementById('ein').style.backgroundColor = (datenstr == '1') ? '#FF0000' : '#0000FF';
document.getElementById('button').style.backgroundColor = (datenstr == '0') ? '#FF0000' : '#0000FF';
document.getElementById('Runter').style.backgroundColor = (datenstr == '4') ? '#FF0000' : '#0000FF';
document.getElementById('Hoch').style.backgroundColor = (datenstr == '5') ? '#FF0000' : '#0000FF';
document.getElementById('Aus').style.backgroundColor = (datenstr == '6') ? '#FF0000' : '#0000FF';
document.getElementById('1').style.backgroundColor = (datenstr == '8') ? '#FF0000' : '#0000FF';
document.getElementById('2').style.backgroundColor = (datenstr == '3') ? '#FF0000' : '#0000FF';
}
}
function httpGet(sende) {
myAjax.open("GET", Url + sende, true);
myAjax.send();
}
</script>
<style type="text/css" media="screen, print, projection">
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
.button {
background-color: #0000FF;
color: #FFFFFF;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; /* Kleinere Schriftgröße für bessere Anpassung */
margin: 8px; /* Weniger Margin für mobile Geräte */
cursor: pointer;
border-radius: 20px;
padding: 12px;
border: none; /* Entfernen des Rahmens */
width: 100%; /* Volle Breite für mobile Geräte */
max-width: 200px; /* Maximale Breite für größere Bildschirme */
}
h1 {
color: cyan;
}
.container {
display: flex;
flex-wrap: wrap; /* Ermöglicht das Umfließen von Buttons */
justify-content: center; /* Zentriert die Buttons */
padding: 20px; /* Abstand um die Buttons */
}
</style>
</head>
<body>
<font color="cyan">
<h1 align="center"> Smart Home </h1>
</font>
<div id="time"></div>
<script>
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getFullYear(); // Verwende getFullYear()
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var Minute2 = ((Minuten < 10) ? ":0" : ":");
var Sekunden = Jetzt.getSeconds();
var Sekunde2 = ((Sekunden < 10) ? ":0" : ":");
document.getElementById('time').innerHTML = "<h2>Herzlich Willkommen!</h2><b>Heute ist der "
+ Tag + "." + Monat + "." + Jahr + ". Es ist jetzt "
+ Stunden + Minute2 + Minuten + Sekunde2 + Sekunden + " Uhr</b>";
</script>
<div class="container">
<button id="aus" class="button" onclick="httpGet('?relais=3')">Ausfahren</button>
<button id="ein" class="button" onclick="httpGet('?relais=1')">Einfahren</button>
<button id="button" class="button" onclick="httpGet('?relais=2')">Ausschalten</button>
<button id="Runter" class="button" onclick="httpGet('?relais=7')">Front Runter</button>
<button id="Hoch" class="button" onclick="httpGet('?relais=8')">Front Hoch</button>
<button id="Aus" class="button" onclick="httpGet('?relais=6')"> Front Abschalten </button>
<button id="1" class="button" onclick="httpGet('?relais=4')">Licht Ein</button>
<button id="2" class="button" onclick="httpGet('?relais=5')">Licht Aus</button>
</div>
</body>
</html>
)=====";
Für eure hilfe wäre ich sehr dankbar
MFG
Friedel
