UI personnalization templates and others

Nolan Kotulan · 03/11/15, 05:03 PM

Hi everybody,

I was wondering if it would be possible and/or if someone could think about making an or multiple addons with the fallowing features. I suppose (but maybe I'm wrong) most of these aren't very hard to do for someone who have some coding skills. I don't. I only have the "graphic" ones (I love to customize/replace UI elements).

An option to disable the "zoom on" when hovering inventory icons (could be part of Inventory Grid View?).
A folder with (blank) templates of the "new item" and "stolen item" ugly icons (particulary the red "stolen" one) so that we could customize/replace them. Something working like the Inventory Grid View Skin Template.
Same thing for the Bounty Meter. Would be great to have customizable templates in a folder to replace this ugly piece of cr#p...

If you can give the dimensions of each DDS file (as I don't know how to extract them myself), I could do the graphical part myself to include them in the addon(s). I would like to design them to perfectly fit the vanilla UI but in a less uglier way than these elements actualy are.

Anyone interested in doing a such thing?

Regards,
Nolan

PS.: Gonna upload soon my "Vanilla" Inventory Grid View skin here.

circonian · 03/11/15, 05:45 PM

Originally Posted by Nolan Kotulan

An option to disable the "zoom on" when hovering inventory icons?).

This can be done by changing the m_downSize for the menuBar to match the m_normalSize. You'de just have to do it to every menu bar you want to stop the zoom effect on.

Lua Code:

menuBar.m_object.m_downSize      = 40   -- size of icon when hoovered over --
menuBar.m_object.m_normalSize  = 24 -- normal size of icon --

I created a quick addon that removes the zoom from all of the menu bars (that I could think of). They may still look like they get just a tiny bit larger, but its really just a highlight that outlines the icon when you mouse over it. The icons are the same size. Its in my dropbox and its called called: RemoveButtonZoom.zip

Originally Posted by Nolan Kotulan

A folder with (blank) templates of the "new item" and "stolen item" ugly icons (particulary the red "stolen" one) so that we could customize/replace them. If you can give the dimensions of each DDS file (as I don't know how to extract them myself)

We can't extract the textures. You could take a screenshot & trace it thats what I did to create the shabby icons for FilterIt. I created a blank 64x64 pixels, and pasted the screenshot into it blowing it up to be just a little smaller than the 64x64 window. Traced it, then did whatever to fill it in.

Nolan Kotulan · 03/11/15, 06:07 PM

Thanks for your answer.

About the "zoom" on UI elements, thanks for your explanations.
I tested it and yes, I confirm that it works, and it's great. I'll maybe* use it.

There's a weird thing however, there is one icon in the inventory on which it doesn't work: the "weapons" one.

*I said "maybe" because I realise just now that I misspoke by talking about "intentory icons".
This isn't what I was looking for in fact.

What I would like to is to disable the "zoom" on inventory items.

Originally Posted by circonian

We can't extract the textures. You could take a screenshot & trace it thats what I did to create the shabby icons for FilterIt. I created a blank 64x64 pixels, and pasted the screenshot into it blowing it up to be just a little smaller than the 64x64 window. Traced it, then did whatever to fill it in.

About the textures, I don't want to extract them (though it would be easier to work on top of them than to design them from scratch), I just want to know what are their dimensions. I saw here that there could be a way to know them but I didn't really understand how to do it as it seems to be more of a coding thing.

Sure I could do like you said, or by trying and trying again until it fits perfectly (the problem with taking screenshots is that the displayed dimensions depend of the resolution). This is how I'll do if I have to but it would be easier and better if someone knows how to to be sure of the dimensions from the beginning. And I definitely need someone that could build the template folder and code to override these elements.

Garkin · 03/11/15, 06:27 PM

EDITED:

This zoom animation is done in function ZO_InventorySlot_OnMouseEnter(inventorySlot). However this function uses local table InventoryEnter, so it won't be easy to redefine it. You will need to copy function without animation part and whole InventoryEnter table.

I was thinking about changing endScale for each slot (buttonPart.animation:GetFirstAnimation():SetEndScale(1)), but animation will still be called at least for the first time.

Maybe redefining template, but is it possible without hooking ANIMATION_MANAGER? This seems to be too much "hacky":

XML part:

Lua Code:

<GuiXml>
    <Animations>
        <AnimationTimeline name="New_IconSlotMouseOverAnimation">
            <Animations>
                <ScaleAnimation duration="125" startScale="1" endScale="1"/>
            </Animations>
        </AnimationTimeline>
    </Animations>
</GuiXml>

Lua part:

Lua Code:

local CreateTimelineFromVirtual_orig = ANIMATION_MANAGER.CreateTimelineFromVirtual
ANIMATION_MANAGER.CreateTimelineFromVirtual = function(self, template, ...)
    if template == "IconSlotMouseOverAnimation" then
        template = "New_IconSlotMouseOverAnimation"
    end
    return CreateTimelineFromVirtual_orig(self, template, ...)
end

Nolan Kotulan · 03/11/15, 06:36 PM

Originally Posted by Garkin

...

OK, I'm gonna take a look on that tomorow as I'm really tired now.
I'm not too bad when it's about very (veryyyy) lightly editing some already existing code, so maybe... ;)

Thank you for your ansers guys,
I'll give you news about this.

Still looking for the templates thing though, if someone read this... ^^

Regards,
Nolan

**Baertram** · 03/11/15, 07:01 PM

Did you try this addon here?
http://www.esoui.com/downloads/info4...ureViewer.html

Download, install, /realoadui, activate it in the settings -> Show window -> Press the refresh circle icon at the top left side of the addon window.

It displays the texture's width and height + filesize at the right.
You only have to search the path where the DDS textures are in manually.

The "new inventory" icon is in "/esoui/art/inventory/newitem_cion.dds" and is of 32 x 32 pixles size
I didn't search the other meter images so far, but maybe you will find them and it helps.

Originally Posted by Nolan Kotulan

OK, I'm gonna take a look on that tomorow as I'm really tired now.
I'm not too bad when it's about very (veryyyy) lightly editing some already existing code, so maybe...

Thank you for your ansers guys,
I'll give you news about this.

Still looking for the templates thing though, if someone read this... ^^

Regards,
Nolan

Garkin · 03/11/15, 07:03 PM

Hm, another (untested) solution how to change zoom animation:

Lua Code:

local function CreateSlotAnimation(inventorySlot)
    if inventorySlot.slotControlType == "listSlot" then
        local control = inventorySlot
        local controlType = inventorySlot:GetType()
 
        if (controlType == CT_CONTROL and control.slotControlType == "listSlot") then
            control = inventorySlot:GetNamedChild("MultiIcon") or inventorySlot:GetNamedChild("Button")
        end
 
        if (control and not control.animation) then
            control.animation = ANIMATION_MANAGER:CreateTimelineFromVirtual("IconSlotMouseOverAnimation", control)
            control.animation:GetFirstAnimation():SetEndScale(1)
        end
    end
end
ZO_PreHook("ZO_InventorySlot_OnMouseEnter", CreateSlotAnimation)

Nolan Kotulan · 03/12/15, 05:28 PM

I'm back with a very good new...

This:

Originally Posted by Garkin

Hm, another (untested) solution how to change zoom animation:

Lua Code:

local function CreateSlotAnimation(inventorySlot)
    if inventorySlot.slotControlType == "listSlot" then
        local control = inventorySlot
        local controlType = inventorySlot:GetType()
 
        if (controlType == CT_CONTROL and control.slotControlType == "listSlot") then
            control = inventorySlot:GetNamedChild("MultiIcon") or inventorySlot:GetNamedChild("Button")
        end
 
        if (control and not control.animation) then
            control.animation = ANIMATION_MANAGER:CreateTimelineFromVirtual("IconSlotMouseOverAnimation", control)
            control.animation:GetFirstAnimation():SetEndScale(1)
        end
    end
end
ZO_PreHook("ZO_InventorySlot_OnMouseEnter", CreateSlotAnimation)

Works perfectly!
So thank you very much Garkin!!! :)

