• 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!

Lua How to select a Widget?

Helliot1

Owner of Empire Online
Joined
Jul 26, 2017
Messages
315
Solutions
1
Reaction score
57
Hi guys, I have a doubt with "g_ui.createWidget"..

I create a widget to show some spells (name, mana, magic level)... But when I select a spell, I want that fill a variable with their values (name, mana, magic level).. How I can do it?

SpellsPanel.png

LUA
Lua:
warrior = { None =             { nome = "None", casting = "Instant", mana = 0, magic = 0},
            WeakHealing =     { nome = "Weak Healing", casting = "Instant", mana = 10, magic = 0},
            Recuperation =     { nome = "Recuperation", casting = "Instant", mana = 40, magic = 3},
            Light =         { nome = "Light", casting = "Instant", mana = 20, magic = 1},
            SpeedBoost =     { nome = "Speed Boost", casting = "Instant", mana = 50, magic = 4},
            Createfood =     { nome = "Create Food", casting = "Instant", mana = 25, magic = 2},
            SweepingSwipe = { nome = "Sweeping Swipe", casting = "Instant", mana = 60, magic = 5}
}

for key,spell in pairs(warrior) do
    local spellsBox = g_ui.createWidget('SpellsBox', spellsPanel)
   
    iconeSpell = spellsBox:getChildById('iconeSpell')
    iconeSpell:setImageSource('/images/game/spells/' .. key .. '')  
   
    nomeSpell = spellsBox:getChildById('nomeSpell')
    nomeSpell:setText(spell.nome)
   
    castingSpell = spellsBox:getChildById('castingSpell')
    castingSpell:setText(spell.casting)
   
    manaSpell = spellsBox:getChildById('manaSpell')
    manaSpell:setText(spell.mana .. ' mana')
   
    magicSpell = spellsBox:getChildById('magicSpell')
    magicSpell:setText('magic level ' .. spell.magic .. '')
   
    radioItems:addWidget(spellsBox)
end

OTUI
CSS:
SpellsBox < UICheckBox
  font: verdana-11px-rounded
  color: #c8c8c8
  @onCheckChange: modules.game_interface.onSpellsBoxChecked(self)

  InsideWindow
    id: insideWindowSpellsBox
    size: 42 42
    anchors.top: parent.top
    anchors.left: parent.left
    margin-top: 5
    margin-left: 5

  Label
    id: iconeSpell
    font: verdana-11px-rounded
    size: 40 40
    color: #ffffff
    anchors.top: insideWindowSpellsBox.top
    anchors.left: insideWindowSpellsBox.left
    margin-top: 1
    margin-left: 1

  Label
    id: nomeSpell
    font: verdana-11px-rounded
    color: #ffffff
    phantom: true
    anchors.top: insideWindowSpellsBox.top
    anchors.left: insideWindowSpellsBox.right
    margin-top: 5
    margin-left: 5
    text-auto-resize: true

  $checked on:
    background-color: #c8c8c840

  $!checked:
    background-color: alpha

  Label
    id: castingSpell
    font: verdana-11px-rounded
    color: #8c8c8c
    anchors.top: nomeSpell.bottom
    anchors.left: nomeSpell.left
    margin-top: 5
    text-auto-resize: true

  Label
    id: manaSpell
    font: verdana-11px-rounded
    color: #c0c0ff
    anchors.top: nomeSpell.top
    anchors.right: parent.right
    margin-right: 5
    text-auto-resize: true

  Label
    id: magicSpell
    font: verdana-11px-rounded
    color: #82ff82
    anchors.top: manaSpell.bottom
    anchors.right: manaSpell.right
    margin-top: 5
    text-auto-resize: true

