Flask/Bootstrap - Browser macht kein Update

Django, Flask, Bottle, WSGI, CGI…
Antworten
Mottek
User
Beiträge: 2
Registriert: Donnerstag 9. Juli 2020, 12:00

Nachdem ich schon die Suche befragt habe (aber wahrscheinlich mit den falschen Suchbegriffen) möchte ich hier meine Frage loswerden:
Ich möchte auf meinem Raspi mit Python 3, Flask und Bootstrap eine Webseite aufbauen. Dabei möchte ich gerne mit Buttons verschiedene Graphen interaktiv anzeigen lassen. Ich habe 3 Buttons nebeneinander, einen für Tag, einen für Woche und einen für den Monat. Das erzeugen des jeweiligen Graphen (PNG-Datei) klappt hervorragend, nur leider wird immer nur das erste Bild angezeigt. Wenn man ein zweites sehen will, wird es erzeugt, aber nicht angezeigt. Wenn ich im Browser dann [STRG]+F5 drücke lädt der Browser das korrekte Bild.
Kann ich mit irgendeinem Befehl in Python in der Übergabe an Flask den Cache im Browser löschen?
Hier der Seitencode:

Code: Alles auswählen

<div class="container">
    <h4>Temperatur</h4>
    <div class="container">
	<form method="post">
	    <input class="btn btn-primary" type="submit" name="Tag" value="Temp Tag">
	    <input class="btn btn-primary" type="submit" name="Woche" value="Temp Woche">
	    <input class="btn btn-primary" type="submit" name="Monat" value="Temp Monat">
	</form>
    </div>
    {% if bildt == 1 %}
    <div class="container">
	<p></p>
	<img src="../static/img/Temperatur.png" alt="Temperaturverlauf">
    </div>
    {% endif %}
</div>
Und hier der zugehörige Pythoncode:

Code: Alles auswählen

if request.method == 'POST':
        if request.form.get('Tag') == 'Temp Tag':
            ret = rrdtool.graph('./static/img/Temperatur.png', '-s', 'now - 1 day', '-e', 'now', '--vertical-label', 'in °C', '--title', 'Temperatur Tag', '-l', '16.0', '-u', '22.0', 'DEF:taggraph=/home/pi/Sensor/TemperaturAufzeichnen.rrd:temp:AVERAGE', 'VDEF:tagmax=taggraph,MAXIMUM', 'VDEF:tagmin=taggraph,MINIMUM', 'LINE1:taggraph#FF0000:Temperatur', 'GPRINT:tagmax:"Max\: %2.1lf°C"', 'GPRINT:tagmin:"Min\: %2.1lf°C"')
            bildt = 1
            return render_template('temperatur.html', messung=datum, feuchtigkeit=f, temperatur=t, bildt=bildt, bildf=bildf)
        elif request.form.get('Woche') == 'Temp Woche':
            ret = rrdtool.graph('./static/img/Temperatur.png', '-s', 'now - 1 week', '-e', 'now', '--vertical-label', 'in °C', '--title', 'Temperatur Woche', '-l', '16.0', '-u', '22.0', 'DEF:wochegraph=/home/pi/Sensor/TemperaturAufzeichnen.rrd:temp:AVERAGE', 'LINE1:wochegraph#FF0000:Temperatur')
            bildt = 1
            return render_template('temperatur.html', messung=datum, feuchtigkeit=f, temperatur=t, bildt=bildt, bildf=bildf)
        elif request.form.get('Monat') == 'Temp Monat':
            ret = rrdtool.graph('./static/img/Temperatur.png', '-s', 'now - 1 month', '-e', 'now', '--vertical-label', 'in °C', '--title', 'Temperatur Monat', '-l', '16.0', '-u', '22.0', 'DEF:monatgraph=/home/pi/Sensor/TemperaturAufzeichnen.rrd:temp:AVERAGE', 'LINE1:monatgraph#FF0000:Temperatur')
            bildt = 1
            return render_template('temperatur.html', messung=datum, feuchtigkeit=f, temperatur=t, bildt=bildt, bildf=bildf)
Über Hilfe würde ich mich sehr freuen. Wahrscheinlich habe ich irgendwo nur einen Denkfehler drin.
Sirius3
User
Beiträge: 17752
Registriert: Sonntag 21. Oktober 2012, 17:20

Du hast keine statischen Bilder, sondern dynamische, die dürfen also nicht in `static` gespeichert werden, sonder müssen bei Bedarf ausgeliefert werden, am einfachsten mit einer eigenen Route für die Bilder. Dann muß noch dafür gesorgt werden, dass die Bilder nicht vom Browser gecached werden (mit einem Header-Eintrag "Cache-Control: no-cache, no-store, must-revalidate").
Mottek
User
Beiträge: 2
Registriert: Donnerstag 9. Juli 2020, 12:00

Vielen Dank für die Antwort. Das die Bilder dynamisch ausgeliefert werden ist gewollt. Gut, dann müssen sie eben an einem anderen Ort abgelegt werden.
Meine Struktur sieht im Moment so aus:
- WebApp - app.py
|
- static mit Unterordnern
|
- templates (hier befinden sich meine *.html Dateien)
|
- index.html
- temperatur.html
Wohin sollte dann die neue Route gehen? Im Moment mache ich alles in Temperatur.html.

Den Header-Eintrag werde ich mal ausprobieren.
Sirius3
User
Beiträge: 17752
Registriert: Sonntag 21. Oktober 2012, 17:20

Es liegt nicht in erster Linie daran, dass sie irgendwo liegen. Wie schon geschrieben sollten sie dynamisch erzeugt werden, dann müssen sie gar nirgends abgelegt werden. Es gibt eine Route zu temperatur_tag.png eine zu temperatur_woche.png und eine zu temperatur_jahr.png.

Code: Alles auswählen

<div class="container">
    <h4>Temperatur</h4>
    <div class="container">
	<form method="post">
	    <input class="btn btn-primary" type="submit" name="Tag" value="Tag">
	    <input class="btn btn-primary" type="submit" name="Woche" value="Woche">
	    <input class="btn btn-primary" type="submit" name="Monat" value="Monat">
	</form>
    </div>
    {% if typ %}
    <div class="container">
	<img src="temperatur_{{typ}}.png" alt="Temperaturverlauf">
    </div>
    {% endif %}
</div>
Der Code für den POST-Request verkürzt sich dann zu

Code: Alles auswählen

if request.method == 'POST':
    for typ in ["Tag", "Woche", "Jahr"]:
        if request.form.get(typ) == typ:
            break
    else:
        typ = None
return render_template('temperatur.html', messung=datum, feuchtigkeit=f, temperatur=t, bildt=bildt, bildf=bildf)
Da das Bildererzeugen ja in den png-Routen erledigt wird.
Antworten