.NET

Microsoft Small Basic: Painting Tool Using Graphics Window

  

Introduction

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

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

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

In my previous article I have explained about 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.

  1. 'Set the Graphics Window size and sow with your title  
  2.   
  3. GraphicsWindow.Show()  
  4.   
  5. GraphicsWindow.Title = "My Simple Animation"  
  6.   
  7. GraphicsWindow.Height = 300  
  8.   
  9. 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,


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

2. How to add Animation to move graphic Objects


In this program I have commented and explained about each functionality

First create a graphics window,

  1. 'Set the Graphics Window size and sow with your title  
  2. GraphicsWindow.Show()  
  3. GraphicsWindow.Title = "My Simple Animation"  
  4. GraphicsWindow.Height = 600  
  5. GraphicsWindow.Width = 600   

Next declare the variable and set the value for drawing,

  1. ''Set the global variable for draing car for animation  
  2. xval=20  
  3. yval=160  
  4. carWidth=150  
  5. carHeight=40   

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

  1. ' redraw the car for every time delay  
  2. up:  
  3. ' to Draw the road  
  4. GraphicsWindow.BrushColor = "black"  
  5. GraphicsWindow.PenWidth = 2  
  6. GraphicsWindow.FillRectangle(0, yval-60, GraphicsWindow.Width, yval+carHeight)  
  7. GraphicsWindow.PenColor = "Black"  
  8. GraphicsWindow.PenWidth = 2  
  9. 'for adding the Top Part of Car  
  10. GraphicsWindow.DrawRectangle(xval+carWidth/4, yval-carHeight+10, carWidth/2, carHeight-10)  
  11. GraphicsWindow.BrushColor = "Orange"  
  12. GraphicsWindow.FillRectangle(xval+carWidth/4, yval-carHeight+10, carWidth/2, carHeight-10)  
  13. 'for adding the Main Part of Car  
  14. GraphicsWindow.DrawRectangle(xval, yval, carWidth, carHeight)  
  15. GraphicsWindow.BrushColor = "Orange"  
  16. GraphicsWindow.FillRectangle(xval, yval, carWidth, carHeight)  
  17. '' for Draw Back Wheel  
  18. GraphicsWindow.BrushColor = "black"  
  19. GraphicsWindow.DrawEllipse(xval+carWidth/12, yval+carHeight, 34, 34)  
  20. GraphicsWindow.BrushColor = "gray"  
  21. GraphicsWindow.FillEllipse(xval+carWidth/12, yval+carHeight, 34, 34)  
  22. '' for Draw Front Wheel  
  23. GraphicsWindow.BrushColor = "black"  
  24. GraphicsWindow.DrawEllipse(xval+(carWidth-46), yval+carHeight, 34, 34)  
  25. GraphicsWindow.BrushColor = "gray"  
  26. GraphicsWindow.FillEllipse(xval+(carWidth-46), yval+carHeight, 34, 34)  
  27. 'for the timer we use this delay  
  28. Program.Delay(1000)  
  29. 'after the delay time we clear all the graphics  
  30. GraphicsWindow.Clear()  
  31. 'using Goto we will again redraw the graphics with new xval position  
  32. If xval+carWidth <=GraphicsWindow.Width Then  
  33.    xval=xval+20  
  34. Else  
  35.    xval=20  
  36. EndIf  
  37. Goto up   

Complete Animation Code

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

