Some more updates for FOSSGIS 24

README.md

@@ -1,6 +1,21 @@
-# Welcome to a small [qgis-js](https://github.com/qgis/qgis-js) Demo with [Slidev](https://github.com/slidevjs/slidev)
+# [qgis-js](https://github.com/qgis/qgis-js) - QGIS im Browser dank WebAssembly (DE)
 
-> This project is in the making. It's dangerous to go alone! Take this 🗡️
+> English: "[qgis-js](https://github.com/qgis/qgis-js) - QGIS in the browser thanks to WebAssembly"
+
+- **Talk @ [FOSSGIS 2024 - Hamburg](https://www.fossgis-konferenz.de/2024/)**
+  - 21.03.2024, 16:45–17:05 (Europe/Berlin)
+    - Hörsaal 2 (Ditze H016)
+  - <a href="https://github.com/boardend" target="_blank">Michael Schmuki</a> &amp; <a href="https://github.com/andreasneumann" target="_blank">Andreas Neumann</a>
+
+> **Video**: TBD
+
+> **Slides**: https://github.com/boardend/qgis-js-demo
+
+> **Session**: https://pretalx.com/fossgis2024/talk/NTFVWQ/
+
+## Abstract (DE)
+
+qgis-js ist eine Portierung von QGIS Core zu WebAssembly um es in modernen Browsern auszuführen. Dieses Setup ermöglicht die Integration von praktisch allen denkbaren Geo-Formaten und dynamische kartografische Darstellungen auf höchsten Niveau ganz ohne (QGIS-)Server. Im Rahmen des Vortrags werden die verwendeten Technologien sowie die Architektur kurz vorgestellt, um anschliessend die neuen Möglichkeiten und Integration anhand interaktiven Beispielen aufzuzeigen.
 
 ## Usage
 

global-interactions.ts

@@ -60,7 +60,27 @@ const slides: { [key: number]: SlideInteractions } = {
       }
     },
   },
