BlueMCE2-X cleanup project

[Fatman_do]

Looks good Fatman, can't see any obvious changes.

What do you think the next step is? I was thinking we could make "guide" images for each of the items in the list, possibly similar to those used in MixMan's "designer guide". These can then be used to create some good xml's for all the plugins.

Yeah, I guess guide images are in order. MixMan's developer skin is a good start. MixMan's developer images are based on 800x600 resolution so the background masks are not to scale.

Those images should be as close to actual size as possible. The 65px area for the Title_Bar is actually 52px in 720x480. (So maybe that area should be 55px high?)

I'll double check MixMan's recommendations on everything and see how the sizes all fit compared to the masks. I know he has suggestions on x,y locations on buttons. His widths in BaseSkin for buttons are scaled for longer text strings which is ideal.

I think tweaking the sizes of the background_mask file is all that is needed there as compared to the xml values.

[Fatman_do]

MixMan,

The padding on your developer listview.png seems fine. The one you had was scaled at 20px for a 800x600 resolution. When it is rescaled to 720x480, the size of the padding is only 15px. (Your listview.png is sized at 450x390 when scaled to 720x480 resolution)

What should be the largest normal size?

If buttons are defined 180px. long and start at x=0. That leaves 540px left out of 720.

In your baseskin.xml proposal, button images usually would start at x=15. If we kept that same spacing between buttons and the list, and list to the edge of the screen, that leaves an area of 510 px. for the listview. (720-180-15-15=510)

So the width would be 510.

Now the height.

The title bar is either 65px (xml) or 55px (mask). If a list is "Centered" vertically from those, the sizes are either 350 or 370. We probably don't need that much space below a list (unless it is usefull for misc information or remote hints.). Split the distance and the title bar is y=60px, Listview height =360 px.

So does that sound good? 510 x 360 as a starting point?

This is what a typical layout would be then with those sizes. This is a crude version of Background_Mask found in the developer skin.

[ATTACHMENT NOT FOUND]

[Fatman_do]

That suggestion above is of course for plugins that follow the typical looks of most other plugins. Plugins like VA, Music Player, MusicLibrary2 and maybe a few others don't follow this scheme.

[Fatman_do]

Wiki page updated with latest ramblings.

http://gbpvr.com/pmwiki/pmwiki.php/Devel...munitySkin

MixMan,

So how does the latest organization and wiki example look?
I am taking some of what you had in your document and putting it up on the wiki.

[Fatman_do]

How will a 720x480 plugin skins work with a 1024x768 core skin?
Font and button size problems if those defenitions are kept in the baseskin.xml.
Thats why I think the button definitions should be in the plugin skin but tagged out.
Untagging the buttons....and the plugin skin would work with a 1024x768 core

After re-thinking this, and other things.

I think leaving button definitions in a skin.xml file, but tagged out, is the best way to go for many reasons.

It lets a skinner know that these elements are controlled by baseskin.xml.

It lets a skinner know if popup buttons use "PopupSelectedButtonImage" or if they are not present, it is assumed they are using "SelectedButtonImage".

Under sub's new method, you could untag them and modify size values to adapt to different resolutions or sizes as needed.

I think whatever is driven by the baseskin.xml should be tagged as such within a plugin skin.xml file.

(I am guilty of just deleting them out, which is a bad documentation practice.)

[Fatman_do]

Now the height.

The title bar is either 65px (xml) or 55px (mask). If a list is "Centered" vertically from those, the sizes are either 350 or 370. We probably don't need that much space below a list (unless it is usefull for misc information or remote hints.). Split the distance and the title bar is y=60px, Listview height =360 px.

So does that sound good? 510 x 360 as a starting point?

I think since list backgrounds may grow in the "Y" direction to maybe within 20 pixels of the bottom, the largest size may be 510x400. 510x360 might be the best symmetric size. The reference image probably should split the difference to minimize scaling issues. I will readjust the developer list background image to 510x380 then.

