Welcome, Guest! Login | Register

Creating a New VGUI Menu - Part 3 [Print this Article]
Posted by: rkzad
Date posted: Jun 09 2003
User Rating: 5 out of 5.0
Number of views: 7534
Number of comments: 1
Description: Editboxes and Images
Well I'm moving this tutorial over from Half-Life Coding Index to Wavelength since HLCI is hosted at Wavelength anyways, and HLCI is an index, not a tutorial. Feel free to PM/E-Mail me about any mistakes, but if you have any problems with VGUI please ask your questions on the Half-Life coding forum. I haven't touched Half-Life in about a year aside from updating my website, so I'm sure there are more qualified people who are willing to help on the forum. This tutorial also requires you have finished Part 1 and 2! It's a continuation. If you don't do parts 1 and 2 first, this will not work.

In this tutorial, we will add one image and an editbox to our menu. We know you've seen an image before, but what about an editbox? This is a feature that is not commonly used in VGUI menus (at the time I'm writing this). This may be because it may not have been fully finished, as I can't seem to figure out how to change it's colours, and it's selecting is a bit off. However, with a little tweak, it is good enough to use in this menu, at least so that you can know about it, because it can be very useful when getting information from the user. Let's update our CFirstMenu class in vgui_TeamFortressViewport.h:
 CODE (C++) 
class CFirstMenu : public CMenuPanel
{
private:
    CommandButton       *m_pCancelButton;
    CTransparentPanel   *m_pPanel;
    Label               *m_pTitle;
    CommandButton       *m_pSpeak;
    int                 m_iShowText;
    Label               *m_pText;
    CommandButton       *m_pShowButton;
    CommandButton       *m_pHideButton;
    // Start - VGUI Tutorial 3
    TextEntry           *m_pEditbox;
    CImageLabel         *m_pMyPicture;
    // End - VGUI Tutorial 3

public:
    CFirstMenu(int iTrans, int iRemoveMe, int x, int y, int wide, int tall);
    void SetActiveInfo( int iShowText );
    void setVisible( bool visible ); // VGUI Tutorial 3
};

The first line we added (TextEntry) is our editbox. TextEntry means a space to enter text. Make sense? The next line is our picture, an Image Label. As you may have noticed, there is a new function added too. I'll explain this later, do not worry.

Open up vgui_FirstMenu.cpp and we'll add a few more lines at the bottom of our constructor to make our editbox and picture actually show up:
 CODE (C++) 
    m_pHideButton->setParent( m_pPanel );
    m_pHideButton->addInputSignal( new CHandler_MenuButtonOver(this, 0) );

    // Start - VGUI Tutorial 3
    m_pEditbox = new TextEntry( "Testing!", XRES(200), YRES(230), XRES(230), 17);
    m_pEditbox->setVisible( true );
    m_pEditbox->setParent( m_pPanel );

    m_pMyPicture = new CImageLabel( "hlci", XRES(1), YRES(181) );
    m_pMyPicture->setVisible( true );
    m_pMyPicture->setParent( m_pPanel );
    // End - VGUI Tutorial 3
}

