Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[Doof]

What is it?

It's a tool to aid in the design of Megaskins for Media Center. This is a really early beta/preview version, and as such, much of the planned functionality isn't there yet. It's mostly to give you a taste of what I'm working on, and to start getting some feedback about things that don't make sense, or things you'd like to see included in it.

What does it do?

Basically, it provides a GUI for setting parameters for the various skin components, so that you don't have to know how to read or write an XML file. The components will have descriptions that will help you understand what component does what, and which settings control what.

What does it NOT do?

It is not, nor will it ever be, an image editor. You'll still have to use Photoshop or MS Paint to create the images. This program will just help you put all of the pieces together. Eventually, I hope to implement some more advanced tools, but that's a ways off. This program is mostly a learning experience for me right now.

So... the first preview/beta thing is availabe here.
 
If you don't already have the .Net Framework installed, you'll need to download and install that (only once) as well. You can download it directly from microsoft at:
http://download.microsoft.com/download/a/a/c/aac39226-8825-44ce-90e3-bf8203e74006/dotnetfx.exe

Known Issues:

• Many of the menu items either don't do anything or don't work properly.
• It will not read in a skin yet. Don't start a project with this and expect to finish it later. If you want to create a skin all in one go, it should work, though.
  
• It will not create a new folder for your skin or handle any of the image file management. If you want to use it at this point, you'll need to manually create the folder and put all of the images there (kind of like how you do now). Eventually, I'll add things in to do this all automatically.

Again, it's a very incomplete program, so don't judge it too harshly. If you find a bug, let me know (it may or may not be expected), and if you have any suggestions for how to make it better/easier to use, please feel free. I'd like this to become a useful tool for skin authors.

[phelt]

I don't have time to play with this yet, but it sounds ambitious and interesting. Anything which might aid the production of more skins is a good step, IMO. Maybe it will help me get off my a** and throw some new skins into the mix.

Am I wrong in thinking this might eventually allow people to more easily mod specific parts of a skin, like the alternating colors in lists, highlight color, etc? Sometimes that's the thing that keep me from using a skin regularly.

If I can add a quickside-note about graphic editors for skins: I really like Macromedia Fireworks for skin building. It's less smooth than Photoshop but all of its native tools are vector, so you can resize/scale any object without distortion or blurring. The main thing is that it uses frames like an animation - very easy to make default, mouseover, selected, or any other states that you want and cycle quickly between them. And it has a nifty slice tool so you can define rectangular areas and have the program cut them up, auto-name and export them for you.

[Matt]

Wow Doof, that's really cool.

Just a few thoughts:

• Think about some way to allow a user to 'see' changes as they make them.  This may require a hook to MC or something but it'd be really slick.
• Would it be possible to let people pick the component they're editing by clicking on an image of MC?  My biggest problem is that I can never remember what / where the right image is.
• Having an "Edit Image..." button that launched an editor would be slick.  The shell will do it for you with ShellExecute with the "edit" command.
• How about making your skin editor skinnable.  Maybe you could make a separate editor for creating editor skins ;)

Keep 'er up :)

[Doof]

• Think about some way to allow a user to 'see' changes as they make them.  This may require a hook to MC or something but it'd be really slick.

I'd definitely like to do something like this, and if you wouldn't mind lending me a little knowledge, it could be a really nice addition.

• Would it be possible to let people pick the component they're editing by clicking on an image of MC?  My biggest problem is that I can never remember what / where the right image is.

It's certainly possible. It would take a bit of coding to do, but I did just read a little bit on using an image map type control. I could probably throw in a window somewhere that displays a generic MC skin and depending on where you click, it jumps you to that component. Of course that would mean I'd have to figure out what does what as well.

• Having an "Edit Image..." button that launched an editor would be slick.  The shell will do it for you with ShellExecute with the "edit" command.

Definitely planned.

• How about making your skin editor skinnable.  Maybe you could make a separate editor for creating editor skins

But then I'd have to make the skin editor for the skin editor skinnable, and have to create a whole new editor... :P

It would be interesting to try some skinnable stuff, but like I said, I'm still just learning how to piece a basic app together... :P

I'd also appreciate, if at all possible, some information about exactly what properties are supported by which objects, which are required, which are optional, etc. I'd like to build in some sort of "integrity checker" to be sure your skin is complete.

[LisaRCT]

• How about making your skin editor skinnable.  Maybe you could make a separate editor for creating editor skins

Keep 'er up

Ummm, is he serious?   ?
Or is this like a Gordian Knot?    

Awesome project Doof, can't wait until it is finished.  
 And it does sound very slick if Matt's suggestions can be implimented.

[Doof]

Am I wrong in thinking this might eventually allow people to more easily mod specific parts of a skin, like the alternating colors in lists, highlight color, etc? Sometimes that's the thing that keep me from using a skin regularly.

Sorry meant to answer this earlier...

No, you're not wrong in thinking that. Once I get the file opening stuff written, it'll be able to handle that rather nicely. All you'd have to do is open the skin, find the component you want to change the property of, and have at it. Of course, if you wanted to change the way part of an image looks (like the buttons), you'd have to do that in an image editor. But this program will still help you find the proper image to edit.

