Small Basic #11: The Graphics Window


The Microsoft Small Basic graphics window allows you to do the following, as demonstrated in the following code:



  • Change the graphics window's background color, height, width, placement relative to the screen's top-left corner, title, and whether the user can resize the graphics window.

  • Drawing hollow and solid ellipses, rectangles, and triangles of varying colors.

  • Displaying images.

  • Resizing existing shapes and images.  

  • Getting and changing the color of individual pixels.

  • Responding to user actions such as pressing and releasing keys on the keyboard, moving the mouse, and clicking and releasing mouse buttons.
' Create a graphics window of 700x500 offset from the top-left corner of the screen by 50,100.
' Change the graphics window's title, and make its background color green.
' Allow users to resize the graphics window.
GraphicsWindow.BackgroundColor = "Green"
GraphicsWindow.CanResize = "True"
GraphicsWindow.Height = 500
GraphicsWindow.Width = 700
GraphicsWindow.Top = 50
GraphicsWindow.Left = 100
GraphicsWindow.Title = "Please Wait..."
GraphicsWindow.Clear()

' Draw a random picture on the graphics window.
' Note that Flickr methods have the potential to display images that may not be suitable for younger users.
GraphicsWindow.DrawImage(Flickr.GetRandomPicture("cat"), 175, 0)
' Draw an ellipse, line, rectangle, text, an image, and a triangle on the graphics window.
' Use a blue pen. Do not fill in the shapes.
GraphicsWindow.PenColor = "Blue"
GraphicsWindow.PenWidth = 5
GraphicsWindow.DrawEllipse(100, 150, 50, 20)
GraphicsWindow.DrawLine(0, 0, 50, 100)
GraphicsWindow.DrawRectangle(25, 175, 60, 30)
GraphicsWindow.DrawBoundText(0, 20, GraphicsWindow.Width, "Hello, World!")
' Note that Flickr methods have the potential to display images that may not be suitable for younger users.
GraphicsWindow.DrawResizedImage(Flickr.GetRandomPicture("dog"), 10, 250, 100, 75)
GraphicsWindow.DrawTriangle(15, 350, 55, 350, 35, 375)
' Draw a filled-in ellipse, rectangle, and triangle.
' Use a specific red-green-blue (RGB) color mixture.
GraphicsWindow.BrushColor = GraphicsWindow.GetColorFromRGB(125, 100, 75)
GraphicsWindow.FillEllipse(10, 400, 50, 20)
' Use the color of the pixel at graphics window location 0,10.
GraphicsWindow.BrushColor = GraphicsWindow.GetPixel(0, 10)
GraphicsWindow.FillRectangle(5, 455, 60, 30)
GraphicsWindow.FillTriangle(100, 455, 150, 425, 125, 475)
' Change the graphics window's background color to some random color.
GraphicsWindow.BackgroundColor = GraphicsWindow.GetRandomColor()

' Change a bunch of individual pixels' background colors to random colors.
For x = 70 to 170
For y = 40 to 80
GraphicsWindow.SetPixel(x, y, GraphicsWindow.GetRandomColor())
EndFor
EndFor

GraphicsWindow.Title = "My Graphics Window"
' Show a dialog box.
GraphicsWindow.ShowMessage("Look, scattered colors!", "Set Pixels")
' Enable the graphics window to respond to mouse and keyboard events.
GraphicsWindow.MouseDown = OnMouseDown
GraphicsWindow.MouseUp = OnMouseUp
GraphicsWindow.MouseMove = OnMouseMove
GraphicsWindow.KeyDown = OnKeyDown
GraphicsWindow.KeyUp = OnKeyUp
GraphicsWindow.TextInput = OnTextInput

Sub OnKeyDown
GraphicsWindow.Title = "The " + GraphicsWindow.LastKey + " key was pressed down."
EndSub

Sub OnKeyUp
GraphicsWindow.Title = "The " + GraphicsWindow.LastKey + " key was released."
EndSub

Sub OnMouseDown
GraphicsWindow.Title = "The mouse button was pressed down."
EndSub

Sub OnMouseUp
GraphicsWindow.Title = "The mouse button was released."
EndSub

Sub OnMouseMove
GraphicsWindow.Title = "The mouse moved to " + GraphicsWindow.MouseX + ", " + GraphicsWindow.MouseY + "."
EndSub

Sub OnTextInput
GraphicsWindow.Title = "Some text was input."
EndSub

Comments (5)

  1. AWESOME!!!!! says:

    This works it is AWSOME!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    THANKS soooooooooooooooooooooooooooooooo much!

  2. John says:

    Agreed – excellent demo.  Also, in the OnMouseDown routine, if you add tests using  IsLeftMouseDown  & IsRightMouseDown you can detect a left-button press, a right-button press, AND a middle-button press, (I didn't know Small Basic could distinguish between all three buttons!)

  3. love hater says:

    it helped me a lot so a big thanks to you!

  4. How? says:

    How do you change the color of text in a multi-line text box?

  5. Hello! If anyone has any questions, please ask in the Small Basic forum:

    social.msdn.microsoft.com/…/threads

    Thanks!

Skip to main content