Quantcast A small issue... - LoTROInterface
VGInterface.com
Search Downloads


Go Back   LoTROInterface > LotRO > Developer Discussions > XML modification help (L)

Reply
Thread Tools Display Modes
  #1  
Unread 09-20-2015, 07:03 PM
Emie937's Avatar
Emie937 Emie937 is offline
The Undefeated
Interface Author - Click to view interfaces
 
Join Date: Aug 2013
Posts: 9
A small issue...

Ok so I am using the updated version of daimon UI and am in the process of recoloring it and one this I am running into is even though all the panels are functional some of them have the problem in the picture. If you can't see the picture for some reason the corners are gray with white grid lines on them. I didn't code this and it is like this in every version of this UI I have and I was wondering if anyone knows whats wrong and how to fix it.
Attached Thumbnails
Click image for larger version

Name:	ScreenShot00050.jpg
Views:	445
Size:	392.0 KB
ID:	328  
Reply With Quote
  #2  
Unread 09-20-2015, 09:47 PM
Thurallor's Avatar
Thurallor Thurallor is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: May 2013
Posts: 97
That image (the white grid with the gray background) is what you will see if the game cannot find the image it is looking for. It means that somewhere in your SkinDefinition.xml file, it refers to a .tga file that doesn't exist (or is in the wrong directory).
Reply With Quote
  #3  
Unread 09-20-2015, 11:02 PM
Emie937's Avatar
Emie937 Emie937 is offline
The Undefeated
Interface Author - Click to view interfaces
 
Join Date: Aug 2013
Posts: 9
Talking OK...

So that means I need to try and find the code for the corners of the wallet and make corresponding images.... -_- oh boy. They should be named something "wallet" right?

EDIT: I FIXED IT! I managed to find the .tga file names in the .xml file and I found out that in the rohan update those four files were supposed to be in a file by themselves. So I changed the file location to match the directory path in the .xml file and with a little photo-editing it now looks smooth as melted butter. Thanks for the help. http://www.lotrointerface.com/downlo...nfo.php?id=933 This is the UI I was working on. Its a total Daimon recolor. I also fixed a bunch of stuff that got missed originally or when it was updated. Anyway I thought you might like to see the finished product.

Last edited by Emie937 : 09-21-2015 at 03:10 AM.
Reply With Quote
  #4  
Unread 09-21-2015, 11:05 AM
Thurallor's Avatar
Thurallor Thurallor is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: May 2013
Posts: 97
Thumbs up

Nice job!
Reply With Quote
  #5  
Unread 09-21-2015, 06:25 PM
Emie937's Avatar
Emie937 Emie937 is offline
The Undefeated
Interface Author - Click to view interfaces
 
Join Date: Aug 2013
Posts: 9
Talking A matter of updating...

So, I was wondering if you could tell me how to update a pre-exsisting UI. If I knew which codes I needed to change in the .xml file to update a UI without totally reconstructing the code I would be one very happy camper!
Reply With Quote
  #6  
Unread 09-22-2015, 04:00 PM
Thurallor's Avatar
Thurallor Thurallor is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: May 2013
Posts: 97
I don't think there are any good tutorials. Nor does Turbine provide any documentation. The only way to figure out the correspondence between the <Mapping>s and the <Element>s is by trial and error. And when you do figure it all out, it's a very tedious process to actually edit a skin, because every time you change the SkinDefinition.xml file, you have to quit and restart the game before you can see the results.

Someone made a LOTRO Skin Editor several years ago, but I think it's severely out-of-date.

Maybe Adra has some tips for how to make the process tolerable, but from what I know I wouldn't recommend it to any but the most patient people.
Reply With Quote
  #7  
Unread 09-22-2015, 09:12 PM
Adra's Avatar
Adra Adra is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: Jun 2011
Location: France
Posts: 95
Hi,