And if I can work in Matt's idea about the clickable image thing, it'll be even easier.

[knickelfarz]

Wow, very nice project, looks promising!

Just a suggestions:

I think it would help very much to visualize the margin stuff, this seems to be the biggest hurdle for potential skinners... for a start, maybe it's possible to lay a grid over the shown image and display the letters of the corresponding regions, maybe together with the current property (tile/stretch)?

EDIT: Mmh, that will require zooming of smaler images... but maybe there's a way to manage that easily?


Just for the record:

It's possible to add a "DisplayFont " entry to the "Display" like

Code: [Select]

<Entry Name="Display" Bitmap="Playerbar_Display.png" NumberImages="1" Margins="69,0,106,0" DrawMode="REGION_E_HTILE,REGION_E_VSTRETCH" >
   <Colors TitleText="132243" StatusText="0E1A34" />
   <DisplayFont TitleSize="120" TitleWeight="800" StatusSize="100" StatusWeight="400" />
</Entry>It's also possible to add a <SPLITTER> entry like

Code: [Select]

<SPLITTER>
   <Entry Name="HorizontalBackground" Bitmap="Splitter_HorizontalBackground.bmp" NumberImages="1" Margins="1,1,1,1" DrawMode="REGION_E_HSTRETCH,REGION_E_VSTRETCH" />
   <Entry Name="HorizontalHandle" Bitmap="Splitter_HorizontalHandle.bmp" NumberImages="1" Margins="1,1,1,1" DrawMode="REGION_E_HSTRETCH,REGION_E_VSTRETCH" />
   <Entry Name="VerticalBackground" Bitmap="Splitter_VerticalBackground.bmp" NumberImages="1" Margins="1,1,1,1" DrawMode="REGION_E_HSTRETCH,REGION_E_VSTRETCH" />
   <Entry Name="VerticalHandle" Bitmap="Splitter_VerticalHandle.bmp" NumberImages="1" Margins="1,1,1,1" DrawMode="REGION_E_HSTRETCH,REGION_E_VSTRETCH" />
</SPLITTER>Unfortunately, the splitters are always drawn with a fixed width (as yet?), so you can not achieve very much with this entry until now...

EDIT: And there's also this mysterious entry "DefaultButton" in the <FRAME> section... I couldn't find out what it does / where it appears, yet...

Keep on coding  

[Doof]

I think it would help very much to visualize the margin stuff, this seems to be the biggest hurdle for potential skinners... for a start, maybe it's possible to lay a grid over the shown image and display the letters of the corresponding regions, maybe together with the current property (tile/stretch)?

EDIT: Mmh, that will require zooming of smaler images... but maybe there's a way to manage that easily?

Yeah, this was something I wanted to look into. I was playing around with something a while ago, but it never really panned out. But an adjustable grid sort of thing was what I had in mind as well. Hopefully I'll be able to figure out how to make something like this work. Even zooming in wouldn't be so bad, really.

Just for the record:

It's possible to add a "DisplayFont " entry to the "Display" like

Code: [Select]

<Entry Name="Display" Bitmap="Playerbar_Display.png" NumberImages="1" Margins="69,0,106,0" DrawMode="REGION_E_HTILE,REGION_E_VSTRETCH" >
   <Colors TitleText="132243" StatusText="0E1A34" />
   <DisplayFont TitleSize="120" TitleWeight="800" StatusSize="100" StatusWeight="400" />
</Entry>It's also possible to add a <SPLITTER> entry like

Code: [Select]

<SPLITTER>
   <Entry Name="HorizontalBackground" Bitmap="Splitter_HorizontalBackground.bmp" NumberImages="1" Margins="1,1,1,1" DrawMode="REGION_E_HSTRETCH,REGION_E_VSTRETCH" />
   <Entry Name="HorizontalHandle" Bitmap="Splitter_HorizontalHandle.bmp" NumberImages="1" Margins="1,1,1,1" DrawMode="REGION_E_HSTRETCH,REGION_E_VSTRETCH" />
   <Entry Name="VerticalBackground" Bitmap="Splitter_VerticalBackground.bmp" NumberImages="1" Margins="1,1,1,1" DrawMode="REGION_E_HSTRETCH,REGION_E_VSTRETCH" />
   <Entry Name="VerticalHandle" Bitmap="Splitter_VerticalHandle.bmp" NumberImages="1" Margins="1,1,1,1" DrawMode="REGION_E_HSTRETCH,REGION_E_VSTRETCH" />
</SPLITTER>Unfortunately, the splitters are always drawn with a fixed width (as yet?), so you can not achieve very much with this entry until now...

EDIT: And there's also this mysterious entry "DefaultButton" in the <FRAME> section... I couldn't find out what it does / where it appears, yet...

Thanks. This is exactly the type of info I need. Unfortunately the SDK is out of date, otherwise it would have been based comepletely off of that. As it was, I used your BlueSteel skin as my base.

[Doof]

Ok, I'm looking for ideas here... how should I handle fonts?

