# ARDuplo

:::info
Dokumentation in Build
:::

:memo: TODO
- [ ] Implementierung
- [ ] Motivation
- [ ] 

## Inhaltsverzeichnis
[TOC]

## 1 Einleitung
### 1.1 Motivation
Oft fällt es Anwendern schwer, komplexen technischen Anleitungen zu folgen. Insbesondere, wenn es sich dabei um Textbeschreibungen oder grafisch dargestellte Arbeitsschritten handelt, welche vom Anwender zunächst in die Realität übertragen werden müssen.

Smartphones und Tablets sind mittlerweile im privaten als auch im unternehmerischen Gebrauch allgegenwertig verfügbar.
Daher soll mittels einer Applikation für Mobilgeräte ein Prototyp für eine intuitive technische Anleitung entwickelt werden. Im konkreten Fall soll dies anhand des Baus eines Lego-Duplo Konstrukts demonstriert werden. Mittels erweiterter Realität werden die einzelnen Arbeitsschritte in Live-Kameraansicht des Mobilgeräts projiziert.

### 1.2 Ziel
Mithilfe einer Augmented Reality (AR) App soll aus unterschiedlichen Duplosteinen (Form, Farbe) einfache Gebilde gebaut werden können. Die AR App visualisiert, welche Schritte nacheinander ausgeführt werden müssen.

Dazu soll die App einen 3D Blueprint anzeigen, an welcher Stelle der nächste Baustein gesetzt werden soll. Dabei soll die App automatisch erkennen welches Gebilde gerade gebaut wird und was der nächste Schritt ist.

## 2 Grundlagen
### 2.1 Augmented Reality
Unter Augmented Reality (AR) (deutsch: erweiterter Realität) versteht man die computergestützte Erweiterung der Realitätswahrnehmung. Häufig wird jedoch unter AR nur die visuelle Darstellung von Informationen verstanden, also die Ergänzung von Bildern oder Videos mit computergenerierten Zusatzinformationen oder virtuellen Objekten mittels Einblendung/Überlagerung. Bei Fußball-Übertragungen ist erweiterte Realität beispielsweise das Einblenden von Entfernungen bei Freistößen mithilfe eines Kreises oder einer Linie. [2]
### 2.2 State Machine
Eine Zustandsmaschine ist ein mathematisches Rechenmodell. Es ist ein abstraktes Konzept, bei dem die Maschine verschiedene Zustände haben kann, aber zu einem bestimmten Zeitpunkt nur einen von ihnen erfüllt. Es gibt verschiedene Arten von Zustandsautomaten. Die berühmteste ist die Turing-Maschine. Es ist eine unendliche Zustandsmaschine, was bedeutet, dass es unzählige Zustände haben kann. Die Turing-Maschine passt nicht gut in die heutige UI-Entwicklung, da wir in den meisten Fällen eine begrenzte Anzahl von Zuständen haben. Aus diesem Grund sind Zustandsautomaten wie Mealy und Moore sinnvoller. [1]

Der Unterschied zwischen ihnen besteht darin, dass die Moore-Maschine ihren Status nur basierend auf ihrem vorherigen Status ändert. Wenn viele externe Faktoren, wie Benutzerinteraktionen und Netzwerkprozesse, verwendet werden,ist die Moore-Maschine nicht geeignet.Deshalb wird meißt die Mealy-Maschine verwendet. Es hat einen Anfangszustand und geht dann auf der Grundlage der Eingabe und seines aktuellen Zustands in neue Zustände über. [1]

Beispiel Mealy State Machine

### Was ist Object Tracking
TODO irgendwer
Objects should look different
All your objects must look different from each other. If you have multiple objects that have a similar shape (for example two cars) you will need to make sure that each one still can be well distinguished from the other (in the car example the sedan and convertible versions would be likely distinct enough).

### Andere AR Technologien
Todo ausformulieren
- Vuforia Stadnard: Ungeeignet für Lego, da Duplos einfarbige Glatte Oberflächen haben und wenige eindeutige Gesichtspunkte.
- VisionLib: objekt nur von einem bestimmten vorgegebenen Blickwinkel erkannt; CAD Modell nötig;
- Wikitude
- ViewAR: Gemacht um einfach eine App zusammenzuklicken, nur mit bezahlen; wenig Freiheiten in der Programierung(nurn über Website möglich)
- MLKit + Firebase: nur in Android Studio(ziemlich aufwendig), nur Erkennung nicht Tracking
- ARCore: nur Oberflächen oder Bilderkennung keine