MainWindow
  id: spellsWindow
  size: 402 435
  !text: tr('Spells')
  @onEscape: self:hide()

  InsideWindow
    id: insideWindow
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-bottom: 41

  InsideWindow
    id: insideWindowII
    height: 20
    anchors.top: insideWindow.top
    anchors.left: insideWindow.left
    anchors.right: insideWindow.right
    margin-top: 7
    margin-left: 9
    margin-right: 9

  TabButton
    id: warriorSpells
    !text: tr('Warrior')
    font: verdana-11px-rounded
    color: #c8c8c8
    width: 120
    checked: true
    on: true
    anchors.top: insideWindowII.top
    anchors.bottom: insideWindowII.bottom
    anchors.left: insideWindowII.left
    margin-top: 1
    margin-bottom: 1
    margin-left: 1

  TabButton
    id: rangerSpells
    !text: tr('Ranger')
    font: verdana-11px-rounded
    color: #c8c8c8
    width: 120
    anchors.top: warriorSpells.top
    anchors.left: warriorSpells.right

  TabButton
    id: mageSpells
    !text: tr('Mage')
    font: verdana-11px-rounded
    color: #c8c8c8
    width: 120
    anchors.top: rangerSpells.top
    anchors.left: rangerSpells.right

  FlatPanel
    id: spellsFlatPanel
    height: 202
    anchors.left: insideWindowII.left
    anchors.right: insideWindowII.right
    anchors.top: insideWindowII.bottom
    margin-top: 7

    VerticalScrollBar
      id: spellsPanelListScrollBar
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      anchors.right: parent.right
      margin-top: 1
      margin-bottom: 1
      margin-right: 1
      step: 24
      pixels-scroll: true

    VerticalSeparatorII
      anchors.top: spellsPanelListScrollBar.top
      anchors.bottom: spellsPanelListScrollBar.bottom
      anchors.right: spellsPanelListScrollBar.left
      margin-right: 1

    ScrollablePanel
      id: spellsPanel
      height: 250
      anchors.left: parent.left
      anchors.right: prev.left
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      vertical-scrollbar: spellsPanelListScrollBar
      margin-top: 1
      margin-bottom: 1
      margin-left: 1
      margin-right: 1
      layout:
        type: grid
        cell-size: 342 50
        flow: true
        auto-spacing: true

  InsideWindow
    id: insideWindowIII
    height: 63
    anchors.top: spellsFlatPanel.bottom
    anchors.left: spellsFlatPanel.left
    anchors.right: spellsFlatPanel.right
    margin-top: 7

  TextEdit
    id: textEdit
    size: 312 25
    font: verdana-11px-rounded
    color: #c8c8c8
    anchors.top: insideWindowIII.bottom
    anchors.right: insideWindowIII.right
    margin-top: 7

  Label
    id: targetLabel
    !text: tr('Target:')
    anchors.top: textEdit.top
    anchors.right: textEdit.left
    margin-top: 4
    margin-right: 7

  HorizontalSeparator
    id: horizontalSeparator
    anchors.top: insideWindow.bottom
    anchors.left: insideWindow.left
    anchors.right: insideWindow.right
    margin-top: 10

  Panel
    id: panel
    size: 216 25
    anchors.top: horizontalSeparator.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 8

  Button
    id: saveButton
    !text: tr('Save')
    size: 95 25
    anchors.top: panel.top
    anchors.left: panel.left
    margin-top: 1
    margin-left: 1
    @onClick: modules.game_interface.onSaveButton()

  Button
    id: cancelButton
    !text: tr('Cancel')
    size: 95 25
    anchors.top: panel.top
    anchors.right: panel.right
    margin-top: 1
    margin-right: 1
    @onClick: modules.game_interface.onCancelButton()
 
Solution
I got kind of confused with the UICheckBox thing, I might be wrong, but you are better off using something like a VerticalList so you can check which child is focused. You should look up how the character list was created, it can be quite useful.
Hi guys, I have a doubt with "g_ui.createWidget"..

I create a widget to show some spells (name, mana, magic level)... But when I select a spell, I want that fill a variable with their values (name, mana, magic level).. How I can do it?

View attachment 47535

LUA
Lua:
warrior = { None =             { nome = "None", casting = "Instant", mana = 0, magic = 0},
            WeakHealing =     { nome = "Weak Healing", casting = "Instant", mana = 10, magic = 0},
            Recuperation =     { nome = "Recuperation", casting = "Instant", mana = 40, magic = 3},
            Light =         { nome = "Light", casting = "Instant", mana = 20, magic = 1},
            SpeedBoost =     { nome = "Speed Boost", casting = "Instant", mana = 50, magic = 4},
            Createfood =     { nome = "Create Food", casting = "Instant", mana = 25, magic = 2},
            SweepingSwipe = { nome = "Sweeping Swipe", casting = "Instant", mana = 60, magic = 5}
}

for key,spell in pairs(warrior) do
    local spellsBox = g_ui.createWidget('SpellsBox', spellsPanel)
  
    iconeSpell = spellsBox:getChildById('iconeSpell')
    iconeSpell:setImageSource('/images/game/spells/' .. key .. '') 
  
    nomeSpell = spellsBox:getChildById('nomeSpell')
    nomeSpell:setText(spell.nome)
  
    castingSpell = spellsBox:getChildById('castingSpell')
    castingSpell:setText(spell.casting)
  
    manaSpell = spellsBox:getChildById('manaSpell')
    manaSpell:setText(spell.mana .. ' mana')
  
    magicSpell = spellsBox:getChildById('magicSpell')
    magicSpell:setText('magic level ' .. spell.magic .. '')
  
    radioItems:addWidget(spellsBox)
