• 🏆 Texturing Contest #33 is OPEN! Contestants must re-texture a SD unit model found in-game (Warcraft 3 Classic), recreating the unit into a peaceful NPC version. 🔗Click here to enter!
  • ✅ Time to vote for the top 3 models! The POLL for Hive's 6th HD Modeling Contest: Mechanical is now open! 📅 Poll close on July 16, 2024! 🔗 Cast your vote now!

UI: Showing 3 Multiboards

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.

Fail Boards Cutted.jpg


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

3 Multiboards cuted.jpg



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)
 

Attachments

  • Multiboards and Frames.w3x
    17.1 KB · Views: 201
Last edited:
Level 9
Joined
Jul 30, 2018
Messages
445
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).
 
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)
 
Last edited:
Level 1
Joined
Aug 30, 2023
Messages
2
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...
 
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).
 
Last edited:
Level 1
Joined
Aug 30, 2023
Messages
2
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 !!
 
Top