ok, so these points, steps ad other… remain to be clarified:
ui.refresh.period = 0.033
ok----bgr.filename = galaxy-bgr.png
ok —fgr.filename = galaxy-fgr.png
ok----indicator.filename = galaxy-needle.png
steps.per.degree = 2
start.angle = 47
stop.angle = -47
distance = 100
left.origin.x = 208
left.origin.y = 267
right.origin.x = 584
right.origin.y = 267
meter.x = 1080
meter.y = 765
1 Like
That is well defined on the webpage from peppy_meter.
1 Like
I’ll try to study and if so I’ll answer here
Thanks for now
fantastic
Thanks, I need some clarifications:
ok then: the values entered indicate the distance from the right and from the top;
the length of the field: it will depend on the font size with a maximum defined by “maxwidth”
what is meant by “Icon source position” and “Sample-rate”
what determines the background of the “playinfo.type.color”? Is that of the backgroud image left?
Font colors eg 180, is there a table explaining what color is 180 (and the others)?
finally the most important thing: how to test the new skin without having to load it on Raspberry and start the whole system? Is there a simulation environment that I can set up?
In the “Start & Stop” section of the “PeppyMeter.doc” there is a Python command which appears to provide a test environment
Thanks again and see you soon, bye
Just start playing with it and you’ll find what it does.
Place the images + meters.txt in on of the folders, run volumio vrestart. This will load the changes.
Make modifications to meters.txt and play a track. it will load peppy with the changes.
background image
Google on it, it’s the rgb value like 106,178,175
Mcintosh 1920x1080 skin
#-----------------------01 MCINTOSH ---------------------------
[Gelo5_McIntosh]
meter.type = circular - Leverage indicators
channels = 2 - number of channels
ui.refresh.period = 0.033 - we don’t move
bgr.filename = Mcintosh_vu.png
fgr.filename = Mcintosh_frg.png
indicator.filename = Mcintosh_needle.png
steps.per.degree = 4 - we don’t move
start.angle = 41
stop.angle = -41
distance = 207
left.origin.x = 380
left.origin.y = 460
right.origin.x = 1420
right.origin.y = 460
meter.x = 60
meter.y = 60
screen.bgr = Mcintosh.jpg
1.First, specify what resolution you will set (on the example of a 1920x1080 skin)
2.Select a photo and place it at the specified resolution (here 1920x1080).
a/width 1920px
b/height 1080px
c/resolution 170 dpi (170px/inch)
3.Save as .jpg - this will be our:
screen.bgr = Mcintosh.jpg
4.Open the Mcintosh.jpg image and replace it with .png (with transparency).
Now we create the background for the indicators
5.Save as .png - this will be our:
bgr.filename = Mcintosh_vu.png
6.Placing the background under the indicators:
meter.x = 60
meter.y = 60
Attention! if we work on the whole area (1920x1080) and make the background for the indicators like this:
The image will be aligned to the upper left corner (This is the easiest way) and:
meter.x = 0
meter.y = 0
7.We cover unnecessary elements on the background of indicators.
The indicators will be covered and not visible on this part
Save as .png - this will be our:
fgr.filename = Mcintosh_frg.png
8.All that’s left to do is pointers. We save it as .png - this will be our:
indicator.filename = Mcintosh_needle.png
9.We specify the distance from the left side of our pointers (here: 380 and 1420 pixels - to the center of the scale)
left.origin.x = 380
right.origin.x = 1420
10.We determine (from the top) where the end of our arrow is.
In a landscape layout, left and right should be the same
left.origin.y = 460
right.origin.y = 460
11. We specify the angles in which to move with the arrows.
Start - plus
Stop - minus
start.angle = 41
stop.angle = -41
The rest is described in the WIKI
Now we can check how our indicators work (without additional descriptions, covers, etc…).
Of course, at the beginning we only give the entry as above
Now we add additional elements to our skin
— volumio optional entries -------
config.extend = True
albumart.pos = 740,80
albumart.dimension = 450,450
albumart.border = 1
albumart.pos = 740,80
740 pixels from left
80 pixels from top
albumart.dimension = 450,450
The size of the cover in pixels
albumart.border = 1
Border around the album: 1 pixel. There may be more, e.g. 2, 3 pixels. The border color is the same as the text color. If you don’t want a border - put “#” at the beginning before the whole line
#albumart.border = 1
playinfo.type.pos = 1080,910
playinfo.type.color = 0,177,64
playinfo.type.dimension = 90,90
playinfo.type.pos = 1080,910
1080 pixels from left
910 pixels from top
playinfo.type.color = 0,177,64
RGB
playinfo.type.dimension = 90,90
The size in pixels of the file type (90x90)
time.remaining.pos = 900,900
time.remaining.color = 67,194,139
font.size.digi = 37
time.remaining.pos = 900,900
900 pixels from left
900 pixels from top
time.remaining.color = 67,194,139
Same as above
font.size.digi = 37
The DIGI font is responsible for the passing time. Its size is set in pixels (37)
playinfo.maxwidth = 1200
playinfo.center = True
We define where the information about the artist, song, album will be
playinfo.maxwidth = 1200
Here this size is 1200 pixels
playinfo.center = True
Specify whether the text will start from the left (frame) or in the center of the frame
True = center
False = from the left
playinfo.title.pos = 362,760,regular
Placement of the song title:
362 pixels from left
760 pixels from top
regular=font type
playinfo.artist.pos = 362,810,light
Placement of the artist:
362 pixels from left
810 pixels from top
light=font type
Attention! If there is ONLY: playinfo.artist.pos - ARTIST+ALBUM will be displayed
If we want to separate the artist and the album - we have to enter:
#playinfo.album.pos = 365,940,light —> playinfo.album.pos = 365,940,light
playinfo.samplerate.pos = 360,985,bold
In this case it’s simple - because the samplerate is centered like Artist, Album and Title
Placement of the samplerate:
360* pixels from left (In the middle of the selected box 1200px)
*If we want to shift to the left - we decrease this value, which can also be “-”
If to the right - we increase this value
985 pixels from top
The samplerate color is the same as the type color
font.size.light = 30
font.size.regular = 32
font.size.bold = 32
font.color = 0,177,64
Greatest:
Steps 4 and 5: Did you cut out the indicator section you want to use from the “screen.bgr”?
points 6 and 7: why do WE MAKE indicators with “fgr.filename” invisible? (I tried to read the project doc but I didn’t understand)
I’m cataloging the existing skins to have a selection table
based on what the user wants to highlight, disc covers rather than markers or other information.
for the table the size of the images is clear
the type of indicators too
for the size of the indicators I obtain a “comparison value” by taking the height y and calculating the width by subtracting the values of the two x’s approximately, in the example 460;1000
(it is not a precise value but only a term of comparison)
I will make the file available as soon as it is ready to cpair and improve and correct.
bye, see you soon
1 Like
No
This is an overlay to cover up the bottom of the needle. You only need to use is if the bottom of the needle extends the bottom on the indicator.
Not needed:
Needed:
ok let’s go step by step:
points 1, 2 and 3 all clear, size 1920x1080, but the resolution of the image I have is 300px/inch
points 4,5 and 6 the indicator image has the same resolution of 300 px but the dimensions are 1779x498, how did you get there? (did you grab a part of the screen.bgr?)
The attention note of point 5 applies if the indicators are for example in the lower part of the image, where it is necessary to indicate the x and y coordinates, right?
point 7 this image, the same size as the previous one but with little texture, must cover part of the indicators: WHY? (why isn’t the hedged part necessary?) to be a realistic indicator and cover the basis of the indicator?
In the meantime, I continue to catalog 
Thanks bye
I think it’s time you start playing around with it. Just do some trail and error based discovery 
It’s not a university. The resolution can be different: 300, 200 etc. @peppy.player set it to 170 dpi and set it that way.
It’s not a texture, just part of an image (.jpg)
If the indicators are in the lower part (I wrote above) - it is enough to work on the entire image (for example, 1920x1080). You delete unnecessary elements and save as .png which has transparency. Then meter x and y will be equal to “0”
perfect, got it, thank you
HI, I started customizing the first skin, I chose a simple one - Dash.
on the rasp I used a monitor with 1900x600 resolution, I changed the name of the volume custom 6 folder so “custom_6 (1600x900)” putting the new files there.
from the “dash-ext.jpg” i removed the indicator, i resized only the image and put the indicator back with its original size, so to not touch its settings 
so in meter file I had modify only:
the size of the cover, the X of the cover, the indicator and the playinfo, keeping the Ys unchanged for now
Request:
What should you change in the meter file if you change the size of the indicator?
also these: the “dash-bgr.png” image : same as the image inside the dash-ext.jpg file
but the “dash-indicator.png” image, how?
I saw that in the images there are guides to determine the pixel to put in the meter file, I am providing a file with the different levels ready to accept the new guides file is didactic dash-ext.psd
Folder with files
Thanks bye
Firstly:
if you do bgr like in the picture:
Meter.x and meter.y will be ZERO
There is no indicator file in the attachments
For linear indicators, ONLY: background and indicator can be used. They must be in .png format
FGR and screen.bgr = may not be used
position.regular = 9
position.overload = 4
step.width.regular = 56 — At your place, based on file: 48
step.width.overload = 56 — At your place, based on file: 48
ORIGINAL
YOURS
indicator_for_you.zip (5.8 KB)
1 Like
so to summarize:
for a linear indicator of fact you have to create
- a “bgr.filename” file, with a PNG extension with the same measurements as the indicator in the “screen.bgr” file
- an “indicator.filename” file, with the same measurements as the “bgr.filename” “indicator lights”?
Then you have to give the coordinates that you clarified in the image on the post,
left & right.X (or Y) which is the shift of bgr.filename in relation to
meter.x (Or meter.Y) which refers to bgr.filename
With linear everything is clear now
Skin repurposed to 1600x900 works fine, just one thing :
why with these lines
playinfo.type.pos = 868,320
playinfo.samplerate.pos = 868,275,regular
the samplerate is in the center and the type is not (it would be good if the samplerate was left aligned too)
I’ll do some tests and everything will work out but it’s curious.
Thanks for your patience, now I’ll refine and put the prettiest linear skins, then I’ll dedicate myself to the “circular” skins
Truly you have been precious, see you next time bye.
Did you read the post above? The one about samplerate? Do you not understand or need to explain?
Yes, I read, but some explanation is better:
playinfo.maxwidth = 1200
in the section put 1200 as the definition of the information box,
all information will be centered in the box with the command “playinfo.center = True”
But why is the box centered on the image?
and then why 360 centers the samplerate with the definition of “playinfo.samplerate.pos = 360,985,bold”
Hi, I think this background is useful to understand where to display the information in play and change the pixel values. What do you think about it?
Hi
Great initiative,
I always use the coordinates in paint.net to get all my points. It’s faster and more precise and write then on a piece of paper to generate the meters.txt. Especially useful to get the exact bottom position for needles .
of course with paint you can check indicator, bgr and similar, I thought of a temporary background in the grid to check the reproduction information and related info
as soon as I have time I’ll have to test how the box is centered in the image screen…I don’t understand yet