Drawing Canvas – MIT App Inventor Tutorial

Create a drawing canvas on app inventor that allows you to pick colour from all spectrum. In this app we will also add several drawing tools such as drawing straight line, circle, and rectangle. On top of that, you will be able to share your drawing through any other applications on your phone!

UI Components:
Horizontal Arrangement, Vertical Arrangement, Horizontal Scroll Arrangement, Button, Slider, Sharing, Canvas

All three sliders – Min value 0, Max value 255

Blocks

RGB Colour Mixing

All colours can be produced by combining red, green and blue. Each colour’s intensity is represented using a value between 0 and 255. In the project, three sliders are used to modify the intensity of each colour and when the value of any slider changed, we will display the resulting colour using the ColourButton and update the canvas paint colour at the same time.

Pen Tool

The variable tool is created to keep track of the drawing tool we are using so the functionality of each tool will not overlap. Update the tool variable when PenButton is clicked. When your user interacts with the canvas by dragging their finger on it, the Canvas.Dragged event will be triggered. Call the Canvas.DrawLine function if the tool in use is “pen”.

Eraser & Clear Tool

The clear button will clear the canvas which can be implement easily by simply calling the Canvas.Clear function.

In MIT App Inventor, there isn’t any function to erase paint on canvas. However, we can simulate the eraser effect by drawing lines with the paint colour set to the colour of your canvas.

Line Tool

Line tool is used to create a straight line on the canvas. First, use variables to store the coordinate when the user touch down on the canvas. When user release their touch on the canvas, join the coordinate at that point with the initial stored coordinate to form a line.

Circle Tool

To draw a circle using Canvas.DrawCircle function, we need to provide a value for circle radius. We will use the coordinate of touch down as the center of circle and the coordinate of touch up as the edge of circle. Then, calculate the radius by finding distance between two coordinates using formula below:

In this example, we created a function named calculateRadius, calculate the result and return it as an argument for the Canvas.DrawCircle function.

Rectangle Tool

Create a function named drawRectangle, that takes two diagonal points as arguments. We will able to create a rectangle using Canvas.DrawShape function by providing a list of all four points of a rectangle as below:

Share Drawing

When the function Canvas.save called, it will return the path where your drawing will be saved. We will then use the Sharing.ShareFile to share the file at the path.

Complete Program

Dungeon Whack – MIT App Inventor Tutorial

dungeon-whack-mit-app

We will build a game similar to the classic Whac-A-Mole game. The user will need to tap on the orc that shows up randomly on the screen within a limited time.

UI Components:
Canvas, Sprite, Label, Horizontal Arrangement, Button, Clock, TinyDB, Sound
Clock – Disable both clock by default

Assets:
Sprite image – https://csplayground.io/wp-content/uploads/2021/01/skull.png
Hit sound – https://csplayground.io/wp-content/uploads/2021/01/hit.wav

Blocks

Countdown Timer

The default value of CountdownClock’s time interval property is 1000, which means the event will trigger every 1000 milliseconds (one second). When the start game button clicked, we enable the CountdownClock to start the clock. Every time the clock event is triggered, update the countdown value on the screen and reduce the value of the counter. If the countdown value equals zero, disable the clock.

Moving the Sprite

Create a procedure and in the procedure, we move the sprite to a random X and Y position from 0 to the end of the canvas. Similar to the countdown timer, enable the MoveSpriteClock when StartGameButton click. In the MoveSpriteClock timer event, we call the moveSprite procedure. If the countdown equals zero, we stop the clock.

Updating Score

Create a variable to keep track of clicks on the sprite. Use the canvas touched event, check if the sprite is touched. If so, increase the value of the score and update the ScoreLabel. The touchedAnySprite parameter is a Boolean value.

Reset Game State

Create a procedure to reset the game states when prior to game starts.

Make Sprite Clickable Only During Gameplay

Create a variable with a Boolean value to keep track of the current state – started (true) or end (false). Add an if statement to the canvas touched event so that score will only be updated when the game has started. In the below example we used a compound operator AND to join two conditional expressions.

Update the game state when the countdown ends. Here, the code was refactored into a procedure.

Sprite Clickable Only Once Per Interval

Create a variable isHit to keep track if the sprite is hit within the time interval. Modify the canvas touched event so that the score will only be updated when all three conditions are satisfied.

Complete Program

To-do List – MIT App Inventor Tutorial

todo app

Create a to-do list app that can help you to get all the tasks out of your head and manage them on your phone anytime.

UI Components:
Label, Horizontal Arrangement, Button, ListView, TinyDB

Pseudocode:

Blocks

Initialization

First, create a variable named items to store our list of to-do items. We are not able to add or remove item from list stored in tinyDB, hence we will perform the operation on items variable prior saving the list into tinyDB.

When the app screen initialized, we will get first get the value stored in tinyDB and assign it to our items variable. If no value exists in tinyDB, we assign it with an empty list. Then, update the ListView with value of items.

Add Item

To add an item, first we add the user’s input in the textbox to our items variable. Then, store the value to tinyDB and update the ListView with the lastest list:

Remove Individual Item

To remove the selected item, we remove the item in items based on the index of selected item in our ListView. Then, we store the items to tinyDB and update the ListView:

Remove All Items

To remove all items in list, all we need to do is to set our items to an empty list. Again, we store the empty list to tinyDB and update the ListView:

Complete Program

Enhancement

  1. Ask for confirmation prior clearing all the items

Number Guessing Game – MIT App Inventor Tutorial

The app will pick a number randomly from 1 to 100. You will need to keep guessing numbers until you find the selected number. Each time you guess, the app will tell you if your guess was too high or too low

UI Components:
label, textbox, button

Pseudocode

Blocks

Complete Program

Learn Programming with Blockly

Blockly Editor Demo

Learning how to program for younger kids is tough. They need to navigate through syntax of different language instead of focusing on the programming principles and problem-solving skill. Although there are many good learning resources and interactive learning platform, it still takes a huge amount of effort for kids to get familiar with the syntax of a text-based programming language. Kids will get frustrated and lose interest in programming.

This is where Blockly comes in; Blockly is a block-based programming language developed by Google. It uses graphical blocks to represent code concepts like variables, loops, logical expressions and more. It allows students to focus on learning the programming principals without having to worry about the syntax. Unlike the popular coding platform Scratch (which built on top of Blockly codebase), Blockly has lesser abstraction which is more closely represent text-based programming languages thus allowing students to carry forward their skill and pick up popular programming languages much easier.

How to Use Blockly?

To learn or teach programming using Blockly isn’t exactly straight forward. Even though there are many fantastic platforms that uses Blockly such as MIT App Inventor, there aren’t many that focuses on teaching programming principles.

To use Blockly on its own, one can setup the visual editor using Blockly’s open source library, and Google provides an comprehensive guide and reference for developers. However, this might not be an option for teachers or students which do not have the technical skills to setup the visual editor. Out of our own needs, we setup a visual editor with a simulated console to provide feedbacks. You can access the editor here.

Interactive Blockly Tutorial

In csplayground.io, we created an interactive Blockly Tutorial with more than 50 activities to help you learn coding with Blockly. Try our activity below or sign up a free account to use it for learning or teaching. We included a classroom management feature which allow teachers to monitor students’ progress and help them to modify their code.