Community Skin 3.0 Open development thread.

MixMan · 2007-07-18, 12:01 AM

Thank for your responce Fatman_do
Sub has set names in the baseskin for the most CommonImages definitions that might be used by plugin developers, so the image naming is not that important if Subs definitions are used by the developers.
I think that ScrollUp and ScrollDown also should be a CommonImage in the baseskin, instead of images names specified in the skins.
There might be some text and color defenitions thats "missing" and would be used by plugin developers.
I will make a list of things that should be defined...when I run into it.
I haven't put to much thought into it though.

If you have a look at the MediaPortal Skins/Themes, all images including taskimages and ScreenTitleLogos are put into one folder, so its possible to have it that way, but I think its "messy"

Fatman_do · 2007-07-18, 02:43 AM

MixMan Wrote:Thank for your responce Fatman_do
Sub has set names in the baseskin for the most CommonImages definitions that might be used by plugin developers, so the image naming is not that important if Subs definitions are used by the developers.

That is true, however, if the Images are named the same as much as possible that will help both of us out. Your strength is putting together image packages (Themes) where as I don't have the talent or time for such things. I like dealing with things under the hood, so if we get things cross-compatible as much as possible, I think it helps everyone.

MixMan Wrote:I think that ScrollUp and ScrollDown also should be a CommonImage in the baseskin, instead of images names specified in the skins.

I agree here, which wouldn't suprise anyone looking at the CommunitySkin baseskin.xml files. I have those as CommonImages in the CS 3 beta.

Image Names are different in my latest, but here is what I have using sub's naming.

Code:
<CommonImage name="ButtonUp">

  <DrawImage filename="..\_CoreImages\Up.png" loc="0,0" size="100,100"/>

</CommonImage>

<CommonImage name="ButtonDown">

  <DrawImage filename="..\_CoreImages\Down.png" loc="0,0" size="100,100"/>

</CommonImage>

MixMan Wrote:There might be some text and color defenitions thats "missing" and would be used by plugin developers.
I will make a list of things that should be defined...when I run into it.
I haven't put to much thought into it though.

My thoughts are there should be at least 5 default colors for text. With these I would be happy.
1: General all purpouse text, used almost everywhere, almost always white.
2: Normal Selector (used on Buttons\Lists)
3: Selected Selector (used on Buttons\Lists)
4: SelectedInactive Selector (Lists & A whishlist button I added)
5: Header\Tag\Bold-Eye catching text

6: Optional screen name color.

In this scenario, Whatever is selected can have a distinct color. The only gotcha would be if you used white buttons with black text, you would have to use white list selectors with black text. Those three could be separated into 6 if needed.

I was thinking along keeping choices down so the skinplugin can modify them and not be overwhelming.

McBainUK does that sound like something to consider?

MixMan Wrote:If you have a look at the MediaPortal Skins/Themes, all images including taskimages and ScreenTitleLogos are put into one folder, so its possible to have it that way, but I think its "messy"

Never looked at it, but I can see where it would be cluttered.

McBainUK · 2007-07-18, 06:59 AM

The 6 textstyles make sense. I'm all for tyding up the baseskin.xml

Fatman_do · (This post was last modified: 2007-07-18, 11:58 PM by Fatman_do.)

I cut down the number of texts and colors.

Colors represent things maybe the SkinPlugin could modify?? Green is globally set, and Blue is globally set. (Globally set means one click sets all these same colored fields)

Code:
<!--CommunitySkin 3.0 BlueMCE2 Developer edition-->

<!-- Named Colours -->