What I'd like to do is provide the gui font selection box like everybody's used to. The problem is, I don't how it all translates into MC-speak.

for instance... TitleSize="120" TitleWeight="800"

For weight, Windows gives you two choices. Bold or Not Bold. So what does "800" mean?

And does MC use points for font sizes?

Plus, the font dialog box displays a lot of other information that has no use in an MC skin.

So should I drop the font dialog box altogether? Should I just provide some text boxes for skinners to input their own values and just blindly output those values?
 
Any other ideas?

[LisaRCT]

How's it coming along?
I imagine this is a major headache and alot of work to create.

[Doof]

Actually, I haven't really done anything with it. First it was Christmas, and then I went and got sick...

But now that that's all settled, I may get back to work on it soon. I'm just not looking forward to writing an XML parser.

I'm hoping that some of the premade XML parsing controls I've seen mentioned will do the trick.

[sraymond]

...I'm just not looking forward to writing an XML parser.

I'm hoping that some of the premade XML parsing controls I've seen mentioned will do the trick.

Using pre-existing XML parsers with configuration files is another of the benefits of XML.  I cringe every time I see a *.ini configuration file because there's all that extra code just to parse the .ini.  And error checking becomes tedious to do well.  Using XML and XML Schemas, you can quickly parse the configuration file and validate it against a Schema that *completely* describes its structure.  All with just an API into an XML parser.

What parser are you thinking of using?

Scott-

[Doof]

I don't know, really. Any suggestions?

I'm a little afraid that the skin's XML file may be incompatible in some way to a standard XML parser... of course the only thing I have to base that fear on is that IE always complains about duplicate entries when it tries to read a skin's XML file. It's probably just due to limited XML capabilities in IE, but it was enough to make me really dread this part of the program.

[sraymond]

I don't know, really. Any suggestions?

I'm a little afraid that the skin's XML file may be incompatible in some way to a standard XML parser... of course the only thing I have to base that fear on is that IE always complains about duplicate entries when it tries to read a skin's XML file. It's probably just due to limited XML capabilities in IE, but it was enough to make me really dread this part of the program.

Strange...  all the Mega-Me skins I have are "well-formed" XML.  This means it follows all the rules of XML and should be parseable by anything compatible with XML Version 1.0 (which is the only version out there).

Can you give me an axample of a main.xml that doesn't get rendered by IE?  Maybe it has more than one root node?

What language are you programming in?

Scott-

[Doof]

Well, if I open the main.xml from the Blue Steel skin in IE6 I receive the following:

Duplicate attribute. Error processing resource 'file:///C:/Program Files/J River/Media Center/MegaSkins/Blue Steel/main.xml'. Line 9, Position 195

 <Entry Name="TopBorder" Bitmap="MainFrame_TopBorder.bmp" NumberImages="1" TransColor="FF00FF" Margins="204,1,64,1" DrawMode="REGION_E_HSTRETCH,REGION_E_VTILE,REGION_B_STRETCH,REGION_H_STRETCH" TransColor="FF00FF" />
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------^


I had written this off as IE just not noticing that, while TopBorder does exist in multiple places, they are all sub-items of other non-duplicate items (MainFrame, Frame, etc). I assume it would have the same problem with BottomBorder, RightBorder, etc.

I hope that's all it is, because I'd really like to use a pre-built parser if possible.

I've written this in C#.

[sraymond]

Well, if I open the main.xml from the Blue Steel skin in IE6 I receive the following:

Duplicate attribute. Error processing resource 'file:///C:/Program Files/J River/Media Center/MegaSkins/Blue Steel/main.xml'. Line 9, Position 195

 <Entry Name="TopBorder" Bitmap="MainFrame_TopBorder.bmp" NumberImages="1" TransColor="FF00FF" Margins="204,1,64,1" DrawMode="REGION_E_HSTRETCH,REGION_E_VTILE,REGION_B_STRETCH,REGION_H_STRETCH" TransColor="FF00FF" />
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------^


I had written this off as IE just not noticing that, while TopBorder does exist in multiple places, they are all sub-items of other non-duplicate items (MainFrame, Frame, etc). I assume it would have the same problem with BottomBorder, RightBorder, etc.

I hope that's all it is, because I'd really like to use a pre-built parser if possible.

I've written this in C#.

Oh...  you just have two TransColor attributes.  Get rid of the duplicate and all is well.

Scott-

[Doof]

Ah, darn... didn't even notice that.

[sraymond]

I've written this in C#.

Is that part of the Microsoft .NET framework?  I think .NET has an XMLReader class - but Scott_r. would know for sure.

Scott-

[Doof]

I promise I'm going to get back to this thing.

I just started doing some reading on the XML parsing stuff and have reached a semi-conclusion that a partial rewrite may be in order. It would basically make it easier to move forward, and easier to maintain.

Unfortunately (not really), I've got a cave diving trip coming up really shortly and I've been way too busy getting prepared. Add that to a huge network upgrade project at work, and I just haven't had any time at all to jump back into this.

But I promise that once I get back, I'll jump back in.