by samsonlov on Mon Apr 05, 2010 9:29 am Long post, but worth the read if you want to DRAMATICALLY reduce the time it takes to create skins that work in multiple resolutions/aspect ratios.
The Problem:
Because the XLobby auto-resize feature preserves the original values for skin elements, re-creating skins with different screensizes or different aspect ratios requires users to manually re-size and re-position each screen element to get everything to "look right".
This problem is compounded when screens from different XLobby folders having different screensizes or different aspect ratios are combined.
Where elements from different screens are combined, the problem becomes especially apparent because XLobby references a file in the skin (Usually the FIRST file - sorted alphabetically/alphanumerically in ascending order) and then XLobby resizes the rest of the files in the skin folder to "Fit" the screensize/resolution of that FIRST file - with no regard for aspect ratio.
Even when combining pages from XLobby systems that have identical aspect ratios but different resolution screens, the problem is further compounded by XLobby's "shrinking" or "stretching" of the screens to make them "match" or "fit" the first screen in the skin folder.
And finally, the screensize/aspect ratio problem is compounded when creating two or more skins that are supposed to have the same elements, but that have different resolutions and/or aspect ratios. Where there is one absolute screensize/aspect ratio for fixed display devices like 1.78:1 for most current LCDs, another absolute screensize/aspect ratio for the touch-screens such-as 1.33:1 for Calrad touch screens, and yet another absolute "pair" of screensizes/aspect ratios for for a theater that uses a projection system with a default display ratio of 1.78:1 (but that also resizes to a "Cinemascope" or other anamorphic display mode using a Constant Image Height (CIH) or a Constant Image Width (CIW) setup where projector, screen, and/or anamorphic lens(es) and masking system(s) are used to "change" the screensize or resolution "outside" of XLobby.
It is expected that different screen sizes will necessarily require a "bit of polishing" to get them to look as good as you got the original one to look. And it is further expected that complex systems with multiple display systems will also necessarily require "A LOT" of manual re-skinning to get everything looking right.
However, if you want to save on the time it will take to "manually" adjust every single element's properties on every-single page of your skin so that the skin on the "New" screen looks every-bit as good as it does on the "Original", where in your new skin, "Circles" look "round" and "Squares" look, well, "Square" - for lack of a better term; and where the button-groups you so painstakingly created, will maintain their physical relationships to each-other;
and, if you'd like to be able to create new elements without the use of a crystal ball or spreadsheet of conversions that tell you what your most common button sizes "convert-to" in this "New" screen:
For Example: If you'd like the ability to draw a 100x100 button in the middle of the screen in your new skin WITHOUT HAVING TO GUESS that your "old" 16:9 skin at (1280x720) which has now been resized to fit your touch-screen's ratio of 4:3 at (800x600), now requires you to position the "square" at (590,295) with a size of (100x75) in order for it to appear centered on the screen look like a "square" instead of a "tall rectangle" - Only to discover that it is only a "(100x100)" button "relative" to all the other elements that have already been resized smaller to fit the new screen, so what you've actually got is a "centered" button that appears to be about "(75x75)", and if you want the button to appear to be "(100x100)" - well, get-out the calculator (again) - or hey use the spread sheet. - But I digress if you'd like to be able to "EASILY" move skins around or bring pages from other skins into your skin, even though they may be a different resolution or have different aspect ratios;
then Read-On because the following solution (INCLUDING A STEP-BY-STEP TUTORIAL) may be for you.
(If you never "Combine" elements from skins with different sizes or aspect ratios, but you do work with the skin editor, and have ever wondered if there is an easier way to increase/decrease the size of a button-group while preserving the physical button-relationships, you may find this to be a very useful "work-around" to do just that.)
*****
The Solution:
"Convert" all the old skin's page sizes and element sizes and positions to the new skinsize while preserving the button-relationships in the process, make any "minor" adjustments necessary, and then (After Making a Backup Copy) continue to edit skin elements using their "actual" dimensions relative to the new skinsize, INCLUDING their "real" (x,y) coordinates.
*****
How? You ask? Well after you read this guide, you should be an expert.
After you understand how to do this "bulk screen resizing", you can use the same principles on just one, or on a small group of screens to change the size/position of grouped-elements/buttons on screens/overlays; such-as on-screen keyboards, cover-flow type screens, (I mean, really, who wants to sit in front of the computer with "Calc" and "Excel" open to compute, for every button in a group, in-order to get it to look right, the optimal distance "over and down" or how much "larger or smaller" each button needs to be from the button before/after/above/below it? Just because someone decided that a screen element like a "keyboard" should be larger or smaller?" - I don't - even if I'm the one who decided that the size needs to change.)
The reason for the need to "resize screen elements that are comprised of groups of buttons may not be obvious, so using an "on-screen keyboard" as an example: Note the following: If the keyboard has buttons that appear to be about 1/2"x1/2"(.13cm x .13cm) on a 17"(43cm) touch screen, then unless you edit every button on the screen and manually position/align each button, then the buttons will appear to be about 1/4"x1/4"(.635cm x .635cm) if the same skin is displayed on a 10.4"(26cm) touch screen.
Using the process I will describe in this document, an entire screen-full of elements can be resized/converted so that the "keyboard" will still have 1/2"x1/2"(.13cm x .13cm) buttons - even when displayed on a 10.4"(26cm) touch screen, and vice-versa. - This is, as I'm sure you will find, a HUGE timesaver when "skinning" - and I did all the ".xml" conversions "manually" using "cut and paste and save" for each .xml in my skin before downloading a helpful .xml editor called "Replace Text 2.2" from "EcoByte", so if you're using a "bulk xml editor" that allows you to replace all instances of "<skinsize>a,b</skinsize>" with "<skinsize>x,y</skinsize>" in a given folder, then you'll REALLY appreciate this process.
(I am not affiliated with "EcoByte" or "Replace Text 2.2" in any way, and I am not offering any endorsement of their product, just sharing something that worked for me.
And the best part of this "workaround" I am about to describe, is that since you've already spent all the time to get your screen looking just the way you want, using the steps described herein, you can let xlobby do all the tedious calculation and placement of the buttons for you so you can spend your time creating new skins, or maybe even actually using xlobby to watch/listen to all that media you've been waiting to get to.
*****
There are 12 main steps to accomplish this resize/conversion (Plus 1 for "good-Luck") and although it may sound like a lot of work, believe me when I tell you: "It is WAY easier than manually editing 100 to 300 screens to get them to fit your new display or touch-screen and look as nice as you got them to fit your old display."
*****
IMPORTANT NOTE: The "Windows" screen resolution of the display you are using to do this needs to be at least as large as the larger of each the two horizontal and vertical dimensions of your new and old skin sizes, so if, for example, you want to go from a skinsize of 1280x720, to a skinsize of 1024x768, your monitor's resolution needs to be at least 1280x768 - you can use the next LARGER resolution supported by your monitor for example: 1280x1024 - if you do not do this you will have problems getting the display to acurately represent the proportions/aspect ratio of the screens and elements you are working with.
*****
Step 1.
Create two complete XLobby folders with the Current skin you wish to modify: the folders can be called whatever you want; for this document, I am using "XLobbyOld" and "XLobbyNew" (DO NOT USE TWO DIFFERENT SKIN FOLDERS IN THE SAME XLOBBY FOLDER - TWO SEPARATE XLOBBY FOLDERS ARE NEEDED!)
Step 2.
With XLobby closed determine the current skinsize of each page in the skin in the folder "XLobbyOld" by using notepad or internet explorer to check the value for <skinsize> in each of the screens in your skin folder - most, if not all of the pages will have the same value. If you are working from the unmodified default skin, all the screens should be 800x600, and you don't have to check each screen, but if you WERE working from the default skin, you probably wouldn't be reading this.
Step 3.
Next, you need to make a copy of THE FIRST .xml FILE IN THE ..XLobbyOld\XLobby\Skins\"skinname" FOLDER, AND a copy of the file "splash.xml" and call it "copy of splash.xml".
To make sure you've got the right file, set the folder view to "Details", and sort the folder by "Name" and in "Ascending" order, and the first .xml file displayed after the last folder in the list is your "FIRST" file. If the first file in the folder is called abc.xml, make a copy called "copy of abc.xml" this will save you having to manually re-create these files later, and the reason for this will become clear in step "9." where the original "abc.xml" and "splash.xml" are abandoned and "copy of abc.xml" is renamed to "abc.xml", and "copy of splash.xml" is renamed to "splash.xml".
Step 4.
Start XLobby in the XLobbyOld folder, and in F2,Display and make the skinsize in Display properties the same as that of the Current skin. (For Example, If you are working with <skinsize>1280,720</skinsize>, then make the resolution H:1280 V:720.) Then close F2, and close XLobby normally.(this will make things easier later.)
Step 5.
Start XLobby in the XLobbyNew folder, and in F2,Display and make the skinsize in display properties the NEW size that you want XLobby to use with your New skinsize. (For Example, If you are want the new skin to be <skinsize>800,600</skinsize>, then make the resolution H:800 V:600.) Then close F2, close XLobby normally, and DELETE ALL screen.xml files from the XLobbyNew/skins/"skinname" folder. (You will NEVER EVER EVER use these files again, so just delete them, and don't copy or save them anywhere else because that's just a waste of 1's and 0's, and later you'll wonder why you saved them and think that you need to keep them - so just DELETE.
Step 6. (This looks like a long step, but it's just a long explanation to make sure everything is "spelled-out" clearly since we are going to be doing a little bit of math. If you hate math, don't worry, I will also provide a table of the most common values, so you don't have to actually "calculate" anything if you don't want to.)
In this step you will calculate (or look up in the table I will provide at the end) the "Conversion Value" (CV) for your skin. The CV is the number you have to change "skinsize" to inside each .xml file in-order to trick XLobby into resizing the screen for you. If you use a CV that is larger than the skinsize of the FIRST screen in your "skinname" folder, then XLobby will proportionately "squeeze" the screen to be "smaller" and make all the screen elements elements fit the new smaller skinnsize. If you use a CV that is smaller than the skinsize of the FIRST screen in your "skinname" folder, then XLobby will proportionately "stretch" the screen to be bigger and make all the screen elements to fit the new larger skinsize. The CV is just a Number for X and a number for Y that you replace in each page that you want XLobby to "resize".
(Doing this manually takes a while - even with only 130 screens - but if you use a "bulk .xml editor", editing even 500 xml files will take only a few short minutes.
There is a formula to get the CV required to get XLobby to resize an Old skinsize to a New skinsize, and you can also calculate a CV based on a given percentage by which you'd like to change a screensize or a screen element(s).
In this example, I will focus on the method whereby one can take an existing skin and convert the whole skin into a different screensize and aspect ratio at the same time, and yield a skin that can be edited with actual numbers that correspond to what the user is observing on the screen.
In Detail:
The CV is (each of the x,y values of the <skinsize> of the New skin) divided by the corresponding ((x,y values of the <skinsize> of the Old skin) divided by (the corresponding x,y values of the <skinsize> of the New skin))
Simplified: CV=((X.old^2/X.new),(Y.old^2/Y.new)).
For Example:
To calculate the CV where Old skinsize is (1280x720) and the New skinsize will be (800x600), where you want the old skin to be resized to exactly fit the new skinsize and aspect ratio:
Filling in the values using the CV equation will give you the following:
x=(1280^2/800) and y=(720^2/600).
Solving the equation yields a CV of x=2048 and y=864 this is expressed without the "x" or "y" so:
CV=(2048,864)
NOTE:
If you don't like working with "^2" or just prefer to use "/" and "*" to do your calculations, you can get your CV by: Old X/(New X/OldX) and OldY/(NewY/OldY) - For this example, just put "1280/(800/1280)" (without the quotes) in Google, and you'll get 2048, and put "720/(700/720))" (without the quotes) in Google, and you'll get 864. - Make sure to put the "()" in the right place or you'll get a different answer.
Step 7. (This step doesn't look so long, but it will probably take the most time if you are not using a "bulk .xml editor.")
Sort the files in the skin folder in ..xlobbyOld\xlobby\skins\"Skinname" by "Name" in "Ascending" order, and then with notepad or a bulk .xml editor, change the item: "<skinsize>x.Old,y.Old<\skinsize>" to "<skinsize>x.CV,y.CV<\skinsize>" for every instance in the folder (there should be one line (usually the 3rd from the top in each .xml file that looks something like: " <skinsize>x,y<\skinsize>", where x and y represent a corresponding value for horizontal and vertical skinsize.
(In this example, the old .xml files will all have the value of " <skinsize>1280,720<\skinsize>".
Continuing to use our example: You would change each instance of "<skinsize>1280,720<\skinsize>" to "<skinsize>2048,864<\skinsize>". EXCEPT - AS STATED BEFORE - DO NOT CHANGE "<skinsize>" FOR THE FIRST FILE IN THE FOLDER
(In my folder the first file is "abc.xml", so "abc.xml" doesn't get changed, but "Copy of abc.xml" does get changed.) if your first file is something other than "abc.xml" than that FIRST file is the one that doesn't get its "<skinsize>" changed.
Step 8.
(This is where the XLobby does the first part the Conversion - there are 2 parts.) Run ..xlobbyOld\xlobby\xlobby2.exe, open "Skin Editor", confirm that the screens have been resized (in this example all the screens and screen elements except abc.xml will appear smaller) ***CHECK SEVERAL PAGES, BUT DO NOT DO ANY EDITING AT THIS POINT!!!***
If everything looks right, close Skin Editor, then close XLobby normally.
((NOTE: IF THE SCREENS DO NOT LOOK THE WAY YOU WANT THEM TO, DO NOT "EXIT" SKIN EDITOR, - INSTEAD, (CTRL,ALT,DEL) TO OPEN WINDOWS TASK MANAGER, AND FROM THE PROCESSES TAB, SELECT "xlobby2.exe", and "End Process". - YOU MUST DO THIS TO PREVENT XLOBBY FROM SAVING THE SCREENS IN A RESIZED FORMAT THAT YOU DON'T WANT.))
Step 9.
Copy all the converted screens ..xlobbyOld\xlobby\skins\"Skinname", and paste them in ..xlobbyNew\xlobby\skins\"Skinname";
DELETE "abc.xml" and DELETE "splash.xml";
RENAME "copy of abc.xml" to "abc.xml", and RENAME "copy of splash.xml" to "splash.xml"
Step 10.
(Another step that takes a long time, but you're probably getting the hang of "cutting and pasting" by now.)
With notepad or a bulk .xml editor, change each instance of: "<skinsize>x.CV,y.CV<\skinsize>" and "<skinsize>x.Old,y.Old<\skinsize>" to "<skinsize>x.New,y.New<\skinsize>" for each .xml file in the folder.
Continuing with our example: You would change each instance of "<skinsize>2048,864<\skinsize>" or "<skinsize>1280,720<\skinsize>" to "<skinsize>800,600<\skinsize>"
(MAKE SURE THAT THIS TIME YOU DO CHANGE "<skinsize>" FOR THE NEWLY RENAMED FIRST FILE IN THE FOLDER ("abc.xml") AND FOR THE NEWLY RENAMED "splash.xml" if your first file is something other than "abc.xml" then that FIRST file is the one that ALSO gets its "<skinsize>" changed. - Again change skinsize in ALL .xml files to the New skinsize. If you miss one, your whole skin can be corrupted.
Step 11.(This is where the XLobby does the SECOND part the Conversion - remember, there are 2 parts.)
Run ..xlobbyNew\xlobby\xlobby2.exe, open "Skin Editor", confirm that the screens have been resized (in this example all the screens and screen elements will now be displayed in the properly formatted resolution of 800x600)
Close Skin Editor (This saves the new value for the button locations within the skin.), and close XLobby normally.
((NOTE: IF THE SCREENS DO NOT LOOK THE WAY YOU WANT THEM TO, DO NOT "EXIT" SKIN EDITOR, - INSTEAD, (CTRL,ALT,DEL) TO OPEN WINDOWS TASK MANAGER, AND FROM THE PROCESSES TAB, SELECT "xlobby2.exe", and "Ene Process". - YOU MUST DO THIS TO PREVENT XLOBBY FROM SAVING THE SCREENS IN A RESIZED FORMAT THAT YOU DON'T WANT.)) Then you can reopen the .xml files for any pages that didn't look right and make sure you remembered to make their resolution back to the New skinsize of (800,600). If all the screens look to be the wrong size, then you missed something in one of the earlier steps. You can now restart XLobby and work-out any issues with Font Styles - hopefully, you've created Font Styles and applied them to every button in your skin, that way, you can simply edit the Font Style(and rename it if necessary), and the elements throughout your skin will follow.
Step 12.
If the skin looks close to what you were hoping for by the time you finish Step 11., then AFTER YOU CLOSE XLOBBY, that's it - you're done. And although you may have to do some "light" editing to get the correct aspect ratio for each of your buttons, if you have many buttons on a screen that are the same size, and they are only of by a few px, it is often possible to just do a bulk-resize in Skin Editor, and often requires little or no adjustment of screen position - in any case, the screen elements will all be placed in proportion to each-other given the particular screensize and it will be MUCH MUCH EASIER than trying to "manually" move every screen element on every page.
Step (Lucky) 13.
Before re-opening XLobby, PLEASE! PLEASE! PLEASE! SAVE AND MAKE A BACKUP OF THE WHOLE XLOBBY FOLDER FIRST!!!***
-----
A few notes:
When referencing "skinsize":
x.Old = The value for Horizontal (Width) in the Old skinsize
Y.Old = The value for Vertical (Height) in the Old skinsize
x.New = The value for Horizontal (Width) in the New skinsize
y.New = The value for Vertical (Height) in the New skinsize
x.CV = The Conversion Value XLobby will use to "re-create" the Skin with the desired Horizontal (Width)
y.CV = The Conversion Value XLobby will use to "re-create" the Skin with the desired Vertical (Height)
It would be a shame to loose all the effort you just put into your "shortcut",
and besides, after you make a backup, you can always use the backup to quickly "undo" any individual screen you changed but want to change back.
Regarding "<skinsize>"
1. To determine the resolution/skinsize of each of the screens in your skin folder,
Look at the line in each .xml file in ..xlobby/skins/skinname/"skinname".xml
The line should be about the 3rd line from the top and should look something like this:
<skinsize>1280,720</skinsize>.
(The numbers will be different if your screensize is something other than 1280x720, but you will see the size listed as (x,y) between the <skinsize> and </skinsize> where x=horizontal size/resolution, and y=vertical size/resolution.
2. If you've done any editing to the skin while using a resolution different than the default, then some of the screens may be different resolutions. That's why it's a good idea to check every screen. If some of the screens are different, don't change them now, it just means that you'll have to use a different "CONVERSON VALUE" for the screens that are different.
-----
Thank you for taking the time to read my "tutorial".
I hope you find this helpful,
Samson
(This post is subject to revision.)