end

OTUI
CSS:
SpellsBox < UICheckBox
  font: verdana-11px-rounded
  color: #c8c8c8
  @onCheckChange: modules.game_interface.onSpellsBoxChecked(self)

  InsideWindow
    id: insideWindowSpellsBox
    size: 42 42
    anchors.top: parent.top
    anchors.left: parent.left
    margin-top: 5
    margin-left: 5

  Label
    id: iconeSpell
    font: verdana-11px-rounded
    size: 40 40
    color: #ffffff
    anchors.top: insideWindowSpellsBox.top
    anchors.left: insideWindowSpellsBox.left
    margin-top: 1
    margin-left: 1

  Label
    id: nomeSpell
    font: verdana-11px-rounded
    color: #ffffff
    phantom: true
    anchors.top: insideWindowSpellsBox.top
    anchors.left: insideWindowSpellsBox.right
    margin-top: 5
    margin-left: 5
    text-auto-resize: true

  $checked on:
    background-color: #c8c8c840

  $!checked:
    background-color: alpha

  Label
    id: castingSpell
    font: verdana-11px-rounded
    color: #8c8c8c
    anchors.top: nomeSpell.bottom
    anchors.left: nomeSpell.left
    margin-top: 5
    text-auto-resize: true

  Label
    id: manaSpell
    font: verdana-11px-rounded
    color: #c0c0ff
    anchors.top: nomeSpell.top
    anchors.right: parent.right
    margin-right: 5
    text-auto-resize: true

  Label
    id: magicSpell
    font: verdana-11px-rounded
    color: #82ff82
    anchors.top: manaSpell.bottom
    anchors.right: manaSpell.right
    margin-top: 5
    text-auto-resize: true

MainWindow
  id: spellsWindow
  size: 402 435
  !text: tr('Spells')
  @onEscape: self:hide()

  InsideWindow
    id: insideWindow
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-bottom: 41

  InsideWindow
    id: insideWindowII
    height: 20
    anchors.top: insideWindow.top
    anchors.left: insideWindow.left
    anchors.right: insideWindow.right
    margin-top: 7
    margin-left: 9
    margin-right: 9

  TabButton
    id: warriorSpells
    !text: tr('Warrior')
    font: verdana-11px-rounded
    color: #c8c8c8
    width: 120
    checked: true
    on: true
    anchors.top: insideWindowII.top
    anchors.bottom: insideWindowII.bottom
    anchors.left: insideWindowII.left
    margin-top: 1
    margin-bottom: 1
    margin-left: 1

  TabButton
    id: rangerSpells
    !text: tr('Ranger')
    font: verdana-11px-rounded
    color: #c8c8c8
    width: 120
    anchors.top: warriorSpells.top
    anchors.left: warriorSpells.right

  TabButton
    id: mageSpells
    !text: tr('Mage')
    font: verdana-11px-rounded
    color: #c8c8c8
    width: 120
    anchors.top: rangerSpells.top
    anchors.left: rangerSpells.right

  FlatPanel
    id: spellsFlatPanel
    height: 202
    anchors.left: insideWindowII.left
    anchors.right: insideWindowII.right
    anchors.top: insideWindowII.bottom
    margin-top: 7

    VerticalScrollBar
      id: spellsPanelListScrollBar
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      anchors.right: parent.right
      margin-top: 1
      margin-bottom: 1
      margin-right: 1
      step: 24
      pixels-scroll: true

    VerticalSeparatorII
      anchors.top: spellsPanelListScrollBar.top
      anchors.bottom: spellsPanelListScrollBar.bottom
      anchors.right: spellsPanelListScrollBar.left
      margin-right: 1

    ScrollablePanel
      id: spellsPanel
      height: 250
      anchors.left: parent.left
      anchors.right: prev.left
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      vertical-scrollbar: spellsPanelListScrollBar
      margin-top: 1
      margin-bottom: 1
      margin-left: 1
      margin-right: 1
      layout:
        type: grid
        cell-size: 342 50
        flow: true
        auto-spacing: true

  InsideWindow
    id: insideWindowIII
    height: 63
    anchors.top: spellsFlatPanel.bottom
    anchors.left: spellsFlatPanel.left
    anchors.right: spellsFlatPanel.right
    margin-top: 7

  TextEdit
    id: textEdit
    size: 312 25
    font: verdana-11px-rounded
    color: #c8c8c8
    anchors.top: insideWindowIII.bottom
    anchors.right: insideWindowIII.right
    margin-top: 7

  Label
    id: targetLabel
    !text: tr('Target:')
    anchors.top: textEdit.top
    anchors.right: textEdit.left
    margin-top: 4
    margin-right: 7

  HorizontalSeparator
    id: horizontalSeparator
    anchors.top: insideWindow.bottom
    anchors.left: insideWindow.left
    anchors.right: insideWindow.right
    margin-top: 10

  Panel
    id: panel
    size: 216 25
    anchors.top: horizontalSeparator.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 8

  Button
    id: saveButton
    !text: tr('Save')
    size: 95 25
    anchors.top: panel.top
    anchors.left: panel.left
    margin-top: 1
    margin-left: 1
    @onClick: modules.game_interface.onSaveButton()

  Button
    id: cancelButton
    !text: tr('Cancel')
    size: 95 25
    anchors.top: panel.top
    anchors.right: panel.right
    margin-top: 1
    margin-right: 1
    @onClick: modules.game_interface.onCancelButton()
