Frage Farbe von Buttons ändern und den Status speichern

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mxrco2001

Neues Mitglied
12 Oktober 2021
5
0
1
19
Hallo zusammen,

ich habe schon einige Zeit nach einer Lösung für mein Problem gesucht und bisher leider nichts gefunden.

Mein Problem ist folgendes:

Ich muss bei einer Lichtsteuerung mit dem RaspberryPi auf der Website die Buttons je nach Status z.B. an = 1 = Farbe grün und aus = 0 = Farbe rot anzeigen lassen.
Die Ganze Steuerung läuft mit einem Python Script welches mit dem Webserver kommuniziert und die html und css Seite aufruft.
Leider bin ich kein Programmierer oder ähnliches und tu mir dort eher schwer.

Ich würde gerne von euch erfahren, ob dies Möglich ist die Farben zu ändern auf eine andere Farbe und diese auch solange zu behalten, bis der Status also von 0 auf 1 oder umgekehrt sich ändert. Die Farbe soll sich somit nicht ändern auch wenn die Seite neu lädt.

Würde mich freuen, wenn ihr mir Ratschläge/Tipps geben könnt denn Momentan stehe ich etwas auf dem Schlauch.
 

basti1012

Senior HTML'ler
26 November 2017
1.678
177
63
Minden
basti1012.de
Das geht sicherlich.
Einfachei if Abfrage , ob Status 1 oder 0 ist und dann eine Klasse zuweisen, wo die Farbe definiert ist, oder einfach über den Style Attribute die Farbe ändern.

Um mehr sagen zu können wäre der Code wichtig, den du bis jetzt nutzt.
 

Mxrco2001

Neues Mitglied
12 Oktober 2021
5
0
1
19
Hallo Basti,

Aktuell gibt es drei hauptsächliche Dateien

Einmal das Python Script welches die jeweiligen Pins steuert und den Status speichert, ob ein Relais gesteuert wurde oder nicht. Das dient zum gleichzeitigen Ausschalten aller Relais mit einem Button "Alles AUS"

# coding=utf-8 import sys from flask import Flask, render_template, request, redirect, url_for, make_response import time import RPi.GPIO as GPIO GPIO.setwarnings(False) pin1 =26 #Relais Pins Nummer pin2 =19 pin3 =13 pin4 =6 pin5 =27 pin6 =17 pin7 =4 pin8 =21 pin9 =20 pin10 =16 pin11 =12 pin12 =5 pin13 =25 pin14 =24 pin15 =23 pin16 =18 pin17 = 0 GPIO.setmode(GPIO.BCM) #GPIO MODE GPIO.setup(pin1,GPIO.OUT) #Alle Relais Pins als OUTPUT GPIO.setup(pin2,GPIO.OUT) GPIO.setup(pin3,GPIO.OUT) GPIO.setup(pin4,GPIO.OUT) GPIO.setup(pin5,GPIO.OUT) GPIO.setup(pin6,GPIO.OUT) GPIO.setup(pin7,GPIO.OUT) GPIO.setup(pin8,GPIO.OUT) GPIO.setup(pin9,GPIO.OUT) GPIO.setup(pin10,GPIO.OUT) GPIO.setup(pin11,GPIO.OUT) GPIO.setup(pin12,GPIO.OUT) GPIO.setup(pin13,GPIO.OUT) GPIO.setup(pin14,GPIO.OUT) GPIO.setup(pin15,GPIO.OUT) GPIO.setup(pin16,GPIO.OUT) GPIO.setup(pin17,GPIO.OUT) GPIO.output(pin1 , 1) GPIO.output(pin2 , 1) GPIO.output(pin3 , 1) GPIO.output(pin4 , 1) GPIO.output(pin5 , 1) GPIO.output(pin6 , 1) GPIO.output(pin7 , 1) GPIO.output(pin8 , 1) GPIO.output(pin9 , 1) GPIO.output(pin10 , 1) GPIO.output(pin11 , 1) GPIO.output(pin12 , 1) GPIO.output(pin13 , 1) GPIO.output(pin14 , 1) GPIO.output(pin15 , 1) GPIO.output(pin16 , 1) GPIO.output(pin17 , 1) app = Flask(__name__) #Flask Server einrichten #Rückgabe der Seite index.html wenn die IP-Adresse ausgewählt ist states = [] for i in range(1, 17): states.append(i) states.insert(i, 0) @app.route('/') def index(): return render_template('index.html') #Jeder HTML-Taster ergibt einen Nummer zurück @app.route('/<changepin>', methods=['POST']) def reroute(changepin): changePin = int(changepin) #In Integer umwandeln if changePin < 18: states[changePin] = 1 if states[changePin] == 0 else 0 if changePin == 1: print ("Relais1 AN") #Relais1 GPIO.output(pin1 ,0) time.sleep(0.5) GPIO.output(pin1 ,1) elif changePin == 2: print ("Relais2") #Relais2 GPIO.output(pin2 ,0) time.sleep(0.5) GPIO.output(pin2, 1) elif changePin == 3: print ("Relais3") #Relais3 GPIO.output(pin3 ,0) time.sleep(0.5) GPIO.output(pin3, 1) elif changePin == 4: print ("Relais4") #Relais4 GPIO.output(pin4 ,0) time.sleep(0.5) GPIO.output(pin4, 1) elif changePin == 5: print ("Relais5") #Relais5 GPIO.output(pin5 ,0) time.sleep(0.5) GPIO.output(pin5, 1) elif changePin == 6: print ("Relais6") #Relais6 GPIO.output(pin6 ,0) time.sleep(0.5) GPIO.output(pin6, 1) elif changePin == 7: print ("Relais7") #Relais7 GPIO.output(pin7 ,0) time.sleep(0.5) GPIO.output(pin7, 1) elif changePin == 8: print ("Relais8") #Relais8 GPIO.output(pin8 ,0) time.sleep(0.5) GPIO.output(pin8, 1) elif changePin == 9: print ("Relais9") #Relais9 GPIO.output(pin9 ,0) time.sleep(0.5) GPIO.output(pin9, 1) elif changePin == 10: print ("Relais10") #Relais10 GPIO.output(pin10 ,0) time.sleep(0.5) GPIO.output(pin10, 1) elif changePin == 11: print ("Relais11") #Relais11 GPIO.output(pin11 ,0) time.sleep(0.5) GPIO.output(pin11, 1) elif changePin == 12: print ("Relais12") #Relais12 GPIO.output(pin12 ,0) time.sleep(0.5) GPIO.output(pin12, 1) elif changePin == 13: print ("Relais13") #Relais13 GPIO.output(pin13 ,0) time.sleep(0.5) GPIO.output(pin13, 1) elif changePin == 14: print ("Relais14") #Relais14 GPIO.output(pin14 ,0) time.sleep(0.5) GPIO.output(pin14, 1) elif changePin == 15: print ("Relais15") #Relais15 GPIO.output(pin15 ,0) time.sleep(0.5) GPIO.output(pin15, 1) elif changePin == 16: print ("Relais16") #Relais16 GPIO.output(pin16 ,0) time.sleep(0.5) GPIO.output(pin16, 1) elif changePin == 18: print("Alle AUS") #Alle Relais Aus die An sind for i in range(1, 17): state = states[i] if state == 1: GPIO.output(globals()['pin' + str(i)], 0) time.sleep(0.2) GPIO.output(globals()['pin' + str(i)], 1) states[i] = 0 response = make_response(redirect(url_for('index'))) return(response) #app.run(debug=True, host='0.0.0.0') #Einrichten des Servers im Debug-Modus

