# Make Our Skins for peppyMeter **URL:** \ **Category:** Volumio Development\ **Created:** [January 16, 2023, 12:39pm UTC](https://community.volumio.com/t/make-our-skins-for-peppymeter/59774 "2023-01-16T12:39:04Z")\ **Posts on this page:** 1\ **Showing post:** 16
**Author:** ![Gelo5](https://community.volumio.com/user_avatar/community.volumio.com/gelo5/32/17213_2.png) [@Gelo5](https://community.volumio.com/u/Gelo5)\ **Post date:** [January 17, 2023, 12:05pm UTC](https://community.volumio.com/t/make-our-skins-for-peppymeter/59774/16 "2023-01-17T12:05:42Z")
Mcintosh 1920x1080 skin ![000](https://community.volumio.com/uploads/default/original/3X/7/8/78fa85d2ae6b4d926f9d515f778dbaa41c0963a9.jpeg) #-----------------------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) ![01](https://community.volumio.com/uploads/default/original/3X/6/b/6bfaa0765e3d59c0afb641663f21f5bd52144902.jpeg) 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 ![003](https://community.volumio.com/uploads/default/original/3X/d/2/d2bfe99b688aa64a8312660ea60f66e0841f79da.png) 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: ![004](https://community.volumio.com/uploads/default/original/3X/3/d/3d5c6c8ca541190fe82875de5654d569a0dfb99e.png) 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 ![005](https://community.volumio.com/uploads/default/original/3X/3/1/312841b02f63397d2126945238d13451c2d08d3f.png) 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** ![Mcintosh_needle](https://community.volumio.com/uploads/default/original/3X/d/e/de6bd257b3122acdc4ee311f3545b30a0acff530.png) 9.We specify the distance from the left side of our pointers (here: 380 and 1420 pixels - to the center of the scale) ![006](https://community.volumio.com/uploads/default/original/3X/2/3/2340a5645c82f0f5fe5915179746cf7bf0b9eadb.png) **left.origin.x = 380** **right.origin.x = 1420** 10.We determine (from the top) where the end of our arrow is. ![007](https://community.volumio.com/uploads/default/original/3X/0/6/06626d5eaf6220a8897fa0915fb21fe40278b7c6.png) 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 ![008](https://community.volumio.com/uploads/default/original/3X/d/a/da5b84f2b95b3c936a2531a7ca1f776092e1b0fc.png) **albumart.pos = 740,80** 740 pixels from left 80 pixels from top ![009](https://community.volumio.com/uploads/default/original/3X/a/7/a7fb603b332468f2e095c27e1dfc96201bcaaa20.jpeg) **albumart.dimension = 450,450** The size of the cover in pixels ![010](https://community.volumio.com/uploads/default/original/3X/e/8/e8b4169dff6e7272c0a39b449cc19945aa486080.jpeg) **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 ![011](https://community.volumio.com/uploads/default/original/3X/1/f/1f5676ee52f2a10680dec61e389f205e27dfea9a.jpeg) **playinfo.type.pos = 1080,910** 1080 pixels from left 910 pixels from top ![012](https://community.volumio.com/uploads/default/original/3X/5/b/5b5e59e3733aed3868948b5a54d0b64fb90e3c2d.jpeg) **playinfo.type.color = 0,177,64** RGB ![013](https://community.volumio.com/uploads/default/original/3X/7/0/70b9acbff89669f1fc67401f59d85c3277e87c0f.jpeg) **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 ![014](https://community.volumio.com/uploads/default/original/3X/7/9/7930807eb733d011bde6ef675c53927412c66add.jpeg) **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 ![015](https://community.volumio.com/uploads/default/original/3X/8/f/8fbf28de536348bbe0184db371c6f4fbd4506f4c.png) **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 ![016](https://community.volumio.com/uploads/default/original/3X/1/5/155d8807e23abe84387dfafc361117b23cd193cf.png) **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 ![18](https://community.volumio.com/uploads/default/original/3X/5/4/548245461269af87c5242cb6a2ac1c87fed37220.png) **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 --- _[View the full topic](https://community.volumio.com/t/make-our-skins-for-peppymeter/59774)._