VOLUMIO Project with 1920 display and PeppyMeter as screensaver

Volumio Development
#1

Hi together.

I would like to share here my experiences with the FullHD AMOLED display from waveshare with VOLUMIO.
The point is, it’s a 1080x1920 display and not a 1920x1080. I have learned, that’s not the same. Per default this display runs in portrait mode an not in landscape. You can rotate it 90 degree, but it’s not a hardware rotation, it’s a hard work for the GPU to rotate all content. A smooth scrolling is not more possible with chromium.
I have found some performance optimizations for chromium to work better with the rotated screen. Also implemented is the css modification of UI to show better in landscape from here:
Contemporary optimizations for small or large landscape displays

The next issue on a PI4 with this display is a interference between hdmi with 1920x1080 and WiFi. I had lost connections and a flicker display.
I didn’t know the context until I found the following:

Pi4 WiFi not working when resolution is set too high

With disabled WiFi - no more flicker on the screen. What’s that??
Ok I can live with that, I have now connect a cable, that’s stable without interferences.

At last I have search a screensaver to prevent the burnin of AMOLED. The standard screensaver give us unfortunately a black screen. I found PeppyMeter a wonderful animation of VU meter, a python program that’s write directly to the framebuffer.
I have modified it to use better with VOLUMIO and a resolution of 1920. With my modification it’s now configurable with many options to use your own background pictures and styles.
I post a step by step guide to install it, in next time. I’m not complete ready but I start with the installation steps of VOLUMIO. But at first some pictures of implemented PeppyMeter in fullHD:

image
image4508×3002 1.35 MB
image
image4525×3013 1.59 MB
image
image4546×3027 1.41 MB
image
image4511×3004 1.43 MB
image
image4485×2986 1.32 MB
image
image4574×3049 1.4 MB

2 Likes
My music player project – Quarantine 19 (started during my quarantine…)
Contemporary optimizations for small or large landscape displays
#2

Omg that looks awesome… Due to this o like volumio… This is on my short list, nr1. Until now for my next streamer.
Thanks for sharing and help us with this great ideeas

#3

Ok, let’ start with
step 1: core installation

  • install a fresh VOLUMIO image
  • enable SSH: http://volumio.local/dev
  • username: volumio password: volumio
  • for some configurations it’s better to enable root account, use putty with the volumio account for this and edit sshd_config:
sudo nano /etc/ssh/sshd_config

  • set: PermitRootLogin yes and reboot

  • for a connected HDMI-display you need the touchscreen-plugin, you find it in plugins

  • if installation succsesfully, set GPU mem to 128MB and for the waveshare AMOLED rotation to 90°

  • for the AMOLED add the follow to /root/userconfig.txt

max_framebuffer_height=1920
config_hdmi_boost=8
hdmi_group=2
hdmi_mode=87
hdmi_timings=1080 1 26 4 50 1920 1 8 2 6 0 0 0 60 0 135580000 3
hdmi_drive=1
hdmi_blanking=1

hdmi_blanking is for the AMOLED, it has no backlight, the blank screensaver is only work with hdmi_blanking=1

With next reboot you see the Volumio-UI on your screen, not optimal to small but you see it. :wink:

#4

Just awesome! Very very nice!

#5

Step 2: UI optimizations

The AMOLED have 5,5" with a 1920 resolution, the content it very small and unusable with volumio per default. You need a scale factor and a changed css file for better readable UI with a better smooth scrolling in chromium. I have add some chromium options to the file /opt/volumiokiosk.sh (use the root account in winscp to change this file)

    --disable-smooth-scrolling \
    --disable-gpu-compositing \
    --enable-experimental-canvas-features \
    --enable-scroll-prediction \
    --disable-quic \
    --max-tiles-for-interest-area=512 \
    --num-raster-threads=4 \
    --enable-low-res-tiling \
    --enable-native-gpu-memory-buffers \
    --enable-gpu-rasterization \
    --enable-zero-copy \
    --use-gl=egl \
    --force-device-scale-factor=2.4 \
    --disk-cache-dir='/tmp/chromium' \
  • in addition I have change the chromium cache folder to ramdisk (better for SD-Card)
  • for AMOLED the scale-factor is 2.4, please use exact this value. It is evaluated in the modified css to set some performance optimizations for the UI

the modified file for download:
volumiokiosk.zip (697 Bytes)

For the optimized UI select the contemporay UI in settings. The customiziations thread for a better show on a landscape display you find here:
Contemporary optimizations for small or large landscape displays

