Small Basic #11: The Graphics Window

  • Article

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

  • Anonymous
    November 06, 2013
    This works it is AWSOME!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANKS soooooooooooooooooooooooooooooooo much!

  • Anonymous
    February 01, 2014
    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!)

  • Anonymous
    December 09, 2015
    it helped me a lot so a big thanks to you!

  • Anonymous
    December 13, 2015
    The comment has been removed

  • Anonymous
    March 06, 2016
    Hello! If anyone has any questions, please ask in the Small Basic forum: social.msdn.microsoft.com/.../threads Thanks!