Quantcast
Need Skinning Assistance - LoTROInterface
lotrointerface.com
Search Downloads


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

Reply
Thread Tools Display Modes
  #1  
Unread 05-07-2022, 06:15 PM
lunarwtr's Avatar
lunarwtr lunarwtr is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: Feb 2011
Posts: 121
Need Skinning Assistance

I'm working on adding basic skin rendering capability to vscode extension. I'm translating Panel Definitions & Elements to nested HTML using relative positioning & sizing that is part of the skinning definition. I then add css background-image based on the mapped asset to those elements. I'm missing something very basic because while some of the borders render correctly.. I'm not seeing them render correctly.

If you know HTML / CSS enough to know how skinning would map, I could use the assist.

Are skin X & Y coordinates relative to their parent element? Or are they something different?
Are parent element dimensions treaded as overflow hidden? If children go beyond boundries of parent.. do they get hidden?
__________________
Author of Lotro Compendium, Waypoint, and Lotro Plugin Compendium (LPC)
Reply With Quote
  #2  
Unread 05-07-2022, 08:27 PM
lunarwtr's Avatar
lunarwtr lunarwtr is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: Feb 2011
Posts: 121
Uploaded a version with the beginnings to the skin viewer. I made a small video of how to get to it and also open the debug tools in vscode to view the assets.


__________________
Author of Lotro Compendium, Waypoint, and Lotro Plugin Compendium (LPC)

Last edited by lunarwtr : 05-09-2022 at 06:56 PM.
Reply With Quote
  #3  
Unread 05-08-2022, 02:36 AM
dt192 dt192 is offline
The Unscathed
Interface Author - Click to view interfaces
 
Join Date: Aug 2013
Posts: 18
For anybody interested you can search/replace this format
Code:
<Element ID="ToolbarButton_Slot_3" X="98" Y="157" Width="25" Height="25">
to this
Code:
<span class="ToolbarButton_Slot_3" style="left:98px;top:157px;width:25px;height:25px">
then use
Code:
span {
  position: absolute;
}
and use the class name to hook up the background image.

how to check computer screen resolution
Reply With Quote
  #4  
Unread 05-08-2022, 11:52 AM
lunarwtr's Avatar
lunarwtr lunarwtr is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: Feb 2011
Posts: 121
Thank you for assisting me with this dt192. absolute potioning does solve many of the problems encountered.
__________________
Author of Lotro Compendium, Waypoint, and Lotro Plugin Compendium (LPC)
Reply With Quote
  #5  
Unread 05-09-2022, 03:24 AM
Adra's Avatar
Adra Adra is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: Jun 2011
Location: France
Posts: 159
Reminder : I'm not a coder and in addition I don't speak english very well

In JRR skins collection and I guess most of other skins, a big part of panel code is NOT logged. Many parts of a panel's code which are not customized do not require to be logged (we just have to keep the main tree structure, however we can expurgate all elements we are not focusing), the lotro client will consider all missing parts as default code. (And it works the same way with picture elements. All pictures files not logged in the skindefinition file are considered as default pictures).
So, probably, you should always employ the skinning source element codes as base code and then apply custom skin element on it to mimic the game mechanics of rendering and then you should get all the panel elements correctly displayed.

Concerning pictures, if an element is to short in width or heigh or both compared to the surface it is intended to fill, the lotro client duplicates it in order to fill all the remaining space.
If, by mistake, the same assertid is present many times in a skindefinition file, the first occurance (from the top to the bottom) is considered as the good one.

I hope this can help.
__________________
JRR skins collection download page
JRR Azure Glass download page
Extended and enhanced panels
Adra/Adragor/Osred from Sirannon.
Derelos/Prurit/Karnaj from Evernight.

Last edited by Adra : 05-10-2022 at 03:13 AM.
Reply With Quote
  #6  
Unread 05-09-2022, 09:12 AM
lunarwtr's Avatar
lunarwtr lunarwtr is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: Feb 2011
Posts: 121
Quote:
Many parts of a panel's code which are not customized do not require to be logged (we just have to keep the main tree structure, be we can expurgate all elements we are not focusing), the lotro client will consider all missing parts as default code.
So you can include only part of a PanelFile and the game will use the default for the rest (i.e. leave out an element, and game will use default)? I've been doing Panel's as a whole.... if skin has a panel, I take it from there.. otherwise I take the whole panel from asset pack. Please confirm if I have to handle piecing together.

