Building a skin from scratch - a tour - (1 Viewer)

[kiwijunglist]

That's so involved, hopefully what you've done can be used as a 'template' with credit for other potential future skins to avoid duplication. It looks like a lot of work.

 

[mbuzina]

Thanks @kiwijunglist - that is one reason I am doing it this way - not only building a Skin, but documenting the process.

 

[catavolt]

@mbuzina: This is really great work .
I also started something similiar some time ago, but gave up (temporarily) because of missing ability to put string expressions in hyperlinks.
This should be fixed soon, I hope
I am also in contact with @Micropolis to provide a special plugin where you can edit this settings independent from the skin settings page, based on a xml where all plugins with their names and hyperlinks are listed, so the user can easily choose the plugin and the display location
Maybe we could work together to make this an universal skin editor

 

[mbuzina]

I never understood why creating a universal menu editor should be so difficult. Yes, in some skins the top entries have hyperlinks, in others only submenu (if there are sub entries), like Titan. Some have one overlay, some have more than one. Some are horizontal, some vertical, and maybe even some will support more than 2 menu hierarchies. But still: basically we have a tree with options.

That is either a general XML sheet, which can be translated using XLT or used in expressions. I am now working on the last version.

With regard to expressions in hyperlinks (and many others!): @Pog has suggested something that works, at least for the top level of my menu, it also works for actions (I wanted to configure what Shutdown does, either ask, Power Off, Hybernate or Sleep). For my submenu each expression needs to be evaluated on click - so that will not work.

I am also in contact with @Micropolis to provide a special plugin where you can edit this settings independent from the skin settings page, based on a xml where all plugins with their names and hyperlinks are listed, so the user can easily choose the plugin and the display location

Great idea - if MP can not provide the info (which it should in my opinion, the plugin manager should know what is there) we need to build something. Still I hope MP will provide resolution for the bugs I logged. If you can confirm them, I will provide a mantis for each.

Another thing that really irks me, is that we have 2 script languages in MP skins. There are the # expressions, which allow quite complex calculations and there is the visibility / animation condition language, which does not have proper constructs, but provides a lot of pre built conditions. Both should be harmonized and provide the best of each to everyone (pretty please?).

If we can get some commitment from a core MP dev who knows his way around the skin engine I would say let us build a team that makes MP skinning great. If that is not possible I would suggest to go the plugin route. @Developers : Any takers?

 

[mbuzina]

Touch Controls?
That is another of the ideas I would like to include in this skin. Touch screens are more common every day - so I would like my skin to be touch enabled.

This is unfortunately quite hard to do. So up to now I "just" have a setting in SkinSettings.xml (again ;-) which says: #skin.ShowTouchControls, a Style in reference.xml as follows:

	<style Name="touchControlStyle">
		<description>Touch Left</description>
		<id>1</id>
		<type>button</type>
		<width>20</width>
		<height>70</height>
		<visible>skin.hassetting(#skin.ShowTouchControls)</visible>
		<animation effect="slide" time="200" start="0,-40" easing="inout">WindowOpen</animation>
		<animation effect="fade" time="200" easing="inout">WindowOpen</animation>
		<animation effect="slide" time="200" end="0,-40" easing="inout">WindowClose</animation>
		<animation effect="fade" time="200" easing="inout">WindowClose</animation>
	</style>

and some buttons designed to aid touch control (an always visible Back Button for example, a button to show the topbar and left/right nav buttons). Again there is a big but:
They don't work yet (except the back button, that is an action I can use)! The left/right buttons rely on focus moving per

<onclick>#(skin.setfocus(35,#(add(cint(1001),cint(#BasicHome.Current.ID)))))</onclick>

but that does not work.

The show topbar button should move focus to the topbar (which is another window) but it doesn't. Hyperlinking to window 3005 (topbar) also does not work.

Then I wanted to finish of my topbar. I created some nice round buttons, an put them in a group with StackLayout(Horizontal,10) just to see that the buttons were aligned vertically. I was unable to create a horizontal stack, so I used the GridLayout. Again, unfortunately, GridlLayout makes each entry the same size, resulting in a too large space between the groups I wanted to create. So I ttried the TableLayout. That seems to work better, so here is my TopBar enabled BasicHome screen. Play icon & pause icon will toggle depending on playing media (since player.hasmedia is not available in # skin expressions, only in visibility settings, I had to compare #Play.Current.Title with the empty string to get a result. Still feels strange to have 2 scripts in one product). The fullscreen will also toggle as soon as I can find out if this will work correctly (compare #currentmodulefullscreenstate with the empty string?).

Btw.: Why does MP need 2 topbar files (topbar.xml & topbarhome.xml)? It only uses topbar.xml, the other one is ignored even on all home screens

 

[catavolt]

Btw.: Why does MP need 2 topbar files (topbar.xml & topbarhome.xml)? It only uses topbar.xml, the other one is ignored even on all home screens

You can specify other buttons in topbarhome and then explicity import that in the home screens (as I did with Default skins)

 

[mbuzina]

Some more ideas on the topbar: Why should it only contain the controls defined in other skins? I would like my topbar to be more functional, so I added a few hyperlinked icons to jump to specific sections of MP and some volume controls. Currently the jumps are still hardcoded, they may be more configurable in the future. I also added current playing time & remaining time.

I wanted to add another goodie, a progressbar behind the nowplaying time. But, I am not sure how to create a progress bar based on the #percentage property. Anyone with a suggestion? Current look:

Btw. The overlap between topbar and header text is on purpose, I might increase it even if I want the topbar to be larger.

Some open questions: visibility conditions player.forwarding and player.muted do not work. I wanted to switch image on muted (so that the mute / unmute images change) and I have added pulsing animation to rewind, pause & ffwd buttons. Rewind & pause work, but FFWD does not. Bugs?

 

[mbuzina]

Ah and another item: I have added animations to the topbar, it should slide & fade in (as the header does). But only the background image does that, the buttons just appear & disappear. Why could that be? I have attached the same animation rules to a) The group of the buttons and b) the buttons themselves and both animations are ignored for Window Open/Close and Visible/Visibility Change (tried both). So what does the topbar do?

 

[kiwijunglist]

Can you just use your own custom xml for topbar, maybe it has some weird rules associated with it?

EDIT: Also, I'd like multi-touch, ok, thanks...

 

[mbuzina]

Yes, you can use a custom XML. Somehow no animations yet, that will come to sometimes.