Microsoft Small Basic: Painting Tool Using Graphics Window

Shanu

Introduction

In this article, we will see how to create our Painting tool using Small Basic Graphics Window. In my previous article, I explained the following.

Getting started with Small Basic

Now in this article, we will see more in detail about how to create SmallBasic Graphical output using GraphicsWindow. We will see the following,

How to create our first GraphicsWindow.
How to add Animation to move graphic Objects.
Create our painting Tool using SmallBasic GraphicsWindow.

In my previous article, I explained how to install and create our first SmallBasic program. If you are new to SmallBasic kindly visit the article and study for getting started with SmallBasic.

Code part

1. How to create our first GraphicsWindow?

Now let’s see how to create our first GraphicsWindow.

To create the graphical window in small basic we use “GraphicsWindow.show()”. Here in this code, we can see we have set the height, width, and title for our Window.

# Set the Graphics Window size and show with your title
GraphicsWindow.Show()
GraphicsWindow.Title = "My Simple Animation"
GraphicsWindow.Height = 300
GraphicsWindow.Width = 300

Create your first SmallBasic program, copy and paste the above code. When we run this program from SmallBasic we can see new window will be opened like the following,

My simple animation

So now we have created our graphic window, so what will be next? Yes, let's add a few graphics to our window. For this now let’s see how to create a simple animation to display a car moving from left to right.

2. How to add animation to move graphic objects?

Graphic objects

In this program, I have commented on and explained each functionality

First, create a graphics window.

# Set the Graphics Window size and show with your title
GraphicsWindow.Show()
GraphicsWindow.Title = "My Simple Animation"
GraphicsWindow.Height = 600
GraphicsWindow.Width = 600

Next, declare the variable and set the value for the drawing.

# Set the global variables for drawing car for animation
xval = 20
yval = 160
carWidth = 150
carHeight = 40

First I will draw the Simple Car-like graphics with wheels and also a simple road with black color. Here for using simple animation in this program, we use the delay to clear all the graphics and redraw.

# Redraw the car for every time delay
up:
# Draw the road
GraphicsWindow.BrushColor = "black"
GraphicsWindow.PenWidth = 2
GraphicsWindow.FillRectangle(0, yval - 60, GraphicsWindow.Width, yval + carHeight)
GraphicsWindow.PenColor = "Black"
GraphicsWindow.PenWidth = 2
# Add the Top Part of Car
GraphicsWindow.DrawRectangle(xval + carWidth / 4, yval - carHeight + 10, carWidth / 2, carHeight - 10)
GraphicsWindow.BrushColor = "Orange"
GraphicsWindow.FillRectangle(xval + carWidth / 4, yval - carHeight + 10, carWidth / 2, carHeight - 10)
# Add the Main Part of Car
GraphicsWindow.DrawRectangle(xval, yval, carWidth, carHeight)
GraphicsWindow.BrushColor = "Orange"
GraphicsWindow.FillRectangle(xval, yval, carWidth, carHeight)
# Draw Back Wheel
GraphicsWindow.BrushColor = "black"
GraphicsWindow.DrawEllipse(xval + carWidth / 12, yval + carHeight, 34, 34)
GraphicsWindow.BrushColor = "gray"
GraphicsWindow.FillEllipse(xval + carWidth / 12, yval + carHeight, 34, 34)
# Draw Front Wheel
GraphicsWindow.BrushColor = "black"
GraphicsWindow.DrawEllipse(xval + (carWidth - 46), yval + carHeight, 34, 34)
GraphicsWindow.BrushColor = "gray"
GraphicsWindow.FillEllipse(xval + (carWidth - 46), yval + carHeight, 34, 34)
# Set the delay for animation
Program.Delay(1000)
# Clear the graphics after the delay
GraphicsWindow.Clear()
# Redraw the graphics with new xval position
if xval + carWidth <= GraphicsWindow.Width:
    xval = xval + 20
else:
    xval = 20
Goto up

Complete animation code

Here is the complete code. You can just copy all this code from here paste it into your SmallBasic editor and run the program to see the Graphical Animation.

Note. You can also copy the code and run the sample from the Small Basic Website Link http://smallbasic.com/program/?BFM797

