Creating a Simple GUI in QBasic

Creating graphical user interfaces (GUIs) in QBasic can be both fun and educational. Although QBasic is a text-based programming environment, it provides a foundation for creating simple graphical elements that can enhance your applications. In this article, we'll explore how to create a basic GUI in QBasic, including windows, buttons, and text fields, making our programs more interactive and visually appealing.

Understanding the Basics of GUI Components

Before diving into the code, let’s take a moment to understand the basic components that we want to include in our GUI:

Windows: The primary frame that holds all GUI components.
Buttons: Interactive elements that users can click to perform actions.
Text Fields: Areas where users can enter data.

QBasic doesn't have built-in support for creating GUIs like modern programming languages, but it does allow for some basic graphical functions that we can utilize to simulate a GUI environment.

Setting Up the QBasic Environment

Before we start coding, make sure you have the QBasic interpreter installed on your system. You can run QBasic on DOSBox or any compatible emulator. Once set up, open the QBasic IDE, and we are ready to start coding.

Initializing Graphics Mode

The first step in creating a GUI is to set the graphics mode. QBasic provides a SCREEN statement that changes the display mode.

SCREEN 12  ' Set the graphics mode to 640x480 with 16 colors

This line sets the graphics mode to a higher resolution, allowing for richer graphics.

Drawing a Basic Window

Now that we have the graphics mode set, let's start drawing a simple window. For the sake of this example, we will create a rectangular window with a title.

SUB DrawWindow (x As Integer, y As Integer, width As Integer, height As Integer, title As STRING)
    ' Draw the window border
    LINE (x, y)-(x + width, y + height), 15, B  ' White Border
    ' Draw the title bar
    LINE (x, y)-(x + width, y + 20), 14, B  ' Yellow Title Bar
    ' Display the title
    LOCATE 1, x + 2
    PRINT title
END SUB

In this code, we define a DrawWindow subroutine that takes parameters for the position and size of the window, as well as a title for the window. The LINE command is used to draw both the outer border of the window and the title bar.

Creating a Button

Now, let's add a button to our GUI. We can define a subroutine to draw a button and detect clicks on it.

SUB DrawButton (x As Integer, y As Integer, width As Integer, height As Integer, label As STRING)
    ' Draw the button outline
    LINE (x, y)-(x + width, y + height), 7, B  ' Cyan Button
    ' Fill the button
    LINE (x + 1, y + 1)-(x + width - 1, y + height - 1), 15, B  ' Fill with white
    ' Display the label
    LOCATE 1, (x + x + width) / 2 - LEN(label) / 2
    PRINT label
END SUB

FUNCTION IsInButton (mx As Integer, my As Integer, x As Integer, y As Integer, width As Integer, height As Integer) As INTEGER
    If mx >= x AND mx <= x + width AND my >= y AND my <= y + height Then
        IsInButton = 1
    ELSE
        IsInButton = 0
    END IF
END FUNCTION

The DrawButton subroutine creates a button with a specified label. The IsInButton function checks if the mouse coordinates (when clicked) are within the button's area.

Creating a Simple Event Loop

Next, we will put together everything we have created into a simple event loop that will listen for mouse clicks.

DIM mx As INTEGER, my As INTEGER

' Set up the main window
CLS
DrawWindow 100, 100, 400, 200, "Simple GUI in QBasic"
DrawButton 150, 150, 100, 40, "Click Me!"

DO
    ' Get mouse position
    LOCATE 1, 1
    PRINT "Move the mouse and click..."
    GETMOUSE mx, my
    
    ' Check if mouse button is pressed
    IF (mx > 0 AND my > 0) THEN
        IF IsInButton(mx, my, 150, 150, 100, 40) Then
            LOCATE 10, 1
            PRINT "Button Clicked!"
            SLEEP 1000  ' Pause for a second
        END IF
    END IF
LOOP UNTIL INKEY$ <> ""

In this block, we continuously check the mouse position and whether the button is clicked. If the button is clicked, we display a message on the screen.

Enhancing the GUI

Now that we have the basic framework for a GUI, you can experiment further by adding more features such as:

Additional Buttons: Create more buttons for different functionalities.
Input Fields: Allow users to enter text using input fields.
Images: Include simple graphics or icons to enhance the visual appeal.
Design Improvements: Experiment with colors, sizes, and positions to create more polished graphics.

Conclusion: Bringing It All Together

In this article, we've learned how to create a simple GUI in QBasic using basic drawing commands. By utilizing the LINE command for shapes and detecting clicks with a basic event loop, you can build a rudimentary user interface in your applications.

With a strong foundation in these concepts, the sky's the limit for your creativity! Whether you're building tools, games, or educational applications, having a GUI greatly enhances user experience.

Now it's time to put your newfound skills into practice—think of different projects where a GUI could be beneficial, and start coding your ideas. Happy coding!

Programming - QBasic