Small Basic > Curriculum > Online > Lesson 3.4: Events and Interactivity

Estimated time to complete this lesson: 1 hour

Introduction to Events and Interactivity

In this lesson, you will learn how to:

Use keyboard events in your program.
Use mouse events in your program.

Introduction to Events

This lesson introduces you to events with which you can add interactivity to your Small Basic programs.

In other words, you can create an interactive program in Small Basic by defining events that trigger an action in response to user inputs.

Interactivity here includes events that trigger an action; for instance, when the user clicks a button on the mouse or presses a key on the keyboard.

Keyboard Events

Keyboard events produce an action when the user presses or releases a certain key. There are two keyboard events—KeyDown and KeyUp. These events are defined as operations of the GraphicsWindow object.

KeyUp raises an event when the user releases a key on the keyboard.

Sub keyup
  If GraphicsWindow.LastKey = return then
    Shapes.Rotate(shape1, 0)
  EndIf
EndSub

KeyDown raises an event when the user presses a key on the keyboard.

Sub keydown
  If GraphicsWindow.LastKey = return then
    Shapes.Rotate(shape1, 90)
  EndIf
EndSub

Let’s demonstrate keyboard events in Small Basic with a simple program that rotates a shape in the graphics window when you press a key on the keyboard.

In this example, you press RETURN to rotate a rectangle shape in the graphics window. When you release the key, the rectangle returns to its original state.

Graphics Window

In the editor window, you add the rectangle by using the AddRectangle operation of the Shapes object.
You set the location of the rectangle by using the Move operation.
You identify the key with which the rectangle can be rotated. You declare the key and assign it a suitable variable name.
You use the KeyDown event of the GraphicsWindow object and declare a subroutine to rotate the shape when the user presses the key.
Similarly, you use the KeyUp event and declare a subroutine to rotate the shape when the user releases the key.

When you click Run on the toolbar, your program runs. A graphics window appears with a rectangle in the center. When you press RETURN, the rectangle rotates. When you release the Return key, the rectangle rotates back to its original position.

GraphicsWindow.Height = 300
GraphicsWindow.Width = 300
GraphicsWindow.Title = "Graphics Window"

shape1 = Shapes.AddRectangle(100, 50)
Shapes.Move(shape1, 100, 125)
return = "Return"
GraphicsWindow.KeyDown = keydown
GraphicsWindow.KeyUp = keyup

Sub keydown
  If GraphicsWindow.LastKey = return then
    Shapes.Rotate(shape1, 90)
  EndIf
EndSub

Sub keyup
  If GraphicsWindow.LastKey = return then
    Shapes.Rotate(shape1, 0)
  EndIf
EndSub

Mouse Events

As you did with keyboard events, you can create programs in Small Basic that work with events that are based on mouse clicks. Mouse events generate actions in your program when the user clicks a mouse button.

MouseDown raises an event when the user clicks a mouse button.

MouseUp raises an event when the user releases a mouse button.

MouseMove raises an event when the user moves the mouse pointer in the graphics window.

Let’s see how we can use these events in a program.

GraphicsWindow.MouseDown = MouseClick
GraphicsWindow.MouseMove = MouseDrag
GraphicsWindow.MouseUp   = MouseUp

Sub MouseClick
  OrgX = GraphicsWindow.MouseX
  OrgY = GraphicsWindow.MouseY
EndSub

Sub MouseDrag
  x = GraphicsWindow.MouseX
  y = GraphicsWindow.MouseY
  If (Mouse.IsLeftButtonDown) then
    GraphicsWindow.DrawLine(OrgX, OrgY, x, y)
  Endif
EndSub

Sub MouseUp
  GraphicsWindow.PenColor=GraphicsWindow.GetRandomColor()
  GraphicsWindow.PenWidth=Math.GetRandomNumber(5)
EndSub

SmallBasic Graphics Window

You must declare the mouse events in your code. Small Basic has three types of mouse events: MouseDown, MouseUp, and MouseMove. You must also assign an accompanying subroutine for your event. When the mouse is clicked, released, or moved, the subroutine will perform the action that is defined within it. You can use mouse events on controls and shapes.

Let’s Summarize…

Congratulations! Now you know how to:

Use keyboard events in your program.
Using mouse events in your program.

Show What You Know

Write a program to demonstrate mouse events by performing the following steps:

Create a user interface by using the GraphicsWindow object.
Insert buttons to draw shapes by using the Controls (see section 3.5) object.
Use the MouseDown and MouseMove events to draw shapes in the drawing area.
Use If and Else statements to define the actions that occur when the user clicks the mouse.