# Set the Graphics Window size and show with your title
GraphicsWindow.Show()
GraphicsWindow.Title = "My Simple Animation"
GraphicsWindow.Height = 600
GraphicsWindow.Width = 600
# Set the global variables for drawing car for animation
xval = 20
yval = 160
carWidth = 150
carHeight = 40
# Redraw the car for every time delay
up:
# Draw the road
GraphicsWindow.BrushColor = "black"
GraphicsWindow.PenWidth = 2
GraphicsWindow.FillRectangle(0, yval - 60, GraphicsWindow.Width, yval + carHeight)
GraphicsWindow.PenColor = "Black"
GraphicsWindow.PenWidth = 2
# Add the Top Part of Car
GraphicsWindow.DrawRectangle(xval + carWidth / 4, yval - carHeight + 10, carWidth / 2, carHeight - 10)
GraphicsWindow.BrushColor = "Orange"
GraphicsWindow.FillRectangle(xval + carWidth / 4, yval - carHeight + 10, carWidth / 2, carHeight - 10)
# Add the Main Part of Car
GraphicsWindow.DrawRectangle(xval, yval, carWidth, carHeight)
GraphicsWindow.BrushColor = "Orange"
GraphicsWindow.FillRectangle(xval, yval, carWidth, carHeight)
# Draw Back Wheel
GraphicsWindow.BrushColor = "black"
GraphicsWindow.DrawEllipse(xval + carWidth / 12, yval + carHeight, 34, 34)
GraphicsWindow.BrushColor = "gray"
GraphicsWindow.FillEllipse(xval + carWidth / 12, yval + carHeight, 34, 34)
# Draw Front Wheel
GraphicsWindow.BrushColor = "black"
GraphicsWindow.DrawEllipse(xval + (carWidth - 46), yval + carHeight, 34, 34)
GraphicsWindow.BrushColor = "gray"
GraphicsWindow.FillEllipse(xval + (carWidth - 46), yval + carHeight, 34, 34)
# Set the timer delay
Program.Delay(1000)
# Clear all the graphics after the delay
GraphicsWindow.Clear()
# Redraw the graphics with new xval position
if xval + carWidth <= GraphicsWindow.Width:
    xval = xval + 20
else:
    xval = 20
Goto up

3. Create our painting Tool using SmallBasic GraphicsWindow.

In this Drawing Tool, users can

