Hi,

as written in the VisualMR thread I did enhance the skinning format to add features like cover art and to give more flexibility for you making your own skins (as well for me adding more features ). The updated skinning documentation is available at http://www.tl-it.de/media/pages/visualmr_skin2.php

If you haven't tried, take a look at the skinning feature if you want to give VisualMR a different look. Skinning is quite powerful and easy to do especially when starting from an existing skin like BlueGlass (don't worry about the rather long documentation - it's for giving a complete reference only and you don't need to study every single word ): Skinning is mainly about having some graphics skills and editing xml-files.

I started this new thread exclusively about skinning VisualMR since I felt it is worth not getting lost in the already rather large general VisualMR thread which is more about feature requests and trouble shouting.

Maybe this is also a good place to post your own skins since at the speed the general VisualMR thread is growing the skins posted there are now hard to find.

Thorsten

Hi,

this post will give you a brief overview of what has changed in VisualMR 1.2 skinning (for details please check the documentation). This is to help you updating your skin if you already made one for a previous version of VisualMR.

Most important: The <Skin>-tag in Skin.xml and the <Form> tag in ALL layouts must contain an attribute SkinFormat="2.0" which is used to identify that it is really a skin using the new features otherwise the compatibility mode is used (you can remove the VisualMRVers attribute which is replaced by SkinFormat).

New controls / elements introduced are: StateLabel, Image, StateImage and DrawShape

Label has been enhanced with the optional attributes Type (to control horizontal scrolling) and Empty (alternative text when nothing would be displayed)

Setting Volume: 'Vol+10','Vol-10',... has been replaced by SetVol(+10),SetVol(-10),... This way you can increase/decrease by any value, not only use the predefined. Additionally SetVol(=x) is possible for setting absolute volume levels from 0 to 100

Added Actions: 'Search', 'BrowsePresets', 'PlayPreset(x)', 'SetLayout(x)', 'GoAmazon', 'None'

The biggest change is in the area of values ('variables'): Now you can assign a static values, too (for example for a label with the text "Album". Therefor the syntax changed slightly: Static value begin with a single quote ' while dynamic values start with a #. Additionally the attributes of the current song are now grouped as "#CurrentSong.xxx".
Therefore the variables used before must be renamed as follows:
- Title => #CurrentSong.Title
- Album => #CurrentSong.Album
- Artist => #CurrentSong.Artist
- ElapsedTime => #ElapsedTimeText
- ElapsedTimeS => #ElapsedTimeSec
- TotalTime => #CurrentSong.TrackLengthText
- TotalTimeS => #CurrentSong.TrackLengthSec
- RepeatState => #Repeat
- ShuffleState => #Shuffle (Value "Shuffle" becomes "True")
- IsStopped => #IsStopped
- Volume100 => #Volume
- SongInfo => Not supported anymore
- State => Not supported anymore

Thanks to this changes the following new dynamic values are available:
1.) #IsPlaying, #HasMessage, #Message, #TransportState, #TransportStateText
2.) #CurrentSong.Genre / TrackLengthMSec / Year / Format / Bitrate / FormatAndBitrate / TrackNumber / TrackCount / TrackNumerAndCount / DiscNumber / DiscCount / DiscNumerAndCount / CoverArt / HasCoverArt / ASIN

Another new feature is that you can optionally define multiple (sub)layouts for each window size (like the cover art /info/buttons layouts in BlueGlass. Remember that these sublayouts must be defined in the skin.xml file, too. See the documentation and BlueGlass skin for more info about these sublayouts.

Thorsten

[url]


This one u already know =) it has the itunes look.

http://www.nitzdesign.com/temp/itunes/ItunesThemeV0.1.zip


Enjoy!

[/url]

Nice ITunes skin. I'd really like to see it with the cover art in it too though.

Hi,

I just uploaded a new version of the Whiteboard skin. Its mainly a demonstration on how to make a different UI (but also fun for showing off). Since it is much simpler than BlueGlass it might also be a good starting point for your own skin.



This skin can be downloaded here:
http://www.tl-it.de/media/pages/visualmr_skin.php

Thorsten

Hi,

in a follow up to my previous posting: I just updated the skinning format documentaion to match VisualMR's V1.4 skinning abilities: http://www.tl-it.de/media/pages/visualmr_skin2.php

In case you already have created a VisualMR V1.2 skin (SkinFormat=2.0) here's what is new:
- Build your own Popup using the new Popup action

- You can now assign an Action attribute (left click) to Label and DrawShape similar to a Button

- New optional attribute CMAction for context menus (right click or on PocketPCs tap+hold) for Button, Label, DrawShape and Image

- In the PC layout you can now include the SongQueue by using the new Control node

- A couple of new values values are definied (like #CurrentSong.Composer/Rating/Comment)

- A couple of new actions actions like VolPopup, SearchTitle, BrowseAlbumSongs and Popup (see above) have been added.


Note that the documentation starts with a short introduction on skinning while the rest is intended to be a reference only ... which you certainly won't have to work through to make your own skin

So to get started with your own skin just copy BlueGlass or Whiteboard and start modifying a layout according to your needs. It's quite simple and involves only editing XML text files (as well as creating new images if you like to change that).

Thorsten

joacim wrote:

:D This one u already know =) it has the itunes look.

http://www.nitzdesign.com/temp/itunes/ItunesThemeV0.1.zip

Anyone got a copy of this? The link's not working.

A couple of recent forum posts have asked about new VisualMR skins. I just created a new "Easy Icons" skin for my own use, which looks like this:



This skin is now posted for others to download and use. See later in this thread for details.

