75 lines
2.8 KiB
Markdown
75 lines
2.8 KiB
Markdown
|
\pagebreak
|
||
|
|
|
||
|
|
## RGB Matrix Feature
|
||
|
|
|
||
|
|
Zur Implementierung der RGB Matrix wurde in der Präsentationsschicht
|
||
|
|
ein CustomPainter genutzt um die Matrix zu zeichnen. Per Touch Eingabe
|
||
|
|
können auf der Matrix die einzelnen Pixel angesteuert werden, die aktive
|
||
|
|
Farbe wird dabei in einem Kreis rechts neben der Matrix angezeigt (siehe Abbildung \ref{matrix}).
|
||
|
|
Beim Klick auf den Farbkreis öffnet sich ein ColorPicker, mit dem andere
|
||
|
|
Farben ausgewählt werden können (siehe Abbildung \ref{matrixColor}). Der ColorPicker
|
||
|
|
nutzt das _flex_color_picker_ Paket, welches auf GitHub verfügbar ist [@mikerydstromRydmikeFlex_color_picker2024].
|
||
|
|
|
||
|
|
\begin{multicols}{2}
|
||
|
|
|
||
|
|
\begin{figure}[H]
|
||
|
|
\caption{Das RGB Matrix Feature}
|
||
|
|
\label{matrix}
|
||
|
|
\centering
|
||
|
|
\shadowimage[width=7cm]{./assets/screenshots/matrix.png}
|
||
|
|
\end{figure}
|
||
|
|
|
||
|
|
\begin{figure}[H]
|
||
|
|
\caption{Der Color Picker für die RGB Farben}
|
||
|
|
\label{matrixColor}
|
||
|
|
\centering
|
||
|
|
\shadowimage[width=7cm]{./assets/screenshots/matrixColor.png}
|
||
|
|
\end{figure}
|
||
|
|
|
||
|
|
\end{multicols}
|
||
|
|
|
||
|
|
Um die Sparkfun RGB Matrix anzusteuern, wurde in der Geschäftslogikschicht
|
||
|
|
der Service _MatrixService_ implementiert. Dieser Service nutzt die
|
||
|
|
_dart_periphery_ Bibliothek, um die Matrix über die SPI Schnittstelle
|
||
|
|
anzusteuern. Die Bibliothek ist unter GitHub verfügbar [@sauerPeziDart_periphery2023].
|
||
|
|
|
||
|
|
Anfangs wurde stattdessen die _linux_spidev_ Bibliothek genutzt, welche von dem
|
||
|
|
Entwickler von Flutter-Pi stammt und auch unter GitHub verfügbar ist [@hanneswinklerFlutter_packagesPackagesLinux_spidev].
|
||
|
|
Die Bibliothek funktionierte im Test jedoch nicht zuverlässig, es kam immer
|
||
|
|
nach einer gewissen Zeit zu dem Fehler, dass die SPI Schnittstelle nicht
|
||
|
|
mehr erreichbar war. Daher wurde die Bibliothek durch _dart_periphery_ ersetzt,
|
||
|
|
welche zuverlässig funktioniert.
|
||
|
|
|
||
|
|
Die Sparkfun RGB Matrix erwartet eine Liste von 64 RGB Farben als Integers
|
||
|
|
im Bereich von 0 bis 255. Für die Nutzung im Service wird die Liste aus den
|
||
|
|
Farben dazu von den 32-bit ARGB Farben welche Flutter standardmäßig nutzt,
|
||
|
|
in den 8-bit Farbbereich umgerechnet mit einer Hilfsfunktion _findClosestColorIndex_.
|
||
|
|
Die Liste aus den Farben wird dann im MatrixService an die SPI Schnittstelle
|
||
|
|
transferiert und das gemalte Bild wird von der Software Matrix in Flutter auf die
|
||
|
|
physische Hardware Matrix gespiegelt.
|
||
|
|
|
||
|
|
<!-- \lstinputlisting[language=Java, caption=Implementierung des Matrix Service, captionpos=t]
|
||
|
|
{code/flutter_elinux/lib/features/matrix_rgb/business/service/matrix_service.dart} -->
|
||
|
|
|
||
|
|
<!-- \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} -->
|