font size

[MoonWitch]

Hello,

Me again :P

Phanx, I think this one is ideal for you :P

For a friend of mine, I'm writing a "clock" add-on. He's had one for many years, recently picked up played but can't find it. So he described it and I am trying to recreate it.
I am stumped on 2 things:
- FontSize. Wow doesn't take anything over 32; this seems to be a client limitation? Anyone know a way around?
- UI Interface Options ... This is simply driving me mad, completely bonkers. I finally got checkboxes and buttons working, now I need to add a slider, drop down and colorpicker. Might I add : They show up, but do NOT function. That's the part where I fall into an abyss of doom. How do I get that checkbox going?
"OnValueChanged" seemed logical, turns out that that's only for sliders then?

I've looked at Phanx' add ons, Tekkubs, zorks, p3lims... But everyone does it differently, and it's just not making sense.

[Seerah]

To get anything larger than 32 for your fonts, you need to either a) find a larger font, or b) use textures instead of a font.

To get a checkbox working... In the OnClick script:

savedvars.myVar = true
checkbox:SetHandler("OnClick", function(self,btn)
          savedvars.myVar = not savedvars.myVar
          self:SetChecked(savedvars.myVar)
          -- do stuff here
     end)

Read here for dropdowns if you haven't already: http://forums.wowace.com/showthread.php?t=15763

For a slider, use a template to actually create it - this should be easiest. Set your min/max values using slider:SetMinMaxValues(min, max) and then in the OnValueChanged handler do whatever you need to do with that value.

[Phanx]

Originally Posted by MoonWitch - FontSize. Wow doesn't take anything over 32; this seems to be a client limitation? Anyone know a way around?

Yes, it is a client limitation. The actual maximum size is more like 36, but it really depends on the individual font file. It makes more sense if you think of each character in the font as being contained in a box, and a word as a string of boxes all lined up next to each other. When you set the font string to 36px, it makes the boxes 36px tall, not the letters. In some fonts, the letter takes up most of the box, while in others it takes up less (maybe to leave room for diacritics, for example, or longer ascenders and decenders for a fancier appearance), making the font seem smaller.

As Seerah said, you can look for a "bigger" font (one where the letters take up more of the box) or you can make an image of each number/letter/whatever you want to use at the desired size in Photoshop, and then use the images in-game instead of actual text. To actually implement that, you'd need to first make the string, and then iterate over each character and map it to an image texture:

-- Remap some characters that can't be used in file paths:
local filenames = {
    [":"] = "colon",
    [","] = "comma",
    ["."] = "period",
    [" "] = "space",
}
 
-- Here's your string:
local text = "7:52 PM"
 
-- Identify each individual character in the string:
for i = 1, strlen(text) do
    local char = strsub(text, i, i)
    -- Map it to a texture file path:
    local path = "Interface\\AddOns\\MyAddon\\textures\\" .. (filenames[char] or char)
    -- And set it to a texture object:
    myTextures[i]:SetTexture(path)
end

Originally Posted by MoonWitch - UI Interface Options ... This is simply driving me mad, completely bonkers. I finally got checkboxes and buttons working, now I need to add a slider, drop down and colorpicker. Might I add : They show up, but do NOT function. That's the part where I fall into an abyss of doom. How do I get that checkbox going? "OnValueChanged" seemed logical, turns out that that's only for sliders then?

Sliders have OnValueChanged. Buttons, checkboxes, and colorpickers have OnClick. See also the widget script handlers listing on wowprogramming.

Color pickers are slightly more annoying. Here's a "native" color picker based on the ones in the chat config frame:

local picker = CreateFrame("Button", nil, UIParent) -- change this to your own frame!
picker:SetSize(16, 16)
picker:SetHitRectInsets(0, -145, 0, 0)
 
local bg = picker:CreateTexture(nil, "BACKGROUND")
bg:SetSize(14, 14)
bg:SetPoint("CENTER")
bg:SetTexture(1, 1, 1)
picker.bg = bg
 
picker:SetNormalTexture("Interface\\ChatFrame\\ChatFrameColorSwatch")
picker.swatch = picker:GetNormalTexture()
 
local text = picker:CreateFontString(nil, "ARTWORK", "GameFontHighlight")
text:SetPoint("LEFT", picker, "RIGHT", 2, 0)
picker:SetFontString(text) -- so you can do picker:SetText(...)
picker.text = text
 
picker:SetPoint("LEFT", UIParent, "CENTER") -- Set your own point!
picker.swatch:SetVertexColor(1, 1, 0) -- and color!
picker:SetText("Pick a color!") -- and text!
 
picker.swatchFunc = function()
    -- Called when the color changes or the user clicks Okay
    -- Used to apply the new color
    -- Does not receive a self!
    -- If you want to limit it to run only when clicking Okay, and not
    -- potentially hundreds of times per second while the color is being
    -- changed, uncomment this next line:
    -- if ColorPickerFrame:IsShown() then return end
    local r, g, b = ColorPickerFrame:GetColorRGB()
    picker:GetNormalTexture():SetVertexColor(r, g, b)
    -- set your DB values and change any displayed things here
