UI: Showing 3 Multiboards

Tasyen · Jun 25, 2019

The Frame natives are quite powerful and allow us to show more than 1 working multiboard at the same time.

There are some stuff one needs to know to do that. First one has to know that after a multiboard is shown the first time, its framehandle can be accessed with BlzGetFrameByName("Multiboard", 0). By having that frame one can change its position and visibility using the frame natives, which we will do in this example. One could look at how to positionate Frames for more details about that positionating subject.

As wrote above, when Multiboards are been shown the first time, they will take createcontext 0, in GUI that happens when creating a multiboard. Also further multiboards will also use createcontext 0. Means one has to save the frame in a variable before you create another multiboard (GUI). That has to be done cause showing another multiboard will hide the previous shown one and overwrite the framestorage we load with BlzGetFrameByName. Therefore we have to save all wanted multiboard-Frames in varibales. After all multiboards were created + shown once. Show all multiboard frames using BlzFrameSetVisible(multiFrame, true).

Example

In this example 3 multiboards are created and this 3 are positionated somewhere else. Multiboard 1 is below Board 2 and Board 2 below Board 3. Cause in this example the Boards are below each other (y wise), their position has to be updated frequently based on them beeing open or not. If one would not do that the Multiboards would overlap and be shown only partly which does not look good.

Thats how it should look. Only In 4:3 Resolution. In 16:9 they are a stair.

That is the Lua code creating the "good" looking example.
First 6 variables are defined, we need them to frequently repos the multiboards.

It follows the function UpdateMultiboards which reposes multi2 and multi1 based on the state of multi 3 or 2. If the multiboard above is open then pos the multiboard below its MultiboardListContainer, if it is closed place it directly below the multiboard.

CreateMultiboards() creates the multiboards. It has to be exectued for that thing to work. Cause we requier the boards to be visible it should be called not before elapsed time 0.00.

Lua:

multi1 = nil
multi1Container = nil --that is the frame containing the multiboard items.
multi2 = nil
multi2Container = nil
multi3 = nil
multi3Container = nil

function UpdateMultiboards()
   --update 5 times a second the position of the multiboards.
   --this has to be done cause multiboards can be opened and closed. In closed and opened state I repos them to save screen space. One could use events but nah to much extra work, set up a trigger events...
 
   BlzFrameClearAllPoints(multi1)
   if BlzFrameIsVisible(multi2Container) then --multiboard 2 is open?
       --yes, pos multiboard 1 below the container.
       BlzFrameSetPoint(multi1, FRAMEPOINT_TOPRIGHT, multi2Container, FRAMEPOINT_BOTTOMRIGHT,0,0)
   else
       --no, pos multiboard 1 below multiboard2.
       BlzFrameSetPoint(multi1, FRAMEPOINT_TOPRIGHT, multi2, FRAMEPOINT_BOTTOMRIGHT,0,0)
   end

   BlzFrameClearAllPoints(multi2)
   if BlzFrameIsVisible(multi3Container) then
       BlzFrameSetPoint(multi2, FRAMEPOINT_TOPRIGHT, multi3Container, FRAMEPOINT_BOTTOMRIGHT,0,0)
   else
       BlzFrameSetPoint(multi2, FRAMEPOINT_TOPRIGHT, multi3, FRAMEPOINT_BOTTOMRIGHT,0,0)
   end

end
function CreateMultiboards()

   CreateMultiboardBJ( 4, 2, "Board1" )
   multi1 = BlzGetFrameByName("Multiboard",0)
   multi1Container = BlzGetFrameByName("MultiboardListContainer",0)

   CreateMultiboardBJ( 3, 3, "Board2" )
   multi2 = BlzGetFrameByName("Multiboard",0)
   multi2Container = BlzGetFrameByName("MultiboardListContainer",0)

   CreateMultiboardBJ( 3, 1, "Board3" )
   multi3 = BlzGetFrameByName("Multiboard",0)
   multi3Container = BlzGetFrameByName("MultiboardListContainer",0)


   BlzFrameClearAllPoints(multi1)
   BlzFrameSetPoint(multi1, FRAMEPOINT_TOPRIGHT, multi2, FRAMEPOINT_BOTTOMRIGHT,0,0)

   BlzFrameClearAllPoints(multi2)
   BlzFrameSetPoint(multi2, FRAMEPOINT_TOPRIGHT, multi3, FRAMEPOINT_BOTTOMRIGHT,0,0)
 
   BlzFrameClearAllPoints(multi3)
   BlzFrameSetAbsPoint(multi3, FRAMEPOINT_TOPRIGHT, 0.5,0.55)

   BlzFrameSetVisible(multi1, true)
   BlzFrameSetVisible(multi2, true)
   BlzFrameSetVisible(multi3, true)
   TimerStart(CreateTimer(), 0.2, true, UpdateMultiboards)
end

The fdf of the multiboard.

Code:

