[ERLEDIGT] Farbe von Buttons ändern und den Status speichern

Mxrco2001 · 12 Oktober 2021

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 · 12 Oktober 2021

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 · 12 Oktober 2021

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 · 12 Oktober 2021

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


@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 · 13 Oktober 2021

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 · 14 Oktober 2021

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?

basti1012 · 14 Oktober 2021

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.

Mxrco2001 · 14 Oktober 2021

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 :)

Mxrco2001 · 21 Oktober 2021

Hallo zusammen,

hab das Ganze nun so hinbekommen wie es sein soll. Die Buttons aktualisieren sich nun automatisch und der Status wird Serverseitig gespeichert und immer im 2 Sekunden Takt ausgelesen :)

Senco Snifler · 21 Oktober 2021

Hi Mxrco,

magst du deine Programmierung zur Verfügung stellen, bin auch in ähnlicher auf der Suche

.

Das wäre sehr nett. Danke

[ERLEDIGT] Farbe von Buttons ändern und den Status speichern

Mxrco2001

Neues Mitglied

basti1012

Senior HTML'ler

Mxrco2001

Neues Mitglied

Mxrco2001

Neues Mitglied

basti1012

Senior HTML'ler

Mxrco2001

Neues Mitglied

Anhänge

basti1012

Senior HTML'ler

Mxrco2001

Neues Mitglied

Mxrco2001

Neues Mitglied

Senco Snifler

Neues Mitglied

Neueste Beiträge