[Plugin] Touch Display Lite

[fenzo]

Hi guys

I have created a lightweight touch display plugin. It is designed for the official Raspberry Pi 7-inch touch display (could work for other touch screens). I wanted a simple, minimal interface that works well for Volumio in landscape mode and legible at a distance. 2aCD’s mods and the Now Playing plugin are great. But I wanted a more “spartan” interface, and preferably implemented natively. So I wrote this. A few features,

• Designed for landscape mode. The official Volumio Touch Display plugin works best in portrait mode. But the 7-inch touch display is too tall in portrait mode.

• Good performance even on Raspberry Pi 3.

• Touch-native UI, similar to mobile apps. It runs on flutter-pi and no X-server is used at all.

I am sharing it to see whether this is useful to others. Bear in mind that this is in early stage and could be buggy. I have only tested it on my own setup (Pi 3, 7-in touch display, Volumio 3).

Download:

Touch Display Lite releases. Latest is 0.1.0.

Development:

GitHub - zf3/volumio_touch_display_lite: A clean front-end plugin to Volumio,...

[fenzo]

Here is what it looks like,

[fm-maniac]

Fenzo, this looks promising! Exactly what I’m looking for. I’ve a 7inch Wavehare LCD and as soon I’ll fin the time I’ll give your plugin a try on my test system!

[Josh2000]

Hi Fenzo,

Great - i think i do also have a use case for it. Thank you.

Would it be ease to invert the backgrond color (to black) to give the cover art more attention ? ( Unfortunately I am not a coder…)

Best Regards
Josef

[Wheaten]

not black but a “darker shade of white” like (45,45,45)

[fenzo]

Josef,

An option for a darker theme sounds good. Will do when I get to it.

[fenzo]

Happy New Year, everyone!

I am happy to release Touch Display Lite 0.2.0.

What’s New:

1. Dark Mode. You can enable dark mode on the settings screen. @Josh2000
2. Default directory setting. This is also changeable on the settings screen. Press the “Home” tab once to go to the default directory. Press it once more to go to “root” (the list of all music sources).
3. Repeat button. It was missing in v0.1.0.

The installation instructions in README are also improved.

Zip file download is still available from github

p.s. Dark mode screen shot:

[chsims1]

Good stuff here. I know we are all interested most in the sound, but visual displays are an important part of the whole audio experience too. Well done.

[Erik_Gerhardt]

Hallo,

this plugin look realy nice, but is it possible to use it on a 5 zoll touchdisplay too?
I install it normal and the touch position is not on the correct possition.

Regards
Erik

[fenzo]

What is the model of your display?

It could be due to the kernel using wrong resolution for HDMI. There is a bit of documentation in the readme about troubleshooting this. Search for “HDMI touch screens” on that page.

Let me know if it helps.

[Eduardo2022]

Great job!
It looks simple and clean.
But one topic does not work for me - maybe you have an idea.
If I click on the left side to this “home” area, I only see my mp3 files that are stored locally, but I can not select e.g.: internet radio, … . It is only a list of my mp3s.
Do you have an idea?
I have 7-inch display and newest volumio and plugin - just installed last weekend.
Many thanks
Best regards
Eduardo

[fenzo]

The “default directory” is where you go to when you press the home tab. It is changeable on the settings screen. So you are free to have quick access to any directory. Press the “Home” tab once to go to the default directory. Press it again to go to “root” (the list of all music sources).

[Sulfurman]

Hello fenzo. Thank you very much for your plugin.
I have the same problem of Erik. The touch doesn’t work in the correct position. It seems like i touch on a specular screen…
If i touch top right is like i touched down left.
If i touch down center is like i touched top center
and so on…

I have a DSI 5 inch monitor that is correctly recognized by flutter. In the journal i can read
display mode:
flutter-pi[1075]: resolution: 800 x 480
flutter-pi[1075]: refresh rate: 60Hz
flutter-pi[1075]: physical size: 155mm x 86mm
flutter-pi[1075]: flutter device pixel ratio: 1.358234

