Flask auf Raspberry Pi

Webkommunikation mit Flask auf Raspberry Pi Zero

Was ist Flask?

Flask ist ein minimalistisches Python-Webframework, das sich ideal für kleine Projekte und IoT-Anwendungen eignet. Es funktioniert so:

Grundprinzip:
1. Routing: URL-Pfade werden Python-Funktionen zugeordnet
2. Templates: HTML-Dateien werden dynamisch generiert
3. Request-Handling: Verarbeitung von GET/POST-Requests
4. REST-API: Daten können im JSON-Format ausgetauscht werden

Installation auf Raspberry Pi

So installierst du Flask auf dem Raspberry Pi Zero:

# Aktualisiere das System
sudo apt update && sudo apt upgrade -y

# Installiere Python und Pip
sudo apt install python3 python3-pip -y

# Installiere Flask
pip3 install flask

# Firewall für Port 5000 freigeben (optional)
sudo ufw allow 5000

Beispielprojekt: Webinterface

Eine vollständige Anwendung mit Buttons, Slidern und Live-Daten:

HTML/JavaScript (templates/index.html):

<!DOCTYPE html>
<html>
<head>
    <title>Pi Control</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button onclick="send(1)">Btn1</button>
    <button onclick="send(2)">Btn2</button>
    <button onclick="send(3)">Btn3</button>
    <button onclick="send(4)">Btn4</button>

    <input type="text" id="textInput">
    <button onclick="sendText()">Senden</button>

    <input type="range" min="-100" max="100" value="0" 
           id="slider" oninput="updateSlider(this.value)">
    <span id="sliderValue">0%</span>

    <div id="response">
        {% for msg in messages %}
            <p>{{ msg }}</p>
        {% endfor %}
    </div>

    <script>
    function send(btn) {
        $.get('/button?nr=' + btn);
    }
    
    function sendText() {
        $.post('/text', {text: $('#textInput').val()});
    }

    function updateSlider(val) {
        $('#sliderValue').text(val + '%');
        $.post('/slider', {value: val});
    }
    </script>
</body>
</html>

Python-Code (app.py):

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

messages = []

@app.route('/')
def index():
    return render_template('index.html', messages=messages)

@app.route('/button')
def handle_button():
    btn_nr = request.args.get('nr')
    messages.append(f"Button {btn_nr} gedrückt")
    return jsonify(status="ok")

@app.route('/text', methods=['POST'])
def handle_text():
    text = request.form['text']
    messages.append(f"Text: {text}")
    return jsonify(status="ok")

@app.route('/slider', methods=['POST'])
def handle_slider():
    value = request.form['value']
    messages.append(f"Slider: {value}%")
    return jsonify(status="ok")

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Starten der Anwendung

# Dateistruktur erstellen
mkdir -p ~/flask-app/templates

# HTML- und Python-Dateien in die Ordner kopieren

# Anwendung starten
python3 app.py

# Im Browser öffnen:
# http://[PI-IP]:5000

Wichtige Tipps

Verwende host='0.0.0.0' für Netzwerkzugriff
Für Produktivbetrieb debug=False setzen
Bei Problemen Firewall-Einstellungen prüfen
Für Auto-Start: Systemd-Service einrichten