Die Html Seite für die Buttons mit jeweiliger ID zum schalten im Python Script.
Ist zwar eine unschöne Art wie diese Seite aufgebaut ist aber ich bin froh das es damit funktioniert.


<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title> Lichtersteuerung</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="../static/styles/mainpage.css"> <link rel="apple-touch-icon" sizes="180x180" href="../static/styles/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="../static/styles/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="../static/styles/favicon-16x16.png"> </head> <body> <div id="container"> <form action="/1" method="POST"> <button class="button" type="submit" id="1">Relais 1</button> </form> <form action="/2" method="POST"> <button class="button" type="submit" id="2">Relais 2</button> </form> <form action="/3" method="POST"> <button class="button" type="submit" id="3">Relais 3</button> </form> <form action="/4" method="POST"> <button class="button" type="submit" id="4">Relais 4</button> </form> <form action="/5" method="POST"> <button class="button" type="submit" id="5">Relais 5</button> </form> <form action="/6" method="POST"> <button class="button" type="submit" id="6">Relais 6</button> </form> <form action="/7" method="POST"> <button class="button" type="submit" id="7">Relais 7</button> </form> <form action="/8" method="POST"> <button class="button" type="submit" id="8">Relais 8</button> </form> <form action="/9" method="POST"> <button class="button" type="submit" id="9">Relais 9</button> </form> <form action="/10" method="POST"> <button class="button" type="submit" id="10">Relais 10</button> </form> <form action="/11" method="POST"> <button class="button" type="submit" id="11">Relais 11</button> </form> <form action="/12" method="POST"> <button class="button" type="submit" id="12">Relais 12</button> </form> <form action="/13" method="POST"> <button class="button" type="submit" id="13">Relais 13</button> </form> <form action="/14" method="POST"> <button class="button" type="submit" id="14">Relais 14</button> </form> <form action="/15" method="POST"> <button class="button" type="submit" id="15">Relais 15</button> </form> <form action="/16" method="POST"> <button class="button" type="submit" id="16">Relais 16</button> </form> </div> <div id="containerv"> <form action="/18" method="POST"> <button class="button" type="submit" id="18">Alles AUS</button> </form> </body> </html>
 

Mxrco2001