Note : You can also copy the code and run the sample from Small Basic Website  Link http://smallbasic.com/program/?BFM797
  1. 'Set the Graphics Window size and sow with your title  
  2. GraphicsWindow.Show()  
  3. GraphicsWindow.Title = "My Simple Animation"  
  4. GraphicsWindow.Height = 600  
  5. GraphicsWindow.Width = 600  
  6.   
  7. ''Set the global variable for draing car for animation  
  8. xval=20  
  9. yval=160  
  10. carWidth=150  
  11. carHeight=40  
  12.   
  13. ' redraw the car for every time delay  
  14. up:  
  15. ' to Draw the road  
  16. GraphicsWindow.BrushColor = "black"  
  17. GraphicsWindow.PenWidth = 2  
  18.   
  19. GraphicsWindow.FillRectangle(0, yval-60, GraphicsWindow.Width, yval+carHeight)   
  20.   
  21. GraphicsWindow.PenColor = "Black"  
  22. GraphicsWindow.PenWidth = 2  
  23. 'for adding the Top Part of Car  
  24. GraphicsWindow.DrawRectangle(xval+carWidth/4, yval-carHeight+10, carWidth/2, carHeight-10)  
  25. GraphicsWindow.BrushColor = "Orange"  
  26. GraphicsWindow.FillRectangle(xval+carWidth/4, yval-carHeight+10, carWidth/2, carHeight-10)  
  27. 'for adding the Main Part of Car  
  28. GraphicsWindow.DrawRectangle(xval, yval, carWidth, carHeight)  
  29. GraphicsWindow.BrushColor = "Orange"  
  30. GraphicsWindow.FillRectangle(xval, yval, carWidth, carHeight)  
  31.   
  32. '' for Draw Back  Wheel  
  33. GraphicsWindow.BrushColor = "black"  
  34. GraphicsWindow.DrawEllipse(xval+carWidth/12, yval+carHeight, 34, 34)  
  35. GraphicsWindow.BrushColor = "gray"  
  36. GraphicsWindow.FillEllipse(xval+carWidth/12, yval+carHeight, 34, 34)  
  37.   
  38. '' for Draw Front  Wheel  
  39. GraphicsWindow.BrushColor = "black"  
  40. GraphicsWindow.DrawEllipse(xval+(carWidth-46), yval+carHeight, 34, 34)  
  41. GraphicsWindow.BrushColor = "gray"  
  42. GraphicsWindow.FillEllipse(xval+(carWidth-46), yval+carHeight, 34, 34)  
  43.   
  44. 'for the timer we use this delay   
  45. Program.Delay(1000)  
  46.   
  47. 'after the delay time we clear all the graphics      
  48. GraphicsWindow.Clear()  
  49. 'using Goto we will  again redraw the graphics with new xval position  
  50. If xval+carWidth <=GraphicsWindow.Width Then  
  51.   xval=xval+20  
  52. Else  
  53.   xval=20  
  54.   EndIf  
  55.   Goto up      
  56.    

3. Create our own painting Tool using SmallBasic GraphicsWindow