The buttons, if using 14pt fonts (using MixMan's proposal) sizes now.
If the composite image is 180px long, that is our max size. With a 15px offset as the "normal" starting point, that leaves a size of 165px. Buttons could get smaller depending on design, but 165 is a good starting point. 185 is for "anchored" buttons that touch the sides of the screen, so those would tend to be unique images.

With the composite image height set at 45px, that establishes our max vertical size. With 14pt fonts, the DrawText height needs to be about 25px high for best results. If the image is kept with the same as suggested 5px "Y" offset, centering it within the composite image leaves 35px for the height.

165x35 should be then what the default image will look like I guess.

This is slightly longer than the ones used in Advisor(BaseSkin). I assume this length is good enough for text strings in various European languages.

[Fatman_do]

http://gbpvr.com/pmwiki/uploads/Developm...Images.zip

Images updated with names on wiki page.
Images separated into indivdual folders based on being "Theme" related or "Common".

All images are not fully defined (size or appearance).

These could represent what it would take to rework MCE2 to keep the same appearance.

For an image based standard, should the images look like 'Blue', or something new?

[MixMan]

Defining the ListView background area to a specific value is impossible.
Sub seems to have used different methods for scaling the sub menu skins.
I have used 545,435 for the Photo, Video and Music.
I use the DesignerGuide mask to get a similar look for all Sub Menus.

The TopBar in the 720x480 BaseSkin is 65px and the left and right padding is 15px.
I made the TopBar height approx 10px smallare than the original BlueMCE2.
At the bottom of the screen I have reserved space for BulletBall help info like some plugins have. I made some test with that. (tagged out in the skin)
I might include it in the future, but I thought it cluttered the screen.

I have made a copy of Fatman_do's image list to the 3:rd post in this thread.
I will try to define whar could be the minimal "core" images and what should be defined as plugin images.

I am hoping that Sub would make (or we) would make a image based default skin for GBPVR.....that could be "image compatible" with my ThemePacks (modified of course)
I am not going to continue the development of the 720x480 BaseSkin/Advisor skin....but it would be a pity if all the graphics would be waisted.
As I has said earlier, I'm going to make a 1366/1024x768 skin...that will not be compatible with the current ThemePacks.

[Fatman_do]

Defining the ListView background area to a specific value is impossible.
Sub seems to have used different methods for scaling the sub menu skins.
I have used 545,435 for the Photo, Video and Music.
I use the DesignerGuide mask to get a similar look for all Sub Menus.

I haven't restricted it. I am just giving a basic size and area to start with. I think 510x380 is reasonable. Allowances are availible to go larger or smaller. The 510x360 is an example of what could be used if text fields were present below a list background. How do you get 545,435?

545(listview size)+180(button composite image size)=725 on a 720 wide area.
65px(top bar image)+435(listview size)=500 on a 480 tall area.
This takes into consideration no "padding" or spacing yet (15px by your statements).

If you use 535x415 (as I see in the photo library), that still doesn't "Fit".

What is odd is that your "PictureList" element is located at 190,65 with the size of 500,390. That must be what is located at and scaled too then because its image isn't 535x415 by any means. It is much smaller. Sub must have scaling with that then or I am missing something.

Any rate, the designerGuide Mask does not reflect any of these sizes, so that is why I created a new one. (Yours was an 800x600 image)

The TopBar in the 720x480 BaseSkin is 65px and the left and right padding is 15px.

Yes, in the xml's it is 65px. The Developer_Mask scaled to 52 at 720x480, that is why I took the middle ground. It could be anything really. I accounted for the 15px left and right padding also. It can be 65. There really is not that much difference.

I made the TopBar height approx 10px smallare than the original BlueMCE2.
At the bottom of the screen I have reserved space for BulletBall help info like some plugins have. I made some test with that. (tagged out in the skin)
I might include it in the future, but I thought it cluttered the screen.

That is why I have 60px at the bottom of the overlay. If you use 60px top and 60px bottom, you end up with 360. With allowing only 20px on the bottom you end up with 410.

I have made a copy of Fatman_do's image list to the 3:rd post in this thread.
I will try to define whar could be the minimal "core" images and what should be defined as plugin images.

I am hoping that Sub would make (or we) would make a image based default skin for GBPVR.....that could be "image compatible" with my ThemePacks (modified of course)
I am not going to continue the development of the 720x480 BaseSkin/Advisor skin....but it would be a pity if all the graphics would be waisted.
As I has said earlier, I'm going to make a 1366/1024x768 skin...that will not be compatible with the current ThemePacks.

We (I and others) can make PluginPacks similar to how I did for Chameleon then and keep the 720x480 xml's alive with the new standard. There really isn't much more in Advisor/BaseSkin compared to the list then is there once you think about it.

(I am one of those poor US fools who cannot afford HD any time soon).

[Fatman_do]

Re-stating what was in an earlier post about organization ideas.
Where do the images go:

1*All in skinroot
Pro= One place, with no paths to type in. (Current AM and ThemePack method)
Con= Can end up with many images to sort through in one spot. (Dottore stated this)

2*All in a common image folder:
Pro= Images in one central location, separated from anything in skinroot. (MCE2, Oliba, Sassari, all of TipStirs use this method)
Con= Can end up with many images to sort through in one spot. (Same as Dottore's statement on number of images, just path is different.)

3*Some in skinroot, the rest in a common image folder:
Pro=Major screen elements can be in skin root for easier sorting and path structure in xml files. Secondary screen elements, like icons, are separated in a common folder. (Secondary elements are less likely to be changed by a casual skinner or home user). Plugins can use Secondary screen elements folder as a common folder as well.
Cons=Two locations for files.

4*All in sub-folders (in a common folder or skin root):
Pro= Images grouped even further for better organization. (Dottore suggested this as a possibility)
Con= More path structure to skin into. Multiple directores to keep track of.

What do others feel are the best way to go?

I am leaning towards #3 being the best of all situations. Theme related images in skin root keeps AM functionality (unless there is a change to that plugin, and I don't see a reason to ask for it.). All other utility images are stored elsewhere, which can be a collective directory for other plugins to use.

I have given my thoughts, with an explanation on why, but that is just my opinion. I can be conviced something else is better, so lurkers give feedback please. Even if you are not a skinner, (plugin author or user), what "sounds" logical or best to you?