Neues Mitglied
12 Oktober 2021
5
0
1
19
Die letzte Datei ist die CSS Datei. Nichts besonderes soll aber einfach gehalten werden.
Wie gesagt ist meine Frage, ob es Möglich ist die Buttons 1-16 mit einer anderen Farbe zu hinterlegen, wenn der Status im Python Script 1 oder 0 ist. Ich weiß nicht, ob es Möglich ist dies auch vom Python Script aus zu ändern :frown:
@media only screen and (max-width: 960px) { body, html { min-height: 100%; height: auto !important; overflow: auto; } #containerv { margin-top: 20px; } #container { margin-top: 50px; } .button { width: 100px; height: 60px; background: #71b128; font-size: 25px; cursor: pointer; text-align: center; border: 1px solid grey; color: white; margin: 10px 10px 10px 10px; display: inline-flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 5px; } .button:hover { background-color: green; color: white; transition-duration: 0.5s; border: 1px solid grey; } } @media only screen and (min-width: 961px) { body { overflow: hidden; } #containerv { margin-top: 20px; } #container { margin-top: 150px; } } body { background: url(Hintergrund.jpg) no-repeat top fixed; background-size: cover; display: grid; place-items: center; } html, body { font-family: 'Raleway', sans-serif; } #container { width: 90%; padding: 20px 0px 20px 0px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; background-color: white; opacity: 0.9; border-radius: 9px; } .button { width: 100px; height: 80px; background: #71b128; font-size: 25px; cursor: pointer; text-align: center; border: 1px solid grey; color: white; margin: 10px 10px 10px 10px; display: inline-flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 5px; } .button:hover { background-color: green; color: white; transition-duration: 0.5s; border: 1px solid grey; } #Logo { text-align: center; margin-top: 70px; } #containerv { padding: 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; background-color: white; opacity: 0.9; border-radius: 9px; }
 

basti1012

Senior HTML'ler
26 November 2017
1.678
177
63
Minden
basti1012.de
Python ist noch nicht mein Ding.
In den HTML Teil muss man irgendwie Status Abfragen hinbekommen.

Zb mit Javascript/PHP
Javascript macht eine GET/Post Abfrage zu den PHP Script , das gibt z. B. eine JSON zurück mit den einzelnen Status anzeigen.
Das kann man dann in Javascript abfragen und die einzelnen Buttons einfärben.

Die Frage ist jetzt ob Python das auch kann (denke schon) , und wie man das macht?

Ist einer hier der Python kann , und eine JSON erstellen kann zu den Status der Buttons?
 

Mxrco2001

Neues Mitglied
12 Oktober 2021
5
0
1
19
Hallo Basti,

habe eventuell eine Lösung funktioniert aber noch nicht so ganz wie gewollt.

Der neue Code ist folgendermaßen

states = [0] * 16 @app.route('/') def index(): return render_template('index.html') #Jeder HTML-Taster ergibt einen Nummer zurück @app.route('/status') def status(): return states

und in der HTML Datei

<script> function updateButtons() { var http = new XMLHttpRequest(); http.onreadystatechange = () => { if (http.readyState != 4) { return; } if (http.status != 200) { return } const response = JSON.parse(http.responseText); for (let i = 0; i < response.length; i++) { const id = i + 1; const enabled = response[i] === 1; if (!enabled) { document.getElementById(new String(id)).classList.add("disabled"); } else { document.getElementById(new String(id)).classList.remove("disabled"); } } } http.open("GET", "/status", false); http.send(null); } window.addEventListener('load', () => { updateButtons(); setInterval(updateButtons, 1000 * 30); }); </script>

Die Fehlermeldungen (im Anhang) bekomm ich leider nicht weg.

Zufällig eine Idee, die auch ausprobieren könnte?
 

Anhänge

  • BildBrowserMeldung.png
    BildBrowserMeldung.png
    40,2 KB · Aufrufe: 4
  • fehler.png
    fehler.png
    558,2 KB · Aufrufe: 4
  • fehler1.png
    fehler1.png
    183,6 KB · Aufrufe: 4

basti1012

Senior HTML'ler
26 November 2017
1.678
177
63
Minden
basti1012.de
So ein Javascript ist schon mal gut.
Müsste man noch etwas anders machen ,aber gut.

Nur das Python Script dahinter ist nicht mein Thema.
Mit den ganzen Fehlermeldungen kann ich nichts anfangen.
Dass du ein 500 Error hast, wird wohl an die Fehler von Python liegen.

Das ganze HTML und JS würde ich noch etwas ändern, nur ohne Antwort vom Python Script weiß ich hier nicht weiter.
Ich weiß auch nicht, ob das hie eine kann.
Vielleicht fragst du da im Python Forum mal nach.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Die Fehlermeldung in fehler1.png scheint relativ präzise auszusagen woran es fehlt:
Der Typ, den die Funktion status zurück gibt, sollte ein String, oder, oder, ... sein, aber es wird eine Liste vorgefunden. Konvertiere diese Liste states in einen String, z. B. im CSV-Format, so wie hier beschrieben:

Edit: Noch einfacher scheint es mit JSON zu gehen:
 
Zuletzt bearbeitet:

Mxrco2001

Neues Mitglied
12 Oktober 2021
5
0
1
19
Danke für die Tipps ich werde das alles mal morgen ausprobieren oder eventuell heute Abend, wenn ich dazu komme.
Aber danke für die Hilfe ist ja meistens Freizeit die im Forum investiert wird :)