-  12: {
+
+  ...Object.fromEntries(
+    [13, 14, 15, 16, 17].map((i) => {
+      return [
+        i,
+        {
+          onEnter: ({ map }) => {
+            if (map) {
+              map.getView().animate({
+                center: cities[0].coords,
+                zoom: 5 - (i - 15),
+                duration: 500,
+              });
+            }
+          },
+        },
+      ];
+    }),
+  ),
+  /*
+  13: {
     onEnter: ({ map }) => {
       if (map) {
         map.getView().animate({
@@ -71,6 +91,7 @@ const slides: { [key: number]: SlideInteractions } = {
       }
     },
   },
+  */
 };
 
 Object.entries(slides).forEach(([slide, slideInteractions]) => {

pages/04-qgis-js.md

@@ -5,6 +5,64 @@ routeAlias: qgis-js
 
 # Was ist qgis-js?
 
-QGIS core ported to WebAssembly to run it on the web platform
+- QGIS Core portiert zu WebAssembly um es auf der Web-Platform zu nutzen
+- JavaScript/TypeScript API
 
-qgis-js repository on [GitHub?](https://github.com/qgis/qgis-js)
+  - Laden von QGIS Projekten
+  - Rendering von Karten (Projektion, Extent, Auflösung)
+  - Interkation mit Layern (Visibility, Opacity, ...) und Map-Themes
+
+- OpenLayers Integration als seperates npm Packet
+
+<br />
+
+<div v-click>
+
+<h1>Was ist qgis-js nicht?</h1>
+
+- Keine 1:1 Portierung von QGIS Desktop
+  - Kein GUI, Processing, 3D, Python/PyQGIS Support
+
+</div>
+
+<div class="absolute bottom-23 right-15 transform -rotate-5" v-click>
+
+```ts
+import { qgis } from "qgis-js";
+
+// initialize qgis-js runtime
+const { api, fs } = await qgis();
+
+// do some QGIS geometry operations
+const rect = new api.Rectangle(1, 2, 3, 4);
+rect.scale(5);
+const center = rect.center();
+console.log(center.x, center.y);
+
+// render a QGIS map
+fs.writeFile(`/upload/fossgis2024.qgz`, new Uint8Array(projectBlob));
+api.loadProject(`/upload/fossgis2024.qgz`);
+const img = api.renderImage("EPSG:3857", api.fullExtent(), 1980, 1080);
+```
+
+</div>
+
+<!--
+```
+// download QGIS project
+fetch("https://some.server/fossgis2024.qgz")
+  .then((response) => response.blob())
+  .then((blob) => blob.arrayBuffer())
+  .then((buffer) => {
+    // upload QGIS project to the qgis-js runtime
+    fs.mkdir(`/upload`);
+    fs.writeFile(`/upload/fossgis2024.qgz`, new Uint8Array(buffer));
+
+    // load the project in QGIS
+    api.loadProject(`/upload/fossgis2024.qgz`);
+
+    // render a map of the project
+    const img = api.renderImage("EPSG:3857", api.fullExtent(), 1980, 1080);
+  });
+```
+-->

pages/05-webassembly.md

@@ -1,7 +1,40 @@
 ---
 layout: cover
+class: text-center
 title: WebAssembly Intro
 routeAlias: webassembly
 ---
 
-# Webassembly Intro
+<style>
+  .img-border-rounded {
+
+    padding: 10px;
+    background-color: white;
+    border-radius: 10px;
+    filter: dropshadow( inset 0px 0px 0px 2px black);
+  }
+</style>
+
+<v-click>
+  <img class="img-border-rounded absolute left-20 top-15" style="z-index:1;width:14em;transform: rotate(-5deg);" src="/data/wasm_compilation.jpg" alt="WebAssembly compilation">
+</v-click>
+
+<v-click>
+  <img class="img-border-rounded absolute top-15 right-20" style="z-index:1;width:14em;transform: rotate(4deg);margin-bottom:1em" src="/data/wasm_design.jpg" alt="WebAssembly design">
+</v-click>
+
+<v-click>
+  <img class="img-border-rounded absolute bottom-40 left-20" style="z-index:1;width:14em;transform: rotate(-2deg)" src="/data/wasm_party.jpg" alt="WebAssembly browser party">
+</v-click>
+
+<v-click>
+  <img class="img-border-rounded absolute top-80 right-15" style="z-index:1;width:14em;transform: rotate(2deg);" src="/data/wasm_security.jpg" alt="WebAssembly Security">
+</v-click>
+
+<v-click>
+  <img class="img-border-rounded absolute bottom-5 left-75" style="z-index:1;margin-left: 3em;width:16em;transform: rotate(0deg);" src="/data/wasm_component.jpg" alt="WebAssembly Components">
+</v-click>
+
+<div>
+  <img class="" style="z-index:10;display:inline-block;width:14em;margin-bottom: 13em" src="/data/webassembly_logo.svg" alt="Logo WebAssembly">
+</div>

pages/08-features-symbols.md

@@ -1,6 +1,6 @@
 ---
 layout: image-left
-image:
+image: null
 title: Features - Vektordaten & Symbolisierung
 routeAlias: features-symbols
 hideInToc: true
@@ -27,10 +27,8 @@ hideInToc: true
 
 <div v-click>
 
-- Interaktionen per qgis-js API
-  - Layer
-    - visibility
-    - opacity
-  - Map themes
+- Symbolebenen und grafische Effekte
+- Trennung von logischen und physischen Layern (Zeichenreihenfolge)
 
 </div>
+

pages/09-features-rasters.md

@@ -1,6 +1,6 @@
 ---
 layout: image-right
-image:
+image: null
 title: Features - Raster
 routeAlias: features-rasters
 hideInToc: true
@@ -11,13 +11,16 @@ hideInToc: true
 <br />
 
 - Darstellung von allen in GDAL unterstützten Rasterformaten
-- Blending (Multiply, Darken, etc.)
-- Hillshading
 
 <br />
-<br />
-<br />
-<br />
+
+- Diverse Rendering-Effekte
+  - Blending (Multiply, Darken, etc.)
+  - Einfärbung, Kontrast, etc.
+- Selektive und globale Transparenz
+- Hillshading
+
+
 <br />
 <br />
 <br />
@@ -29,3 +32,4 @@ hideInToc: true
   - Public Domain, via Wikimedia Commons
 
 </small>
+

pages/10-features-labels.md

@@ -1,11 +1,31 @@
 ---
 layout: image-left
-image:
+image: null
 title: Features - Labels
 routeAlias: features-labels
 hideInToc: true
 ---
 
 ### Labels
 
+- Intelligente Karten-Beschriftung
+  - Verdrängung mit Priorisierung
+- Datendefinierte Eigenschaften
+
 <br />
+
+- Regelbasierte Labels
+
+<br />
+
+- Zahlreiche Platzierungs-Optionen
+
+<br />
+
+- Beschriftungs-Hintergründe
+  - Selektive Masken
+  - Schattierung
+  - Puffer
+  - Hintergrund-Grafik (`.svg`, ...)
+- Führungslinien
+

pages/12-demo.md

@@ -0,0 +1,8 @@
+---
+layout: cover
+class: text-center
+title: Demo
+routeAlias: demo
+---
+
+<h1 style="color: white;">Demo</h1>

pages/13-potential.md

@@ -0,0 +1,15 @@
+---
+title: Potential
+routeAlias: potential
+---
+
+# Potential
+
+- QGIS Karten ohne QGIS-Server (Kosten)
+  - Betrachtung von lokalen Projekten/Daten ohne Übermittlung an einen Server
+- QGIS Internals per JavaScript
+  - Dynamische Projekte, Layer und Daten
+  - Längerfristig aufch Editier- und Analysefunktionen
+
+- PyQGIS technisch auch im Browser denkbar
+

pages/14-limitation.md

@@ -0,0 +1,32 @@
+---
+title: Limitationen
+routeAlias: limitation
+---
+
+# Limitationen
+
+- Netzwerk-Zugriff auf Daten-Provider
+  - COG, WMS/WMTS, Vector-Tiles etc.
+  - PostGIS Zugriff wohl nur über Proxy
+
+<br />
+
+<div v-click>
+
+- Selektion und Attribut-Daten Abfragen von Features
+- Einbettung von zusätzlichen Schriftarten
+- Mobile Support noch nicht in allen Browsern
+- Blockierung vom JS "main" Thread
+
+
+</div>
+
+<br />
+
+<div v-click>
+
+- Offene Bugs
+  - Globale Variabeln nicht verfügbar (z.B. `@map_scale`)
+
+</div>
+

pages/15-licence.md

@@ -0,0 +1,10 @@
+---
+title: Lizenzierung
+routeAlias: licence
+---
+
+# Lizenzierung
+
+> ⚠️ Disclaimer: qgis-js ist GPL-lizenziert!
+
+QGIS (und GEOS, Qt WebAssembly Platform, ...) ist unter der GNU General Public License (GPL) Version 2 oder höher lizenziert!