<NamedColors>

    <!--These may be modified by the SkinPlugin-->

    <!--Selector Text Color-->

    <NamedColor name="Normal" color="[color=Red][B]White[/B][/color]" />

    <NamedColor name="Selected" color="[color=Red][B]White[/B][/color]" />

    <NamedColor name="SelectedInactive" color="[color=Red][B]White[/B][/color]" />

    <!--Static Text Color-->    

    <NamedColor name="General" color="White" /> <!-- Always will be white-->

    <NamedColor name="Header" color="[color=Red][B]#a2c9f1[/B][/color]" />

    <NamedColor name="ScreenName" color="[color=Red][B]#2562b0[/B][/color]" />

    <!--For use with DrawTextWithOutline-->

    <NamedColor name="GeneralOutline" color="Transparent" /> <!--Theme item only-->

    <NamedColor name="NormalOutline" color="Transparent" />  <!-- too much for this to be selectable-->

    <NamedColor name="SelectedOutline" color="Transparent" />

    <!--These will not be modified by the SkinPlugin, for right now being left in for theme possibilities-->        

    <!--TV Guide Colors, Do NOT use vertical gradients  -->

        <NamedColor name="NormalListing" color="Vertical:#000088-#000044"/>

    <NamedColor name="ReminderListing" color="Horizontal:#000022-#000088"/> 

    <NamedColor name="ScheduledListing" color="Horizontal:#990000-#AA0000"/>

    <NamedColor name="SelectedListing" color="Horizontal:#002200-#008800"/>

    <NamedColor name="SelectedReminderListing" color="Horizontal:#000044-#0000BB"/>

    <NamedColor name="SelectedScheduledListing" color="Horizontal:#440000-#BB0000"/>

    <NamedColor name="ConflictListing" color="Horizontal:#442200-#AA5533"/>        

    <NamedColor name="SelectedConflictListing" color="Horizontal:#664422-#CC8844"/>

    <!-- the surrounds must be solid colours for now -->

    <NamedColor name="ListingSurround" color="#0F59B2"/>

    <NamedColor name="ChannelIconSurround" color="Transparent"/>

    <NamedColor name="ChannelNameRectangle" color="Transparent"/>

    <NamedColor name="SelectedListingSurround" color="Transparent"/>

</NamedColors>

<!-- text style -->

<TextStyles>

    <!-- special case text style providing defaults -->

    <TextStyle name="DefaultTextStyle" color="General" typeFace="[color=Red][B]Arial[/B][/color]" size="[color=Red][B]12[/B][/color]" style="[color=Red][B]bold[/B][/color]"/> 

    <!--In the Above line  possibly Size, Typeface, and Style as modifiable with SkinPlugin-->

    <!--Used by sub in blue-->

    <!-- other commonly used text styles -->

    <TextStyle name="ScreenNameStyle" typeFace="[color=Red][B]Arial[/B][/color]" color="ScreenName" size="[color=Red][B]32[/B][/color]"/>

    <TextStyle name="ButtonTextStyle" color="Normal"/> <!--Size, Typeface and Style pulled from DefaultTextStyle-->

    <TextStyle name="GeneralTextHeaderStyle" color="Header"/>

    <TextStyle name="GeneralTextStyle" color="General"/>

    <!-- details view -->

    <TextStyle name="DetailsViewItemsTitle" color="Normal"/> <!-- I think these are redundant with ListViewItems-->

    <TextStyle name="DetailsViewFolders" color="Header"/>

    <!-- list view -->

    <TextStyle name="ListViewItems" color="Normal"/>

    <TextStyle name="ListViewFolders" color="Header"/>

    <!-- icon view -->

    <TextStyle name="IconViewItems" color="Normal" size="[color=Green][B]12[/B][/color]"/>

    <TextStyle name="IconViewFolders" color="Header" size="[color=Green][B]12[/B][/color]"/>

    <!--CommunitySkin Addons-->        

    <!-- Button text styles --> <!--I prefer these names (Fatman_do)-->

    <TextStyle name="ButtonTextNormal" color="Normal" size="[color=Blue][B]14[/B][/color]" />

    <TextStyle name="ButtonTextSelected" color="Selected" size="[color=Blue][B]14[/B][/color]" />

    <TextStyle name="ButtonTextSelectedInactive" color="SelectedInactive" size="[color=Blue][B]14[/B][/color]" />

    <TextStyle name="GeneralTextTitleStyle" color="Header" size="17"/> <!--Used like GeneralTextHeaderStyle, but with a larger font-->

    <!-- List text styles-->

        <!--Icon Selectable text-->

    <TextStyle name="IconNormal" color="Normal" size="[color=Green][B]12[/B][/color]" /> <!--Text under icons usually need to be smaller-->

    <TextStyle name="IconSelected" color="Selected" size="[color=Green][B]12[/B][/color]" />

    <TextStyle name="IconSelectedInactive" color="SelectedInactive" size="[color=Green][B]12[/B][/color]" />

        <!--List Selectable text-->

    <TextStyle name="ListNormal" color="Normal" />

    <TextStyle name="ListSelected" color="Selected" /> 

    <TextStyle name="ListSelectedInactive" color="SelectedInactive" />

