fact-box-editor-compact

Editierbare Faktenbox (verdichtet)

Diese WebApp dient der Erstellung von Faktenboxen inklusive der Visualisierung von Icon Arrays.
Aus den eingegebenen Daten wird durch den Einsatz eines Web Workers (in nahezu Echtzeit) mit Hilfe von pdfkit ein PDF generiert, das unterhalb der Forularelemente in einem iframe dargestellt wird. Als zusätzliche Exportoption wird JSON angeboten, um Eingaben sichern zu könnnen. Exportierte Daten können über die Inport-Funktion wieder geladen und weiter bearbeitet werden.

Entwicklungsumgebung

Diese WebApp wurde auf Basis von aurelia entwickelt. Für die Weiterentwicklung des Projekts werden nodejs und npm benötigt. Die Abhängigkeiten werden wie üblich per npm install installiert.

Für die Entwicklung steht der Development Build Prozess zur Verfügung, in dem Javascript Dateien transpiliert, und css aus den scss Dateien generiert werden. Zudem wird ein Entwicklungsserver gestartet, der bei Änderungen an Quelldateien nach einem erneuten Ausführen des Build Prozesses die Dateien neu lädt. Gestartet wird dieser Prozess mit folgendem Befehl:

au run --watch

Ein Production Build kann folgendermaßen erstellt werden:

au build --env production

Die so erzeugten Dateien sind unter scripts zu finden.

Verzeichnisstruktur

.
├── README.md
├── assets                                                  // Javascript-Bibliotheken zur Generierung von PDFs und zusätzliche Resourcen für umgebendes HTML
│   ├── blob-stream.min.js
│   ├── pdfkit.min.js
│   └── shared
│       ├── css
│       │   └── main.css
│       └── fonts
│           ├── lora
│           │   ├── Lora-Regular.ttf
│           │   └── SIL Open Font License.txt
│           └── montserrat
│               ├── Montserrat-SemiBold.otf
│               └── SIL Open Font License.txt
├── aurelia_project                                         // Aurelia Projektkonfiguration
│   └── …
├── fact-box-editor.html                                    // Index HTML Datei der WebApp
├── favicon.ico
├── fonts -> src/scss/font-awesome/fonts
├── index.html                                              // Umgebendes HTML mit Kontextinformationen
├── jsconfig.json
├── karma.conf.js
├── package.json
├── scripts                                                 // Build Verzeichnis
│   └── …
└── src
    ├── app.html
    ├── app.js                                              // Controller der WebApp
    ├── configuration.js
    ├── d3custom.js                                         // Definition der verwendeten d3 Module
    ├── environment.js                                      // aurelia Environment Konfiguration
    ├── main.js                                             // aurelia Bootstrapper
    ├── messages.js                                         // Definition von Messages zur Kommunikation zwischen Anwendungsteilen
    ├── number-format.js                                    // Zahlenformatierung
    ├── pdfWorker.js                                        // PDF Generator
    ├── resources
    │   ├── Verdana\ Bold.ttf
    │   ├── Verdana.ttf
    │   └── index.js
    ├── sampler-visual.html
    ├── sampler-visual.js                                   // Implementierung der Visualisierung mit d3
    ├── sampler.js                                          // Logik des Samplings
    └── scss                                                // Stylesheets der WebApp
        ├── _custom.scss
        ├── _globals.scss
        ├── font-awesome -> ../../node_modules/font-awesome
        ├── partials
        │   ├── _colours.scss
        │   └── _form_elements.scss
        └── styles.scss

Wie ändere ich Labels und Texte der WebApp?

In der Datei src/configuration.js sind alle Labels und Texte definiert. Außerdem sind dort die Farben und zugrunde liegenden geometrischen Daten für das Layout der Icon Arrays definiert.