I have some little changes included for the rotated AMOLED for a better performance:
The css that’s necessary to replace you find here:

/volumio/http/www3/styles/app-313de2febe.css

The optimized file for 1920 rotate display with scale factor 2.4:
app-313de2febe.zip (42.1 KB)

For all other displays you can use the V5 from the thread thats mentioned above.
app-313de2febe.zip (41.8 KB)

With this changes you have a usable 5,5" AMOLED display. If this enough for you you can brake out here.
The next step is follow shortly
:yum:

#6

Step3: install peppyalsa

What peppy alsa is exactly doing you find here:
https://github.com/project-owner/peppyalsa.doc/wiki

to install it do follow:

  • login with putty
cd /home/volumio
git clone https://github.com/project-owner/peppyalsa.git
  • the peppyalsa directory is now created in /home/volumio
  • switch into peppyalsa directory and install the build dependecies
cd /home/volumio/peppyalsa
sudo apt-get install build-essential autoconf automake libtool libasound2-dev libfftw3-dev
  • and now compile the source
aclocal && libtoolize
autoconf && automake --add-missing
./configure && make
  • and install it with
sudo make install
cd ..

For configuration a sample asound.conf is placed in
/home/volumio/peppyalsa/alsa-config.
Now it’s important to set the correct port for your installed soundcard.
List yor installed card with:

aplay -l
  • for me is card 2 with slave.pcm “hw:2.0”
  • in addition it’s important to set the audio name pipe for PeppyMeter. I have set this to ramdisk “/tmp/myfifo”

this is my asound.conf:

pcm.!default {
        type plug
        slave.pcm "softvol_and_peppyalsa"
}

ctl.!default {
        type hw
        card 2
}

pcm.peppyalsa {
        type meter
        slave.pcm "hw:2,0"
        scopes.0 peppyalsa
}

pcm.softvol_and_peppyalsa {
        type softvol
        slave.pcm "peppyalsa"
        control {
                name "PCM"
                card 2
        }
}

pcm_scope.peppyalsa {
        type peppyalsa
        decay_ms 500
        meter "/tmp/myfifo"
        meter_max 100
        meter_show 0
        spectrum "/home/volumio/myfifosa"
        spectrum_max 100
        spectrum_size 60
}

pcm_scope_type.peppyalsa {
        lib /usr/local/lib/libpeppyalsa.so
}

pcm.dsp0 peppyalsa

you can download this file here:
asound.zip (392 Bytes)

copy this file to /etc and reboot.

That’s all for the needed new alsa device.

Now the MPD must configure to use peppyalsa as output device. VOLUMIO is use a template file, thats copy if you change your sound card.

/volumio/app/plugins/music_service/mpd/mpd.conf.tmpl

change the name and device to pepyalsa:

audio_output {
		type		"alsa"
#		name		"alsa"
#		device		"${device}"
		name		"peppyalsa"
		device		"peppyalsa"
		dop			"${dop}"
		${mixer}
		${format}
		${special_settings}

}

the complete file for download:
mpd.conf.zip (1.0 KB)

Now change the sound card in VOLUMIO settings to HDMI and switch back to your sound card. With this operation the template file is copy to /etc
After reboot please check if the mpd.conf in /etc have the peppyalsa as output device.

Please check if the namepipe is created /tmp/myfifo
The next check is, play a sound and have the sound card an output?
Can be heard music? Then all is ok at time.

#7

Step 4: install PeppyMeter

the complete documentation of PeppyMeter you can find here:
https://github.com/project-owner/PeppyMeter.doc/wiki

For the installation you always start in volumio home directory

cd /home/volumio
git clone https://github.com/project-owner/PeppyMeter.git

Now is created: /home/volumio/PeppyMeter
To run it you need python3 with pygame addin:

sudo apt-get install python3-pip
sudo apt-get install python3-pygame

To check if the installed pygame addin correct work start python with:

python3

and run the command:

import pygame

If no error showing up all is ok. Exit from python with

quit()

Now all needed dependecies are installed.

#8

Step 5: peppy meter modifications

