Config: skin editor for easy font changes

[reedmikel]

Since this softare is no doubt used on a wide range of displays/TVs, sure would be nice to have an easier way for the newbie who does not want to spend time learning all the editing details buried in SKIN.XML files. I have not yet found any docs on all the object types in the skin files. Many are obvious, others not so obvious. Plus, it would reason that if one needs larger fonts for say Video Library, probably need it for all other modules too (assuming same display device is being used). So it would be nice if fonts for various object types (buttons, titles, text lines etc) could be done on a *global* basis, rather than just an individual module's skin. So offer some area to select default/global fonts. Make row heights proprtional to font size so one only has to change the font size, not the row height as well...

It's a great program, but could definitely be made more newbie-friendly. I expect many less technically savvy users do not want to have to edit .XML files...

[reven]

it would require a great deal of time to do this, it would take far less time for each user who wishes to change the fonts, to either download a skin with larger fonts being used (there are a few) or to just get in there and change the fonts themselves. sure what if they dont know how to do it, well learn. most do it yourself pvr users should know their way around a computer, so editing a simple xml file (which is basically a textfile) isnt that hard. it would cause problems for the plugins, it would take hours and hours of subs time, the plugin developers time to do something that would take an hour or two for the end user to do at max.

sure it would be nice, but dont hold your breath. i dont mean to sound mean, just realistic. it would be possible however to provide better documentation for the skins, i just dont think anyone has really had the time to do it.

[reedmikel]

Oh well, can't blame a fella for trying - but I did post this under "wish list"

Maybe *any* skin editing docs would be helpful. I can easily change the font, its size/attributes etc, but if I make the font significantly larger - then the line height is too small and the lower portion of the characters are cut off. So I must be missing something really obvious in the SKIN.XML file as relates to line height and # lines displayed in the scrolling <TextList> box.

Would love it if someone could educate me!!

Thanks!

[reven]

usually its under <SpecialElement name="item you want to change"> and there is a size in there, change the height. or if its part of a composite image. usually this is for the plugin name eg
<DrawText text="324234" size="25,25"....> (ok the tags might be wrong here, but the logic is sound).
just change those values, the text lists at the top define the fonts, and then each item uses these fonts, the composite image refer to the fonts directly, the <SpecialElement> dont refer to them but the names usually tell you which fonts correspond to which special elements.

[reedmikel]

Wow, you really lost me with that description

