Flask Scripit um immer das neuste Foto auf Website anzuzeigen.

TheSocialPotwal · Apr 15th 2023

Hallo,

ich stecke gerade in meinem Projekt fest, das ich mithilfe von ChatGPT gemacht habe.

Funktion: Ein anderes Python Script legt alle 10 Minuten ein Bild von einem Vogelhaus im Verzeichnis: /home/admin/Pictures/Vogelhaus/ ab.

Flask erstellt eine HTML Website, die immer das neuste Bild zeigt, was erstellt wurde. Dazu habe ich ein Flask Script erstellt:

Python

from flask import Flask, render_template
import os
app = Flask(__name__)
@app.route('/')
def index():
    # Get the path to the directory containing the photos
    photos_dir = '/home/admin/Pictures/Vogelhaus'
# Get a list of all the files in the directory
    files = os.listdir(photos_dir)
# Filter out any files that are not images
    image_files = [f for f in files if f.endswith('.jpg') or f.endswith('.png')]
# Sort the list of image files by modification time
    image_files.sort(key=lambda f: os.path.getmtime(os.path.join(photos_dir, f)))
# Get the path to the newest image file
    newest_image = os.path.join(photos_dir, image_files[-1])
# Render the template with the path to the newest image
    return render_template('index.html', image_path=newest_image)
if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0')

Display More

und dazu habe ich die die Index.html erstellt:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Neuestes Foto</title>
  </head>
  <body>
    <h1>Neuestes Foto</h1>
    <img src="/home/admin/Pictures/Vogelhaus/" alt="Neuestes Foto">
  </body>
</html>

So haben ChatGPT und ich das erarbeitet. (Hauptsächlich ChatGPT). Der Server läuft auch, er greift auf die HTML zu, allerdings schreibt er nur "Neustes Foto" hin. MIt einer 0 x 0 Pixel Grafik unterlegt. Ich vermute, dass das alt="Neuestes Foto" das Problem ist. Welchen Parameter muss ich hier eingeben, dass er tatsächlich immer das neuste Bild nimmt? Und welcher Befehl vom Flask Script soll den Dateinamen eigentlich ausgeben?

Danke schonmal vorab für die Hilfe

Bot · Vor 5 Minuten

Schau mal ob du hier fündig wirst!

Tell · Apr 15th 2023

Das Problem duerfte der Pfad sein.

flask geht davon aus dass die Files relativ zum aktuellen Directory liegen.

Am besten erstellst du ein Directory Vogelhaus unter dem flask-Directory und gibst den Pfad dann als "Vogelhaus/newest.jpg" an.

TheSocialPotwal · Apr 15th 2023

Quote from Tell

Das Problem duerfte der Pfad sein.

flask geht davon aus dass die Files relativ zum aktuellen Directory liegen.

Am besten erstellst du ein Directory Vogelhaus unter dem flask-Directory und gibst den Pfad dann als "Vogelhaus/newest.jpg" an.

Das Problem ist, die Datei wird immer anderst heissen. Das Bildermachen Script wird das aktuelle Bild nicht überspeichern, sondern er soll eben herausfinden, was immer das neuste Bild ist, und das dann anzeigen. Daher wird vermutlich dein Vorschlag mit einem Statischem Pfad nicht funktionieren, oder liege ich da falsch?

Bot · Vor einem Moment

Tell · Apr 15th 2023

Der Code von Chat-GPT sucht doch das neuste File heraus und uebergibt es an die Rendering-Funktion.

TheSocialPotwal · Apr 15th 2023

ok, du hast aber geschrieben "Vogelhaus/newest.jpg". Das ist doch eine fixe Datei, eine Datei die eben newest.jpg heisst. oder ist <newest> eine Variable?

TheSocialPotwal · Apr 15th 2023

Quote from Tell

Der Code von Chat-GPT sucht doch das neuste File heraus und uebergibt es an die Rendering-Funktion.

Ach warte, ich glaube, ich habe es verstanden. Du meintest <newest_Image.jpg>, oder?

Ok, ich muss also ein neues Verzeichnis im Ordner meinest Flask Scripts erstellen, also z.B.

Code

/home/admin/Desktop/FlaskScriptBild/Vogelhausbilder

ersetzt dann

Code

photos_dir = '/home/admin/Pictures/Vogelhaus'

mit

Code

photos_dir = '/Vogelhausbilder'

da es ja direkt im Ordner des Scripts ist.

Und dann sollte es funktionieren?

Bot · Vor einem Moment

Tell · Apr 15th 2023

Ich hab erst mal eine Loesung mit static:

* Erstelle ein Direcory namens templates und lege dieses File dort ab:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Neuestes Foto</title>
  </head>
  <body>
    <h1>Neuestes Foto</h1>
    <img src="{{url_for('static',filename=image_path)}}" alt="Neuestes Foto">
  </body>
</html>

* Erstelle ein weiteres Directory namens static und lege dort mindestens ein Bild ab.

* Die Flask-App sieht so aus:

Python

