We saw the text window is useful for input and output of text based information. In this chapter, we look at the object used to host most Small Basic programs – the GraphicsWindow. With this object, we can build very power applications.
GraphicsWindow Coordinates:
The GraphicsWindow object is a cornerstone of Small Basic programming. In the graphics window, we can draw lines, shapes, and text in many colors. We can host controls (buttons and text boxes). We can receive mouse and keyboard input from a user. The coordinate system used by the graphics window is:
This chapter is adapted from the book The Developer’s Reference Guide To Microsoft Small Basic by Philip Conrod and Lou Tylee.
To purchase this book in its entirety, please see the Computer Science For Kids web site.
The window is Width pixels wide and Height pixels high. We use two values (coordinates) to identify a single pixel in the window. The x (horizontal) coordinate increases from left to right, starting at 0. The y (vertical) coordinate increases from top to bottom, also starting at 0. Points in the region are referred to by the two coordinates enclosed in parentheses, or (x, y).
GraphicsWindowProperties:
BackgroundColor Gets or sets the background color of the graphics window.
BrushColor Gets or sets the brush color to be used to fill shapes drawn on the graphics window.
CanResize Specifies whether or not the graphics window can be resized by the user. Can be “true” or “false”.
FontBold Gets or sets whether or not the font to be used when drawing text on the graphicswindow, is bold.
FontItalic Gets or sets whether or not the font to be used when drawing text on the graphicswindow, is italic.
FontName Gets or sets the font name when drawing text on the graphics window.
FontSize Gets or sets the font size to be used when drawing text on the graphics window.
Height Gets or sets the height of the graphics window.
LastKey Gets the last key that was pressed or released.
LastText Gets the last text that was entered on the graphics window.
Left Gets or sets the left position of the graphics window.
MouseX Gets the x-position of the mouse relative to the graphics window.
MouseY Gets the y-position of the mouse relative to the graphics window.
PenColor Gets or sets the color of the pen used to draw shapes on the graphics window.
PenWidth Gets or sets the width of the pen used to draw shapes on the graphics window.
Title Gets or sets the title for the graphics window.
Top Gets or sets the top position of the graphics window.
Width Gets or sets the width of the graphics window.
GraphicsWindowMethods:
Clear() Clears the window.
DrawBoundText(x, y, text, w, h)
Draws a line of text on the screen at the specified location (x, y) within a region bounded by width w and height h. Helps define when text should wrap. Uses current brush and font properties.
DrawEllipse(x, y, w, h) Draws an ellipse (width w, height h) at (x, y) on the screen using the current pen.
DrawImage(image, x, y) Draws the specified image from memory on to the screen at (x, y).
DrawLine(x1, y1, x2, y2) Draws a line from one point (x1, y1) to another (x2, y2). Uses current pen.
DrawRectangle(x, y, w, h) Draws a rectangle (width w, height h) on the screen at (x, y) using the current pen.
DrawResizedImage(image, x, y, w, h) Draws the specified image from memory on to the screen at (x, y), in the specified size (width w, height h).
DrawText(x, y, text) Draws a line of text on the screen at the specified location (x, y). Uses current brush and font properties.
DrawTriangle(x1, y1, x2, y2, x3, y3) Draws a triangle connecting the three input points on the screen using the current pen.
FillEllipse(x, y, w, h) Fills an ellipse (width w, height h) on the screen at (x, y) using the current brush.
FillRectangle(x, y, w, h) Fills a rectangle (width w, height h) on the screen at (x, y) using the current brush.
FillTriangle(x1, y1, x2, y2, x3, y3) Fills a triangle connecting the three input points on the screen using the current brush.
GetColorFromRGB(red, green, blue) Constructs a color give the red, green, blue values (0-255). Returns the color.
GetRandomColor() Gets a valid random color. Returns the color.
Hide() Hides the graphics window.
SetPixel(x, y, c) Draws the pixel specified by (x, y) in the color c.
Show() Shows the graphics window to enable interactions with it.
ShowMessage(text, title) Displays a message box (with message text and title) to the user.
GraphicsWindowEvents:
KeyDown Raises an event when a key is pressed down on the keyboard.
KeyUp Raises an event when a key is released on the keyboard.
MouseDown Raises an event when the mouse button is clicked down.
MouseMove Raises an event when the mouse is moved around.
MouseUp Raises an event when the mouse button is released.
TextInput Raises an event when text is entered on the graphics window.
By default, the graphics window has a white background:
The default window is 624 pixels wide (Width) by 444 pixels high (Height).
To change the background color for the entire window, set the GraphicsWindow.BackgroundColor.
Similar to the text window, the graphics window is located on your computer screen as follows:
To center the graphics window on your computer screen, use these relations:
GraphicsWindow.Left = 0.5 * (Desktop.Width - GraphicsWindow.Width)GraphicsWindow.Top = 0.5 * (Desktop.Height - GraphicsWindow.Height)
The graphics window (and also the text window) uses colors for various program elements. Colors are specified by color names. The color names used by Small Basic are listed in Appendix I to this guide. There are two other ways to get colors in Small Basic. The GetRandomColor method:
GraphicsWindow.GetRandomColor()
will return a random color. It is fun to use for display and games. The GetColorFromRGB method:
GraphicsWindow.GetColorFromRGB(Red, Green, Blue)
builds a color based on three specified components: Red,Green, Blue, each of which range from 0 to 255.
The graphics window background color is set by:
GraphicsWindow.BackgroundColor
And, as mentioned, the default value for this color is “White”.
Lines and shapes in Small Basic are drawn using a “pen.” The color and width of the pen is specified by:
GraphicsWindow.PenColorGraphicsWindow.PenWidth
The default value for PenColor is “Black” and the default PenWidth is 2.
Shapes and text (yes, text) are filled (painted) using a “brush.” The color of the brush is specified by:
GraphicsWindow.BrushColor
The default value for BrushColor is “SlateBlue”.
The font used to draw text in the graphics window is specified by four different properties
GraphicsWindow.FontNameGraphicsWindow.FontSizeGraphicsWindow.FontBoldGraphicsWindow.FontItalic
The FontName property is the name of the font. The default value is “Tahoma”. Other font names can be found by opening a word processor and selecting the change font option.
The FontSize property sets the size of the current font. The default value is 12. FontBold can have one of two values. If “true”, the font will be bold. If “false”, it will not be bold. The default value is “true”. Similarly, FontItalic indicates if a font is italicized. The default value is “false” – no italics.
Write a program that writes “Graphics Window” in a large, bold, italic font in the middle of a yellow graphics window. Set window size to 400 by 150 pixels.
Small Basic Code:
'Guide to Small Basic, Example 5-1GraphicsWindow.Show()GraphicsWindow.Title = "Example 5-1"GraphicsWindow.Width = 400GraphicsWindow.Height = 150GraphicsWindow.BackgroundColor = "Yellow"GraphicsWindow.FontSize = 36GraphicsWindow.FontBold = "true"GraphicsWindow.FontItalic = "true"GraphicsWindow.BrushColor = "Black"GraphicsWindow.DrawText(20, 40, "Graphics Window")
Saved as Example 5-1 in Guide to Small Basic\Programs\Chapter 5 folder.
Save and Run the program to see the results:
Write a program that fills a graphics window with randomly colored pixels.
'Guide to Small Basic, Example 5-2GraphicsWindow.Show()GraphicsWindow.Title = "Example 5-2"GraphicsWindow.Width = 300GraphicsWindow.Height = 200For X = 0 To 299 For Y = 0 To 199 GraphicsWindow.SetPixel(X, Y, GraphicsWindow.GetRandomColor()) EndForEndFor
Saved as Example 5-2 in Guide to Small Basic\Programs\Chapter 5 folder. This code just “marches” through all the pixels and assigns a random color to each.
Save and Run the program to see the results (it takes a while for the window to fill):
Write a program that draws randomly colored lines from the center of a graphics window out to some random point in the window.
'Guide to Small Basic, Example 5-3GraphicsWindow.Show()GraphicsWindow.Title = "Example 5-3"GraphicsWindow.Width = 600GraphicsWindow.Height = 400GraphicsWindow.PenWidth = 1For I = 1 To 200 GraphicsWindow.PenColor = GraphicsWindow.GetRandomColor() X = Math.GetRandomNumber(600) - 1 Y = Math.GetRandomNumber(400) - 1 GraphicsWindow.DrawLine(300, 200, X, Y)EndFor
Saved as Example 5-3 in Guide to Small Basic\Programs\Chapter 5 folder. Each line has the same starting point (the center of the window). Then, lines are drawn to the random point (X, Y).
Save and Run the program to see the results. Look at all the pretty lines:
Write a program that draws a red rectangle, surround by a blue border.
Guide to Small Basic, Example 5-4GraphicsWindow.Show()GraphicsWindow.Title = "Example 5-4"GraphicsWindow.Width = 400GraphicsWindow.Height = 300GraphicsWindow.BrushColor = "Red"GraphicsWindow.FillRectangle(50, 50, 300, 200)GraphicsWindow.PenColor = "Blue"GraphicsWindow.PenWidth = 5GraphicsWindow.DrawRectangle(50, 50, 300, 200)
Saved as Example 5-4 in Guide to Small Basic\Programs\Chapter 5 folder.
Save and Run the program to see the rectangle:
We fill the rectangle first, then draw. This insures the border is not erased by the fill operation.
Write a program that draws a yellow ellipse, surround by a red border.
'Guide to Small Basic, Example 5-5GraphicsWindow.Show()GraphicsWindow.Title = "Example 5-5"GraphicsWindow.Width = 400GraphicsWindow.Height = 340GraphicsWindow.BrushColor = "Yellow"GraphicsWindow.FillEllipse(100, 20, 200, 300)GraphicsWindow.PenColor = "Red"GraphicsWindow.PenWidth = 5GraphicsWindow.DrawEllipse(100, 20, 200, 300)
Saved as Example 5-5 in Guide to Small Basic\Programs\Chapter 5 folder.
Save and Run the program to see the ellipse:
Again, fill then draw to see the full border.
Write a program that draws a green-bordered triangle that connects these three points (250, 50), (50, 200), (350, 250).
'Guide to Small Basic, Example 5-6GraphicsWindow.Show()GraphicsWindow.Title = "Example 5-6"GraphicsWindow.Width = 400GraphicsWindow.Height = 300GraphicsWindow.PenWidth = 3GraphicsWindow.PenColor = "Green"GraphicsWindow.DrawTriangle(250, 50, 50, 200, 350, 250)
Saved as Example 5-6 in Guide to Small Basic\Programs\Chapter 5 folder.
Save and Run the program to see the triangle (identify the three points):
After completing this chapter, you should understand:
We will do a lot more with the graphics window as we learn more about Small Basic. In particular, we will learn about using the graphics window events to recognize key presses and mouse clicks.
Next, we learn about some of the controls associated with Small Basic and the idea of event-driven programming.
© Copyright 2010 By BibleByte Books. All Rights Reserved. BibleByte Books, the BibleByte Books Logo, Computer Science For Kids, the Computer Science For Kids logo, and related trade dress are trademarks or registered trademarks of BibleByte Books.