--- 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 \renewcommand{\headrulewidth}{0pt} \pagenumbering{arabic} \fancyhead[C]{} \fancyfoot[R]{\thepage} ## Motivation und Relevanz 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 ![Architektur](assets/flutter/archdiagram.png){#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} # 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 # 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! ![](./assets/skizzen/led.png) WORKING :) # Entwicklungsumgebung ## Setup und Konfiguration von Flutter ## Setup von Raspberry Pi \pagebreak # Literaturverzeichnis