imagine

a simple image editor
git clone git://source.orangerot.dev:/university/imagine.git
Log | Files | Refs | README | LICENSE

README.md (6149B)

      1 <div align="center">
      2 <img src="assets/logo.svg" width="300">
      3 
      4 # Imagine
      5 > A simple Image Editor
      6 
      7 [Source Code](https://source.orangerot.dev/university/imagine) | [Preview](https://orangerot.dev/archive/uni/imagine)
      8 </div>
      9     
     10 ## Idee
     11 
     12 > Ihre App verwendet mindestens ein HTML5 Feature erfolgreich.
     13 
     14 Imagine ist eine Single Page Application um einfache Bildbearbeitungen
     15 durchzuführen. Dabei stehen dem Nutzer im Editor mehrere Filter zur verfügung.
     16 
     17 Bilder können über drei Wege geladen werden. Erstens können Bilder geladen
     18 werden, indem der nutzer auf einen Knopf auf dem Startbildschirm drückt, wodurch
     19 ein Dateiauswahl-Dialog erscheint. Auf Mobilgeräten (getestet auf Android) wird
     20 hier ebenfalls die möglichkeit geboten ein Bild über die Kamera aufzunehmen. Auf
     21 anderen Geräten kann ein Bild gemacht werden, indem der Nutzer auf ein Knopf auf
     22 dem Startbildschirm drückt, wodurch der Feed einer Webcam auf der Webseite
     23 gezeigt wird. Zuletzt kann ein Bild auch jederzeit geladen werden, indem es per
     24 Drag-'n-Drop in den Viewport gezogen wird. 
     25 
     26 Sobald ein Bild importiert wurde, öffnet sich der Editor. Hier erscheint das
     27 Bild und eine Reihe an Filtern, welche auf das Bild angewendet werden können.
     28 Die Intensität der Filter können über einen Slider justiert werden. Ein
     29 Zurücksetzen-Knopf ermöglicht es, den Filter wieder zurück zu dem neutralen
     30 Zustand zu setzen. Ein Lensflare-Knopf ermöglicht es, einen Lensflare-Shader zu
     31 dem Bild hinzuzufügen. Die Richtung der Einstrahlung kann mit eingestellt
     32 werden, indem man die Maus mit gedrückter linken Maustaste über das Bild bewegt
     33 oder sein Mobiltelefon in die gewünschte Richtung neigt. 
     34 
     35 Sobald das Bild nach seinen Wünschen angepasst ist, kann man das Bild entweder
     36 lokal herunterladen oder auf anderen Apps teilen (getestet
     37 Anrdoid/Chromium/Bromite). 
     38 
     39 ### Verwendete HTML5 Features
     40 
     41 Diese Anwendung verwendet einige HTML5-Features. So wird der `<video>`-Tag
     42 verwendet, um den Videofeed der Webcam zu zeigen. Ein `<canvas>`-Element wird
     43 verwendet, um alle Filter auf das Bild anzuwenden. Zuletzt werden mehrere
     44 Browser-APIs verwendet, darunter: `navigator.share`, `deviceorientation`,
     45 `mousemove`, `camera`, ...
     46 
     47 ## Code-Qualität
     48 
     49 > Ihre Website ist sauber strukturiert (HTML, CSS, JS Dateien
     50 getrennt) und hat eine saubere sowie einheitliche Formatierung
     51 
     52 HTML, CSS und JavaScript sind jeweils in eigene Dateien aufgeteilt. Das HTML
     53 beinhaltet kein inline CSS und kein inline JavaScript. Alle Datein sind mit zwei
     54 Leerzeichen eingerückt. Zusätzlich wurden alle Dateien mit dem Formatter
     55 `prettier` formatiert. 
     56 
     57 ## Dokumentation
     58 
     59 > Ihr Code ist dokumentiert.
     60 
     61 Das HTML enthält Kommentare zur strukturellen Unterteilunge, als auch zum
     62 erklären und begründen verwendeter Elemente.
     63 
     64 JavaScript enthält JSDoc zum beschreiben der einzelnen Funktionen und einzelne
     65 Kommentare zum erklären und begründen von Code-Segmenten. 
     66 
     67 ## Technische Raffinesse
     68 
     69 > Ihre Umsetzung ist nicht trivial (zum Beispiel verarbeiten Sie
     70 Sensordaten, Nutzen APIs etc.), Gesamtumfang > 1000 Zeilen
     71 
     72 Von der technischen Seite nutzt die Anwendung mehrere Sensordaten und zudem
     73 einige Browser-APIs. Gleich zu Begin, beim laden des Bildes, steht dem Nutzer
     74 die Option ein Bild von dem Videofeed der Webcam zu machen. Dafür wird die API
     75 `navigator.mediaDevices.getUserMedia` verwendet. Des Weiteren werden für den
     76 Lensflare-Shader Sensordaten erhoben, um die Einstrahlung zu bestimmen. Dafür
     77 wird einmal die Mausposition mit dem Event `mousemove` abgefragt. Außerdem kann
     78 man die Eintrahlung über die Neigung des Gerätes mit dem Event
     79 `deviceorientation` einstellen.
     80 
     81 Weitere Browser-APIs, die genutzt wurden, sind die drag-'n-drop api mit dem
     82 Event `dragover` und die `navigator.share`-API, um das Bild mit anderen Apps zu
     83 teilen. 
     84 
     85 Möglichst viel wurde in HTML und CSS abgebildet. Der Wechsel von
     86 Startbildschirm, Camera-Aufnahme und Editor wurde durch das Ändern der Klasse
     87 von `body`-Tag gelösst. Insgesamt werden keine dynamischen Elemente in
     88 JavaScript erzeugt. Es müssen weniger Abfragen und Änderungen im DOM gemacht
     89 werden. Das macht den JavaScript-Code einfacher und folgt der Trennung von Logik
     90 und Aussehen. 
     91 
     92 Der Lensflare ist als Shader umgesetzt, um möglichst realistisch auszusehen und
     93 um es einfach zu machen in der zukunft andere Shader zu nutzen. Als Grundlage
     94 dient ein GLSL Shader, welcher optimiert wurde, um je Pixel möglichst wenige
     95 mathematische Operationen berechnen und wenig Speicher zu allokieren. 
     96 
     97 Zeichenaufrufe wurden so weit minimiert, dass das Bild immer nur bei Änderungen
     98 der Filter neu berechnet wird. Ansonsten bräuchten der Blur-Filter und
     99 Lensflare-Shader zu viel Rechenleistung, sodass die Anwendung zum stocken käme. 
    100 
    101 ## Responsive 
    102 
    103 > Ihre Website funktioniert mit unterschiedlichen Displaygrößen
    104 (Handy, Tablet, Laptop, etc.)
    105 
    106 Die Anwendung zeigt immer nur das Nötigste an, um dem Nutzer nur Elemente zu
    107 zeigen, die zu dem Zeitpunkt nutzbar sind und um Bildschirmplatz zu sparen,
    108 wodurch auch auf kleinen Displaygrößen noch alles bedienbar ist. 
    109 
    110 Der Editor verändert die Position der Filter je nach Displaygröße. Auf dem
    111 Desktop werden die Filter als Seitenseite angezeigt. Auf Tablet und Smartphones
    112 verschwindet diese Seitenleiste. Stattdessen kann man manuell oder mit inem
    113 Knopf runterscrollen, wodurch die Filter von unten Sichtbar werden und den
    114 Viewport verdecken. Durch hochscrollen oder drücken auf einen weiteren Knopf
    115 gehen die Filter wieder nach unten, um den Viewport wieder sichtbar zu machen. 
    116 
    117 Realisiert wird dieser Effekt dadurch, dass der Viewport sich trotz scrollen
    118 nicht bewegt (`display: sticky`), während die Filter über dem Viewport liegen
    119 (`z-index`). Das Ein- und Ausblenden je nach Displaygröße realisiert das
    120 CSS-Framework Bulma durch `@media` queries. 
    121 
    122 ## Used Resources
    123 
    124 - https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos
    125 
    126 ### Used Libraries
    127 
    128 - https://bulma.io/
    129 - https://github.com/eliajf/bulma-slider
    130 - https://fontawesome.com/
    131 
    132 ## License
    133 
    134 This project is licensed under the AGPL-3 License - see the `LICENSE` file for details