[open] Custom dialog text "center" placement

[ZombieKnight]

Hi,
I've got this custom dialog code:
Any idea how to align the text into the middle of the game map?

Code: Select all

local narration = {
		T.helptip { id="tooltip_large" }, -- mandatory field
		T.tooltip { id="tooltip_large" }, -- mandatory field
		maximum_height = "(screen_height - 30)",
		maximum_width = "(gamemap_width)",
        horizontal_placement = "left",
        vertical_placement = "bottom",
		vertical_grow = true,
		click_dismiss = true,
		T.grid {
			T.row {
				T.column {
					T.stacked_widget{
						id = "narration_stacked_widget",
						definition = "default",
						T.layer{
							T.row {
								T.column {
									horizontal_alignment = "center",
									grow_factor = 1,
									border = "all",
									border_size = 5,
									T.label {
										definition = "title",
										text_alignment = "center",
										id = "narration_title"
									}
								}
							},
							T.row {
								--grow_factor = 0, --TODO idk what this does
								T.column {
									horizontal_alignment = "center",
									grow_factor = 1,
									border = "all",
									border_size = 5,
									T.label {
										definition = "text",
										text_alignment = "center",
										id = "narration_message"
									}
								}
							}
						}

This is there so the whole message is only on the game map:

Code: Select all

maximum_height = "(screen_height - 30)",
		maximum_width = "(gamemap_width)",
        horizontal_placement = "left",
        vertical_placement = "bottom",

Any idea what to do so the message is in the middle of the screen?

[white_haired_uncle]

This is there so the whole message is only on the game map:

Code: Select all

maximum_height = "(screen_height - 30)",
		maximum_width = "(gamemap_width)",
        horizontal_placement = "left",
        vertical_placement = "bottom",

Any idea what to do so the message is in the middle of the screen?

If your only concern is being centered on the screen (not the non-gamemap portion of the screen), try replacing ALL of the above with:

Code: Select all

maximum_height = "(screen_height - 30)",
		maximum_width = "(2 * gamemap_width - screen_width)",

[ZombieKnight]

If your only concern is being centered on the screen (not the non-gamemap portion of the screen), try replacing ALL of the above with:

Code: Select all

maximum_height = "(screen_height - 30)",
		maximum_width = "(2 * gamemap_width - screen_width)",

No that should be unchanged, that puts the dialog into the left bottom corner(game map)(defines place for the dialog).
How to put the text into the center of the rectagle defined and placed at the start?
...
So the text is in the center of the space reserved at the start.

[white_haired_uncle]

This is probably the idea you want:

Code: Select all

...
                                                T.layer{
                                                        T.row {
                                                                T.column {
                                                                        T.image {
                                                                                id = "empty"
                                                                        }
                                                                }
                                                        }
                                                }
                                        }
                                }
                        }
                }
        }
        local function preshow(dialog)
                dialog.narration_title.marked_up_text = "This is a really, long title.  I mean, it's really long.  Like it takes up the whole game map.  More than the game map.  It's that big.  When your title lies around the house, it lies <span font='italic'>around</span> the house."
                dialog.narration_title.marked_up_text = "This is a short title"
                dialog.narration_message.label = wml.tostring(narration)
                dialog.narration_stacked_widget.empty.label = "images/misc/blank.png~SCALE(2000,1000)"
                dialog.narration_stacked_widget.empty.visible = true 
                dialog.narration_stacked_widget.narration_title.visible = true
        end

But you need to figure out how to set ~SCALE(2000,1000) to the rectangle size. I'm not sure how to access things like gamemap_width in that scope.

[white_haired_uncle]

Better yet, try this:

Code: Select all

                maximum_height = "(gamemap_height)",
                maximum_width = "(gamemap_width)",
                height = "(gamemap_height)",
                width = "(gamemap_width)",
                automatic_placement = false,
                x=0,
                y="(screen_height - gamemap_height)",
                --horizontal_placement = "left",
                --vertical_placement = "bottom",

(no need for blank.png with this option)

[ZombieKnight]

Better yet, try this:

Code: Select all

                maximum_height = "(screen_height - 30)",
                maximum_width = "(gamemap_width)",
                height = "(screen_height - 30)",
                width = "(gamemap_width)",
                automatic_placement = false,
                x=0,
                y=30,
                --horizontal_placement = "left",
                --vertical_placement = "bottom",

(no need for blank.png with this option)

Nope, this puts the message into the horizantal AND vertical center.

[white_haired_uncle]

That's what you asked for

Any idea how to align the text into the middle of the game map?

BTW, see the updated version above that get's rid of the hardcoded "30".

[white_haired_uncle]

You might want to add vertical_alignment="bottom" to the column that contains your stacked_widget

[ZombieKnight]

I'd like to have a defined space (== game map)
And all future positions and alignments position make relative to the game map.
...
Any idea how to achieve that behavior?
So if the dialog has fixed

Code: Select all

fixed width, x
and horizontal_alignment="center"

Or something like that

[ZombieKnight]