Feel free to PM me if you have any questions, ideas, or samples for a new skin design. I am happy to help while the VisualMR skinning format is still fresh on my mind.

Cheers!

Edited: removed old description, added new screenshot

Hi Thorsten-

Here are a few notes and suggestions from my recent VisualMR skinning exercise, fyi:


1) Volume indicator (progress bar) does not work, because this code:



raises this error:



Is there some way to cast the Max value as an integer? Or could you provide a #MaxVolume dynamic value? I assume this issue would also apply if I wanted to display #CurrentSong.Rating in a progress bar.

2) Would like to change the text and background colors of the command bar (bottom of screen). I used Microsoft's Theme Generator program to change the colors of the navigation bar (top of screen), but changes to the command bar did not affect VisualMR.

3) Alternatively, it would be great to have a full-screen mode, where the navigation bar and command bar are hidden until I click some button (physical or soft). This is mostly for other users, family, friends who do not need to see the menus and other PocketPC stuff. A full screen mode would free up enough space for another row of preset buttons. And maybe it could be 'locked' to keep others from messing with other settings or files on the handheld.

4) Would like to change the background color of the browse forms (currently white) to match the rest of the skin.

5) Would like to change the scrollbar thumb size on the browse forms, for finger-only control, as discussed in this thread.

FWIW, #1 is probably my top priority b/c I already created the images. #5 is my second priority b/c it affects usability, not just cosmetics.

But all of these are just suggestions for a program that is already superb. I was amazed at the extent and quality of your skinning system for this program. Thanks again. VisualMR rocks!

Zouvo, I'd love a copy of that skin, looks great.

zuovo wrote:

A couple of recent forum posts have asked about new VisualMR skins. I just created a new skin for my own use, which looks like this:

http://www.zuovo.com/?showimage=13379

...

This skin is very specific to my personal usage, e.g. no "Previous" button b/c I never use it. And I used some source icons that would need a distribution license. But if enough people are interested I might create a distributable version of a skin like this one.

Nice Would be great if you can one day provide a license free distributable version!

zuovo wrote:

(BTW Thorsten - how did you get the img tags to work in this forum?)

Just replace the 'url' part by 'img'. But it doesn't seem to work with your image - probably because it isn't linked directly to an image. My link directly points to a .gif (I inserted some spaces here to make it visiable as atext - of course the spaces must be removed when using it for real):
[ img ]http://www.tl-it.de/media/images/visualmr_wbcomic.gif[ / img ]

Cheers
Thorsten

zuovo wrote:

1) Volume indicator (progress bar) does not work, because this code:

Code: Select all

<Progress Contents="#Volume" Max="100">

...
Is there some way to cast the Max value as an integer

Any constant value must be preceded by a single quote (opposed to the dynamic values starting with #) no matter if it is a string or an integer. So just change it to '100

zuovo wrote:

2) Would like to change the text and background colors of the command bar (bottom of screen). I used Microsoft's Theme Generator program to change the colors of the navigation bar (top of screen), but changes to the command bar did not affect VisualMR.

That is most likely due to the fact that VisualMR doesn't use the new WM2005 style command bar (supporting only two soft key menus) but the older WM2003 style with more menus. In this case Microsoft always uses the dull grey version - probably to encourage migrating to the new style . So one more reason for me to start with the (optional) support for the new WM2005 style. Then the global theme will most likely work here, too.

zuovo wrote:

Alternatively, it would be great to have a full-screen mode

I'll keep that in mind but full screen has some implications for the program I don't like very much. But I'll keep that idea in mind and add it to my wish-list.

zuovo wrote:

4) Would like to change the background color of the browse forms (currently white) to match the rest of the skin.

Ups - i really missed that one. I'll add it in the next version

zuovo wrote:

5) Would like to change the scrollbar thumb size on the browse forms, for finger-only control, as discussed in this thread.

See my answer there ...

zuovo wrote:

But all of these are just suggestions for a program that is already superb. I was amazed at the extent and quality of your skinning system for this program. Thanks again. VisualMR rocks!

Thanks I really wanted to take the skinning approach beyond only changing fonts and colors. In fact I designed the whole skinning engine to be independent from VisualMR so that maybe one day it will live a life of its own

Thanks for your great suggestions - they are most welcome!
Cheers
Thorsten

tal wrote:

Nice Would be great if you can one day provide a license free distributable version!

OK. I just reworked this skin with images that I created entirely on my own, plus a few that I based on open-source icons licensed under LGPL or Creative Commons Attribution-ShareAlike license.

So it is not "license free", but it is royalty free. Anyone can copy, distribute, use, and modify this new skin as long as they keep the attribution/license notice, and share their changes under the same license.

Some of the icons are better, some are worse, but overall I think it is about the same. See http://www.zuovo.com/images/EasyIcons_095_screencap.jpg for the new screen capture. Comments are welcome.

Thorsten, if I send you the files, could you host this skin on your skins page at http://tl-it.de/media/pages/visualmr_skin.php?

Cheers!

zuovo wrote:

Thorsten, if I send you the files, could you host this skin on your skins page at http://tl-it.de/media/pages/visualmr_skin.php?

Sure All I'm asking for a nice skin to be hosted on my page is that they it is designed in the current format and that I don't have to worry about the icons being illegally copied from somewhere. Seems your skin matches both criteria so I'll gladly add it to my skins-page Just include a readme that gives credit to you being the creator of the skin and that covers the licensing for the icons.

Looking forward to your skin!
Thorsten

It might be worth mentioning with each skin whether it works on PPC, PC or both. E.g., the itunes skin is great for PC, but is all squashed up on Pocketpc.