I updated my Inventory Grid View Vanilla Skin with this code in it for my personnal use.
Now, my question is: could I include this for the public release I'll upload soon?
I'll give you credit of course.

Take a look at what it looks:

__________________

So now, what is left:

I'm still looking for someone that could (and would like to be kind enough :) to code a little mod to override the two DDS texture files for new item and stolen item icons as I think the actual ones are really badly designed. If you don't know what I'm talking about, take a look at this. I'don't think I would integrate this in my skin however, as it is something totally different and as it wouldn't really be my mod as I can only do the graphical part. But so, still looking for someone to make that mod a reality.
This is less important but still, I'm also looking for someone who could adapt the Equipped apparel panel items to work like Inventory Grid View ones (customizable background, outline and hovering effect and a little bit smaller size) because even if we can customize the background and the outline by using Wykkid's Equiment Borders mod, the howering effect "can't" actually be changed (I would like to make it colored by item's quality like in inventory) and the items themselves are a little bit bigger than in inventory (and so they get out of their frames).
Someone to code a mod to override the bounty meter textures as it is a very ugly piece of UI element.
Coming soon...

I know that I'm a little bit a nit-picker (but hey! I work in graphic design, so... ;) but I really think we could achieve some great UI enhancements here. And mostly, on top of it, even if people don't like my work, the code could be used by other graphic designers...
__________________

Finally, about this:

Originally Posted by Baertram

Did you try this addon here?
http://www.esoui.com/downloads/info4...ureViewer.html

Download, install, /realoadui, activate it in the settings -> Show window -> Press the refresh circle icon at the top left side of the addon window.

It displays the texture's width and height + filesize at the right.
You only have to search the path where the DDS textures are in manually.

The "new inventory" icon is in "/esoui/art/inventory/newitem_cion.dds" and is of 32 x 32 pixles size
I didn't search the other meter images so far, but maybe you will find them and it helps.

Thank you very much for the info about the dimensions of the new item icon and for the info about the mod. I didn't have time to try it actually, but I will this weekend. I'm sure it will be really useful, so thanks again.

And thanks again to everybody has, is and will help me. :)

