ardera / flutter-pi

A light-weight Flutter Engine Embedder for Linux Embedded that runs without X11 or Wayland.
MIT License
1.58k stars 159 forks source link

Apps launch and UI visible but no response to touch. No text visible in apps. #178

Open octonout opened 3 years ago

octonout commented 3 years ago

Hello. I have been trying to get flutter apps to run on my RPi 3B+ that is running a Yocto image. Haven't had much success yet.

Target: Raspberry Pi 3B+ OS: Yocto (Dunfell) with raspberrypi3-64 as the MACHINE (64-bit). I am using the meta-flutter layer developed by jwinarske.

Display: Waveshare 7inch HDMI LCD (B). Resolution: 800x480. Dimensions: 154.08, 85.92. Display config added to /boot/config.txt:

max_usb_current=1
hdmi_group=2
hdmi_mode=87
hdmi_cvt 800 480 60 6 0 0 0
hdmi_drive=1

From the meta-flutter layer I have added flutter-pi and flutter-gallery to the Yocto image.

I have tried running flutter-gallery. Command: $ flutter-pi -i /dev/input/touchscreen0 -d "154,86" --release /usr/share/flutter-gallery/sony/data/flutter_assets/ The app is launched and the UI is visible. But the app does not accept any touch input. Output displayed by flutter-pi: pastebin

Sidenote: Before I had the fontconfig package installed I used to get these errors in the flutter-pi output:

Fontconfig error: Cannot load default config file
Fontconfig error: Cannot load default config file

Using $ cat /dev/input/touchscreen0 and then touching the touchscreen produces random output. Touching anywhere on the screen does this. So I am guessing that touch is set up correctly?

Because the flutter-gallery app wasn't working, I decided to try and make my own app using the instructions you have provided in the README.md.

These are the commands I used. Hope nothing is wrong here.

$ <path-to-dart-sdk-bin-dir>/dart \
<path-to-dart-sdk-bin-dir>/snapshots/frontend_server.dart.snapshot \
--sdk-root ~/flutter_development/flutter/bin/cache/artifacts/engine/common/flutter_patched_sdk_product \
--target=flutter --aot --tfa -Ddart.vm.product=true --packages .packages \
--output-dill build/kernel_snapshot.dill --verbose --depfile build/snapshot_blob.bin.d \
package:codelab_app/main.dart
$ <path-to-arm64-engine-binaries>/gen_snapshot_linux_x64_release \
--deterministic --snapshot_kind=app-aot-elf \
--elf=build/flutter_assets/app.so --strip build/kernel_snapshot.dill

The apps I created launch on the Pi. But none of the text is visible on the screen. For the flutter example app, the appbar on top doesn't show the title. There is no text showing the current value of the counter. And touching the + button does nothing, there is not animation on the button when its touched. Output: pastebin

App 2 is the app that gives infinite word pairs on scrolling. It runs and has the same problem, no title text is visible in the appbar. This app has a listview with lines dividing the list tiles. The divider between the list tiles isn't shown. Touching the screen does nothing. Output: pastebin

These apps run fine on my Linux Desktop. At this point I am kind of out of ideas. I am new to flutter and I don't know much about the how flutter-pi works so I am having difficulty in troubleshooting this. Sorry that this post is so long.

Any help is appreciated. Thanks.

P.S. Earlier I was facing an issue with flutter-pi where touching the button in the top right corner used to produce this error: pastebin: https://pastebin.ubuntu.com/p/qhDcDVKg4j/ Now touching that button does nothing. Installing fontconfig might have fixed it. I am not sure how those two could be connected.

ardera commented 3 years ago

Hello,

can you try launching flutter-pi without the -i /dev/input/touchscreen0 option? It's more likely you break something when you specify that option actually 😄

The missing text probably means some font is missing, additional to the fontconfig package, did you install the arial font? I think the flutter_embedded readme also hints that but maybe something went wrong in that step

Earlier I was facing an issue with flutter-pi where touching the button in the top right corner used to produce this error: pastebin: https://pastebin.ubuntu.com/p/qhDcDVKg4j/

I think this is a flutter-pi "bug". Flutter-pi currently doesn't tell flutter about the system locale, which could result in the "textDirection" being null. (Which is what caused that exception) "Bug" in quotation marks because the embedder API should be backwards compatible and that possibility to give flutter the system locale is a pretty new feature. I'll fix it

octonout commented 3 years ago

Hi. Thanks for replying.

The missing text probably means some font is missing, additional to the fontconfig package, did you install the arial font?

I hadn't installed the Arial font. Just installed the 2 packages that had Arial fonts. And now the text is visible in both the apps I made :grin:. Just in case it could help someone, the packages were liberation-fonts and ttf-liberation-sans-narrow. Just bitbake those two packages and install them on your Pi.

can you try launching flutter-pi without the -i /dev/input/touchscreen0 option?

Tried launching all apps without the -i /dev/input/touchscreen0 option. The apps are still not responding to touches or swipes.

"Bug" in quotation marks because the embedder API should be backwards compatible and that possibility to give flutter the system locale is a pretty new feature. I'll fix it

Cool. :thumbsup:

Any idea what could I look at next to solve the touch issue?

Update: Just tried out evtest utility on the Pi. It detects the WaveShare touch input. This is the output I get: pastebin

Does flutter-pi rely on some kind of touch calibration like jwinarske has mentioned here?: Touch Panel Calibration

ardera commented 3 years ago

Have you made sure you use the latest flutter-pi? Actually very important in this case, added a workaround for flutter 2.2 recently that fixed an issue exactly like this. Can you add some kind of print("pressed") statement inside the onPressed callback in any of your apps buttons and then try to tap them? Just to make sure it's not the display pipeline locking up instead

Does flutter-pi rely on some kind of touch calibration like jwinarske has mentioned here?: Touch Panel Calibration

that depends on your display. For some displays the touch coords are rotated, though if that's the case you should see that with evtest. ABS_X and ABS_Y are the reported x and y values. Top left of the screen should be low x, low y, top right high x, low y, bottom right high x, high y etc. If that's not the case for you, for example when you touch the top right of the screen and ABS_X of 0 and ABS_Y of 0 are reported, you can rotate the touchscreen coordinates like this: https://github.com/ardera/flutter-pi/issues/164#issuecomment-841879291

octonout commented 3 years ago

Have you made sure you use the latest flutter-pi? Actually very important in this case, added a workaround for flutter 2.2 recently that fixed an issue exactly like this.

meta-flutter flutter-pi recipe was using 8e7432ce1be2691e38942b301fb0dbf7b3e4e608 commit of flutter-pi. I overrode it to use the latest commit. Now all apps work fine :grin:. Touch works well too, didn't have to calibrate it.

The apps seems to run at 60fps most of the time. Although the Reply demo in the flutter-gallery app lags when scrolled. And there are screen tears when images are scrolled. Otherwise everything seems to work as expected.

Thanks a lot for the help.