[module] OTClient UI debug v2

Gesior.pl

Mega Noob&LOL 2012
Joined
Sep 18, 2007
Messages
2,031
Best answers
19
Reaction score
1,086
Location
PLand
When you create new module, you always got problems with OTUI design. Why X element is on that position? What am I clicking?
I can't solve all these problems, but my module can help you debug your UI without milion prints to console.

With this module you can easily view tree of elements on given position (mouse on name on battle list):
1576420620666.png

It also works before login (mouse on password input):
1576420574718.png

modules/client_ui_debug/client_ui_debug.otmod
Code:
Module
  name: client_ui_debug
  description: Draws tree of widgets on mouse position
  author: Gesior.pl
  reloadable: false
  sandboxed: true
  scripts: [ client_ui_debug ]
  @onLoad: init()
  @onUnload: terminate()
modules/client_ui_debug/client_ui_debug.otui
Code:
HighlightWidget < Panel
  id: highlightWidget
  background-color: #AA000099
  focusable: false
  phantom: true

Panel
  id: clientUiDebug
  anchors.top: parent.top
  anchors.left: parent.left
  anchors.right: parent.right
  height: 20
  margin-top: 1
  focusable: false

  UILabel
    id: clientUiDebugLabel
    color: #FF7777
    background-color: #00000099
    anchors.fill: parent
    text-align: left
    text-auto-resize: false
    padding: 2
    font: verdana-11px-antialised
modules/client_ui_debug/client_ui_debug.lua
Code:
local clientUiDebug
local clientUiDebugLabel
local clientUiDebugHighlightWidget

function onClientUiDebuggerMouseMove(mouseBindWidget, mousePos, mouseMove)
    local widgets = rootWidget:recursiveGetChildrenByPos(mousePos)

    local smallestWidget
    for _, widget in pairs(widgets) do
        if (widget:getId() ~= 'highlightWidget' and widget:getId() ~= 'toolTip') then
            if (not smallestWidget or
                    (widget:getSize().width <= smallestWidget:getSize().width and widget:getSize().height <= smallestWidget:getSize().height)
            ) then
                smallestWidget = widget
            end
        end
    end
    if smallestWidget then
        clientUiDebugHighlightWidget:setPosition(smallestWidget:getPosition())
        clientUiDebugHighlightWidget:setSize(smallestWidget:getSize())
        clientUiDebugHighlightWidget:raise()
    end

    local widgetNames = {}
    for wi = #widgets, 1, -1 do
        local widget = widgets[wi]
        if (widget:getId() ~= 'highlightWidget') then
            table.insert(widgetNames, widget:getClassName() .. '#' .. widget:getId())
        end
    end
    clientUiDebugLabel:setText(table.concat(widgetNames, " -> "))
end

function init()
    connect(rootWidget, {
        onMouseMove = onClientUiDebuggerMouseMove,
    })
    clientUiDebug = g_ui.displayUI('client_ui_debug')
    clientUiDebugLabel = clientUiDebug:getChildById('clientUiDebugLabel')
    clientUiDebugHighlightWidget = g_ui.createWidget('HighlightWidget', rootWidget)
end

function terminate()
    disconnect(rootWidget, {
        onMouseMove = onClientUiDebuggerMouseMove,
    })
    clientUiDebug:destroy()
    clientUiDebugHighlightWidget:destroy()
end
at end of modules list in modules/client/client.otmod add:
Code:
- client_ui_debug
EDIT:
Updated code. Now it highlights smallest matching element (adds red overlay).

Permalink:
 
Last edited:

MikeOT

Well-Known Member
Joined
Jan 22, 2017
Messages
208
Best answers
2
Reaction score
62
Wow! This is extremely helpful. Thank you, it'll get much use from me at the very least :D
 
Top