Regards,
Nolan

Garkin · 03/12/15, 06:27 PM

Originally Posted by Nolan Kotulan

...
Now, my question is: could I include this for the public release I'll upload soon?
I'll give you credit of course.
...

Feel free to use any code which I have posted here or anywhere else.

Randactyl · 03/12/15, 06:36 PM

Hello!

If you do release a texture pack for Inventory Grid View (please do!) I would prefer you only include what would be expected - background textures for the grid slots.

If you'd like, I can possibly add a slider for icon zoom level in Inventory Grid View's settings menu. PM me and we can go over details

Nolan Kotulan · 03/12/15, 07:22 PM

Originally Posted by Garkin

Feel free to use any code which I have posted here or anywhere else.

Thank you very much Garkin!

Originally Posted by Randactyl

Hello!

If you do release a texture pack for Inventory Grid View (please do!) I would prefer you only include what would be expected - background textures for the grid slots.

If you'd like, I can possibly add a slider for icon zoom level in Inventory Grid View's settings menu. PM me and we can go over details :)

Hi Randactyl,

No problem, I'll remove the code for the public release then, and of mine too if you can add a slider to the Inventory Grid View main addon as it is a great idea.

I mean, I personally don't really care anymore about such an option as Garkin gave me the code I was looking for and as I never want to see again this zoom on my items... ;)

But yes, I definitely think this is a great feature to add and options are always welcome for most people. And it obviously makes more sense to add this to the main addon.
__________________

By the way, you look like being the right person that could look into at least* my first point (*because I don't want to ask too much and because it looks like being the most "easy" and "quick" one to adress, if I'm not wrong) in my last post, about the new item and stolen item icons... don't want to help me? ^^'

Pleasssssseeeeee... é_è

... =P

We keep in touch by PM if you want,
Have to go to sleep now,
So tired again,

Regards,
Nolan

Garkin · 03/12/15, 07:45 PM

There is an undocumented function RedirectTexture(texture1, texture2). I'll test if it works.

Lua Code:

RedirectTexture("EsoUI/Art/Inventory/newItem_icon.dds", "EsoUI/Art/Buttons/accept_up.dds")
RedirectTexture("EsoUI/Art/Inventory/inventory_stolenItem_icon.dds", "EsoUI/Art/Buttons/decline_up.dds")

EDIT:
It works.

Randactyl · 03/12/15, 09:33 PM

Originally Posted by Garkin

There is an undocumented function RedirectTexture(texture1, texture2). I'll test if it works.

Lua Code:

RedirectTexture("EsoUI/Art/Inventory/newItem_icon.dds", "EsoUI/Art/Buttons/accept_up.dds")
RedirectTexture("EsoUI/Art/Inventory/inventory_stolenItem_icon.dds", "EsoUI/Art/Buttons/decline_up.dds")

EDIT:
It works.

That sound like a pretty nifty little function!

merlight · 03/13/15, 03:04 AM

Originally Posted by Garkin

It works.

awesome

Nolan Kotulan · 03/13/15, 04:25 PM

Originally Posted by Garkin

There is an undocumented function RedirectTexture(texture1, texture2). I'll test if it works.

Lua Code:

RedirectTexture("EsoUI/Art/Inventory/newItem_icon.dds", "EsoUI/Art/Buttons/accept_up.dds")
RedirectTexture("EsoUI/Art/Inventory/inventory_stolenItem_icon.dds", "EsoUI/Art/Buttons/decline_up.dds")

EDIT:
It works.

Garkin...
I love you!!!

Seriously, thanks a lot man.
This is again exactly what I was looking for.
__________________

So, I finalised my Inventory Grid View Vanilla Skin and uploaded it.

