top of page

How to GUI

The Graphic User Interface allows you to display output to a user using more than just the unicode symbols on the console. It allows you to create interactive windows with images, illustrations and input / output feedback.

Importing it into Eclipse

Downloading Sources

The gui jar files should already be included in the project folder once you pull from the git repository of the exercise featuring gui. If you want to work with it in a different project then first download the sources and uncompress the zip file.

GUISources.png

Adding to Build Path

Select your project folder and right click it, then select Build Path -> Configure Build Path. 

Selecting the JAR files

First click on "Classpath" and then click "Add External JARs..." and navigate to the folder where the two JAR files from above are located. Select both by clicking the first, then holding shift and selecting the second one as well.

AddJarFiles.png

Importing the JAR files

You should now see both JAR files in the module path. If this is the case click apply and close. The two files should now appear in your project in the referenced libraries folder.

Check the Import

If your import was successful you should now be able to import the gui.Window and gui.Color classes. If Java complains that it cannot find the gui class then you have probably added the JAR files to the module path instead of the class path. Make sure that you click on class path before selecting external JAR files.

GUIImportSuccess.png

Getting started with GUI

GUI Window

The first thing one creates when working with a GUI is the canvas on which we want to draw on. This canvas is called Window. When we create a new Window object we specify its name (first parameter), its width (second parameter) and its height (third parameter).

Screenshot_20230914_121757.png

Window methods

The following methods are given by the Window class and can be called on any Window object.

  • open() : The GUI window is opened and is visible, it will however immediately disappear if it is not kept open by the next line of code. 

  • close() : This will close the GUI window.

  • waitUntilClosed() : This will open the GUI window and keep it open until the window is closed or the code execution is terminated. This is better than calling open() in most cases as the window will remain open.

  • isOpen() : This method tells us whether the window is open or not.

Window Coordinates

The window uses special coordinates. The origin is at the top left corner, i.e. (0, 0) is located at the top left corner of the window. To the right the x coordinate increases and to the left the y coordinate increases. This is counter-intuitive at first but it removes the need for negative coordinates.

WindowCoordinates.png

Drawing Methods

The following methods exist in the Window class to draw shapes.

  • drawRect(x, y, width, height) : One can use this method to draw the outline of a rectangle with its top left corner at (x, y) and with a width and height specified.

  • drawCircle(x, y, radius) : One can use this method to draw the outline of a circle with its center at (x, y) and a specified radius.

  • drawOval(x, y, width, height) :  One can use this method to draw the outline of an oval with its center at (x, y) and a specified height and width.

  • drawLine(x1, y1, x2, y2) :  One can use this method to draw a line from (x1, y1) to (x2, y2).

Fill the Drawings

If we want the shapes to be filled and not just the border region to be displayed then we can use the following methods.

  • fillRect(x, y, width, height) : One can use this method to draw a rectangle with its top left corner at (x, y) and with a width and height specified.

  • drawCircle(x, y, radius) : One can use this method to draw a circle with its center at (x, y) and a specified radius.

  • drawOval(x, y, width, height) :  One can use this method to draw an oval with its center at (x, y) and a specified height and width.

Drawing Pixels

We can also draw single pixels if we desire to do so. This can be done by using the drawRect method and setting width and height to 1 and x and y to be the coordinates of the desired pixel (x, y).

DrawPixel.png

Colours / Font

We can use the gui.Window class to make our drawings colourful. We can also change the font size or stroke width.

  • window.setColour(red, blue, green): We can use this method to set the colour of the following drawings using rgb colours. 

  • setFontSize(size) : This allows us to set the font size of the drawString() method for writing Strings onto the window.

  • setStrokeWidth(width):  This allows us to set the width of the drawing stroke.

Refresh

We can update the window once it has been opened using the following methods.

  • refresh() : This will display the current state of the drawing on the window. This includes any drawings made since the last clearing of the window.

  • refresh(waitime) : This will display the current state of the drawing on the window with a delay of waitime.

  • refreshAndClear() : This will display the current state of the drawing and then clear the window.

  • refreshAndClear(waitime) : This will display the current state of the drawing and then clear the window after a delay of waittime.

Interactive GUI

We can detect keypresses and mouse clicks using the Window class and use them to display changes on the window.

  • isKeyPressed(keyname) : Using key names like "left", "right", "space", "A", "B", etc. we can use this method to detect key presses on the keyboard.

  • isLeftMouseButtonPressed() : This tells us if the left mouse button is pressed.

  • isRightMouseButtonPressed() : This tells us if the right mouse button is pressed.

  • wasKeyPressed(keyName) : Tells us whether a key was just pressed or is being pressed.

  • getMouseX() : Gives us the x coordinate of the current cursor position.

  • getMouseY() : Gives us the y coordinate of the current cursor position.

bottom of page