Quote:
If, by mistake, the same assertid is present many times in a skindefinition file, the first occurance (from the top to the bottom) is considered as the good one.
Thank you Adra. I was wondering about how to handle that
__________________
Author of Lotro Compendium, Waypoint, and Lotro Plugin Compendium (LPC)
Reply With Quote
  #7  
Unread 05-10-2022, 03:05 AM
Adra's Avatar
Adra Adra is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: Jun 2011
Location: France
Posts: 159
When a PanelFile is present in a skindefinition, if possible, you could load its reference full code from the skinning source (and divide it divide it by elements) then merge its values with the custom panel file from the skindefinition in order to get the complete code panel.

As an example, here is a panel code dedicated to mask the store button from the toolbar :

Code:
<PanelFile ID="ID_UISkin_Toolbar"
<Element ID="ToolbarField"  X="448"  Y="9000"  Width="1024"  Height="200">  
<Element ID="Toolbar_WebstoreButton"  X="0"  Z="0"  Width="1" 	Height="1"></Element>
</Element>
</PanelFile>
As you can see there is only a very small part of the actual toolbar panel code, so you can't render the toolbar only using this.
In this example, the only "interesting" line for my purpose is ID="Toolbar_WebstoreButton" but I can't just write it only.
The other lines define the minimal tree structure required to "locate/place" it. (I guess in order to avoid confusion with any other element ID wearing the same name).

Another important point : Don't consider a panel code as a static block.
Most of the inner elements can be freely reordered !
For example in the toolbar code, bag codes appear in disarray, intertwined with other items (left buttons, right buttons, fervor/wrath/mettle/attunement). In my custom toolbar codes I've grouped and rearranged those elements by category to read/understand it easier.


Also beware that some inner element IDs can have the same name in different elements as the TextButtons in this part of barbershop code :

Code:
    <Element ID="AppearanceMod_ResetButton" X="615" Y="560" Width="140" Height="20"> 
      <Element ID="TextButton_Highlight_r" X="104" Y="3" Width="32" Height="14"> </Element>
      <Element ID="TextButtonReference_Left" X="0" Y="0" Width="20" Height="20"> </Element>
      <Element ID="TextButtonReference_Mid" X="19" Y="0" Width="101" Height="20"> </Element>
      <Element ID="TextButtonReference_Right" X="119" Y="0" Width="20" Height="20"> </Element>
      <Element ID="TextButton_Highlight_l" X="3" Y="3" Width="32" Height="14"> </Element>
    </Element>
    <Element ID="AppearanceMod_Viewport" X="6" Y="50" Width="560" Height="470"> </Element>
    <Element ID="AppearanceMod_BuyButton" X="124" Y="560" Width="160" Height="20"> 
      <Element ID="TextButton_Highlight_r" X="84" Y="3" Width="52" Height="14"> </Element>
      <Element ID="TextButtonReference_Left" X="0" Y="0" Width="20" Height="20"> </Element>
      <Element ID="TextButtonReference_Mid" X="19" Y="0" Width="121" Height="20"> </Element>
      <Element ID="TextButtonReference_Right" X="139" Y="0" Width="20" Height="20"> </Element>
      <Element ID="TextButton_Highlight_l" X="3" Y="3" Width="52" Height="14"> </Element>
    </Element>

Sorry for the migraine this will cause you !
__________________
JRR skins collection download page
JRR Azure Glass download page
Extended and enhanced panels
Adra/Adragor/Osred from Sirannon.
Derelos/Prurit/Karnaj from Evernight.

Last edited by Adra : 05-10-2022 at 07:16 AM.
Reply With Quote
  #8  
Unread 05-10-2022, 09:19 AM
lunarwtr's Avatar
lunarwtr lunarwtr is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: Feb 2011
Posts: 121
Quote:
Originally Posted by Adra
When a PanelFile is present in a skindefinition, if possible, you could load its reference full code from the skinning source (and divide it divide it by elements) then merge its values with the custom panel file from the skindefinition in order to get the complete code panel.

As an example, here is a panel code dedicated to mask the store button from the toolbar :