</TextStyles>

Fatman_do · (This post was last modified: 2007-07-19, 12:45 AM by Fatman_do.)

Here are the defined CommonImages, Highlighted ones are unique to the CommunitySkin. I renamed image files for the hell of it, they can remain what they were if that makes things easier. Generally I shortened the names up. I can live with whatever for names.

Code:
<CommonImages>

    <CommonImage name="ListBackground">

        <DrawImage filename="..\_CoreImages\ListView.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <!-- details view -->

    <CommonImage name="DetailsViewNormalItemBackground">

        <DrawImage filename="..\_CoreImages\Detail_Normal.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="DetailsViewSelectedItemBackground">

        <DrawImage filename="..\_CoreImages\Detail_Selected.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="DetailsViewSelectedInactiveItemBackground">

        <DrawImage filename="..\_CoreImages\Detail_SelectedInactive.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <!-- list view -->

    <CommonImage name="ListViewNormalItemBackground">

        <DrawImage filename="..\_CoreImages\List_Normal.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="ListViewSelectedItemBackground">

        <DrawImage filename="..\_CoreImages\List_Selected.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="ListViewSelectedInactiveItemBackground">

        <DrawImage filename="..\_CoreImages\List_SelectedInactive.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <!-- icon view -->

    <CommonImage name="IconViewNormalItemBackground">

        <DrawImage filename="..\_CoreImages\Icon_Normal.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="IconViewSelectedItemBackground">

        <DrawImage filename="..\_CoreImages\Icon_Selected.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="IconViewSelectedInactiveItemBackground">

        <DrawImage filename="..\_CoreImages\Icon_SelectedInactive.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <!-- filmstrip view -->

    <CommonImage name="FilmstripViewPreviewBackground">

    </CommonImage>

    <CommonImage name="FilmstripViewNormalItemBackground">

        <DrawImage filename="..\_CoreImages\Icon_Normal.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="FilmstripViewSelectedItemBackground">

        <DrawImage filename="..\_CoreImages\Icon_Selected.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="FilmstripViewSelectedInactiveItemBackground">

        <DrawImage filename="..\_CoreImages\Icon_SelectedInactive.png" loc="0,0" size="100,100"/>

    </CommonImage>

<!-- misc -->

    <CommonImage name="GeneralSelection">

        <DrawImage filename="..\_CoreImages\List_Selected.png" loc="0,0" size="100,100"/>

    </CommonImage>

<!-- CommunitySkin Unique -->

[COLOR="Blue"][B]

    <CommonImage name="ButtonUp">

        <DrawImage filename="..\_CoreImages\Up.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="ButtonDown">

        <DrawImage filename="..\_CoreImages\Down.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="TextBackground">

        <DrawImage filename="..\_CoreImages\TextBackground.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="TextBackgroundNarrow">

        <DrawImage filename="..\_CoreImages\TextBackground_Narrow.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="TextBackgroundWide">

        <DrawImage filename="..\_CoreImages\TextBackground_Wide.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="SmallPopupBackground">

        <DrawImage filename="..\_CoreImages\Popup_Small.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="MediumPopupBackground">

        <DrawImage filename="..\_CoreImages\Popup_Medium.png" loc="0,0" size="100,100"/>

    </CommonImage>

    <CommonImage name="LargePopupBackground">

        <DrawImage filename="..\_CoreImages\Popup_Large.png" loc="0,0" size="100,100"/>

    </CommonImage>

[/B][/COLOR]

</CommonImages>

The Composite image stuff is pretty standard fare, I just pulled them from sub's library plugins. Nothing unique to CommunitySkin there.

This is the prototype baseskin.xml file

Fatman_do · 2007-07-19, 12:41 AM

The Images I was thinking of renaming in addition to what is marked up on the wiki (those follow blue), are as follows.

Background_Text
Background_TextWide
Background_TextNarrow

may become

TextBackground
TextBackground_Narrow
TextBackground_Wide

Better sounding, but it could stay the same.

-----
Background_Popup
Background_PopupBig
Background_PopupSmall