But that doesn't work either just like so...
So any idea? (Thanks for still helping even I'm so dumb)

[white_haired_uncle]

The example above is a dialog that is a fixed size (the size of the gamemap) in a fixed location (the location of the gamemap).

[ZombieKnight]

That's what you asked for

Any idea how to align the text into the middle of the game map?

BTW, see the updated version above that get's rid of the hardcoded "30".

Sorry I have somehow missed this message.
Ok... My bad
New question:
How to put dialog on the bottom of the screen, and horizontal_placement in the "center"?
Thanks, sorry for the inclearance.

[white_haired_uncle]

You might want to add vertical_alignment="bottom" to the column that contains your stacked_widget

[ZombieKnight]

You might want to add vertical_alignment="bottom" to the column that contains your stacked_widget

Nope spammed the vertical_placement = "bottom" everywhere, I could
But it didn't affect the dialog at all.

Code: Select all

 local narration = {
		T.helptip { id="tooltip_large" }, -- mandatory field
		T.tooltip { id="tooltip_large" }, -- mandatory field
		maximum_height = "(screen_height - 30)",
		maximum_width = "(gamemap_width)",
		height = "(screen_height - 30)",
		x=0,
        y=30,
		width = "(gamemap_width)",
		automatic_placement = false,
        -- horizontal_placement = "left",
        -- vertical_placement = "bottom",
		vertical_grow = true,
		click_dismiss = true,
		T.grid {
			vertical_placement = "bottom",
			horizontal_alignment = "center",
			T.row {
				T.column {
					vertical_placement = "bottom",
					horizontal_alignment = "center",
					T.stacked_widget{
						id = "narration_stacked_widget",
						definition = "default",
						T.layer{
							T.row {
								T.column {
									vertical_placement = "bottom",
									horizontal_alignment = "center",
									grow_factor = 1,
									border = "all",
									border_size = 5,
									T.label {
										definition = "title",
										text_alignment = "center",
										id = "narration_title"
									}
								}
							},

Also, your approach makes the dialog display in the center of the screen, not in the center of the map.
Do you know what's not working/ what am I missing/ how to solve it?

[white_haired_uncle]

I said vertical_alignment. Like this:

Code: Select all

                                T.column {
                                        vertical_alignment="bottom",
                                        T.stacked_widget{
                                                id = "narration_stacked_widget",

And mine is centered horizontally in the gamemap (as it should be, because that's the center of the dialog too).

Of course, if you end up with a scrollbar you need to move the scrollbar to the center for the text to be in the center.

And I suggest you do this instead of hardcoding the "30". I don't know if 30 depends on the current resolution or not, but this doesn't:

Code: Select all

                maximum_height = "(gamemap_height)",
                maximum_width = "(gamemap_width)",
                height = "(gamemap_height)",
                width = "(gamemap_width)",
                automatic_placement = false,
                x=0,
                y="(screen_height - gamemap_height)",

Code: Select all

function  wesnoth.wml_actions.my_narration()
        local narration = {
                T.helptip { id="tooltip_large" }, -- mandatory field
                T.tooltip { id="tooltip_large" }, -- mandatory field
                maximum_height = "(gamemap_height)",
                maximum_width = "(gamemap_width)",
                height = "(gamemap_height)",
                width = "(gamemap_width)",
                automatic_placement = false,
                x=0,
                y="(screen_height-gamemap_height)",
                vertical_grow = true,
                click_dismiss = true,
                T.grid {
                        T.row {
                                T.column {
                                        vertical_alignment="bottom",
                                        T.stacked_widget{
                                                id = "narration_stacked_widget",
                                                definition = "default",
                                                T.layer{
                                                        T.row { 
                                                                T.column {
                                                                        horizontal_alignment = "center",
                                                                        grow_factor = 1,
                                                                        border = "all",
                                                                        border_size = 5,
                                                                        T.label {
                                                                                definition = "title",
                                                                                text_alignment = "center",
                                                                                id = "narration_title"
                                                                        }
                                                                }
                                                        },
                                                       T.row {
                                                                --grow_factor = 0, --TODO idk what this does
                                                                T.column {
                                                                        horizontal_alignment = "center",
                                                                        grow_factor = 1,
                                                                        border = "all",
                                                                        border_size = 5,
                                                                        T.label {
                                                                                definition = "text",
                                                                                text_alignment = "center",
                                                                                id = "narration_message"
                                                                        }
                                                                }
                                                        }
                                                },
                                        }
                                }
                        }
                }
        }
        local function preshow(dialog)
                dialog.narration_title.marked_up_text = "This is a really long title.  I mean, it's really, really and truly long.  Like it takes up the whole game map.  More than the game map.  It's that big.  When your title lies around the house, it lies <span font='italic'>around</span> the house."
--              dialog.narration_title.marked_up_text = "This is a short title"
--              dialog.narration_message.label = wml.tostring(narration)
                dialog.narration_message.label = "this is a short message"
                dialog.narration_stacked_widget.narration_title.visible = true
        end
        gui.show_dialog(narration,preshow)
end

(There's no reason to use stacked_widget in my example, I'm just copying yours)