Chapter 1: Introducing Small Basic Chapter 2: Overview of Small Basic Programming Chapter 3: Program Object Chapter 4: TextWindow Object Chapter 5: GraphicsWindow Object

5. GraphicsWindow Object Preview 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 Object 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.   GraphicsWindow Features 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) GraphicsWindow Colors 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.PenColor GraphicsWindow.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”. GraphicsWindow Font The font used to draw text in the graphics window is specified by four different properties GraphicsWindow.FontName GraphicsWindow.FontSize GraphicsWindow.FontBold GraphicsWindow.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. Example 5-1. GraphicsWindow Properties 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-1 GraphicsWindow.Show() GraphicsWindow.Title = "Example 5-1" GraphicsWindow.Width = 400 GraphicsWindow.Height = 150 GraphicsWindow.BackgroundColor = "Yellow" GraphicsWindow.FontSize = 36 GraphicsWindow.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: Example 5-2. SetPixel Method Write a program that fills a graphics window with randomly colored pixels. Small Basic Code: 'Guide to Small Basic, Example 5-2 GraphicsWindow.Show() GraphicsWindow.Title = "Example 5-2" GraphicsWindow.Width = 300 GraphicsWindow.Height = 200 For X = 0 To 299 For Y = 0 To 199 GraphicsWindow.SetPixel(X, Y, GraphicsWindow.GetRandomColor()) EndFor EndFor 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): Example 5-3. DrawLine Method Write a program that draws randomly colored lines from the center of a graphics window out to some random point in the window. Small Basic Code: 'Guide to Small Basic, Example 5-3 GraphicsWindow.Show() GraphicsWindow.Title = "Example 5-3" GraphicsWindow.Width = 600 GraphicsWindow.Height = 400 GraphicsWindow.PenWidth = 1 For 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: Example 5-4. Drawing Rectangles Write a program that draws a red rectangle, surround by a blue border. Small Basic Code: Guide to Small Basic, Example 5-4 GraphicsWindow.Show() GraphicsWindow.Title = "Example 5-4" GraphicsWindow.Width = 400 GraphicsWindow.Height = 300 GraphicsWindow.BrushColor = "Red" GraphicsWindow.FillRectangle(50, 50, 300, 200) GraphicsWindow.PenColor = "Blue" GraphicsWindow.PenWidth = 5 GraphicsWindow.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. Example 5-5. Drawing Ellipses Write a program that draws a yellow ellipse, surround by a red border. Small Basic Code: 'Guide to Small Basic, Example 5-5 GraphicsWindow.Show() GraphicsWindow.Title = "Example 5-5" GraphicsWindow.Width = 400 GraphicsWindow.Height = 340 GraphicsWindow.BrushColor = "Yellow" GraphicsWindow.FillEllipse(100, 20, 200, 300) GraphicsWindow.PenColor = "Red" GraphicsWindow.PenWidth = 5 GraphicsWindow.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. Example 5-6. Drawing Triangles Write a program that draws a green-bordered triangle that connects these three points (250, 50), (50, 200), (350, 250). Small Basic Code: 'Guide to Small Basic, Example 5-6 GraphicsWindow.Show() GraphicsWindow.Title = "Example 5-6" GraphicsWindow.Width = 400 GraphicsWindow.Height = 300 GraphicsWindow.PenWidth = 3 GraphicsWindow.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): Chapter Review After completing this chapter, you should understand: Use of the GraphicsWindow. How colors and fonts are used in the graphics windows. Drawing with DrawText, DrawPixel, DrawLine methods. Drawing and filling rectangles, ellipses, triangles. 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.