434 lines
15 KiB
Plaintext
434 lines
15 KiB
Plaintext
---
|
||
header-includes: |
|
||
\usepackage[T1]{fontenc}
|
||
\usepackage[usefilenames,RMstyle={Text,Semibold},SSstyle={Text,Semibold},TTstyle={Text,Semibold},DefaultFeatures={Ligatures=Common}]{plex-otf}
|
||
\usepackage[a4paper,bindingoffset=0.2in,%
|
||
left=4cm,right=2cm,top=2cm,bottom=2cm,%
|
||
footskip=.25in]{geometry}
|
||
\usepackage{fancyhdr}
|
||
\usepackage[utf8]{inputenc}
|
||
\usepackage{tikz}
|
||
\usetikzlibrary{snakes,arrows,shapes}
|
||
\usepackage{amsmath}
|
||
\usepackage{pgfplots}
|
||
\usepackage{pgfplotstable}
|
||
\pgfplotsset{compat=1.8}
|
||
\usepackage{multicol,lipsum}
|
||
\usepackage{listings}
|
||
\usepackage{wrapfig}
|
||
\usepackage[font=small,labelfont=bf]{caption}
|
||
\usepackage{graphicx}
|
||
\usepackage{xcolor,stackengine}
|
||
\usepackage{colortbl}
|
||
\usepackage{tcolorbox}
|
||
\usepackage{lastpage}
|
||
\usepackage{subcaption}
|
||
\usepackage{tabularx}
|
||
\usepackage{biblatex}
|
||
\usepackage{float}
|
||
\usepackage{refract}
|
||
\usepackage{svg}
|
||
\usepackage{setspace}
|
||
\usepackage{titling}
|
||
\usepackage{abstract}
|
||
\usepackage{fvextra}
|
||
\usepackage{emoji}
|
||
\DefineVerbatimEnvironment{Highlighting}{Verbatim}{breaklines,commandchars=\\\{\}}
|
||
\newcommand{\hideFromPandoc}[1]{#1}
|
||
\hideFromPandoc{
|
||
\let\Begin\begin
|
||
\let\End\end
|
||
}
|
||
\makeatletter
|
||
\def\fps@figure{h}
|
||
\makeatother
|
||
nocite: |
|
||
@*
|
||
---
|
||
|
||
\setstretch{1.5}
|
||
|
||
\setemojifont{Twemoji Mozilla}
|
||
|
||
\renewcommand{\familydefault}{\sfdefault}
|
||
|
||
\graphicspath{ {./img/} }
|
||
|
||
\overfullrule=0pt
|
||
|
||
\newcolumntype{C}{>{\centering\arraybackslash}X}
|
||
|
||
\renewcommand{\comment}[1]{\hspace{2em}{\small\textit{#1}}\bigskip\par}
|
||
|
||
\newcommand\palbox[1]{{\sffamily\fboxsep=5pt\relax\fboxrule=1pt\relax\footnotesize%
|
||
\fcolorbox{gray!50}{gray!10}{%
|
||
\stackengine{4pt}{%
|
||
\colorbox[HTML]{#1}{\rule{30pt}{0pt}\rule{0pt}{30pt}}%
|
||
}{%
|
||
\color{black!60}\stackengine{6pt}{\##1}{\saycolors{#1}}{U}{l}{F}{F}{S}%
|
||
}{U}{l}{F}{F}{S}%
|
||
}%
|
||
}}
|
||
\newcommand\saycolors[1]{\relax}
|
||
|
||
\lstset{
|
||
basicstyle=\ttfamily,
|
||
columns=fullflexible,
|
||
frame=single,
|
||
breaklines=true,
|
||
postbreak=\mbox{\textcolor{red}{$\hookrightarrow$}\space},
|
||
}
|
||
%Created by Leonardo Rignanese (rignaneseleo)
|
||
%source: https://github.com/rignaneseleo/Latex-listings-Dart
|
||
%added pull_request #1: https://github.com/rignaneseleo/Latex-listings-Dart/pull/1
|
||
|
||
% Define colors to use
|
||
% You can change the colors (use http://latexcolor.com/)
|
||
\definecolor{codegreen}{rgb}{0,0.6,0}
|
||
\definecolor{codegray}{rgb}{0.5,0.5,0.5}
|
||
\definecolor{codepurple}{rgb}{0.58,0,0.82}
|
||
\definecolor{backcolour}{rgb}{0.95, 0.95, 0.96}
|
||
|
||
% Define the codebox
|
||
\lstset{
|
||
backgroundcolor=\color{backcolour},
|
||
commentstyle=\color{codegreen},
|
||
keywordstyle=\color{magenta},
|
||
numberstyle=\tiny\color{codegray},
|
||
stringstyle=\color{codepurple},
|
||
basicstyle=\ttfamily\footnotesize,
|
||
breakatwhitespace=false,
|
||
breaklines=true,
|
||
captionpos=b,
|
||
keepspaces=true,
|
||
numbers=left,
|
||
numbersep=5pt,
|
||
showspaces=false,
|
||
showstringspaces=false,
|
||
showtabs=false,
|
||
tabsize=2,
|
||
morestring=\*[d]{"}
|
||
%frame=shadowbox
|
||
}
|
||
|
||
% Define the code emph rules
|
||
\lstset{
|
||
% Types
|
||
emph=[1]{var, String, int, List, void, Future, await, if, else, throw, async, true, false},% Insert here the types you are using
|
||
emphstyle=[1]{\color{codepurple}},
|
||
% Functions
|
||
emph=[2]{findAllElements,findElements, setState, send, fromPath, add, parse, bytesToString},% Insert here the methods you are using
|
||
emphstyle=[2]{\color{magenta}}
|
||
}
|
||
\thispagestyle{empty}
|
||
|
||
\begin{titlepage}
|
||
\begin{center}
|
||
\Large Hochschule Rhein-Waal \\
|
||
\vspace{2.5cm}
|
||
\Large Proposal für die Bachelorarbeit \\
|
||
\vspace{2.5cm}
|
||
\huge \textbf{\textsc{Flutter als Entwicklungsplattform für eingebettete Linux Systeme: eine Fallstudie}} \\
|
||
\vspace{1.0cm}
|
||
\Large Fabian Baldeau \\
|
||
\vspace{2.5cm}
|
||
\vspace{0.25cm}
|
||
\textsc{Studiengang}\\
|
||
\vspace{0.25cm}
|
||
\textsc{Medieninformatik}\\
|
||
\vspace{2.5cm}
|
||
\textsc{Gutachter}\\
|
||
\vspace{0.25cm}
|
||
\textsc{Prof. Dr.-Ing. Ido Iurgel}\\
|
||
\vspace{0.25cm}
|
||
\textsc{Prof. Dr. Kai Essig}\\
|
||
\vspace{2cm}
|
||
\end{center}
|
||
|
||
\end{titlepage}
|
||
|
||
\pagenumbering{Roman}
|
||
\fancyhf{}
|
||
\fancyhead[C]{\thepage}
|
||
\renewcommand{\headrulewidth}{0pt}
|
||
\pagestyle{fancy}
|
||
\begin{abstract}
|
||
Die Integration von Flutter's plattformübergreifenden
|
||
UI-Fähigkeiten mit der Anpassungsfähigkeit von Embedded
|
||
Linux verspricht die Rationalisierung der Entwicklung
|
||
von Benutzeroberflächen (UIs) für eingebettete Systeme.
|
||
Diese Studie untersucht die Eignung von Flutter in
|
||
diesem Kontext durch eine Fallstudie: die Entwicklung
|
||
eines Smart Home Control Centers auf einem Raspberry
|
||
Pi mit einer angepassten Embedded Linux Distribution.
|
||
Leistungsmesswerte, Benutzerfreundlichkeit und der
|
||
Entwicklungsprozess werden bewertet. Die Ergebnisse
|
||
zeigen, dass Flutter, wenn es angepasst wird,
|
||
erfolgreich attraktive und benutzerfreundliche
|
||
eingebettete Schnittstellen mit einigen Kompromissen
|
||
bei der Leistung im Vergleich zu nativen Lösungen
|
||
erstellt.
|
||
|
||
Die Arbeit beschäftigt sich im Wesentlichen mit der Entwicklung einer
|
||
prototypischen Anwendung mit Flutter für ein eingebettetes Linux System.
|
||
Dabei soll ein Konzept ausgearbeitet werden, dass zeigt wie Flutter in
|
||
eingebetteten Linux Systemen genutzt werden kann und es soll anhand der
|
||
prototypischen Anwendung untersucht werden, wie gut Flutter für diesen
|
||
Verwendungszweck geeignet ist. Die Ergebnisse der Untersuchung sollen
|
||
dann genutzt werden um Empfehlungen für die Nutzung von Flutter in
|
||
eingebetteten Linux Systemen abzuleiten.
|
||
\end{abstract}
|
||
\pagebreak
|
||
\tableofcontents
|
||
\pagebreak
|
||
|
||
<!-- \fzframelinU{
|
||
\centering
|
||
\Huge{Kurz-Exposé} \\
|
||
\Large{\emph{Subtitle}}\\
|
||
\vspace{0.25cm}
|
||
\small{University/School}\\
|
||
\small{Class}\\
|
||
\small{Name}
|
||
}
|
||
|
||
\vspace{8pt} -->
|
||
|
||
\renewcommand{\headrulewidth}{0pt}
|
||
|
||
\pagenumbering{arabic}
|
||
|
||
<!-- \fancyfoot[C]{Seite \thepage\ von \pageref{LastPage}} -->
|
||
|
||
\fancyhead[C]{}
|
||
\fancyfoot[R]{\thepage}
|
||
## Motivation und Relevanz
|
||
|
||
<!-- Eingebettete Systeme sind allgegenwärtig und prägen unsere
|
||
Interaktion mit Maschinen. Ob in der Automobilindustrie,
|
||
Haushaltsgeräten oder Selbstbedienungskiosks - grafische
|
||
Benutzeroberflächen (GUIs) auf Touchscreens ermöglichen die
|
||
intuitive Steuerung und Bedienung dieser Systeme.
|
||
|
||
Die Entwicklung von GUIs für eingebettete Linux-Systeme stellt
|
||
Entwickler jedoch vor Herausforderungen. -->
|
||
|
||
In der heutigen Zeit verbringen Menschen in der Regel mehr Zeit damit,
|
||
über einen Bildschirm mit Maschinen zu interagieren, anstatt Maschinen
|
||
mechanisch zu steuern. Dieser Trend lässt sich gut bei der Automobilindustrie
|
||
oder an Haushaltsgeräten beobachten, wo immer mehr Funktionen über einen
|
||
Touchscreen mit einer grafischen Benutzeroberfläche (GUI) angesteuert werden.
|
||
Über die GUI können Benutzer Funktionen wie Musik, Radio, Telefon,
|
||
Temperaturregelung und mehr ansteuern. Ebenso kann die Öffentlichkeit am Flughafen
|
||
oder in Restaurants über einen Selbstbedienungskiosk mit Unternehmen
|
||
kommunizieren. Der Kiosk führt eine GUI auf einem Anzeigegerät aus und über
|
||
den Touchscreen des Kiosks können Maschinen die Kundenwünsche erfüllen.
|
||
Zusammenfassend lässt sich sagen, dass es in der Industrie einen zunehmenden
|
||
Trend gibt, dass der Endverbraucher auf bequeme und effiziente Weise mit GUIs
|
||
interagiert, um Aufgaben zu erledigen.
|
||
|
||
Aus Entwicklersicht ist die Erstellung einer eleganten GUI deshalb von
|
||
entscheidender Bedeutung, da GUIs immer mehr eine der Schlüsselkomponenten
|
||
sind bei der Kommunikation zwischen Mensch und Maschine. Benutzeroberflächen
|
||
für eingebettete Linux Systeme zu entwickeln ist jedoch ein komplexer Prozess
|
||
bei dem das meist genutzte Anwendungsframework und GUI-Toolkit Qt ist, welches
|
||
speziell für den Einsatz in eingebetteten Systemen aber teils hohe
|
||
Lizenzkosten mit sich bringt und in der Entwicklung aufwendig ist aufgrund
|
||
der Nutzung von C++ und traditionellen Designmethoden. Besonders die
|
||
Entwicklung von Benutzeroberflächen, die sich für Nutzer so vertraut wie beim
|
||
Smartphone per Toucheingabe steuern lassen, kann eine große Hürde darstellen.
|
||
Googles neuartiges quelloffenes Benutzerschnittstellen-Entwicklungs-Kit Flutter
|
||
bietet hier ein großes Potential für die Entwicklung von GUIs für eingebettete
|
||
Linux Systeme, da es besondere Eigenschaften besitzt, die die Entwicklung
|
||
vereinfachen können. So ist Flutter frei von jeglichen Lizenzkosten, speziell
|
||
für die Entwicklung von Benutzeroberflächen für Touchscreens stärker optimiert
|
||
und erlaubt es dank einer Hot-Reload Funktion Änderungen an dem Programm in
|
||
Echtzeit zu sehen und auszutesten. Zudem wird Flutter mit der Programmiersprache
|
||
Dart entwickelt, die im Vergleich zu C++ einfacher zu erlernen ist.
|
||
|
||
In Hinsicht dessen soll in dieser Bachelorarbeit untersucht werden, ob Flutter
|
||
als Entwicklungsplattform für eingebettete Linux Systeme geeignet ist. Denn
|
||
neben dem Potenzial für Unternehmen kann es auch besonders interessant für
|
||
Hochschulprojekte sein, weil Studenten sich potenziell einfacher in die
|
||
Entwicklung einarbeiten könnten und die BSD Lizenzierung bei Flutter attraktiv ist.
|
||
## Ziel der Arbeit
|
||
|
||
Die Arbeit beschäftigt sich im Wesentlichen mit der Entwicklung einer
|
||
prototypischen Anwendung mit Flutter für ein eingebettetes Linux System.
|
||
Dabei soll ein Konzept ausgearbeitet werden, dass zeigt wie Flutter in
|
||
eingebetteten Linux Systemen genutzt werden kann und es soll anhand der
|
||
prototypischen Anwendung untersucht werden, wie gut Flutter für diesen
|
||
Verwendungszweck geeignet ist. Die Ergebnisse der Untersuchung sollen
|
||
dann genutzt werden um Empfehlungen für die Nutzung von Flutter in
|
||
eingebetteten Linux Systemen abzuleiten.
|
||
# Flutter
|
||
|
||
## Einleitung
|
||
|
||
Flutter ist ein
|
||
|
||
- Flutter's core design principles center on a declarative,
|
||
reactive UI paradigm, where the developer defines the desired
|
||
interface state, and the framework efficiently handles updates
|
||
|
||
## Architektur
|
||
|
||
{#id .class width=400}
|
||
|
||
\begin{figure}[ht]
|
||
\centering
|
||
\includegraphics[scale=1]{assets/flutter/archdiagram.png}
|
||
\caption{Example caption}
|
||
|
||
\caption*{Source: me}
|
||
\end{figure}
|
||
|
||
## Key Design Concepts
|
||
|
||
### Deklarative Programmierung
|
||
|
||
Deklarative Programmierung ist ein Programmierparadigma
|
||
|
||
\lstinputlisting[language=Java, caption=Beispiel öpvn, linerange={65-73}]
|
||
{code/flutter_architecture/lib/main.dart}
|
||
<!--
|
||
Challenges with Direct Statistics
|
||
|
||
No Centralized Reporting:
|
||
Unlike mobile OS usage (Android vs. iOS), there's no unified app store
|
||
or market survey specifically for embedded Linux UIs. Projects range
|
||
from hobbyist work to closed-source industrial systems, making data
|
||
collection highly fragmented.
|
||
|
||
Embedded Development Diversity:
|
||
The range of devices running embedded Linux is immense, varying greatly
|
||
in purpose and visibility. This creates a large sample space that’s
|
||
hard to track systematically.
|
||
|
||
Subjectivity in Definition:
|
||
What constitutes "most used" gets tricky. Is it by volume of devices
|
||
regardless of scale, or by developer preferences in recent projects?
|
||
-->
|
||
# Yocto Environment
|
||
|
||
## Poky
|
||
|
||
## Metadata
|
||
|
||
## Open-Embedded Project
|
||
|
||
## Bitbake
|
||
|
||
## Board support package
|
||
|
||
## Meta-Flutter
|
||
|
||
# Setting up the build environment and building the image
|
||
|
||
# Flashing the image on Target
|
||
<!-- TODO: Was ist Flutter? -->
|
||
|
||
# Flutter
|
||
|
||
Die zunehmende Verbreitung mobiler Geräte und Betriebssysteme
|
||
stellt die effiziente Anwendungsentwicklung vor Herausforderungen.
|
||
Plattformübergreifende Frameworks wie Flutter zielen darauf ab,
|
||
diese Herausforderungen zu mildern, indem sie ein einheitliches
|
||
Toolset zum Erstellen von Benutzeroberflächen (UIs) bereitstellen,
|
||
die nahtlos über verschiedene Plattformen hinweg funktionieren.
|
||
Dieses Kapitel befasst sich mit der grundlegenden Architektur,
|
||
den Vorteilen und Überlegungen zur Verwendung von Flutter für
|
||
die Anwendungsentwicklung. [@theflutterwayFlutterRubberDuck2022]
|
||
|
||
Was ist Flutter [@FlutterArchitecturalOverviewb]
|
||
|
||
test [@weiserComputer21stCentury1999]
|
||
|
||
```{#test .dart .number-lines caption="Example Dart test"}
|
||
import 'package:retry/retry.dart';
|
||
|
||
final response = await retry(
|
||
// Make a GET request
|
||
() => http.get('https://google.com').timeout(Duration(seconds: 5)),
|
||
// Retry on SocketException or TimeoutException
|
||
retryIf: (e) => e is SocketException || e is TimeoutException,
|
||
);
|
||
print(response.body);
|
||
```
|
||
|
||
Nice Dart highlighting!
|
||
|
||
|
||
|
||
WORKING :)
|
||
# Entwicklungsumgebung
|
||
|
||
## Setup und Konfiguration von Flutter
|
||
|
||
## Setup von Raspberry Pi
|
||
<!-- Core Principles
|
||
|
||
Lightweight Embedder: flutter-pi acts as a custom Flutter engine
|
||
embedder tailored for the Raspberry Pi. This means it provides the
|
||
essential interface layer between Flutter's primarily C++ engine
|
||
and the embedded Linux environment (like on a Raspberry Pi).
|
||
|
||
No X11 Required: Notably, flutter-pi achieves this feat without
|
||
the graphical overhead of a system like X11 (common in desktop
|
||
Linux). This aligns better with resource-constrained embedded
|
||
devices.
|
||
|
||
Direct Rendering:
|
||
flutter-pi interacts with lower-level graphics APIs within the
|
||
Raspberry Pi (e.g., Broadcom's VideoCore, EGL) to handle rendering
|
||
of the Flutter UI onto the display hardware.
|
||
|
||
Key Responsibilities
|
||
|
||
Initialization:
|
||
Sets up the Flutter engine, loads appropriate libraries, and
|
||
gets everything ready for the Flutter application to run.
|
||
|
||
Event Handling: Manages input events (touch via touchscreen,
|
||
keyboard, mouse, etc.) and routes them from the embedded Linux
|
||
system to the Flutter framework for processing.
|
||
|
||
Rendering Loop: Coordinates requesting the next Flutter UI fram
|
||
e in response to events or state changes, communicates with the
|
||
rendering backends, and facilitates displaying the content.
|
||
|
||
Platform Channels: (Likely) Provides mechanisms for the Flutter
|
||
app to communicate with the underlying embedded Linux system.
|
||
This enables the app to potentially access device-specific
|
||
sensors, hardware control, and features outside the scope of
|
||
Flutter's core framework.
|
||
|
||
How to Utilize It
|
||
|
||
Prepare Environment: You'll need a Raspberry Pi running an
|
||
embedded Linux distribution and a toolchain suitable for
|
||
cross-compilation.
|
||
|
||
Obtain/Build flutter-pi: Refer to the project's GitHub repository
|
||
for build instructions.
|
||
|
||
Develop Flutter App: Structure your Flutter app normally, being
|
||
mindful of platform interactions that might need platform channels
|
||
(step 4).
|
||
|
||
Integrate & Compile: Follow flutter-pi's instructions to compile
|
||
your Flutter app code while linking against the flutter-pi embedder
|
||
you obtained/built.
|
||
|
||
Deploy & Run: Transfer the compiled output to your Raspberry Pi
|
||
and execute it with appropriate flutter-pi settings.
|
||
|
||
Caveats
|
||
|
||
Experimental: Not considered production-ready for every use-case (as might be expected with projects pushing Flutter’s boundaries).
|
||
Limited APIs: Compared to mainstream platforms, Flutter’s full suite of plugins and packages might not be compatible without extra platform channel work on your end.
|
||
-->
|
||
\pagebreak
|
||
|
||
# Literaturverzeichnis
|