end
 
picker.cancelFunc = function(r, g, b)
    -- Called when the user clicks Cancel
    -- Used to revert to the previous color
    -- Does not receive a self!
    -- r, g, b are the values you set in the OnClick script below
    picker.swatch:SetVertexColor(r, g, b)
    -- set your DB values and change any displayed things here
end
 
picker:SetScript("OnClick", function(self)
    -- Set the current values to revert to in case of cancellation:
    self.r, self.g, self.b = 1, 1, 0 -- pull from your DB
    -- Open the color picker:
    OpenColorPicker(self)
end)

Other than that, you should know better, but... show your code!

[MoonWitch]

Originally Posted by Phanx Other than that, you should know better, but... show your code!

I know better, but shame prevents me from doing that I kinda fear someone (not you though) might mock me for life.

It's the simplest of add ons, and writing it was a breeze... It's the options that's causing me the grief (and the savedvars). It's been a long time since I did this, and having never dabbled with UI Options like this... I felt utterly lost. I read so much, looked through so much code, I literally felt overwhelmed and well - lost.

Also : https://github.com/moonwitch-wow/BobTheClock

[Phanx]

Originally Posted by MoonWitch I know better, but shame prevents me from doing that I kinda fear someone (not you though) might mock me for life.

I will mock you for life for not showing it.

Originally Posted by MoonWitch https://github.com/moonwitch-wow/BobTheClock

A couple quick notes before the important parts:

(1) While it's true that Blizzard designed the options panel API so that the "cancel" function is supposed to revert all changes made since the panel was opened... addons generally do not do this, since pressing Esc triggers the "cancel" function instead of the "okay" function and it's just confusing for users to close the window and lose all their changes. Just apply settings changes immediately, and don't set "okay" or "cancel" functions.

(2) The "defaults" function is likewise pretty useless; almost no addon implements it, and I'm not sure any user has ever pressed that button with the intention of resetting every single UI and addon setting. If it only applied to the current panel, that would be more useful, but that's not the case.

(3) Your current "cancel" function references a "temporary" table that's not defined anywhere. Fortunately this is not a real issue since you should just get rid of that whole function.

(4) Your widget API is fine, but you should use a consistent naming pattern. Either use "CreateX" or "AddX" but don't mix them; that's just confusing!

(6) Your "AddCheckbox" method is receiving a "parent" as its first (named) argument. However, none of the other widget constructor methods receive this argument, and since it's a method, it already gets the "self" argument, which in your use-case is the same as what you're passing as "parent", so you don't need to explicitly pass that.

(7) Most Blizzard frame templates require global names. You (probably) won't get errors from most of them, but you will end up with some weird overlapping global names for their regions and children. The name doesn't actually matter, so you can just randomize it.

(8) The UICheckButtonTemplate template already includes a fontstring, so you don't need to create one yourself. Also, I'd use the InterfaceOptionsCheckButtonTemplate template instead, since it also includes predefinted tooltip behavior for additional description text.

(9) Since you're going the API route for widgets, I'd go a little further and do something like this in the constructor function:

function Panel:CreateCheckbox(text, tooltipText)
    -- Use random name. Template includes a fontstring and tooltip behavior.
    local checkButton = CreateFrame("Button", "BobCheckbox" .. random(1000000), self, "InterfaceOptionsCheckButtonTemplate")
    -- Override the default OnClick script since it includes unwanted Blizz-specific behaviors.
    checkButton:SetScript("OnClick", function(self)
        local checked = not not self:GetChecked() -- convert 1/nil to true/false
        PlaySound(checked and "igMainMenuOptionCheckBoxOn" or "igMainMenuOptionCheckBoxOff")
        if self.func then
            self:func(checked)
        end
    end)
    -- Customize it
    checkButton.text:SetText(text)
    checkButton.tooltipText = tooltipText
    -- Return it
    return checkButton
end

This way your constructor doesn't need to know anything about which setting the checkbox is changing, or how to apply that setting to your addon. You can do that separately for each individual checkbox:

local timeFormat = self:CreateCheckbox("Use 24-hour time format", "Give a longer description of the option here if you want, or remove this argument.")
-- set a poitn here
timeFormat.func = function(self, value)
    BobTheClockDB.timeform24 = value
    -- apply the setting to your UI
end

[Phanx]

Here's a fixed version of your slider constructor that uses a single instance of each script function instead of creating a new one for each slider, and works around the Blizzard bug that ignores the step value while dragging the slider.

