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

Helliot1

Owner of Empire Online
Joined
Jul 26, 2017
Messages
315
Solutions
1
Reaction score
58
I need put a scrollbar on these 2 tabbar (Skills and Talents), but I want that scrollbar appears on the main window (abilities).

Somebody have any idea how I can do it ?

I already tried put a scrollbar on abilities window, to control skills and talents window, but it don't works because they are in separates otui files.

I have ablities.otui that are my main file, and the skills.otui and talents.otui that are from tabbar...

abilities-scrollbar.png
 
You might need to edit abilities.otui to add the scrollbar before adding these elements and then anchor them beside together (the tab panel and the scroll bar.)

abilitiesTabPanel.anchorRight = scrollBar.anchorLeft
and then the rest of anchors to their respective parents (down -> parent.anchorDown)

And then use scrollBar as scrollBar for both (that option might work if your scrollbar is fixed).
Otherwise just create two scrollBars and switch between them when the tab is changed)

Sincerely,
Slavi
 
You might need to edit abilities.otui to add the scrollbar before adding these elements and then anchor them beside together (the tab panel and the scroll bar.)

abilitiesTabPanel.anchorRight = scrollBar.anchorLeft
and then the rest of anchors to their respective parents (down -> parent.anchorDown)

And then use scrollBar as scrollBar for both (that option might work if your scrollbar is fixed).
Otherwise just create two scrollBars and switch between them when the tab is changed)

Sincerely,
Slavi

Hello Slavi, thank you very much for helping me!!

I did it right? Because it didn't work :(

abilities.otui
CSS:
MiniWindow
  id: abilitiesWindow
  height: 50
  !text: tr('Abilities')
  &save: true

  InsideWindow
    id: InsideWindow2
    image-border: 2
    size: 132 20
    anchors.top: parent.top
    anchors.left: parent.left
    margin-left: 8
    margin-top: 25

  VerticalScrollBar
    id: abilitiesScrollBar
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    step: 14
    margin-top: 19
    margin-right: 1
    margin-bottom: 11
    pixels-scroll: true

  TabBarVerticalHabilidades
    id: abilitiesTabBar
    size: 142 18
    anchors.top: abilitiesScrollBar.top
    anchors.right: abilitiesScrollBar.left
    margin-top: 7
    margin-left: 26

  ScrollablePanel
    id: contentsPanel
    anchors.top: abilitiesScrollBar.top
    anchors.bottom: abilitiesScrollBar.bottom
    anchors.left: parent.left
    anchors.right: abilitiesScrollBar.right
    margin-top: 30
    margin-bottom: 0
    margin-left: 8
    margin-right: 24

skills.otui
CSS:
HealthBar < ProgressBar

ManaBar < ProgressBar

ExperienceBar < ProgressBar
  margin-top: -6

SkillButton < UIButton
  height: 21
  margin-bottom: 2

SkillNameLabel < GameLabel
  font: verdana-11px-rounded
  color: #c8c8aa
  anchors.left: parent.left
  anchors.top: parent.top
  anchors.bottom: parent.bottom

SkillValueLabel < GameLabel
  id: value
  font: verdana-11px-rounded
  color: #c8c8aa
  text-align: topright
  anchors.right: parent.right
  anchors.top: parent.top
  anchors.bottom: parent.bottom
  anchors.left: prev.left

SkillPercentPanel < ProgressBar
  id: percent
  background-color: #007800
  height: 5
  margin-top: 15
  anchors.left: parent.left
  anchors.right: parent.right
  anchors.top: parent.top
  phantom: false

