PyCafe - Dash - Dash Color Picker Example

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import dash
from dash import dcc, html, Input, Output
import base64
import io
from PIL import Image
import os
from datetime import datetime

# App initialisieren
app = dash.Dash(__name__)

# Speicherordner erstellen
def create_storage_dir():
    storage_dir = os.path.join(os.getcwd(), "storage")
    os.makedirs(storage_dir, exist_ok=True)
    return storage_dir

# Dash Layout mit Kamera und Button
app.layout = html.Div([
    html.H1("📸 Foto mit der Kamera aufnehmen"),

    # Kamera-Video-Element
    html.Video(id="video", autoPlay=True, style={"width": "100%"}),

    # Button zum Auslösen der Aufnahme
    html.Button("📸 Foto aufnehmen", id="capture-btn", n_clicks=0),

    # Bild, das nach der Aufnahme angezeigt wird
    html.Img(id="photo", style={
        "width": "100%",
        "display": "none"
    }),

    # Textbereich zum Anzeigen von Erfolgsmeldungen
    html.Div(id="feedback", style={"marginTop": "20px"}),

    # Unsichtbares Canvas-Element zum Zeichnen
    html.Canvas(id="canvas", style={"display": "none"}),

    # Unsichtbares Textarea für das Base64-Bild
    dcc.Store(id="image-data", storage_type="memory")  # Hier wird das Base64-Bild gespeichert
])

# JavaScript zum Erstellen eines Base64-Bildes
app.clientside_callback(
    """
    function(n_clicks) {
        if (n_clicks > 0) {
            let video = document.getElementById('video');
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            return canvas.toDataURL('image/jpeg');
        }
        return '';
    }
    """,
    Output("image-data", "data"),
    Input("capture-btn", "n_clicks")
)

# Callback für das Speichern des Fotos
@app.callback(
    Output("photo", "src"),
    Output("photo", "style"),
    Output("feedback", "children"),
    Input("image-data", "data"),
    prevent_initial_call=True
)
def save_photo(image_data):
    if image_data:
        # Entfernen des Prefixes von base64
        image_data = image_data.split(',')[1]
        img_bytes = base64.b64decode(image_data)
        image = Image.open(io.BytesIO(img_bytes))

        # Speicherverzeichnis erstellen
        storage_dir = create_storage_dir()
        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
        filename = f"photo_{timestamp}.jpg"
        file_path = os.path.join(storage_dir, filename)

        # Bild speichern
        image.save(file_path, "JPEG")

        return f"data:image/jpeg;base64,{image_data}", {"display": "block"}, f"✅ Foto erfolgreich gespeichert: {filename}"

    return "", {"display": "none"}, ""


# Server ausführen
if __name__ == "__main__":
    app.run_server(debug=True, use_reloader=False)
Py.Cafe

dash-color-picker

Dash Color Picker Example
