Hinweise für meine Homepage

swas

Mitglied
Hallo,

ich hoffe, dass dieses Forum das Richtige für meine Frage ist. Falls nicht bitte verschieben.

Ich möchte mich ein wenig in die Webprogrammierung einarbeiten und hatte mir ein kleines Projekt überlegt. Leider weiß ich nicht ganz was der geschickteste Weg wäre und welche Technologien ich benötige.

Was ich machen möchte:

Ich möchte eine Seite erstellen, die in die Richtung eines Webeditors gehen soll.
Der Benutzer geht auf die Seite und lädt eine Datei hoch. Auf dem Server läuft ein Pythonprogramm, das eine Bildmanipulation durchführt. Dabei fließen die Einstellungen von der Webseite als Parameter in das Pythonprogramm ein.

Diesen Teil stelle ich mir relativ einfach vor. Ich würde hierfür ein kleinen Pythonframework mit Webserver etc. nutzen um die Seite aufzubauen und dort die Parameter erfragen.

Mein größeres Problem ist der "Rückweg". Ich bin mir nicht sicher, was ich nutzen soll um eine Art Live-Vorschau einzubauen.

Also grob würde es so aussehen Browser -> Server -> Python Bildmanipulation -> neues Bild zum Browser mit automatischer Aktualisierung.

Könnte mir jemand ein paar Hinweise geben in welche Technologien ich reinschnuppern müsste um so etwas zu bewerkstelligen?
Es würde mich sehr freuen, da ich irgendwie keinen Ansatzpunkt habe.

Gruß,
swas
 
Hallo swas,

eine sehr einfache Lösung wäre es, auf der Website dynamisch bei Eingabeänderungen (oninput-Event der <input>-Elemente z. B.) die Quell-URL eines Bildes zu ändern: <img src="{change-this}" />.
Die URL führt zu einem serverseitigen Skript und enthält serialisiert genau die Parameter, die der Nutzer eingegeben hat und der Server braucht. Als Ergebnis liefert der Server das fertige Bild aus.

Dasselbe Prinzip verwende ich aktuell, um in Abhängigkeit von Nutzereingaben serverseitig generierte 3D-Modelle dynamisch nachzuladen und anzuzeigen (mit THREE.js). Das läuft relativ flüssig, obwohl die Modellgeneration serverseitig rechnerisch aufwändig ist. Man muss allerdings erwähnen, dass der Server auf demselben PC wie der Client ist. Ist das bei dir auch so?

Du solltest auf Caching-Probleme achten, also an die URL jeweils immer einen Timestamp hinzufügen oder den Server richtig konfigurieren.
Wenn du mehr als nur ein Bild übertragen möchtest, würde ich mich nach JavaScript und der Fetch API (Nachfolger von XMLHttpRequest aka. AJAX) umsehen. Damit kannst du eine HTTP-Anfrage an deinen Server stellen und Antworten nach deinem Ermessen clientseitig verarbeiten.

Wenn du eine laufende bidirektionale Kommunikation benötigst, wären vielleicht Websockets noch vorteilhafter. Du müsstest mal recherchieren, inwieweit die Fetch API eine stabile Verbindung zulässt ("keep alive"), sodass nicht bei jeder Nutzereingabe der ganze HTTP-Overhead hinzukommt.

Zusammengefasst:
  1. Wenn du für deine Nutzereingaben keine Echtzeitdarstellung (sagen wir < 500ms) benötigst und du nur das Bild übertragen möchtest, würde ich zu der erstgenannten Möglichkeit raten.
  2. Benötigst du mehr Informationen als nur das Bild, aber keine Echtzeitdarstellung, dann zur Fetch API.
  3. Benötigst du eine Echtzeitdarstellung, würde ich mir Websockets ansehen.

Beachte auch, dass in der Reihenfolge in etwa der Programmier- und Wartungsaufwand steigt. Die erstgenannte Möglichkeit kannst du z. B. super einfach debuggen: einfach die URL im Browser aufrufen.
 
Ich bezweifle ja stark, dass eine serverseitige Verarbeitung die optimale Wahl ist wenn gleichzeitig ein Live-Vorschau auf dem Client gefragt ist: Für jede Aktualisierung muss das Bild herunter geladen werden.
 
Ich bezweifle ja stark, dass eine serverseitige Verarbeitung die optimale Wahl ist wenn gleichzeitig ein Live-Vorschau auf dem Client gefragt ist: Für jede Aktualisierung muss das Bild herunter geladen werden.
Wenn du die Algorithmen nach JS auf die Clientseite portieren kannst, stimme ich dir absolut zu! Das hängt natürlich ab, wie viel Aufwand das wäre oder ob das sogar automatisiert ginge (Stichwort Emscripten) oder ob der Algorithmus geschützt werden muss (IP) oder du für den Algorithmus proprietäre Programme (etwa Matlab) nutzt.
 
Hallo und vielen Dank für eure Antworten.

@ComFreek Danke für deine Auflistung ich schaue mir die Sachen mal an. Im Prinzip habe ich genau das gebraucht. Für mich ist das so ein kleines Projekt um ein wenig Erfahrung zu sammeln in dem Bereich.

Man muss allerdings erwähnen, dass der Server auf demselben PC wie der Client ist. Ist das bei dir auch so?

Vorerst ist das so, ja. Aber später würde ich das dann trennen.

Im Prinzip ist meine Frage eigentlich auch erledigt. Vielen Dank für eure Hinweise!

Edit: Kurze Frage.. Wie kann ich den Thread als erledigt markieren? Finde es gerade einfach nicht.
 
Zuletzt bearbeitet:
Zurück