Tempered7
July 5th, 2025, 21:36
# TL;DR
"Anchoring. Learn it!" ~damned, "Basic Extension Coding Tutorial (https://www.youtube.com/watch?v=R_CulFJYs-M&list=PLsgd1zJLdiKVbJg6KJv668LyJXmfk25Yv)."
If you're at zero-level of coding like me, and did not understand Anchoring (https://fantasygroundsunity.atlassian.net/wiki/spaces/FGCP/pages/996644483/Ruleset+-+Interfaces+Windows+Panels+Widgets#Anchoring) under Ruleset - Interfaces (Windows, Panels, Widgets) (https://fantasygroundsunity.atlassian.net/wiki/x/g5ZnOw), here's the simplified guide mostly for my own reference. I'm just learning with you, so there can be mistakes. If you poke me, I can edit to fix them.
So. As far as I understand, anchoring helps your "controls" stay in place, even when other things move or resize. You use the <anchored> tag to set where each edge of your control is pinned, and maybe add offsets -more on offsets later. Then after all the other parameters is written, you close it with </anchored> tag. You can also specify a fixed size. Without learning it, you can't possibly tie your controls to each other.
Controls = Texts, images, and other thingies with "<coding-spell runes>". :D
# What is Anchoring?
In Fantasy Grounds, when you (struggle to) design a window or layout, you put controls (buttons, text fields, images, etc.) inside it.
Anchoring means tying the edges of these controls to other controls or to the edges of a window, so they know where to appear and how big to be.
The moment I can actually achieve adding a "subtext" with <stringcontrol name="column1_subtext1"> under an anchor to <stringfield name="column1_label"> I will add the code in an edit. It was suppose to look like below table within a window;
Label
Subtext 1
Then the Label 2 can be anchored in relation to (to the right side of) Label 1; Label 3 anchored to the right side of Label 2.... and so on. To make a table but in window form.
Subtexts also follow the same anchoring rules with different tags. You can find all these tags in the links above.
But anchoring is not just limited to text or columns.
64739
Think of it like pinning a sticky note (control) to a wall (another control):
* You can pin the top of the "sticky note" (i.e: New 'Clan' Field) to the top of a window (i.e: Notes tab in Char Sheet).
* You can pin the left side to the right edge of another sticky note.
* You can also decide if the sticky note should stretch with the window or stay the same size.
## How anchoring works
For each side (left, top, right, bottom) of your control, you can:
* Choose what to pin it to (another control, or to the window itself).
* Choose which edge of that target control it should align with.
* Set an offset (how many pixels away from that target edge -which requires mathemagic).
Note: Refer to the image (http://blob:https://fantasygroundsunity.atlassian.net/751406ac-602e-4797-856a-e9a3ac45d7e6#media-blob-url=true&id=b4c8204b-ef44-426d-a8b7-9f31a02cf5b7&collection=contentId-996644483&contextId=996644483&mimeType=image%2Fpng&name=anchors-20250528-183910.png&size=18895&width=556&height=556&alt=anchors-20250528-183910.png) in "Ruleset - Interfaces (Windows, Panels, Widgets)" right under "Anchoring" section to learn the Wizard lingo for what each side of a screen is called. These will be required to define where exactly you want to anchor a control.
### Note on offset:
* The offset tells FGU to move the anchored control a little bit further away or closer from that anchor point.
Continuing from "post-it" analogy:
* The anchor says where to stick it (i.e: the left edge of your post-it should line up with the right edge of your calendar).
* The offset says “and then move it a bit to the right, left, up, or down.”
* A positive offset means: move right (for left/right edges) or down (for top/bottom edges).
* A negative offset means: move left or up. And differed from positive offset values with a minus " - " in front of the (negative) offset value.
Do note that a resizable window in FGU can only be stretched to the right or bottom edge (or both) but not to the left and top. CTRL + Left click inside a window resizes it easily. Or you can bring your cursor to the right or bottom right of the window, see the "resize arrow" and drag.
Another example:
* Anchor the left side of your control (text, etc.) to the right side of a label, and set an offset of 5 pixels → your control will be placed 5 pixels to the right of the label.
* Anchor the top of your control to the top of the window, with an offset of 5 pixels → it’ll sit 5 pixels below the top edge.
## Size
You can set a fixed size for your control: Using width and height attributes. Or by adding a <size> tag with width and/or height inside.
* If you don’t set both left & right anchors (or don’t set a width), the control may size itself based on its content (for example, a text label growing as text grows).
### Example Explained
The following two definitions place the control to the right of another control called "label", with the top of the control being 5 pixels from the top of the window. The size of the control is 30 pixels by 22 pixels.
Place "the control you want to anchor" to the right of another control called "label"
* You anchor the left edge of your control to the right edge of the control named label.
Top of the control being 5 pixels from the top of the window
* You anchor the top edge of your control to the top of the window, with an offset of 5 pixels.
“The size of the control is 30 pixels by 22 pixels”
* You set width=30 and height=22.
# Simple Code
Hopefully coming soon as soon as I do it right...
TL;DR on the difference of: stringfield is designed to work with database fields, allowing for dynamic data retrieval and display, while stringcontrol is more suited for static text display without direct database interaction.
"Anchoring. Learn it!" ~damned, "Basic Extension Coding Tutorial (https://www.youtube.com/watch?v=R_CulFJYs-M&list=PLsgd1zJLdiKVbJg6KJv668LyJXmfk25Yv)."
If you're at zero-level of coding like me, and did not understand Anchoring (https://fantasygroundsunity.atlassian.net/wiki/spaces/FGCP/pages/996644483/Ruleset+-+Interfaces+Windows+Panels+Widgets#Anchoring) under Ruleset - Interfaces (Windows, Panels, Widgets) (https://fantasygroundsunity.atlassian.net/wiki/x/g5ZnOw), here's the simplified guide mostly for my own reference. I'm just learning with you, so there can be mistakes. If you poke me, I can edit to fix them.
So. As far as I understand, anchoring helps your "controls" stay in place, even when other things move or resize. You use the <anchored> tag to set where each edge of your control is pinned, and maybe add offsets -more on offsets later. Then after all the other parameters is written, you close it with </anchored> tag. You can also specify a fixed size. Without learning it, you can't possibly tie your controls to each other.
Controls = Texts, images, and other thingies with "<coding-spell runes>". :D
# What is Anchoring?
In Fantasy Grounds, when you (struggle to) design a window or layout, you put controls (buttons, text fields, images, etc.) inside it.
Anchoring means tying the edges of these controls to other controls or to the edges of a window, so they know where to appear and how big to be.
The moment I can actually achieve adding a "subtext" with <stringcontrol name="column1_subtext1"> under an anchor to <stringfield name="column1_label"> I will add the code in an edit. It was suppose to look like below table within a window;
Label
Subtext 1
Then the Label 2 can be anchored in relation to (to the right side of) Label 1; Label 3 anchored to the right side of Label 2.... and so on. To make a table but in window form.
Subtexts also follow the same anchoring rules with different tags. You can find all these tags in the links above.
But anchoring is not just limited to text or columns.
64739
Think of it like pinning a sticky note (control) to a wall (another control):
* You can pin the top of the "sticky note" (i.e: New 'Clan' Field) to the top of a window (i.e: Notes tab in Char Sheet).
* You can pin the left side to the right edge of another sticky note.
* You can also decide if the sticky note should stretch with the window or stay the same size.
## How anchoring works
For each side (left, top, right, bottom) of your control, you can:
* Choose what to pin it to (another control, or to the window itself).
* Choose which edge of that target control it should align with.
* Set an offset (how many pixels away from that target edge -which requires mathemagic).
Note: Refer to the image (http://blob:https://fantasygroundsunity.atlassian.net/751406ac-602e-4797-856a-e9a3ac45d7e6#media-blob-url=true&id=b4c8204b-ef44-426d-a8b7-9f31a02cf5b7&collection=contentId-996644483&contextId=996644483&mimeType=image%2Fpng&name=anchors-20250528-183910.png&size=18895&width=556&height=556&alt=anchors-20250528-183910.png) in "Ruleset - Interfaces (Windows, Panels, Widgets)" right under "Anchoring" section to learn the Wizard lingo for what each side of a screen is called. These will be required to define where exactly you want to anchor a control.
### Note on offset:
* The offset tells FGU to move the anchored control a little bit further away or closer from that anchor point.
Continuing from "post-it" analogy:
* The anchor says where to stick it (i.e: the left edge of your post-it should line up with the right edge of your calendar).
* The offset says “and then move it a bit to the right, left, up, or down.”
* A positive offset means: move right (for left/right edges) or down (for top/bottom edges).
* A negative offset means: move left or up. And differed from positive offset values with a minus " - " in front of the (negative) offset value.
Do note that a resizable window in FGU can only be stretched to the right or bottom edge (or both) but not to the left and top. CTRL + Left click inside a window resizes it easily. Or you can bring your cursor to the right or bottom right of the window, see the "resize arrow" and drag.
Another example:
* Anchor the left side of your control (text, etc.) to the right side of a label, and set an offset of 5 pixels → your control will be placed 5 pixels to the right of the label.
* Anchor the top of your control to the top of the window, with an offset of 5 pixels → it’ll sit 5 pixels below the top edge.
## Size
You can set a fixed size for your control: Using width and height attributes. Or by adding a <size> tag with width and/or height inside.
* If you don’t set both left & right anchors (or don’t set a width), the control may size itself based on its content (for example, a text label growing as text grows).
### Example Explained
The following two definitions place the control to the right of another control called "label", with the top of the control being 5 pixels from the top of the window. The size of the control is 30 pixels by 22 pixels.
Place "the control you want to anchor" to the right of another control called "label"
* You anchor the left edge of your control to the right edge of the control named label.
Top of the control being 5 pixels from the top of the window
* You anchor the top edge of your control to the top of the window, with an offset of 5 pixels.
“The size of the control is 30 pixels by 22 pixels”
* You set width=30 and height=22.
# Simple Code
Hopefully coming soon as soon as I do it right...
TL;DR on the difference of: stringfield is designed to work with database fields, allowing for dynamic data retrieval and display, while stringcontrol is more suited for static text display without direct database interaction.