What I have now modified:

  • add an option in config.txt to set the framebuffer dimension, it’s needed to draw an fullscreen background (for me is set to 1920x1080)
  • add a custom folder to place additional meters and backgrounds, I have placed here my fullHD backgrounds with the meters.txt
  • add a new layer for backgrounds with your custom screen resolution
  • if you use a smaller peppy meter as your screen resolution you can set the position of meters
  • add a new daemon to read the active albumart and play info to draw it, the position and size is configurable per meter with new parameters in meters.txt
  • add a new parameter to exclude a meter from random mode
  • to start the screensaver I use a crontab with defined Volumio screensaver timeout (I have no found another way to start a script depend on xset screensaver without installation of an external program)
  • to interrupt the screensaver the touch event from display is used
  • as sample I have redesigned some meters to fullHD (it’s now a hard work for the CPU)
  • all new settings are optional, that’s important that all standard meters correct working

To install this modifications copy all files and folders to /home/volumio/PeppyMeter
Please make a backup from the original PeppyMeter folder before you start.
peppymeter.zip (6.0 MB)

In config.txt the frambuffer is set to 1920x1080 and the custom folder is filled with 1920x1080 meters. Do you want to use smaller resolution set the framebuffer to your resolution and test with the large or medium other folder.
example:

screen.size = medium
frame.buffer.width = 1200
frame.buffer.height = 800

For the HDMI AMOLED display I have set also the follow settings:

[sdl.env]
framebuffer.device = /dev/fb0
mouse.device = /dev/input/event0
mouse.driver = TSLIB
video.driver = dummy
video.display = :0

Now it’s time for a first test, start it with:

cd /home/volumio/PeppyMeter
sudo python3 peppymeter.py

:grinning:

With the last step I’ll explain the automated start and the play info communication with volumio.

#9

Step 6: install autostart

Many hours I have search a solution to start a program as screensaver without install an external additional screensaver program. The only one idea that I had, was create a crontab with timeout value from VOLUMIO. But the crontab time resolution is only per minute (the task is always triggered on full minute), not per second. Have you set 120 sec in VOLUMIO the task starts between 1…2 minute. I think thats ok, not optimal but ok.
The crontab entry is created, when you press play and removed when you press pause. I start a little bash script, that only start python if it not already running, to avoid multiple python tasks. To be on the safe side, i erase the crontab at volumio start.

  • install cron at first with:
sudo apt-get install cron

  • to create the cron entry when you press play, the touchscreen plugin is modified. copy the modified index.js to
    /data/plugins/miscellanea/touch_display
    TouchScreenindex.zip (9.8 KB)

  • to clear the cron list at VOLUMIO startup add this line to
    /etc/rc.local above line exit 0

crontab -u volumio -r

  • copy the little bash script to start python to
    /home/volumio/PeppyMeter
    run_peppymeter.zip (279 Bytes)

  • make the script executable with:

cd /home/volumio/PeppyMeter
sudo chmod +x run_peppymeter.sh

  • I think you need a restart now.

  • set the VOLUMIO Screensaver (touchscreen plugin settings) to 60 or 120 seconds and
    !!! Important !!!
    set option for ‘No screensaver while playing’

  • check now if cron entry correct created when you press play and removed when you press pause with

crontab -l

If all is ok, press play and wait… :wink:

#10

Step 7: VOLUMIO interaction

I have search a possibiltity to read play infos with python, to show the albumart and info at screensaver I had the idea to write a text file, if the play status is changed.
To do this the file /volumio/app/statemachine.js is modified.

  • declare a file object on the top of file:
