IAC 2024 - IA Fast Track to Search Focused AI Solutions
3.4 events and interactivity
1. Microsoft® Small Basic Events and Interactivity Estimated time to complete this lesson: 1 hour
2. Events and Interactivity In this lesson, you will learn about: Using keyboard events in your program. Using mouse events in your program.
3. Introduction to Events In other words, you can create an interactive program in Small Basic by defining events that trigger an action in response to user inputs. This lesson introduces you to events and controls with which you can add interactivity to your Small Basic programs. Interactivity here also includes control events that trigger an action on the click of a button or when some text is entered in a text box.
4. Keyboard Events Keyboard events produce an action when a certain key is pressed. There are two keyboard events—KeyDownand KeyUp. These events are defined as operations of the GraphicsWindow object. KeyUp raises an event when a key is released on the keyboard. KeyDown raises an event when a key is pressed down on the keyboard.
5. Keyboard Events Let’s demonstrate keyboard events in Small Basic with a simple program that allows you to rotate a shape on the graphics window by pressing a key on the keyboard. In this example, you use the Return key on the keyboard to rotate a rectangle shape in the graphics window. When you press the Return key, the rectangle rotates, and on releasing the Return key, the rectangle returns to its original state.
6. Mouse Events Let’s see how we can use these events in a program. MouseDown raises an event when the mouse button is clicked. MouseUp raises an event when the mouse button is released Like keyboard events, you can create programs in Small Basic that work with events based on mouse clicks. Mouse events generate actions in your program with the click of a mouse. MouseMove raises an event when the mouse is moved around in the graphics window.
Notes:In this example, you use the Return key on the keyboard to rotate a rectangle shape in the graphics window. When you press the Return key, the rectangle rotates, and on releasing the Return key, the rectangle returns to its original state. In the editor window, you first enter the code to add a rectangle by using the AddRectangle operation of the Shapes object. Next, you set the location of the rectangle by using the Move operation.Then, you identify the key with which the rectangle can be rotated. You declare the key and assign it a suitable variable name.After that, you use the KeyDown event of the GraphicsWindow object and declare a subroutine to rotate the shape when the key is pressed.Similarly, you use the KeyUp event and declare a subroutine to rotate the shape when the key is released.On clicking Run, your program gets executed. Agraphics window is displayed with a rectangle in the center. When you press the Return key the rectangle rotates; when you release the Return key, the rectangle rotates back to its original position.Code:GraphicsWindow.Height = 300GraphicsWindow.Width = 300GraphicsWindow.Title = "Graphics Window"shape1 = Shapes.AddRectangle(100, 50)Shapes.Move(shape1, 100, 125)return = "Return"GraphicsWindow.KeyDown = keydownGraphicsWindow.KeyUp = keyupSub keydownIf GraphicsWindow.LastKey = return thenShapes.Rotate(shape1, 90)EndIfEndSubSub keyupIf GraphicsWindow.LastKey = return thenShapes.Rotate(shape1, 0)EndIfEndSub
Solution:GraphicsWindow.Hide()w = 620h = 450GraphicsWindow.CanResize = "False"GraphicsWindow.Width = wGraphicsWindow.Height = hGraphicsWindow.Top = (Desktop.Height-h) / 2GraphicsWindow.Left = (Desktop.Width-w) / 2GraphicsWindow.Show()GraphicsWindow.Title = "Events and interactivity"GUI()Controls.ButtonClicked = MouseActionSub 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) EndSubSub MouseAction x = GraphicsWindow.MouseX y = GraphicsWindow.MouseYGraphicsWindow.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)EndIfIf y > 375 And y < 405 Then draw = 0 j = 0 z = 2 rect = Shapes.AddRectangle(100, 100)Shapes.Move(rect, 250, 150)EndIfIf y > 405 And y < 435 Then draw = 0 j = 0 z = 3 circ = Shapes.AddEllipse(100, 100)Shapes.Move(circ, 400, 150)EndIfEndIfIf y > 360 And y < 420 Then If x > 230 And x < 290 Then draw = 0 If z = 1 Then Shapes.Rotate(tri, 30 + m)ElseIf z = 2 Then Shapes.Rotate(rect,30 + m) ElseIf z = 3 Then Shapes.Rotate(circ, 30 + m) EndifEndifEndif m = m + 30 EndIfIf x > 290 And x < 390 Then draw = 0 i = 0.1 + jIf i < 0.4 Then If z = 1 Then Shapes.Zoom(tri, 1 + i, 1 + i)ElseIf z = 2 Then Shapes.Zoom(rect, 1 + i, 1 + i)ElseIf z = 3 Then Shapes.Zoom(circ, 1 + i, 1 + i) EndIfEndIfEndIf j = j + 0.1EndIfEndIfIf x > 390 And x < 450 Then draw = 1 Paint()EndIfIf x > 450 And x < 510 Then draw = 0 j = 0GraphicsWindow.Clear() GraphicsWindow.BrushColor = "Blue" GUI() draw = 0EndIfIf x > 530 And x < 590 Then draw = 0Program.End()EndIfEndIfEndSubSub PaintIf draw = 1 Then GraphicsWindow.MouseMove = MouseDragElseIf Mouse.IsLeftButtonDown Then MouseAction() EndIfEndIfEndSubSub MouseDragIf draw = 1 then x = GraphicsWindow.MouseX y = GraphicsWindow.MouseYIf x > 10 And x < 600 And y > 10 And y < 320 Then If Mouse.IsLeftButtonDown ThenGraphicsWindow.DrawLine(OrgX, OrgY, x, y)EndIfEndIfOrgX = xOrgY = yEndIfEndSub