do
    local function Slider_OnMouseWheel(self, delta)
        local step = self:GetValueStep() * delta
        local minValue, maxValue = self:GetMinMaxValues()
        if step > 0 then
            self:SetValue(min(self:GetValue() + step, maxValue))
        else
            self:SetValue(max(self:GetValue() + step, minValue))
        end
    end
 
    local function Slider_OnValueChanged(self)
        local value = self:GetValue()
 
        -- Work around for Blizzard bug that ignores the step value while dragging:
        local valueStep, minValue = self:GetValueStep(), self:GetMinMaxValues()
        if valueStep and valueStep > 0 then
            value = floor((value - minValue) / valueStep + 0.5) * valueStep + minValue
        end
 
        self.value:SetText(value)
 
        if self.func then
            self:func(value)
        end
    end
 
    function Panel:CreateSlider(text, tooltipText, minValue, maxValue, stepValue)
        local slider = CreateFrame("Slider", "BobSlider" .. random(1000000), self, "OptionsSliderTemplate")
        slider.text = _G[slider:GetName() .. "Text"]
        slider.lowText = _G[slider:GetName() .. "Low"]
        slider.highText = _G[slider:GetName() .. "High"]
 
        slider:EnableMouseWheel(true)
        slider:SetScript("OnMouseWheel", Slider_OnMouseWheel)
        slider:SetScript("OnValueChanged", Slider_OnValueChanged)
 
        local value = slider:CreateFontString(nil, "OVERLAY", "GameFontHighlightSmall")
        value:SetPoint("LEFT", slider, "RIGHT", 7, 0)
        slider.value = value
 
        slider.lowText:Hide()
        slider.highText:Hide()
 
        slider.text:SetText(text)
        slider.tooltipText = tooltipText
        slider:SetMinMaxValues(minValue or 0, maxValue or 100)
        slider:SetStepValue(stepValue or 1)
 
        return slider
    end
end

Same thing as the checkbox constructor in my last post; just set a "func" property on the slider to tell it what to do when the value changes:

local clocksizeSlider = self:CreateSlider("Clock size", "Adjust the size of the clock text.", 8, 32, 1)
-- set a point here
clocksizeSlider.func = function(self, value)
    BobTheClockDB.clocksize = value
    -- apply the new value to your display fontstring(s)
end

Edit: Writing these makes me realize I need to clean up my config widget mini-libs.

[MoonWitch]

Originally Posted by Phanx Edit: Writing these makes me realize I need to clean up my config widget mini-libs.

Sweet sweet Phanx... You made me cry there... And I did look at your code, I just couldn't get my head around them. I was so hoping to figure this out myself, write a mini-lib for it, so I don't have to go through this emotional state again (yes, emo. I am VERY bad with forgiving myself for not understanding something, you don't want know how my arms currently look.)

[MoonWitch]

Checkboxes working, though the initial load (whether the checkbox is true or not doesn't seem to work.)

Thanks Phanx.

[Seerah]

Are you checking your sv's and setting the checked state upon creation of the checkbox?

[Phanx]

Cat.

Originally Posted by MoonWitch Checkboxes working, though the initial load (whether the checkbox is true or not doesn't seem to work.)

Well, you need to do that part yourself after creating the checkbox:

timeFormat:SetChecked(BobTheClockDB.timeform24)

Actually, you may want to use a "refresh" function for your panel, and set all the values there; that will make sure the widgets are all updated with current values each time the panel is shown, in case they've somehow changed:

function Panel:refresh()
    timeFormat:SetChecked(BobTheClockDB.timeform24)
    -- etc
end

Also, I adjusted the slider stuff in my last post, as I realized I'd misunderstood what you were creating the fontstring for.

Originally Posted by MoonWitch I am VERY bad with forgiving myself for not understanding something, you don't want know how my arms currently look.

Hör auf damit!

[MoonWitch]

I do have a question though.

How do you know eg slider.Text etc... I can't find which sub widgets exist per template (Hell, can't even find the templates on frameXML)

SV's now fine. It's becoming this raging huge file. I may end up with separating the creation funcs into their own file

[Phanx]

The templates are scattered across a number of files.

Checkbox
http://www.townlong-yak.com/framexml...sPanels.xml#19

Slider
http://www.townlong-yak.com/framexml...mplates.xml#76

Dropdown
http://www.townlong-yak.com/framexml...uTemplates.xml
Tutorial here: http://forums.wowace.com/showthread.php?t=15763

EditBox
http://www.townlong-yak.com/framexml...plates.xml#645

local box = CreateFrame("EditBox", "MyEditBox", parent, "InputBoxTemplate")
-- set points
-- add a label text if you want one
box:SetAltArrowKeyMode(false) -- annoying
box:SetAutoFocus(false) -- annoying
box:SetScript("OnEnterPressed", function(self)
    local text = self:GetText()
    -- do your thing here
end)

Button
http://www.townlong-yak.com/framexml...plates.xml#301

local button = CreateFrame("Button", "MyButton", parent, "UIPanelButtonTemplate")
-- set points
button:SetText(OKAY)
button:SetScript("OnClick", function()
    PlaySound("UChatScrollButton")
    -- do your thing here
end)

There isn't a good template for color pickers, so just use the one I posted earlier.

Edit:
Also remembered Zork posted some info/examples for these templates here:
http://www.wowinterface.com/forums/s...ad.php?t=40444