Motivation and context

src/diagrams/README.md

@@ -0,0 +1,31 @@
+# Building the diagrams
+
+The diagrams included here are written using [TikZ](https://ctan.org/pkg/pgf). They have to be built using some
+[LaTeX flavor](https://www.latex-project.org/) to DVI output, and then converted to SVG:
+
+As [Roboto 300](https://fonts.google.com/specimen/Roboto) is used for texts, you have to download and install the Roboto font
+locally for building because LaTeX (and later `dvisvgm`) will need the font information for the exact positioning of text
+fragments.
+
+There is a shell script which can be executed inside this folder to carry out the build process and remove the intermediate
+files afterwards.
+
+Requirements for using the shell script:
+* LuaLaTeX (and in particular the `dvilualatex` tool)
+* `dvisvgm` (contained in your favorite TeX distribution)
+* the Roboto font
+
+```shell
+./build.sh
+```
+
+# Build in watch mode
+
+You can (for example) use [inotifywait](https://github.com/inotify-tools/inotify-tools/wiki) to continuously build the TeX file
+to a PDF which you can view with your favorite PDF viewer (which hopefully listens for file changes anyway). This is done in the
+`watch.sh` script using the `latexmk` utility.
+
+```shell
+./watch.sh
+```
+

src/diagrams/build.sh

@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+
+set -e
+
+latexmk -dvilua *.tex
+
+for dvi in *.dvi
+do
+  dvisvgm --font-format=woff business_context.dvi
+done
+
+latexmk -C
+
+mkdir -p ../../public/diagrams
+mv *.svg ../../public/diagrams/
+

src/diagrams/business_context.tex

@@ -0,0 +1,45 @@
+\documentclass[tikz]{standalone}
+\usepackage{fontspec}
+\setmainfont{Roboto Light}
+
+\usetikzlibrary{arrows.meta,graphs,positioning,shapes.misc}
+
+\definecolor{scandioblue}{RGB}{66, 212, 251}
+\definecolor{scandiored}{RGB}{210, 21, 21}
+
+\begin{document}
+\begin{tikzpicture}[
+  >={Stealth[round]},
+  every node/.style={
+    rectangle,
+    thick,
+    draw=black,
+    rounded corners=3px
+  },
+  external/.style={
+    fill=scandioblue,
+    inner sep=6px
+  },
+  heimdall/.style={
+    inner xsep=30px,
+    inner ysep=18px,
+    font=\Large
+  }
+]
+  \node (dev2) [external] {Device 2};
+  \node (dev1) [external, left=of dev2] {Device 1};
+  \node (devX) [external, right=of dev2] {Device \dots};
+  \node (heimdall) [heimdall, above=of dev2] {Heimdall};
+  \node (back2) [external, above=of heimdall] {Backend 2};
+  \node (back1) [external, left=of back2] {Backend 1};
+  \node (backX) [external, right=of back2] {Backend \dots};
+
+  \path (dev1) edge[<->] (heimdall);
+  \path (dev2) edge[<->] (heimdall);
+  \path (devX) edge[<->] (heimdall);
+
+  \path (heimdall) edge[->, bend left=10] (back1) (back1) edge [->, bend left=10] (heimdall);
+  \path (heimdall) edge[->, bend left=10] (back2) (back2) edge [->, bend left=10] (heimdall);
+  \path (heimdall) edge[->, bend left=10] (backX) (backX) edge [->, bend left=10] (heimdall);
+\end{tikzpicture}
+\end{document}

src/diagrams/watch.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+filename="$1"
+latexmk -lualatex -pvc $filename -view=none
+latexmk -C

src/slides.html

@@ -24,19 +24,19 @@
 </section>
 
 <section data-background-image="/backgrounds/normal.svg" data-background-position="top right">
-  <h2>Motivation</h2>
+  <h2>Heimdall</h2>
   <ul>
-    <li class="fragment"></li>
-    <li class="fragment"></li>
+    <li class="fragment">Gateway zwischen IoT-Geräten und verschiedenen Backends</li>
+    <li class="fragment">Entwickelt seit 2018</li>
+    <li class="fragment">Ablösung eines vollständig extern verwalteten Systems</li>
   </ul>
 </section>
 
 <section data-background-image="/backgrounds/normal.svg" data-background-position="top right">
   <h2>Fachlicher Kontext</h2>
-  <ul>
-    <li class="fragment"></li>
-    <li class="fragment"></li>
-  </ul>
+  <center>
+    <img src="/diagrams/business_context.svg" style="width: 600px;">
+  </center>
 </section>
 
 <section data-background-image="/backgrounds/normal.svg" data-background-position="top right">