from flask import Flask, render_template
import os
app = Flask(__name__)
@app.route('/')
def index():
    # Get the path to the directory containing the photos
    photos_dir = 'static'
# Get a list of all the files in the directory
    files = os.listdir(photos_dir)
# Filter out any files that are not images
    image_files = [f for f in files if f.endswith('.jpg') or f.endswith('.png')]
# Sort the list of image files by modification time
    image_files.sort(key=lambda f: os.path.getmtime(os.path.join(photos_dir, f)))
# Get the path to the newest image file
#    newest_image = os.path.join(photos_dir, image_files[-1])
# Render the template with the path to the newest image
    newest_image = image_files[-1]
    return render_template('index.html', image_path=newest_image)
if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0')

Display More

Ist noch ein bisschen pfuschig weil ich es schnell zusammengehackt habe

TheSocialPotwal · Apr 15th 2023

Jooo,

danke hat funktioniert

Ich möchte es grad noch verstehen:

1. Muss der Unterordner mit den Bildern unbedingt static heissen? Oder könnte ich da jeden beliebiegn Namen einfügen.

Weil mit einem anderen Text hat es nicht funktioniert.

Und was müsste ich tun, falls ich auch auf ein anderes Verzeichnis mit Bildern ausserhalb vom Ordner meines Scripts zugreifen möchte? Oder geht das mit Flask nicht so gut? Ich habe das mit den relativen Verzeichnissen nicht ganz so gecheckt, was du meintest.

2. ChatGPT hat im Index.html ja das geschrieben:

Code

<img src="{{ image_path }}" alt="Neuestes Foto">

du wiederum:

Code

<img src="{{url_for('static',filename=image_path)}}" alt="Neuestes Foto">

was macht der Befehl url_for? und die src muss immer nach dem Verzeichnis mit filename=xxx angeschrieben werden?

Quote from Tell

Ich hab erst mal eine Loesung mit static:

* Erstelle ein Direcory namens templates und lege dieses File dort ab:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Neuestes Foto</title>
  </head>
  <body>
    <h1>Neuestes Foto</h1>
    <img src="{{url_for('static',filename=image_path)}}" alt="Neuestes Foto">
  </body>
</html>

* Erstelle ein weiteres Directory namens static und lege dort mindestens ein Bild ab.

* Die Flask-App sieht so aus:

Python

from flask import Flask, render_template
import os
app = Flask(__name__)
@app.route('/')
def index():
    # Get the path to the directory containing the photos
    photos_dir = 'static'
# Get a list of all the files in the directory
    files = os.listdir(photos_dir)
# Filter out any files that are not images
    image_files = [f for f in files if f.endswith('.jpg') or f.endswith('.png')]
# Sort the list of image files by modification time
    image_files.sort(key=lambda f: os.path.getmtime(os.path.join(photos_dir, f)))
# Get the path to the newest image file
#    newest_image = os.path.join(photos_dir, image_files[-1])
# Render the template with the path to the newest image
    newest_image = image_files[-1]
    return render_template('index.html', image_path=newest_image)
if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0')

Display More

Ist noch ein bisschen pfuschig weil ich es schnell zusammengehackt habe

Display More

Tell · Apr 15th 2023

> Muss der Unterordner mit den Bildern unbedingt static heissen?

Da muss ich mal googeln. Das ist der Default und wenn man was anderes will muss man es richtig konfigurieren.

Im static-Directory kann man auch Directories wie Vogelhaus anlegen, das muesste funktionieren.

> Und was müsste ich tun, falls ich auch auf ein anderes Verzeichnis mit Bildern ausserhalb vom Ordner meines Scripts zugreifen möchte?

Ich glaube nicht dass das geht, weil Flask genaue Vorschriften macht wie die Files organisiert sein sollen.

Was moeglicherweise geht: das File lesen und als binaeren Stream ausliefern.

> was macht der Befehl url_for?

In der Dok gibt es eine ausfuehrliche Beschreibung dazu: https://flask.palletsprojects.com/en/2.2.x/api/

Bot · Vor einem Moment

Tell · Apr 15th 2023

> Muss der Unterordner mit den Bildern unbedingt static heissen?

So auf die schnelle habe ich keine einfache Alternative gefunden.

hyle · Apr 15th 2023

Quote from TheSocialPotwal

Muss der Unterordner mit den Bildern unbedingt static heissen?

Gegenfrage: Muss das Verzeichnis in das die Bilder geladen werden unbedingt /home/admin/Pictures/Vogelhaus sein?

Mit flask habe ich aber kaum Erfahrung und dazu nur das hier gefunden: https://flask.palletsprojects.…/quickstart/#static-files

4zap · Apr 16th 2023

Ich hab auch keine Ahnung von Flask. Ich lad auch ein aktuelles Foto in eine HTML Seite. Die ist statisch gebaut, sucht also immer nach dem gleichem Dateinamen. Ich überschreib die Datei auf dem Webserver alle 3 Minuten mit dem aktuellen Foto. Das alte schieb ich mit Datum und Uhrzeit ins Archiv. Um sicher zu sein das dieses Foto auch aktuell ist schreib ich noch Datum und Uhrzeit mit ins Bild per Imagemagick. Weiß nicht ob es hilft, nur so eine Idee....