Maybe looking at a real SKIN.XML file will be a lot more useful for everybody to learn from. So if you can figure this one out (I think it's from Blue or Fat Blue), that would be great... So far I've figured out that line 12(in <TextStyles> section) is where to change the font used in the scrollable list of files presented by Video Library. Line 12 starts out " <TextStyle name="ListText"... " BUT where does one change the *height* for each line/row appearing in the scrolling list - so that larger fonts do not get chopped off on the bottom? Just doesn't seem obvious to me...

If anyone can explain it, this will be the first official explantion on this topic (that I have been able to find in these forums). Will no doubt help a lot of other GB users too! Thanks!!

<settings>
<!-- name colors -->
&lt;NamedColors&gt;
&lt;NamedColor name=&quot;SelectedFileActive&quot; color=&quot;DarkGreen&quot;/&gt;
&lt;NamedColor name=&quot;SelectedFileInactive&quot; color=&quot;Green&quot;/&gt;
&lt;/NamedColors&gt;
<!-- text style -->
&lt;TextStyles&gt;
&lt;TextStyle name=&quot;ScreenName&quot; color=&quot;LightGray&quot; typeFace=&quot;Tahoma&quot; size=&quot;17&quot; style=&quot;bold&quot;/&gt;
&lt;TextStyle name=&quot;ButtonText&quot; color=&quot;LightGray&quot; typeFace=&quot;Tahoma&quot; size=&quot;17&quot; style=&quot;bold&quot;/&gt;
&lt;TextStyle name=&quot;IconText&quot; color=&quot;White&quot; typeFace=&quot;Tahoma&quot; size=&quot;10&quot; style=&quot;bold&quot;/&gt;
&lt;TextStyle name=&quot;ListText&quot; color=&quot;White&quot; typeFace=&quot;Times New Roman&quot; size=&quot;20&quot; style=&quot;bold&quot;/&gt;
&lt;TextStyle name=&quot;DVDTitle&quot; color=&quot;Yellow&quot; typeFace=&quot;Tahoma&quot; size=&quot;14&quot; style=&quot;bold&quot;/&gt;
&lt;TextStyle name=&quot;DVDDesc&quot; color=&quot;White&quot; typeFace=&quot;Tahoma&quot; size=&quot;11&quot; style=&quot;bold&quot;/&gt;
&lt;/TextStyles&gt;
<!-- buttons -->
&lt;Buttons&gt;
&lt;Button name=&quot;Play&quot; loc=&quot;10,80&quot; normalImage=&quot;playbtn.png&quot; selectedImage=&quot;playbtn-selected.png&quot;/&gt;
&lt;Button name=&quot;Main&quot; loc=&quot;10,118&quot; normalImage=&quot;mainbtn.png&quot; selectedImage=&quot;mainbtn-selected.png&quot;/&gt;
&lt;/Buttons&gt;
<!-- Composite Images -->
&lt;CompositeImages&gt;
&lt;CompositeImage name=&quot;Background&quot; size=&quot;720,480&quot;&gt;
&lt;DrawImage filename=&quot;..\background.jpg&quot; loc=&quot;0,0&quot; size=&quot;720,480&quot;/&gt;
&lt;DrawRoundedRect loc=&quot;150,20&quot; size=&quot;520,435&quot; radius=&quot;7&quot; borderWidth=&quot;4&quot; borderColor=&quot;LightGray&quot; fillColor=&quot;Black&quot;/&gt;
&lt;DrawText text=&quot;Video Library&quot; loc=&quot;5,5&quot; size=&quot;160,120&quot; textStyle=&quot;ScreenName&quot; align=&quot;Left&quot;/&gt;


&lt;/CompositeImage&gt;

&lt;CompositeImage name=&quot;SelectedButtonImage&quot; size=&quot;130,45&quot;&gt;
&lt;DrawRoundedRect loc=&quot;4,5&quot; size=&quot;120,30&quot; radius=&quot;10&quot; borderWidth=&quot;4&quot; borderColor=&quot;White&quot; fillColor=&quot;DarkBlue&quot;/&gt;
&lt;DrawText text=&quot;@buttonText&quot; loc=&quot;15,9&quot; size=&quot;115,34&quot; textStyle=&quot;ButtonText&quot; align=&quot;Left&quot;/&gt;
&lt;/CompositeImage&gt;

&lt;CompositeImage name=&quot;NormalButtonImage&quot; size=&quot;130,45&quot;&gt;
&lt;DrawRoundedRect loc=&quot;4,5&quot; size=&quot;120,30&quot; radius=&quot;10&quot; borderWidth=&quot;4&quot; borderColor=&quot;Black&quot; fillColor=&quot;DarkBlue&quot;/&gt;
&lt;DrawText text=&quot;@buttonText&quot; loc=&quot;15,9&quot; size=&quot;115,34&quot; textStyle=&quot;ButtonText&quot; align=&quot;Left&quot;/&gt;
&lt;/CompositeImage&gt;

&lt;CompositeImage name=&quot;ListViewFolder&quot; size=&quot;36,31&quot;&gt;
&lt;DrawImage filename=&quot;folder.png&quot; loc=&quot;0,0&quot; size=&quot;36,31&quot;/&gt;
&lt;/CompositeImage&gt;

&lt;CompositeImage name=&quot;Folder&quot; size=&quot;165,210&quot;&gt;
&lt;DrawImage filename=&quot;large-folder.png&quot; loc=&quot;0,0&quot; size=&quot;162,207&quot;/&gt;
&lt;/CompositeImage&gt;

&lt;CompositeImage name=&quot;FolderSelected&quot; size=&quot;165,210&quot;&gt;
&lt;DrawImage filename=&quot;large-folder-selected.png&quot; loc=&quot;0,0&quot; size=&quot;162,207&quot;/&gt;
&lt;/CompositeImage&gt;

&lt;CompositeImage name=&quot;File&quot; size=&quot;165,210&quot;&gt;
&lt;DrawImage filename=&quot;large-file.png&quot; loc=&quot;0,0&quot; size=&quot;162,207&quot;/&gt;
&lt;/CompositeImage&gt;

&lt;CompositeImage name=&quot;FileSelected&quot; size=&quot;165,210&quot;&gt;
&lt;DrawImage filename=&quot;large-file-selected.png&quot; loc=&quot;0,0&quot; size=&quot;162,207&quot;/&gt;
&lt;/CompositeImage&gt;
&lt;/CompositeImages&gt;
<!-- special elements -->
&lt;SpecialElements&gt;
&lt;SpecialElement name=&quot;Buttons&quot; loc=&quot;10,80&quot; size=&quot;120,30&quot; spacing=&quot;7&quot;/&gt;
&lt;SpecialElement name=&quot;Files&quot; loc=&quot;155,25&quot; size=&quot;510,420&quot;/&gt;
&lt;SpecialElement name=&quot;DVDTitle&quot; loc=&quot;10,225&quot; size=&quot;400,25&quot;/&gt;
&lt;SpecialElement name=&quot;DVDDesc&quot; loc=&quot;10,245&quot; size=&quot;400,150&quot;/&gt;
&lt;/SpecialElements&gt;
&lt;/settings&gt;

[reven]

Quote[/b] ]Wow, you really lost me with that description