## 3 Vorgehensweise
Zur Entwicklung der App wird die Spieleengine Unity verwendet. Diese ermöglicht es . Und
Trello Board erwähnen?

## Idee/Konzept
**V1 Statische Bedienanleitung:** Anwender beginnt immer mit Baustein 1 und lässt sich bei jedem Schritt von der AR App begleiten. Der Anwender steigt mit der AR-App nicht bei einem späteren Arbeitsschritt ein
**Vorbereitung:**
Die einzelnen Arbeitsschritte in CAD/Blender modellieren und als TrackingObjekte ins Projekt importieren.
Eine Unity Szene pro Arbeitsschritt erstellen? Oder neuen Arbeitsschritt laden
**Logik:**
Sobald aktueller Arbeitsschritt erkannt und für einige Sekunden getrackt wurde springt App zur nächsten Szene / zum nächsten Arbeitsschritt. und Blueprint des nachfolgenden Bausteins wird angezeigt

## Implementierung
### State Machine

### Google Cloud
Cloud-Dienst per REST-Api:
- teuer zu hosten
- langsam weil jedes mal ein Bild zum Server hochgeladen werden muss
- einfacher zu implementieren

Modell in der App mitliefern und lokal vorhersagen lassen:
- keine laufenden Kosten
- schnelle Vorhersagen (~200ms)
- schwierig in Unity zu implementieren, da die Google Cloud das Modell als .tflite (Tensorflow Lite) Datei bereitstellt

## Quellen
[1] https://www.smashingmagazine.com/2018/01/rise-state-machines/
[2] https://de.wikipedia.org/wiki/Erweiterte_Realit%C3%A4t

__________________________________
here starts the bullshit

# ~~My first HackMD note (playground)~~

###### tags: `Tag(change me!)`

> This note is yours, feel free to play around. :video_game:
> Type on the left :arrow_left: and see the rendered result on the right. :arrow_right:

## :memo: Where do I start?

### Step 1: Change the title and add a tag

- [x] Create my first HackMD note (this one!)
- [ ] Change its title
- [ ] Add a tag

:rocket:

### Step 2: Write something in Markdown

Let's try it out!
Apply different styling to this paragraph:
**HackMD gets everyone on the same page with Markdown.** ==Real-time collaborate on any documentation in markdown.== Capture fleeting ideas and formalize tribal knowledge.

- [x] **Bold**
- [ ] *Italic*
- [ ] Super^script^
- [ ] Sub~script~
- [ ] ~~Crossed~~
- [x] ==Highlight==

:::info
:bulb: **Hint:** You can also apply styling from the toolbar at the top :arrow_upper_left: of the editing area.

:::

> Drag-n-drop image from your file system to the editor to paste it!

### Step 3: Invite your team to collaborate!

Click on the <i class="fa fa-share-alt"></i> **Sharing** menu :arrow_upper_right: and invite your team to collaborate on this note!


- [ ] Register and sign-in to HackMD (to use advanced features :tada: )
- [ ] Set Permalink for this note
- [ ] Copy and share the link with your team

:::info
:pushpin: Want to learn more? ➜ [HackMD Tutorials](https://hackmd.io/c/tutorials)
:::

---

## BONUS: More cool ways to HackMD!

- Table

| Features | Tutorials |
| ----------------- |:----------------------- |
| GitHub Sync | [:link:][GitHub-Sync] |
| Browser Extension | [:link:][HackMD-it] |
| Book Mode | [:link:][Book-mode] |
| Slide Mode | [:link:][Slide-mode] |
| Share & Publish | [:link:][Share-Publish] |

[GitHub-Sync]: https://hackmd.io/c/tutorials/%2Fs%2Flink-with-github
[HackMD-it]: https://hackmd.io/c/tutorials/%2Fs%2Fhackmd-it
[Book-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-book
[Slide-mode]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-create-slide-deck
[Share-Publish]: https://hackmd.io/c/tutorials/%2Fs%2Fhow-to-publish-note

- LaTeX for formulas

$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
$$

- Code block with color and line numbers：

var s = "JavaScript syntax highlighting";
alert(s);

- UML diagrams

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Note left of Alice: Alice responds
Alice->Bob: Where have you been?

- Auto-generated Table of Content
[ToC]

> Leave in-line comments! [color=#3b75c6]

- Embed YouTube Videos

{%youtube PJuNmlE74BQ %}

> Put your cursor right behind an empty bracket {} :arrow_left: and see all your choices.

- And MORE ➜ [HackMD Tutorials](https://hackmd.io/c/tutorials)