Adding content to containers - sizes, margins
First, I'm really new to Control nodes like Containers. So far I've only done the step by step tutorial of the docs.
main problem : I don't understand the behavior of control nodes, how changing some settings auto changes others
Trying to achieve : Panel that shows the base palette of an image with labels like name, percentage of total, etc. Dynamically filled, so panel needs to shrink and grow based on content.
test setup scene tree:
(root) Node2D with script
- AnimatedSprite node
- instanced PalettePanel scene
PalettePanel scene tree (attached):
(root) Panel, full rect layout, x position offset so it always appears on the right side of the sprite. size:
- MarginContainer, center layout, anchors are all 0.5, custom constatns : 4 pixels margins all sides
- HBoxContainer, I want 2 columns at the moment : color rects on the left, percentage labels on the right
- 2 VSplitContainers. This is where a lot happens that I don't get, mainly because I duplicate the color rect and label depending on the amount of unique colors of the sprite.
- first has a color rect, second a label with dynamic font resource
Script (haven't touched panel yet, focusing on the columns right now) :
var palette = get_color_palette(frame0.get_data(), 0) # dictionary. var keys = palette.keys() # Colors var values = palette.values() # integers, amount of pixels with that color var total = 0.0 for val in values: total += val var y = 0 var cr := $Panel/MarginContainer/HBoxContainer/VSplitContainer/ColorRect var lbl := $Panel/MarginContainer/HBoxContainer/VSplitContainer2/Label var v_container2 = $Panel/MarginContainer/HBoxContainer/VSplitContainer2 cr.rect_size = Vector2(16, 3) for key in keys: if y == 0: cr.color = key var val : int= palette.get(key) var percentage : float = (val / total) * 100 lbl.text = str(round(percentage)) + "%" lbl.rect_position = Vector2(0, y * 4) else: var crdup := cr.duplicate() crdup.color = key crdup.rect_position = Vector2(0, y * 4) var lbldup := lbl.duplicate() var val : int= palette.get(key) var percentage : float = (val / total) * 100 lbldup.text = str(round(percentage)) + "%" lbldup.rect_position = Vector2(0, y * 4) v_container.add_child(crdup) v_container2.add_child(lbldup) y += 1!
Now, it does this:
The problem mainly seems to be that first duplicate. I tried adding : crdup.rect_size = Vector2(16, 3), but it ignores it.
Is there some kind of best practice I'm unaware of ? Likem when adding content to a container, update this or that. I tried going up the inheritance tree in the docs from the vsplitcontainer to control node, but am probably missing it.