Now, as Rendactyl asked me to not include your code in the skin itself, and until he eventually include a slider for the item zoom level (which I want to set to 0 ;) in Inventory Grid View, I also uploaded an addon that is nothing more than the code you gave us as I want it to be available for download so it can be conbined with my mod. It is called Inventory No Item Zoom. I give you full credits of course.

I also released a third addon that is now made up of your other code which override the inventory meter icons. So I finally designed simpler meter icons and I'm very happy about them as they fit perfectly with the skin and the disabled zoom. This one's called Inventory Simpler Meter Icons. I give you part of the credits here, of course again.

Links
Inventory Grid View Vanilla Skin
Inventory No Item Zoom
Inventory Simpler Meter Icons
__________________

So, what's left?

Still looking for someone who could adapt the Equipped apparel panel items to work like Inventory Grid View ones (customizable background, outline and hovering effect and a little bit smaller size) because even if we can customize the background and the outline by using Wykkid's Equiment Borders mod, the howering effect "can't" actually be changed (I would like to make it colored by item's quality like in inventory) and the items themselves are a little bit bigger than in inventory (and so they get out of their frames).
Someone to code a mod to override the bounty meter textures as it is a very ugly piece of UI element.
Coming soon...

About "2.", I think I could probably do that by myself by using the same code Garkin gave us and by finding which textures are involved by trying House of Winters - Texture Viewer (thanks Baertram). Gonna try when I have time...

Now I would like to play a little bit... ^^'

Randactyl · 03/13/15, 04:53 PM

yo, try this out: http://www.reddit.com/r/elderscrolls..._some_testers/

Nolan Kotulan · 03/13/15, 05:35 PM

Originally Posted by Randactyl

yo, try this out: http://www.reddit.com/r/elderscrolls..._some_testers/

Hey,

Tested it and it works like a charm.

But, if I can make you a suggestion, make the "Offset item tooltip windows" also an option.

Saying that because I personally think (as a typographer, which is one of the two parts of my job, the other one being image editing) that it is very tiring for the eyes.

It works with line view mode because eyes scan for items vertically and then check for infos which are always at the same place, just next to the item, horizontally speaking.

In grid view mode, eyes scan vertically and horizontally and so the items are sometimes at the far right of the screen, and so it is really not ergonomic and very tiring for the eyes who have to span the whole inventory to check the infos at the far left.

The infos should in my opinion always remain close next to the selected item.
__________________

I can however report another bug which isn't new at all and which I spotted while designing my skin.
It is really hard to spot in a normal use however, as it is really noticeable on only one condition, which is to start the game in line view mode.

Set your inventory to line view mode
Restart the game
Open your inventory and check where is the column of items' icons, horizontally speaking
Toggle to grid view mode and then toggle back to line view mode
Notice how the column of items' icons has moved to the far left of the panel

So IVG move the items' icons' column to the left in line view mode, except when the game is started with this mode already toggled on and until you don't toggle view modes.

If you check my addons' picture, the column has already moved.
__________________

Edit
I found another bug using your normal last officially released IVG (1.3.7.0). This one's new.
When in a fence, trying to sell stolen items, gold value appears over the items in grid view mode.

Randactyl · 03/14/15, 12:10 AM

Originally Posted by Nolan Kotulan

But, if I can make you a suggestion, make the "Offset item tooltip windows" also an option.

I thought of that while I was at work tonight. I'll set the option.

I'll take a look at the other stuff you mentioned. The scroll list container being offset has been eluding me for some time now, though it only ever seems to be right after login when the user may have caught his/her inventory at a point where it hasn't finished initialization (had a small problem with misaligned tooltips when opening doing this and hovering over an item immediately). I hadn't noticed the gold at fence/laundering scenes.

Nolan Kotulan · 03/14/15, 08:05 AM

Originally Posted by Randactyl

I thought of that while I was at work tonight. I'll set the option.

I'll take a look at the other stuff you mentioned. The scroll list container being offset has been eluding me for some time now, though it only ever seems to be right after login when the user may have caught his/her inventory at a point where it hasn't finished initialization (had a small problem with misaligned tooltips when opening doing this and hovering over an item immediately). I hadn't noticed the gold at fence/laundering scenes.

Great to hear about the option. Thanks! :)

About the offset column, I can confirm this always happens. The column is always offset except if you start the game directly in line mode and never toggle the view.

About the gold value appearing over the items in grid view mode at the fence, I tried again by removing all addons (mines and saved variables included) except IVG and I confirm it still happens. Here too, it only happens if you open the fence window directly in grid view mode. If you toggle the view and toggle it back to grid view mode, the bug is gone, but then will reappear if you close the window and talk to the fence guy again. Note that it only appears with fence guys (the fence window) and not with the merchants in fences.