In this Drawing Tool user can,

  • Free PEN Draw (user can make a free drawing inside the draw area).
  • Image (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 Rectangle inside the draw area).
  • Fill Rectangle (user can Fill Rectangle inside the draw area).
  • Circle (user can Draw Circle inside the draw area).
  • Fill Circle (user can Fill Circle with Circle inside the draw 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.

  1. 'Set the Graphics Window size and sow with your title  
  2.    GraphicsWindow.Show()  
  3.    GraphicsWindow.CanResize = "False"  
  4.    GraphicsWindow.Title = "SHANU SmallBasic Drawing Tool"  
  5.    GraphicsWindow.Height = 800  
  6.    GraphicsWindow.Width = 800  
  7. 'Draw Toolbar  
  8.    GraphicsWindow.PenColor = "Black"  
  9.    GraphicsWindow.PenWidth = 1  
  10.    titles="SHANU SmallBasic Drawing Tool  
  11.    GraphicsWindow.DrawBoundText(6, 4, GraphicsWindow.Width, titles)  
  12.    GraphicsWindow.DrawRectangle(6, 26, GraphicsWindow.Width-12, 70)  
  13. drawType=0   

Create Buttons

We will create Buttons and event for the button. We will draw all the buttons inside our tool bar rectangle.

  1. 'Draw the buttons at the toolbar  
  2. drawButtons()  
  3. Controls.ButtonClicked = ButtonEvents  
  4. Sub drawButtons  
  5.    clearAll = Controls.AddButton("ClearALL", 20, 44)  
  6.    Controls.SetSize(clearAll, 80, 40)  
  7.    freePen = Controls.AddButton("Free PEN Draw", 104, 44)  
  8.    Controls.SetSize(freePen, 120, 40)  
  9.    drawImage = Controls.AddButton("Image",228, 44)  
  10.    Controls.SetSize(drawImage, 80, 40)  
  11.    drawRectangle = Controls.AddButton("Rectangle",310, 44)  
  12.    Controls.SetSize(drawRectangle, 80, 40)  
  13.    fillRectangle = Controls.AddButton("FillRectangle",394, 44)  
  14.    Controls.SetSize(fillRectangle, 80, 40)  
  15.    drawCircle = Controls.AddButton("Circle",478, 44)  
  16.    Controls.SetSize(drawCircle, 80, 40)  
  17.    fillCircle = Controls.AddButton("Fill Circle",564, 44)  
  18.    Controls.SetSize(fillCircle, 80, 40)  
  19. EndSub  

Painting Area

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

  1. 'set the Drwaing Area Starting Xval,Yval and width and Height  
  2.    drawXval=20  
  3.    drawYval=140  
  4.    drawWidth=GraphicsWindow.Width-60  
  5.    drawHeight=GraphicsWindow.Height-200  
  6.    '' Draw the Draw Area inside this area we will draw  
  7. 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 draw area with White backcolor so that it be like clear all paintings.

  1. '' Check for the button clieked event and perform the action  
  2. Sub ButtonEvents  
  3. buttonText = Controls.GetButtonCaption(Controls.LastClickedButton)  
  4. If buttonText = "ClearALL" Then  
  5. ' Clear the draw Area for redraw  
  6. drawType=1  
  7. GraphicsWindow.BrushColor="white"  
  8. GraphicsWindow.FillRectangle(drawXval, drawYval, drawWidth, drawHeight)  
  9.   
  10. ElseIf buttonText = "Free PEN Draw" Then  
  11. ' Draw the Free Pen  
  12. drawType=2  
  13. ElseIf buttonText = "Image" Then  
  14. ' Add Image in draw area  
  15.   
  16. drawType=3  
  17. ElseIf buttonText = "Rectangle" Then  
  18. ' Draw Rectangle in draw area  
  19. drawType=4  
  20. ElseIf buttonText = "FillRectangle" Then  
  21. ' Fill Rectangle in draw area  
  22. drawType=5  
  23. ElseIf buttonText = "Circle" Then  
  24. ' Draw Circle in draw area  
  25. drawType=6  
  26. ElseIf buttonText = "Fill Circle" Then  
  27. ' Draw Circle in draw area  
  28. drawType=7  
  29. EndIf  
  30. EndSub   

Mouse Click Event

In 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 draw area, same like this all other graphics will be added like rectangle, circle, etc.

Note: For 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.

  1. 'Mouse Click Events    
  2. 'here we check for draw type and if the dray type is    
  3. GraphicsWindow.MouseDown = MouseClick  
  4. Sub MouseClick  
  5. OrgX = GraphicsWindow.MouseX  
  6. OrgY = GraphicsWindow.MouseY ' If the Drawtype is 3 then its for Image Add    
  7. If drawType = 3 Then  
  8.     if OrgX > drawXval And OrgX < drawWidth Then  
  9.         if OrgY > drawYval And OrgY < drawHeight + drawYval - 6 Then  
  10.             image2 = "C:\ShanuICON.jpg"  
  11.             GraphicsWindow.DrawResizedImage(image2, OrgX, OrgY, 80, 80)  
  12.         EndIf  
  13.     EndIf '-- end Draw Image    
  14.     ' to Draw Rectangle    
  15. ElseIf drawType = 4 Then  
  16.     if OrgX > drawXval And OrgX < drawWidth Then  
  17.         if OrgY > drawYval And OrgY < drawHeight + drawYval - 6 Then  
  18.             GraphicsWindow.DrawRectangle(OrgX, OrgY, 60, 60)  
  19.         EndIf  
  20.     EndIf ' to Fill Rectangle    
  21. ElseIf drawType = 5 Then  
  22. if OrgX > drawXval And OrgX < drawWidth Then  
  23.     if OrgY > drawYval And OrgY < drawHeight + drawYval - 6 Then  
  24.         GraphicsWindow.FillRectangle(OrgX, OrgY, 60, 60)  
  25.     EndIf  
  26. EndIf ' to Draw Circle    
  27. ElseIf drawType = 6 Then  
  28.     if OrgX > drawXval And OrgX < drawWidth Then  
  29.         if OrgY > drawYval And OrgY < drawHeight + drawYval - 6 Then  
  30.             GraphicsWindow.DrawEllipse(OrgX, OrgY, 60, 60)  
  31.         EndIf  
  32.     EndIf ' to Fill Circle    
  33. ElseIf drawType = 7 Then  
  34.     if OrgX > drawXval And OrgX < drawWidth Then  
  35.         if OrgY > drawYval And OrgY < drawHeight + drawYval - 6 Then  
  36.             GraphicsWindow.FillEllipse(OrgX, OrgY, 60, 60)  
  37.         EndIf  
  38.     EndIf  
  39. EndIf  
  40. EndSub  

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 clicked. If both is true then we will draw a free mouse move on the draw area.

  1. 'Mouse Move event is used to draw the free pen    
  2. GraphicsWindow.MouseMove = MouseDrag  
  3. Sub MouseDrag  
  4. x = GraphicsWindow.MouseX  
  5. y = GraphicsWindow.MouseY 'If the drawtype is 2 then for Free Pen draw here we will draw the colors with random    
  6. If drawType = 2 Then  
  7.     If(Mouse.IsLeftButtonDown) then  
  8.         if x > drawXval And x < drawWidth Then  
  9.             if y > drawYval And y < drawHeight + drawYval - 6 Then  
  10.                 GraphicsWindow.FillEllipse(x, y, 6, 6)  
  11.             EndIf  
  12.         EndIf  
  13.     Endif  
  14. EndIf '-- fre pen    
  15. EndSub  

Complete painting Tool Code:

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

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

  1. 'Set the Graphics Window size and sow with your title  
  2. GraphicsWindow.Show()  
  3. GraphicsWindow.CanResize = "False"  
  4. GraphicsWindow.Title = "SHANU SmallBasic Drawing Tool"  
  5. GraphicsWindow.Height = 800  
  6. GraphicsWindow.Width = 800  
  7.   
  8. 'Draw Toolbar  
  9. GraphicsWindow.PenColor = "Black"  
  10. GraphicsWindow.PenWidth = 1  
  11. titles="SHANU SmallBasic Drawing Tool  
  12. GraphicsWindow.DrawBoundText(6, 4, GraphicsWindow.Width, titles)  
  13. GraphicsWindow.DrawRectangle(6, 26, GraphicsWindow.Width-12, 70)  
  14. drawType=0  
  15.   
  16.   
  17. 'Draw the buttons at the toolbar   
  18. drawButtons()  
  19.   
  20. Controls.ButtonClicked = ButtonEvents  
  21.   
  22. Sub drawButtons    
  23. clearAll = Controls.AddButton("ClearALL", 20, 44)  
  24.   Controls.SetSize(clearAll, 80, 40)  
  25.   freePen = Controls.AddButton("Free PEN Draw", 104, 44)  
  26.   Controls.SetSize(freePen, 120, 40)    
  27.    drawImage = Controls.AddButton("Image",228, 44)  
  28.    Controls.SetSize(drawImage, 80, 40)  
  29.     drawRectangle = Controls.AddButton("Rectangle",310, 44)  
  30.     Controls.SetSize(drawRectangle, 80, 40)  
  31.      fillRectangle = Controls.AddButton("FillRectangle",394, 44)  
  32.      Controls.SetSize(fillRectangle, 80, 40)  
  33.       drawCircle = Controls.AddButton("Circle",478, 44)  
  34.       Controls.SetSize(drawCircle, 80, 40)  
  35.         fillCircle = Controls.AddButton("Fill Circle",564, 44)  
  36.     Controls.SetSize(fillCircle, 80, 40)  
  37. EndSub    
  38.   
  39. ''set the Drwaing Area Starting Xval,Yval and width and Height  
  40. drawXval=20  
  41. drawYval=140  
  42.   drawWidth=GraphicsWindow.Width-60  
  43.  drawHeight=GraphicsWindow.Height-200  
  44.    
  45.  '' Draw the Draw Area inside this area we will draw   
  46.   GraphicsWindow.DrawRectangle(drawXval, drawYval, drawWidth,  drawHeight)  
  47.     
  48.   '' Check for the button clieked event and perform the action  
  49.   Sub ButtonEvents  
  50. buttonText = Controls.GetButtonCaption(Controls.LastClickedButton)    
  51.   
  52.   
  53. If buttonText = "ClearALL" Then  
  54.   ' Clear the draw Area for redraw  
  55.   drawType=1  
  56.     GraphicsWindow.BrushColor="white"  
  57.   GraphicsWindow.FillRectangle(drawXval, drawYval, drawWidth,  drawHeight)  
  58.       
  59.   ElseIf buttonText = "Free PEN Draw" Then  
  60.     ' Draw the Free Pen  
  61.   drawType=2    
  62. ElseIf buttonText = "Image" Then  
  63.    ' Add Image in draw area  
  64.   drawType=3  
  65.   
  66. ElseIf buttonText = "Rectangle" Then  
  67.    ' Draw Rectangle in draw area  
  68.    drawType=4  
  69.    ElseIf buttonText = "FillRectangle" Then  
  70.    ' Fill Rectangle in draw area  
  71.    drawType=5  
  72.     ElseIf buttonText = "Circle" Then  
  73.    ' Draw Circle in draw area  
  74.    drawType=6  
  75.      ElseIf buttonText = "Fill Circle" Then  
  76.    ' Draw Circle in draw area  
  77.    drawType=7  
  78.      
  79.   EndIf  
  80. EndSub  
  81.   
  82.   'Mouse Click Events   
  83.   
  84. 'here we check for draw type and if the dray type is   
  85. GraphicsWindow.MouseDown = MouseClick  
  86.   Sub MouseClick  
  87.   OrgX = GraphicsWindow.MouseX  
  88.   OrgY = GraphicsWindow.MouseY  
  89.     
  90.     
  91.    ' If the Drawtype is 3 then its for  Image Add  
  92.  If drawType=3 Then  
  93.     if OrgX >drawXval And OrgX<drawWidth Then  
  94.       if OrgY >drawYval And OrgY<drawHeight+drawYval-6 Then  
  95.         image2 = "C:\ShanuICON.jpg"  
  96.            
  97.             GraphicsWindow.DrawResizedImage(image2, OrgX, OrgY, 80, 80)  
  98.              
  99.         EndIf    
  100.         EndIf     
  101.           '-- end Draw Image  
  102.         ' to Draw  Rectangle  
  103.      ElseIf drawType=4 Then  
  104.     if OrgX >drawXval And OrgX<drawWidth Then  
  105.       if OrgY >drawYval And OrgY<drawHeight+drawYval-6 Then  
  106.         GraphicsWindow.DrawRectangle(OrgX, OrgY, 60,  60)             
  107.         EndIf    
  108.       EndIf     
  109.        ' to Fill  Rectangle  
  110.      ElseIf drawType=5 Then  
  111.     if OrgX >drawXval And OrgX<drawWidth Then  
  112.       if OrgY >drawYval And OrgY<drawHeight+drawYval-6 Then  
  113.         GraphicsWindow.FillRectangle(OrgX, OrgY, 60,  60)             
  114.         EndIf    
  115.      EndIf     
  116.        ' to Draw Circle  
  117.      ElseIf drawType=6 Then  
  118.     if OrgX >drawXval And OrgX<drawWidth Then  
  119.       if OrgY >drawYval And OrgY<drawHeight+drawYval-6 Then  
  120.         GraphicsWindow.DrawEllipse(OrgX, OrgY, 60,  60)             
  121.         EndIf    
  122.      EndIf     
  123.        ' to Fill Circle  
  124.      ElseIf drawType=7 Then  
  125.     if OrgX >drawXval And OrgX<drawWidth Then  
  126.       if OrgY >drawYval And OrgY<drawHeight+drawYval-6 Then  
  127.         GraphicsWindow.FillEllipse(OrgX, OrgY, 60,  60)             
  128.         EndIf    
  129.      EndIf     
  130.     EndIf  
  131.       
  132.       
  133. EndSub  
  134.   
  135.   
  136. 'Mouse Move event is used to draw the free pen  
  137. GraphicsWindow.MouseMove = MouseDrag  
  138.   
  139. Sub MouseDrag  
  140.   x = GraphicsWindow.MouseX  
  141.   y = GraphicsWindow.MouseY  
  142.     
  143.      
  144.   'If the drawtype is 2 then for Free Pen draw here we will draw the colors with random  
  145.   If drawType=2 Then  
  146.   If (Mouse.IsLeftButtonDown) then  
  147.     if x >drawXval And x<drawWidth Then  
  148.       if y >drawYval And y<drawHeight+drawYval-6 Then  
  149.         
  150. GraphicsWindow.FillEllipse(x, y, 6, 6)  
  151.         EndIf  
  152.     
  153.     EndIf     
  154.   Endif  
  155. EndIf   
  156. '-- fre pen  
  157. EndSub  
  158.     
  159.   '' used for free pen for fill random colors  
  160.   GraphicsWindow.MouseUp   = MouseUp  
  161.   Sub MouseUp  
  162.   GraphicsWindow.BrushColor=GraphicsWindow.GetRandomColor()  
  163.   
  164. EndSub  
Hope this article is helpful for beginners.

Up Next
    Ebook Download
    View all
    My Ideas
    Read by 2 people
    Download Now!
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs