ESOUI - Grid

ESOUI (https://www.esoui.com/forums/index.php)

- AddOn Search/Requests (https://www.esoui.com/forums/forumdisplay.php?f=165)

- - Grid (https://www.esoui.com/forums/showthread.php?t=2139)

It would be great if someone could make an addon with keybind for toggle to show an grid all over the screen to align addon ui's.
Like this

I'm going to try to do something like this as a way to learn a little bit about textures and photo editing. I would assume it would encompass things like:

Getting current screen size
dividing screen by grid block size
dynamically creating required number of blocks
displaying grid as lowest possible layer
possibly allowing block size modification

As I said, the hard part for me will be actually getting a texture made right and put into the addon correctly. Most of the rest I shouldn't have as much problem on.

It's a project at least!

I know you want to learn about textures, but I imagine you could also use LineControl elements to achieve this. ;)

Texture is actually the easy part, since you don't need any. Just make a texture control template:

xml Code:

<Texture name="GridLine" color="aa000000" layer="BACKGROUND" virtual="true">
   <Dimensions x="1" y="1" />
</Texture>

... and create as many as needed using ZO_ControlPool, and change width or height.

Quote:

Originally Posted by sirinsidiator (Post 11782)

I know you want to learn about textures, but I imagine you could also use LineControl elements to achieve this. ;)

I thought about that too, but it still wants a texture for the line.

Quote:

Originally Posted by merlight (Post 11783)

Texture is actually the easy part, since you don't need any. Just make a texture control template:

xml Code:

<Texture name="GridLine" color="aa000000" layer="BACKGROUND" virtual="true">
   <Dimensions x="1" y="1" />
</Texture>

... and create as many as needed using ZO_ControlPool, and change width or height.

I'll take a look at that too. As I said, I'm using this as sort of a learning exercise in texture creations and implementation, so creating a simple box wasn't something too time consuming to learn.

Gah. I understand the concept of ControlPool, but I cannot seem to wrap my head around implementation. I see it called in different addons different ways and that gets confusing. I think what is getting me is what parameters it takes. Two examples from two addons:

Lua Code:

ZO_ControlPool.New(self, "XRGACompassPin", ZO_CompassContainer, XRGA.AddonInfo.Prefix.."Pin")

Lua Code:

self.container = GetControl(scrollContainer, "ScrollChild")
    self.checkboxPool = ZO_ControlPool:New("ZO_Options_Checkbox", self.container, "Checkbox")

So obviously self is the object the pool will be in. The first string object is the control (so in my case "GridLine"). The third parameter seems to be some container reference, though I cannot understand how that would apply to mine. The last parameter is the prefix for the ID of each object.

I guess that means I'm stuck on what container object I should use. Any thoughts?

To follow on with seeing if I understand ControlPool:

So once I have to Pool I essentially want to maintain a table of created objects that are in use and a table of objects that have been released.

I use AcquireObject() to get/create a new control, place it in the table I created, modify it to what want and display it.

When the grid is 'disabled', I release all the objects back to the pool for the next use.

Lua Code:

pool = ZO_ControlPool:New(templateName, parentControl, namePrefix)
pool:SetCustomFactoryBehavior(
    function (control)
        -- custom init called for each new control created (not for each Acquire!)
    end)
pool:SetCustomResetBehavior(
    function (control)
        -- custom cleanup called for each Release
    end)
 
control, key = pool:AcquireObject()
pool:ReleaseObject(key)
 
pool:ReleaseAllObjects()

templateName ... is the name of a virtual control in XML
parentControl ... optional parent to all controls created by the pool; if it's nil, GuiRoot will be their parent
namePrefix ... optional "prefix" to created controls' names

For example, if parentControl:GetName() == "GridContainer" and namePrefix == "Line", created child controls will be named "GridContainerLine1", "GridContainerLine2", etc. If namePrefix == nil, templateName will be used instead (which makes ugly long names, so I rather use prefix :)).

You don't have to maintain a table of active objects unless you want to release them selectively. In this case I think you could just hide the parent control, and only rebuild the grid (ReleaseAllObjects and re-create) when settings change (screen resolution, grid spacing).

Quote:

Originally Posted by skyraker

Yes, it is exactly as you say. AcquireObject() returns first free object or if there is not free object, it will create a new one using the factory function in case of object pool - ZO_ObjectPool:New(factoryFunction, resetFunction) or from the template in case of control pool - ZO_ControlPool:New(templateName, parent, prefix).

As I did't want to use XML (you have to use XML to define control template), I have used just object pool instead of control pool in my Bloody Screen addon (v0.1). Here is how it works:

Warning: Spoiler

Lua Code:

local ADDON_NAME = "BloodyScreen"
local TLW
local rand = math.random
local splatterKeys = {}
 
