OTClient, second right bar, how does anchors work?

[Jessica92]

Hello, I'm new here, you might have seen the global hello thread I made a moment ago so sorry if I'm a "noob" in the forum.

Anyhow I've been working on OTC the last week and trying to learn how to work and build it.
I've came a long way, but I have so much more to learn.

What I need help with now, is to understand anchors, how they work and how to add new ones.

I'm trying to add a second right panel, I've managed to do so pretty fine, except with position of it.
gameinterface.otui:

  GameSidePanel
    id: gameRight2Panel
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    focusable: false
    visible: true
    on: true
    $!on:
      width: 0
      visible: false

I've came to understand that it's the anchors responsibility to make the position accurate but I don't understand them fully.
With the code I gave, my second right panel will appear on top of the original one.

How do I add a new anchor to be side-by-side with the original right-anchor?
Or.. if I'm completely wrong..
How do I add the second right panel properly?

Thank you in advance!

 

[gugu15]

When you create a new widget it already has anchor.
Example

Label
  id: label1
  anchors.left: parent.left
  anchors.top: parent.top
  margin-left: 10
  !text: tr("label1")

Label
  id: label2
  anchors.left: prev.left
  anchors.top: prev.bottom
  margin-top: 5
  !text: tr("text2")

It'll create two new labels, the first will be inside the parent widget(your window or whatever), the second label will be too inside the parent widget but, it's gonna align in the bottom of label1 and the left of label1.

I almost forgot.. In this case, you can align the label2 with label1 this way

anchors.left: label1.left
anchors.top: label1.bottom

If you wanna learn about OTUI, i can tell you to create a new window and create some widgets inside this.
We've some types os anchors, like parent, prev and others(i'm not totally sure).
You can read the code of some modules of otclient, it helped me a lot in the past

 

[Jessica92]

If you wanna learn about OTUI, i can tell you to create a new window and create some widgets inside this.
We've some types os anchors, like parent, prev and others(i'm not totally sure).
You can read the code of some modules of otclient, it helped me a lot in the past

I would love to learn it properly
I've noticed there isn't any good tutorials, not any I could find at least by google.
You gave me a good piece there, I'm just not sure where to put the piece in my experience yet hehe

Could you tell me what I've done wrong here?
gameRight2Panel is the new right panel I'm trying to add, it works but it add itself on top of the primary right panel (hiding EQ/minimap)

PingLabel < GameLabel
  id: pingLabel
  color: #AFAFAF
  text-auto-resize: true
  font: verdana-11px-antialised
  anchors.top: parent.top
  anchors.left: parent.left

FrameCounterLabel < GameLabel
  id: fpsLabel
  text-auto-resize: true
  color: #AFAFAF
  font: verdana-11px-antialised
  anchors.top: pingLabel.bottom
  anchors.left: parent.left

GameSidePanel < UIMiniWindowContainer
  image-source: /images/ui/panel_side
  image-border: 4
  padding: 4
  width: 184
  layout:
    type: verticalBox
    //spacing: 1

GameBottomPanel < Panel
  image-source: /images/ui/panel_bottom
  image-border: 4

GameMapPanel < UIGameMap
  padding: 4
  image-source: /images/ui/panel_map
  image-border: 4

  $on:
    padding: 0

  FrameCounterLabel
  PingLabel

UIWidget
  id: gameRootPanel
  anchors.fill: parent
  anchors.top: parent.top

  GameMapPanel
    id: gameMapPanel
    anchors.left: gameLeftPanel.right
    anchors.right: gameRightPanel.left
    anchors.top: parent.top
    anchors.bottom: gameBottomPanel.top
    focusable: false

  GameBottomPanel
    id: gameBottomPanel
    anchors.left: gameLeftPanel.right
    anchors.right: gameRightPanel.left
    anchors.top: bottomSplitter.top
    anchors.bottom: parent.bottom

  GameSidePanel
    id: gameLeftPanel
    anchors.left: parent.left
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    focusable: false
    visible: true
    on: true
    $!on:
      width: 0
      visible: false

  GameSidePanel
    id: gameRightPanel
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    focusable: false
    on: true

  GameSidePanel
    id: gameRight2Panel
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    focusable: false
    visible: true
    on: true
    $!on:
      width: 0
      visible: false

  Splitter
    id: bottomSplitter
    anchors.left: gameLeftPanel.right
    anchors.right: gameRightPanel.left
    anchors.bottom: parent.bottom
    relative-margin: bottom
    margin-bottom: 172
    @canUpdateMargin: function(self, newMargin) if modules.client_options.getOption('dontStretchShrink') then return self:getMarginBottom() end return math.max(math.min(newMargin, self:getParent():getHeight() - 300), 105) end
    @onGeometryChange: function(self) self:setMarginBottom(math.min(math.max(self:getParent():getHeight() - 300, 105), self:getMarginBottom())) end

  UIWidget
    id: mouseGrabber
    focusable: false
    visible: false

 

[gugu15]

  GameSidePanel
    id: gameRight2Panel
    anchors.right: gameRightPanel.left

 

[Jessica92]

  GameSidePanel
    id: gameRight2Panel
    anchors.right: gameRightPanel.left

Wow, so simple haha.. thank you
So.. one.right and two.left is kind of what something is told where to start drawing itself? if I'm not mistaken (trying to understand the code).

Now the right panel add itself next to the original panel, that's great, but now I experience a new issue, the game window doesn't resize to a smaller size, but the new right panel kind of just add itself ontop of the game window hiding the right side of it.
How do I solve that one without sounding like a moron living under a rock?

 

[margoh]

anchors.right: element2.left

Simply put, it will stick right side of our main element to the left side of element2.

Edit MapPanel to stick to left side of your additional right panel.

 

[Jessica92]

anchors.right: element2.left

Simply put, it will stick right side of our main element to the left side of element2.

Edit MapPanel to stick to left side of your additional right panel.

Thank you so much!
Now I'm starting to understand it a bit more and you guys are really helpful!

My new right panel is working really great now thanks to you both!