diff --git a/.DS_Store b/.DS_Store index 23180b9..dd637e3 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json index 5a24e30..8123184 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,7 +6,9 @@ { "path": "chapters/04", "symbol": "T", "tooltip": "04" }, { "path": "chapters/05", "symbol": "T", "tooltip": "05" }, { "path": "chapters/06", "symbol": "T", "tooltip": "06" }, - { "path": "chapters/07", "symbol": "T", "tooltip": "07" } + { "path": "chapters/07", "symbol": "T", "tooltip": "07" }, + { "path": "chapters/08", "symbol": "T", "tooltip": "08" }, + { "path": "chapters/09", "symbol": "T", "tooltip": "09" } ], "cSpell.enabled": true, "cSpell.enableFiletypes": ["markdown_latex_combined"] diff --git a/Bachelor.bib b/Bachelor.bib index c05bf9f..7870472 100644 --- a/Bachelor.bib +++ b/Bachelor.bib @@ -9,6 +9,13 @@ file = {/Users/fabian/Zotero/storage/HNIIPU6S/what-is-the-minimum-amount-of-ram-required-to-run-linux-kernel-on-an-embedded-de.html} } +@online{156inchQLED, + title = {15.6inch {{QLED Monitor}} - {{Waveshare Wiki}}}, + url = {https://www.waveshare.com/wiki/15.6inch_QLED_Monitor}, + urldate = {2024-03-21}, + file = {/Users/fabian/Zotero/storage/A9QI69GM/15.html} +} + @online{3ClauseBSDLicense2011, title = {The 3-{{Clause BSD License}}}, date = {2011-05-22T22:21:11+00:00}, @@ -20,6 +27,23 @@ file = {/Users/fabian/Zotero/storage/ZHWXNYXB/bsd-3-clause.html} } +@online{AddLinux_arm64Library, + title = {Add Linux\_arm64 Library · {{Issue}} \#876 · Isar/Isar}, + url = {https://github.com/isar/isar/issues/876}, + urldate = {2024-03-12}, + file = {/Users/fabian/Zotero/storage/6LPECSW5/876.html} +} + +@online{beautypiShadertoy, + title = {Shadertoy}, + author = {Beautypi}, + url = {https://www.shadertoy.com/view/Xd3BWr}, + urldate = {2024-03-18}, + abstract = {Build shaders, share them, and learn from the best community.}, + langid = {english}, + file = {/Users/fabian/Zotero/storage/76ZKPMWU/Xd3BWr.html} +} + @online{BestWayUse, title = {The Best Way to Use {{Yocto}} and {{Docker}} — {{Get Intimate With Cyber}} ! 0.1 Documentation}, url = {https://ubs_csse.gitlab.io/secu_os/tutorials/crops_yocto.html}, @@ -39,6 +63,81 @@ file = {/Users/fabian/Zotero/storage/DUDXBAGD/comparison-flutter-app-architectures.html} } +@online{BugsCPURAM2016, + title = {2 {{Bugs}} at {{CPU}} and {{RAM}} · {{Issue}} \#386 · {{KittyKatt}}/{{screenFetch}}}, + date = {2016}, + url = {https://github.com/KittyKatt/screenFetch/issues/386}, + urldate = {2024-03-18}, + abstract = {hey have found 2 BUGS at the CPU frequency and Ram. Ram is 1GB to high. and CPU frequency is incorrect see pic http://www.directupload.net/file/d/4487/vq9o55ar\_png.htm}, + langid = {english}, + organization = {GitHub}, + file = {/Users/fabian/Zotero/storage/3HUELEPA/386.html} +} + +@software{CagekioskCage2024, + title = {Cage-Kiosk/Cage}, + date = {2024-03-20T16:36:49Z}, + origdate = {2018-11-22T18:58:55Z}, + url = {https://github.com/cage-kiosk/cage}, + urldate = {2024-03-21}, + abstract = {A Wayland kiosk}, + organization = {Cage kiosk}, + keywords = {compositor,kiosk,wayland} +} + +@software{CanonicalNmDart2023, + title = {Canonical/Nm.Dart}, + date = {2023-11-30T08:17:08Z}, + origdate = {2020-08-27T20:45:25Z}, + url = {https://github.com/canonical/nm.dart}, + urldate = {2024-03-19}, + abstract = {Native Dart client library to access NetworkManager on Linux.}, + organization = {Canonical}, + keywords = {dart} +} + +@online{Crops, + title = {Crops}, + url = {https://github.com/crops}, + urldate = {2024-03-21}, + file = {/Users/fabian/Zotero/storage/Z2MJS6AP/crops.html} +} + +@online{CustomFlutterEnginec, + title = {Custom {{Flutter Engine Embedders}}}, + url = {https://github.com/flutter/flutter/wiki/Custom-Flutter-Engine-Embedders}, + urldate = {2024-03-15}, + abstract = {Flutter makes it easy and fast to build beautiful apps for mobile and beyond - flutter/flutter}, + langid = {english}, + organization = {GitHub}, + file = {/Users/fabian/Zotero/storage/ZRRK4LNR/Custom-Flutter-Engine-Embedders.html} +} + +@software{danielquisbertDanielquisbertSimple_tiles_map2023, + title = {Danielquisbert/Simple\_tiles\_map}, + author = {{Daniel Quisbert}}, + date = {2023-11-21T17:54:35Z}, + origdate = {2022-10-26T14:59:36Z}, + url = {https://github.com/danielquisbert/simple_tiles_map}, + urldate = {2024-03-18} +} + +@online{DartFrog, + title = {Dart {{Frog}}}, + url = {https://dartfrog.vgv.dev/}, + urldate = {2024-03-21}, + abstract = {The official documentation site for Dart Frog. A fast, minimalistic backend framework for Dart 🎯 Built by Very Good Ventures.}, + langid = {english}, + file = {/Users/fabian/Zotero/storage/E3C2TBYG/dartfrog.vgv.dev.html} +} + +@online{DartPad, + title = {{{DartPad}}}, + url = {https://dartpad.dev/}, + urldate = {2024-03-21}, + file = {/Users/fabian/Zotero/storage/2AS4KHAA/dartpad.dev.html} +} + @online{DartVSJava, title = {Dart {{VS Java}} Benchmarks, {{Which}} Programming Language or Compiler Is Faster}, url = {https://programming-language-benchmarks.vercel.app/dart-vs-java}, @@ -93,6 +192,72 @@ file = {/Users/fabian/Zotero/storage/LAGSLH4P/what-is-linux-distribution_599979.html} } +@online{DisableRaspberryPi2022, + title = {Disable the {{Raspberry Pi Desktop}} – {{Wobblycogs Workshop}}}, + date = {2022-01-08}, + url = {https://www.wobblycogs.co.uk/raspberry-pi/2022/01/08/disable-the-raspberry-pi-desktop/}, + urldate = {2024-03-16}, + langid = {british}, + file = {/Users/fabian/Zotero/storage/GH4TSLMF/disable-the-raspberry-pi-desktop.html} +} + +@online{drewmoseleyHowConfigureNetworking2023, + title = {How to Configure Networking Using Systemd in {{Yocto Project}} - {{Tutorials}} / {{Yocto Project}}}, + author = {{Drew Moseley}}, + date = {2023-05-08T12:42:50+00:00}, + url = {https://hub.mender.io/t/how-to-configure-networking-using-systemd-in-yocto-project/1097}, + urldate = {2024-03-21}, + abstract = {Introduction This tutorial will guide you through configuring networking in Yocto using systemd-networkd. This is one of the possible network management utilities available in Yocto. Other utilities may be documented in other tutorials. This will use a Raspberry Pi 3 platform so that we can demonstrate both wired and wireless networking. Version notes This tutorial targets the following Yocto Project versions: Yocto Project Tutorial applies Maintenance nanbield (4.3) ...}, + langid = {english}, + organization = {Mender Hub}, + file = {/Users/fabian/Zotero/storage/7932BMPI/1097.html} +} + +@software{dylanarapsDylanarapsPfetch2024, + title = {Dylanaraps/Pfetch}, + author = {{Dylan Araps}}, + date = {2024-03-18T18:53:02Z}, + origdate = {2019-09-24T07:36:11Z}, + url = {https://github.com/dylanaraps/pfetch}, + urldate = {2024-03-18}, + abstract = {🐧 A pretty system information tool written in POSIX sh.}, + keywords = {neofetch,posix,screenfetch,shell,shell-script,system-information} +} + +@online{EngineShellPlatform, + title = {Engine/Shell/Platform/Embedder/Embedder.h at Main · Flutter/Engine}, + url = {https://github.com/flutter/engine/blob/main/shell/platform/embedder/embedder.h}, + urldate = {2024-03-16}, + file = {/Users/fabian/Zotero/storage/Z2KD449Q/embedder.html} +} + +@online{FlameExamplesGames, + title = {Flame/Examples/Games/Rogue\_shooter at Main · Flame-Engine/Flame}, + url = {https://github.com/flame-engine/flame/tree/main/examples/games/rogue_shooter}, + urldate = {2024-03-18}, + abstract = {A Flutter based game engine. Contribute to flame-engine/flame development by creating an account on GitHub.}, + langid = {english}, + organization = {GitHub}, + file = {/Users/fabian/Zotero/storage/NVJZQY4M/rogue_shooter.html} +} + +@online{FlameExamplesLib, + title = {Flame/Examples/Lib/Stories/Animations/Benchmark\_example.Dart at Main · Flame-Engine/Flame}, + url = {https://github.com/flame-engine/flame/blob/main/examples/lib/stories/animations/benchmark_example.dart}, + urldate = {2024-03-18}, + abstract = {A Flutter based game engine. Contribute to flame-engine/flame development by creating an account on GitHub.}, + langid = {english}, + organization = {GitHub}, + file = {/Users/fabian/Zotero/storage/XSJXDZEH/benchmark_example.html} +} + +@online{Flutter_packagesPackagesFlutterpi_gstreamer_video_player, + title = {Flutter\_packages/Packages/Flutterpi\_gstreamer\_video\_player at Main · Ardera/Flutter\_packages}, + url = {https://github.com/ardera/flutter_packages/tree/main/packages/flutterpi_gstreamer_video_player}, + urldate = {2024-03-18}, + file = {/Users/fabian/Zotero/storage/9YRSWNIX/flutterpi_gstreamer_video_player.html} +} + @online{FlutterArchitecturalOverviewb, title = {Flutter Architectural Overview}, url = {https://docs.flutter.dev/resources/architectural-overview}, @@ -111,6 +276,28 @@ file = {/Users/fabian/Zotero/storage/V9T5LLK6/inside-flutter.html} } +@online{flutterdevDartPadNowBuilt2024, + type = {Tweet}, + title = {{{DartPad}} Is Now Built with {{Flutter}}! 💫 {{Try}} out the New {{Gemini SDK}} with {{Dart}}, and {{Flutter}} Directly in Your Browser. → {{http://goo.gle/3TdaTAv}} {{https://t.co/tV4LzWUztn}}}, + author = {{FlutterDev}}, + date = {2024-03-18T19:00Z}, + url = {https://twitter.com/FlutterDev/status/1769800942361149869}, + urldate = {2024-03-21}, + langid = {english}, + organization = {Twitter}, + file = {/Users/fabian/Zotero/storage/IA3FSKU9/1769800942361149869.html} +} + +@software{FlutterFlutter2024, + title = {Flutter/Flutter}, + date = {2024-03-12T10:00:14Z}, + origdate = {2015-03-06T22:54:58Z}, + url = {https://github.com/flutter/flutter}, + urldate = {2024-03-12}, + abstract = {Flutter makes it easy and fast to build beautiful apps for mobile and beyond}, + organization = {Flutter} +} + @online{FlutterGPU, title = {Flutter {{GPU}}}, url = {https://github.com/flutter/flutter/wiki/Flutter-GPU}, @@ -121,6 +308,27 @@ file = {/Users/fabian/Zotero/storage/VVZT5YJA/Flutter-GPU.html} } +@online{FlutterPackagesFlutter_toolsb, + title = {Flutter/Packages/Flutter\_tools/Static/Custom-Devices.Schema.Json at 5545c95df7a8ce4eaa03ce98b0d76d83aaf4ecf7 · Flutter/Flutter}, + url = {https://github.com/flutter/flutter/blob/5545c95df7a8ce4eaa03ce98b0d76d83aaf4ecf7/packages/flutter_tools/static/custom-devices.schema.json}, + urldate = {2024-03-21}, + abstract = {Flutter makes it easy and fast to build beautiful apps for mobile and beyond - flutter/flutter}, + langid = {english}, + organization = {GitHub}, + file = {/Users/fabian/Zotero/storage/KT2IBA6B/custom-devices.schema.html} +} + +@software{FluttertizenFluttertizen2024, + title = {Flutter-Tizen/Flutter-Tizen}, + date = {2024-02-27T05:57:26Z}, + origdate = {2020-11-24T08:13:50Z}, + url = {https://github.com/flutter-tizen/flutter-tizen}, + urldate = {2024-03-12}, + abstract = {Flutter tools for Tizen}, + organization = {flutter-tizen}, + keywords = {flutter,tizen} +} + @online{FlutterWeiSuoYouPingMuChuangZaoJingCai, title = {Flutter: 为所有屏幕创造精彩}, shorttitle = {Flutter}, @@ -154,6 +362,15 @@ file = {/Users/fabian/Zotero/storage/3K7HX2EI/flutter-on-raspberry-pi-mostly-from-scratch-2824c5e7dcb1.html} } +@online{GetDartSDK, + title = {Get the {{Dart SDK}}}, + url = {https://dart.dev/get-dart/}, + urldate = {2024-03-12}, + abstract = {Get the libraries and command-line tools that you need to develop Dart web, command-line, and server apps.}, + langid = {english}, + file = {/Users/fabian/Zotero/storage/LEWDSTCV/get-dart.html} +} + @online{gfallonItFOSSToyota2019, title = {It's {{FOSS}}: {{Toyota Motors}} and Its {{Linux Journey}}}, shorttitle = {It's {{FOSS}}}, @@ -167,6 +384,15 @@ file = {/Users/fabian/Zotero/storage/RI36I2EG/its-foss-toyota-motors-and-its-linux-journey.html} } +@online{Giscus, + title = {Giscus}, + url = {https://giscus.app/en/widget?origin=https%3A%2F%2Fpuro.dev%2F&session=&theme=https%3A%2F%2Fpuro.dev%2Fassets%2Fgiscus_theme_dark.css&reactionsEnabled=1&emitMetadata=0&inputPosition=bottom&repo=pingbird%2Fpuro&repoId=R_kgDOINCKyw&category=Docs&categoryId=DIC_kwDOINCKy84CSHou&strict=0&description=&backLink=https%3A%2F%2Fpuro.dev%2F&term=index}, + urldate = {2024-03-21}, + abstract = {A comments widget built on GitHub Discussions.}, + langid = {english}, + file = {/Users/fabian/Zotero/storage/IXMVWTKV/widget.html} +} + @online{googleinc.DartLanguageEvolution, title = {Dart Language Evolution}, author = {{Google Inc.}}, @@ -177,6 +403,16 @@ file = {/Users/fabian/Zotero/storage/BRNQA73A/evolution.html} } +@online{googleinc.FAQ, + title = {{{FAQ}}}, + author = {{Google Inc.}}, + url = {https://docs.flutter.dev/resources/faq}, + urldate = {2024-03-21}, + abstract = {Frequently asked questions and answers about Flutter.}, + langid = {english}, + file = {/Users/fabian/Zotero/storage/4FE55YQT/faq.html} +} + @online{googleinc.FutterBuildAny, title = {Futter - {{Build}} for Any Screen}, author = {{Google Inc.}}, @@ -187,6 +423,16 @@ file = {/Users/fabian/Zotero/storage/FUSDYG34/flutter.dev.html} } +@online{googleinc.ImpellerRenderingEngine, + title = {Impeller Rendering Engine}, + author = {{Google Inc.}}, + url = {https://docs.flutter.dev/perf/impeller}, + urldate = {2024-03-20}, + abstract = {What is Impeller and how to enable it?}, + langid = {english}, + file = {/Users/fabian/Zotero/storage/DBXYPBIV/impeller.html} +} + @online{googleinc.IntroductionDeclarativeUI, title = {Introduction to Declarative {{UI}}}, author = {{Google Inc.}}, @@ -197,6 +443,16 @@ file = {/Users/fabian/Zotero/storage/F6LI3FTY/declarative.html} } +@online{googleinc.Records, + title = {Records}, + author = {{Google Inc.}}, + url = {https://dart.dev/language/records/}, + urldate = {2024-03-19}, + abstract = {Summary of the record data structure in Dart.}, + langid = {english}, + file = {/Users/fabian/Zotero/storage/L9JME4B4/records.html} +} + @online{googleinc.UnsoundNullSafety, title = {Unsound Null Safety}, author = {{Google Inc.}}, @@ -207,6 +463,45 @@ file = {/Users/fabian/Zotero/storage/JWER5SLE/unsound-null-safety.html} } +@online{googleinc.UpgradingFlutter, + title = {Upgrading {{Flutter}}}, + author = {{Google Inc.}}, + url = {https://docs.flutter.dev/release/upgrade}, + urldate = {2024-03-21}, + abstract = {How to upgrade Flutter.}, + langid = {english}, + file = {/Users/fabian/Zotero/storage/XTABHQZG/upgrade.html} +} + +@online{googleinc.WritingUsingFragment, + title = {Writing and Using Fragment Shaders}, + author = {{Google Inc.}}, + url = {https://docs.flutter.dev/ui/design/graphics/fragment-shaders}, + urldate = {2024-03-18}, + abstract = {How to author and use fragment shaders to create custom visual effects in your Flutter app.}, + langid = {english}, + file = {/Users/fabian/Zotero/storage/RE9JW9CM/fragment-shaders.html} +} + +@online{googleplayapps&gamesteamSeamlessMultiplatformApp2021, + title = {Seamless Multi-Platform App Development with {{Flutter}}}, + author = {{Google Play Apps \& Games Team}}, + date = {2021-03-25T15:02:04}, + url = {https://medium.com/googleplaydev/seamless-multi-platform-app-development-with-flutter-ea0e8003b0f9}, + urldate = {2024-03-12}, + abstract = {Discover how Flutter supports creating beautiful experiences on any device.}, + langid = {english}, + organization = {Google Play Apps \& Games}, + file = {/Users/fabian/Zotero/storage/XYVYN58Y/seamless-multi-platform-app-development-with-flutter-ea0e8003b0f9.html} +} + +@online{GStreamerOpenSource, + title = {{{GStreamer}}: Open Source Multimedia Framework}, + url = {https://gstreamer.freedesktop.org/}, + urldate = {2024-03-12}, + file = {/Users/fabian/Zotero/storage/TCFDKB5X/gstreamer.freedesktop.org.html} +} + @book{hajianFlutterEngineering2024, title = {Flutter Engineering}, author = {Hajian, Majid}, @@ -218,6 +513,25 @@ pagetotal = {547} } +@online{hanneswinklerFlutter_packagesPackagesLinux_spidev, + title = {Flutter\_packages/Packages/Linux\_spidev at Main · Ardera/Flutter\_packages}, + author = {{Hannes Winkler}}, + url = {https://github.com/ardera/flutter_packages/tree/main/packages/linux_spidev}, + urldate = {2024-03-18}, + file = {/Users/fabian/Zotero/storage/LQJ7ACZR/linux_spidev.html} +} + +@online{harveydExtractingCPUUsage2014, + type = {Forum post}, + title = {Extracting \%{{CPU}} Usage from {{VMSTAT}} in a File}, + author = {{harveyD}}, + date = {2014-11-13}, + url = {https://stackoverflow.com/q/26906828}, + urldate = {2024-03-22}, + organization = {Stack Overflow}, + file = {/Users/fabian/Zotero/storage/IHWJAPIC/extracting-cpu-usage-from-vmstat-in-a-file.html} +} + @book{heathEmbeddedSystemsDesign2002, title = {Embedded Systems Design}, author = {Heath, Steve}, @@ -235,6 +549,33 @@ file = {/Users/fabian/Zotero/storage/4GAFAAXS/git_object_deduplication.html} } +@online{ImagesYoctoProject, + title = {Images — {{The Yocto Project}} ® 4.0.13 Documentation}, + url = {https://docs.yoctoproject.org/4.0.13/ref-manual/images.html}, + urldate = {2024-03-20}, + file = {/Users/fabian/Zotero/storage/M9ZFZW93/images.html} +} + +@online{ImplementPlatformViewSupport, + title = {Implement {{PlatformView}} Support on {{Linux}} · {{Issue}} \#41724 · Flutter/Flutter}, + url = {https://github.com/flutter/flutter/issues/41724}, + urldate = {2024-03-12}, + abstract = {We'll want to support embedding native views in a Flutter view, as is currently supported on mobile. This is of course blocked on \#30729 since until we have a view-based toolkit implementation for ...}, + langid = {english}, + organization = {GitHub}, + file = {/Users/fabian/Zotero/storage/2F4XSY36/41724.html} +} + +@online{InstallWSL2023, + title = {Install {{WSL}}}, + date = {2023-08-28}, + url = {https://learn.microsoft.com/en-us/windows/wsl/install}, + urldate = {2024-03-21}, + abstract = {Install Windows Subsystem for Linux with the command, wsl --install. Use a Bash terminal on your Windows machine run by your preferred Linux distribution - Ubuntu, Debian, SUSE, Kali, Fedora, Pengwin, Alpine, and more are available.}, + langid = {american}, + file = {/Users/fabian/Zotero/storage/5ZUBTGDX/install.html} +} + @online{IntroductionDeclarativeUIa, title = {Introduction to Declarative {{UI}}}, url = {https://docs.flutter.dev/get-started/flutter-for/declarative}, @@ -261,6 +602,28 @@ file = {/Users/fabian/Zotero/storage/P428MCND/README.html} } +@online{jeulisAnswerExtractingCPU2018, + title = {Answer to "{{Extracting}} \%{{CPU}} Usage from {{VMSTAT}} in a File"}, + author = {Jeulis}, + date = {2018-06-04}, + url = {https://stackoverflow.com/a/50677714}, + urldate = {2024-03-22}, + organization = {Stack Overflow}, + file = {/Users/fabian/Zotero/storage/VT27S3DF/extracting-cpu-usage-from-vmstat-in-a-file.html} +} + +@software{joelwinarskeMetaflutterMetaflutter2024, + title = {Meta-Flutter/Meta-Flutter}, + author = {{Joel Winarske}}, + date = {2024-03-04T21:33:38Z}, + origdate = {2021-10-14T17:59:48Z}, + url = {https://github.com/meta-flutter/meta-flutter}, + urldate = {2024-03-21}, + abstract = {Google Flutter for Yocto}, + organization = {meta-flutter}, + keywords = {drm,egl,elinux,flutter,linux,vulkan,wayland,yocto,yocto-layer} +} + @article{korogluComparisonKeypadsTouchscreen2015, title = {Comparison of Keypads and Touch-Screen Mobile Phones/Devices as Potential Risk for Microbial Contamination}, author = {Koroglu, Mehmet and Gunal, Selami and Yildiz, Fatma and Savas, Mehtap and Ozer, Ali and Altindis, Mustafa}, @@ -280,6 +643,18 @@ file = {/Users/fabian/Zotero/storage/TFSCZX36/Koroglu et al_2015_Comparison of keypads and touch-screen mobile phones-devices as potential risk.pdf} } +@online{krunalbhargavFAQAM625Flutter2023, + title = {[{{FAQ}}] {{AM625}}: {{Is Flutter}} the Right {{GUI}} Toolkit for Me: An Engineers Perspective. - {{Processors}} Forum - {{Processors}} - {{TI E2E}} Support Forums}, + shorttitle = {[{{FAQ}}] {{AM625}}}, + author = {{Krunal Bhargav}}, + date = {2023-03-13}, + url = {https://e2e.ti.com/support/processors-group/processors/f/processors-forum/1205636/faq-am625-is-flutter-the-right-gui-toolkit-for-me-an-engineers-perspective}, + urldate = {2024-03-12}, + abstract = {Part Number: AM625 Other Parts Discussed in Thread: SK-AM62 In today’s world, people tend to spend more time interacting with machines through a display screen}, + langid = {english}, + file = {/Users/fabian/Zotero/storage/7SCT8J7T/faq-am625-is-flutter-the-right-gui-toolkit-for-me-an-engineers-perspective.html} +} + @online{larsbakDartLanguageStructured2011, title = {Dart: A Language for Structured Web Programming}, shorttitle = {Dart}, @@ -342,10 +717,18 @@ author = {Matsubayashi, Hidenori}, date = {2020-10-27}, url = {https://elinux.org/images/6/61/Oct_27_Graphical_User_Interface_Using_Flutter_in_Embedded_Systems_Hidenori_Matsubayashi.pdf}, + urldate = {2024-03-19}, langid = {english}, file = {/Users/fabian/Zotero/storage/CJE3VI87/Matsubayashi and Corporation - Graphical User Interface Using Flutter in Embedded.pdf} } +@online{Metaraspberrypi, + title = {[Meta-Raspberrypi]}, + url = {https://lore.kernel.org/all/CAFd=ocgvmSf1zyWWw3A1=+Hr=WeD0ixdf5xLAT-TWg3hhKTqXw@mail.gmail.com/T/}, + urldate = {2024-03-21}, + file = {/Users/fabian/Zotero/storage/6N8SDSSI/T.html} +} + @online{mickeyYoctoProjectCROPSdemetaraspberrypiwobirudo1642213142, title = {Yocto Project CROPSでmeta-raspberrypiをビルド}, author = {{mickey}}, @@ -358,6 +741,34 @@ file = {/Users/fabian/Zotero/storage/KYSU3P75/111902.html} } +@software{mikerydstromRydmikeFlex_color_picker2024, + title = {Rydmike/Flex\_color\_picker}, + author = {{Mike Rydstrom}}, + date = {2024-03-13T10:02:06Z}, + origdate = {2020-10-25T19:50:10Z}, + url = {https://github.com/rydmike/flex_color_picker}, + urldate = {2024-03-18}, + abstract = {A highly customizable Flutter color picker.}, + keywords = {accent-colors,color-pickers,dart,flex-family,flex-package,flutter,flutter-package,flutter-ui,hex-color,hsv-color-wheel,material-color,package} +} + +@online{MorseCodeProject, + title = {Morse {{Code Project}}}, + url = {https://www.arduino.cc/education/morse-code-project/}, + urldate = {2024-03-18}, + file = {/Users/fabian/Zotero/storage/H2W6FFDU/morse-code-project.html} +} + +@software{mounirTajaouartReal_time_chart2024, + title = {Tajaouart/Real\_time\_chart}, + author = {family=Mounir, given=TAJAOUART, given-i=TAJAOUART}, + date = {2024-01-12T05:22:25Z}, + origdate = {2023-02-09T09:27:06Z}, + url = {https://github.com/tajaouart/real_time_chart}, + urldate = {2024-03-18}, + abstract = {A Real-Time Chart.} +} + @article{oszutowska-mazurekAssociationsKnowledgeBehaviours2021, title = {The {{Associations}} between {{Knowledge}} and {{Behaviours Related}} to {{Touch Screens}} and {{Microbiological Threats}} among {{IT Students}}’}, author = {Oszutowska-Mazurek, Dorota and Fastowicz, Jaroslaw and Mazurek, Przemyslaw}, @@ -378,6 +789,23 @@ file = {/Users/fabian/Zotero/storage/4GH3EW8M/Oszutowska-Mazurek et al_2021_The Associations between Knowledge and Behaviours Related to Touch Screens and.pdf} } +@online{OverviewBitbakeDev, + title = {Overview — {{Bitbake}} Dev Documentation}, + url = {https://docs.yoctoproject.org/bitbake/bitbake-user-manual/bitbake-user-manual-intro.html}, + urldate = {2024-03-19}, + file = {/Users/fabian/Zotero/storage/LBUUZA4Y/bitbake-user-manual-intro.html} +} + +@online{PackagesPackagesFlutter_adaptive_scaffold, + title = {Packages/Packages/Flutter\_adaptive\_scaffold at Main · Flutter/Packages}, + url = {https://github.com/flutter/packages/tree/main/packages/flutter_adaptive_scaffold}, + urldate = {2024-03-18}, + abstract = {A collection of useful packages maintained by the Flutter team - flutter/packages}, + langid = {english}, + organization = {GitHub}, + file = {/Users/fabian/Zotero/storage/TR3YT82K/flutter_adaptive_scaffold.html} +} + @article{palKeypadMobilePhones2013, title = {Keypad Mobile Phones Are Associated with a Significant Increased Risk of Microbial Contamination Compared to Touch Screen Phones}, author = {Pal, Pallavi and Roy, Ashoke and Moore, Ginny and Muzslay, Monika and Lee, Elaine and Alder, Sarah and Wilson, Peter and Powles, Tom and Wilson, Peter and Kelly, John}, @@ -397,6 +825,38 @@ file = {/Users/fabian/Zotero/storage/44QLMR8K/Pal et al_2013_Keypad mobile phones are associated with a significant increased risk of.pdf} } +@online{paulAnswerGettingCpu2013, + title = {Answer to "{{Getting}} Cpu Usage Realtime"}, + author = {Paul}, + date = {2013-05-20}, + url = {https://askubuntu.com/a/297978}, + urldate = {2024-03-22}, + organization = {Ask Ubuntu}, + file = {/Users/fabian/Zotero/storage/B8HNT3Z4/getting-cpu-usage-realtime.html} +} + +@software{PingbirdPuro2024, + title = {Pingbird/Puro}, + date = {2024-03-16T13:14:05Z}, + origdate = {2022-10-12T23:52:50Z}, + url = {https://github.com/pingbird/puro}, + urldate = {2024-03-21}, + abstract = {A powerful tool for installing and upgrading Flutter versions.}, + keywords = {dart,flutter} +} + +@online{publishedRaspberryPiCelebrates2024, + title = {Raspberry {{Pi}} Celebrates 12 Years as Sales Break 61 Million Units}, + author = {{published}, Les Pounder}, + date = {2024-02-29T09:59:47Z}, + url = {https://www.tomshardware.com/raspberry-pi/raspberry-pi-celebrates-12-years-as-sales-break-61-million-units}, + urldate = {2024-03-11}, + abstract = {That is a lot of Pi!}, + langid = {english}, + organization = {Tom's Hardware}, + file = {/Users/fabian/Zotero/storage/N4E237UB/raspberry-pi-celebrates-12-years-as-sales-break-61-million-units.html} +} + @online{Puro, title = {Puro}, url = {https://puro.dev/}, @@ -406,6 +866,17 @@ file = {/Users/fabian/Zotero/storage/GEQ4Q3EP/widget.html} } +@online{raspberrypiltd.RaspberryPiOS, + title = {Raspberry {{Pi OS}}}, + author = {{Raspberry Pi Ltd.}}, + url = {https://www.raspberrypi.com/software/}, + urldate = {2024-03-21}, + abstract = {From industries large and small, to the kitchen table tinkerer, to the classroom coder, we make computing accessible and affordable for everybody.}, + langid = {british}, + organization = {Raspberry Pi}, + file = {/Users/fabian/Zotero/storage/YZZW7CAB/software.html} +} + @online{ReactiveManifesto, title = {The {{Reactive Manifesto}}}, url = {https://www.reactivemanifesto.org/}, @@ -413,6 +884,13 @@ file = {/Users/fabian/Zotero/storage/FJSMEDYJ/www.reactivemanifesto.org.html} } +@online{ReleasesYoctoProject, + title = {Releases - {{Yocto Project}}}, + url = {https://wiki.yoctoproject.org/wiki/Releases}, + urldate = {2024-03-20}, + file = {/Users/fabian/Zotero/storage/342QAUHT/Releases.html} +} + @online{ReleaseV0Rev, title = {Release v0.0.6: {{Rev}} Alpha Branch Version to 0.0.6, Flutter 0.0.26 (\#10010) · Flutter/Flutter}, shorttitle = {Release v0.0.6}, @@ -432,6 +910,23 @@ file = {/Users/fabian/Zotero/storage/4YEIHLEH/why-gnu-linux.en.html} } +@online{Roadmap, + title = {Roadmap}, + url = {https://github.com/flutter/flutter/wiki/Roadmap}, + urldate = {2024-03-12}, + abstract = {Flutter makes it easy and fast to build beautiful apps for mobile and beyond - flutter/flutter}, + langid = {english}, + organization = {GitHub}, + file = {/Users/fabian/Zotero/storage/WY6EUHZT/Roadmap.html} +} + +@article{roscaMasterThesisIntegrating2024, + title = {Master Thesis: {{Integrating Wayland}} with {{Flutter}}}, + author = {Rosca, Alex-Manuel}, + date = {2024}, + publisher = {Université de Liège, Liège, Belgique} +} + @online{RpifirmwareAddFirmware, title = {Rpi-Firmware: Add Firmware for Zero 2w by Classabbyamp · {{Pull Request}} \#39123 · Void-Linux/Void-Packages}, url = {https://github.com/void-linux/void-packages/pull/39123}, @@ -439,6 +934,35 @@ file = {/Users/fabian/Zotero/storage/QWUKGL4U/39123.html} } +@online{SamplesMaterial_3_demoLib, + title = {Samples/Material\_3\_demo/Lib/Home.Dart at Main · Flutter/Samples}, + url = {https://github.com/flutter/samples/blob/main/material_3_demo/lib/home.dart}, + urldate = {2024-03-18}, + abstract = {A collection of Flutter examples and demos. Contribute to flutter/samples development by creating an account on GitHub.}, + langid = {english}, + organization = {GitHub}, + file = {/Users/fabian/Zotero/storage/QXJKCUYT/material_3_demo.html} +} + +@software{sauerPeziDart_periphery2023, + title = {Pezi/Dart\_periphery}, + author = {Sauer, Peter}, + date = {2023-10-17T19:10:56Z}, + origdate = {2021-02-07T05:14:50Z}, + url = {https://github.com/pezi/dart_periphery}, + urldate = {2024-03-18}, + abstract = {dart\_periphery is a Dart port of the native c-periphery library} +} + +@online{ServerpodFlutterBackend, + title = {Serverpod – {{The Flutter Backend}}}, + url = {https://serverpod.com}, + urldate = {2024-03-21}, + abstract = {Serverpod is an open-source, scalable app server, written in Dart for the Flutter community.}, + langid = {english}, + file = {/Users/fabian/Zotero/storage/QARAXQU8/serverpod.dev.html} +} + @online{SetEditor, title = {Set up an Editor}, url = {https://docs.flutter.dev/get-started/editor}, @@ -458,6 +982,20 @@ file = {/Users/fabian/Zotero/storage/NV4BSHXY/skia.org.html} } +@online{SonyFlutterembeddedlinuxEmbedded, + title = {Sony/Flutter-Embedded-Linux: {{Embedded Linux}} Embedding for {{Flutter}}}, + url = {https://github.com/sony/flutter-embedded-linux}, + urldate = {2024-03-21}, + file = {/Users/fabian/Zotero/storage/SIFJRZ5L/flutter-embedded-linux.html} +} + +@online{SparkFunLEDMatrixa, + title = {{{SparkFun LED Matrix}} - {{Serial Interface}} - {{Red}}/{{Green}}/{{Blue}} - {{COM-00760}} - {{SparkFun Electronics}}}, + url = {https://www.sparkfun.com/products/retired/760}, + urldate = {2024-03-21}, + file = {/Users/fabian/Zotero/storage/A2HYP9IJ/760.html} +} + @online{stephanievannessRacingCESExciting2024, title = {Racing {{Toward CES}} with an {{Exciting New UI}} for {{Automotive Grade Linux IVI Demo}}}, author = {{Stephanie Van Ness}}, @@ -479,6 +1017,13 @@ file = {/Users/fabian/Zotero/storage/DZE53CBK/22.html} } +@online{TagesschauAPIOpenAPIa, + title = {Tagesschau {{API}} - {{OpenAPI Documentation}}}, + url = {https://tagesschau.api.bund.dev/}, + urldate = {2024-03-18}, + file = {/Users/fabian/Zotero/storage/62FRQD5R/tagesschau.api.bund.dev.html} +} + @online{TechnicalOverviewa, title = {Technical {{Overview}}}, url = {https://www.yoctoproject.org/development/technical-overview/}, @@ -534,6 +1079,34 @@ file = {/Users/fabian/Zotero/storage/BSNRLE6L/the-road-to-dart-3-afdd580fbefa.html} } +@online{TouchDisplayKit, + title = {7″ {{Touch Display Kit}} for {{Raspberry Pi Zero}}, with {{IPS}} Display {{Expansion Board}}, 1024×600, 5-Point {{Capacitive Touch}} | {{Zero-DISP-7A}}}, + url = {https://www.waveshare.com/zero-disp-7a.htm}, + urldate = {2024-03-21}, + file = {/Users/fabian/Zotero/storage/3NP5MWED/zero-disp-7a.html} +} + +@software{ToyotaconnectedIvihomescreen2024, + title = {Toyota-Connected/Ivi-Homescreen}, + date = {2024-03-01T16:39:27Z}, + origdate = {2021-08-31T22:16:24Z}, + url = {https://github.com/toyota-connected/ivi-homescreen}, + urldate = {2024-03-12}, + abstract = {Embedded Flutter runtime targeting Embedded Linux with Wayland}, + organization = {toyota-connected}, + keywords = {embedded-linux,flutter,flutter-embedder,linux,toyota,toyota-flutter,wayland} +} + +@online{UsingCustomEmbeddersa, + title = {Using Custom Embedders with the {{Flutter CLI}}}, + url = {https://github.com/flutter/flutter/wiki/Using-custom-embedders-with-the-Flutter-CLI}, + urldate = {2024-03-21}, + abstract = {Flutter makes it easy and fast to build beautiful apps for mobile and beyond - flutter/flutter}, + langid = {english}, + organization = {GitHub}, + file = {/Users/fabian/Zotero/storage/28FNIIGU/Using-custom-embedders-with-the-Flutter-CLI.html} +} + @online{valleyWhatLinuxOverview2020, title = {What {{Is Linux}}: {{An Overview}} of the {{Linux Operating System}}}, shorttitle = {What {{Is Linux}}}, @@ -554,6 +1127,37 @@ abstract = {Annotation This short, free ebook from March 2012 describes the Dart language, libraries, and tools that help you develop structured, fast, and maintainable web apps that run in any modern browser.} } +@article{wasilewskiComparisonJavaFlutter2021, + title = {A {{Comparison}} of {{Java}}, {{Flutter}} and {{Kotlin}}/{{Native Technologies}} for {{Sensor Data-Driven Applications}}}, + author = {Wasilewski, Kamil and Zabierowski, Wojciech}, + date = {2021-01}, + journaltitle = {Sensors}, + volume = {21}, + number = {10}, + pages = {3324}, + publisher = {Multidisciplinary Digital Publishing Institute}, + issn = {1424-8220}, + doi = {10.3390/s21103324}, + url = {https://www.mdpi.com/1424-8220/21/10/3324}, + urldate = {2023-11-14}, + abstract = {As a result of the continuous progress and fast-growing popularity of mobile technologies in recent years, the demand for mobile applications has increased rapidly. One of the most important decisions that its developers have to make is the choice of technology on which their application will be based. This article is devoted to the comparison of Java, Flutter, and Kotlin/Native technologies for applications based on processing and analyzing data from sensors. The main elements of the comparison are the efficiency and resource utilization of mobile applications for Android OS implemented in each of the aforementioned technologies.}, + issue = {10}, + langid = {english}, + keywords = {mobile applications,mobile frameworks,performance measures,programming language selection}, + file = {/Users/fabian/Zotero/storage/NIZ2S6GC/Wasilewski and Zabierowski - 2021 - A Comparison of Java, Flutter and KotlinNative Te.pdf} +} + +@online{WaylandWestonGitLab2024, + title = {Wayland / Weston · {{GitLab}}}, + date = {2024-03-04}, + url = {https://gitlab.freedesktop.org/wayland/weston}, + urldate = {2024-03-21}, + abstract = {A lightweight and functional Wayland compositor}, + langid = {english}, + organization = {GitLab}, + file = {/Users/fabian/Zotero/storage/QB9C5R9S/weston.html} +} + @article{weiserComputer21stCentury1999, title = {The Computer for the 21st Century}, author = {Weiser, Mark}, @@ -571,6 +1175,16 @@ file = {/Users/fabian/Zotero/storage/8CCSE83J/Weiser - 1999 - The computer for the 21st century.pdf} } +@online{WhatEmbeddedLinux, + title = {What Is Embedded {{Linux}}? {{Part I}}}, + shorttitle = {What Is Embedded {{Linux}}?}, + url = {https://ubuntu.com/blog/what-is-embedded-linux}, + urldate = {2024-02-13}, + abstract = {“Hello everybody out there using minix – ~I’m doing a (free) operating system (just a hobby, won’t be big and professional like gnu) for 386(486) AT clones.~ […] It is NOT portable (uses 386 task switching etc), and it probably never will support anything other than AT-harddisks, as that’s all I have :-(.” [1] The […]}, + langid = {english}, + organization = {Ubuntu} +} + @online{WhatWouldYou, title = {What Would You like to See Most in Minix?}, url = {https://groups.google.com/g/comp.os.minix/c/dlNtH7RRrGA/m/SwRavCzVE7gJ}, @@ -578,6 +1192,27 @@ file = {/Users/fabian/Zotero/storage/6TCWJW3N/SwRavCzVE7gJ.html} } +@software{winklerArderaFlutterpi_tool2024, + title = {Ardera/Flutterpi\_tool}, + author = {Winkler, Hannes}, + date = {2024-03-12T04:19:44Z}, + origdate = {2023-06-26T10:15:35Z}, + url = {https://github.com/ardera/flutterpi_tool}, + urldate = {2024-03-21}, + abstract = {A tool to make developing \& distributing flutter apps for https://github.com/ardera/flutter-pi easier.} +} + +@software{winklerArderaFlutterpi2024, + title = {Ardera/Flutter-Pi}, + author = {Winkler, Hannes}, + date = {2024-03-10T23:46:18Z}, + origdate = {2019-06-05T11:10:56Z}, + url = {https://github.com/ardera/flutter-pi}, + urldate = {2024-03-12}, + abstract = {A light-weight Flutter Engine Embedder for Raspberry Pi that runs without X.}, + keywords = {digital-signage,embedded,flutter,flutter-pi,hacktoberfest,raspberry-pi} +} + @online{WorkingJSONFlutter2021, title = {Working with {{JSON}} in {{Flutter While Using}} Json\_annotations and Json\_serializable {{Modules}} in 2022 | {{John Maeda}}’s {{Blog}}}, date = {2021-06-22}, @@ -589,6 +1224,16 @@ file = {/Users/fabian/Zotero/storage/ND8L5RU6/working-with-json-in-flutter-while-using-json_annotations-and-json_serializable-modules-in-2022.html} } +@software{YoctoprojectPoky2024, + title = {Yoctoproject/Poky}, + date = {2024-03-19T13:56:11Z}, + origdate = {2021-11-25T16:47:30Z}, + url = {https://github.com/yoctoproject/poky}, + urldate = {2024-03-20}, + abstract = {Mirror of https://git.yoctoproject.org/poky/.}, + organization = {The Yocto Project} +} + @online{yusukemitsukiHelperScriptRun, title = {The Helper Script to Run the Bitbake with Using {{CROPS}}.}, author = {{Yusuke Mitsuki}}, @@ -597,6 +1242,30 @@ file = {/Users/fabian/Zotero/storage/P8BGUI2I/2b9671f062de558f3312f7378ed3c240.html} } +@online{yusukemitsukiHelperScriptRuna, + title = {The Helper Script to Run the Bitbake with Using {{CROPS}}.}, + author = {{Yusuke Mitsuki}}, + url = {https://gist.github.com/mickey-happygolucky/2b9671f062de558f3312f7378ed3c240}, + urldate = {2024-03-19}, + abstract = {The helper script to run the bitbake with using CROPS. - run\_crops.sh}, + langid = {english}, + organization = {Gist}, + file = {/Users/fabian/Zotero/storage/4F89ZRQE/2b9671f062de558f3312f7378ed3c240.html} +} + +@online{ZeroDISP7AWaveshareWiki, + title = {Zero-{{DISP-7A}} - {{Waveshare Wiki}}}, + url = {https://www.waveshare.com/wiki/Zero-DISP-7A}, + urldate = {2024-03-21}, + file = {/Users/fabian/Zotero/storage/RHZ8PKDW/Zero-DISP-7A.html} +} + +@article{zindlFlutterWindowsDesktop2021, + title = {Flutter on {{Windows Desktop}}: A Use Case Based Study}, + author = {Zindl, Stefan}, + date = {2021} +} + @online{zotero-649, url = {https://tagesschau.api.bund.dev/openapi.yaml}, urldate = {2024-03-03}, diff --git a/assets/.DS_Store b/assets/.DS_Store index d447222..db7ba8f 100644 Binary files a/assets/.DS_Store and b/assets/.DS_Store differ diff --git a/assets/mermaid/3SchichtenarchitekturderFlutterAnwendung.pdf b/assets/mermaid/3SchichtenarchitekturderFlutterAnwendung.pdf index 866d4c0..2370344 100644 Binary files a/assets/mermaid/3SchichtenarchitekturderFlutterAnwendung.pdf and b/assets/mermaid/3SchichtenarchitekturderFlutterAnwendung.pdf differ diff --git a/assets/mermaid/NewsUMLDiagram.pdf b/assets/mermaid/NewsUMLDiagram.pdf new file mode 100644 index 0000000..e6f90f1 Binary files /dev/null and b/assets/mermaid/NewsUMLDiagram.pdf differ diff --git a/assets/raspberry/.DS_Store b/assets/raspberry/.DS_Store new file mode 100644 index 0000000..ba0de1c Binary files /dev/null and b/assets/raspberry/.DS_Store differ diff --git a/assets/raspberry/hotReloadError.png b/assets/raspberry/hotReloadError.png new file mode 100644 index 0000000..6dbe76d Binary files /dev/null and b/assets/raspberry/hotReloadError.png differ diff --git a/assets/raspberry/imagerOptions.png b/assets/raspberry/imagerOptions.png new file mode 100644 index 0000000..f8f6f47 Binary files /dev/null and b/assets/raspberry/imagerOptions.png differ diff --git a/assets/raspberry/raspi.png b/assets/raspberry/raspi.png new file mode 100644 index 0000000..9574c8f Binary files /dev/null and b/assets/raspberry/raspi.png differ diff --git a/assets/raspberry/raspi2.png b/assets/raspberry/raspi2.png new file mode 100644 index 0000000..aac2373 Binary files /dev/null and b/assets/raspberry/raspi2.png differ diff --git a/assets/raspberry/raspi3.png b/assets/raspberry/raspi3.png new file mode 100644 index 0000000..41fab2f Binary files /dev/null and b/assets/raspberry/raspi3.png differ diff --git a/assets/raspberry/raspi4.png b/assets/raspberry/raspi4.png new file mode 100644 index 0000000..b53f5c4 Binary files /dev/null and b/assets/raspberry/raspi4.png differ diff --git a/assets/raspberry/reloadError.jpg b/assets/raspberry/reloadError.jpg new file mode 100644 index 0000000..1e7b73e Binary files /dev/null and b/assets/raspberry/reloadError.jpg differ diff --git a/assets/raspberry/rgbMatrix.jpg b/assets/raspberry/rgbMatrix.jpg new file mode 100644 index 0000000..38d1ab7 Binary files /dev/null and b/assets/raspberry/rgbMatrix.jpg differ diff --git a/assets/raspberry/waveshare.jpg b/assets/raspberry/waveshare.jpg new file mode 100644 index 0000000..5c34f67 Binary files /dev/null and b/assets/raspberry/waveshare.jpg differ diff --git a/assets/raspberry/wiring.pdf b/assets/raspberry/wiring.pdf new file mode 100644 index 0000000..c617008 Binary files /dev/null and b/assets/raspberry/wiring.pdf differ diff --git a/assets/raspberry/wiring.svg b/assets/raspberry/wiring.svg new file mode 100644 index 0000000..f0d50ec --- /dev/null +++ b/assets/raspberry/wiring.svg @@ -0,0 +1,1525 @@ + + + + + + + + GPIO06 + GPIO05 + + GPIO22 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + GPIO23 + + + + + + + + + GPIO19 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + GPIO27 + GPIO26 + GPIO25 + GPIO24 + GPIO21 + GPIO20 + GPIO18 + GPIO17 + GPIO16 + GPIO13 + GPIO12 + GPIO15/RX + GPIO14/RX + GPIO11/SCLK + GPIO10/MOSI + GPIO09/MISO + GPIO08/CE1 + GPIO07/CE0 + GPIO04 + GPIO03/SCL + GPIO02/SDA + ID_SD + ID_SC + GND + 3V3 + 5V + Raspberry Pi GPIO 40-Pin + + + + + + + + + + + + + + + + + LED1 + + + + + + + + + + + + + + + + + + + + + + + GND + MOSI + + + + + + + + + + + + + + + + + + + + + + + + + CS + SCLK + VCC + VCC + GND + MISO + CS + SCLK + VCC + VCC + Sparkfun RGB LED Matrix + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 5V + + diff --git a/assets/raspberry/zero.jpg b/assets/raspberry/zero.jpg new file mode 100644 index 0000000..f7e1e25 Binary files /dev/null and b/assets/raspberry/zero.jpg differ diff --git a/assets/screenshots/.DS_Store b/assets/screenshots/.DS_Store index e85ecf7..2c57c59 100644 Binary files a/assets/screenshots/.DS_Store and b/assets/screenshots/.DS_Store differ diff --git a/assets/screenshots/benchmark.png b/assets/screenshots/benchmark.png index 61e3f20..26e2764 100644 Binary files a/assets/screenshots/benchmark.png and b/assets/screenshots/benchmark.png differ diff --git a/assets/screenshots/benchmarkFlame.png b/assets/screenshots/benchmarkFlame.png index a0c7e07..c479a8c 100644 Binary files a/assets/screenshots/benchmarkFlame.png and b/assets/screenshots/benchmarkFlame.png differ diff --git a/assets/screenshots/benchmarkMap.png b/assets/screenshots/benchmarkMap.png index cf01b06..79e1d9b 100644 Binary files a/assets/screenshots/benchmarkMap.png and b/assets/screenshots/benchmarkMap.png differ diff --git a/assets/screenshots/benchmarkSprite.png b/assets/screenshots/benchmarkSprite.png index 8800df2..4bc746c 100644 Binary files a/assets/screenshots/benchmarkSprite.png and b/assets/screenshots/benchmarkSprite.png differ diff --git a/assets/screenshots/benchmarkSpriteFinished.png b/assets/screenshots/benchmarkSpriteFinished.png index ac7366e..45cbc27 100644 Binary files a/assets/screenshots/benchmarkSpriteFinished.png and b/assets/screenshots/benchmarkSpriteFinished.png differ diff --git a/assets/screenshots/benchmarkVideo.png b/assets/screenshots/benchmarkVideo.png index 9054b14..a4db5b0 100644 Binary files a/assets/screenshots/benchmarkVideo.png and b/assets/screenshots/benchmarkVideo.png differ diff --git a/assets/screenshots/benchmarkVsync.png b/assets/screenshots/benchmarkVsync.png index f306052..a6137ee 100644 Binary files a/assets/screenshots/benchmarkVsync.png and b/assets/screenshots/benchmarkVsync.png differ diff --git a/assets/screenshots/home.png b/assets/screenshots/home.png index 2e7de95..d1541b3 100644 Binary files a/assets/screenshots/home.png and b/assets/screenshots/home.png differ diff --git a/assets/screenshots/material3.png b/assets/screenshots/material3.png index 3552246..d2b29eb 100644 Binary files a/assets/screenshots/material3.png and b/assets/screenshots/material3.png differ diff --git a/assets/screenshots/matrix.png b/assets/screenshots/matrix.png index 24b0038..287ec63 100644 Binary files a/assets/screenshots/matrix.png and b/assets/screenshots/matrix.png differ diff --git a/assets/screenshots/matrixColor.png b/assets/screenshots/matrixColor.png index 28cc82d..15264db 100644 Binary files a/assets/screenshots/matrixColor.png and b/assets/screenshots/matrixColor.png differ diff --git a/assets/screenshots/morse.png b/assets/screenshots/morse.png index efa0e03..97323c2 100644 Binary files a/assets/screenshots/morse.png and b/assets/screenshots/morse.png differ diff --git a/assets/screenshots/morseInput.png b/assets/screenshots/morseInput.png index 64acfd0..82f7751 100644 Binary files a/assets/screenshots/morseInput.png and b/assets/screenshots/morseInput.png differ diff --git a/assets/screenshots/newsGrid.png b/assets/screenshots/newsGrid.png index 045f860..8047dc1 100644 Binary files a/assets/screenshots/newsGrid.png and b/assets/screenshots/newsGrid.png differ diff --git a/assets/screenshots/newsList.png b/assets/screenshots/newsList.png index 4332f03..5b9f1a8 100644 Binary files a/assets/screenshots/newsList.png and b/assets/screenshots/newsList.png differ diff --git a/assets/screenshots/settings.png b/assets/screenshots/settings.png index ec6a6e0..b77f512 100644 Binary files a/assets/screenshots/settings.png and b/assets/screenshots/settings.png differ diff --git a/assets/screenshots/settingsDark.png b/assets/screenshots/settingsDark.png index 1b521bf..1355d07 100644 Binary files a/assets/screenshots/settingsDark.png and b/assets/screenshots/settingsDark.png differ diff --git a/assets/screenshots/settingsMaterial2.png b/assets/screenshots/settingsMaterial2.png index 7e1101b..3a255ce 100644 Binary files a/assets/screenshots/settingsMaterial2.png and b/assets/screenshots/settingsMaterial2.png differ diff --git a/assets/screenshots/settingsWifiConnect.png b/assets/screenshots/settingsWifiConnect.png index 913a9bd..3d77bcf 100644 Binary files a/assets/screenshots/settingsWifiConnect.png and b/assets/screenshots/settingsWifiConnect.png differ diff --git a/assets/screenshots/settingsWifiDetails.png b/assets/screenshots/settingsWifiDetails.png index dea4e0c..adceae6 100644 Binary files a/assets/screenshots/settingsWifiDetails.png and b/assets/screenshots/settingsWifiDetails.png differ diff --git a/assets/screenshots/settingsWifiList.png b/assets/screenshots/settingsWifiList.png index 27b736e..be61cf7 100644 Binary files a/assets/screenshots/settingsWifiList.png and b/assets/screenshots/settingsWifiList.png differ diff --git a/assets/screenshots/systemInfo.png b/assets/screenshots/systemInfo.png new file mode 100644 index 0000000..0c41881 Binary files /dev/null and b/assets/screenshots/systemInfo.png differ diff --git a/assets/screenshotsShadow/.DS_Store b/assets/screenshotsShadow/.DS_Store new file mode 100644 index 0000000..e85ecf7 Binary files /dev/null and b/assets/screenshotsShadow/.DS_Store differ diff --git a/assets/screenshotsShadow/benchmark.png b/assets/screenshotsShadow/benchmark.png new file mode 100644 index 0000000..61e3f20 Binary files /dev/null and b/assets/screenshotsShadow/benchmark.png differ diff --git a/assets/screenshotsShadow/benchmarkFlame.png b/assets/screenshotsShadow/benchmarkFlame.png new file mode 100644 index 0000000..a0c7e07 Binary files /dev/null and b/assets/screenshotsShadow/benchmarkFlame.png differ diff --git a/assets/screenshots/benchmarkFlame2.png b/assets/screenshotsShadow/benchmarkFlame2.png similarity index 100% rename from assets/screenshots/benchmarkFlame2.png rename to assets/screenshotsShadow/benchmarkFlame2.png diff --git a/assets/screenshotsShadow/benchmarkMap.png b/assets/screenshotsShadow/benchmarkMap.png new file mode 100644 index 0000000..cf01b06 Binary files /dev/null and b/assets/screenshotsShadow/benchmarkMap.png differ diff --git a/assets/screenshots/benchmarkMapSwitch.png b/assets/screenshotsShadow/benchmarkMapSwitch.png similarity index 100% rename from assets/screenshots/benchmarkMapSwitch.png rename to assets/screenshotsShadow/benchmarkMapSwitch.png diff --git a/assets/screenshotsShadow/benchmarkSprite.png b/assets/screenshotsShadow/benchmarkSprite.png new file mode 100644 index 0000000..8800df2 Binary files /dev/null and b/assets/screenshotsShadow/benchmarkSprite.png differ diff --git a/assets/screenshotsShadow/benchmarkSpriteFinished.png b/assets/screenshotsShadow/benchmarkSpriteFinished.png new file mode 100644 index 0000000..ac7366e Binary files /dev/null and b/assets/screenshotsShadow/benchmarkSpriteFinished.png differ diff --git a/assets/screenshotsShadow/benchmarkVideo.png b/assets/screenshotsShadow/benchmarkVideo.png new file mode 100644 index 0000000..9054b14 Binary files /dev/null and b/assets/screenshotsShadow/benchmarkVideo.png differ diff --git a/assets/screenshotsShadow/benchmarkVsync.png b/assets/screenshotsShadow/benchmarkVsync.png new file mode 100644 index 0000000..f306052 Binary files /dev/null and b/assets/screenshotsShadow/benchmarkVsync.png differ diff --git a/assets/screenshotsShadow/home.png b/assets/screenshotsShadow/home.png new file mode 100644 index 0000000..2e7de95 Binary files /dev/null and b/assets/screenshotsShadow/home.png differ diff --git a/assets/screenshots/homeDebug.png b/assets/screenshotsShadow/homeDebug.png similarity index 100% rename from assets/screenshots/homeDebug.png rename to assets/screenshotsShadow/homeDebug.png diff --git a/assets/screenshotsShadow/material3.png b/assets/screenshotsShadow/material3.png new file mode 100644 index 0000000..3552246 Binary files /dev/null and b/assets/screenshotsShadow/material3.png differ diff --git a/assets/screenshots/material3DarkGreen.png b/assets/screenshotsShadow/material3DarkGreen.png similarity index 100% rename from assets/screenshots/material3DarkGreen.png rename to assets/screenshotsShadow/material3DarkGreen.png diff --git a/assets/screenshots/material3Dialog.png b/assets/screenshotsShadow/material3Dialog.png similarity index 100% rename from assets/screenshots/material3Dialog.png rename to assets/screenshotsShadow/material3Dialog.png diff --git a/assets/screenshots/material3DialogMaterial2.png b/assets/screenshotsShadow/material3DialogMaterial2.png similarity index 100% rename from assets/screenshots/material3DialogMaterial2.png rename to assets/screenshotsShadow/material3DialogMaterial2.png diff --git a/assets/screenshotsShadow/matrix.png b/assets/screenshotsShadow/matrix.png new file mode 100644 index 0000000..24b0038 Binary files /dev/null and b/assets/screenshotsShadow/matrix.png differ diff --git a/assets/screenshotsShadow/matrixColor.png b/assets/screenshotsShadow/matrixColor.png new file mode 100644 index 0000000..28cc82d Binary files /dev/null and b/assets/screenshotsShadow/matrixColor.png differ diff --git a/assets/screenshots/matrixColorWheel.png b/assets/screenshotsShadow/matrixColorWheel.png similarity index 100% rename from assets/screenshots/matrixColorWheel.png rename to assets/screenshotsShadow/matrixColorWheel.png diff --git a/assets/screenshots/matrixInput.png b/assets/screenshotsShadow/matrixInput.png similarity index 100% rename from assets/screenshots/matrixInput.png rename to assets/screenshotsShadow/matrixInput.png diff --git a/assets/screenshotsShadow/morse.png b/assets/screenshotsShadow/morse.png new file mode 100644 index 0000000..efa0e03 Binary files /dev/null and b/assets/screenshotsShadow/morse.png differ diff --git a/assets/screenshotsShadow/morseInput.png b/assets/screenshotsShadow/morseInput.png new file mode 100644 index 0000000..64acfd0 Binary files /dev/null and b/assets/screenshotsShadow/morseInput.png differ diff --git a/assets/screenshotsShadow/newsGrid.png b/assets/screenshotsShadow/newsGrid.png new file mode 100644 index 0000000..045f860 Binary files /dev/null and b/assets/screenshotsShadow/newsGrid.png differ diff --git a/assets/screenshotsShadow/newsList.png b/assets/screenshotsShadow/newsList.png new file mode 100644 index 0000000..4332f03 Binary files /dev/null and b/assets/screenshotsShadow/newsList.png differ diff --git a/assets/screenshotsShadow/settings.png b/assets/screenshotsShadow/settings.png new file mode 100644 index 0000000..ec6a6e0 Binary files /dev/null and b/assets/screenshotsShadow/settings.png differ diff --git a/assets/screenshotsShadow/settingsDark.png b/assets/screenshotsShadow/settingsDark.png new file mode 100644 index 0000000..1b521bf Binary files /dev/null and b/assets/screenshotsShadow/settingsDark.png differ diff --git a/assets/screenshotsShadow/settingsMaterial2.png b/assets/screenshotsShadow/settingsMaterial2.png new file mode 100644 index 0000000..7e1101b Binary files /dev/null and b/assets/screenshotsShadow/settingsMaterial2.png differ diff --git a/assets/screenshotsShadow/settingsWifiConnect.png b/assets/screenshotsShadow/settingsWifiConnect.png new file mode 100644 index 0000000..913a9bd Binary files /dev/null and b/assets/screenshotsShadow/settingsWifiConnect.png differ diff --git a/assets/screenshotsShadow/settingsWifiDetails.png b/assets/screenshotsShadow/settingsWifiDetails.png new file mode 100644 index 0000000..dea4e0c Binary files /dev/null and b/assets/screenshotsShadow/settingsWifiDetails.png differ diff --git a/assets/screenshotsShadow/settingsWifiList.png b/assets/screenshotsShadow/settingsWifiList.png new file mode 100644 index 0000000..27b736e Binary files /dev/null and b/assets/screenshotsShadow/settingsWifiList.png differ diff --git a/assets/screenshots/settingsWifiPasswordInput.png b/assets/screenshotsShadow/settingsWifiPasswordInput.png similarity index 100% rename from assets/screenshots/settingsWifiPasswordInput.png rename to assets/screenshotsShadow/settingsWifiPasswordInput.png diff --git a/assets/screenshots/systemResources.png b/assets/screenshotsShadow/systemResources.png similarity index 100% rename from assets/screenshots/systemResources.png rename to assets/screenshotsShadow/systemResources.png diff --git a/assets/skizzen/alle.pdf b/assets/skizzen/alle.pdf new file mode 100644 index 0000000..faf51a3 Binary files /dev/null and b/assets/skizzen/alle.pdf differ diff --git a/assets/toyota/.DS_Store b/assets/toyota/.DS_Store new file mode 100644 index 0000000..5319182 Binary files /dev/null and b/assets/toyota/.DS_Store differ diff --git a/assets/toyota/agl.png b/assets/toyota/agl.png new file mode 100644 index 0000000..7f31e64 Binary files /dev/null and b/assets/toyota/agl.png differ diff --git a/chapters/00_pandoc/00_pandoc.md b/chapters/00_pandoc/00_pandoc.md index b6a8359..2d263b4 100644 --- a/chapters/00_pandoc/00_pandoc.md +++ b/chapters/00_pandoc/00_pandoc.md @@ -5,7 +5,7 @@ header-includes: | \usepackage{fancyhdr} \usepackage[utf8]{inputenc} \usepackage{tikz} - \usetikzlibrary{snakes,arrows,shapes} + \usetikzlibrary{snakes,arrows,shapes,shadows,calc} \usepackage{amsmath} \usepackage{pgfplots} \usepackage{pgfplotstable} @@ -17,7 +17,7 @@ header-includes: | \usepackage{graphicx} \usepackage{xcolor,stackengine} \usepackage{colortbl} - \usepackage{tcolorbox} + \usepackage[most]{tcolorbox} \usepackage{lastpage} \usepackage{subcaption} \usepackage{tabularx} @@ -33,6 +33,7 @@ header-includes: | \usepackage{fontspec} \usepackage{dirtree} \usepackage{etoolbox} + \usepackage{textpos} \setmainfont{Times New Roman} \DefineVerbatimEnvironment{Highlighting}{Verbatim}{breaklines,commandchars=\\\{\}} \newcommand{\hideFromPandoc}[1]{#1} @@ -88,3 +89,43 @@ postbreak=\mbox{\textcolor{red}{$\hookrightarrow$}\space}, \newcommand{\mkbibnodate}{n\adddot d\adddot} \setlength{\parindent}{0em} + +\def\shadowshift{3pt,-3pt} +\def\shadowradius{6pt} + +\colorlet{innercolor}{black!60} +\colorlet{outercolor}{gray!05} + +\newcommand\drawshadow[1]{ +\begin{pgfonlayer}{shadow} +\shade[outercolor,inner color=innercolor,outer color=outercolor] ($(#1.south west)+(\shadowshift)+(\shadowradius/2,\shadowradius/2)$) circle (\shadowradius); +\shade[outercolor,inner color=innercolor,outer color=outercolor] ($(#1.north west)+(\shadowshift)+(\shadowradius/2,-\shadowradius/2)$) circle (\shadowradius); +\shade[outercolor,inner color=innercolor,outer color=outercolor] ($(#1.south east)+(\shadowshift)+(-\shadowradius/2,\shadowradius/2)$) circle (\shadowradius); +\shade[outercolor,inner color=innercolor,outer color=outercolor] ($(#1.north east)+(\shadowshift)+(-\shadowradius/2,-\shadowradius/2)$) circle (\shadowradius); +\shade[top color=innercolor,bottom color=outercolor] ($(#1.south west)+(\shadowshift)+(\shadowradius/2,-\shadowradius/2)$) rectangle ($(#1.south east)+(\shadowshift)+(-\shadowradius/2,\shadowradius/2)$); +\shade[left color=innercolor,right color=outercolor] ($(#1.south east)+(\shadowshift)+(-\shadowradius/2,\shadowradius/2)$) rectangle ($(#1.north east)+(\shadowshift)+(\shadowradius/2,-\shadowradius/2)$); +\shade[bottom color=innercolor,top color=outercolor] ($(#1.north west)+(\shadowshift)+(\shadowradius/2,-\shadowradius/2)$) rectangle ($(#1.north east)+(\shadowshift)+(-\shadowradius/2,\shadowradius/2)$); +\shade[outercolor,right color=innercolor,left color=outercolor] ($(#1.south west)+(\shadowshift)+(-\shadowradius/2,\shadowradius/2)$) rectangle ($(#1.north west)+(\shadowshift)+(\shadowradius/2,-\shadowradius/2)$); +\filldraw ($(#1.south west)+(\shadowshift)+(\shadowradius/2,\shadowradius/2)$) rectangle ($(#1.north east)+(\shadowshift)-(\shadowradius/2,\shadowradius/2)$); +\end{pgfonlayer} +} + +\pgfdeclarelayer{shadow} +\pgfsetlayers{shadow,main} + +\newsavebox\mybox +\newlength\mylen + +\newcommand\shadowimage[2][]{% +\setbox0=\hbox{\includegraphics[#1]{#2}} +\setlength\mylen{\wd0} +\ifnum\mylen<\ht0 +\setlength\mylen{\ht0} +\fi +\divide \mylen by 120 +\def\shadowshift{\mylen,-\mylen} +\def\shadowradius{\the\dimexpr\mylen+\mylen+\mylen\relax} +\begin{tikzpicture} +\node[anchor=south west,inner sep=0] (image) at (0,0) {\includegraphics[#1]{#2}}; +\drawshadow{image} +\end{tikzpicture}} diff --git a/chapters/01_titel/00_titlepage.md b/chapters/01_titel/00_titlepage.md index 4642fdd..11a0c85 100644 --- a/chapters/01_titel/00_titlepage.md +++ b/chapters/01_titel/00_titlepage.md @@ -6,24 +6,13 @@ Hochschule Rhein-Waal \\ Fakultät Kommunikation und Umwelt \\ Prof Dr.-Ing. Ido Iurgel \\ Prof Dr. Kai Essig \\ -\vspace{3cm} +\vspace{2cm} \Large \textbf{\textsc{Flutter als Entwicklungsplattform für eingebettete Linux Systeme: eine Fallstudie}} \\ -\vspace{2.0cm} +\vspace{8.0cm} \normalsize Bachelorarbeit \\ -im Studiengang \\ -Medieninformatik \\ -Zur Erlangung des akademischen Grades \\ -\vspace{2.0cm} -Bachelor of Science \\ -\vspace{2.0cm} +\vspace{7.65cm} vorgelegt von\\ Fabian Baldeau \\ -\vspace{1.5cm} -Matrikelnummer: \\ -27516 \\ -\vspace{1.5cm} -Abgabedatum: \\ -xx. xxxx 2024 \\ \vspace{2cm} \end{center} diff --git a/chapters/01_titel/00_titlepage2.md b/chapters/01_titel/00_titlepage2.md new file mode 100644 index 0000000..0200d45 --- /dev/null +++ b/chapters/01_titel/00_titlepage2.md @@ -0,0 +1,44 @@ +\pagebreak + +\thispagestyle{empty} + +\begin{titlepage} +\begin{center} +Hochschule Rhein-Waal \\ +Fakultät Kommunikation und Umwelt \\ +Prof Dr.-Ing. Ido Iurgel \\ +Prof Dr. Kai Essig \\ +\vspace{2cm} +\Large \textbf{\textsc{Flutter als Entwicklungsplattform für eingebettete Linux Systeme: eine Fallstudie}} \\ +\vspace{2.0cm} +\normalsize Bachelorarbeit \\ +im Studiengang \\ +Medieninformatik \\ +Zur Erlangung des akademischen Grades \\ +\vspace{1.5cm} +Bachelor of Science \\ +\vspace{1.5cm} +vorgelegt von\\ +Fabian Baldeau \\ +Schulstraße 84 \\ +47574 Goch \\ +\vspace{1.5cm} +Matrikelnummer: \\ +27516 \\ +\vspace{1.5cm} +Abgabedatum: \\ +22. März 2024 \\ +\vspace{2cm} +\end{center} + +\end{titlepage} + +\pagenumbering{roman} +\fancyhf{} + + + +\fancyhead[C]{} +\fancyfoot[R]{\thepage} +\renewcommand{\headrulewidth}{0pt} +\pagestyle{fancy} diff --git a/chapters/01_titel/01_abstract.md b/chapters/01_titel/01_abstract.md index 5c19f4e..18235da 100644 --- a/chapters/01_titel/01_abstract.md +++ b/chapters/01_titel/01_abstract.md @@ -1,5 +1,7 @@ \addtocounter{page}{1} +\renewcommand{\headrulewidth}{0pt} + \begin{abstract} Die Integration von Flutter's plattformübergreifenden UI-Fähigkeiten mit der Anpassungsfähigkeit von Embedded @@ -7,21 +9,19 @@ Linux verspricht die Rationalisierung der Entwicklung von Benutzeroberflächen (UIs) für eingebettete Systeme. Diese Arbeit untersucht die Eignung von Flutter in diesem Kontext durch eine Fallstudie: die Entwicklung -eines Flutter App Prototyps auf einem Raspberry +einer Demo Anwendung mit Flutter für einen Raspberry Pi mit einer angepassten eingebetteten Linux Distribution. -Leistungsmesswerte, Benutzerfreundlichkeit und der -Entwicklungsprozess werden bewertet. Die Ergebnisse -zeigen, dass Flutter, wenn es angepasst wird, +Leistungsmesswerte und der Entwicklungsprozess werden bewertet. +Die Ergebnisse zeigen, dass Flutter, wenn es angepasst wird, erfolgreich zur Erstellung von attraktiven und benutzerfreundlichen eingebetteten Schnittstellen mit wenigen Kompromissen -bei der Leistung genutzt werden kann. +bei der Leistung genutzt werden kann. \\ Die Arbeit beschäftigt sich im Wesentlichen mit der Entwicklung einer prototypischen Anwendung mit Flutter für ein eingebettetes Linux System. -Dabei wurde ein Konzept ausgearbeitet werden, dass zeigt wie Flutter in +Dabei wurde ein Konzept ausgearbeitet, dass zeigt wie Flutter in eingebetteten Linux Systemen genutzt werden kann und es wurde anhand der prototypischen Anwendung untersucht, wie gut Flutter für diesen -Verwendungszweck geeignet ist. Die Ergebnisse der Untersuchung -zeigen ein großes Potential für die Nutzung von Flutter in eingebetteten -Linux Systemen. +Verwendungszweck geeignet ist. Es wurden dabei speziell die Embedder +Flutter-Pi und Flutter-Auto genauer untersucht. \end{abstract} diff --git a/chapters/02_einleitung/00_motivation_relevanz.md b/chapters/02_einleitung/00_motivation_relevanz.md index ba2c256..de6e0bb 100644 --- a/chapters/02_einleitung/00_motivation_relevanz.md +++ b/chapters/02_einleitung/00_motivation_relevanz.md @@ -9,21 +9,23 @@ Die Entwicklung moderner und ansprechender Benutzeroberflächen (GUIs) für eingebettete Linux-Systeme ist eine Herausforderung. Herkömmliche GUI-Toolkits stoßen häufig an ihre Grenzen, wenn es um die Erfüllung der Anforderungen an Leistung, -plattformübergreifende Kompatibilität und Design geht. Flutter [@googleinc.FutterBuildAny], +plattformübergreifende Kompatibilität und Design geht. Flutter, ein quelloffenes Benutzerschnittstellen-Entwicklungs-Kit von Google, -stellt eine vielversprechende Alternative dar. Es zeichnet sich durch native Kompilierung -für hohe Performance und geringen Ressourcenverbrauch, eine flexible Architektur, +stellt eine vielversprechende Alternative dar. Es zeichnet sich durch eine native Kompilierung +für eine hohe Leistung und geringen Ressourcenverbrauch, einer flexiblen Architektur, die an verschiedene Plattformen angepasst werden kann, und seinen Fokus auf moderne -und intuitive Benutzeroberflächen aus. +und intuitive Benutzeroberflächen aus. Zudem ist Flutter durch seine BSD-Lizenz +attraktiv für sowohl kommerzielle Anwendungen als auch Hochschul- und Hobbyprojekte, +da es keine Lizenzgebühren oder Einschränkungen gibt. -## Relevanz +## Relevanz und Zielsetzung In dieser Arbeit wird der Einsatz von Flutter für die Entwicklung von GUIs für eingebettete Linux-Systeme untersucht. Die Arbeit leistet einen wichtigen Beitrag zu diesem Forschungsbereich, indem sie: - die Leistungsmerkmale von Flutter auf eingebetteter Hardware detailliert untersucht - und wertvolle Hinweise für die Auswahl des richtigen Toolkits liefert. + und wertvolle Hinweise für die Auswahl der richtigen Toolkits liefert. - den Entwicklungsprozess detailliert beschreibt und Herausforderungen sowie bewährte Praktiken bei der Verwendung von Flutter in einem eingebetteten Linux-Kontext aufzeigt. - eine reale eingebettete GUI mit Flutter implementiert und dabei die Fähigkeiten und @@ -33,19 +35,19 @@ Die Ergebnisse dieser Arbeit sind relevant für Entwickler im Bereich eingebetteter Systeme, die moderne, performante und ansprechende GUIs für Linux-basierte Geräte entwickeln möchten. -## Zielsetzung + ## Problemstellung Beantwortet werden soll die Frage, inwieweit sich Flutter für die Entwicklung von GUIs für eingebettete Linux-Systeme eignet. Dazu wird in dieser Arbeit geklärt: Wie einfach und effizient ist die Entwicklung und Wartung von GUIs mit Flutter? -Welche Auswirkungen hat Flutter auf die Performance und den Ressourcenverbrauch im +Welche Auswirkungen hat Flutter auf die Leistung und den Ressourcenverbrauch im eingebetteten Kontext? Wie hoch ist der Lernaufwand für Entwickler? Welche Community und Support-Ressourcen stehen für Flutter-Entwickler zur Verfügung? Um diese Fragen zu beantworten wird die folgende Methodik angewendet. @@ -54,19 +56,28 @@ zu beantworten wird die folgende Methodik angewendet. Um die Forschungsfrage zu beantworten, wird eine Literaturrecherche, eine experimentelle Untersuchung und eine Auswertung der Untersuchung durchgeführt. -In der Literaturrecherche werden aktuelle wissenschaftliche Quellen zu GUI-Entwicklung -für eingebettete Systeme und Flutter ausgewertet. Die experimentelle Untersuchung -umfasst die Implementierung einer realen eingebetteten GUI mit Flutter und die -Bewertung der Performance, des Ressourcenverbrauchs und der Benutzerfreundlichkeit -der GUI. Die Ergebnisse der Literaturrecherche und der experimentellen Untersuchung -werden in einem Bewertungsschema zusammengefasst und abschließend bewertet. Basierend -auf den Ergebnissen wird ein Leitfaden für die Entwicklung von GUIs für eingebettete -Linux-Systeme mit Flutter erstellt. +In der Literaturrecherche werden aktuelle Quellen zur Nutzung von Flutter außerhalb +des klassischen App-Entwicklungskontexts, insbesondere für die +Entwicklung von GUIs für eingebettete Systeme, gesucht und ausgewertet. +Die experimentelle Untersuchung umfasst die Implementierung einer +realen eingebetteten Anwendung mit Flutter und die +Bewertung der Leistung, des Ressourcenverbrauchs und der Entwicklungserfahrung. +In der Anwendung werden die Embedder "Flutter-Pi" und "Flutter-Auto" dazu +genauer untersucht, diese ermöglichen die Ausführung von Flutter im eingebetteten Linux-Kontext. +Die Ergebnisse der Untersuchung werden abschließend zusammengefasst und bewertet. +Basierend auf den Ergebnissen wird ein Leitfaden für +die Entwicklung von GUIs für eingebettete Linux-Systeme mit Flutter erstellt. ## Struktur der Arbeit -Zu ergänzen wenn Arbeit fertig ist... - -## Problematik - -Zu ergänzen falls nötig... +Die Arbeit ist in acht Kapitel unterteilt. Nach der Einleitung folgt +eine Einführung in die Grundlagen von Flutter und eingebetteten Linux-Systemen. +Danach wird die Literaturrecherche durchgeführt und die Ergebnisse +werden festgehalten. Anschließend wird die experimentelle Untersuchung, +im diesen Fall die Fallstudie mit der Flutter Anwendung im eingebetteten +Linux-Kontext, genauer erläutert und es wird erklärt, wie das Projekt geplant +wurde und die Entwicklungsumgebung aufgebaut ist. Danach wird die Implementierung der +Flutter Anwendung beschrieben und dann wird die Erstellung der +angepassten Linux Distribution mit Yocto für die Nutzung der entwickelten Flutter +Anwendung im eingebetteten Linux Bereich erklärt. Abschließend werden die Ergebnisse +der Arbeit festgehalten und es wird eine Schlussfolgerung gezogen. diff --git a/chapters/03_grundlagen/01_linux.md b/chapters/03_grundlagen/01_linux.md index 2b001fb..1e7f4f3 100644 --- a/chapters/03_grundlagen/01_linux.md +++ b/chapters/03_grundlagen/01_linux.md @@ -17,8 +17,6 @@ What constitutes "most used" gets tricky. Is it by volume of devices regardless of scale, or by developer preferences in recent projects? --> -\pagebreak - # Grundlagen ## Eingebettete Systeme @@ -59,13 +57,11 @@ Betriebssystem ausgestattet sind, als eingebettete Systeme bezeichnet. Dazu gehört das Linux Betriebssystem, welches in vielen eingebetteten Systemen zum Einsatz kommt und auch Windows ist laut Ganssle in eingebetteten Systemen anzutreffen. Als weiteres Beispiel dazu -nennt er das Handy, welches als es nur zum telefonieren genutzt wurde +nennt er das Handy, welches, als es nur zum telefonieren genutzt wurde, klar als eingebettetes System bezeichnet werden konnte, doch heutzutage ist es ein vollwertiger Computer, der auch als solcher für eine Vielzahl von anderen Funktionen genutzt werden kann. -\pagebreak - In weiterer Literatur zu eingebetteten Systemen finden sich die folgenden Definitionen: @@ -80,9 +76,9 @@ Systemen nicht eindeutig ist. Da es sowohl eine Funktion oder eine Reihe von Funktionen steuern kann, als auch speziell ein System ist, das in ein Produkt eingebettet ist. -Ein eingebettetes System ist also meistens ein Computersystem, das spezialisiert -ist auf eine bestimmte Funktion oder Aufgabe. Mittlerweile heißt das jedoch auch, -dass es sich oft um Systeme handelt, welche eigentlich vollwertige Computer sind und +Ein eingebettetes System ist also meistens ein Computersystem, welches spezialisiert +ist auf eine bestimmte Funktion oder Aufgabe. In der heutigen Zeit heißt das, +dass es sich dabei oft um Systeme handelt, welche eigentlich vollwertige Computer sind und daher viele Funktionen ausführen könnten, doch der Hersteller oder Entwickler das System auf gezielte Funktionen beschränkt. So würde ein Bankautomat mit eingebetteten Linux nur auf die speziellen Aufgaben beschränkt werden, welche ein Bankautomat zu erfüllen hat, obwohl er @@ -114,29 +110,27 @@ Blog-Beitrag, dass es wichtig wäre, GNU zu erwähnen, da es viele der Kernkomponenten des Betriebssystems zusammen mit dem Linux-Kernel bildet und dass die Bezeichnung GNU/Linux diesen wichtigen Beitrag anerkennt. Zudem würde es dabei helfen, die Idee des GNU-Projekts -und der Free Software Foundation zu verbreiten. [@richardstallmanWhyGNULinux] +und der Free Software Foundation zu verbreiten [@richardstallmanWhyGNULinux]. In der Arbeit wird die Bezeichnung "Linux" für das Betriebssystem verwendet, da es sich um die allgemein gebräuchliche Bezeichnung handelt und die Bezeichnung "GNU/Linux" in der Literatur und im -allgemeinen Sprachgebrauch nicht so verbreitet ist. Besonders im +allgemeinen Sprachgebrauch wenig verbreitet ist. Besonders im eingebetteten Bereich wird es allgemein als "Eingebettetes Linux" -bezeichnet und nicht als "Eingebettetes GNU/Linux". +bezeichnet und fast nie als "Eingebettetes GNU/Linux". Linux gehört zu den weltweit am weitesten verbreiteten Betriebssystemen und zählt zur Gruppe von "unixoide" oder unix-ähnlichen Betriebssystemen, da es Konzepte des 1969 von Bell Laboratories entwickelten Betriebssystems -Unix aufgreift. - -Nutzer von Linux verwendet oft eine sogenannte "Distribution" von Linux +Unix aufgreift. Nutzer von Linux verwendet oft eine sogenannte "Distribution" von Linux wie Ubuntu. Eine Linux-Distribution, auch als Distro bezeichnet, ist ein vollständiges Betriebssystem, das auf dem Linux-Kernel aufbaut. Der Kernel ist das Herzstück des Betriebssystems. Zusätzlich zum Kernel gibt es weitere -wichtige Bestandteile einer Distro, wie Systembibliotheken, Dienstprogramme +wichtige Bestandteile einer Distribution, wie Systembibliotheken, Dienstprogramme und Softwareanwendungen. Die Auswahl dieser wird vom Ersteller der Distro getroffen. Distros gibt es in vielen Varianten, jede mit ihren eigenen -Zielen, Zielgruppen und Softwareauswahl. Das bedeutet, dass es für viele -verschiedene Anwendungsfälle eine passende Distro gibt. [@dikkyryanpratamaWhatLinuxDistribution] +Zielen, Zielgruppen und Softwareauswahl. Das bedeutet, dass für viele +verschiedene Anwendungsfälle eine passende Linux Distro erstellt werden kann. [@dikkyryanpratamaWhatLinuxDistribution] ### Eingebettetes Linux @@ -163,10 +157,14 @@ Methoden, die vor allem auf den Prinzipien der quellbasierten Linux-Distribution Gentoo basieren. Eine quellbasierte Distribution ist eine Linux-Distribution, die aus den Quellcodes der Software zusammengestellt wird. Das bedeutet, dass die Software auf dem -Zielgerät aus den Quellcodes kompiliert wird und nicht aus -vorkompilierten Binärdateien installiert wird. Dies ermöglicht +Zielgerät aus dem Quellcode kompiliert wird und nicht +vorkompilierte Binärdateien installiert werden. Dies ermöglicht eine hohe Flexibilität und Anpassbarkeit der Distribution und Software. Yocto erweitert dieses Prinzip speziell auf eingebettete Systeme. Es ist keine fertige Distribution, sondern ein Framework, -mit dem eigene Distributionen speziell für eingebettete Systeme erstellt werden können. -[@linuxfoundationYoctoProject162024] +mit dem eigene Distributionen speziell für eingebettete Systeme erstellt werden können +[@linuxfoundationYoctoProject162024]. In der Arbeit wird das Yocto Projekt +für die Erstellung einer speziellen Linux-Distribution für +die Nutzung von Flutter auf eingebetteten Systemen verwendet. +In Kapitel \ref{yoctoChapter} wird die Erstellung einer solchen +Distribution mit dem Yocto Projekt beschrieben. diff --git a/chapters/03_grundlagen/02_flutter.md b/chapters/03_grundlagen/02_flutter.md index 0fe49ae..b213ead 100644 --- a/chapters/03_grundlagen/02_flutter.md +++ b/chapters/03_grundlagen/02_flutter.md @@ -9,7 +9,7 @@ Flutter ist ein von Google entwickeltes quelloffenes Benutzerschnittstellen-Entwicklungs-Kit, welches die effiziente Entwicklung ansprechender Benutzeroberflächen für mobile, Web- und -Desktop-Anwendungen ermöglichen soll. Es wurde +Desktop-Anwendungen ermöglichen soll [@googleinc.FutterBuildAny]. Es wurde 2017 von Google veröffentlicht und ist BSD-lizenziert [@3ClauseBSDLicense2011]. @@ -17,10 +17,11 @@ 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 (GUIs) bereitstellen, +Toolset zum Erstellen von Benutzeroberflächen bereitstellen, die nahtlos über verschiedene Plattformen hinweg funktionieren. Dieses Kapitel befasst sich mit der grundlegenden Architektur -von Flutter. +von Flutter, welche die Konzepte erklärt wie Flutter auch im +eingebetteten Bereich genutzt werden kann. ### Flutters Architektur @@ -32,8 +33,6 @@ und die Möglichkeit, Framework-Komponenten nach Bedarf zu ersetzen. [@FlutterAr Die folgende Abbildung \ref{flutterArch} zeigt die Architektur von Flutter: -\pagebreak - ```{=latex} \begin{figure}[ht] \centering @@ -68,9 +67,20 @@ Die niedrigste Ebene ist der Embedder, dessen Aufgabe es ist, die Rendering-Fläche bereitzustellen, die Eingaben zu verarbeiten und Zugriff zu Dart Anwendungs-Snapshots zu ermöglichen. [@gardeFlutterRaspberryPi2018] Die Flutter Engine hat hierzu eine C API, welche in einer einzelnen -C Header-Datei definiert ist. [@theflutterauthorsEngineShellPlatform] Diese API Punkte müssen von dem +C Header-Datei definiert ist. [@theflutterauthorsEngineShellPlatform] +Diese API Punkte müssen von dem Embedder angesprochen werden. +Der modulare Aufbau mit der Trennung der Embedder-Ebene erlaubt es, dass +jeder Entwickler einen eigenen Embedder für spezielle Verwendungszwecke +von Flutter entwickeln kann. Es müssen nur diese API Punkte angesprochen +werden und die komplette Flutter Engine mit allen plattformunabhängigen +Funktionen könnte sofort genutzt werden. Im Laufe der Arbeit werden die Embedder +"Flutter-Pi" und "Flutter-Auto" vorgestellt, welche in dem Projekt der +Fallstudie genutzt und weiter untersucht worden sind. Beides sind spezielle Embedder, welche +außerhalb von Google und für die Nutzung von Flutter mit eingebetteten Linux +Systemen entwickelt worden sind. + -### Deklarative Programmierung in Flutter + diff --git a/chapters/03_grundlagen/03_dart.md b/chapters/03_grundlagen/03_dart.md index 43e5eff..02f1fc5 100644 --- a/chapters/03_grundlagen/03_dart.md +++ b/chapters/03_grundlagen/03_dart.md @@ -1,53 +1,48 @@ -\linebreak - ## Dart Dart ist die offizielle Programmiersprache für die Entwicklung von Flutter Apps und wurde in dieser Arbeit für die Entwicklung der Demo Anwendung verwendet. Dart ist eine objektorientierte, klassenbasierte -Programmiersprache mit Garbage Collection und C-ähnlicher Syntax hat. +Programmiersprache mit Garbage Collection und C-ähnlicher Syntax. Die Sprache wurde von Lars Bak und Kasper Lund entworfen und bei Google entwickelt. 2011 wurde sie veröffentlicht [@larsbakDartLanguageStructured2011]. + Damals wurde Dart speziell für die Entwicklung von Webanwendungen -entwickelt. Es sollte besonders dabei helfen komplexe und hochleistungsfähige -Webanwendungen zu entwickeln. Google sah es aber explizit nicht als -Ersatz für JavaScript, sondern als Ergänzung. Im Buch "What is Dart?" von -den Google Entwicklern Kathy Walrath und Seth Ladd betonten diese 2012, -dass Google nicht erwarten würde, dass Dart JavaScript ersetze, sondern -dass Dart und JavaScript nebeneinander existieren könnten und Dart auch von -JavaScript profitieren kann, da Dart Code in JavaScript transpiliert -werden kann [@walrathkathyWhatDart2012, 1-2]. Hingegen der Erwartungen von Google -wurde Dart jedoch nicht so populär wie erwartet. Google nutzte Dart -zwar intern für einige Projekte, doch die Programmiersprache blieb -weitesgehend unbekannt und wurde nur von wenigen Entwicklern genutzt. -Genaue Gründe sind hierfür nicht bekannt, doch ein Grund könnte sein, +entwickelt. Google sah es als eine Problemlösung +für die Entwicklung von komplexen Webanwendungen, da JavaScript +nicht die Leistung und Struktur bieten konnte, die Google für die +Entwicklung von hochleistungsfähigen Webanwendungen erwartete. Es +sollte als Ergänzung zu JavaScript für diese Anwendungsfälle genutzt werden [@walrathkathyWhatDart2012, 1-2]. +Hingegen der Erwartungen von Google +wurde Dart jedoch nicht so populär wie erwartet und die Programmiersprache blieb +weitestgehend unbekannt. Genaue Gründe sind hierfür nicht bekannt, doch ein Grund könnte sein, dass die JavaScript Community zu diesem Zeitpunkt schon sehr groß war und viele Entwickler nicht bereit waren, auf eine -komplett neue Programmiersprache umzusteigen. Zudem wurde 2012 TypeScript von -Microsoft veröffentlicht, welches ähnliche Probleme wie Dart löst, jedoch -besser in die bestehende JavaScript-Community integriert werden konnte, da es JavaScript -als Sprache erweitert und Entwickler so nicht eine komplett neue -Sprache lernen mussten. +komplett neue Programmiersprache umzusteigen. Erst durch die Einführung von Flutter wurde Dart populärer, da es die -offizielle Programmiersprache für die Entwicklung von Flutter Apps ist. -Flutter wurde intern bei Google anfangs mit JavaScript entwickelt, doch -dies führte zu Problemen, da JavaScript nicht die Performance und -Stabilität bieten konnte, die Google für die Entwicklung von mobilen -Apps erwartete. Daher wurde JavaScript durch Dart ersetzt und das -Flutter und Dart Team haben eng zusammengearbeitet, um Dart so zu -verbessern, dass es die Anforderungen von Flutter am besten erfüllt. +offizielle Programmiersprache für die Entwicklung von Flutter Apps wurde. Heute ist die neueste Version von Dart die Version 3.3.1. Dart ist -eine der wenigen Programmiersprachen, die seit ihrer Veröffentlichung +eine der Programmiersprachen, die seit ihrer Veröffentlichung sehr starke Veränderungen durchgemacht hat. So wurde zu der JIT (Just in Time) Kompilierung, die Dart ursprünglich verwendete, eine AOT (Ahead of -Time) Kompilierung hinzugefügt, die es ermöglicht, Dart Code in nativen Code -zu kompilieren. Dies war notwendig, um die Performance von Dart zu +Time) Kompilierung hinzugefügt, die es ermöglicht, Dart in nativen Code +zu kompilieren [@googleinc.FAQ]. Dies war notwendig, um die Leistung von Dart zu verbessern und um Dart für die Entwicklung von mobilen Apps zu -optimieren, zusätzlich auch weil Apple keine JIT Kompilierung auf iOS -Geräten erlaubt. Mit Version 3 wurde eine komplette Sound Null Safety +optimieren. Mit Version 3 wurde eine komplette Sound Null Safety zu Dart hinzugefügt. Sound Null Safety bedeutet, dass der komplette Code und auch Code aus allen Bibliotheken vollständig null-sicher sein muss. -Mit Version 3 ist dies auch eine Voraussetzung in Dart, nicht null-sicherer -Code kann nicht mehr kompiliert werden [@googleinc.UnsoundNullSafety]. +Mit Version 3 ist dies eine Voraussetzung in Dart, nicht null-sicherer +Code kann nicht mehr kompiliert werden [@googleinc.UnsoundNullSafety] +und es wird einfacher Bugs zu verhindern, die durch Nullpointer +Exceptions entstehen können. + +Mit Projekten wie Serverpod [@ServerpodFlutterBackend] und Dart Frog [@DartFrog] +macht Dart auch ein Comeback im Backend-Bereich. Hiermit wird es möglich, sowohl +die Benutzeroberfläche mit Flutter und Dart zu programmieren und auch +nötigen Servercode dazu mit Dart zu schreiben. Dies ermöglicht es, dass Entwickler +effizienter in nur einer Programmiersprache entwickeln können um Projekte +schneller umzusetzen. + +# Stand der Technik diff --git a/chapters/04_stand_der_technik/01_related_work.md b/chapters/04_stand_der_technik/01_related_work.md new file mode 100644 index 0000000..4d08658 --- /dev/null +++ b/chapters/04_stand_der_technik/01_related_work.md @@ -0,0 +1,180 @@ +In diesem Kapitel wird der Stand der Technik in Bezug auf die +Themenbereiche der Arbeit erläutert. + +## Verwandte Arbeiten + +Alex Rosca hat in seiner Masterarbeit (2024) die Integration von Wayland mit Flutter untersucht. +Dazu hat er einen Wayland-Compositor entwickelt, welcher Flutter zum rendern der UI-Elemente +und third-party Fenstern verwendet. Das besondere an dieser Arbeit ist, dass jede Anwendung +ein Widget ist, welches Teil von Flutter ist. Dies ermöglicht es, dass third-party Anwendungen +innerhalb von Flutter angezeigt werden können und in dem Desktop-System dadurch nicht nur +Flutter Anwendungen gestartet werden können. Der entwickelte Compositor ist dabei speziell +für ein Smartphone- oder Tablet-Interface entwickelt worden bei dem immer nur ein Fenster zur selben Zeit im Vordergrund +angezeigt wird. Die Arbeit zeigt, dass es möglich ist, Flutter so tief in ein Wayland-System zu integrieren +und damit ein vollständiges Desktop-System für Linux Smartphones und Tablets zu entwickeln [@roscaMasterThesisIntegrating2024]. + +Stefan Zindl hat in seiner Bachelorarbeit (2021) die Nutzung von Flutter für Windows Desktop Anwendungen untersucht. +Er hat dazu eine Gallerie Anwendung jeweils in Flutter und WPF (Windows Presentation Foundation) mit .NET 5 +geschrieben und die Leistung und den Ressourcenverbrauch der beiden Anwendungen verglichen. +Dabei kam er zu dem Ergebnis, dass die Flutter Anwendung mit 55\% weniger Code geschrieben werden konnte und +die Anwendung 70 mal schneller starten konnte. Flutter hat dabei die meiste Zeit einen geringeren +RAM Verbrauch gehabt, jedoch ist die CPU Auslastung im Vergleich zu WPF höher gewesen. Er merkt +jedoch an, dass zum Zeitpunkt seiner Arbeit die Windows Unterstützung von Flutter noch in einem Beta Status war [@zindlFlutterWindowsDesktop2021]. + + + +Wasilewski und Zabierowski führten eine Studie durch, in der sie Java, Flutter und +Kotlin/Native Technologien für sensordatengesteuerte Anwendungen miteinander verglichen. +Sie kamen zu dem Ergebnis, dass überall dort, wo es nicht darum ging Ressourcen zu sparen +und die Ausführungszeit im Vordergrund steht, Flutter die natürliche Wahl ist. In einigen +Tests hat sich Flutter auch hinsichtlich der CPU-Auslastung besser erwiesen, doch +besonders in Anwendungen, welche stark von Datenbankoperationen abhängen, ist laut den Autoren Flutter +nicht die beste Wahl. Als interessantes Ergebnis ist hier zu erwähnen, dass die Studie +zeigt wie Flutter mit der Dart Programmiersprache in vielen Fällen gut mit dem sehr +bekannten Java leistungstechnisch mithalten kann [@wasilewskiComparisonJavaFlutter2021]. + +## Nutzung von Flutter für eingebettetes Linux in der Industrie + +### Toyota + +Im Jahr 2021 wurde veröffentlicht, dass der japanische Autohersteller Toyota in +Zukunft Flutter für die Entwicklung +von Infotainmentsystemen in ihren Fahrzeugen nutzen wird. Daniel Hall, der Chief +Engineer von Toyota Motor Nordamerika, begründete die Entscheidung damit, dass +Flutter es Toyota ermöglicht, eine Benutzererfahrung zu schaffen, die sich anfühlt, +wie Kunden es von ihren Smartphones gewohnt sind und erwarten. Obwohl Toyota keine +Apps auf mehreren Plattformen veröffentlichen will, schätzt man die Vorteile wie +die schnellere Entwicklung durch den Hot-Reload durch den man die Iterationszyklen +verkürzen und sich schneller und öfter Feedback von Kunden einholen kann. Darüber +hinaus bietet die Flutter Rendering Engine laut Toyota eine gute Leistung in +Umgebungen mit begrenzten Ressourcen und Funktionen wie die AOT-Kompilierung +gewährleisten zudem die Konsistenz, die Toyota in fahrzeug-internen +Technologien anstrebt [@googleplayapps&gamesteamSeamlessMultiplatformApp2021]. + +Auf der CES 2024 konnte das von Toyota entwickelte System am Messestand von +Automotive Grade Linux (AGL) begutachtet werden. Von einer Berichterstattung +von Stephanie Van Ness ist zu entnehmen, dass für die Messe eine Demo App +für einen 8GB Raspberry Pi und einem 7 Zoll Touchscreen im Portrait-Modus +entwickelt wurde (siehe Abbildung \ref{toyota1}). Als Embedder wird standardmäßig Flutter-Auto +genutzt, welcher von Toyota entwickelt wurde. Als alternative Option gibt es einen Embedder von Sony. +Es wird auch erwähnt, dass die Demo App Riverpod als State +Management Lösung nutzt [@stephanievannessRacingCESExciting2024]. + +```{=latex} +\begin{figure}[h] +\centering +\caption{AGL Demo App von der CES 2024} +\label{toyota1} +\includegraphics[width=8cm]{./assets/toyota/agl.png} + + +\caption*{ +``` + +Quelle: @stephanievannessRacingCESExciting2024 + +```{=latex} +} +\end{figure} +``` + +#### Flutter-Auto + +Flutter-Auto ist ein Wayland Embedder für Flutter, welcher von Toyota entwickelt wird. +Der Embedder kann nur innerhalb einer Wayland Umgebung genutzt werden und hingegen +des Namens kann er auch für andere eingebettete Systeme jeglicher Art genutzt werden. +Besondere Merkmale des Embedders sind die Unterstützung von mehreren Bildschirmen, Integration Tests +und Accessibility Features. +Auf GitHub wird das Projekt noch "ivi-homescreen" genannt +und es ist unter der Apache 2.0 Lizenz veröffentlicht worden +[@ToyotaconnectedIvihomescreen2024]. + +### Sony + +Neben Toyota arbeitet auch Sony als ein weiteres großes und bekanntes japanisches +Unternehmen an einer Lösung für die Nutzung von Flutter in eingebetteten Systemen. +Der Embedder von Sony basiert auf Flutter-Tizen, ein Projekt von Samsung, +welches es ermöglicht Flutter Anwendungen für Tizen OS zu entwickeln [@FluttertizenFluttertizen2024]. +Tizen OS ist ein Linux basiertes Betriebssystem welches Samsung für verschiedene +eingebettete Systeme und Smart-TVs nutzt. + +Hidenori Matsubayashi, der Hauptentwickler des Sony Embedders, hat auf der +Embedded Linux Conference Europe 2020 eine Präsentation gehalten, in der er +erklärt, weshalb Sony in seinem Research und Development Bereich die Nutzung +von Flutter für eingebettete Systeme erforscht. Er erwähnt, dass meistens +Qt oder web basierte Technologien für die Entwicklung von eingebetteten +Systemen genutzt werden (siehe Abbildung \ref{sony1}). Web basierte Technologien in +diesem Kontext bedeuten: HTML und JavaScript in einer Webview wie die des +Chromium Browsers. Matsubayashi erklärt, dass Webviews zwar einfach zu +entwickeln sind, jedoch nicht die beste Leistung bieten und es oft erschwert +ist Hardware direkt anzusprechen. Zu Qt erwähnt er nur die hohe Popularität +und die duale Lizenzierung. + +```{=latex} +\begin{figure}[h] +\centering +\caption{Präsentations-Slide zu Beispielen für grafische Oberflächen von Sony} +\label{sony1} +\includegraphics[width=15cm]{./assets/pdf/sony1.pdf} + + +\caption*{ +``` + +Quelle: @matsubayashiGraphicalUserInterface2020 + +```{=latex} +} +\end{figure} +``` + +Als Hauptgründe für die Nutzung von Flutter in eingebetteten Systemen nennt +Matsubayashi die einfache Entwicklung, die Cross-Plattform Unterstützung, +die native Kompilierung mit guter Leistung und die Popularität von Flutter +als Open Source Software. Außerdem erwähnt er, dass Flutter wenige +Abhängigkeiten hat und nur OpenGL/EGL benötigt, es ein Custom Embedder API-Layer gibt +welches es ermöglicht, Flutter auf spezifischen Plattformen auszuführen und +dass Flutter unter der freizügigen BSD-Lizenz lizenziert ist (siehe Abbildung \ref{sony2}). + +```{=latex} +\begin{figure}[h] +\caption{Präsentations-Slide von Sony zu den Gründen für die Nutzung von Flutter in eingebetteten Systemen} +\label{sony2} +\begin{center} +\includegraphics[width=15cm]{./assets/pdf/sony2.pdf} +\end{center} + +\caption*{ +``` + +Quelle: @matsubayashiGraphicalUserInterface2020 + +```{=latex} +} +\end{figure} +``` + + + +### Flutter-Pi + +Flutter-Pi ist ein Projekt welches in einer Zusammenarbeit von Texas Instruments +und KDAB enstanden ist [@krunalbhargavFAQAM625Flutter2023]. Der Hauptentwickler, +Hannes Winkler, hat das Projekt auf GitHub unter der MIT Lizenz veröffentlicht [@winklerArderaFlutterpi2024]. +Die besondere Eigenschaft von Flutter-Pi ist, dass es ohne Wayland oder X11 +funktioniert und somit auch auf Systemen ohne Display Server genutzt werden kann. +Es nutzt dafür den DRM (Direct Rendering Manager) und KMS (Kernel Mode Setting). +Flutter-Pi kommt auch mit einem eigenen Build Tool _flutterpi_tool_ und der Entwickler +hat ein spezielles _flutterpi_gstreamer_video_player_ Plugin entwickelt, welches +es ermöglicht, Videos mit GStreamer in der Flutter Anwendung abzuspielen. Gstreamer +ist ein Open Source Multimedia Framework mit dem hardwarebeschleunigt Videos +dekodiert und gerendert werden können [@GStreamerOpenSource]. + +\pagebreak diff --git a/chapters/04_stand_der_technik/02_beitrag.md b/chapters/04_stand_der_technik/02_beitrag.md new file mode 100644 index 0000000..9133e95 --- /dev/null +++ b/chapters/04_stand_der_technik/02_beitrag.md @@ -0,0 +1,32 @@ +## Beitrag + +Da Flutter noch eine recht neue Technologie ist, gibt es +noch viele Bereiche die dazu genauer erforscht werden können. +Die verwandten Arbeiten und Projekte von Toyota, +Sony und KDAB zeigen, dass es bereits viel Interesse +zur Nutzung von Flutter außerhalb des klassischen +App-Entwicklungs-Bereichs gibt. Die Zuversichtlichkeit +von Toyota Flutter in den Infotainmentsystemen von Autos zu nutzen, +stellt besonders die Frage auf, wie gut Flutter tatsächlich +für eingebettete Linux Systeme geeignet ist. Diese +Arbeit beschäftigt sich deswegen damit als Fallstudie +eine Demo Anwendung für den Raspberry Pi 4 zu entwickeln und +den kompletten Entwicklungsprozess dabei durchzugehen. +Die Demo Anwendung wurde +als Kochbuch konzipiert, welches als Grundlage für +weitere Projekte mit Flutter auf eingebetteten Linux +Systemen dienen kann. In der Arbeit konnte gezeigt +werden, dass Flutter durchaus gut für eingebettete +Linux Systeme geeignet ist. Dank der modernen Entwicklungsprinzipien +von Flutter, ist es möglich, in relativ kurzer Zeit selbst komplexe +Anwendungen mit Flutter für eingebettete Linux Systeme +zu entwickeln. + +Es wurden die Embedder "Flutter-Pi" und "Flutter-Auto" genauer +untersucht. Das Projekt von Sony wurde nicht betrachtet, weil +Sony für seinen Embedder eine veränderte Version der Flutter-Engine benutzt +und somit nicht mit der offiziellen Flutter-Engine kompatibel ist [@SonyFlutterembeddedlinuxEmbedded]. +Es ist also deutlich weniger produktionsbereit und auch aus Gründen der +Zeitoptimierung wurden nur die anderen beiden Embedder betrachtet. + +# Fallstudie diff --git a/chapters/04_stand_der_technik/03_flutter_feature_completeness_linux.md b/chapters/04_stand_der_technik/03_flutter_feature_completeness_linux.md new file mode 100644 index 0000000..ff8e879 --- /dev/null +++ b/chapters/04_stand_der_technik/03_flutter_feature_completeness_linux.md @@ -0,0 +1,3 @@ + diff --git a/chapters/04_stand_der_technik/04_01_stand_technik.md b/chapters/04_stand_der_technik/04_01_stand_technik.md deleted file mode 100644 index 55b6d4b..0000000 --- a/chapters/04_stand_der_technik/04_01_stand_technik.md +++ /dev/null @@ -1,51 +0,0 @@ -\pagebreak - -# Stand der Technik - -In diesem Kapitel wird der Stand der Technik in Bezug auf die -Themenbereiche der Arbeit erläutert. -Dabei wird auf die Themenbereiche der -Arbeit eingegangen und die aktuelle Situation -in der Forschung und Entwicklung dargestellt. - -## Toyota - -- CES 2024 Automotive Linux mit Flutter [@stephanievannessRacingCESExciting2024] - -## Sony - -```{=latex} -\begin{figure}[h] -\centering -\caption{Sony} -\includegraphics[width=15cm]{./assets/pdf/sony1.pdf} -\label{sony1} - - -\caption*{ -``` - -Quelle: @matsubayashiGraphicalUserInterface2020 - -```{=latex} -} -\end{figure} -``` - -\begin{figure}[h] -\caption{This is a figure.} -\begin{center} -\includegraphics[width=15cm]{./assets/pdf/sony2.pdf} -\end{center} -\end{figure} - - - -## Texas Instruments - -\pagebreak diff --git a/chapters/04_stand_der_technik/04_02_entwicklung_umsetzung.md b/chapters/04_stand_der_technik/04_02_entwicklung_umsetzung.md deleted file mode 100644 index e69de29..0000000 diff --git a/chapters/05_analyse_und_design/00_anforderungen.md b/chapters/05_analyse_und_design/00_anforderungen.md deleted file mode 100644 index 6d4d3cf..0000000 --- a/chapters/05_analyse_und_design/00_anforderungen.md +++ /dev/null @@ -1,35 +0,0 @@ -\pagebreak - -# Analyse und Design - -## Hardware - -### Hardware für die Demo Anwendung - -- Raspberry Pi 4 -- Touchscreen 15 Zoll (1920x1080) -- Raspberry Pi 0 2W -- Touchscreen 7 Zoll (1024x600) -- RGB Matrix -- Led - -### Build Hardware - -- AMD 6800U mit 16GB RAM, Linux - -\pagebreak - -## Anforderungen - -\Begin{multicols}{2} - -\begin{figure}[H] -\caption{Skizzen der Anwendung} -\centering -{\includegraphics[width=4in]{./assets/skizzen/alle.png}} -\label{fig:screeplot} -\end{figure} - -lorem ipsum - -\End{multicols} diff --git a/chapters/05_analyse_und_design/01_architektur.md b/chapters/05_analyse_und_design/01_architektur.md deleted file mode 100644 index 0832172..0000000 --- a/chapters/05_analyse_und_design/01_architektur.md +++ /dev/null @@ -1,124 +0,0 @@ -\pagebreak - -## Architektur - -### Analyse - -### Design - - - -Flutter gibt Entwicklern eine große Freiheit bei der -Auswahl der Architektur für ihre Anwendungen. Es gibt -keine festen Regeln oder Vorschriften zur Ordnerstruktur -oder anderen Konventionen bezüglich der Architektur. - -Als Architektur für die Anwendung -wurde eine drei-schichtige Architektur gewählt. -Eine Schichtenarchitektur ist nicht nur Teil der -Architektur von Flutter selbst, sondern ist auch -eine bewährte Architektur für die Entwicklung von -Flutter Anwendungen. Die drei Haupt-Schichten -der Architektur der Anwendung sind die Präsentationsschicht, -die Geschäftsschicht und die Datenzugriffsschicht. -In der Präsentationsschicht werden die Benutzeroberfläche -und die Benutzerinteraktionen implementiert. Die Geschäftsschicht -ist für die Implementierung der Geschäftslogik verantwortlich. -Die Datenzugriffsschicht ist für den Zugriff auf die Datenbank -und die Datenverarbeitung verantwortlich. Die drei Schichten - -Die drei Schichten sind die **Präsentationsschicht**, -die **Geschäftslogikschicht** und die **Datenzugriffsschicht**. -Die Präsentationsschicht ist für die Darstellung der -Benutzeroberfläche verantwortlich. Die Anwendungsschicht ist für die Geschäftslogik verantwortlich. Die Datenzugriffsschicht ist für den Zugriff auf die Datenbank verantwortlich. Die drei Schichten sind voneinander unabhängig und kommunizieren über definierte Schnittstellen. Die drei Schichten sind in der Abbildung 3.1 dargestellt. - -- three-layer architecture [@hajianFlutterEngineering2024, 219] - -\begin{figure}[ht] -\centering -\caption{3-Schichtenarchitektur der Flutter Anwendung} -\end{figure} - -```{=latex} -\begin{center} -``` - -```{.mermaid loc=assets/mermaid caption="3-Schichtenarchitektur der Flutter Anwendung" #fig:reference-name} -flowchart TD - A[Präsentationsschicht] <--> B - B[Geschäftslogikschicht] <--> C - C[Datenzugriffsschicht] -``` - -```{=latex} -\end{center} -``` - -\begin{figure}[ht] -\centering - - -\caption*{Quelle: eigene Darstellung} -\end{figure} - -## Ordner Konventionen - -### Layers-First Ordnerstruktur - -- schneller und einfacher Start -- einfach zu verstehen -- sehr unübersichtlich, sobald die Anwendung wächst -- zusammengehörende Dateien für ein Feature über das Projekt verteilt - -### Feature-First Ordnerstruktur - -- Dateien, die zu einem Feature gehören, sind an einem - Ort zu finden -- Layers in Feature -- Einfache Kommunikation -- Verständnis, was ein Feature ist, muss im Team trainiert werden - -\begin{figure}[ht] -\centering -\begin{minipage}{7cm} -\dirtree{% -.1 lib/. -.2 common. -.2 constants. -.2 features. -.3 benchmark. -.3 home. -.3 settings. -.3 system\char`\_resources. -.2 app.dart. -.2 main.dart. -} -\end{minipage} -\caption{Example caption} - - -\caption*{Quelle: hier Quellangabe} -\end{figure} - -eine Klasse pro File, Ausnahmen eng zusammengehörige Klassen -wie zB. Stateful Widgets - -state Architektur - -android architecture - -### freezed package - -generiert den notwendigen Code einer -unveränderlichen Klasse: - -- Konstruktor -- toString, equlas, hashCode Methode -- copyWith Methode -- JSON Serialisierung - -### State Management - -Für das State Management wurde Riverpod gewählt. diff --git a/chapters/05_fallstudie/00_planung.md b/chapters/05_fallstudie/00_planung.md new file mode 100644 index 0000000..a50076f --- /dev/null +++ b/chapters/05_fallstudie/00_planung.md @@ -0,0 +1,63 @@ +In diesem Kapitel wird die Fallstudie vorgestellt, welche +in dieser Bachelorarbeit umgesetzt wurde. + +## Anforderungen + +Um die Nutzbarkeit von Flutter für die Entwicklung von +Anwendungen für eingebettete Linux Systeme zu testen, +sollte eine Demo Anwendung entwickelt werden, welche +möglichst alle wichtigen Aspekte solcher Anwendungen +abdeckt. Zur Planung wurden kurz vor der Einreichung +der Arbeit einfache Skizzen der Anwendung +entwickelt, welche in Abbildung \ref{fig:skizzen} zu sehen sind, +jede Skizze stellt eine Seite der Anwendung dar. Die +Seiten sind nummeriert und werden im folgenden genauer +erläutert. + +\begin{figure}[H] +\caption{Skizzen der Anwendung} +\label{fig:skizzen} +\centering +\includegraphics[width=5in]{./assets/skizzen/alle.pdf} +\end{figure} + +Die Startseite der Anwendung (1) ist freigelassen und soll nur +ein Platzhalter sein von welchem aus die verschiedenen +Funktionalitäten der Anwendung mithilfe eines Menüs +erreicht werden können. In der Skizze wird dieses Menü durch +den Hamburger Button oben links in den Fenstern dargestellt, +dieser soll beim Klicken ein Auswahlmenü für die anderen Fenster öffnen. + +Die folgende Tabelle \ref{skizzenTabelle} erläutert die Funktionen, die in den +anderen Fenstern der Anwendung getestet werden sollen: + +\begin{table}[H] +\caption{Funktionen der Skizzen} +\label{skizzenTabelle} +\resizebox{\textwidth}{!}{% +\begin{tabular}{|l|l|} +\hline +Fenster mit Nummerierung & Funktionen, die hier getestet werden sollen \\ \hline +Material 3 Widgets (2) & \begin{tabular}[c]{@{}l@{}}Anzeige von einer Auswahl von verschiedenen Material Widgets\\ zur Demonstration\end{tabular} \\ \hline +Open API Tagesschau (3) & \begin{tabular}[c]{@{}l@{}}Anzeige einer endlos scrollbaren Liste, welche Nachrichten von\\ der öffentlich zugänglichen Tagesschau API anzeigt.\end{tabular} \\ \hline +Video-Playback (4) & Test des Video-Playbacks. \\ \hline +Morse Code (5) & \begin{tabular}[c]{@{}l@{}}In einer Texteingabe soll ein Text geschrieben werden können, \\ welcher dann auf einer am Raspberry Pi angeschlossen Led\\ als Morsecode abgespielt werden soll. Die Ansteuerung der Led\\ \\ Dient als Demo für GPIO Geräte, in diesem Fall ein Output.\\ Zusätzlich soll auch eine Möglichkeit zur Eingabe des Textes\\ implementiert werden, da Flutter im eingebetteten Linux Bereich\\ nicht automatisch eine Tastatur bereitstellt.\end{tabular} \\ \hline +Pixel Matrix (6) & \begin{tabular}[c]{@{}l@{}}Auf einer 8x8 Pixel Matrix soll mit einer Farbauswahl durch\\ den Touch Input gemalt werden können. Das gemalte Bild soll\\ gleichzeitig auf eine RGB Matrix live übertragen werden,\\ welche über den SPI (Serial Peripheral Interface) angesprochen\\ wird.\end{tabular} \\ \hline +System Informationen (7) & \begin{tabular}[c]{@{}l@{}}Zwei Graphen sollen jeweils die CPU-Auslast und den\\ RAM-Verbrauch des Raspberry Pis anzeigen. Die Auslesung\\ dieser Daten soll über Linux Terminal Befehle geschehen \\ und dies demonstrieren.\end{tabular} \\ \hline +Einstellungen (8) & \begin{tabular}[c]{@{}l@{}}In den Einstellungen soll ein Nachtmodus aktiviert und\\ deaktiviert werden können, welcher das Design der kompletten\\ Anwendung live entsprechend verändert. Es soll auch das\\ WLAN des Raspberry Pis angesteuert werden können. Man soll\\ den Netzwerk Manager von Linux ansprechen und eine neue\\ Verbindung einrichten können.\end{tabular} \\ \hline +OpenStreetMap (9) & \begin{tabular}[c]{@{}l@{}}Eine Weltkarte soll live als Raster-Karte geladen werden als\\ interaktiven Leistungstest mit Multi-Touch-Gesten. Man soll rein- und\\ rauszoomen können.\end{tabular} \\ \hline +Videospiel (10) & \begin{tabular}[c]{@{}l@{}}Als Leistungstest soll ein Open Source Demo Spiel angezeigt \\ werden welches in Flutter implementiert wurde und die\\ Leistung der Render Engine von Flutter auf dem Gerät austestet. \\ Dieses soll nicht selber implementiert werden, \\ sondern es soll eines der Beispiele von Google genutzt werden.\end{tabular} \\ \hline +\end{tabular}% +} +\end{table} + +In der Implementierung der Anwendung wurden manche Inhalte +der Seiten leicht abgeändert. Die größte Änderung ist die Untertrennung +mehrerer Seiten auf eine "Benchmark" Seite in der sowohl das Videospiel, +die OpenStreetMap und auch der Video-Player getestet werden können. Zusätzlich +wurde ein VSync Test und ein weiterer Spiel-Benchmark hinzugefügt. Die +fertige Anwendung ähnelt dem Plan jedoch noch stark und alle fertigen +Seiten mit ihren implementierten Funktionen werden im Kapitel \ref{features} +genauer erläutert. + +## Verwendete Komponenten diff --git a/chapters/05_fallstudie/01_hardware.md b/chapters/05_fallstudie/01_hardware.md new file mode 100644 index 0000000..5e01e60 --- /dev/null +++ b/chapters/05_fallstudie/01_hardware.md @@ -0,0 +1,177 @@ +### Raspberry Pi 4 + +Für das Projekt wurde ein Raspberry Pi 4 verwendet, +ein Einplatinencomputer, der von der Raspberry Pi Foundation +in Zusammenarbeit mit Broadcom entwickelt wurde. +Der Raspberry Pi wurde für das Projekt ausgewählt, da +der er weltweit der bekannteste Einplatinencomputer +ist und eine große Community hat. Die Leistungsmerkmale aller +verschiedenen Modelle des Raspberry Pi sind daher +online gut dokumentiert und Leser dieser Arbeit +können leicht daran ausmachen, welche alternativen +Einplatinencomputer mit ähnlichen Leistungsmerkmalen +verwendet werden können für ein ähnliches Ergebnis oder +welche Einplatinencomputer schneller oder langsamer +sind. + +Der Pi 4 wurde anstelle des neueren Pi 5 verwendet, +weil der Pi 5 zum Zeitpunkt der Arbeit noch zu neu ist und +es daher nicht viele Vergleichswerte gibt. In Abbildung +\ref{raspberry1} ist ein Überblick über die für das Projekt +relevante Hardware des Raspberry Pi 4 zu sehen. Dazu gehören +der System-on-a-Chip (SoC) und der Arbeitsspeicher für +die Leistungsmerkmale für den Leistungstest mit Flutter +und die Multimediafähigkeiten für den Test zum Abspielen +von Videos. + +\begin{figure}[H] +\caption{Überblick über die Hardware des Raspberry Pi 4} +\label{raspberry1} +\begin{center} +\begin{tcolorbox}[width=15cm] + +\begin{tabular}{lll} +System-on-a-Chip (Ein-Chip-System) & Broadcom BCM2711, \\ +& 4-Kern Cortex-A72 (ARM v8) 64-bit SoC \\ +& @ 1.8GHz \\ +Arbeitsspeicher & 4 GB LPDDR4-3200 SDRAM \\ +Multimedia & H.265 (4kp60 decode), \\ +& H.264 (1080p60 decode, 1080p30 encode) \\ +& OpenGL ES 3.1, Vulkan 1.0 \\ +\end{tabular} + +\end{tcolorbox} +\end{center} +\end{figure} + +### 15.6 Zoll WaveShare Display + +Als Display wurde ein 15.6 Zoll IPS(QLED) Touchscreen Monitor +von der Firma WaveShare verwendet. WaveShare hat sich auf die +Herstellung von Hardware für eingebettete Systeme spezialisiert +und die Treiber für den Touchscreen sind im Linux-Kernel +enthalten und müssen nicht manuell installiert werden. [@156inchQLED] +In Abbildung \ref{waveShare} ist zu sehen, wie der Raspberry Pi 4 +mit dem Display verbunden ist. Dieser Monitor dient als Anzeige +für die Flutter Anwendung und wird über dem Touchscreen bedient. + +```{=latex} +\begin{figure}[H] +\centering +\caption{WaveShare 15.6 Zoll IPS(QLED) Monitor mit Raspberry Pi 4} +\label{waveShare} +\includegraphics[width=10cm]{./assets/raspberry/waveshare.jpg} + + +\caption*{ +``` + +Quelle: @156inchQLED + +```{=latex} +} +\end{figure} +``` + +### Sparkfun RGB Led Matrix + +Die Sparkfun RGB Led Matrix ist ein 8x8 LED-Panel, das +über ein SPI-Interface mit dem Raspberry Pi verbunden +wird. Die im Projekt genutzte Matrix wird mittlerweile +nicht mehr hergestellt, was aber kein Problem darstellt, +da andere SPI-LED-Panels von vielen anderen Herstellern +ähnlich mit einem SPI-Interface angesprochen werden. Mit +nur leichten Anpassungen im Code für unter anderem eine andere +Auflösung des Panels sollten auch andere LED-Panels +problemlos wie in dem Projekt genutzt werden können. In +dem Projekt kommt es nur darauf an zu zeigen, +wie das SPI-Interface des Raspberry Pis genutzt werden +kann mit Flutter. + +```{=latex} +\begin{figure}[H] +\centering +\caption{Sparkfun RGB Led Matrix} +\label{waveShare} +\includegraphics[width=10cm]{./assets/raspberry/rgbMatrix.jpg} + + +\caption*{ +``` + +Quelle: @SparkFunLEDMatrixa + +```{=latex} +} +\end{figure} +``` + +### Schaltplan des Projekts + +In Abbildung \ref{schaltplan} ist der Schaltplan des Projekts zu sehen. +Für den Morsecode-Übersetzer wird eine handelsübliche rote LED +verwendet. Mehr Hardware wird nicht benötigt als in dem Schaltplan +dargestellt. + +\begin{figure}[H] +\centering +\caption{Schaltplan des Raspberry Pi 4 mit der Led und Sparkfun RGB Led Matrix} +\label{schaltplan} +\includegraphics[width=10cm]{./assets/raspberry/wiring.pdf} +\end{figure} + +### Zusätzliches Testgerät + +Als zusätzliches Testgerät wurde ein Raspberry Pi 0 2W verwendet +mit dem Zero-DISP-7A Display von Waveshare, welches ein 7 Zoll +Touchscreen Display mit einer Auflösung von 1024x600 Pixeln ist +[@ZeroDISP7AWaveshareWiki]. Der Pi 0 2W wird direkt an dem +Display angeschlossen und dieses Testgerät gilt als Referenz +für einen Leistungstest mit der selben Flutter-Anwendung +an einem leistungsschwächeren und kleineren eingebetteten System. + +Dieses zusätzliche Testgerät wurde nur am Ende des Projekts mit +der erstellten Linux Distribution getestet, welche dazu angepasst +wurde auch den Pi 0 2W zu unterstützen. In Kapitel \ref{yoctoChapter} wird +weiter darauf eingegangen. In Abbildung \ref{raspberry2} ist +ein Überblick über die für das Projekt relevante Hardware des +Raspberry Pi 0 2W zu sehen und in Abbildung \ref{waveShare} +ist zu sehen, wie der Raspberry Pi 0 2W mit dem Display verbunden +ist. + +\begin{figure}[H] +\caption{Überblick über die Hardware des Raspberry Pi 0 2W} +\label{raspberry2} +\begin{center} +\begin{tcolorbox}[width=15cm] + +\begin{tabular}{lll} +System-on-a-Chip (Ein-Chip-System) & Broadcom BCM2710A1, \\ +& 4-Kern Cortex-A53 (ARM v8) 64-bit SoC \\ +& @ 1GHz \\ +Arbeitsspeicher & 512 MB LPDDR2 \\ +Multimedia & H.264 (1080p30 decode, 1080p30 encode) \\ +& OpenGL ES 1.1, 2.0 \\ +\end{tabular} + +\end{tcolorbox} +\end{center} +\end{figure} + +```{=latex} +\begin{figure}[H] +\centering +\caption{Raspberry Pi 0 2W mit Zero-DISP-7A Display von Waveshare} +\label{zero} +\includegraphics[width=14cm]{./assets/raspberry/zero.jpg} + + +\caption*{ +``` + +Quelle: @TouchDisplayKit + +```{=latex} +} +\end{figure} +``` diff --git a/chapters/05_fallstudie/02_architektur.md b/chapters/05_fallstudie/02_architektur.md new file mode 100644 index 0000000..865e5cb --- /dev/null +++ b/chapters/05_fallstudie/02_architektur.md @@ -0,0 +1,140 @@ +## Architektur + + + +Flutter gibt Entwicklern eine große Freiheit bei der +Auswahl der Architektur für ihre Anwendungen. Es gibt +keine festen Regeln oder Vorschriften zur Ordnerstruktur +oder anderen Konventionen bezüglich der Architektur. +Als Architektur für die Demo Anwendung der Fallstudie +wurde eine drei-schichtige Architektur gewählt. +Eine Schichtenarchitektur ist nicht nur Teil der +Architektur von Flutter selbst, sondern ist auch +eine bewährte Architektur für die Entwicklung von +Flutter Anwendungen, sowie auch generell in der Software Entwicklung. +Die drei Schichten der Architektur sind die Präsentationsschicht, +die Geschäftsschicht und die Datenzugriffsschicht. +In der Präsentationsschicht wird die Benutzeroberfläche +mit den Flutter Widgets erstellt. Die Geschäftsschicht +ist für die Implementierung der Geschäftslogik verantwortlich und +die Datenzugriffsschicht für den Zugriff auf die Datenbank +und die Datenverarbeitung [@hajianFlutterEngineering2024, 219]. +Die drei Schichten sind voneinander unabhängig und kommunizieren nur +jeweils mit der nächstliegenden Schicht wie in Abbildung \ref{schichten} dargestellt. + +\begin{figure}[ht] +\centering +\caption{3-Schichtenarchitektur der Flutter Anwendung} +\label{schichten} +\end{figure} + +```{=latex} +\begin{center} +``` + +```{.mermaid loc=assets/mermaid caption="3-Schichtenarchitektur der Flutter Anwendung" #fig:reference-name} +flowchart TD + A[Präsentationsschicht] <--> B + B[Geschäftslogikschicht] <--> C + C[Datenzugriffsschicht] +``` + +```{=latex} +\end{center} +``` + +\begin{figure}[ht] +\centering +\end{figure} + + + +## Ordner Konventionen + +Für die 3-Schichtenarchitektur wurde eine +Feature-First Ordnerstruktur gewählt. Die Ordnerstruktur +der fertigen Anwendung ist in Abbildung \ref{ordnerstruktur} +dargestellt. + +\begin{figure}[ht] +\caption{Die Ordnerstruktur der Flutter eLinux Anwendung} +\label{ordnerstruktur} +\centering +\begin{minipage}{7cm} +\dirtree{% +.1 lib/. +.2 common. +.2 constants. +.2 features. +.3 benchmark. +.3 home. +.3 material\char`\_demo. +.3 matrix\char`\_rgb. +.3 news\char`\_api. +.3 settings. +.3 system\char`\_resources. +.2 app.dart. +.2 main.dart. +} +\end{minipage} +\end{figure} + +Im Hauptverzeichnis der Anwendung befinden sich die Ordner `common`, +`constants`, `features` und die Dateien `app.dart` und `main.dart`. +Der Einstiegspunkt der Anwendung ist die `main.dart` Datei, diese +wird von Dart aufgerufen und startet die `MaterialApp` welche in +der `app.dart` Datei definiert ist. Die `common` und `constants` +Ordner enthalten allgemeine Klassen und Konstanten, die in der +gesamten Anwendung verwendet werden. Der `features` Ordner +enthält die einzelnen Features der Anwendung als Unterordner. +Jedes Feature ist hierbei eines der verschiedenen Fenster, +welches die Demo App besitzt und welche zuvor in den Anforderungen +beschrieben worden sind. Innerhalb jedes Features wird +die 3-Schichtenarchitektur umgesetzt mit den Ordnern `presentation`, +`business` und `data`. Nicht alle Features benötigen dabei alle Schichten, +je nach Komplexität des Features. + +Diese Struktur ermöglicht es, dass jedes Fenster der Demo Anwendung +modular und unabhängig von den anderen Fenstern entwickelt wurde +und der Code für ein Feature an einem Ort zu finden ist. Dadurch +wird die Wartbarkeit und Erweiterbarkeit der Anwendung verbessert +und der Code ist leichter zu verstehen. +Für die Demo App ist dies besonders wichtig, da die Anwendung als +Einstiegspunkt so später umstrukturiert werden kann für andere +Anwendungen, die auf der Demo App aufbauen. + + + + diff --git a/chapters/05_fallstudie/03_entwicklungsumgebung.md b/chapters/05_fallstudie/03_entwicklungsumgebung.md new file mode 100644 index 0000000..d553786 --- /dev/null +++ b/chapters/05_fallstudie/03_entwicklungsumgebung.md @@ -0,0 +1,452 @@ +## Entwicklungsumgebung + +In diesem Kapitel wird die Entwicklungsumgebung +für die Implementierung der Fallstudie beschrieben. +Hierbei wird erklärt wie das Flutter Projekt +aufgesetzt wurde und wie man es zur Entwicklung +mit eingebetteten Linux Systemen wie dem Raspberry Pi +konfiguriert. + +In der Entwicklungsumgebung wird davon ausgegangen, dass +entweder ein Linux oder macOS System genutzt wird, weil +Windows zu diesem Zeitpunkt nicht unterstützt wird (genauer +erläutert in Kapitel \ref{raspberrySetup}). In +Windows sollten die Schritte mit WSL (Windows Subsystem +for Linux) nachvollzogen werden. WSL erlaubt es eine +vollwertige Linux Distribution in Windows zu nutzen [@InstallWSL2023]. +Die Nutzung von WSL wurde jedoch nicht getestet, das Projekt +wurde nur mit Linux und macOS durchgeführt. Es ist also +möglich, dass es zu Probleme bei der Nutzung von Windows kommen kann. + +### Visual Studio Code + +Für die Implementierung wurde die +plattformübergreifende Open-Source-Entwicklungsumgebung +Visual Studio Code (VS Code) von Microsoft verwendet. +VS Code ist eine sehr beliebte Entwicklungsumgebung +für die Entwicklung von Webanwendungen, mobilen +Anwendungen und Desktopanwendungen. Die Entwicklungsumgebung +bietet eine Vielzahl von Erweiterungen, die die +Entwicklung von Anwendungen in verschiedenen +Programmiersprachen und Frameworks unterstützen. + +#### Genutzte Erweiterungen + +In dem Reiter "Erweiterungen" (Strg + Shift + X in Windows/Linux, Command + Shift + X in macOS) +in VS Code wurden die folgenden Erweiterungen installiert: + +- dart-code.dart-code +- dart-code.flutter +- circlecodesolution.css-flutter-color +- djbkwon.flutter-dependency-docs +- pkief.material-icon-theme +- alejandro-fa.vscode-theme-dartpad + +Dazu gehören die offiziellen Erweiterungen für Flutter und Dart +von Google (dart-code.dart-code und dart-code.flutter), ein Plugin +für die Anzeige von Farben in Editor bei Dart Code (circlecodesolution.css-flutter-color), +ein Plugin für die Anzeige der Links zu den Dokumentationen der +Abhängigkeiten in der pubspec.yaml Datei (djbkwon.flutter-dependency-docs) +und zwei Plugins für die Anpassung des Themes von VS Code (pkief.material-icon-theme, alejandro-fa.vscode-theme-dartpad). +Bei der Icon Theme "Material Icon Theme" empfiehlt es sich den Befehl "Material Icons: Change Folder Theme" auszuführen und "None" auszuwählen, +damit die Ordnerstruktur des Projektes besser dargestellt wird. Das Theme "DartPad Candy" ist zusätzlich auch +zu empfehlen, da es die Farben des Editors zu denen vom DartPad anpasst. DartPad +ist ein Online-Editor für Flutter und Dart, welcher von Google entwickelt wurde [@DartPad]. +Das Farbdesign ist dadurch angenehmer als das Standarddesign von VS Code +für die Entwicklung von Flutter Anwendungen, da es speziell für die Dart +Programmiersprache angepasst ist. + +Mit Windows die Erweiterung "ms-vscode-remote.remote-wsl" installiert werden, +mit der das WSL System in VS Code integriert wird. Danach sollte man +zu diesem WSL System wechseln. + +### Flutter Versionsverwaltung + +Das Versionsmanagement von Flutter ist standardmäßig +sehr einfach gehalten. Es gibt nur eine globale +Installation von Flutter, die manuell auf dem System +installiert wird. Diese globale Installation +arbeitet mit Git und nutzt verschiedene Branches +für die verschiedenen Versionen von Flutter, +diese Branches nennt Google Channels. Die +Channels sind _stable_, _beta_ und _master_. +Die _stable_ Version ist immer die aktuellste +stabile Version von Flutter, diese wird für die +Produktion und für die meisten Entwickler empfohlen. +Die _beta_ Version ist die neueste stabile Version +von Flutter, welche neue Features beinhalten kann und +nicht für die Produktion empfohlen wird. Diese Version +wird später zur nächsten _stable_ Version höhergestuft +und wird von Google jedoch auch bereits extensiv getestet +und sollte sehr stabil sein. Die _master_ Version ist die neueste +Entwicklungsversion von Flutter, diese Version ist +nicht stabil und wird nicht für die Produktion +empfohlen. Diese Version beinhaltet alle neuesten +Commits welche von Entwicklern in das Flutter +Repository gepusht wurden [@googleinc.UpgradingFlutter]. + +Hierbei gibt es jedoch einige Probleme, die +durch die globale Installation von Flutter +entstehen. Die globale Installation von Flutter +ist nicht für die Arbeit mit verschiedenen +Projekten und verschiedenen Versionen von Flutter +ausgelegt. Es gibt keine Möglichkeit, verschiedene +Versionen von Flutter zu installieren und zu +verwalten. Außerdem gibt es keine einfache Möglichkeit, +eine bestimmte Version von Flutter zu installieren, +es wird immer die neueste _stable_, _beta_ oder +_master_ Version installiert. So wurde in der +Entwicklung der Anwendung von der Fallstudie Flutter Version 3.19.2 +verwendet, welche jedoch zu einem späteren Zeitpunkt +nicht mehr aktuell ist. + +Zur Lösung dieser Probleme wurde in dem Projekt +Puro verwendet. Puro ist ein in Dart geschriebenes +CLI (Command Line Interface, dt. Kommandozeile) Tool, welches es ermöglicht, +verschiedene Versionen von Flutter zu installieren +und zu verwalten. Dazu bietet Puro eine Integration +mit den Entwicklungsumgebungen VS Code und IntelliJ. +Puro ist Open-Source und auf GitHub verfügbar [@PingbirdPuro2024]. +Im folgenden wird erklärt wie Puro genutzt wird um Flutter +zu installieren und wie es im Projekt konfiguriert wird. + +#### Puro Installation + +Unter MacOS und Linux kann Puro mit dem folgenden +CLI-Befehl installiert werden: + +```bash +curl -o- https://puro.dev/install.sh | PURO_VERSION="1.4.5" bash +``` + +Puro unterstützt hierbei unter Linux und Windows zur Zeit +der Arbeit nur die AMD64 Architektur (Intel und AMD Prozessoren). +Unter macOS wird neben AMD64 auch die ARM64 Architektur (Apple Silicon Prozessoren) +unterstützt. + +#### Installation von Flutter mit Puro + +Puro arbeitet mit Umgebungen (Environments) um die verschiedenen +Versionen von Flutter zu verwalten. +In der Anwendung der Fallstudie wurde die Umgebung +auf "_bachelor_elinux_" gesetzt, diese Umgebung +muss folgendermaßen erstellt werden: + +```{.bash .number-lines caption="Erstellung der Puro Umgebung" captionpos=t label=CreateBachelor} +puro create bachelor_elinux 3.19.2 +``` + +Nachdem die Umgebung erstellt wurde, kann diese +mit dem Befehl im Pfad des Projekts genutzt werden: + +```{.bash .number-lines caption="Nutzung der Puro Umgebung im Pfad" captionpos=t label=UseBachelor} +puro use bachelor_elinux +``` + +Puro erstellt dann eine _.puro.json_ Datei +und passende Einstellungen in _.vscode/settings.json_ +in dem Pfad des Projektes. Dadurch nutzt VS Code +automatisch die richtige Version von Flutter +wenn das Flutter Projekt gestartet wird. + + + +### Einrichtung des Raspberry Pis als Entwicklungsplattform {#raspberrySetup} + +In diesem Kapitel wird die Einrichtung des Raspberry Pi +als Entwicklungsplattform für die Implementierung der Flutter Anwendung +beschrieben. + +#### Raspberry Pi Imager + +Mit dem Programm _Raspberry Pi Imager_ kann das offizielle +und auf Debian basierte Betriebssystem _Raspberry Pi OS_ +auf eine SD-Karte geschrieben werden [@raspberrypiltd.RaspberryPiOS]. In dem Programm +kann man dazu unter "Advanced Options" den SSH Zugriff +aktivieren und den öffentlichen SSH Schlüssel hinzufügen. +Die Informationen der Benutzeroberfläche machen es hier nicht +ganz klar, aber damit ist gemeint, dass der Schlüssel des +Gerätes von dem aus der Imager genutzt wird, in dem +Raspberry Pi OS vorkonfiguriert wird. Es wird also erwartet, +dass das Gerät, von dem aus der Imager genutzt wird, auch +zum Zugriff auf den Pi per SSH genutzt wird. Diese Option +sorgt dafür, dass man sich von dem PC, auf dem der Imager genutzt +wurde, ohne Passwort-Eingabe per SSH mit dem Pi verbinden kann. + +\begin{figure}[H] +\caption{Ausgewählte Optionen im Raspberry Pi Imager} +\label{newsList} +\centering +{\shadowimage[width=7cm]{./assets/raspberry/imagerOptions.png}} +\end{figure} + +Im Imager muss zusätzlich auch die Version vom Raspberry Pi OS +mit Desktop ausgewählt werden. Es wird empfohlen diese Version +zu nutzen, weil hier sicher ist, dass alle Grafikkarten und Eingabegeräte Treiber +und Bibliotheken wie Schriftarten installiert sind. Diese werden +für die Flutter Anwendung benötigt. + +#### Deaktivierung des Desktops + +Der Desktop von Raspberry Pi OS ist nicht notwendig und +muss in dem "raspi-config" Kommandozeilen-Programm deaktiviert werden: + +```{.bash .number-lines caption="Starten von raspi-config" captionpos=t label=raspiConfig} +sudo raspi-config +``` + +In Raspi-Config muss dann unter "System Options" und "Boot / Auto Login" +die Option "Console" ausgewählt werden und der Raspberry muss neugestartet werden. +Dies ist notwendig da Flutter-Pi ohne Desktop-Server genutzt werden muss. + + + +#### Installation Flutter-Pi + +Danach kann Flutter-Pi nach der offiziellen Anleitung +aus der README Datei des Projekts auf GitHub installiert +werden [@winklerArderaFlutterpi2024]. Im Folgenden werden die +notwendigen Befehle dazu gelistet: + +```{.bash .number-lines caption="Installation von Flutter-Pi" captionpos=t label=FlutterPiInstallation} +# Installation aller Abhängigkeiten +sudo apt install cmake libgl1-mesa-dev libgles2-mesa-dev libegl1-mesa-dev libdrm-dev libgbm-dev ttf-mscorefonts-installer fontconfig libsystemd-dev libinput-dev libudev-dev libxkbcommon-dev +sudo apt install libgstreamer1.0-dev libgstreamer-plugins-base1.0-dev libgstreamer-plugins-bad1.0-dev gstreamer1.0-plugins-base gstreamer1.0-plugins-good gstreamer1.0-plugins-ugly gstreamer1.0-plugins-bad gstreamer1.0-libav gstreamer1.0-alsa +# Aktualisierung der Schriftarten +sudo fc-cache +# Installation von Flutter-Pi +git clone https://github.com/ardera/flutter-pi +cd flutter-pi +mkdir build && cd build +cmake .. +make -j`nproc` +sudo make install +``` + +Flutter-Pi kommt mit einem eigenen Build-Tool, welches +genutzt werden muss um die Flutter Anwendungen für Flutter-Pi +zu kompilieren. Dieses Tool kann mit dem folgenden Befehl +installiert werden: + +```{.bash .number-lines caption="Installation von flutterpi_tool" captionpos=t label=FlutterPiTool} +puro flutter pub global activate flutterpi_tool +``` + +Das Build-Tool von Flutter-Pi funktioniert momentan nur auf Linux und +macOS Systemen. + +#### Hinzufügen des Raspberry Pis als Custom Device + +Zuletzt muss der Raspberry Pi als "Custom Device" (dt. Angepasste Geräte) zu +der Flutter Konfiguration auf dem PC hinzugefügt werden, +auf dem vorher der Imager genutzt wurde und VS Code und Puro +installiert wurden. In der GitHub Wiki von Flutter wird +erklärt wie man "Custom Embedder" als "Custom Devices" zur +lokalen Flutter Installation hinzufügen kann [@UsingCustomEmbeddersa]. +Die Informationen sind jedoch sehr spärlich und vieles musste +durch Ausprobieren herausgefunden werden. + +Zuerst müssen die Custom Devices aktiviert werden: + +```{.shell .number-lines caption="Installation von Flutter-Pi" captionpos=t label=customDevicesEnable} +puro flutter config --enable-custom-devices +``` + +Durch die Ausführung des Befehls wird die Datei _~/.config/flutter/custom_devices.json_ erstellt +und für die lokale Flutter Installation wurde aktiviert, dass Custom Devices aus dieser +Datei ausgelesen werden können. + +In der Datei _custom_devices.json_ wird dann der Raspberry Pi +hinzugefügt werden. Da die Dokumentationen dazu sehr spärlich +sind, folgt hier die komplette Konfiguration für den Raspberry Pi 4 +welche auch in dem Projekt verwendet wurde: + +```{.json .number-lines caption="Beispiel Konfiguration von custom_devices.json" captionpos=t label=customDevicesJson} +{ + "custom-devices": [ + { + "id": "rpi", + "label": "Raspberry Pi 4", + "sdkNameAndVersion": "rpi4", + "platform": null, + "enabled": true, + "ping": ["ping", "-c", "1", "raspberrypi"], + "pingSuccessRegex": null, + "postBuild": ["flutterpi_tool", "build", "--arch=arm64", "--cpu=pi4"], + "install": [ + "scp", + "-r", + "-o", + "BatchMode=no", + "${localPath}", + "pi@raspberrypi:/tmp/${appName}" + ], + "uninstall": [ + "ssh", + "-o", + "BatchMode=no", + "pi@raspberrypi", + "rm -rf \"/tmp/${appName}\"" + ], + "runDebug": [ + "ssh", + "-o", + "BatchMode=no", + "pi@raspberrypi", + "flutter-pi /tmp/${appName}" + ], + "stopApp": [ + "ssh", + "-o", + "BatchMode=no", + "pi@raspberrypi", + "pkill", + "flutter-pi" + ], + "forwardPort": [ + "ssh", + "-o", + "BatchMode=no", + "-o", + "ExitOnForwardFailure=yes", + "-L", + "127.0.0.1:${hostPort}:127.0.0.1:${devicePort}", + "pi@raspberrypi", + "echo 'Port forwarding success'; read" + ], + "forwardPortSuccessRegex": "Port forwarding success", + } + ] +} +``` + +Im Quellcode von Flutter konnte zu der _custom-devices.json_ Datei die +Schema-Datei _custom-devices.schema.json_ gefunden werden, welche +als Referenz und Hilfe für die Konfiguration genutzt wurde. + +In der Beispielkonfiguration von Auflistung \ref{customDevicesJson} wird +der Raspberry Pi 4 als Custom Device mit dem Label "Raspberry Pi 4" +und der ID "rpi" hinzugefügt. Der "ping" Befehl wird genutzt um zu +überprüfen ob das Gerät erreichbar ist und wenn es ist, wird es +bei der Ausführung von Flutter mit dem definierten Label +und der ID in der Geräteliste angezeigt. + +Im "postBuild" Befehl wird das +Flutter-Pi Build-Tool mit den Parametern "--arch=arm64" und "--cpu=pi4" +genutzt um die Anwendung für den Pi 4 und der ARM64 Architektur zu +kompilieren. Aus der Dokumentation des Flutter-Pi Build-Tools kann entnommen werden, +dass es beim "cpu" Parameter nur die Optionen "pi3" und "pi4" gibt, welche +spezielle Optimierungen für den Raspberry Pi 3 und 4 beinhalten. Für alle anderen +Geräte kann der Parameter weg gelassen werden und nur der passende "arch" Parameter +zur Prozessorarchitektur ist wichtig mit den Optionen "arm", "arm64" und "x64". +Es werden alle Geräte mit diesen Prozessortypen unterstützt [@winklerArderaFlutterpi_tool2024]. + +Mit dem "install" Befehl wird die Anwendung +mit dem _scp_ Kommandozeilen-Befehl (OpenSSH Secure Copy) +vom lokalen PC auf den Raspberry Pi kopiert. Dank des SSH Schlüssels, +welcher im Imager hinzugefügt wurde, ist keine Passwort-Eingabe +notwendig wie auch bei allen anderen folgenden SSH Befehlen aus +der Konfiguration. Als Ordner wird ein temporärer Ordner auf dem +Pi genutzt, in Linux wird dazu das _/tmp_ Verzeichnis genutzt. +Alle Dateien darin werden nach einem Neustart des Geräts gelöscht. + +Der "uninstall" Befehl löscht dann die Anwendung wieder manuell vom Raspberry Pi +und der "runDebug" Befehl startet die Anwendung auf dem Pi mit dem _flutter-pi_ +Befehl. Der "stopApp" Befehl stoppt die Anwendung auf dem Pi manuell +mit dem _pkill_ Befehl. +Im "forwardPort" Befehl wird ein Port auf dem Pi auf einen Port auf dem +lokalen PC weitergeleitet, dies ist notwendig um die Anwendung auf dem +Pi zu debuggen. + +Nach der Konfiguration kann der Raspberry Pi beim Ausführen der +Flutter Anwendung ausgewählt werden und die Anwendung kann auf dem +Raspberry Pi gestartet werden, während der Code auf dem lokalen PC +in VS Code geschrieben und debuggt werden kann. Dabei funktioniert +auch das Hot-Reload Feature von Flutter. + +Im Test funktioniert diese Konfiguration gut, es gibt aber ein paar Probleme. +Beim Beenden der Anwendung wird der _stopApp_ Befehl nicht ausgeführt, der +Befehl in der Konfiguration kann aber manuell ausgeführt werden und funktioniert +dann. Zusätzlich funktioniert der Hot-Reload nicht beim ersten Mal und es +wird der Fehler aus Abbildung angezeigt. Es kann dann ein Hot-Restart +durchgeführt werden und danach funktioniert auch das Hot-Reload Feature +wie erwartet. Ein paar Mal kam es aber auch vor, dass die App dabei abstürzte. +Es funktioniert also gut, ist aber noch instabil. + +\begin{figure}[H] +\caption{Die Fehlernachricht beim ersten Hot-Reload} +\label{newsList} +\centering +{\includegraphics[width=10cm]{./assets/raspberry/hotReloadError.png}} +\end{figure} + +Der Fehler tritt wahrscheinlich auf, weil die Anwendung nicht den Einstiegspunkt +in der "_MaterialApp_" richtig neuladen kann. Es ist aber unklar wieso +es nur beim ersten Mal passiert und die Fehlernachricht hilft in diesem +Fall nicht weiter. diff --git a/chapters/06_fallstudie/00_entwicklungsumgebung.md b/chapters/06_fallstudie/00_entwicklungsumgebung.md deleted file mode 100644 index 4f0bcf7..0000000 --- a/chapters/06_fallstudie/00_entwicklungsumgebung.md +++ /dev/null @@ -1,144 +0,0 @@ -# Implementierung - -Im folgenden Kapitel wird die Implementierung des Projektes -beschrieben. Dabei wird auf die Entwicklungsumgebung, die -Verwendung von Flutter und Dart, die Einrichtung des Raspberry -Pi und die Implementierung der Software eingegangen. - -## Entwicklungsumgebung - -### Visual Studio Code - -Für die Implementierung der Fallstudie wurde die -plattformübergreifende Open-Source-Entwicklungsumgebung -Visual Studio Code (VS Code) von Microsoft verwendet. -VS Code ist eine sehr beliebte Entwicklungsumgebung -für die Entwicklung von Webanwendungen, mobilen -Anwendungen und Desktopanwendungen. Die Entwicklungsumgebung -bietet eine Vielzahl von Erweiterungen, die die -Entwicklung von Anwendungen in verschiedenen -Programmiersprachen und Frameworks unterstützen. - -### Flutter Versionsverwaltung - -Das Versionsmanagement von Flutter ist standardmäßig -sehr einfach gehalten. Es gibt nur eine globale -Installation von Flutter, die manuell auf dem System -installiert wird. Diese globale Installation -arbeitet mit Git und nutzt verschiedene Branches -für die verschiedenen Versionen von Flutter, -diese Branches nennt Google Channels. Die -Channels sind **stable**, **beta** und **master**. -Die **stable** Version ist immer die aktuellste -stabile Version von Flutter, diese wird für die -Produktion und für die meisten Entwickler empfohlen. -Die **beta** Version ist die neueste stabile Version -von Flutter, welche neue Features beinhalten kann und -nicht für die Produktion empfohlen wird. Diese Version -wird später zur nächsten **stable** Version höhergestuft -und wird von Google jedoch auch bereits extensiv getestet -und sollte sehr stabil sein. Die **master** Version ist die neueste -Entwicklungsversion von Flutter, diese Version ist -nicht stabil und wird nicht für die Produktion -empfohlen. Diese Version beinhaltet alle neuesten -Commits welche von Entwicklern in das Flutter -Repository gepusht wurden. - -Hierbei gibt es jedoch einige Probleme, die -durch die globale Installation von Flutter -entstehen. Die globale Installation von Flutter -ist nicht für die Arbeit mit verschiedenen -Projekten und verschiedenen Versionen von Flutter -ausgelegt. Es gibt keine Möglichkeit, verschiedene -Versionen von Flutter zu installieren und zu -verwalten. Außerdem gibt es keine einfache Möglichkeit, -eine bestimmte Version von Flutter zu installieren, -es wird immer die neueste **stable**, **beta** oder -**master** Version installiert. So wurde in der -Entwicklung der Fallstudie Flutter Version 3.19.2 -verwendet, welche jedoch zu einem späteren Zeitpunkt -nicht mehr aktuell ist. - -Zur Lösung dieser Probleme gibt es verschiedene -Versionsverwaltungs-Tools für Flutter. Die bekanntesten -sind FVM (Flutter Version Management) und Puro. - -FVM ist ein simples CLI-Tool, welches es ermöglicht, -verschiedene Versionen von Flutter zu installieren -und zu verwalten. Puro dahingegen ist ein weiteres -CLI-Tool, welches neben der Versionsverwaltung von -Flutter auch eine Integration mit den bekannten -Entwicklungsumgebungen VS Code und IntelliJ bietet. - -In der Fallstudie wurde Puro verwendet und das -Projekt ist so konfiguriert, dass es die Version -3.19.2 von Flutter verwendet. - - - -### Raspberry Pi OS - -- Einrichtung als Entwicklungsbetriebssystem mit Flutter Hot-Reload -- für rapide Entwicklung und Testen diff --git a/chapters/06_fallstudie/01_programmierung.md b/chapters/06_fallstudie/01_programmierung.md deleted file mode 100644 index 38a97ac..0000000 --- a/chapters/06_fallstudie/01_programmierung.md +++ /dev/null @@ -1,571 +0,0 @@ - - - - -## Implementierung der Features - -Im Folgenden wird die Implementierung der -einzelnen Features des Projektes beschrieben. - -\pagebreak - -### Home Feature - -Das Home-Feature ist die Startseite der App. Es -besteht aus einem einfachen Screen, der -nur den Text "Flutter on Embedded Linux" anzeigt. - -\Begin{multicols}{2} - -\begin{figure}[H] -\caption{Ordnerstruktur des Home-Features} -\centering -\begin{minipage}{7cm} -\dirtree{% -.1 home/. -.2 presentation/. -.3 home\char`\_screen.dart. -} -\end{minipage} -\end{figure} - -\begin{figure}[H] -\caption{Home Screen} -\centering -{\includegraphics[width=8cm]{./assets/screenshots/home.png}} -\label{fig:screeplot} -\end{figure} - -\End{multicols} - -\pagebreak - -### Material Demo Feature - -Das Material Demo Feature zeigt eine Auswahl -von Material Design Widgets. Es besteht aus -einem Screen, der eine Liste von Widgets -anzeigt. - -\Begin{multicols}{2} - -\begin{figure}[H] -\caption{Ordnerstruktur des Material Demo Features} -\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{figure}[H] -\caption{Material Demo Screen} -\centering -{\includegraphics[width=8cm]{./assets/screenshots/material3.png}} -\label{fig:screeplot} -\end{figure} - -\End{multicols} - - - -\pagebreak - -### Benchmark - -Das Benchmark Feature zeigt verschiedene -Benchmarks, die die Leistungsfähigkeit von -Flutter auf Embedded Linux demonstrieren. - -\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 - -Das News Feature zeigt eine Liste von Nachrichten -der Tagesschau. - -\Begin{multicols}{2} - -\begin{figure}[H] -\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{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 - -#### Freezed - -wurde verwendet, um die Modelle zu generieren. - -\lstinputlisting[language=Java, caption=Implementierung der News Klasse, linerange={0-20}, captionpos=t] -{code/flutter_elinux/lib/features/news_api/data/models/news.dart} - -\lstinputlisting[language=Java, caption=Implementierung des News Controllers, captionpos=t] -{code/flutter_elinux/lib/features/news_api/data/repository/news_repository.dart} - -\lstinputlisting[language=Java, caption=Implementierung des News Controllers, captionpos=t] -{code/flutter_elinux/lib/features/news_api/business/news_controller.dart} - -\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} - -\lstinputlisting[language=Java, caption=Implementierung des Morse Service, captionpos=t] -{code/flutter_elinux/lib/features/morse_led/business/service/morse_service.dart} - -\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} - -\lstinputlisting[language=Java, caption=Implementierung des Matrix Service, captionpos=t] -{code/flutter_elinux/lib/features/matrix_rgb/business/service/matrix_service.dart} - -\pagebreak - -### System Informationen - -\Begin{multicols}{2} - -\begin{figure}[H] -\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} - -\End{multicols} - -\lstinputlisting[language=Java, caption=Implementierung des Memory Service, captionpos=t] -{code/flutter_elinux/lib/features/system_resources/business/service/memory_service.dart} - -\pagebreak - -### Einstellungen - -\Begin{multicols}{2} - -\begin{figure}[H] -\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{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} - -\pagebreak - -\lstinputlisting[language=Java, caption=Implementierung des Wifi Controllers, captionpos=t] -{code/flutter_elinux/lib/features/settings/business/wifi_controller.dart} diff --git a/chapters/06_fallstudie/02_yocto.md b/chapters/06_fallstudie/02_yocto.md deleted file mode 100644 index 5532134..0000000 --- a/chapters/06_fallstudie/02_yocto.md +++ /dev/null @@ -1,172 +0,0 @@ -\pagebreak - -## Yocto Project - -Kein source-code, nur meta daten. -Die Regeln, wie der Source-Code gebaut wird, werden in Rezepten festgelegt. - -docker als build-umgebung. -https://hub.docker.com/r/crops/poky - -poky = yocto. -Yocto Project basierend auf Poky Linux. -Ausgesprochen "Pocky" wie das japanische Knabberzeug. - -Alle 6 Monate neue Version. -Alle 2 Jahre Long-Term-Support Version. - -Distro: How I want to put my system together. -Machine: the board i want to build for. -Image: the selection of packages i want. - -build cross-compiler. -tools for build time. -compile code for target machine. - -### Layers - -Layer contains bunch of recipes. - -3 layers: -bsp: board support package -defines a machine and related board-specific packages -contains conf/machine/[MACHINE].conf - -distribution: defines a DISTRO such as Poky -contains conf/distro/[DISTRO].conf - -Software: everything else -contains neither conf/machine/[MACHINE].conf nor conf/distro/[DISTRO].conf -libraries, e.g. qt5 -languages, e.g. Java -tools, e.g. virtualisation or selinux - -### Recipes - -contain instructions on how to fetch, configure, compile and install a software component -the body contains BitBake metadata (assignment of variables, mostly); the tasks are written -in shell script or Python -Recipe files have a suffix .bb -may be extended with append recipes with .bbappend suffix - -majority of recipes produce packages. -/tmp/deploy/rpm/.. -often one recipe produces several packages. - -IMAGE_INSTALL:append - -### Images - -core-image-base: A console-only image that fully supports the target device hardware. -core-image-full-cmdline: A console-only image with more full-featured Linux system functionality installed. -core-image-minimal: A small image just capable of allowing a device to boot. -core-image-weston: A very basic Wayland image with a terminal. This image provides the -Wayland protocol libraries and the reference Weston compositor. For more information, -see the “Using Wayland and Weston” section in the Yocto Project Development Tasks Manual. - -\begin{center} -\begin{table}[h] -\caption{Example caption} -\resizebox{\textwidth}{!}{% -\begin{tabular}{|l|l|} -\hline -Meta-Layer & Branch \\ \hline -https://github.com/kraj/meta-clang & 312ff1c39b1bf5d35c0321e873417eb013cea477 \\ \hline -https://github.com/meta-flutter/meta-flutter & 82e167a7f13161a4ee9c5a426f13df79987d1055 \\ \hline -https://github.com/openembedded/meta-openembedded & fda737ec0cc1d2a5217548a560074a8e4d5ec580 \\ \hline -https://github.com/agherzan/meta-raspberrypi & 9dc6673d41044f1174551120ce63501421dbcd85 \\ \hline -https://github.com/jwinarske/meta-vulkan & ceb47bd0ed2a9f657fdae48a901e8a41ba697e74 \\ \hline -https://codeberg.org/flk/meta-wayland & cb22939f751c74baa51d9474ba6e8ba647e99756 \\ \hline -\end{tabular}% -} -\end{table} -\end{center} - -\begin{figure}[h] -\caption{Example caption} -\centering -\begin{minipage}{7cm} -\dirtree{% -.1 crops-yocto/. -.2 build/. -.3 conf/. -.4 bblayers.conf. -.4 local.conf. -.2 poky/. -.2 run\char`\_crops.sh. -.2 Makefile. -} -\end{minipage} -\end{figure} - -\begin{figure}[h] -\caption{Example caption} -\centering -\begin{minipage}{7cm} -\dirtree{% -.1 poky/. -.2 meta/. -.2 meta-poky/. -.2 meta-yocto-bsp/. -.2 meta-selftest/. -.2 meta-skeleton/. -.2 mea-clang/. -.2 meta-flutter/. -.2 meta-flutter-apps/. -.2 meta-flutter-elinux/. -.2 meta-openembedded/. -.2 meta-raspberrypi/. -.2 meta-wayland/. -.2 meta-vulkan/. -} -\end{minipage} -\end{figure} - -\begin{figure}[h] -\caption{Example caption} -\centering -\begin{minipage}{10cm} -\dirtree{% -.1 meta-flutter-apps/. -.2 recipes-graphics/. -.3 flutter-apps/. -.4 third-party/. -.5 flutter-elinux\char`\_git.bb/. -.5 flutter-wonders\char`\_git.bb/. -} -\end{minipage} -\end{figure} - -\begin{figure}[h] -\caption{Example caption} -\centering -\begin{minipage}{10cm} -\dirtree{% -.1 meta-flutter-elinux/. -.2 recipes-core/. -.3 custom-scripts/. -.4 files/. -.5 flutter-auto-launch/. -.4 flutter-auto-launch\char`\_1.00.bb. -.3 flutter-elinux-rules/. -.4 files/. -.5 90-interfaces.rules. -.4 flutter-elinux-rules\char`\_1.00.bb. -.3 flutter-user/. -.4 flutter-user\char`\_1.00.bb. -.3 systemd/. -.4 files/. -.5 flutter-auto.service. -.5 flutter-pi.service. -.4 flutter-auto-service\char`\_1.00.bb. -.4 flutter-pi-service\char`\_1.00.bb. -.4 systemd\char`\_\%.bbappend. -.3 systemd-conf/. -.4 files/. -.5 en.network. -.5 eth.network. -.5 wlan.network. -.4 systemd-conf\char`\_\%.bbappend. -} -\end{minipage} -\end{figure} diff --git a/chapters/06_fallstudie/.DS_Store b/chapters/06_implementierung_der_features/.DS_Store similarity index 100% rename from chapters/06_fallstudie/.DS_Store rename to chapters/06_implementierung_der_features/.DS_Store diff --git a/chapters/06_implementierung_der_features/00_home.md b/chapters/06_implementierung_der_features/00_home.md new file mode 100644 index 0000000..202dc2e --- /dev/null +++ b/chapters/06_implementierung_der_features/00_home.md @@ -0,0 +1,66 @@ +\pagebreak + +# Implementierung der Features {#features} + +Im Folgenden wird die Implementierung der +einzelnen Features des Projektes beschrieben. Jedes +Feature beschreibt einen Seitenbereich in der entwickelten Flutter Anwendung. +Die Anwendung wurde so implementiert, dass alle Features falls nötig in +einem Demo-Modus auch am Desktop-PC ausgeführt werden können. Alle +Screenshots zeigen die Anwendung im Demo-Modus in Ausführung auf macOS. + +Als Grundlage der Features dient der angepasste Scaffold +_HomeScaffold_, dieser wird in der Konfiguration +des Routers der App bei allen Features als Basis-Widget +genutzt. Der HomeScaffold selbst ist noch einmal in zwei +weitere angepasste Scaffold-Widgets unterteilt, +_AdaptiveScaffold_ und _ScaffoldWithStatusbar_. + +Das AdaptiveScaffold stammt aus dem offiziellen Flutter _packages_ +Repository von den Flutter Entwicklern [@PackagesPackagesFlutter_adaptive_scaffold]. +Es ermöglicht es, in dem Feld _destinations_ einfach +alle Navigationsziele, in diesem Fall die Features, zu definieren. In dem +Feld _onSelectedIndexChange_ wurde dann das Navigieren zu dem ausgewählten +Feature mit dem GoRouter implementiert. Der AdaptiveScaffold passt sich dazu automatisch +an die Displaygröße des Gerätes an und zeigt eine passende Navigationsleiste +an, in welcher die definierten Navigationsziele angezeigt werden. Hierdurch +wurde die Implementierung der Navigation zwischen den Features stark vereinfacht +und die Navigation kann sehr leicht bearbeitet werden. + +Das _ScaffoldWithStatusBar_ Widget wurde selbst implementiert und +es wird als Basis-Widget für den AdaptiveScaffold genutzt. Mit dem +Widget wird eine Statusleiste am oberen Rand des Bildschirms +angezeigt, in welcher die aktuelle Uhrzeit und der Status der +WLAN-Verbindung angezeigt wird. Falls die Flutter Anwendung in +dem Debug Modus läuft, wird zusätzlich der Text "DEBUG" links in der +Statusleiste angezeigt. Der AdaptiveScaffold und die Statusleiste +können in der Abbildung \ref{homeScreen} betrachtet werden. +Wie die WLAN-Verbindung ausgelesen wird, wird in dem Kapitel +\ref{headerSettingsFeature} beschrieben. + +## Home Feature + +Das Home-Feature ist die Startseite der App. Es +besteht aus einem einfachen Screen, der +nur den Text "Flutter on Embedded Linux" anzeigt (siehe Abbildung +\ref{homeScreen}). + +\pagebreak + +\begin{multicols}{2} + +\begin{figure}[H] +\caption{Home Screen} +\label{homeScreen} +\centering +\shadowimage[width=7cm]{./assets/screenshots/home.png} +\end{figure} + +\begin{figure}[H] +\caption{Das Material Demo Feature} +\label{material3} +\centering +\shadowimage[width=7cm]{./assets/screenshots/material3.png} +\end{figure} + +\end{multicols} diff --git a/chapters/06_implementierung_der_features/01_material_demo.md b/chapters/06_implementierung_der_features/01_material_demo.md new file mode 100644 index 0000000..806551f --- /dev/null +++ b/chapters/06_implementierung_der_features/01_material_demo.md @@ -0,0 +1,22 @@ +## Material Demo Feature + +In dem Material Demo Feature wird die Verwendung von Material Design Elementen +in Flutter demonstriert. Es wird eine kleine Auswahl von verschiedenen +Material Design Elementen gezeigt, dazu gehören Buttons, Schalter, Slider +und Dialoge (siehe Abbildung \ref{material3}). Die Implementierung ist inspiriert von +dem _material_3_demo_ Beispielprojekt von den Entwicklern von +Flutter, welches auf GitHub verfügbar ist [@SamplesMaterial_3_demoLib]. \ + + diff --git a/chapters/06_implementierung_der_features/02_benchmark.md b/chapters/06_implementierung_der_features/02_benchmark.md new file mode 100644 index 0000000..090cbb7 --- /dev/null +++ b/chapters/06_implementierung_der_features/02_benchmark.md @@ -0,0 +1,176 @@ +## Benchmark Feature + +Das Benchmark Feature zeigt auf der Startseite einen +Raster aus Karten mit den verschiedenen Benchmark Tests, +welche ausgewählt werden können (siehe Abbildung \ref{benchmark}). +Im folgenden wird jeder Benchmark Test genauer beschrieben. + +\begin{multicols}{2} + +\begin{figure}[H] +\caption{Die Startseite des Benchmark Features} +\label{benchmark} +\centering +\shadowimage[width=7cm]{./assets/screenshots/benchmark.png} +\end{figure} + +\begin{figure}[H] +\caption{Flame Sprite Rendering Benchmark mit Ergebnis} +\label{benchmarkSpriteFinished} +\centering +\shadowimage[width=7cm]{./assets/screenshots/benchmarkSpriteFinished.png} +\end{figure} + +\end{multicols} + +### Flame Sprite Rendering Benchmark + +Der "Flame Sprite Rendering Benchmark" testet die Fähigkeit der +Engine, eine große Anzahl von Sprites zu rendern. Der Test basiert +auf einen offiziellen Benchmark der Flame Engine, welcher auf +GitHub verfügbar ist [@FlameExamplesLib]. In diesem kann der Nutzer +auf eine beliebige Position auf dem Bildschirm klicken und pro +Klick werden 100 weitere animierte Sprites hinzugefügt. Dabei kann +die Framerate beobachtet werden. Das Problem bei diesem Test ist, +dass der Test nicht automatisiert ist und 100 Animationen pro Klick +eine hohe Anzahl ist, besonders für leistungsschwache Geräte wie +dem Raspberry Pi. Daher wurde der Test so angepasst, dass mit einer +Verzögerung von 50 Millisekunden automatisch für 30 Minuten ein +weiterer Sprite immer dann hinzugefügt wird, wenn die Framerate +über 59 liegt. Am Ende des Tests wird die Anzahl der Animationen +ausgegeben, die in den 30 Minuten hinzugefügt werden konnten. Dies +ist in Abbildung \ref{benchmarkSpriteFinished} zu sehen. + +Der Benchmark Test ist aus verschiedenen Gründen nach mehreren +Versuchen so entstanden. Ohne die Verzögerung von 50 Millisekunden +werden zu viele Sprites zu schnell hinzugefügt, was dazu führt, +dass das Ergebnis immer wieder große Schwankungen aufweist. Ein +Grund dafür ist, dass in der kurzen Zeit so schnell Sprites hinzugefügt +werden, dass die Framerate Anzeige nicht mehr hinterherkommt und +zufällig an verschiedenen Stellen das Limit erreicht. Mit der Verzögerung +fiel dann auf, dass die Render Engine sich immer wieder +nach einer gewissen Zeit von wenigen Sekunden oder manchmal bis zu ungefähr einer Minute wieder +einfangen kann. Das bedeutet, dass die Framerate dann wieder für einen +kurzen Moment über 59 Bilder pro Sekunden erreicht. Der Test +wurde deswegen auf 30 Minuten gesetzt, da in diesem Zeitraum +sicherer der tatsächlich höchste Wert erreicht wird. In den +Ergebnissen konnte auch bewiesen werden, wie der Test +sehr genau immer sehr ähnliche Ergebnisse liefert und so die +Leistung der Render Engine von Flutter gut getestet werden kann. + +### Rogue Shooter Benchmark + +Der "Rogue Shooter Benchmark" ist ein weiterer Leistungstest mit der +Flame Engine, welcher auch auf einen offiziellen Benchmark der Flame +Engine basiert und auf GitHub verfügbar ist [@FlameExamplesGames]. + +Dieser Test ist ein Demo Spiel, welches nicht weiter im Code +verändert wurde von seiner Quelle. Im Spiel bewegt man das Raumschiff +per Touch Steuerung und schießt auf eine hohe Anzahl von anderen Raumschiffen, +dabei wird nur bei der Bewegung geschossen. Mit dem Test wird +kein Ergebnis automatisch ausgegeben, sondern man kann interaktiv +die Reaktionszeit und die Framerate beobachten. Das Ergebnis ist +so nicht ganz genau, aber das muss es hier nicht sein, da es +nur um einen groben Stresstest geht bei dem visuell beobachtet +werden kann, ob die Framerate stabil bleibt und ob das Raumschiff +flüssig bewegt werden kann (siehe Abbildung \ref{benchmarkFlame}). + +### VSync Test + +Der "VSync Test" testet aus, ob es so genannte "Tearing" Effekte +gibt, welche entstehen, wenn die Framerate nicht mit der Bildwiederholrate +des Bildschirms synchronisiert ist. Im Test werden schwarze Rechtecke +von rechts nach links über den Bildschirm bewegt (siehe Abbildung \ref{benchmarkVsync}). Falls es zu +Tearing Effekten kommt, kann man das an den Rechtecken beobachten, +dass diese dann nicht mehr flüssig bewegt werden. Der Test nutzt +zur Grafikkartenbeschleunigung einen Shader, welcher auf der bekannten +Shader Toy Webseite verfügbar ist [@beautypiShadertoy]. Dadurch +wird der Test durch die Grafikkarte beschleunigt. Flutter +erlaubt es normalen GLSL Shader Code in der Engine zu verwenden, der Code +muss dazu nur manchmal leicht angepasst werden [@googleinc.WritingUsingFragment]. +Der Shader Code von Shader Toy musste nur leicht angepasst werden. + +\begin{multicols}{2} + +\begin{figure}[H] +\caption{Der Rogue Shooter Benchmark} +\label{benchmarkFlame} +\centering +\shadowimage[width=7cm]{./assets/screenshots/benchmarkFlame.png} +\end{figure} + +\begin{figure}[H] +\caption{Der VSync Test} +\label{benchmarkVsync} +\centering +{\shadowimage[width=7cm]{./assets/screenshots/benchmarkVsync.png}} +\end{figure} + +\end{multicols} + +### Video Benchmark + +Im Video Benchmark kann ein Video in den Auflösungen 720p, 1080p und 4K +abgespielt werden. Dieser Test funktioniert nur mit dem Flutter-Pi +Embedder, da zum Zeitpunkt der Implementierung nur für Flutter-Pi eine einfache Video Unterstützung +durch das _flutterpi_gstreamer_video_player_ Paket verfügbar war +[@Flutter_packagesPackagesFlutterpi_gstreamer_video_player]. Im Test +kann man visuell beobachten, ob das Video flüssig abgespielt werden +kann. + +### Simple Tiles Map Benchmark + +Der "Simple Tiles Map Benchmark" testet die Fähigkeit der Engine, +eine Karte mit einer hohen Anzahl von Bildern zu rendern, welche als Kacheln +in einem Raster aneinandergesetzt werden. Es wurde hierfür +das bestehendes Paket _simple_tiles_map_ verwendet, der Code ist +auf GitHub verfügbar [@danielquisbertDanielquisbertSimple_tiles_map2023]. +Im Test kann man visuell beobachten, ob die Karte flüssig bewegt +werden kann und wie schnell die Tiles aus dem Internet geladen werden können +(siehe Abbildung \ref{benchmarkMap}). + +\begin{multicols}{2} + +\begin{figure}[H] +\caption{Der Video Benchmark} +\label{benchmarkVideo} +\centering +\shadowimage[width=7cm]{./assets/screenshots/benchmarkVideo.png} +\end{figure} + +\begin{figure}[H] +\caption{Der Map Benchmark} +\label{benchmarkMap} +\centering +\shadowimage[width=7cm]{./assets/screenshots/benchmarkMap.png} +\end{figure} + +\end{multicols} + + diff --git a/chapters/06_implementierung_der_features/03_news.md b/chapters/06_implementierung_der_features/03_news.md new file mode 100644 index 0000000..2cc85eb --- /dev/null +++ b/chapters/06_implementierung_der_features/03_news.md @@ -0,0 +1,135 @@ +## News Feature + +Das News Feature zeigt eine Liste von Nachrichten +der Tagesschau (siehe Abbildung \ref{newsList}). Die Nachrichten können in einer +Liste oder in einem Raster angezeigt werden (siehe Abbildung \ref{newsGrid}), +mithilfe eines Stateful Widgets kann zwischen den beiden Ansichten gewechselt werden. + +Die Nachrichten werden von der Tagesschau-API abgerufen, +welche als OpenAPI unter der Adresse https://tagesschau.api.bund.dev/ +verfügbar ist. Die Nutzung der API ist für den privaten nicht-kommerziellen +Gebrauch gestattet, die Veröffentlichung hingegen nicht - mit Ausnahme von +Angeboten, welche explizit unter der CC-Lizenz stehen. +Außerdem soll man mit nicht mehr als 60 Abrufen pro Stunde tätigen, +was für die Testzwecke in dieser Arbeit ausreichend ist [@TagesschauAPIOpenAPIa]. + +\pagebreak + +\Begin{multicols}{2} + +\begin{figure}[H] +\caption{News Liste} +\label{newsList} +\centering +{\shadowimage[width=7cm]{./assets/screenshots/newsList.png}} +\end{figure} + +\begin{figure}[H] +\caption{News Raster} +\label{newsGrid} +\centering +{\shadowimage[width=7cm]{./assets/screenshots/newsGrid.png}} +\end{figure} + +\End{multicols} + +In der Implementierung des News-Features wurden in der Datenzugriffsschicht passende +Modelle für die zum Test benötigten Daten erstellt, welche von der API abgerufen +werden. Die Modelle wurden mit Hilfe des Freezed-Pakets generiert und werden +in dem UML Klassen-Diagramm in Abbildung \ref{umlNews} dargestellt. Zum besseren +Verständnis werden in dem Diagramm die Typen der Attribute in den Typen aus der +Dart Programmiersprache angegeben. Viele der Attribute sind explizit als optional +deklariert, da die API nicht immer alle Attribute liefert, zudem wurden nur die +wenigsten Attribute modelliert, die für die Anzeige der Nachrichten benötigt werden. +Alle anderen Attribute werden aus der JSON Antwort der API nicht verwendet und +ignoriert. + +In der Geschäftsschicht wurde ein Controller mit dem Namen _NewsController_ +erstellt. Dieser nutzt den Riverpod Generator als Klasse. In der notwendigen +_build_ Methode wird als Future ein _RegionNews_ Objekt zurückgegeben, welches +die neuesten Nachrichten der Tagesschau enthält. Des weiteren wurde im Controller +eine _appendPage_ Methode implementiert, welche die nächste Seite der Nachrichten +abruft und an die bereits vorhandenen Nachrichten anhängt. Der von Riverpod +generierte Provider _newsControllerProvider_ wird in der Präsentationsschicht +verwendet, um die Nachrichten anzuzeigen und sobald man am Ende der Liste oder +des Rasters angekommen ist, wird die nächste Seite der Nachrichten +mit der _appendPage_ Methode abgerufen und an die bereits vorhandenen Nachrichten +angehängt. Der Nutzer kann so unendlich tief in die Nachrichtenliste scrollen. \ + +```{=latex} +\begin{figure}[H] +\centering +\caption{UML Klassen-Diagram für das News Feature} +\label{umlNews} +``` + +```{.mermaid loc=assets/mermaid caption="News UML Diagram"} +classDiagram + RegionNews *-- "0..n" News + News *-- "0..1" TeaserImage + class RegionNews{ + +news: List~News~ + +nextPage: String? + +fromJSON(Map~String, dynamic~ json) RegionNews + +toJSON() Map~String, dynamic~ + } + class News{ + +title: String? + +teaserImage: TeaserImage? + +brandingImage: TeaserImage? + +date: String? + +type: String? + +fromJSON(Map~String, dynamic~ json) News + +toJSON() Map~String, dynamic~ + } + class TeaserImage{ + +imageVariants: Map~String, String~? + +fromJSON(Map~String, dynamic~ json) TeaserImage + +toJSON() Map~String, dynamic~ + } +``` + +```{=latex} +\end{figure} +``` + + + + diff --git a/chapters/06_implementierung_der_features/04_led_morse.md b/chapters/06_implementierung_der_features/04_led_morse.md new file mode 100644 index 0000000..3aa82bd --- /dev/null +++ b/chapters/06_implementierung_der_features/04_led_morse.md @@ -0,0 +1,68 @@ +## Morsecode Feature + +Zur Implementierung des Morsecode-Features wurde +zur Inspiration der Umsetzung ein offizielles Beispiel +einer Implementierung eines Morsecode Led Projekts +von Arduino verwendet, welches Online zu finden ist [@MorseCodeProject]. +In der Geschäftsschicht wurde ein MorseService implementiert, +welcher in der Logik dem Beispiel von Arduino folgt und das Morsealphabet +in Form von Buchstaben und Zahlen in Morsecode übersetzt. Ein "`A`" wird beispielsweise +in "`.-`" übersetzt. In der _printMessage_ Methode wird die Nachricht von einem +String in eine Liste von Strings mit den passenden Morsezeichen übersetzt und +danach wird diese Liste in einer Schleife durchlaufen und die einzelnen Zeichen +werden mit Pausen nacheinander auf die LED geschrieben. Zum ansprechen des LED +Pins wurde die _flutter_gpio_ Bibliothek verwendet, welche es ermöglicht, die +GPIO Pins des Raspberry Pi anzusprechen. In der Präsentationsschicht wurde ein +_LedScreen_ implementiert, welcher die Benutzeroberfläche für das Morsecode-Feature +darstellt. In dieser Oberfläche kann der Benutzer eine Nachricht eingeben und +diese dann in Morsecode auf die LED ausgeben lassen. Die Oberfläche besteht aus +einem Textfeld, in welchem die Nachricht eingegeben wird und einem Button, welcher +die Nachricht in Morsecode auf die LED ausgibt (siehe Abbildung \ref{morse}). + +\begin{multicols}{2} + +\begin{figure}[H] +\caption{Das Morsecode Feature} +\label{morse} +\centering +{\shadowimage[width=7cm]{./assets/screenshots/morse.png}} +\end{figure} + +\begin{figure}[H] +\caption{Tastatureingabe beim Morsecode Feature} +\label{morseInput} +\centering +{\shadowimage[width=7cm]{./assets/screenshots/morseInput.png}} +\end{figure} + +\end{multicols} + +Zur Eingabe am Textfeld musste eine eigene Tastatur implementiert werden, da im +Flutter-Framework normalerweise bei der Touch-Eingabe die Tastatur des Betriebssystems +verwendet wird, welche in diesem Kontext nicht verfügbar ist. Zur Implementierung +der Tastatur wurde ein Fork des Pakets _virtual_keyboard_multi_language_ erstellt, +worin die Tastatur leicht angepasst wurde, um bei der Eingabe es zu erlauben, dass +der Nutzer auch die Position des Cursors im Textfeld ändern kann und diese Änderung +dann von der Eingabe der Tastatur berücksichtigt wird. Zusätzlich wurde die optionale +Methode _onReturnKey_ hinzugefügt, welche es ermöglicht, eine angepasste Methode +beim Klick auf die Enter-Taste auszuführen. Die Tastatur ist in Abbildung \ref{morseInput} +zu sehen. In dem Test wurde nur die englische Sprache verwendet, bei der Tastatur +können aber auch andere Sprachen hinzugefügt werden. + + + + diff --git a/chapters/06_implementierung_der_features/05_matrix.md b/chapters/06_implementierung_der_features/05_matrix.md new file mode 100644 index 0000000..bb87755 --- /dev/null +++ b/chapters/06_implementierung_der_features/05_matrix.md @@ -0,0 +1,74 @@ +\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. + + + + diff --git a/chapters/06_implementierung_der_features/06_system_informationen.md b/chapters/06_implementierung_der_features/06_system_informationen.md new file mode 100644 index 0000000..59d0303 --- /dev/null +++ b/chapters/06_implementierung_der_features/06_system_informationen.md @@ -0,0 +1,62 @@ +## System Informationen Feature + +Zur Implementierung der Präsentationsschicht wird auch +in dem "System Informationen" Feature der CustomPainter verwendet. +Die Implementierung der Graphen basiert hierbei auf dem _real_time_chart_ Paket, +welches auf GitHub verfügbar ist [@mounirTajaouartReal_time_chart2024]. +Das Paket wurde geforkt und für das Projekt leicht angepasst. Es wurde +die Option hinzugefügt, dass der Maximalwert der Y-Achse angegeben werden +kann, um die Skalierung des Graphen zu steuern. Dies ist notwendig, da vorher +nicht garantiert werden konnte, dass der Graph immer den gesamten Wertebereich +richtig darstellt. Zusätzlich wurde das GridPaper Widget hinter den Graphen +eingefügt, um mithilfe der Gitterlinien die Werte auf dem Graphen besser +ablesbar zu machen (siehe Abbildung \ref{systemInformation}). + +\begin{figure}[H] +\caption{Das System Information Feature} +\label{systemInformation} +\centering +{\shadowimage[width=7cm]{./assets/screenshots/systemInfo.png}} +\end{figure} + +In der Geschäftslogikschicht wurde eine Hilfsfunktion _getCpuUsagePercentage_ +implementiert, welche die CPU-Auslastung des Linux-Systems als Stream +aus doubles zurückgibt. Zur Auslesung der CPU-Auslastung wird der +Linux Befehl `vmstat 1 2|tail -1|awk '{print $15}'` verwendet und der +Rückgabewert wird von 100 subtrahiert. Vmstat ist ein in Linux integriertes +Tool, welches Informationen über die durchschnittliche Prozessornutzung seit dem Hochfahren liefern kann. Mit einem +Trick wird die Ausgabe von vmstat zweimal mit einem Abstand von einer Sekunde +ausgelesen und dadurch kann die aktuelle CPU-Auslastung daraus ermittelt werden, +weil der Wert aus Spalte 15 dann die aktuelle CPU-Auslastung nach einer Sekunde +im Vergleich zur letzten Sekunde enthält. Die Lösung wurde auf der Website AskUbuntu +gefunden [@paulAnswerGettingCpu2013], wo sie jedoch nicht erklärt wurde. + +Für die Speicherauslesung wurde der Service _MemoryService_ implementiert, +welcher die Speicherauslastung des Systems als Stream aus doubles zurückgibt. +Zur Auslesung wir der Befehl `cat /proc/meminfo` verwendet um _/proc/meminfo_ +auszulesen. Die Zusammenstellung des genauen Werts für den freien Speicher +aus den verschiedenen Werten in _/proc/meminfo_ wurde aus einem GitHub +Issue des _Screenfetch_ Projekts entnommen [@BugsCPURAM2016]. Die Formel +zur Berechnung des freien Speichers lautet: + +> usedmem = MemTotal + Shmem - MemFree - Buffers - Cached - SReclaimable + + + + diff --git a/chapters/06_implementierung_der_features/07_einstellungen.md b/chapters/06_implementierung_der_features/07_einstellungen.md new file mode 100644 index 0000000..2df3c64 --- /dev/null +++ b/chapters/06_implementierung_der_features/07_einstellungen.md @@ -0,0 +1,170 @@ +## Einstellungen Feature {#headerSettingsFeature} + +Das Einstellungen Feature zeigt auf der Startseite eine Liste an Optionen, +die der Benutzer konfigurieren kann. Dazu gehören visuelle Einstellungen, +wie das Aktivieren des Dark Modes, die Möglichkeit vom Material 3 Design +zum Material 2 Design zu wechseln, eine Auswahl an Farben für den ColorSeed +der App und das Anzeigen des eingebauten Performance Overlays von Flutter. +Ansonsten gibt es nur die Möglichkeit, das WLAN zu konfigurieren (siehe Abbildung \ref{settings}). +Der aktivierte Dark Mode und die Farbauswahl können in Abbildung \ref{settingsDark} betrachtet +werden. Alle visuellen Einstellungen werden mit von Riverpod generierten Providern +angesprochen und alle Einstellungen außer dem "Performance Overlay" nutzen dabei die +SharedPreferences, um die Einstellungen zu speichern. Im Test gab es dabei in der +finalen Version mit Yocto Linux manchmal das Problem, dass die SharedPreferences +nicht richtig gespeichert werden. Erst kam die Vermutung auf, dass der Nutzer +keine Schreibrechte auf das Verzeichnis von SharedPreferences hat, doch nach +einem oder auch zwei Neustarts funktioniert das Speichern der Einstellungen +problemlos. Der genaue Fehler konnte also nicht gefunden werden, da es keine +Fehlermeldungen gab und es ein merkwürdiges Verhalten aufweist, da der Nutzer +nicht plötzlich Schreibrechte auf das Verzeichnis bekommen kann, das Problem +sich aber nach mehreren Neustarts "von selbst" löst. +Im Falle von Flutter-Pi werden die Einstellung in der Datei +_~/.local/share/flutter-pi/shared_preferences.json_ gespeichert, diese +kann manuell bearbeitet werden und auch zum Vorkonfigurieren von +Einstellungen genutzt werden. + +\pagebreak + +\Begin{multicols}{2} + +\begin{figure}[H] +\caption{Startseite der Einstellungen} +\label{settings} +\centering +{\shadowimage[width=7cm]{./assets/screenshots/settings.png}} +\end{figure} + +\begin{figure}[H] +\caption{Einstellungen mit aktiviertem Dark Mode und Farbauswahl} +\label{settingsDark} +\centering +{\shadowimage[width=7cm]{./assets/screenshots/settingsDark.png}} +\end{figure} + +\End{multicols} + +Die WLAN-Einstellungen sind in einer eigenen Ansicht untergebracht in der +eine Liste an verfügbaren WLAN-Netzwerken angezeigt wird (siehe Abbildung \ref{settingsWifiList}). +Wählt der Benutzer ein Netzwerk aus, so werden die Details des Netzwerks +in einem Dialogfenster im Vollbildmodus angezeigt (siehe Abbildung \ref{settingsWifiDetails}). +Von da aus kann der Benutzer sich mit dem Netzwerk verbinden und kann +falls nötig ein Passwort eingeben. Die Eingabe des Passworts geschieht wie +auch beim Morsecode Feature in einem eigenen Fenster mit der Tastatur. + +\begin{multicols}{2} + +\begin{figure}[H] +\caption{WLAN Netzwerke Liste} +\label{settingsWifiList} +\centering +{\shadowimage[width=7cm]{./assets/screenshots/settingsWifiList.png}} +\end{figure} + +\begin{figure}[H] +\caption{WLAN Netzwerk Details} +\label{settingsWifiDetails} +\centering +{\shadowimage[width=7cm]{./assets/screenshots/settingsWifiDetails.png}} +\end{figure} + +\end{multicols} + +In der Implementierung wird das Paket _nm_ genutzt, welches von +Canonical, dem Unternehmen hinter der weltbekannten Linux Distribution Ubuntu, entwickelt wurde. +Dieses Paket bietet eine Schnittstelle zum NetworkManager, welcher +das Netzwerkmanagement unter Linux übernimmt. Diese Schnittstelle +wird über die D-Bus API vom NetworkManager angesprochen, dazu +wird das Paket _dbus_ genutzt, welches auch von Canonical entwickelt wurde. +Canonical gibt hiermit auch eine Beispielimplementierung in Dart, die +zeigt wie man eine DBUS-Schnittstelle in Dart implementiert. +Das nm Paket ist unter GitHub verfügbar [@CanonicalNmDart2023]. + +In der Geschäftslogikschicht wurde zur Ansteuerung des nm Pakets +ein eigener Controller _WifiController_ implementiert, der die +Funktionalität des nm Pakets kapselt. In dem Controller sind +Funktionen wie _disconnectFromWifiNetwork_ und _connectToWifiNetwork_ +implementiert und es kann ein _wifiStream_ abonniert werden, der +den aktuellen Status des WLANs zusammen mit verfügbaren WLAN Netzwerken zurückgibt. +Der Stream nutzt hierzu das neue Records Feature von Dart, welches +seit Version 3.0 verfügbar ist [@googleinc.Records]. Records funktionieren technisch ähnlich zu +klassischen Tuplen und werden im Stream genutzt, um Objekte der Klassen _NetworkManagerDevice_ +und _NetworkManagerClient_ zusammen zu übergeben. Auflistung \ref{wifiStream} +zeigt den Ausschnitt des _WifiController_ mit dem _wifiStream_. + +Die Implementierung des WifiControllers ist nur sehr rudimentär und +deckt nur die nötigsten Funktionen ab, um auf dem Raspberry Pi +sich mit einem WLAN Netzwerk zu verbinden. Das Abspeichern der +Verbindung wird von dem NetworkManager selbst übernommen und es +funktioniert in der Applikation problemlos. + +```{.java .number-lines caption="Auszug aus dem WifiController mit dem wifiStream" captionpos=t label=wifiStream} +@riverpod +class WifiController extends _$WifiController { + + ... + + NetworkManagerDevice get _device => state.value!.devices + .firstWhere((d) => d.deviceType == NetworkManagerDeviceType.wifi); + + Stream<(NetworkManagerDevice, NetworkManagerClient)> wifiStream() { + return Stream.periodic(const Duration(milliseconds: 100), (_) { + return (_device, state.value!); + }); + } + + ... +} +``` + +Dieser WifiController wird auch für den Status des WLANs in der +Statusleiste genutzt, um den aktuellen Status des WLANs anzuzeigen. + + + + + + + +# Erstellung der Yocto-Distribution {#yoctoChapter} diff --git a/chapters/06_implementierung_der_features/99_programmierung.md b/chapters/06_implementierung_der_features/99_programmierung.md new file mode 100644 index 0000000..3677597 --- /dev/null +++ b/chapters/06_implementierung_der_features/99_programmierung.md @@ -0,0 +1,81 @@ + + + + + diff --git a/chapters/07_erstellung_der_yocto_distribution/00_yocto.md b/chapters/07_erstellung_der_yocto_distribution/00_yocto.md new file mode 100644 index 0000000..9bfbd73 --- /dev/null +++ b/chapters/07_erstellung_der_yocto_distribution/00_yocto.md @@ -0,0 +1,480 @@ +In diesem Kapitel wird die Erstellung +und Konfiguration +der angepassten eingebettete Linux Distribution +für Flutter +mit dem Yocto Projekt +beschrieben. + +## Einrichtung der Build-Umgebung + +Zur einfacheren Handhabung wurde für die Build-Umgebung +der Docker-Container _crops/poky:ubuntu-22.04_ genutzt. +Crops steht für "CROss PlatformS" und ist ein Community Projekt +mit dem Ziel, die Entwicklung von Yocto Distributionen zu vereinfachen, +das Projekt ist auf GitHub zu finden [@Crops]. +Docker ist ein Open-Source-Projekt, welches die Bereitstellung +von Anwendungen in Containern ermöglicht. In diesen Containern kann ein +komplettes Betriebssystem mit allen Abhängigkeiten und Anwendungen +abgebildet werden. In diesem Fall werden in dem Container alle +notwendigen Werkzeuge und Abhängigkeiten für die Erstellung der Yocto-Distribution +bereitgestellt. + +Die Ordnerstruktur der Build-Umgebung ist in Abbildung \ref{buildEnvironment} dargestellt +mit den wichtigsten Dateien zur Konfiguration und Steuerung des Build-Prozesses. Diese +Dateien werden im Folgenden genauer erläutert. + +\begin{figure}[H] +\caption{Die wichtigsten Dateien und Verzeichnisse der Build-Umgebung} +\label{buildEnvironment} +\centering +\begin{minipage}{7cm} +\dirtree{% +.1 crops-yocto/. +.2 build/. +.3 .... +.3 conf/. +.4 bblayers.conf. +.4 local.conf. +.2 poky/. +.3 .... +.3 bitbake/. +.3 oe-init-build-env. +.2 run\char`\_crops.sh. +.2 Makefile. +} +\end{minipage} +\end{figure} + +In dem Verzeichnis _poky_ befinden sich alle Dateien zur Erstellung +der Linux Distribution. Poky ist der Name einer Referenz-Distribution +des Yocto Projekts und dient als Basis für die Erstellung von +eigenen Distributionen [@TechnicalOverviewa]. In dem Projekt wurde +die Version 4.0.13 von Poky genutzt, welche den Codenamen "kirkstone" +trägt und zum Zeitpunkt der Erstellung des Projektes die aktuellste +LTS (Long-Term-Support) Version war. Alle zwei Jahre wird eine neue +LTS-Version veröffentlicht und jedes halbe Jahr eine neue Stable-Version, +welche für ein halbes Jahr unterstützt wird [@ReleasesYoctoProject]. Das +Poky Projekt ist auf GitHub veröffentlicht und Version 4.0.13 ist +unter dem Commit `e6076b6269d8d6868a9dd7565dab228e6d1ce2a2` zu finden [@YoctoprojectPoky2024]. + +Poky beinhaltet +BitBake, das Build-System vom Yocto Projekt, welches speziell +für die Erstellung von Linux Distributionen +für eingebettete Systeme entwickelt wurde. BitBake führt +Aufgaben gemäß den bereitgestellten Metadaten aus. Metadaten +werden in Rezept-Dateien (.bb) und zugehörigen Rezepten (.bbappend), +Konfigurationsdateien (.conf) und zugrunde liegenden Include-Dateien +(.inc) sowie Klassendateien (.bbclass) definiert. Die Metadaten +liefern BitBake Anweisungen dazu, welche Schritte ausgeführt werden +müssen und welche Abhängigkeiten bestehen. BitBake wurde von der Paketverwaltung +Portage von der quellbasierten Linux-Distribution Gentoo +inspiriert und arbeitet gleichermaßen quellbasiert. Das bedeutet, dass +der Quellcode der Software heruntergeladen wird und speziell für +die Zielplattform kompiliert wird anstatt wie bei alltagsüblichen +Betriebssystemen wie Windows, macOS oder Ubuntu Linux binäre Dateien zu installieren, +welche vorkompiliert sind. In den Schritten bei der Ausführun von BitBake wird deshalb zuerst +ein Cross-Compiler erstellt, um den Quellcode für die Zielplattform +zu kompilieren. Danach werden alle notwendigen Werkzeuge für die +Build-Umgebung erstellt und dann wird der Quellcode für die Zielplattform +kompiliert. Zuletzt werden die erstellten Dateien in ein Image +zusammengefasst, dies bildet dann die fertige Distribution, welche +auf dem Zielsystem ausgeführt werden kann. [@OverviewBitbakeDev] + +Rezepte werden auch in dem _poky_ Verzeichnis in den Ordnern abgespeichert, +welche mit "_meta_" beginnen, diese werden +Meta-Layer genannt. Welche Meta-Layers genutzt werden, +wird in der Datei _bblayers.conf_ für BitBake festgelegt und in +Kapitel \ref{yoctoLayers} werden die genutzten Meta-Layers des +Projekts durchgegangen. In der Datei _local.conf_ wird konfiguriert, +welche Rezepte genutzt werden +und mithilfe von Variablen können die Rezepte angepasst werden. In dem +Projekt wird in _local.conf_ alles konfiguriert, was für die Erstellung +der eingebetteten Linux Distribution mit Flutter notwendig ist und es +wurden zwei Beispiel-Konfigurationen erstellt, einmal den Raspberry Pi 4 und +den Raspberry Pi 0 2W. + +Die Datei _run_crops.sh_ ist ein Shell-Skript, welcher als Hilfsskript +die Nutzung des Docker-Containers vereinfacht. +Der Code des Skripts entstammt eines GitHub Projektes von Yusuke Mitsuki [@yusukemitsukiHelperScriptRuna]. +Mit dem Skript wird der Docker-Container gestartet und die Build-Umgebung +aus der Datei _oe-init-build-env_ wird für BitBake initialisiert. Zusätzlich wird +das Verzeichnis, in dem das Skript ausgeführt wird, in den Docker-Container +eingehängt. Das bedeutet, dass alle Änderungen, die durch den Docker-Container +gemacht werden lokal in dem _crops-yocto_ Verzeichnis gemacht werden. In dem +_build_ Verzeichnis sind dadurch alle fertigen Images von BitBake zugreifbar +für den Nutzer, der das Skript ausführt. Die Dateien werden außerhalb der +Docker-Umgebung abgespeichert. + +Um die Build-Umgebung des Projekts so einfach wie möglich bedienbar zu machen, +wurde ein _Makefile_ erstellt, welche die wichtigsten Befehle für die Erstellung +der Distribution zur Verfügung stellt. In Auflistung \ref{makeFile} wird der +Inhalt der Makefile-Datei abgebildet und im danach wird der Inhalt erklärt. + +```{.bash .number-lines caption="Inhalt der Makefile-Datei" captionpos=t label=makeFile} +ROOT_DIR := $(dir $(realpath $(lastword $(MAKEFILE_LIST)))) + +all: + ./run_crops.sh bitbake core-image-full-cmdline + +flash-pi4: + sudo dd if=${ROOT_DIR}build/tmp/deploy/images/raspberrypi4-64/core-image-full-cmdline-raspberrypi4-64.rpi-sdimg of=/dev/sda + +flash-zero: + sudo dd if=${ROOT_DIR}build/tmp/deploy/images/raspberrypi0-2w-64/core-image-full-cmdline-raspberrypi0-2w-64.rpi-sdimg of=/dev/sda + +clean-all: + ./run_crops.sh bitbake -c cleanall core-image-full-cmdline + +clean-flutter-elinux: + ./run_crops.sh bitbake -c clean flutter-elinux + +clean-flutter-pi: + ./run_crops.sh bitbake -c clean flutter-pi + +clean-flutter-sdk: + ./run_crops.sh bitbake flutter-sdk-native -cdo_cleanall + +clean-flutter-engine: + ./run_crops.sh bitbake flutter-engine -cdo_cleanall +``` + +Mit dem Befehl _make_ wird mit dem _run_crops.sh_ Skript der Docker-Container +gestartet und BitBake mit dem Befehl _bitbake core-image-full-cmdline_ ausgeführt +und somit die komplette Distribution samt Image für die konfigurierte +Zielplattform erstellt. Für BitBake gibt es verschiedene Image Varianten, +_core-image-full-cmdline_ ist eine davon und wurde für das Projekt gewählt, +weil es ein reines Konsolen-Image ist, welches zusätzlich die komplette +Hardware des Zielsystems unterstützt (deshalb "full") [@ImagesYoctoProject]. +Ein Konsolen-Image ist ein Image, welches nur eine Kommandozeile +zur Verfügung stellt und keine Desktop-Umgebung. Das Image wurde gewählt, +weil Flutter-Pi keine Abhängigkeiten von Desktop-Umgebungen wie X11 oder Wayland +hat und somit ein Konsole-Image ausreichend ist. Für Flutter-Auto wurden alle +Wayland Abhängigkeiten manuell in der _local.conf_ Datei hinzugefügt. +Der erste Build dauert je nach der Leistung des Systems unterschiedlich +lang, mit einem AMD Ryzen 7 6800U dauerte der Build ungefähr 5 Stunden. In einem Test +konnte festgestellt werden, dass der Build-Prozess aufgrund eines Fehlers abbrechen kann, bei dem +eine Quelle aus dem Internet nicht gefunden werden kann. Es kann sein, dass der Fehler nur aufgrund +eines kurzzeitigen Netzwerkfehlers auftrat, falls es jedoch passiert, muss der Prozess +nur neugestartet werden. Der Build wird dann an der Stelle fortgesetzt, +an der er abgebrochen wurde und es sollte keine Probleme geben. +Neue Builds dauern später nur wenige Minuten, weil nur die geänderten +Dateien neu kompiliert werden müssen. + +Nachdem das Image für die SD-Karte erstellt wurde, kann es auf die SD-Karte +geschrieben werden. Dafür gibt es zwei Make-Befehle, _flash-pi4_ und _flash-zero_, +welche entweder das Image für den Raspberry Pi 4 oder den Raspberry Pi 0 2W auf +die SD-Karte schreiben. Dazu wird das bei unixoiden Systemen wie Linux und macOS eingebaute _dd_ +Kommandozeilen-Werkzeug genutzt, welches Daten von einem Speichermedium auf ein +anderes kopiert. Dabei ist wichtig zu beachten, dass der Pfad zur SD-Karte in der +Makefile-Datei angepasst werden muss, da der Pfad _/dev/sda_ nur ein Beispiel ist +und je nach System die SD-Karte an einem anderen Pfad angeschlossen ist. + +Zuletzt gibt es noch eine Reihe von Befehlen, um die Build-Umgebung zu säubern, +diese fangen mit _clean_ an und der einzige Befehl der hiervon häufig verwendet +werden muss ist _clean-flutter-elinux_. Dieser Befehl löscht alle gecachten +Dateien vom Flutter-eLinux Projekt, dies ist immer dann notwendig, wenn Änderungen +an dem Projekt gemacht wurden und eine neue Version von Flutter-eLinux genutzt +werden soll. Ansonsten gibt es einen Fehler beim Bauen der Distribution, welcher +jedoch sehr verbos ist und nach vielen Versuchen konnte herausgefunden werden, +dass das Löschen der gecachten Dateien das Problem behebt. +Im folgenden Kapitel werden die Meta-Layer des Projekts genauer beschrieben und +darin wird erklärt wie Flutter-eLinux konfiguriert wurde. + +## Genutzte Meta-Layer {#yoctoLayers} + +In diesem Projekt werden folgende Meta-Layer aus anderen Quellen genutzt, +diese Layer wurden in dem Projekt als Git-Submodule hinzugefügt und sind +auf die jeweiligen Commits festgesetzt worden, um eine reproduzierbare +Erstellung der Distribution zu gewährleisten. Bei der Nutzung von +Meta-Layers ist es zudem wichtig, immer die Branch des Meta-Layers auf +die Version des Yocto Projekts zu setzen, in diesem Fall wurde +immer "kirkstone" genutzt. + +\begin{center} +\begin{table}[h] +\caption{Genutzte Meta-Layer aus anderen Quellen und Commits} +\resizebox{\textwidth}{!}{% +\begin{tabular}{|l|l|} +\hline +Git Adresse des Meta-Layers & Commit \\ \hline +https://github.com/kraj/meta-clang & 312ff1c39b1bf5d35c0321e873417eb013cea477 \\ \hline +https://github.com/meta-flutter/meta-flutter & 82e167a7f13161a4ee9c5a426f13df79987d1055 \\ \hline +https://github.com/openembedded/meta-openembedded & fda737ec0cc1d2a5217548a560074a8e4d5ec580 \\ \hline +https://github.com/agherzan/meta-raspberrypi & 9dc6673d41044f1174551120ce63501421dbcd85 \\ \hline +https://github.com/jwinarske/meta-vulkan & ceb47bd0ed2a9f657fdae48a901e8a41ba697e74 \\ \hline +https://codeberg.org/flk/meta-wayland & cb22939f751c74baa51d9474ba6e8ba647e99756 \\ \hline +\end{tabular}% +} +\end{table} +\end{center} + +Das Meta-Layer "meta-vulkan" wurde nur getestet und nicht weiter genutzt, es +stammt von den Machern des "meta-flutter" Layers und kann in Zukunft +genutzt werden um die Vulkan-Unterstützung von Flutter zu testen. Der +Build der Vulkan Treiber für den Raspberry Pi 4 war im einem Test jedoch nicht erfolgreich. + +Manche der Layer sind Sammel-Layer und enthalten mehrere Layers in sich und neben +den Standard-Layern von Yocto und den Layern aus anderen Quellen wurde noch +ein eigenes Layer "_meta-flutter-elinux_" erstellt, welches angepasste Rezepte +für Flutter-eLinux enthält. In der Auflistung \ref{bbLayers} wird der Inhalt +der _bblayers.conf_ Datei abgebildet, welche die genutzten Meta-layers +für BitBake festlegt. Diese Layer wurden in dem Projekt genutzt für die +angepasste Linux Distribution verwendet. + +```{.bash .number-lines caption="Inhalt der bblayers.conf Datei" captionpos=t label=bbLayers} +YOCTOROOT = "${@os.path.abspath(os.path.join("${TOPDIR}", os.pardir))}" + +BBLAYERS ?= " \ + ${YOCTOROOT}/poky/meta \ + ${YOCTOROOT}/poky/meta-poky \ + ${YOCTOROOT}/poky/meta-yocto-bsp \ + ${YOCTOROOT}/poky/meta-clang \ + ${YOCTOROOT}/poky/meta-raspberrypi \ + ${YOCTOROOT}/poky/meta-openembedded/meta-oe \ + ${YOCTOROOT}/poky/meta-openembedded/meta-python \ + ${YOCTOROOT}/poky/meta-openembedded/meta-networking \ + ${YOCTOROOT}/poky/meta-flutter \ + ${YOCTOROOT}/poky/meta-wayland \ + ${YOCTOROOT}/poky/meta-flutter-apps \ + ${YOCTOROOT}/poky/meta-flutter-elinux \ + " +``` + +Die Layer "meta", "meta-poky", "meta-yocto-bsp", "meta-clang", "meta-oe", +"meta-python" und "meta-networking" sind Standard-Layer welche in dem +Projekt allein für nötige Abhängigkeiten genutzt werden. Auf diese +wird deshalb nicht genauer eingegangen. + +### Meta-Flutter + +Das _meta-flutter_ Layer ist ein Sammel-Layer und enthält Rezepte für +die Flutter Engine, Flutter SDK, Flutter Beispiel Apps und die verschiedenen +Embedder für Flutter zur Nutzung im eingebetteten Linux. Das Layer +wird von dem Hauptentwickler Joel Winarske gepflegt, welcher bei +Toyota Connected North America (TCNA) arbeitet und es wurde +unter der MIT Lizenz unter GitHub veröffentlicht [@joelwinarskeMetaflutterMetaflutter2024]. + +Aus dem Layer wird die Flutter Engine zusammen mit den zwei Embeddern +Flutter-Pi und Flutter-Auto genutzt. + +### Meta-Flutter-Apps + +Das _meta-flutter-apps_ Layer ist eine Kopie aus dem _meta-flutter-apps_ innerhalb des +_meta-flutter_ Layers, in der das Rezept für Flutter-eLinux hinzugefügt wurde. +Der Ordner wurde kopiert, da _meta-flutter_ als Submodul hinzugefügt wurde und +nicht direkt bearbeitet werden sollte. + +Das Rezept für Flutter-eLinux ist unter _poky/meta-flutter-apps/recipes-graphics/flutter-apps/third-party/flutter-elinux_git.bb_ +zu finden und enthält nur Variablen, mit dem die Flutter-App angepasst werden kann. +In der Variable _SRC_URI_ werden alle Git Adressen des Flutter-eLinux Projekts und +seinen Submodulen definiert und es wird ein Nutzername mit Passwort gesetzt um +die Quellen erreichen zu können, da die Git Adressen privat sind. +Die Commits werden in "SRCREV" Variablen definitert. "SRCREV" steht für das Hauptprojekt, +"SRCREV_vkml" für das "virtual_keyboard_multi_language" Paket und "SRCREV_rtc" für das +"real_time_graph" Paket. Wenn diese Commits geändert werden um eine neue Version +von Flutter-eLinux zu nutzen, muss wie erwähnt vor dem nächsten Build +der Befehl `make clean-flutter-elinux` ausgeführt werden. + +### Meta-Wayland + +Das _meta-wayland_ Layer ist ein Sammel-Layer für Wayland und enthält Rezepte +für viele Wayland Komponenten. Aus dem Layer wurde der Wayland Kiosk Cage +verwendet, welcher mit Flutter-Auto genutzt wurde. Cage ist ein Open-Source +Projekt, welches auf GitHub veröffentlicht wurde [@CagekioskCage2024]. + +Bevor Cage verwendet wurde, wurde versucht Weston als Wayland-Desktop zu nutzen, +Weston ist ein Referenz Wayland-Compositor der auf GitLab veröffentlicht +wurde [@WaylandWestonGitLab2024]. Doch der Kiosk Modus von Weston ist zu limitiert und braucht zwingend einen +Output-Namen des Bildschirms, welcher jedoch bei verschiedenen eingebetteten +Systemen dann nicht immer gleich wäre. Im Test konnte Weston auch nie erfolgreich +im Kiosk Modus mit einem der Flutter Embedder gestartet werden. Cage hingegen +erscheint einfacher in der Konfiguration und konnte erfolgreich die Embedder +starten. Bei Weston ist jedoch zu beachten, dass im normalen Desktop-Modus +die Flutter Embedder auf 30 Bilder pro Sekunde limitiert sind, obwohl der +Desktop in 60Hz läuft. Hier ist nicht klar warum es zu diesem Bug kommt. In der _local.conf_ +kann Weston in der _IMAGE_INSTALL_ Variable hinzugefügt werden, wenn es getestet werden soll. +Es sollte dabei auch darauf geachtet werden, dass keiner der Embedder mehr automatisch startet (im Folgenden +wird erklärt wie die Embedder konfiguriert sind). + +### Meta-Flutter-eLinux + +In _meta-flutter-elinux_ wurden speziell für das Projekt notwendige Rezepte erstellt. +In Abbildung \ref{metaFlutterElinux} ist die Ordnerstruktur des Layers dargestellt. + +\begin{figure}[H] +\caption{Ordnerstruktur des meta-flutter-elinux Layers} +\label{metaFlutterElinux} +\centering +\begin{minipage}{10cm} +\dirtree{% +.1 meta-flutter-elinux/. +.2 recipes-core/. +.3 custom-scripts/. +.4 files/. +.5 flutter-auto-launch/. +.4 flutter-auto-launch\char`\_1.00.bb. + .3 flutter-elinux-rules/. + .4 files/. + .5 90-interfaces.rules. + .4 flutter-elinux-rules\char`\_1.00.bb. +.3 flutter-user/. +.4 flutter-user\char`\_1.00.bb. + .3 systemd/. + .4 files/. + .5 flutter-auto.service. + .5 flutter-pi.service. + .4 flutter-auto-service\char`\_1.00.bb. +.4 flutter-pi-service\char`\_1.00.bb. + .4 systemd\char`\_\%.bbappend. +.3 systemd-conf/. +.4 files/. +.5 en.network. +.5 eth.network. +.5 wlan.network. +.4 systemd-conf\char`\_\%.bbappend. +} +\end{minipage} +\end{figure} + +Das Rezept _flutter-elinux-rules_ enthält die Udev-Regeln, welche für die +Kommunikation zwischen Flutter-eLinux und dem Host-System notwendig sind. In dieser +wird definiert, dass die Gruppe "gpio" Zugriff auf die GPIO-Pins des Raspberry Pi +bekommt und die Gruppe "spidev" Zugriff auf die SPI-Schnittstelle. +Die Regeln werden in der Datei _90-interfaces.rules_ definiert. Nach einer längeren +Recherche konnten diese Regeln in einer Maillist von Yocto gefunden werden. In dieser +wurde eine Beispielkonfiguration mit den GPIO und SPI Regeln von Markus W genannt [@Metaraspberrypi]. +Das _flutter-user_ Rezept erzeugt den Nutzer _user1_, welcher Teil der Gruppen +_video_, _input_, _gpio_ und _spidev_ ist. Die Gruppen _video_ und _input_ sind +für die Nutzung des Bildschirms und der Touch-Eingabe notwendig. Nur nachdem die +Udev-Regeln und der Nutzer erstellt wurden, kann Flutter-eLinux korrekt genutzt werden. +Vorher funktionierte das Ansprechen der GPIO-Pins und der SPI-Schnittstelle nicht. +Der Nutzer war auch notwendig, weil der Flutter-Auto Embedder nur mit Wayland +gestartet werden kann und Wayland kann nicht als Root-Nutzer gestartet werden. + +In dem _systemd-conf_ und _systemd_ Verzeichnis wurde die Netzwerkkonfiguration +definiert, welche aus einer Anleitung dazu vom Mender Hub Forum stammt [@drewmoseleyHowConfigureNetworking2023]. +Es kam auch die Idee Systemd-Service-Dateien zu nutzen, um die Embedder mit Flutter-eLinux +automatisch beim Start des Systems zu starten. Dazu wurden die Dateien _flutter-auto.service_ +und _flutter-pi.service_ erstellt, welche mit den Rezepten _flutter-auto-service_ und +_flutter-pi-service_ jeweils in der _local.conf_ aktiviert werden können in der +Variable _IMAGE_INSTALL_. Dabei ist wichtig immer nur einen der beiden Embedder zu +aktivieren. Der Systemd-Service wurde zusätzlich auch so konfiguriert, dass der Service bei +einem Absturz automatisch neu gestartet wird. In der Praxis konnte bestätigt werden, dass +in einem Absturz beim Raspberry Pi 0 2W der Embedder automatisch neu gestartet wurde. + + + + diff --git a/chapters/07_zusammenfassung_und_ausblick/01_vergleich.md b/chapters/07_zusammenfassung_und_ausblick/01_vergleich.md deleted file mode 100644 index 3df5365..0000000 --- a/chapters/07_zusammenfassung_und_ausblick/01_vergleich.md +++ /dev/null @@ -1,18 +0,0 @@ -# Zusammenfassung - -## Benchmark - -\begin{center} - -\begin{table}[h] -\resizebox{\textwidth}{!}{% -\begin{tabular}{|l|l|l|} -\hline -Flutter Embedder & Ergebnisse (Animationen nach 30 Minuten) & Durchschnittlich (gerundet) \\ \hline -Flutter-Pi & 537, 543, 544 & 541 \\ \hline -Flutter-Auto mit Cage & 1025, 1163, 1129 & 1106 \\ \hline -\end{tabular}% -} -\end{table} - -\end{center} diff --git a/chapters/07_zusammenfassung_und_ausblick/02_bewertung.md b/chapters/07_zusammenfassung_und_ausblick/02_bewertung.md deleted file mode 100644 index e69de29..0000000 diff --git a/chapters/07_zusammenfassung_und_ausblick/03_zusammenfassung_ausblick.md b/chapters/07_zusammenfassung_und_ausblick/03_zusammenfassung_ausblick.md deleted file mode 100644 index e69de29..0000000 diff --git a/chapters/08_ergebnis/00_ergebnis.md b/chapters/08_ergebnis/00_ergebnis.md new file mode 100644 index 0000000..bd52510 --- /dev/null +++ b/chapters/08_ergebnis/00_ergebnis.md @@ -0,0 +1,177 @@ +# Ergebnis + +## Systemauslastung von Flutter + +Aus dem "System Informationen" Feature konnte abgelesen werden, +dass direkt nach dem Start von Flutter-Pi ein RAM Verbrauch von ungefähr 130 MB +und bei Flutter-Auto ungefähr 160 MB angezeigt wird. Die 30MB Differenz liegt +daran, dass bei Flutter-Auto zusätzlich noch Cage und Wayland gestartet werden. + +Die CPU Auslastung schwankt bei beiden Embeddern ungefähr zwischen 15 und 20 Prozent. +Hier ist zu beachten, dass das nicht die CPU Auslastung im vollem Leerlauf ist, da +auch die Graphen angezeigt werden, doch ist es ein guter Annäherungs-Wert für einen +ungefähren Wert bei Inhalten mit wenig Animationen. + +## Benchmark Ergebnisse + +### Flame Sprite Rendering Benchmark Ergebnis + +Der Flame Sprite Rendering Benchmark wurde drei mal +auf jedem Gerät und Embedder durchgeführt, am Raspberry Pi 4 +wurde zusätzlich noch Flutter im normalen Desktop Modus +vom Raspberry Pi OS getestet. Die Ergebnisse sind in +Tabelle \ref{flameSpriteRenderingBenchmark} und \ref{flameSpriteRenderingBenchmark2} zu sehen. + +Mit einem Benchmark an einem Macbook Air mit dem Apple M2 Chip konnte ein Wert von ungefähr 1680 erreicht werden. +Dieser Wert wird als Referenzwert für den Maximalwert genommen, der bei dem Benchmark mit der Verzögerung innerhalb +der 30 Minuten erreicht werden kann, denn ohne Verzögerung erreicht der M2 Chip über 22000 Animationen bevor die +Framerate auf unter 60 Bilder pro Sekunde fällt. Im Benchmark Test wird der M2 Chip so nicht ausgelastet und die +1680 Animationen sind rein durch die Verzögerung bedingt. Keiner der Embedder an den Testgeräten konnte den Referenzwert erreichen, +es wird also kein Embedder "ausgebremst" im Test. + +\begin{center} + +\begin{table}[h] +\caption{Flame Sprite Rendering Benchmark Ergebnisse am Pi 4} +\label{flameSpriteRenderingBenchmark} +\resizebox{\textwidth}{!}{% +\begin{tabular}{|l|l|l|} +\hline +Flutter Embedder & Ergebnisse (Animationen nach 30 Minuten) & Durchschnittlich (gerundet) \\ \hline +Flutter-Pi & 537, 543, 544 & 541 \\ \hline +Flutter-Auto mit Cage & 1025, 1163, 1129 & 1106 \\ \hline +Flutter Desktop & 223, 211, 212 & 215 \\ \hline +\end{tabular}% +} +\end{table} + +\end{center} + +\begin{center} + +\begin{table}[h] +\caption{Flame Sprite Rendering Benchmark Ergebnisse am Pi 0 2W} +\label{flameSpriteRenderingBenchmark2} +\resizebox{\textwidth}{!}{% +\begin{tabular}{|l|l|l|} +\hline +Flutter Embedder & Ergebnisse (Animationen nach 30 Minuten) & Durchschnittlich (gerundet) \\ \hline +Flutter-Pi & 376, 427, 390 & 398 \\ \hline +Flutter-Auto mit Cage & 736, 739, 712 & 729 \\ \hline +\end{tabular}% +} +\end{table} + +\end{center} + +Es lässt sich festhalten, dass Flutter-Auto eine deutlich +bessere Leistung aufweist als Flutter-Pi. Am Pi 4 ist Flutter-Auto +im Durchschnitt ungefähr 68.6 Prozent schneller als Flutter-Pi und +am Pi Zero 2W ist Flutter-Auto im Durchschnitt ungefähr 58.74 Prozent +schneller. + +Außerdem lässt sich festhalten, dass Flutter im normalen +Desktop Modus mit dem offiziellen Embedder für Linux sehr +schlecht abschneidet. Die Anwendung ist spürbar langsamer +und hat zusätzlich große Probleme bei der Touch-Eingabe, +denn Wischgesten werden nicht erkannt und man kann nicht +die Liste im News Feature scrollen, nur normale Klicks +werden erkannt. + +### Rogue Shooter Benchmark Ergebnis + +Der Rogue Shooter zeigt wie auch der Flame Sprite Rendering +Benchmark, dass Flutter-Auto die beste Leistung aufweist. +Mit Flutter-Auto am Pi 4 ist die Framerate meistens im Bereich von +50 Bildern pro Sekunde und bricht manchmal kurz auf den +40er Bereich ein, selten kommt es zu einem Einbruch auf +den 30er Bereich. Flutter-Pi hingegen bricht sehr oft in +den 40er und 30er Bereich ein. +Am Pi Zero 2W ist die Leistung anfangs auch gleichermaßen +deutlich besser, sie bricht jedoch sowohl bei Flutter-Pi +und Flutter-Auto auf ungefähr genau 30 Bilder pro Sekunde +ein und bleibt durchgehend auf diesem Niveau. Hier ist +nicht genau klar weshalb die Framerate förmlich auf 30 +Bilder pro Sekunde eingefroren wird, es erscheint ähnlich +zu einem "Framerate Lock" auf 30 Bilder was jedoch nicht +in Flutter oder Flame eingestellt wurde und Flutter sollte +immer versuchen die maximale Framerate zu erreichen. + +### VSync Test Ergebnis + +Der VSync Test zeigt, dass sowohl Flutter-Pi als auch +Flutter-Auto auf beiden Testgeräten ohne Tearing Effekte +laufen. Wird in den Einstellungen das Performance-Overlay +aktiviert, so kann man sehen, dass besonders bei Flutter-Pi +leichte Tearing Effekte auftreten. Es lässt sich also +festhalten, dass allein das Betrachten der Leistung +mit dem Overlay die Leistung beeinträchtigt. + +### Video Benchmark Ergebnis + +Sowohl der Raspberry Pi 4 als auch der Raspberry Pi Zero 2W +können das Video in der Auflösung von 720p flüssig +wiedergeben. Schon bei der Auflösung von 1080p gibt es +jedoch Probleme. Der Pi 4 kann das Video noch fast +flüssig wiedergeben mit einer leicht verzögerten Wiedergabe +und der Pi Zero 2W zeigt starke Verzögerungen +beim Abspielen des Videos. Die Wiedergabe in 4K ist +auf beiden Geräten nicht möglich, es ruckelt stark am Pi 4 +und der Pi Zero 2W friert beim Video fast komplett ein. +Wie bereits genannt unterstützt nur Flutter-Pi die +Wiedergabe von Videos. + +### Simple Tiles Map Benchmark Ergebnis + +Die Karte kann am Raspberry Pi 4 flüssig ohne Probleme +gerendert werden und auch Multi-Touch Eingaben werden +ohne Ruckler oder Verzögerungen verarbeitet. Beim Raspberry +Pi Zero 2W gibt es jedoch Probleme, wenn man die Sicht zu schnell +die Sicht über die Karte bewegt kann die +Karte nicht mehr flüssig gerendert werden und es kann +dazu kommen, dass die Anwendung kurz einfriert und manchmal +auch abstürzt. Hier kommt der Pi Zero 2W an +seine Grenzen vom Arbeitsspeicher. + +## Bewertung von Flutter als Entwicklungsplattform für eingebettetes Linux + +Alle der Anforderungen für die geplante Flutter Anwendung konnten erfüllt werden +und die Anwendung konnte erfolgreich mit beiden Embeddern in einer angepassten +Linux Distribution getestet werden. Besonders herauszustellen ist, dass durch +das Hot-Reload Feature von Flutter die Entwicklung sehr effizient und schnell +von statten ging. Zusätzlich ist die Dokumentation von Flutter sehr gut, doch +speziell für die Entwicklung von Flutter in eingebetteten Systemen und anderen +Embeddern als Desktop und Mobile, gibt es nur wenige Informationen, welche +verstreut im Internet herausgesucht werden mussten um das Projekt erfolgreich +umzusetzen. Der Einsatz der CustomPainter in Flutter zeigte auch, dass man +falls notwendig in Flutter relativ einfach angepasste komplexere Widgets +erstellen kann wie die Pixel-Matrix für die Ansteuerung der RGB-Matrix. + +## Zukünftige Verbesserungen und Ideen + +### Behebung von Fehlern + +Das Fokus-Problem bei Flutter-Auto muss behoben werden um +die es produktionsbereit zu machen. Es sollte hier +untersucht werden, ob das Problem durch die Nutzung von +Cage als Wayland-Kiosk verursacht wird. + +Des weiteren sollte analysiert werden, weshalb die SharedPreferences +bei der ersten Verwendung nicht abgespeichert werden. + +### Neue Rendering-Engine + +Flutter bekommt in Zukunft eine neue Rendering-Engine names +"Impeller" welche SKIA ersetzen wird. Hier kann untersucht +werden ob Impeller die Leistung von Flutter mit Linux und +den anderen Embeddern verbessert. Zum Zeitpunkt der Arbeit +unterstützt Impeller offiziell nur iOS und die Unterstützung +für Android ist in der Beta Phase. Unter macOS kann Impeller +auch bereits als "Preview" getestet werden. +Impeller wird zusätzlich auch in Zukunft unter allen anderen +Plattformen als iOS und macOS die Vulkan API unterstützen. +Der zusätzliche Wechsel von OpenGL zu Vulkan könnte die +Leistung eventuell auch verbessern, da Vulkan eine modernere +API ist und der Nachfolger von OpenGL ist. [@googleinc.ImpellerRenderingEngine] + +# Schlussfolgerung diff --git a/chapters/08_literatur/00_literature.md b/chapters/08_literatur/00_literature.md deleted file mode 100644 index 394d08f..0000000 --- a/chapters/08_literatur/00_literature.md +++ /dev/null @@ -1,5 +0,0 @@ -\pagebreak - -# Literaturverzeichnis - -\setstretch{1.0} diff --git a/chapters/07_zusammenfassung_und_ausblick/.DS_Store b/chapters/09_schlussfolgerung/.DS_Store similarity index 91% rename from chapters/07_zusammenfassung_und_ausblick/.DS_Store rename to chapters/09_schlussfolgerung/.DS_Store index 4f437d4..8225ac3 100644 Binary files a/chapters/07_zusammenfassung_und_ausblick/.DS_Store and b/chapters/09_schlussfolgerung/.DS_Store differ diff --git a/chapters/09_schlussfolgerung/00_schlussfolgerunf.md b/chapters/09_schlussfolgerung/00_schlussfolgerunf.md new file mode 100644 index 0000000..750c0b1 --- /dev/null +++ b/chapters/09_schlussfolgerung/00_schlussfolgerunf.md @@ -0,0 +1,21 @@ +Mit der Fallstudie in dieser Arbeit konnte ausführlich gezeigt werden, +wie Flutter sehr gut für die Entwicklung im Bereich eingebetteter Linux Systeme +genutzt werden kann. Es konnte demonstriert werden, dass es notwendig ist, bei +eingebetteten Linux Systemen die angepassten Embedder wie Flutter-Pi oder Flutter-Auto +zu verwenden, um eine gute Leistung zu erzielen. Hätte man so nur Flutter +mit dem normalen Raspberry Pi OS untersucht, wäre man zu dem Schluss gekommen, +dass Flutter für eingebettete Systeme nicht gut geeignet ist aufgrund der gezeigten +schlechten Leistung. Für die maximale Leistung erscheint Flutter-Auto am besten geeignet. + +Außerdem lässt sich festhalten, dass besonders die Entwicklungserfahrung mit Flutter +und Dart sehr angenehm ist. Die Sprache ist gut strukturiert und durch Features +wie dem Hot-Reload kann sehr effizient auch im eingebetteten Bereich gearbeitet werden +und es war möglich eine recht große Anwendung im kurzen Zeitraum der Bachelorarbeit +zu entwickeln. + +Die Dokumentation von Flutter im eingebetten Bereich ist jedoch sehr dürftig und +man muss sich fast alles selber erarbeiten. Als Endfazit kann so festgehalten werden, +dass die größte Herausforderung der Arbeit die Einarbeitung in die Thematik war und +mit dem durch die Arbeit erworbenen Wissen, sehr schnell und effizient weitere +Anwendungen für eingebettete Linux Systeme entwickelt werden könnten und weitere +Untersuchungen in diesem Bereich angestellt werden könnten. diff --git a/chapters/99_literatur/00_literature.md b/chapters/99_literatur/00_literature.md new file mode 100644 index 0000000..a3440c4 --- /dev/null +++ b/chapters/99_literatur/00_literature.md @@ -0,0 +1,26 @@ +\pagebreak + +# Literaturverzeichnis + +\setstretch{1.0} + +
+ +\pagebreak + + +\section*{Selbstständigkeiterklärung} +\addcontentsline{toc}{section}{\protect\numberline{}Selbstständigkeiterklärung} + +Hiermit erkläre ich, Fabian Baldeau, dass ich die hier vorliegende Arbeit selbstständig und ohne unerlaubte Hilfsmittel +angefertigt habe. Informationen, die anderen Werken oder Quellen dem Wortlaut oder dem Sinn nach entnommen sind, habe ich kenntlich +gemacht und mit exakter Quellenangabe versehen. Sätze oder Satzteile, die wörtlich übernommen wurden, wurden als Zitate +gekennzeichnet. Die hier vorliegende Arbeit wurde noch an keiner anderen Stelle zur Prüfung vorgelegt und weder ganz noch in Auszügen veröffentlicht. +Bis zur Veröffentlichung der Ergebnisse durch den Prüfungsausschuss werde ich eine Kopie dieser Studienarbeit aufbewahren und wenn nötig zugänglich machen. + +\ + +\noindent\begin{tabular}{ll} +\makebox[2.5in]{\hrulefill} & \makebox[2.5in]{\hrulefill}\\ +Ort, Datum & Unterschrift\\[8ex]% adds space between the two sets of signatures +\end{tabular} diff --git a/chapters/08_01_references/00_mermaid b/chapters/99_references/00_mermaid similarity index 100% rename from chapters/08_01_references/00_mermaid rename to chapters/99_references/00_mermaid diff --git a/chapters/08_01_references/01_code b/chapters/99_references/01_code similarity index 100% rename from chapters/08_01_references/01_code rename to chapters/99_references/01_code diff --git a/chapters/08_01_references/02_image b/chapters/99_references/02_image similarity index 100% rename from chapters/08_01_references/02_image rename to chapters/99_references/02_image