local textures = {
   "BloodyScreen/Textures/splatter13.dds",
   "BloodyScreen/Textures/splatter14.dds",
   "BloodyScreen/Textures/splatter15.dds",
   "BloodyScreen/Textures/splatter16.dds",
   "BloodyScreen/Textures/splatter26.dds",
   "BloodyScreen/Textures/splatter27.dds",
   "BloodyScreen/Textures/splatter28.dds",
   "BloodyScreen/Textures/splatter30.dds",
   "BloodyScreen/Textures/splatter31.dds",
   "BloodyScreen/Textures/splatter33.dds",
   "BloodyScreen/Textures/splatter34.dds",
   "BloodyScreen/Textures/splatter35.dds",
   "BloodyScreen/Textures/splatter36.dds",
   "BloodyScreen/Textures/splatter37.dds",
   "BloodyScreen/Textures/splatter38.dds",
   "BloodyScreen/Textures/splatter39.dds",
   "BloodyScreen/Textures/splatter40.dds",
}
 
local function FactoryFunction(pool)
   return WINDOW_MANAGER:CreateControl(nil, TLW, CT_TEXTURE)
end
 
local function ResetFunction(object)
   object:SetHidden(true)
end
 
local SplatterPool = ZO_ObjectPool:New(FactoryFunction, ResetFunction)
 
