Our goal was to create a web-based application similar to Scratch that teaches children how to code. However, unlike Scratch, MONKEyCAR (the name of our application) will work with the real smart-car, which will perform the actions that the child “programmed” in our app, such as "Move 10 steps forward".
Ultimately, our hopes in making this program was to be able to teach and inspire kids to code in a more fun and interactive way! Technology is being integrated more and more into our day to day lives, with a larger number of people wanting to learn programming. However, for young children, programming might be a bit intimidating at first, and our goal is to create a user-friendly, supportive platform that will help guide them and realise that programming can be a lot of fun.
M ichael Larsson: BrakeLightBoy
O scar Reína Gustavson: gusreinaos
N ia Georgieva: gusniage02
K wabena Asare Boström: TheRealKwabena
E lisa Ahlbäck Norris: elisaahlback
y
CAR lotta Hillger: carlottahillger
We had a lot of different ideas on how to implement this idea, however we soon realised that some of them were too ambitious for the context of this project. We still want to highlight some of the other ideas we had:
- Different game modes depending on difficulty
- Buttons that are written like code that you can just press (like in Scratch)
- Storing different profiles (maybe with completion points, command history, favourite programmes, ..)
- Providing some challenges (like specific actions to do with code, code with blank spaces, change code to do something different, etc)
- Leaderboards for the challenges to encourage more coding
- Adding some sounds so that the car could make cars depending on certain conditions
✨ However, this is what we finally envisioned MONKEyCAR to look like:
- Code blocks that you can put together like puzzle pieces and can be executed at the same time
- Include basic movements like forward, backwards, left, right
- Teach one important programming concept like for loops or if statements
- Have some kind of canvas where the code blocks can be dragged into
- Have a play button that sends the commands to the car and a stop button that stops the execution
- Using the sensors to make sure no obstacles are hit and send a message asking the user to place the car somewhere else
We were primarily using HTML, CSS and JavaScript in order to develop our website and C++ for the execution of the commands by the car.
If you are not working with the physical car you will need to download and setup the emulator SMCE. Below you can find specific instructions where to download it and how to start working with it. Before you do that you should clone this repository on your own device. Below you will find some information on the included files and folders and which ones are relevant for you. You will also find an explanation on what the different code blocks can do.
Download and open SMCE here and follow the steps below:
 |
 |
  |
|---|---|---|
| Press + to add a new arduino sketch | Add a new sketch | Select the file "smartcar.ino" from the folder "arduino" |
 |
 |
 |
| Select the added sketch | Compile the sketch | Press start to run the sketch |
- Open the file "index.html" located in the folder "gui" in a browser of your choice
- The code blocks in the selection menu on the left all represent a different action that the car can perform
- They can be dragged into the canvas on the right, where they together form a code sequence that can be executed by the car
- When the play button on top of the page is pressed the code blocks within the canvas are translated into commands that are sent either to the physical car or the emulator
- The clear button clears out all the blocks in the canvas. Before that is done it asks the user for permission.
Move x seconds forward takes as input the number of seconds the car is supposed to drive forward.
Move x seconds backwards takes as input the number of seconds the car is supposed to drive backwards.
Turn x degrees left takes as input a degree and turns the car to the left by that number.
Turn x degrees right takes as input a degree and turns the car to the right by that number.
Turn around does not take any input but makes the car turn 180° so that it can go into the other direction.
Spin around does not take any input but makes the car drive spin by 360°. This does not refer to turning on the spot but rather to making a full circle
Wait x seconds takes as input the number of seconds the car is supposed to stand still before performing the next action
Repeat x times is a special block that is resembling the programming concept of for loops, instead of just executing everything sequencially. The code block has a field where all the other code blocks may be dragged into. Those code blocks are then executed x times. It is not possible to drag this code block into another "repeat x times" block.
Play button: When the play button is pressed all the elements that are inside the canvas are read and translated into commands for the car. Those are then sequentially send to the car with MQTT. When the car receives a message it executes the action specified in that message.
Stop button: The stup button sends another message to the car to stop the execution of the code sequence. However, it only stops the execution of the sequence, not the execution of an action. That means that if an action like "move 10 steps forward" is not stopped until those 10 steps are finished. It simply does not execute the messaged following that action. In case you need to stop the car during one action you can make use of our obstacle avoidance and place an obstacle to the front/back of the car depending on the direction it is going in. That will stop the movement of the car immediatly.
Clear button: The clear button is used to clear all code blocks from the canvas. Before doing that however, the user is asked for confirmation.
Trash can: The trash can on the right is to delete single code blocks from the canvas. The user can drag the code blocks into the trash to delete them. If a repeat block is dragged into the trash can all the blocks inside are deleted as well.
Here is a link to our demo video: https://youtu.be/aWcq6sd0ovw
If you want to learn a little more about how the system works, how our code is structured and how the different components work and communicate with each other this is the section for you. 👇
The components described above can also be recognized in our folder structure. The main two folders are "gui" and "arduino" which represent the components MONKEyCar Website and SmartCar.
gui
The folder gui includes a folder called assets which consists of the pictures for buttons, our logo and the example gui. It also includes the index.html file, which includes all the html code and is supposed to be opened in a browser to use our application. Furthermore we have a folder for the JavaScript code, one for the css styles and one for the mqtt connection calles "paho.javascript-1.0.3". Note that the files in the folder "paho.javascript-1.0.3" are not written by us but downloaded from here.
arduino
This folder contains another folder called "smartcar" which contains the file "smartcar.ino".
The main components of our system are the GUI (and the logic for that), the MQTT broker and the arduino board running on the physical car or in the emulator. This diagram shows the basic components and how they interact with each other. In the file structure you can cleary see a separation between the arduino code and the gui. However, we do not have a folder for the mqtt broker. We are using an online broker and therefore that is running on the server "broker.emqx.io". The connection to that server from the webpage is part of the JavaScript file "script.js" as well as the folder "paho.javascript-1.0.3". The connection from the arduino side is embedded in the file "smartcar.ino".
if you want to go into a little more detail we recommend looking at the following diagram. It further describes how our compontents interact with each other. As you can see we also added sub-components, like the sensors for the car or the relevant GUI components. Don't get confused why we have two car components. This is just supposed to showcase, that we can either work with the physical car or with the car in the emulator.
