Solved Resizing CUI panels? (CuiRectTransform of child elements ignored)

I have been messing around for a bit now and I am able to successfully use the CuiHelper to create ui elements. However I can't seem to find how to resize a panel or other element. I have looked into other plugins their code and searched the forum, but am unable to determine how they achieve this or find a relevant thread. Could someone point me in the right direction?

Thank you in advance.

If it might help I have added the code I currently use in the function below.

Code:

var elementContainer = new CuiElementContainer();
            var panel = elementContainer.Add(new CuiPanel {
                RectTransform = {
                    AnchorMin = "0.12 0.12",
                    AnchorMax = "0.16 0.12",
                    OffsetMin = "0 0",
                    OffsetMax = "0 0"
                },
                Image = {
                    Color = "1 1 1 0"
                }
            }, "Hud", mainPanelName);            var backgroundActive = new CuiElement {
                Name = CuiHelper.GetGuid(),
                Parent = panel,
                Components = {
                    new CuiRectTransformComponent {
                        AnchorMin = "0 0",
                        AnchorMax = "0 0",
                        OffsetMin = "0 0",
                        OffsetMax = "0 0"
                    },
                    new CuiImageComponent {
                        Color = baseColour
                    }
                }
            };
            elementContainer.Add(backgroundActive);
            CuiHelper.AddUi(player, elementContainer);

 

You would change the anchor min and anchor max to what you want. If I were you I would just mess around with those values till it works - anchor min and max each have two values - anchoe min: "v1 v2" ! anchor max: "v3 v4". Economics gui balance has a picture of how it works(google it instead of oxide plugin search )

 

Thank you for your reply Dylan and especially for the image explaining the anchors. It turned out that resizing anchor values of the CuiImageComponent for a CuiElement does not resize that field. However changing the anchor points if the CuiPanel does work, so I am currently just using that which is enough for now.

 

The cui element anchors are relative to its host, so if you have a min 0 0 max 0.5 0.5 parent (bottom left quarter of the screen), a min 0 0 max 1 1 child will only occupy that space.

By the way im surprised that your first script displayed anything as the panel's anchor's min and max Y are the same (0.12) which means 0 height.

 

So I have advanced a bit in the development of the plugin, however I still have the same issue. When I change the anchor points of a CuiPanel it works, but when I change the anchor points of a child CuiElement of the panel it does not change. The colour is visible, but only as a square even though I have set the anchor points up in such a way that it should be a rectangle.

The code below shows a rectangle taking up the bottom left of the square covering a quarter in red, which is great. It also shows a blue square in the centre of it. I know that this should be a smaller thinner rectangle.

Code:

private void TestUi(BasePlayer player) {
    CuiElementContainer container = new CuiElementContainer();    string panelName = container.Add(new CuiPanel {
        RectTransform = {
            AnchorMin = "0 0",
            AnchorMax = "0.5 0.5",
            OffsetMin = "0 0",
            OffsetMax = "0 0"
        },
        Image = {
            Color = "1 0 0 1"
        },
        CursorEnabled = false
    }, "Hud", "TestUi");    container.Add(new CuiElement {
        Name = CuiHelper.GetGuid(),
        Parent = panelName,
        Components = {
            new CuiRectTransformComponent {
                AnchorMin = "0 0",
                AnchorMax = "0.1 0.05",
                OffsetMin = "0 0",
                OffsetMax = "0 0"
            },
            new CuiImageComponent {
                Color = "0 0 1 0.5"
            }
        }
    });    CuiHelper.AddUi(player, container);
}

Even if the coordinates of the parent panel are set that way the child element is still visible as the same size square and does not seem influenced by it.

Any ideas on what the issue might be?
[DOUBLEPOST=1471375393][/DOUBLEPOST]For extra clarification I have linked to a screenshot that is the result of the function above.

Image link!

 

Ah, it seems you're not linking the child element to its parent. You're adding both to container, via "Container.Add", but with no relation to each other.

One use is :

Code:

container.Add(element, strNameOfParent, strNameOfThisElement)

Afaik, the line Name = CuiHelper.GetGuid() gives an automatic string name to your element, but I prefer to manually set my elements names. This could cause conflict with other plugins, but as long as you use explicit names such as "myModName_background" you should have no problem.

So, to add and name your 'home' element to the container, you do :

Code:

container.Add(myBackgroundElement, "Overlay", "myUIBackgroundName");

("Overlay" being the base UI element afaik)

Then to a add a child to it :

Code:

container.Add(myChildElement, "myUIBackgroundName", "myChildElementName");

You should have your child element in your home element now, with its position accordingly relative.

(edit : improved anwser)

 

Thanks for the help, however I now get the error can't convert from CuiElement to CuiButton since the function Add only supports adding elements without specifying the latter information of parent and name. Plus the code of other plugins I have looked into don't specify that either and just add the element.

Edit:
In addition it also seems that a CuiElement with the CuiTextComponent instead of a CuiImageComponent will result in the same problems. It looks like the CuiRectTransformComponent is completly ignored and all values of it set to their defaults instead.

 

What I ended up doing is directly using the CuiLabel and CuiPanel instead of creating CuiElements. This works and the data from RectTransform is used correctly.

 

To come back to this I am now able to use CuiElements. The issues was the order in which you add the components to the CuiElement. You need to fill in the CuiRectTransformComponent after the other component, eg: CuiImageComponent, or CuiTextComponent.