var fs = require('fs-extra');
  • insert the follow lines on line 762 before start the else statement
    } else if (stateService.status === ‘stop’) {
    // changed write file ------
    var splitted = trackBlock.albumart.split('&'),
		splitted_path = decodeURIComponent(splitted[2]),
		substr = (splitted_path.indexOf('/mnt/') == -1 ? 5 : 9),
		playinfo_str = '[playinfo]' +
                       '\nTitle = ' + JSON.stringify(trackBlock.name) +
                       '\nAlbum = ' + JSON.stringify(trackBlock.album) +
                       '\nArtist = ' + JSON.stringify(trackBlock.artist) +
                       '\nAlbumart = /data/albumart/folder/mnt' + splitted_path.substring(substr) + '/extralarge.jpeg';

    this.logger.verbose('STATE SERVICE --------------------------write playinfo file------------------------------------');
    this.logger.verbose(playinfo_str);
    fs.writeFile('/tmp/playinfo', playinfo_str, 'utf8', function (err) {
      if (err) {
          this.logger.info('Could not write play_info: ' + err);
        }
      });
    this.logger.verbose('STATE SERVICE --------------------------write playinfo file------------------------------------');
    // -------------------------

  } else if (stateService.status === 'stop') {
.
.
.

  • or download the modified file and copy it to /volumio/app:
    statemachine.zip (9.6 KB)

  • check if the file is being written with:

journalctl -f
  • you find this file here /tmp/playinfo
  • if this file exist the new peppymeter deamon read every second and if it changed the albumart is showing up, depend on the position that is defined in meters.txt (example in custom folder)

Congratulations, it’s done :yum:

Now I try to create a little UI-integration for selection of meters. I need a little time for this.
have fun :yum:

1 Like
#11

Hi!
You have done a great job! And a very detailed how-to.
But you have to warn other users that:
It won’t work with all sources (not with Spotify and Spotify connect).
It will prevent Volumio to update.
I suggest you to work with Volumio buster and use the new alsa pipeline.
I have a working plugin that install peppyalsa and peppymeter to work with it.
It also provides a selector for meters in the plugin settings.

#12

It will be great to integrate this with peppymeter plugin from balbuze. To be compatible with new volumio version 3. For sure a lot of users will use this. At least me for sure I will :slight_smile:

#13

Hi balbuze,
I didn’t want to bring the installation to the fore so much. An add-in is always better. But it is certainly no longer worthwhile for the current Volumio version.
Rather, I wanted to show the changes to PeppyMeter to have a flexible ScreenSaver when using high display resolutions. And I wanted to show the possibility of interacting with Volumio. Since all new functions are optional parameters, normal use is also possible with this change. The ideas could also be used for your add-in.
I didn’t want to create a new, similar add-in.
:wink:

#14

Good job 2aCD,

it shows just what can be achieved. I can see that people would want to install this plugin regardless of it preventing Volumio updates … btw, this Volumio policy is to ensure that people can enjoy the core Volumio experience seamlessly. Going forward, it seems obvious to me that you should embrace the ALSA changes in the current Volumio change from 2 to 3, as I would expect that the vast majority of Volumio users to make the upgrade.

Again, well done, and I’ll follow your plugin with interest. :grinning:

#15

Here’s the one that I created (with 2aCD help). Switched to Pi4 for now.

https://youtu.be/2i4exMGZ4-4

2 Likes
#16

Hello, may i ask if is possible to make little bit quicker response of needle as you have ? For me it looks little bit lazy, maybe some modification is needed, or parameter set. I am on Raspi 4 Many thanks
Ed

#17

Yes it’s possible.
at first set in asound.conf

decay_ms 400

and then in config.txt in data_source section

smooth.buffer.size = 8

or lower, then the meters are quicker

1 Like
#18

2aCD many thanks, works perfectly !

radio
radio2268×4032 1.29 MB

ready for housing

#19

I’m glad to hear that’s work.
Now I’m ready with an update package with some improvements. First of all, I would like to thank Andy_Yong for the persistence in testing the non standard configuration.
What’s new with this update:

  • new config parameter in sdl.env section to use standard displays without touch and without mouse
mouse.nomouse = 1
  • interrupt the peppy meter screen also with press the pause button on your smartphone app
  • playinfo and albumart now also working with special characters in title or album
  • new config parameter to use other fonts for Chinese or Thai
font.path = /usr/share/fonts/truetype
font.light = /Lato/Lato-Light.ttf
font.regular = /Lato/Lato-Regular.ttf
font.bold = /Lato/Lato-Bold.ttf
# for Thai ---
#font.light = /tlwg/Laksaman.ttf
#font.regular = /tlwg/Laksaman.ttf
#font.bold = /tlwg/Laksaman-Bold.ttf
# for Chinese ---
#font.light = /arphic/ukai.ttc
#font.regular = /arphic/ukai.ttc
#font.bold = /arphic/ukai.ttc
  • remove the remarks witch font are active
    this are installed with volumio, no additional fonts needed
  • optimized timing to change the albumart while the meters running

Please replace all files with the new ones from this package.
The custom folder (for 1920x1080) does not need to be replaced

peppymeter_Update1.zip (5.1 MB)

For the new interrupt methode with pause button you need also the new patched touchscreen file in /data/plugins/miscellanea/touch_display

TouchScreenindexUpdate.zip (9.9 KB)

And at last, here some meters with background for a
display resolution: 1280x800

custom.zip 1280x800 (3.8 MB)

If someone use another display resolution, give me a hint.

#20

Thanks again to 2aCD for helping us to create this. Here are some of his work on my system.

20210329_130455
20210329_1304554000×3000 1.1 MB
20210405_180135
20210405_1801354000×2252 1.12 MB