GraphicsWindow.Hide()
w = 620
h = 450
GraphicsWindow.CanResize = "False"
GraphicsWindow.Width = w
GraphicsWindow.Height = h
GraphicsWindow.Top = (Desktop.Height-h) / 2
GraphicsWindow.Left = (Desktop.Width-w) / 2
GraphicsWindow.Show()
GraphicsWindow.Title = "Events and interactivity"
GUI()
Controls.ButtonClicked = MouseAction
Sub GUI  
  GraphicsWindow.DrawRectangle(10, 10, 600, 320) 
  GraphicsWindow.DrawRectangle(10, 340, 200, 100)
  GraphicsWindow.DrawRectangle(10, 340, 600, 100)
  GraphicsWindow.DrawRectangle(370, 340, 150, 100)   
  Triangle = Controls.AddButton("Triangle", 40, 345)
  Controls.SetSize(Triangle, 120, 30)
  Rectangle = Controls.AddButton("Rectangle",40,375)
  Controls.SetSize(Rectangle, 120, 30) 
  Circle = Controls.AddButton("Circle", 40, 405)
  Controls.SetSize(Circle, 120, 30)
  Rotate = Controls.AddButton("Rotate", 230, 360)
  Controls.SetSize(Rotate, 60, 60)
  Zoom = Controls.AddButton("Zoom", 290, 360)
  Controls.SetSize(Zoom, 60, 60)
  FreeHand = Controls.AddButton("Draw", 390, 360)
  Controls.SetSize(FreeHand, 60, 60)   
  Clear = Controls.AddButton("Clear", 450, 360)
  Controls.SetSize(Clear, 60, 60)
  Exit = Controls.AddButton("Exit", 530, 360)
  Controls.SetSize(Exit, 60, 60)     
EndSub 
Sub MouseAction
  x = GraphicsWindow.MouseX
  y = GraphicsWindow.MouseY   
  GraphicsWindow.PenWidth = 1  
  If x > 40 And x < 160 Then     
    GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()  
    If y > 345 And y < 375 Then        
      draw = 0
      j = 0
      z = 1
      tri = Shapes.AddTriangle(20, 20, 100, 100, 150, 20)
      Shapes.Move(tri, 80, 100)
    EndIf   
    If y > 375 And y < 405 Then 
      draw = 0      
      j = 0  
      z = 2   
      rect = Shapes.AddRectangle(100, 100)
      Shapes.Move(rect, 250, 150)
    EndIf     
    If y > 405 And y < 435 Then
      draw = 0
      j = 0       
      z = 3       
      circ = Shapes.AddEllipse(100, 100)
      Shapes.Move(circ, 400, 150)
    EndIf       
  EndIf     
  If y > 360 And y < 420 Then        
    If x > 230 And x < 290 Then           
      draw = 0    
      If z = 1 Then         
        Shapes.Rotate(tri, 30 + m)
      Else
        If z = 2 Then      
          Shapes.Rotate(rect,30 + m)   
        Else
          If z = 3 Then      
            Shapes.Rotate(circ, 30 + m)     
          Endif            
        Endif  
      Endif 
      m = m + 30              
    EndIf       
    If x > 290 And x < 390 Then
      draw = 0          
      i = 0.1 + j
      If i < 0.4 Then   
        If z = 1 Then         
          Shapes.Zoom(tri, 1 + i, 1 + i)
        Else
          If z = 2 Then      
            Shapes.Zoom(rect, 1 + i, 1 + i)
          Else
            If z = 3 Then      
              Shapes.Zoom(circ, 1 + i, 1 + i)       
            EndIf     
          EndIf  
        EndIf      
        j = j + 0.1
      EndIf 
    EndIf          
    If x > 390 And x < 450 Then
      draw = 1
      Paint()
    EndIf      
    If x > 450 And x < 510 Then
      draw = 0
      j = 0
      GraphicsWindow.Clear()    
      GraphicsWindow.BrushColor = "Blue"
      GUI()
      draw = 0
    EndIf      
    If x > 530 And x < 590 Then
      draw = 0
      Program.End()
    EndIf      
  EndIf      
EndSub
Sub Paint
  If draw = 1 Then     
    GraphicsWindow.MouseMove = MouseDrag          
  Else
    If Mouse.IsLeftButtonDown Then     
      MouseAction()    
    EndIf
  EndIf     
EndSub 

Sub MouseDrag  
  If draw = 1 then  
    x = GraphicsWindow.MouseX
    y = GraphicsWindow.MouseY    
    If x > 10 And x < 600 And y > 10 And y < 320 Then    
      If Mouse.IsLeftButtonDown Then
        GraphicsWindow.DrawLine(OrgX, OrgY, x, y)
      EndIf     
    EndIf  
    OrgX = x
    OrgY = y
  EndIf
EndSub

To see the answers to these questions, go to the Answer Key page.

Next Lesson