local function SetSplatter(splatter)
   local texture = textures[rand(#textures)]
   local size = rand(256, 512)
   local alpha = rand(35, 75) / 100
   local x = rand(GuiRoot:GetWidth() - size)
   local y = rand(GuiRoot:GetHeight() - size)
 
   splatter:SetTexture(texture)
   splatter:SetDimensions(size, size)
   splatter:SetAnchor(TOPLEFT, TLW, TOPLEFT, x, y)
   splatter:SetAlpha(alpha)
   splatter:SetHidden(false)
end
 
local function HideSplatters()
   SplatterPool:ReleaseAllObjects()
end
 
local function DisplaySplatters(healthPercent)
   local numSplatters = 0
   if healthPercent < 0.75 then
      numSplatters = zo_roundToNearest(75 - (healthPercent * 100), 5) / 5
   end
 
   local activeSplatters = SplatterPool:GetActiveObjectCount()
 
   if numSplatters == 0 then
      HideSplatters()
   elseif numSplatters > activeSplatters then
      for i = 1, numSplatters - activeSplatters do
         local splatter, key = SplatterPool:AcquireObject()
         table.insert(splatterKeys, key)
         SetSplatter(splatter)
      end
   elseif numSplatters < activeSplatters then
      for i = 1, activeSplatters - numSplatters do
         local keyIndex = rand(#splatterKeys)
         SplatterPool:ReleaseObject(splatterKeys[keyIndex])
         table.remove(splatterKeys, keyIndex)
      end
   end
end
 
local function UpdateSplatters()
   local powerValue, powerMax = GetUnitPower("player", POWERTYPE_HEALTH)
 
   local healthPercent = 0
   if powerValue and powerMax > 0 then
      healthPercent = powerValue / powerMax
   end
 
   DisplaySplatters(healthPercent)
end
 
local function OnPowerUpdate(eventCode, unitTag, powerIndex, powerType, powerValue, powerMax)
   if powerType == POWERTYPE_HEALTH and unitTag == "player" then
      if IsUnitDead("player") then HideSplatters(); return end
 
      local healthPercent = 0
      if powerValue and powerMax > 0 then
         healthPercent = powerValue / powerMax
      end
 
      DisplaySplatters(healthPercent)
   end
end
 
local function OnLoaded(eventCode, addonName)
   if addonName == ADDON_NAME then
      EVENT_MANAGER:UnregisterForEvent(ADDON_NAME, EVENT_ADD_ON_LOADED)
 
      TLW = WINDOW_MANAGER:CreateTopLevelWindow()
      TLW:SetAnchorFill(GuiRoot)
      TLW:SetDrawLayer(DL_OVERLAY)
      TLW:SetMouseEnabled(false)
 
      EVENT_MANAGER:RegisterForEvent(ADDON_NAME, EVENT_PLAYER_DEAD, HideSplatters)
      EVENT_MANAGER:RegisterForEvent(ADDON_NAME, EVENT_PLAYER_ALIVE, UpdateSplatters)
      EVENT_MANAGER:RegisterForEvent(ADDON_NAME, EVENT_POWER_UPDATE, OnPowerUpdate)
   end
end
 
EVENT_MANAGER:RegisterForEvent(ADDON_NAME, EVENT_ADD_ON_LOADED, OnLoaded)

In your case you will have to do the same as me - create top level window of the same size as GuiRoot, set draw layer to overlay as you want to display grid on the top of other windows and then create lines.

top level window:

Lua Code:

TLW = WINDOW_MANAGER:CreateTopLevelWindow()
TLW:SetAnchorFill(GuiRoot)
TLW:SetDrawLayer(DL_OVERLAY)
TLW:SetMouseEnabled(false)

simple object pool for lines:

Lua Code:

local function FactoryFunction(pool)
   local line = WINDOW_MANAGER:CreateControl(nil, TLW, CT_TEXTURE)
   line:SetColor(0,0,0,1) --black
   return line
end
 
local function ResetFunction(object)
   object:SetHidden(true)
end
 
local objectPool = ZO_ObjectPool:New(FactoryFunction, ResetFunction)
--if you omit reset function, object pool will use default ZO_ObjectPool_DefaultResetControl function which works exactly the same as my ResetFunction - it will just hide released object.

And then create lots of lines:

Lua Code:

local GRID_SIZE = 50
local LINE_THICKNESS = 3
local SCREEN_WIDTH, SCREEN_HEIGHT = GuiRoot:GetDimensions()
 
--horizontal lines
for i = 1, zo_floor(SCREEN_WIDTH / GRID_SIZE) do
   local line = objectPool:AcquireObject()
   line:SetDimensions(SCREEN_WIDTH, LINE_THICKNESS)
   line:SetAnchor(TOPLEFT, TLW, TOPLEFT, GRID_SIZE * i, 0)
   line:SetHidden(false)
end
 
--vertical lines
for i = 1, zo_floor(SCREEN_HEIGHT / GRID_SIZE) do
   local line = objectPool:AcquireObject()
   line:SetDimensions(LINE_THICKNESS, SCREEN_HEIGHT)
   line:SetAnchor(TOPLEFT, TLW, TOPLEFT, 0, GRID_SIZE * i)
   line:SetHidden(false)
end

Thanks Garkin. You really made that easy to understand.

Though I found something odd in my first implementation. With a line thickness of 2+, everything looks like nice, even squares (except on the bottom and right which is expected with screen dimensions).

Thickness 2

With one thickness, you can tell that it doesn't seem to make nice squares. I looked and made sure that the line data is correct.

Thickness 1

Sorry about using links. I'm not very proficient at uploading images to these posts.

You guys are awsome.

i can't wait to use this when it is finished.

Yeah, almost done with a early version.

Still incorporating settings and saved variables. Then will probably have to work out bugs.

Quote:

Originally Posted by skyraker (Post 11899)

I don't know, try postimg.org, those you posted are shrinked; looks like some lines are missing, but I can't tell whether it's caused by the resize or by the game :)

Textures have methods IsPixelRoundingEnabled(), SetPixelRoundingEnabled(bool). Not sure what's the default, try setting the opposite :)

Also, there's GetUIGlobalScale(). In Map control they use it to compute mapPixels = mapUnits * GetUIGlobalScale().
So I'd try hline:SetHeight(1 / GetUIGlobalScale()) and see how it looks.

I was wondering if it was the UI Scale, but with the other thicknesses working right it would seem odd that a thickness of 1 would be the only issue. I may give it a try later.

It isn't missing lines in the second image, that is the problem. It just seems to be displaying every so many lines off, despite having the correct anchor point value.

Tried it, at first I didn't see any issues with line width. Normally I'm playing in windowed fullscreen in native resolution (1920x1080), so GetUIGlobalScale() was 1. When I switched to windowed, GetUIGlobalScale() changed to 0.6something and the grid looked really bad.

I also rewrote grid creation so that line width and grid size settings are in pixels. That is, I divided them by UI scale. But even so, some lines appeared thicker probably due to accumulation of rounding errors. Finally I disabled pixel rounding and it looks ok now.

Here's my modified code: https://gist.github.com/merlight/25e02368a1e6187f989c
In addition to the pixel changes described above, there are some more:
- I'm anchoring lines to TOP/LEFT (center), so the red lines have zero offsets and thus they're in the true center
- only every 10th line has full opacity from settings; in-between lines have 40% or 70% opacity (this doesn't work with changing the setting on the fly)
- I wanted to force the red lines to be drawn last, so they're not overlapped by the black ones; but I doubt showing them last will ensure that; perhaps we should SetDrawLevel?

Quote:

Originally Posted by merlight (Post 11929)

Nice changes. My next update will incorporate your changes, as well as update settings to take advantage of this. For now, the 'fix' for changing transparency I decided to use was to simply adjust the TLW transparency.

Setting the two red lines as being last to be drawn made sure they were over all others. At least on my screen they are.

Quote:

Originally Posted by skyraker (Post 11945)

I was too tired to see such simple solution when I wrote that lol :D

Quote:

Originally Posted by skyraker (Post 11945)

Setting the two red lines as being last to be drawn made sure they were over all others. At least on my screen they are.

I modified the gist a bit more, finally anchoring all lines to screen center (another too-late-to-be-obvious casee :)) and I set draw levels just to be sure. Maybe I'll ask ZOS for some more interesting blending modes next.

For the record, here's some info about pixel rounding from http://forums.elderscrollsonline.com...tes-change-log

Quote:

Originally Posted by ZOS_JessicaFolsom

Controls that render textures have all had SetPixelRoundingEnabled and IsPixelRoundingEnabled added. Pixel rounding determines how screen-space positioning works for controls. If enabled, the positions of the control's final screen rect are rounded to the next pixel value before being rendered (rather than letting the shader determine which pixels the control covers). This helps reduce jitter for animated controls, sometimes at the cost a legibility/blurriness.