Okay... for m_pEditbox, we are creating a TextEntry box with the string "Testing!" inside, at those coordinates. With the default font, a height of 17 would be most appropriate (as you'll see in your test). The next two lines should be familiar by now. For m_pMyPicture, we are creating a new image label at those coordinates, yet we see a string called "hlci". For our test, do NOT change this value. I'll now explain how this string works. The "hlci" string will go through a number of commands to get our picture. Firstly, it will create the WHOLE filename. In other words, it won't look for "hlci" in your vgui folder. If you are in 640x480 mode or higher, it will actually look for "640_hlci.tga", and if it's lower than that, it will look for "320_hlci.tga". The files will be searched in your mod's gfx/vgui folder. I used to be hosting these pictures on 3ddownloads back when I was at valveworld, but they were lost when valveworld was removed. You basically need to make a 32-bit TGA to make it compatible with VGUI. Your best bet is using Adobe Photoshop, since MS Paint can't do it.

Now, if you tried the code already, you will have noticed something: You couldn't build the dll. Yes, well, simple reason: The TextEntry header hasn't been included yet. So, add this line to the rest of the #includes in the top of the vgui_TeamFortressViewport.h file:
 CODE (C++) 
#include<VGUI_ScrollBar.h>
#include<VGUI_Slider.h>
#include<VGUI_TextEntry.h> // VGUI Tutorial 3

// custom scheme handling

NOW, if you tried to build it, you will have noticed three things: 1. Wow, that picture's pretty cool! ;) 2. Nice editbox! 3. I'M PRESSING KEYS AND IT'S MAKING ME DO THINGS. Yes, that's what I thought at first. Yet, it's preventable. The most simple way to do this, is to modify how CFirstMenu's setVisible function works. That's why we declared it in our class above. Add this function to the bottom of vgui_FirstMenu.cpp:
 CODE (C++) 
void CFirstMenu :: setVisible( bool visible )
{
    if (visible)
        ClientCmd("unbindall\n");
    else
        ClientCmd("exec config.cfg\n");

    CMenuPanel::setVisible(visible);
}

If we are making our menu visible, we will unbind all the keys so that when the user presses something, nothing will happen. If we are setting it to be hidden, re-exec config.cfg which binds all of our keys back. Afterwards, call the usual setVisible function so that we can proceed with the normal actions.

For extra excitement, let's make it so that our show and hide buttons will show us the text in our editbox! Nifty, huh? Replace our SetActiveInfo function with the following:
 CODE (C++) 
void CFirstMenu :: SetActiveInfo( int iInfo )
{
    if (iInfo >= 0 && iInfo <= 1)
    {
        if (!iInfo)
        {
            m_pText->setVisible( false );
        }
        else
        {
            char temp[128];
            m_pEditbox->getText(0,temp,128);
            m_pText->setText(temp);
            m_pText->setVisible( true );
        }
    }
}

Notice I kind of changed it around a bit. This makes it a bit easier to add more active info things for different buttons. If iInfo == 0, we will hide our label, as usual. But if it equals 1, we will make a string called temp, get the text from editbox with a maxlength of 128, set our label's text to the text in temp, and show it. Try it out! Nifty 2x!! There you have it for images and editboxes!
That's it for part for the tutorial! I had originally planned to add more, but it turned out all the neat things I wanted to write about were not functional, such as the 3D window, message boxes (which do work but aren't good at all), and writing VGUI applications, which should be possible but isn't quite. I had asked Valve about helping me with VGUI apps and they said they were going to write something on it, so who knows. That was about over a year ago. I guess it doesn't matter since VGUI2 can do it, but we can't dev for it yet.

Until VGUI2,
this has been rkzad.

Rate This Article
This article is currently rated: 5 out of 5.0 (3 Votes)

You have to register to rate this article.
User Comments Showing comments 1-1

Posted By: Vounce on Aug 26 2003 at 06:05:00
Excellent tut for newbies who want too learn VGUI.


You must register to post a comment. If you have already registered, you must login.

Latest Articles
3rd person View in Multiplayer
Half-Life 2 | Coding | Client Side Tutorials
How to enable it in HL2DM

By: cct | Nov 13 2006

Making a Camera
Half-Life 2 | Level Design
This camera is good for when you join a map, it gives you a view of the map before you join a team

By: slackiller | Mar 05 2006

Making a camera , Part 2
Half-Life 2 | Level Design
these cameras are working monitors that turn on when a button is pushed.

By: slackiller | Mar 04 2006

Storing weapons on ladder
Half-Life 2 | Coding | Snippets
like Raven Sheild or BF2

By: British_Bomber | Dec 24 2005

Implementation of a string lookup table
Half-Life 2 | Coding | Snippets
A string lookup table is a set of functions that is used to convert strings to pre-defined values

By: deathz0rz | Nov 13 2005


Latest Comments
knock knock
General | News
By: omega | Dec 22 2016
 
knock knock
General | News
By: MIFUNE | Oct 10 2015
 
New HL HUD Message System
Half-Life | Coding | Shared Tutorials
By: chbrules | Dec 31 2011
 
knock knock
General | News
By: Whistler | Nov 05 2011
 
Particle Engine tutorial part 4
Half-Life | Coding | Client Side Tutorials
By: darkPhoenix | Feb 18 2010
 
Particle Engine tutorial part 2
Half-Life | Coding | Client Side Tutorials
By: darkPhoenix | Feb 11 2010
 
Particle Engine tutorial part 3
Half-Life | Coding | Client Side Tutorials
By: darkPhoenix | Feb 11 2010
 
Game Movement Series #2: Analog Jumping and Floating
Half-Life 2 | Coding | Shared Tutorials
By: mars3554 | Oct 26 2009
 
Particle Engine tutorial part 5
Half-Life | Coding | Client Side Tutorials
By: Deadpool | Aug 02 2009
 
Particle Engine tutorial part 5
Half-Life | Coding | Client Side Tutorials
By: Persuter | Aug 02 2009
 

Site Info
297 Approved Articless
8 Pending Articles
3940 Registered Members
0 People Online (5 guests)
About - Credits - Contact Us

Wavelength version: 3.0.0.9
Valid XHTML 1.0! Valid CSS!