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

• 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!