Bot · Vor einem Moment

noisefloor · Apr 16th 2023

Hallo,

`static` ist halt per Konvention der Pfad für statische Dateien. Das kann man bestimmt irgendwie irgendwo umstellen -> Doku lesen - oder es halt so lassen.

Zum Code:

* Das `os` Modul ist veraltet zum Umgang mit Pfaden, dazu nimmt man schon länger das `pathlib` Modul.

* Die Flask App über `app.run(...)` zu starten ist schon länger nicht mehr der empfohlene Weg, sondern auf der Kommandozeile `flask --app name_der_app run`.

* Den Server auf 0.0.0.0 laufen lassen ist ein potentielles Risiko, weil potentiell von überall erreichbar. Ist das Absicht?

Zu den letzten beiden Punkten siehe auch [https://flask.palletsprojects.com/en/2.2.x/quickstart/].

Gruß, noisefloor

TheSocialPotwal · Apr 16th 2023

Quote from 4zap

Ich hab auch keine Ahnung von Flask. Ich lad auch ein aktuelles Foto in eine HTML Seite. Die ist statisch gebaut, sucht also immer nach dem gleichem Dateinamen. Ich überschreib die Datei auf dem Webserver alle 3 Minuten mit dem aktuellen Foto. Das alte schieb ich mit Datum und Uhrzeit ins Archiv. Um sicher zu sein das dieses Foto auch aktuell ist schreib ich noch Datum und Uhrzeit mit ins Bild per Imagemagick. Weiß nicht ob es hilft, nur so eine Idee....

Ja, alle Fotos haben eh ein Datum und Uhrzeits Overlay Von daher weiss ich, obs aktuell ist oder nicht, aber trotzdem danke für den Input

TheSocialPotwal · Apr 16th 2023

Quote from noisefloor

Hallo,

`static` ist halt per Konvention der Pfad für statische Dateien. Das kann man bestimmt irgendwie irgendwo umstellen -> Doku lesen - oder es halt so lassen.

Zum Code:
* Das `os` Modul ist veraltet zum Umgang mit Pfaden, dazu nimmt man schon länger das `pathlib` Modul.
* Die Flask App über `app.run(...)` zu starten ist schon länger nicht mehr der empfohlene Weg, sondern auf der Kommandozeile `flask --app name_der_app run`.
* Den Server auf 0.0.0.0 laufen lassen ist ein potentielles Risiko, weil potentiell von überall erreichbar. Ist das Absicht?

Zu den letzten beiden Punkten siehe auch [https://flask.palletsprojects.com/en/2.2.x/quickstart/].

Gruß, noisefloor

Display More

Zum Server auf 0.0.0.0 laufen zu lassen:

Laut Doku:

Externally Visible Server

If you run the server you will notice that the server is only accessible from your own computer, not from any other in the network. This is the default because in debugging mode a user of the application can execute arbitrary Python code on your computer.

If you have the debugger disabled or trust the users on your network, you can make the server publicly available simply by adding --host=0.0.0.0 to the command line:

Code

$ flask run --host=0.0.0.0

Die Bilder sollen defenitiv von allen Geräten im Netzwerk erreichbar sein. Von aussen aber nicht. Port ist nicht am Router geöffnet.

Bot · Vor einem Moment

noisefloor · Apr 16th 2023

Hallo,

ok - und was spricht dagegen, die IP-Adresse deines Rechners zu nehmen? Das wäre der saubere Weg.

Gruß, noisefloor

TheSocialPotwal · Apr 16th 2023

Quote from noisefloor

Hallo,

ok - und was spricht dagegen, die IP-Adresse deines Rechners zu nehmen? Das wäre der saubere Weg.

Gruß, noisefloor

Was meinst du genau? Auf die Website wird allerlei Geräten zugegriffen. Vom Handy, wenn ich unterwegs bin per VPN, vom Laptop und Dekstop PC. Und der PI ist das einzigste GFerät weas 24/7 läuft.

Tell · Apr 17th 2023

4zap : Ich überschreib die Datei auf dem Webserver alle 3 Minuten mit dem aktuellen Foto.

Und du hast keine Probleme mit dem Cache des Browsers?

Bot · Vor einem Moment

4zap · Apr 17th 2023

Quote from Tell

4zap : Ich überschreib die Datei auf dem Webserver alle 3 Minuten mit dem aktuellen Foto.
Und du hast keine Probleme mit dem Cache des Browsers?

Nur in Opera.... Edge und Chrome zeigen keine Cache Probleme. Firefo nutz ich nicht, kann dazu nichts sagen.

noisefloor · Apr 17th 2023

Hallo,

Quote from TheSocialPotwal

Was meinst du genau?

Wenn der Pi 24/7 läuft ändert sich dessen IP-Adresse doch ziemlich sicher nicht. Und die IP-Adresse trägst du dann statt 0.0.0.0 beim Aufruf von Flask ein.

Gruß, noisefloor

Tags