and thats why i shouldnt be the one to write any documentations.

<table border="0" align="center" width="95%" cellpadding="0" cellspacing="0"><tr><td>Code Sample </td></tr><tr><td id="CODE"><TextStyles>
<TextStyle name="ScreenName" color="LightGray" typeFace="Tahoma" size="17" style="bold"/>
<TextStyle name="ButtonText" color="LightGray" typeFace="Tahoma" size="17" style="bold"/>
<TextStyle name="IconText" color="White" typeFace="Tahoma" size="10" style="bold"/>
<TextStyle name="ListText" color="White" typeFace="Times New Roman" size="20" style="bold"/>
<TextStyle name="DVDTitle" color="Yellow" typeFace="Tahoma" size="14" style="bold"/>
<TextStyle name="DVDDesc" color="White" typeFace="Tahoma" size="11" style="bold"/>
</TextStyles>
[/QUOTE]
these are where the fonts are declared, you can add as many as you like, but you shouldnt remove any since some of these are hard coded eg &quot;DVDDesc&quot; is hardcoded and the plugin will look for this in the skin.xml.

<table border="0" align="center" width="95%" cellpadding="0" cellspacing="0"><tr><td>Code Sample </td></tr><tr><td id="CODE"><DrawText text="Video Library" loc="5,5" size="160,120" textStyle="ScreenName" align="Left"/> [/QUOTE]
this is where you can change the text rectangle size, ie if its getting cut off at the bottom change size=&quot;160,120&quot; to say size=&quot;160,140&quot;.

<table border="0" align="center" width="95%" cellpadding="0" cellspacing="0"><tr><td>Code Sample </td></tr><tr><td id="CODE"><SpecialElement name="DVDDesc" loc="10,245" size="400,150"/> [/QUOTE]
this is the DVDDesc, we can assume its the description of a dvd, ie text. so changing the size=&quot;400,150&quot; to say size=&quot;450,250&quot; will increase the invisible rectangle where the text is, so the text wont get cut off. and if you want to move the text over a bit, say if you have overscan issues change loc=&quot;10,245&quot; to say loc=&quot;30,245&quot;

<table border="0" align="center" width="95%" cellpadding="0" cellspacing="0"><tr><td>Code Sample </td></tr><tr><td id="CODE"><DrawText text="@buttonText" loc="15,9" size="115,34" textStyle="ButtonText" align="Left"/> [/QUOTE]
the text=&quot;@buttonText&quot; is a special string, it will be replaced by the actual button name, but only if the text is exactly &quot;@buttonText&quot; if you change it to &quot;@myButtonText&quot; it wont work, and the text &quot;@myButtonText' will be displayed on all the buttons, give it a go and you'll see what i mean. also the loc=&quot;15,9&quot; is the relative position of the text inside the button, the button bounds are declared in the composite image tag ie
<table border="0" align="center" width="95%" cellpadding="0" cellspacing="0"><tr><td>Code Sample </td></tr><tr><td id="CODE"><CompositeImage name="NormalButtonImage" size="130,45">[/QUOTE] so the buttons width =130 and the height=45.

ok thats enough of a lesson for today.

[reedmikel]

Thanks, that explained some parts. BUT I still don't see where you control the height of an INDIVIDUAL text line that appears within the scrolling text window. ie the file listing window. When I increased the font size significantly, EACH line was slightly chopped off at the bottom of EACH line. The overall rectangular scrolling window is NOT an issue - it's the HEIGHT of EACH indivdual line within the scrolling region...

Maybe somebody has done this? Or am I the only person watching on a TV (as opposed to a laptop or PC), and sitting more than 10' away ?

[reven]

you know what, i dont think you can. i assume this is the &quot;video library&quot; skin. i suggest trying the &quot;my videos&quot; plugin, it has way more things that you can skin, including everything you would need to change the fonts to larger sizes without getting cut off.

[reedmikel]

Thanks!! Glad to know I wasn't overlooking something simple I'm amazed that this topic doesn't come up all the time. I guess most folks that use GB-PVR watch on their PCs or have 50&quot; TV sets - or just batter vision than me

I'll take a look at My Videos and see if it is more configurable...

[KingArgyle]

What makes this more difficult than anything, is that each plugin can define their own &lt;SpecialElments&gt; and the attributes it takes. So creating a nice GUI Config editor is a bit difficult because there is no set standard on how elements are refered, and what they refer back to. The Skins are much easier to deal with from a programming aspect doing it the way GBPVR does it, but makes it more difficult to right a good editor to handle this.

One thing that would help in this aspect would be a Schema for each of the skins or plugins, so that a Skin Editor would know what is valid or not valid for a particular plugin's skin.