ich arbeite seit ein paar Tagen an einem Problem, das ich bisher nicht lösen konnte. Hier ist mein Ziel:
Ich möchte einen Webserver auf meinem Raspberry Pi betreiben und dann lokal darauf zugreifen. Die Verbindung zwischen Server und Client soll über WebSockets erfolgen, und dafür verwende ich die Bibliothek Flask-SocketIO. Alles funktioniert problemlos, bis ich den Taster betätige, den ich mit meinem Raspberry Pi verbunden habe. Dieser Taster löst eine Funktion aus, und diese Funktion wird auch ausgeführt. Nach dieser Ausführung wird jedoch keine Kommunikation mehr zwischen Server und Client übertragen.
Können Sie mir bei diesem Problem helfen?
hier ist noch der html und der python code
Code: Alles auswählen
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.2/socket.io.js"></script>
<style>
.range-slider {
-webkit-appearance: none;
width: 100%;
height: 8px;
border-radius: 10px;
background: #0082f3;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
cursor: pointer;
margin-top: 50px;
}
.range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
border-radius: 50%;
background: #ff9900;
cursor: pointer;
}
.range-slider::-moz-range-thumb {
width: 30px;
height: 30px;
border-radius: 50%;
background: #ff9900;
cursor: pointer;
}
.slider-container{
width: 50%;
}
</style>
</head>
<body>
<h1>Slider Example</h1>
<div class="slider-container">
<input class="range-slider" type="range" id="slider0" min="0" max="100" value="50">
<input class="range-slider" type="range" id="slider1" min="0" max="100" value="50">
<input class="range-slider" type="range" id="slider2" min="0" max="100" value="50">
<input class="range-slider" type="range" id="slider3" min="0" max="100" value="50">
<input class="range-slider" type="range" id="slider4" min="0" max="100" value="50">
<input class="range-slider" type="range" id="slider5" min="0" max="100" value="50">
</div>
<script>
const socket = io.connect('http://localhost:3000');
socket.on('connect',() => {
socket.emit('Client Verbunden', 'connect');
console.log("Funktioniert")
slider_values = {}
value = slider_values
});
var slider0 = document.getElementById('slider0');
var slider1 = document.getElementById('slider1');
var slider2 = document.getElementById('slider2');
var slider3 = document.getElementById('slider3');
var slider4 = document.getElementById('slider4');
var slider5 = document.getElementById('slider5');
slider0.addEventListener('input', () => {
var value = slider0.value;
socket.emit('slider_value', {id: 'slider0', value: value});
});
slider1.addEventListener('input', () => {
var value = slider1.value;
socket.emit('slider_value', {id: 'slider1', value: value})
});
slider2.addEventListener('input', () => {
var value = slider2.value;
socket.emit('slider_value', {id: 'slider2', value: value})
});
slider3.addEventListener('input', () => {
var value = slider3.value;
socket.emit('slider_value', {id: 'slider3', value: value})
});
slider4.addEventListener('input', () => {
var value = slider4.value;
socket.emit('slider_value', {id: 'slider4', value: value})
});
slider5.addEventListener('input', () => {
var value = slider5.value;
socket.emit('slider_value', {id: 'slider5', value: value})
});
// Werte der Slider an den Server schiken
// function für das Updaten der Slider werte
function setSliderValues(values) {
for (var id in values){
document.getElementById(id).value = values[id];
}
}
// slider werden gesetzt wen taster gedrück wird
socket.on("daten", (values) => {
setSliderValues(values);
console.log("funktioniert bis hier")
});
</script>
</body>
</html>
Code: Alles auswählen
from flask import Flask, render_template
from flask_socketio import SocketIO, send, emit
import eventlet
import RPi.GPIO as GPIO
# Hier wird der code geladen der auf dem Server laufen wird
app = Flask(__name__, template_folder='/home/pi/Desktop/Test_Komplett/templates')
socketio = SocketIO(app)
# Pin bei dem der Taster angehängt ist
BUTTON_PIN = 22
# Hier werden die Variabeln gesetzt
slider_values = {}
# Initialisieren der GPIO Bibliothek
GPIO.setmode(GPIO.BCM)
GPIO.setup(BUTTON_PIN, GPIO.IN, pull_up_down=GPIO.PUD_DOWN)
@app.route('/')
def index():
return render_template('index.html')
# wird ausgeführt wen vom Client die Nachricht connect kommt
@socketio.on('connect')
def connection():
print("Client Verbunden")
# bekommt die Werte der slider wen sie
@socketio.on('slider_value')
def handle_slider_value(data):
#Daten von slidern empfangen
slider_id = data['id']
slider_value = data['value']
# Werte der Slider speichern
slider_values[slider_id] = slider_value
print(slider_values)
def ping(channel):
print("Taster wurde gedrückt")
slider_values['slider1'] = 20
slider_values['slider2'] = 30
slider_values['slider3'] = 40
slider_values['slider4'] = 50
slider_values['slider5'] = 60
print(slider_values)
socketio.emit('daten', slider_values)
# Überwachung des Tasters
GPIO.add_event_detect(BUTTON_PIN, GPIO.RISING, callback=ping, bouncetime=200)
if __name__ == '__main__':
socketio.run(app, host='0.0.0.0', port=3000)
GPIO.cleanup()