may become

Popup_Small
Popop_Medium
Popup_Large

-----
ListView_*

May become

List_*

-----
ListViewDetail_*

may become

Detail_*

-----

IconView_*

may become

Icon_*

------
IconView_Folder

may become

Folder_Large
-------

Just toying with simplifying names.

McBainUK · 2007-07-19, 08:20 AM

Will have a look through these a bit later...

McBainUK · 2007-07-19, 12:37 PM

That all looks ok, it makes sense to reduce the number of textstyles and colours to whats needed.

---------------------------------------------------------
My thoughts are on how this will be implemeneted in the SkinPlugin and how CSkin3 will work with new and old style plugins. With the new plugins working off the SkinHelper2 system and with the use of <commonimage> tags and a clever list of textstyles and colours I think that the whole skin (appreance wise) could be controlled from the baseskin, with each sreen's layout defined by placement tags in it's own skin file. Looking at the CSkin's XML file for the Music Library screen it looks like this is already the case.

With PVRX2 screens and plugins the SkinPlugin would be able to edit the baseskin.xml file directly, changing the paths defined in the common image tags and the colour, style & size of a (limited) set of textstyles.

The benefits of this would inlcude:
*no more copying files to apply a theme or user edits
*easy saving of user made themes which would allow a theme sharing thread on the forums!

My concern is how this would effect legacy plugins and theme application. By simplifying it like this not using the coreimages folder in the CSkin it may cause trouble. One idea is to have 2 sections to the SkinPlugin - one to apply themes and edit fonts etc for new-style plugins. And another which continues to support the legacy plugins and the same manner as now. The question is then if you apply a theme in the new UI, a GBPVR.exe theme will also need applying to keep the old plugins looking similar.

---------------------------------------------------------
My current thoughts are to continue to use the coreimages folder copy files into the skin/community/coreimages and skin2/community/coreimages, and I will possibly look into adding a method of saving themes-even if it means save to folder. Textstyles would be updated directly, only effecting the Skin2 baseskin file.

---------------------------------------------------------
As you can see I have been thinking how things will work and what the expericance of using the SkinPlugin should be like and I have more questions then answers.... Any comments/suggestions warmly recieved Smile

McBainUK · (This post was last modified: 2007-07-19, 01:03 PM by McBainUK.)

Another idea is for the SkinPlugin to copy the relevent file to skin/Community/coreiamges/ when making the change to the skin2 baseskin. And change the GBPVR.exe skin files to match the PVRX2 skin2 files with regards to textstyle usage.

This would make a theme / edit universal accross both types of plugin screen.

McBainUK · 2007-07-19, 12:43 PM

Yet another idea is to add <commonimages> for all the used images defined here: http://gbpvr.com/pmwiki/pmwiki.php/Devel...munitySkin

As now what would happen when the theme/SkinPlugin wanted to changed the image for "IconView_FolderVideo", for example?

Possibly Related Threads…
Thread		Author	Replies	Views	Last Post
	Test/Development environment for npvr.db3	scJohn	10	3,870	2020-09-04, 09:14 PM Last Post: scJohn
	Skin help (correct location?)	SFX Group	4	3,714	2018-01-24, 07:42 AM Last Post: pBS
	Web Client: Slow with separate thread and date not obscured	cncb	32	15,267	2016-10-10, 02:01 PM Last Post: mvallevand
	skin question	pBS	2	3,203	2016-06-18, 07:03 PM Last Post: pBS
	Skin - view further into the future, scale the guide	Vitenka	5	3,131	2014-11-26, 07:28 PM Last Post: Vitenka
	Attention Sub: Open TV / Custom Data Grabber plugin	Benoire	2	2,799	2014-11-14, 02:05 AM Last Post: Benoire
	API docs to help with plugin development?	McBainUK	3	2,644	2013-06-08, 06:14 PM Last Post: sub
	Open Source Mheg+	Graham	0	1,368	2012-11-30, 06:32 PM Last Post: Graham
	Integrated Development Environment (IDE) for plugins	osx-addict	5	2,605	2012-10-18, 08:35 PM Last Post: osx-addict
	Skin element Details in NowNext	Jaggy	2	1,716	2011-09-19, 11:50 PM Last Post: Jaggy