• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!
  • If you're using Gesior 2012 or MyAAC, please review this thread for information about a serious security vulnerability and a fix.

[module] OTClient UI debug v2

Gesior.pl

Gesior.pl

Mega Noob&LOL 2012
Senator
Premium User
Joined
Sep 18, 2007
Messages
2,863
Solutions
92
Reaction score
3,055
Location
Poland
GitHub
gesior
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

MikeOT

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

Felipe93

Ghost Member
Joined
Mar 21, 2015
Messages
1,991
Solutions
9
Reaction score
324
Location
Chile
Nice release, found it today in a polish blog. @Geisor.pl would be possible to add a feature to display where are located or which are the files, where the code is placed?
like if you place in X button it will also display that is placed at containers.otui in X folder?
 
P

pips

Active Member
Joined
Jul 29, 2009
Messages
81
Solutions
1
Reaction score
26
Gesior.pl said:
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):
View attachment 41023

It also works before login (mouse on password input):
View attachment 41022

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:
Click to expand...
What about sharing this auto-task system? :D
 
OP
OP
Gesior.pl

Gesior.pl

Mega Noob&LOL 2012
Senator
Premium User
Joined
Sep 18, 2007
Messages
2,863
Solutions
92
Reaction score
3,055
Location
Poland
GitHub
gesior
Joker Man said:

Gesior.pl why you don`t help me?​

Click to expand...
With PayPal? You are using some custom integration, probably pretty outdated. I can try to fix it. Message me on Discord: Gesior.pl#3208
There are private messages on forum. You don't have to haunt people in random threads on forum :p
pips said:
that one that appears on the screenshots/default channel 😅
Click to expand...
It's Kasteria code (all in Lua on server side). I can't share it for 2 reason:
  • it's Kasteria code
  • Kasteria uses 10 years old engine, older than TFS 0.2, scripts from Kasteria are not compatible with any engine used nowadays

I saw a lot of task systems on otland. None of them assign few random tasks when player logins first time on given day?
 
Last edited:
Felipe93

Felipe93

Ghost Member
Joined
Mar 21, 2015
Messages
1,991
Solutions
9
Reaction score
324
Location
Chile
Gesior.pl said:
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):
View attachment 41023

It also works before login (mouse on password input):
View attachment 41022

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:
Click to expand...
can you make the code display in which file or folder is located the code when you set mouse on X position?
 
Source

Source

Advanced OT User
Joined
May 31, 2020
Messages
179
Reaction score
172
Location
OpenTibia .dev
GitHub
source61
Felipe93 said:
can you make the code display in which file or folder is located the code when you set mouse on X position?
Click to expand...
Install WSL and use rgrep. Syntax: rgrep pattern directory [directory [...]]. Example: rgrep 'gameBottomPanel' modules.

@gesior
Great and useful little modules.
I added an enable/disable button since the red highlight color can be a bit much at times and I don't want to remove/re-add everytime I want to check something.
By default I have your module disabled and is only enabled by clicking the activate button.
Here's my code in case anyone is interested:

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

  Button
    id: activateButton
    text: Disable
    background-color: #00FF00
    anchors.top: parent.top
    anchors.right: parent.right
    @onClick: activate()

client_ui_debug.lua:
Code: 
local clientUiDebug
local clientUiDebugLabel
local clientUiDebugHighlightWidget
local clientUiDebugActivateButton
local enabled = true

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 activate()
  enabled = not enabled
  if enabled then
    clientUiDebugActivateButton:setText("Disable")
    connect(rootWidget, {
        onMouseMove = onClientUiDebuggerMouseMove,
    })
  else
    clientUiDebugActivateButton:setText("Enable")
    clientUiDebugHighlightWidget:setSize({0, 0})
    --clientUiDebugLabel:setText("")
    disconnect(rootWidget, {
        onMouseMove = onClientUiDebuggerMouseMove,
    })
  end
end

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

function terminate()
    disconnect(rootWidget, {
        onMouseMove = onClientUiDebuggerMouseMove,
    })
    clientUiDebug:destroy()
    clientUiDebugHighlightWidget:destroy()
    clientUiDebugActivateButton:destroy()
end

 
Top