Free PEN Draw (user can make a free drawing inside the drawing area).
Image (The user can add the image inside the draw area for now here we are selecting the image from C drive. You can set your path to draw the image).
Rectangle (user can draw a Rectangle inside the draw area).
Fill Rectangle (user can Fill Rectangle inside the draw area).
Circle (user can Draw a Circle inside the draw area).
Fill Circle (user can Fill a Circle with a Circle inside the drawing area).
Clear All (This will clear all the graphics inside the draw area.

Create window

First, we will create our Graphics window and then our Toolbar rectangle inside our graphics window.

# Set the Graphics Window size and show with your title
GraphicsWindow.Show()
GraphicsWindow.CanResize = "False"
GraphicsWindow.Title = "SHANU SmallBasic Drawing Tool"
GraphicsWindow.Height = 800
GraphicsWindow.Width = 800
# Draw Toolbar
GraphicsWindow.PenColor = "Black"
GraphicsWindow.PenWidth = 1
titles = "SHANU SmallBasic Drawing Tool"
GraphicsWindow.DrawBoundText(6, 4, GraphicsWindow.Width, titles)
GraphicsWindow.DrawRectangle(6, 26, GraphicsWindow.Width - 12, 70)
drawType = 0

Create buttons

We will create Buttons and events for the button. We will draw all the buttons inside our toolbar rectangle.

# Draw the buttons at the toolbar
drawButtons()
Controls.ButtonClicked = ButtonEvents
def drawButtons():
    clearAll = Controls.AddButton("ClearALL", 20, 44)
    Controls.SetSize(clearAll, 80, 40)
    freePen = Controls.AddButton("Free PEN Draw", 104, 44)
    Controls.SetSize(freePen, 120, 40)
    drawImage = Controls.AddButton("Image", 228, 44)
    Controls.SetSize(drawImage, 80, 40)
    drawRectangle = Controls.AddButton("Rectangle", 310, 44)
    Controls.SetSize(drawRectangle, 80, 40)
    fillRectangle = Controls.AddButton("FillRectangle", 394, 44)
    Controls.SetSize(fillRectangle, 80, 40)
    drawCircle = Controls.AddButton("Circle", 478, 44)
    Controls.SetSize(drawCircle, 80, 40)
    fillCircle = Controls.AddButton("Fill Circle", 564, 44)
    Controls.SetSize(fillCircle, 80, 40)

Painting area

We will set the Draw Area Height and Width and draw our Draw area outer line using a draw rectangle.

# Set the Drawing Area Starting Xval, Yval, width, and Height
drawXval = 20
drawYval = 140
drawWidth = GraphicsWindow.Width - 60
drawHeight = GraphicsWindow.Height - 200
# Draw the Drawing Area inside this area we will draw
GraphicsWindow.DrawRectangle(drawXval, drawYval, drawWidth, drawHeight)

Button click event

In each button click event we set the drawType with number. For the Clear All, we fill the drawing area with White background color so that it is clear all paintings.

# Check for the button clicked event and perform the action
def ButtonEvents():
    buttonText = Controls.GetButtonCaption(Controls.LastClickedButton)
    if buttonText == "ClearALL":
        # Clear the draw Area for redraw
        drawType = 1
        GraphicsWindow.BrushColor = "white"
        GraphicsWindow.FillRectangle(drawXval, drawYval, drawWidth, drawHeight)
    elif buttonText == "Free PEN Draw":
        # Draw the Free Pen
        drawType = 2
    elif buttonText == "Image":
        # Add Image in draw area
        drawType = 3
    elif buttonText == "Rectangle":
        # Draw Rectangle in draw area
        drawType = 4
    elif buttonText == "FillRectangle":
        # Fill Rectangle in draw area
        drawType = 5
    elif buttonText == "Circle":
        # Draw Circle in draw area
        drawType = 6
    elif buttonText == "Fill Circle":
        # Draw Circle in draw area
        drawType = 7

Mouse click event

In the Mouse click event, we check for the draw-type Number and draw the graphics appropriately. For example, if the draw Type is 3 then we add the image to the drawing area, same like this all other graphics will be added like rectangle, circle, etc.

Note. For the image here I have fixed one image and set the image path for C Drive. Kindly change as per your image name and Image path.

# Mouse Click Events
GraphicsWindow.MouseDown = MouseClick
def MouseClick():
    OrgX = GraphicsWindow.MouseX
    OrgY = GraphicsWindow.MouseY
    # If the Drawtype is 3 then it's for Image Add
    if drawType == 3:
        if OrgX > drawXval and OrgX < drawWidth:
            if OrgY > drawYval and OrgY < drawHeight + drawYval - 6:
                image2 = "C:\ShanuICON.jpg"
                GraphicsWindow.DrawResizedImage(image2, OrgX, OrgY, 80, 80)
    # To Draw Rectangle
    elif drawType == 4:
        if OrgX > drawXval and OrgX < drawWidth:
            if OrgY > drawYval and OrgY < drawHeight + drawYval - 6:
                GraphicsWindow.DrawRectangle(OrgX, OrgY, 60, 60)
    # To Fill Rectangle
    elif drawType == 5:
        if OrgX > drawXval and OrgX < drawWidth:
            if OrgY > drawYval and OrgY < drawHeight + drawYval - 6:
                GraphicsWindow.FillRectangle(OrgX, OrgY, 60, 60)
    # To Draw Circle
    elif drawType == 6:
        if OrgX > drawXval and OrgX < drawWidth:
            if OrgY > drawYval and OrgY < drawHeight + drawYval - 6:
                GraphicsWindow.DrawEllipse(OrgX, OrgY, 60, 60)
    # To Fill Circle
    elif drawType == 7:
        if OrgX > drawXval and OrgX < drawWidth:
            if OrgY > drawYval and OrgY < drawHeight + drawYval - 6:
                GraphicsWindow.FillEllipse(OrgX, OrgY, 60, 60)

Mouse move event

In this event, we will draw our free PEN Draw. In this we will check the drawType is 2 and then we will check for the left mouse click. If both are true then we will draw a free mouse move on the draw area.

# Mouse Move event is used to draw the free pen
GraphicsWindow.MouseMove = MouseDrag
def MouseDrag():
    x = GraphicsWindow.MouseX
    y = GraphicsWindow.MouseY
    
    # If the drawtype is 2 then for Free Pen draw, here we will draw the colors with random
    if drawType == 2:
        if(Mouse.IsLeftButtonDown):
            if x > drawXval and x < drawWidth:
                if y > drawYval and y < drawHeight + drawYval - 6:
                    GraphicsWindow.FillEllipse(x, y, 6, 6)

Complete painting tool code

Here is the complete code. You can just copy all this code from here and paste it into your SmallBasic editor and run the program for fun with your Drawing Tool.