(please excuse my lack of ease when expressing myself in english I'm much more fluent in french ^^)

I just read Emie's messages and questions, Thurallor has already very well answered and described the situation.
Reading this made me remember 4 years ago when I decided starting to taddle a skin to fix it, without any knowledge about how to do it, no experience in coding, and most of all no idea about the the crazy amount of time I would spend on it ! ^^
But contrary to Emie I have very poor graphic artistic skills, I'm absolutely unable to draw a picture from zero, I'm just good enough in Photoshop to recycle/transform existing material

I confirm the only tool I use to edit the skindefinition.xml file is Notepad ++ (a free and open source text editor).
It brings colors to the text to make it more readable/understandable and it has a pretty useful Control+F search/replace tool.
After that, I effectively do many restarts of the Lotro client to check each modification I bring in the skins... I felt asleep on my keyboard many times !

To start the game faster I use a patched version of Pylotro instead of the official lotro launcher, associated with a keyboard macro for entering instantly my login and password.

As a source for determining which name and code correspond to an element, the skinning pack updates and up-to-date community made skins are your best friends. (for JRR skins, mostly look into the "JRR CORE" folder.)
Some skins were particularly well documented into their skindefinition.xml file, with a lot of indications on which elements do what. ... Now I must confess I'm not that conscientious and professional !

Here are a few tips which maybe can help you to understand the skindefiniton file coding :

- When you see ..\ in the path for a picture that means "previous folder in the tree root", so ..\..\ means 2 folders back the file tree.

- You can write comments inside <!-- (start) and --> (stop) . These commands can also allow you to disable some parts of code. You just have to put <!-- at the beginning and --> at the end. (comments/disabled code appear in green in notepad++)

- When there is a mistake in the line linking to a TGA file associated with an element (wrong name or wrong path) you'll see ingame the grey frame crossed by white lines.

- If a panel element (I mean <Mapping ArtAssetID="something"... ) is mentioned more than one time, the lotro client will only take in consideration the first one it sees in your in your skindefinition file (by order of appearance from the top to the bottom) .

- If you feel stuck/tired/desperate to locate which damn line in of code leads you to a grey frame crossed by white lines, you can use this brainless but very effective method : Let's virtually divide your skindefinition into big blocks of lines, for example of 200 or 400 lines each block, now consider you are a mafia's godfather and each block is suspect to be a traitor !
Now execute your first suspect ! I mean temporarily delete the first block of your code, then have a look ingame to see if the grey frame is still here. If the frame is still there, that proves your 200 or 400 lines were not involved in the bug (and you just executed an innocent !), undelete your first block and let's proceed with the next block, then the next one, then the next one, until the grey frame disapears. Then your can sub-divide your traitor block into several smaller suspect blocks and run a new sharper investigation.

Last edited by Adra : 09-22-2015 at 11:30 PM.
Reply With Quote
  #8  
Unread 09-23-2015, 09:21 AM
Thurallor's Avatar
Thurallor Thurallor is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: May 2013
Posts: 97
A couple of other things, in addition to Adra's excellent summary, that a beginner needs to know:
  1. What is an XML file?

    An XML file is not a computer program. It does not contain a sequence of instructions for the computer to execute. Instead, it merely describes the structure and characteristics of something. In the case of LOTRO, we use an XML file to describe the structure and characteristics of the UI.

  2. What is inside an XML file?

    An XML file contains tags and attributes.

  3. What are tags?

    A tag is a word surrounded by angle brackets (<, >).

    Some examples of tags you will find in a SkinDefinition.xml file:
    Code:
    <PanelFile>
    <Element>
    <Mapping>
    The above are called opening tags. For each opening tag there must be a corresponding closing tag with the same name. Closing tags start with a slash (/). Examples of closing tags:
    Code:
    </PanelFile>
    </Element>
    </Mapping>
    Everything that appears between an opening tag and the corresponding closing tag is logically "inside" the tag. Example:
    Code:
    <PanelFile><Element></Element><Element></Element></PanelFile>
    In the above example, the two Elements are inside the PanelFile.

    Note that spacing and linebreaks between the tags don't matter, so you can use indentation to make the structure clearer:
    Code:
    <PanelFile>
        <Element></Element>
        <Element></Element>
    </PanelFile>
    If there is nothing inside a tag, there is a shorthand way to write the tag: just put a slash (/) at the end of the opening tag; then you can omit the closing tag. Example (this is equivalant to the previous example):
    Code:
    <PanelFile>
        <Element />
        <Element />
    </PanelFile>
  4. What are attributes?

    An attribute is a word that appears inside a tag, after the name, and has a value. Examples of attributes that can appear in a SkinDefinition.xml file:
    Code:
    <Element ID="Auction_MainField" X="0" Y="11" Width="1024" Height="767" />
    The above specifies information about a UI element called "Auction_MainField". The attributes are ID, X, Y, Width, and Height. The attribute values specify that the ID of this element is "Auction_MainField"; the location is X=0, Y=11, the width is 1024, and the height is 767. (All of the numbers are in units of pixels.)

    Note that the X and Y values are specified relative to the containing element. Example:
    Code:
    <PanelFile ID="ID_UISkin_Auction_MainField">
        <Element ID="Auction_MainField" X="0" Y="11" Width="1024" Height="767">
            <Element ID="Auction_TitleBar" X="315" Y="-11" Width="392" Height="40">
                <Element ID="Auction_TitleBar_Label" X="16" Y="12" Width="360" Height="25" />
            </Element>
        </Element>
    </PanelFile>
    In the above example, assume that the "ID_UISkin_Auction_MainField" panel happens to be located at X=100, Y=100 on the screen. The "Auction_MainField" element's location is given as X=0, Y=11. Since it is contained within the "ID_UISkin_Auction_MainField" panel, its location is relative to X=100, Y=100, so its actual location is X=100, Y=111.

    Similarly, the "Auction_TitleBar" element is located at X=315, Y=-11 relative to X=100, Y=111, so its actual location is X=415, Y=100.

  5. Making your own UI skin

    The skinning pack from Turbine comes with two XML files (although one of them doesn't have the XML extension, for whatever reason):
    SkinDefinition.xml
    SkinDictionary.txt

    To create your own UI skin, you can use this SkinDefinition.xml file as a starting point. It contains a huge list of all of the images (.tga files) in the game that you can replace. Each line in the file has a <Mapping> tag, with two attributes. Example:
    Code:
    <Mapping ArtAssetID="ActionPicker_Base_Background" FileName="ActionPicker_Base_Background.tga" />
    If you want to use the default image in your skin, you can remove this <Mapping> tag from the SkinDefinition.xml file and delete the corresponding .tga file. If you want to change the image, leave the <Mapping> tag alone and edit the .tga file with Photoshop, etc.

    If you want to change the sizes and locations of the UI elements, you can copy the appropriate <PanelFile> tag from the SkinDictionary.txt file and paste it into your SkinDefinition.xml file. Be sure to copy everything between the opening and closing PanelFile tags. Then you can edit the location (X, Y) and size (Width, Height) attributes to achieve the effect you want.

    To see the results of your changes, after you have edited the SkinDefinition.xml file, you have to quit and restart the game.
Reply With Quote
  #9  
Unread 09-23-2015, 09:29 AM
Thurallor's Avatar
Thurallor Thurallor is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: May 2013
Posts: 97
Addendum:

Quote:
Be sure to copy everything between the opening and closing PanelFile tags.
It seems that you don't actually have to copy everything inside the PanelFile tags, if you only want to change one or two elements. However, for any element that you do want to change, you must include all of its containing elements. Example:
Code:
<PanelFile ID="Blah">
    <Element ID="Stuff" X="242" Y="448" Width="270" Height="266"> 
        <Element ID="Bloop" X="0" Y="20" Width="270" Height="245" /> 
    </Element>
    <Element ID="Crud" X="0" Y="20" Width="270" Height="225" />
</PanelFile>
Suppose you just want to change the X coordinate of "Bloop" to 10. In that case, you must copy the containing elements ("Stuff", "Blah"), but you can leave out "Crud". The "Crud" element will continue to use the default X, Y, Width, and Height values that are built into the game.
Code:
<PanelFile ID="Blah">
    <Element ID="Stuff" X="242" Y="448" Width="270" Height="266"> 
        <Element ID="Bloop" X="10" Y="20" Width="270" Height="245" /> 
    </Element>
</PanelFile>

Last edited by Thurallor : 09-23-2015 at 09:33 AM.
Reply With Quote
  #10  
Unread 09-23-2015, 10:36 AM
Adra's Avatar
Adra Adra is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: Jun 2011
Location: France
Posts: 95
Quote:
It seems that you don't actually have to copy everything inside the PanelFile
I confirm, however, depending the original panel code it's sometimes a tedious process to manually remove the unnecessary <elements> while keeping intact the tree structure.
Just a single error on one hundred <elements> removed then your whole skin won't load at all in lotro !

example :

<!-- Store buttons removal in character panel -->
<PanelFile ID="ID_UISkin_Journal_Window">
<Element ID="Journal_Window" X="0" Y="63" Width="713" Height="648">
<Element ID="Journal_Panel" X="6" Y="34" Width="704" Height="606">
<Element ID="Equipment_Page" X="8" Y="22" Width="681" Height="585">
<Element ID="RealPaperdollField_Player" X="0" Y="0" Width="700" Height="585">
<Element ID="CharacterEquipmentPage_Player_EnhanceCharacter _Button" X="0" Y="0" Width="1" Height="1"></Element>
<Element ID="CharacterStats" X="447" Y="2" Width="229" Height="510">
<Element ID="StatTree_ScrollBar" X="219" Y="20" Width="10" Height="482">
<Element ID="scroll_bottom_field" X="0" Y="472" Width="10" Height="10"> </Element>
<Element ID="UpButton" X="0" Y="472" Width="10" Height="10"> </Element>
<Element ID="DownButton" X="0" Y="0" Width="10" Height="10"> </Element>
<Element ID="scroll_top_field" X="0" Y="0" Width="10" Height="10"> </Element>
</Element>
</Element>
</Element>
</Element>
<Element ID="Appearance_Page" X="8" Y="22" Width="681" Height="585">
<Element ID="RealPaperdollField_Player" X="0" Y="0" Width="700" Height="568">
<Element ID="CharacterAppearancePage_BuyCosmeticClothing_Bu tton" X="0" Y="0" Width="1" Height="1"> </Element>
<Element ID="CharacterAppearancePage_BuyCosmeticClothing_Fl yout_Field" X="0" Y="0" Width="1" Height="1"></Element>
</Element>
</Element>
</Element>
</Element>
</PanelFile>


If you remove one </Element> your skin won't even be featured in the list of available skins ingame.



Another point, but not the least, the skinning pack provides by default uncompressed TGA, but the Lotro client accepts compressed TGA and even JPG files (when you don't need transparency).
This allows to save a huge amount of space in your zip file for Lotrointerface (SSD owners will thank you too ^^). (keeping in mind that theorically Lotrointerface doesn't accept files beyond 40 mo).
I have compressed every significant TGA file in JRR skins and used as much JPG background files as I could, without this, the pack would probably be 4 or 5 times heavier !

Examples :
theater_top_bottom.tga as provided : 3 mo / compressed : 984 ko
box_relicreforge_background.tga as provided : 1 mo / compressed : 14 ko
itemAdvancement_relicforge_background.tga 1 mo / converted in JPG : 98 ko

If you wanna convert/compress/apply effects on many files in a row, Xnview can do it. I mean you can compress every TGA files from the skinning pack in just one process !
My setting in Xnview for "save as" --> "JPG file type' --> "options" : I've set quality on 95.

If you want to take screenshots ingame to use it later in a skin, I strongly recommend you to use a third party program (and BMP file type) instead of the lossy JPG captions from Lotro.

Last edited by Adra : 09-23-2015 at 12:55 PM.
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
The Small Attunement bar isssues claimh Graphics modification help (L) 5 01-23-2014 04:21 AM
looking for a Small-minimal UI Akichan22 Interface Requests (L) 3 06-09-2011 12:03 PM
Just a small whine. Estewyn General Authoring Discussion (L) 4 01-23-2011 02:05 PM
A couple small things... Maim XML modification help (L) 3 02-09-2010 04:30 PM
A caution about small images Frosty Tutorials & Other Helpful Information (L) 0 02-15-2007 01:46 PM


All times are GMT -5. The time now is 11:59 AM.


Our Network
EQInterface | EQ2Interface | Minion | WoWInterface | VGInterface | LoTROInterface | MMOInterface | Swtorui