Code:
<PanelFile ID="ID_UISkin_Toolbar"
<Element ID="ToolbarField"  X="448"  Y="9000"  Width="1024"  Height="200">  
<Element ID="Toolbar_WebstoreButton"  X="0"  Z="0"  Width="1" 	Height="1"></Element>
</Element>
</PanelFile>
As you can see there is only a very small part of the actual toolbar panel code, so you can't render the toolbar only using this.
In this example, the only "interesting" line for my purpose is ID="Toolbar_WebstoreButton" but I can't just write it only.
The other lines define the minimal tree structure required to "locate/place" it. (I guess in order to avoid confusion with any other element ID wearing the same name).

Another important point : Don't consider a panel code as a static block.
Most of the inner elements can be freely reordered !
For example in the toolbar code, bag codes appear in disarray, intertwined with other items (left buttons, right buttons, fervor/wrath/mettle/attunement). In my custom toolbar codes I've grouped and rearranged those elements by category to read/understand it easier.


Also beware that some inner element IDs can have the same name in different elements as the TextButtons in this part of barbershop code :

Code:
    <Element ID="AppearanceMod_ResetButton" X="615" Y="560" Width="140" Height="20"> 
      <Element ID="TextButton_Highlight_r" X="104" Y="3" Width="32" Height="14"> </Element>
      <Element ID="TextButtonReference_Left" X="0" Y="0" Width="20" Height="20"> </Element>
      <Element ID="TextButtonReference_Mid" X="19" Y="0" Width="101" Height="20"> </Element>
      <Element ID="TextButtonReference_Right" X="119" Y="0" Width="20" Height="20"> </Element>
      <Element ID="TextButton_Highlight_l" X="3" Y="3" Width="32" Height="14"> </Element>
    </Element>
    <Element ID="AppearanceMod_Viewport" X="6" Y="50" Width="560" Height="470"> </Element>
    <Element ID="AppearanceMod_BuyButton" X="124" Y="560" Width="160" Height="20"> 
      <Element ID="TextButton_Highlight_r" X="84" Y="3" Width="52" Height="14"> </Element>
      <Element ID="TextButtonReference_Left" X="0" Y="0" Width="20" Height="20"> </Element>
      <Element ID="TextButtonReference_Mid" X="19" Y="0" Width="121" Height="20"> </Element>
      <Element ID="TextButtonReference_Right" X="139" Y="0" Width="20" Height="20"> </Element>
      <Element ID="TextButton_Highlight_l" X="3" Y="3" Width="52" Height="14"> </Element>
    </Element>

Sorry for the migraine this will cause you !
You and dt192 are saving me a lot of time by bringing these to my attention.

dt192 confirmed to me offline that an xml merge does need to happen between what is supplied via Skin Panel + Asset Skin Panel, so I'm working on incorporating those changes now.

U25 Asset seem to be ok, but the U32 ones that I provided have incorrect Panel definitions for base layout elements. I'm working on fixing this bug when I can determine how each base is calculated. There is a little bit of guesswork involved here.
__________________
Author of Lotro Compendium, Waypoint, and Lotro Plugin Compendium (LPC)
Reply With Quote
  #9  
Unread 05-14-2022, 05:21 PM
lunarwtr's Avatar
lunarwtr lunarwtr is offline
The Undying
Interface Author - Click to view interfaces
 
Join Date: Feb 2011
Posts: 121
ok.. latest 1.0.12 has changes for merging the skins and rendering.. amongst others. You might have to configure the File > Project > Settings > Extensions > Lotro API to fiddle
__________________
Author of Lotro Compendium, Waypoint, and Lotro Plugin Compendium (LPC)
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
Translating Assistance. lunarwtr Interface Help (L) 5 07-04-2011 10:28 PM
Available for skinning? Modnar Interface Requests (L) 1 05-15-2011 02:19 PM
Compendium Assistance lunarwtr Beta Interfaces (L) 5 03-28-2011 08:11 AM
Returning author, needing assistance with possible syntax error(s) Hollywood General Authoring Discussion (L) 7 11-06-2010 01:01 PM
Developer Assistance Requested: The Small Attunement Gauge Enfield Graphics modification help (L) 8 02-01-2009 07:08 PM


All times are GMT -5. The time now is 02:29 AM.


Our Network
EQInterface | EQ2Interface | Minion | WoWInterface | ESOUI | LoTROInterface | MMOUI | Swtorui