Set Width to Text Length

circonian · 08/16/14, 06:29 AM

What I'm trying to do:
I'm creating a variable sized window, with a variable amount of buttons inside of it, which have text of varied lengths. I was just curious if there is an easy way to get the width of the text inside of a button. So that if the width of the text changes, due to font/size changes the button text changes, I can reset the width of ALL of the buttons.

Right now I'm just grabbing the string length of every buttons text & 'roughly estimating' the width needed for the buttons, but it seemed like there should be an easier way for something like this.

If it helps, this is what I'm doing:

Lua Code:

-- Create the parent window --
local function CreateQuickClickWindow()
    if not Click4Info.QuickClickWindow then
        Click4Info.QuickClickWindow = WINDOW_MANAGER:CreateTopLevelWindow("Click4InfoQuickClickWindow")
        local qcWin = Click4Info.QuickClickWindow
        qcWin:SetDimensions(windowWidth, ((#QuickClickCommands+1) * Click4Info.QuickClickButtonHeight))
        qcWin:ClearAnchors()
        qcWin:SetAnchor(TOPLEFT, GuiRoot, TOPLEFT, Click4Info.QuickClickOffsetX, Click4Info.QuickClickOffsetY)
        qcWin:SetHidden(false)    
        qcWin:SetMovable(true)
        qcWin:SetMouseEnabled(true)
        qcWin:SetClampedToScreen(true)    
 
        qcWinBG = WINDOW_MANAGER:CreateControlFromVirtual("Click4InfoQuickClickWindowBG", qcWin, "ZO_DefaultBackdrop")
        qcWinBG:ClearAnchors()
        qcWinBG:SetAnchorFill(qcWin)
    end
end

and create buttons like this:

Lua Code:

-- Create the Buttons --
local function CreateQuickClickButtons()
    for i = 1, #QuickClickCommands do
        local button = CreateControlFromVirtual("Click4InfoQuickClickButton", Click4Info.QuickClickWindow, "ZO_BladeHeader", i)
        button:SetHidden(false)    
        button:ClearAnchors()
        button:SetDimensions(windowWidth, Click4Info.QuickClickButtonHeight)
        button:SetAnchor(TOPLEFT, Click4Info.QuickClickWindow, TOPLEFT, 0, Click4Info.QuickClickButtonHeight * (i-1))
        button:SetText("    "..QuickClickCommands[i])
        if i == 1 then
            button:SetHandler("OnClicked", function() Click4Info.freeMouse = (not Click4Info.freeMouse) end)
        else
            button:SetHandler("OnClicked", function() QuickClickBtnClick(i) end)
        end
        button:SetHorizontalAlignment(TEXT_ALIGN_LEFT) 
    end
end

XML:

xml Code:

<GuiXml>
    <Controls>
        <Button name="MY_BladeHeader" font="ZoFontGame" endCapWidth="22" verticalAlignment="LEFT" virtual="true">
        
            <Dimensions x="200" y="28"/>
            <PressedOffset x="2" y="2" />
 
            <OnInitialized>
                ZO_ToggleButton_Initialize(self, TOGGLE_BUTTON_TYPE_BLADE)
            </OnInitialized>
            
            <OnClicked>
                ZO_CheckButton_OnClicked(self, button)
            </OnClicked>
                    
            <FontColors
                normalColor="INTERFACE_COLOR_TYPE_TEXT_COLORS:INTERFACE_TEXT_COLOR_NORMAL"
                pressedColor="INTERFACE_COLOR_TYPE_TEXT_COLORS:INTERFACE_TEXT_COLOR_SELECTED"
                mouseOverColor="INTERFACE_COLOR_TYPE_TEXT_COLORS:INTERFACE_TEXT_COLOR_HIGHLIGHT"
                disabledColor="INTERFACE_COLOR_TYPE_TEXT_COLORS:INTERFACE_TEXT_COLOR_DISABLED"
            />
        </Button>
                
    </Controls>
</GuiXml>

merlight · 08/16/14, 07:28 AM

I have not tried this, just thinking. It depends on the button template you use.

If it's a <Control> with the text as a child <Label>, you could try setting resizeToFitDescendents="true" on the parent, and resize all labels to the width of the widest.

If it's a <Button>, it should have GetDesiredWidth methods. From the name I'd expect GetDesiredWidth to give me how wide the button wants to be to fit the text, then I'd set all buttons' width to the maximum value. Or if that fails, GetLabelControl and use the first method on that.

edit: just noticed the template is <Button name="ZO_BladeHeader" ... nvm

I'll go try that

circonian · 08/16/14, 07:51 AM

Originally Posted by merlight

I have not tried this, just thinking. It depends on the button template you use.

If it's a <Control> with the text as a child <Label>, you could try setting resizeToFitDescendents="true" on the parent, and resize all labels to the width of the widest.

If it's a <Button>, it should have GetDesiredWidth methods. From the name I'd expect GetDesiredWidth to give me how wide the button wants to be to fit the text, then I'd set all buttons' width to the maximum value. Or if that fails, GetLabelControl and use the first method on that.

edit: just noticed the template is <Button name="ZO_BladeHeader" ... nvm

I'll go try that

I added the xml code above in case it helps.
I tried the desired width. Even if I take the SetDimensions out and the dimension tag from the xml it comes back with a desired width of 200 regardless of the text inside the button.

P.S.
I've seen people do posts where they had code hidden & you had to click a button to view it...how do you do that, anyone know?

merlight · 08/16/14, 08:32 AM

Originally Posted by circonian

I added the xml code above in case it helps.
I tried the desired width. Even if I take the SetDimensions out and the dimension tag from the xml it comes back with a desired width of 200 regardless of the text inside the button.

Yea I've learned that now, too

Originally Posted by circonian

P.S.
I've seen people do posts where they had code hidden & you had to click a button to view it...how do you do that, anyone know?

[ spoiler ]

I tried GetLabelControl:GetTextWidth(). I created two buttons under FPS window, and a "/qlick index text" slash command to change the text. They seem to resize correctly. Another option would be to anchor TOPRIGHT of each button to the previous button's BOTTOMRIGHT, and then only resize the first button.

Warning: Spoiler

circonian · 08/17/14, 06:18 AM

Originally Posted by merlight

Yea I've learned that now, too

[ spoiler ]

I tried GetLabelControl:GetTextWidth(). I created two buttons under FPS window, and a "/qlick index text" slash command to change the text. They seem to resize correctly. Another option would be to anchor TOPRIGHT of each button to the previous button's BOTTOMRIGHT, and then only resize the first button.

Warning: Spoiler

Thanks for your help. I still can't get it to work though.
I think I narrowed it down. (in the above discussion we mentioned that) We found out if we did not set a button dimension it defaulted to a width of 200...and it seems that the GetLabelControl():GetTextWidth() only works if the text actually fits in the button (so without a dimension that constrains it to a text width < 200).

I even tried copy & pasting your work, and if button text is longer than 200 it seems to not work when loading up. Even if I run the resizer manually after the game loads (through /znb) I have to run it 3-4 times before the buttons get to the proper size.

It appears that even the GetTextWidth() is limited by the button size? ...if any of that makes any sense to you.

I removed the calls on initialize & ran the create buttons after the game loaded to see what values the GetTextWidth() function was getting when the function ran, heres what the code looked like:

Warning: Spoiler

and heres the output:

Which would be why the resize isn't working when it starts up. Those are not the correct text widths. Since you added +40 to the text width in your resize function is the only reason resize worked (after 3-4 times) because it kept increasing the button width by 40 until it got to where it was supposed to be. If I remove the +40 I can run the resize over & over and the width of the buttons never change.

merlight · 08/17/14, 07:43 AM

I added +40 as padding (using SetNormalOffsets(20, 0) I set left padding to 20; so another 20 for the right). Now I found another text width function, try this:

Lua Code:

local label = button:GetLabelControl()
maxWidth = math.max(maxWidth, label:GetStringWidth(label:GetText()))

circonian · 08/17/14, 04:40 PM

Originally Posted by merlight

I added +40 as padding (using SetNormalOffsets(20, 0) I set left padding to 20; so another 20 for the right). Now I found another text width function, try this:

Lua Code:

local label = button:GetLabelControl()
maxWidth = math.max(maxWidth, label:GetStringWidth(label:GetText()))

Nope they came out even smaller. Thats ok though, It was more of a curiousity thing I thought there was an easy/obvious way I didn't know. I just took the easy route & cheated. I resized the button to an extremely large width & then read the string length to find the maxWidth:

Lua Code:

local function ResizeQuickClickButtons()  
    local maxWidth = 0
    for i, button in ipairs(QuickClickButtons) do
 
-- Make sure its big enough for the entire string --
        button:SetWidth(2000)
 
-- and then read the textWidth --
        local textWidth = button:GetLabelControl():GetTextWidth()
 
        maxWidth = math.max(maxWidth, textWidth)
    end
 
-- Then resize then to the proper size --
    for i, button in ipairs(QuickClickButtons) do
        button:SetWidth(maxWidth+20)
    end
end

Thanks for your help.

merlight · 08/17/14, 05:27 PM

Originally Posted by circonian

Nope they came out even smaller.

No way! Really I tried that and for me c:GetStringWidth(c:GetText()) returned 307 with some long text, when c:GetTextWidth() returned 193. I added the padding and that was it.

circonian · 08/18/14, 05:47 AM

Originally Posted by merlight

No way! Really I tried that and for me c:GetStringWidth(c:GetText()) returned 307 with some long text, when c:GetTextWidth() returned 193. I added the padding and that was it.

I'm glad you responded...and you were right. I don't know what happened last time, but I tried it again & it worked this time. Now I know how to handle it for later cases..thank you very much for the help.