ScrollablePanel
  id: skillsPanel
  vertical-scrollbar: abilitiesScrollBar

  InsideWindow
    id: insideWindow
    image-border: 3
    padding-left: 5
    padding-right: 5
    padding-top: 5
    margin-bottom: 7
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right

  ScrollablePanel
    anchors.top: insideWindow.top
    anchors.bottom: parent.bottom
    anchors.left: insideWindow.left
    anchors.right: insideWindow.right
    margin-top: 5
    margin-bottom: 8
    margin-left: 5
    margin-right: 5
    layout: verticalBox

    SkillButton
      id: health
      height: 11
      SkillNameLabel
        !text: tr('Health')
        margin-top: -1
      SkillValueLabel
        margin-top: -1

    HealthBar
      id: healthBar
      size: 120 5
      background-color: #AA0000
      InsideWindow
        size: 120 5
        image-border: 3
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right

    SkillButton
      id: mana
      height: 11
      SkillNameLabel
        !text: tr('Mana')
        margin-top: -1
      SkillValueLabel
        margin-top: -1
      margin-top: 5

    ManaBar
      id: manaBar
      size: 120 5
      background-color: #0000AA
      InsideWindow
        size: 120 5
        image-border: 3
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right

    SkillButton
      id: level
      height: 15
      SkillNameLabel
        !text: tr('Level')
        margin-top: -1
      SkillValueLabel
      margin-top: 5

    SkillButton
      id: experience
      SkillNameLabel
        !text: tr('Experience')
      SkillValueLabel
        margin-top: -3

    ExperienceBar
      id: experienceBar
      size: 120 5
      background-color: #007800
      InsideWindow
        size: 120 5
        image-border: 3
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right

    Label
      height: 5
      margin-top: 8
      HorizontalSeparator
        id: HorizontalSeparator
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top

    SkillButton
      id: magiclevel
      SkillNameLabel
        !text: tr('Magic Level')
      SkillValueLabel
        color: red
      SkillPercentPanel
        background-color: #007800
        InsideWindow
          size: 120 5
          image-border: 3
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: parent.left
          anchors.right: parent.right

    SkillButton
      id: skillId0
      SkillNameLabel
        !text: tr('Fist Fighting')
      SkillValueLabel
      SkillPercentPanel
      visible: false

    SkillButton
      id: skillId1
      SkillNameLabel
        !text: tr('Club Fighting')
      SkillValueLabel
      SkillPercentPanel
      visible: false

    SkillButton
      id: skillId2
      SkillNameLabel
        !text: tr('Melee')
      SkillValueLabel
      SkillPercentPanel
        InsideWindow
          size: 120 5
          image-border: 3
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: parent.left
          anchors.right: parent.right

    SkillButton
      id: skillId3
      SkillNameLabel
        !text: tr('Axe Fighting')
      SkillValueLabel
      SkillPercentPanel
      visible: false

    SkillButton
      id: skillId4
      SkillNameLabel
        !text: tr('Distance')
      SkillValueLabel
      SkillPercentPanel
        InsideWindow
          size: 120 5
          image-border: 3
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: parent.left
          anchors.right: parent.right

    SkillButton
      id: skillId5
      SkillNameLabel
        !text: tr('Defending')
      SkillValueLabel
      SkillPercentPanel
        InsideWindow
          size: 120 5
          image-border: 3
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: parent.left
          anchors.right: parent.right

    Label
      margin-top: 3
      HorizontalSeparator
        id: HorizontalSeparator
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top

    SkillButton
      id: skillId6
      margin-top: -8
      SkillNameLabel
        !text: tr('Fishing')
      SkillValueLabel
        !text: tr('0')
      SkillPercentPanel
        background-color: #787800
        InsideWindow
          size: 120 5
          image-border: 3
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: parent.left
          anchors.right: parent.right

    SkillButton
      SkillNameLabel
        !text: tr('Gathering')
      SkillValueLabel
        !text: tr('0')
      SkillPercentPanel
        background-color: #787800
        InsideWindow
          size: 120 5
          image-border: 3
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: parent.left
          anchors.right: parent.right

    SkillButton
      SkillNameLabel
        !text: tr('Brewing')
      SkillValueLabel
        !text: tr('0')
      SkillPercentPanel
        background-color: #787800
        InsideWindow
          size: 120 5
          image-border: 3
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: parent.left
          anchors.right: parent.right
 
Back
Top