// -- INCLUDE FILES ---------------------------------------------------------

IncludeFile "UI\FrameDef\UI\EscMenuTemplates.fdf",

// -- LOCAL TEMPLATES -------------------------------------------------------

// -- FRAMES ----------------------------------------------------------------

Frame "FRAME" "Multiboard" {
    Height  0.024,
    Width   0.024,

    Frame "GLUETEXTBUTTON" "MultiboardMinimizeButton" {
        SetAllPoints,

        ControlBackdrop "ButtonBackdropTemplate",
        Frame "BACKDROP" "ButtonBackdropTemplate" {
            DecorateFileNames,
            BackdropBackground          "MultiboardMinimizeButtonEnabled",
            BackdropCornerFlags         "UL|UR|BL|BR|T|L|B|R",
            BackdropCornerSize          0.0125,
            BackdropBackgroundInsets    0.005f 0.005f 0.005f 0.005f,
            BackdropEdgeFile            "MultiboardBorder",
        }

        ControlPushedBackdrop "ButtonPushedBackdropTemplate",
        Frame "BACKDROP" "ButtonPushedBackdropTemplate" {
            DecorateFileNames,
            BackdropBackground          "MultiboardMinimizeButtonPushed",
            BackdropCornerFlags         "UL|UR|BL|BR|T|L|B|R",
            BackdropCornerSize          0.0125,
            BackdropBackgroundInsets    0.005f 0.005f 0.005f 0.005f,
            BackdropEdgeFile            "MultiboardBorder",
        }

        ControlDisabledBackdrop "ButtonDisabledBackdropTemplate",
        Frame "BACKDROP" "ButtonDisabledBackdropTemplate" {
            DecorateFileNames,
            BackdropBackground          "EscMenuButtonBackground",
            BackdropCornerFlags         "UL|UR|BL|BR|T|L|B|R",
            BackdropCornerSize          0.0125,
            BackdropBackgroundInsets    0.005f 0.005f 0.005f 0.005f,
            BackdropEdgeFile            "MultiboardBorder",
        }

        ControlDisabledPushedBackdrop "ButtonDisabledPushedBackdropTemplate",
        Frame "BACKDROP" "ButtonDisabledPushedBackdropTemplate" {
            DecorateFileNames,
            BackdropBackground          "MultiboardMinimizeButtonDisabled",
            BackdropCornerFlags         "UL|UR|BL|BR|T|L|B|R",
            BackdropCornerSize          0.0125,
            BackdropBackgroundInsets    0.005f 0.005f 0.005f 0.005f,
            BackdropEdgeFile            "MultiboardBorder",
        }
    }

    Frame "BACKDROP" "MultiboardTitleBackdrop" {
        Width  0.2f,
        //Height 0.011f,
        SetPoint TOPRIGHT,      "MultiboardMinimizeButton", TOPLEFT,    0.0057, 0.0,
        SetPoint BOTTOMRIGHT,   "MultiboardMinimizeButton", BOTTOMLEFT, 0.0057, 0.0,
        UseActiveContext,
        SetAllPoints,
       DecorateFileNames,
        BackdropTileBackground,
        BackdropBackground          "MultiboardBackground",
        BackdropCornerFlags         "UL|UR|BL|BR|T|L|B|R",
        BackdropCornerSize          0.0125,
        BackdropBackgroundInsets    0.005f 0.005f 0.005f 0.005f,
        BackdropEdgeFile            "MultiboardBorder",
       BackdropBlendAll,
    }

    Frame "TEXT" "MultiboardTitle" INHERITS "EscMenuLabelTextTemplate" {
        UseActiveContext,
        SetPoint TOPLEFT,       "MultiboardTitleBackdrop", TOPLEFT,      0.0, 0.0,
        SetPoint BOTTOMRIGHT,   "MultiboardTitleBackdrop", BOTTOMRIGHT,  0.0, 0.0,
        FrameFont "MasterFont", 0.011, "",
        FontJustificationH JUSTIFYCENTER,
    }

    Frame "BACKDROP" "MultiboardBackdrop" {
        UseActiveContext,
        SetPoint TOPRIGHT,  "MultiboardMinimizeButton", BOTTOMRIGHT, 0.0, 0.0057,
        SetPoint TOPLEFT,   "MultiboardTitleBackdrop",  BOTTOMLEFT,  0.0, 0.0057,
       DecorateFileNames,
        BackdropTileBackground,
        BackdropBackground          "MultiboardBackground",
        BackdropCornerFlags         "UL|UR|BL|BR|T|L|B|R",
        BackdropCornerSize          0.0125,
        BackdropBackgroundInsets    0.005f 0.005f 0.005f 0.005f,
        BackdropEdgeFile            "MultiboardBorder",
       BackdropBlendAll,
    }

    Frame "FRAME" "MultiboardListContainer" {
        UseActiveContext,
        SetPoint TOPLEFT,       "MultiboardBackdrop",  TOPLEFT,          0.001f, -0.0048,
        SetPoint BOTTOMRIGHT,   "MultiboardBackdrop",  BOTTOMRIGHT,     -0.001f,  0.001,
    }
}