but also the warning:
[flutter-pi] WARNING: display has non-square pixels. Non-square-pixels are not supported by flutter.
Is there any customization i can do to have the correct touching position?

Thank you in advance.

[dvo]

[edit] … do what Wheaten says … [edit]

[Wheaten]

Sounds like you need to add the touch orientation, “-1 0 1 0 -1 1 0 0 1”

[Sulfurman]

Hi Wheaten, and dvo.
Thank you for your quick response.
I’m a newbie…
Where i have to put the touch orientation, “-1 0 1 0 -1 1 0 0 1” ?

[Wheaten]

Not sure if these instructions will work for this plugin, as I am not familiar with this one.
Have a look here:

[TUTO] touchscreen rotations

Hi everyone! After many hours to find the solution I finally found it! And since I could not find a complete answer on this forum I decided to create a topic on the subject. So here is a topic on How to rotate EVERY touchscreens. 1- Connect to volumio with ssh. 2- Got to: sudo nano /boot/config.txt And add this: display_rotate=3 This rotate the picture at 270° but not the touch (for other rotations: display_rotate=1 —>90 degrees; display_rotate=2 —>180 degrees). To do that you have to: …

[Wheaten]

For my x86 box i did the following:

volumio@volumiorc:/opt$ sudo apt-get update && sudo apt-get install xinput

volumio@volumiorc:/opt$ sudo DISPLAY=:0 xinput list
⎡ Virtual core pointer                          id=2    [master pointer  (3)]
⎜   ↳ Virtual core XTEST pointer                id=4    [slave  pointer  (2)]
⎜   ↳ Wacom Pen and multitouch sensor Finger    id=9    [slave  pointer  (2)]
⎜   ↳ MSFT0001:00 04F3:303A Mouse               id=11   [slave  pointer  (2)]
⎜   ↳ MSFT0001:00 04F3:303A Touchpad            id=12   [slave  pointer  (2)]
⎜   ↳ ImPS/2 Logitech Wheel Mouse               id=18   [slave  pointer  (2)]
⎣ Virtual core keyboard                         id=3    [master keyboard (2)]
    ↳ Virtual core XTEST keyboard               id=5    [slave  keyboard (3)]
    ↳ Video Bus                                 id=6    [slave  keyboard (3)]
    ↳ Power Button                              id=7    [slave  keyboard (3)]
    ↳ Sleep Button                              id=8    [slave  keyboard (3)]
    ↳ Wacom Pen and multitouch sensor Pen       id=10   [slave  keyboard (3)]
    ↳ Intel Virtual Button driver               id=13   [slave  keyboard (3)]
    ↳ Intel HID events                          id=14   [slave  keyboard (3)]
    ↳ Intel HID 5 button array                  id=15   [slave  keyboard (3)]
    ↳ Dell WMI hotkeys                          id=16   [slave  keyboard (3)]
    ↳ AT Translated Set 2 keyboard              id=17   [slave  keyboard (3)]

Since I needed to invert the screen and touch orientation:

nano ~/scripts/rotate_normal.sh
sudo xrandr -d :0 -o inverted
sudo DISPLAY=:0  xinput set-prop 'Wacom Pen and multitouch sensor Finger' 'Coordinate Transformation Matrix' -1 0 1 0 -1 1 0 0 1

chmod 775 ~/scripts/rotate_inverted.sh

sudo nano /opt/volumiokiosk.sh
replace: while true; do timeout 3 bash -c "</dev/tcp/127.0.0.1/3000" >/dev/null 2>&1 && break; done

with: while true; do timeout 3 bash -c "</dev/tcp/127.0.0.1/3000" >/dev/null 2>&1 && /bin/bash /home/volumio/scripts/rotate_inverted.sh && break; done

[Sulfurman]

@Wheaten

sudo apt-get install xinput

xinput works with XServer.
This plugin works without it. It uses flutter-pi.
I’ll search and will let you know.
Thanks again.

[Sulfurman]

SOLVED!!!
Just commented lcd_rotate=2 in /boot/config.txt and now everything is ok!