Can you elaborate more? I can't understand what you're trying to do...
What variable should recive the values( name, mana, magic level)? What's the finality?
 
Can you elaborate more? I can't understand what you're trying to do...
What variable should recive the values( name, mana, magic level)? What's the finality?

When you click on a spell, need that fill a variable "x" with their values, because I'll load it on my hotkeys window...

Example, I click on the second spell "Light" then need fill my variables "varNome , varCasting , varMana , varMagic" with their values that are "Light, Instant, 20, "1"


hotkeys.png
 
Last edited:
If I understood you correctly, when you click (check) a spell, this is what gets called: modules.game_interface.onSpellsBoxChecked. Have you tried changing the variables in that function?
 
If I understood you correctly, when you click (check) a spell, this is what gets called: modules.game_interface.onSpellsBoxChecked. Have you tried changing the variables in that function?

Hello Nihilist, thanks for ur answer. I didn't pay attention to that, I think this is the right way!!

In my first post, you can see that have this "nomeSpell:setText(spell.nome)".

  • But how I can get nomeSpell text? Maybe with "nomeSpell:getText()" ?
  • I have a variable with nil value called "nomeSelecionado". How I can put the text above inside her (nomeSelecionado) ?

  • I tried to put this below inside function onSpellsBoxChecked(widget), but I always get the last spell, and not the selected:
Lua:
nomeSelecionado = nomeSpell:getText()
cancelButton:setText(nomeSelecionado)


LUA
Lua:
function onSpellsBoxChecked(widget)
  if widget:isChecked() then
    local spell = widget
    selectedSpell = spell
    -- Some code
  end
end

OTUI
CSS:
SpellsBox < UICheckBox
  font: verdana-11px-rounded
  color: #c8c8c8
  @onCheckChange: modules.game_interface.onSpellsBoxChecked(self)

  InsideWindow
    id: insideWindowSpellsBox
    size: 42 42
    anchors.top: parent.top
    anchors.left: parent.left
    margin-top: 5
    margin-left: 5

  Label
    id: iconeSpell
    font: verdana-11px-rounded
    size: 40 40
    color: #ffffff
    anchors.top: insideWindowSpellsBox.top
    anchors.left: insideWindowSpellsBox.left
    margin-top: 1
    margin-left: 1

  Label
    id: nomeSpell
    font: verdana-11px-rounded
    color: #ffffff
    phantom: true
    anchors.top: insideWindowSpellsBox.top
    anchors.left: insideWindowSpellsBox.right
    margin-top: 5
    margin-left: 5
    text-auto-resize: true

  $checked on:
    background-color: #c8c8c840

  $!checked:
    background-color: alpha

  Label
    id: castingSpell
    font: verdana-11px-rounded
    color: #8c8c8c
    anchors.top: nomeSpell.bottom
    anchors.left: nomeSpell.left
    margin-top: 5
    text-auto-resize: true

  Label
    id: manaSpell
    font: verdana-11px-rounded
    color: #c0c0ff
    anchors.top: nomeSpell.top
    anchors.right: parent.right
    margin-right: 5
    text-auto-resize: true

  Label
    id: magicSpell
    font: verdana-11px-rounded
    color: #82ff82
    anchors.top: manaSpell.bottom
    anchors.right: manaSpell.right
    margin-top: 5
    text-auto-resize: true
 
Last edited:
I got kind of confused with the UICheckBox thing, I might be wrong, but you are better off using something like a VerticalList so you can check which child is focused. You should look up how the character list was created, it can be quite useful.
 
Solution
I got kind of confused with the UICheckBox thing, I might be wrong, but you are better off using something like a VerticalList so you can check which child is focused. You should look up how the character list was created, it can be quite useful.

Thanks you so much Nihilist!! I'll try using this VerticalList
 
Back
Top