Skip Navigation LinksDevelopersGuidetoMicrosoftSmallBasicSampleChapterPreview

The Developer's Reference Guide to

Microsoft® Small Basic

 

 

 

SAMPLE CHAPTER PREVIEW

 

 

 

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:

y

Width

Height

 

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 graphics window, is bold.

 

FontItalic

Gets or sets whether or not the font to be used when drawing text on the graphics window, 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

ForX=0To299

  ForY=0To199

    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

ForI=1To200

  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.

 


 

 

 

 

COPYRIGHTED MATERIAL