Background
The background images can be used for rich UI (display/touchscreen) and thin Web UI (browser). The player provides 10 default background images. It's also possible to have user-defined images. Here are the screenshots showing the usage of the default images.
The current Album Art can be used for the background image as well. The tint color and blur radius can be applied to the background album art image.
The default images are located in the folder /home/pi/Peppy/backgrounds. All images are in JPG format (e.g. bgr-1.jpg)
The configuration file for the background images background.txt is also located in the folder /home/pi/Peppy/backgrounds. Here is the section from that file which allows to change the general background properties:
[background]
bgr.type = color
screen.bgr.color = 0,0,0
screen.bgr.names =
web.bgr.names =
header.bgr.opacity = 255
menu.bgr.opacity = 255
footer.bgr.opacity = 255
web.screen.bgr.opacity = 255
- bgr.type - defines the background type. The possible values: color (default), image and album.art
- screen.bgr.color - defines the screen background color. The default color is black 0,0,0 (R,G,B)
- screen.bgr.names - this property defines the comma separated list of image backgrounds which can be used. The empty list (default) assumes that all background images specified in the background.txt file will be in use. If specific images should be used as backgrounds their names should be defined in this property. For example only two specific background images will be used if the following list will be defined in this property: bgr-2,bgr-8
- web.bgr.names - this property is very similar to the previous one but defines the list of background images for the Web UI.
- header.bgr.opacity - defines the opacity of the screen header. The range is 0-255 where 0 means that background will be completely transparent and 255 completely opaque.
- menu.bgr.opacity - defines the opacity of the screen menu.
- footer.bgr.opacity - defines the opacity of the screen footer.
- web.screen.bgr.opacity - defines the opacity of the screen background opacity in Web UI.
The same properties can be edited using the Configuration Web UI:
The following table shows the effect which properties have on UI.
| Type | Properties | Screenshot |
|---|---|---|
| Color type with default black background | bgr.type = color screen.bgr.color = 0,0,0 screen.bgr.names = header.bgr.opacity = 255 menu.bgr.opacity = 255 footer.bgr.opacity = 255 web.screen.bgr.opacity = 255 web.bgr.names = |
 |
| Color type with white screen background | bgr.type = color screen.bgr.color = 255,255,255 screen.bgr.names = header.bgr.opacity = 255 menu.bgr.opacity = 255 footer.bgr.opacity = 255 web.screen.bgr.opacity = 255 web.bgr.names = |
 |
| Image type with semi-transparent header & footer, transparent menu and random image | bgr.type = image screen.bgr.color = 0,0,0 screen.bgr.names = header.bgr.opacity = 160 menu.bgr.opacity = 0 footer.bgr.opacity = 160 web.screen.bgr.opacity = 255 web.bgr.names = |
 |
| Image type with semi-transparent header & footer, transparent menu and fixed image bgr-4 | bgr.type = image screen.bgr.color = 0,0,0 screen.bgr.names = bgr-4 header.bgr.opacity = 160 menu.bgr.opacity = 0 footer.bgr.opacity = 160 web.screen.bgr.opacity = 255 web.bgr.names = |
 |
| Image type with transparent Web UI background and with fixed image bgr-1 | bgr.type = image screen.bgr.color = 0,0,0 screen.bgr.names = header.bgr.opacity = 100 menu.bgr.opacity = 0 footer.bgr.opacity = 100 web.screen.bgr.opacity = 0 web.bgr.names = bgr-1 |
 |
| Image type with fixed screen image bgr-6 and fixed Web UI background bgr-1 | bgr.type = image screen.bgr.color = 0,0,0 screen.bgr.names = bgr-6 header.bgr.opacity = 100 menu.bgr.opacity = 0 footer.bgr.opacity = 100 web.screen.bgr.opacity = 0 web.bgr.names = bgr-1 |
 |
| Album Art type | bgr.type = album.art header.bgr.opacity = 160 menu.bgr.opacity = 0 footer.bgr.opacity = 160 |
 |
Each default background has a separate section with properties in the file /home/pi/Peppy/backgrounds. Here is the example of the bgr-1 definition.
[bgr-1]
filename = bgr-1.jpg
blur.radius = 0
web.bgr.blur.radius = 20
overlay.color = 0,0,0
overlay.opacity = 130
- filename - defines the filename of the background image. The file should be placed in the folder /home/pi/Peppy/backgrounds.
- blur.radius - defines in pixels the blur radius for the Blur filter applied to the screen background image.
- web.bgr.blur.radius - defines in pixels the blur radius for the Blur filter applied to the Web UI background image.
- overlay.color - defines R,G,B values (0-255) for the tint color applied to the background image
- overlay.opacity - defines the opacity value (0-255) of the tint color layer applied to the background image.
The Album Art type has a dedicated section with the following properties:
[album.art]
blur.radius = 4
overlay.color = 20,30,50
overlay.opacity = 80
- blur.radius - defines in pixels the blur radius for the Blur filter applied to the background album art image.
- overlay.color - defines R,G,B values (0-255) for the tint color applied to the background album art image
- overlay.opacity - defines the opacity value (0-255) of the tint color layer applied to the background album art image.