2024-02-14 15:30:42 +01:00
<!-- 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’
Limited APIs: Compared to mainstream platforms, Flutter’
-->
2024-03-05 00:34:31 +01:00
<!-- Introduction:
- Clearly describe what your Flutter application does and its main functionality.
Architecture:
- Diagram and explain your app's structure (state management approach, key widgets, navigation).
- Consider using visual aids to make this section more engaging.
Key Design Concepts:
- Challenges solved by your design choices.
- Did you address performance optimizations for embedded systems?
- How did you make the UI fit for the embedded target? -->
2024-03-09 23:25:22 +01:00
## Implementierung der Features
\pagebreak
### Home
\begin{figure}[ht]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 home/.
.2 presentation/.
.3 home\char`\_screen.dart.
}
\end{minipage}
\end{figure}
\begin{multicols}{2}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/home.png}}
\label{fig:screeplot}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/homeDebug.png}}
\label{fig:screeplot}
\end{figure}
\end{multicols}
\pagebreak
### Material Demo
\begin{figure}[ht]
\caption{Example caption}
\centering
\begin{minipage}{10cm}
\dirtree{%
.1 material\char`\_demo/.
.2 presentation/.
.3 material\char`\_demo\char` \_screen.dart.
.3 widgets/.
.4 component\char`\_decoration.dart.
}
\end{minipage}
\end{figure}
\begin{multicols}{2}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/material3.png}}
\label{fig:screeplot}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/material3Dialog.png}}
\label{fig:screeplot}
\end{figure}
\end{multicols}
\pagebreak
### Benchmark
\begin{figure}[h]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 benchmark/.
.2 business/.
.3 flame/.
.4 rogue\char`\_shooter/.
.4 sprite\char`\_renderer/.
.2 data/.
.3 models/.
.4 benchmark.dart.
.4 ember.dart.
.3 benchmarks\char`\_list.dart.
.2 presentation/.
.3 widgets/.
.4 benchmark\char`\_card.dart.
.3 benchmark\char`\_screen.dart.
.3 map\char`\_benchmark\char` \_screen.dart.
.3 rogue\char`\_shooter\char` \_screen.dart.
.3 sprite\char`\_benchmark\char` \_screen.dart.
.3 video\char`\_benchmark\char` \_screen.dart.
.3 vsync\char`\_benchmark\char` \_screen.dart.
}
\end{minipage}
\end{figure}
\begin{multicols}{2}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/benchmark.png}}
\label{fig:screeplot}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/benchmarkSprite.png}}
\label{fig:screeplot}
\end{figure}
\end{multicols}
\pagebreak
\begin{multicols}{2}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/benchmarkSpriteFinished.png}}
\label{fig:screeplot}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/benchmarkFlame.png}}
\label{fig:screeplot}
\end{figure}
\end{multicols}
\begin{multicols}{2}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/benchmarkFlame2.png}}
\label{fig:screeplot}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/benchmarkVsync.png}}
\label{fig:screeplot}
\end{figure}
\end{multicols}
\begin{multicols}{2}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/benchmarkVideo.png}}
\label{fig:screeplot}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/benchmarkMap.png}}
\label{fig:screeplot}
\end{figure}
\end{multicols}
\pagebreak
### News
\begin{figure}[ht]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 news\char`\_api/.
.2 business/.
.3 news\char`\_controller.dart.
.3 scroll\char`\_state\char` \_controller.dart.
.2 data/.
.3 models/.
.4 news.dart.
.4 region\char`\_news.dart.
.4 teaser\char`\_image\char` \_url.dart.
.4 teaser\char`\_image.dart.
.3 repository/.
.4 news\char`\_repository.dart.
.2 presentation/.
.3 widgets/.
.4 news\char`\_grid\char` \_item.dart.
.4 news\char`\_grid.dart.
.4 news\char`\_list\char` \_item.dart.
.4 news\char`\_list.dart.
.3 news\char`\_screen.dart.
}
\end{minipage}
\end{figure}
\begin{multicols}{2}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/newsList.png}}
\label{fig:screeplot}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/newsGrid.png}}
\label{fig:screeplot}
\end{figure}
\end{multicols}
\pagebreak
### Led Morse
\begin{figure}[ht]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 morse\char`\_led/.
.2 business/.
.3 service/.
.4 morse\char`\_service.dart.
.2 presentation/.
.3 led\char`\_screen.dart.
}
\end{minipage}
\end{figure}
\begin{multicols}{2}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/morse.png}}
\label{fig:screeplot}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/morseInput.png}}
\label{fig:screeplot}
\end{figure}
\end{multicols}
\pagebreak
### Matrix
\begin{figure}[ht]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 matrix\char`\_rgb/.
.2 business/.
.3 service/.
.4 matrix\char`\_service.dart.
.3 utils/.
.4 find\char`\_closest\char` \_color\char`\_index.dart.
.2 data/.
.3 models/.
.4 pixel.dart.
.2 presentation/.
.3 widgets/.
.4 pixel\char`\_painter.dart.
.3 matrix\char`\_screen.dart.
}
\end{minipage}
\end{figure}
\begin{multicols}{2}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/matrix.png}}
\label{fig:screeplot}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/matrixInput.png}}
\label{fig:screeplot}
\end{figure}
\end{multicols}
\pagebreak
\begin{multicols}{2}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/matrixColor.png}}
\label{fig:screeplot}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/matrixColorWheel.png}}
\label{fig:screeplot}
\end{figure}
\end{multicols}
\pagebreak
### System Informationen
\begin{figure}[ht]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 system\char`\_resources/.
.2 business/.
.3 service/.
.4 memory\char`\_service.dart.
.3 utils/.
.4 get\char`\_cpu\char` \_usage\char`\_percentage.dart.
.2 presentation/.
.3 system\char`\_resources\char` \_screen.dart.
}
\end{minipage}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/systemResources.png}}
\label{fig:screeplot}
\end{figure}
\pagebreak
### Einstellungen
\begin{figure}[ht]
\caption{Example caption}
\centering
\begin{minipage}{7cm}
\dirtree{%
.1 settings/.
.2 business/.
.3 wifi\char`\_controller.dart.
.2 presentation/.
.3 settings\char`\_screen/.
.4 widgets/.
.5 color\char`\_seed\char` \_button.dart.
.4 settings\char`\_screen.dart.
.3 wifi\char`\_settings\char` \_screen/.
.4 widgets/.
.5 ap\char`\_pw\char` \_dialog.dart.
.5 ap\char`\_tile\char` \_demo.dart.
.5 ap\char`\_tile.dart.
.5 wifi\char`\_bar\char` \_icon.dart.
.4 accesspoint\char`\_screen.dart.
.4 wifi\char`\_settings\char` \_screen.dart.
}
\end{minipage}
\end{figure}
\begin{multicols}{2}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/settings.png}}
\label{fig:screeplot}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/settingsDark.png}}
\label{fig:screeplot}
\end{figure}
\end{multicols}
\pagebreak
\begin{multicols}{2}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/settingsWifiList.png}}
\label{fig:screeplot}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/settingsWifiDetails.png}}
\label{fig:screeplot}
\end{figure}
\end{multicols}
\begin{multicols}{2}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/settingsWifiConnect.png}}
\label{fig:screeplot}
\end{figure}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/settingsWifiPasswordInput.png}}
\label{fig:screeplot}
\end{figure}
\end{multicols}
\begin{figure}[H]
\caption{Home Screen}
\centering
{\includegraphics[width=8cm]{./assets/screenshots/settingsMaterial2.png}}
\label{fig:screeplot}
\end{figure}