Other UI-Frame Tutorials

The following links might provide more insight into this subject.
UI: Change Lumber Text
[JASS/AI] - UI: Create a TextButton

[JASS/AI] - UI: Positionate Frames (important)
UI: toc-Files
UI: Reading a FDF
UI - The concept of Parent-Frames
[JASS/AI] - UI: FrameEvents and FrameTypes
UI: Frames and Tooltips

[JASS/AI] - UI: Creating a Bar
UI - Simpleframes

UI: What are BACKDROPs?
UI: GLUEBUTTON
UI: TEXTAREA the scrolling Text Frame
UI: EditBox - Text Input
[JASS/AI] - UI: Creating a Cam control

UI: Showing 3 Multiboards

UI: OriginFrames
Default Names for BlzGetFrameByName (Access to Existing game-Frames)
[JASS/AI] - UI: List - Default MainFrames (built in CreateAble)

Rahko · Dec 27, 2019

Why do the multiboards align like this in my game?

(Same happened in my own map when I imported that to it.)

Tasyen · Dec 27, 2019

For some Reasons: Some Frames are displayed different when the screen-resolution is 4:3 or 16:9. my Images were taken in window mode in 4:3.

Rahko · Dec 27, 2019

Yeah, I figured, too, that it had to be something to do with the widescreen. They probably added some sort of multiplier for the x axis for the certain frames that can be put to the edge of the widescreen, instead of, say, simply allowing the x point to go beyond 0.8. One implication of this is that the gap actually grows if you put the original frame closer to the edge.

I fixed it by putting -0.1325 on the x axis for the other two multiboards, so they line up straight now (when the origin frame is at 0.8 x. At 0.5 x (like in your example), -0.0325 x is enough to align the other frames straight).

lolreported · Apr 2, 2020

Any solution found for the misalignment of the multiboards?

The multiboards align perfectly when the relative is closed, but when it's opened the bottom multiboard is squished towards the right side.

I'd rather not rely on manually setting the x and y values, as this will mess with different resolutions and aspect ratios.

I'm using the code above as base.

I had to adjust the framepoints for when the top multiboard is closed though.
call BlzFrameSetPoint(mbLeaderboardHandle, FRAMEPOINT_TOP, mbScoreboardHandle, FRAMEPOINT_BOTTOM,0,0)

Chaosy · Nov 19, 2020

I would argue that this is not really a tutorial.

You don't really teach someone how to do it, it's very similar to a system submission in my opinion given that it's along the lines of:
Copy this code and don't sweat about the details.

Tasyen · Nov 19, 2020

You can graveyard it, if you want.

SinisterLuffy · Nov 19, 2020

Instead of the graveyard, why not move it to the Spell Section for Templates?

Chaosy · Nov 19, 2020

I'll leave it up for a few more days so Tasyen can copy the code if he wants to make it a spell submission isntead.
I cannot straight up move it there because there needs to be a picture and tags etc.

orgiamode · Aug 30, 2023

Hello, Tasyen teacher, I am a Korean Warcraft user.
I'm studying Frame by looking at the posts you posted through a translator.

If you don't mind, can I ask your advice?
Where do MultiboardMinimizeButtonEnabled and MultiboardBorder refer to the string table when calling file names through DecorateFileNames within fdf?
I couldn't find those keywords in datestring, globalstring, infopanelstring, and networkstring that you mentioned in other posts.
I'm using this site for the first time, so the reply may be late. I apologize if I've been rude...

Tasyen · Aug 30, 2023

They are from UI/war3skins.txt or gameinterface inside world editor (left side when in raw data view). war3skins.txt moved a around in some warcraft 3 versions it is in localized files.
In Reforged you can read this stringtable in mapscript using SkinManagerGetLocalPath(source).

orgiamode · Aug 30, 2023

Tasyen said:
They are from UI/war3skins.txt or gameinterface inside world editor (left side when in raw data view). war3skins.txt moved a around in some warcraft 3 versions it is in localized files.
In Reforged you can read this stringtable in mapscript using SkinManagerGetLocalPath(source).

I found it right away Thank you !!

UI: Showing 3 Multiboards

Tasyen

Tasyen

Resources

Example

Other UI-Frame Tutorials

Attachments

Rahko

Rahko

Resources

Tasyen

Tasyen

Resources

Rahko

Rahko

Resources

lolreported

lolreported

Resources

Chaosy

Chaosy

Resources

Tasyen

Tasyen

Resources

SinisterLuffy

SinisterLuffy

Chaosy

Chaosy

Resources

orgiamode

orgiamode

Tasyen

Tasyen

Resources

orgiamode

orgiamode

Similar threads