In this week, I learned programming which allows computer to communicate with PCB. I had almost no experiene of programming to build thoese user interface but I managed to make it work.
Assignment
individual assignment: Write an application that interfaces with an input and/or output device that you made, comparing as many tool options as possible.
group assignment: compare as many tool options as possible
Learning outcomes
Interpret and implement design and programming protocols to create a Graphic User Interface (GUI).
Have you:
Described your process using words/images/screenshots
Explained the the GUI that you made and how you did it
I started learning serial communication. Serial communication tutorial in Sparkfun was easy to follow and well explained. Pararel communication allows to send multiple bits at the same time through wires (buses) connect each pin on two devices. Each pin sends/ receives 0 or 1 at the same time. With serial communication, one bit is sent at a time through one wire. Serial communication is often used when there are limited I/O pins on the board, such as my board or Arduino. Synchronous serial is a serial interface where all devices share a common clock and data is paired with the clock signal. Asynchronous serial communication means transferring data without external clock signal. Asynchronous serial communication is very common and good to minimise wires and I/O pins required for transmission of data, but we need extra effort to match data which is transferred and data which is received. The baud rate is how fast the data is sent. The unit of the baud rate is bps (Bits-Per-Second), which shows how long takes to send one bit. The baud rate of transmitting and receiving need to be the same. The data is sent as bits. Bits are transferred as chunks which include start bit in the beginning, stop bit(s) at the end, data bits in the middle. 8 data bits is one of the most commonly used serial protocol. I used FTDI cable for serial communication of PCB and the computer. FTDI cable can be used only for one serial port. One FTDI cable cannot create two different port. However, it is possbile to have multiple serial communication ports opened.
Working with serial communication
My plan for this week's assignment was building user interface which shows a frog and interact with my board. I used hall effect sensor board which I made in week 12 to interact with the interface. In the interface, I wanted 1) the frog to be ready to jump (the frog goes down) when the magnet is brought close to the sensor, and 2) the frog to jump (the frog goes up) when the magnet is moved away from the sensor.
First I tried serial communication in Arduino IDE. Choose serial port to use FTDI cable for serial communication.
I used the simple board that I made in week 12. I connected hall effect sensor and LED boards also made in week 12 with this simple board so that I can test serial communication. I used the code from Arduino tutorial. I added the commands that LED turns on when the magnet comes I wrote a simple Arduino sketch that shows the value from the sensor in Arduino serial monitor. At the same time, I can see the sensor is working properly by LED turning on when the magnet gets close to the sensor.
For serial communication, we need to write command to tell pins to send and read data. It was confusing and I messed up at the beginning.In Eagle, when transferring data is described, the computer is the subject, such as:
TXD on FTDI means the computer transmits data to the pin on PCB, which means the pin on PCB receive data sent from the computer
RXD on FTDI means the computer receives data from the pin on PCB, which means the pins on PCB send data to the computer
But in the command such as in Arduino sketch or C, a pin on PCB is the subject, such as:
rxPin means the pin which receive data from the computer (which is described as TXD pin in Eagle)
txPin means the pin which transmit data to the computer (which is described as RXD pin in Eagle)
I connected FTDI cable with the board and followed the same steps as I described in week 9 to compile and upload the Arduino sketch. From dropdown menu in Tools, choose the right port which is identified on the FTDI cable when you run the sketch. I clicked the mark on the upper right corner to show Arduino serial monitor.
The LED turned on when the magnet came close to the sensor, but the serial monitor was continuously writing ????????, instead of value or any numbers and it did not make any changes wherever the magnet was. I also tried with another board with the same code but the serial monitor was also writing the same ?????.
I thought it might be the problem of Arduino serial monitor, so I tried another serial monitor. I downloaded a new serial terminal, Coolterm. There was a tutorial in Sparkfun website. This serial terminal works on Mac, and it shows the result in both ASCII (such as M, E, G) and hexadecimal (such as 4D, 45, 47).
Coolterm is easy to use. In Coolterm, every time when you change FTDI cable you need to set port (Option> Re-scan serial ports). The port names appears in Port section.
I uploaded the same Arduino sketch on my PCB, chose the right port in Option and pressed Connect on Coolterm to see the result. However, it did not send anything..
Possible reasons:
FTDI cable is not working - I tried with Marta’s FTDI cable. It still did not work.
There is some issue with Mac - I tried with Marta’s computer. It still did not work.
My board has some problem - I checked again with microscope, but I couldn’t find anything.
There is some problem in Arduino sketch - I tried with Marta’s code (C), and it worked.
Antti made serial communication work with Arduino sketch. I tried with Antti's sketch on Antti's computer. But the same sketch did not work with my board. With the same Arduino sketch, same FTDI cable, the same computer, but serial monitor was writing weird character when I tried with my board although it is the same ATTIny44A board. So the problem seemed to be in my Arduino sketch and/ or on my board.
I still didn’t get it why my board and Arduino doesn’t go along with, but I decided to modify Marta’s code (C) which was only one code working. I edited pins in her code. It worked fine on my Mac. However, the value from the sensor did not look correct.
I had another board that I hadn’t tested for serial communication, which I made in week 13. I used the board only for output week to make stepper driver work with the Arduino sketch. I tested with this board and the serial monitor printed the correct value as below. I could see the value also in Coolterm.
Values in Arduino serial monitor
Values in Coolterm
After I tried to program with C and went back to Arduino sketch, it became the same situation to the previous boards. I thought the board might become this situation (sending the wrong value), when I program with C. So I clicked bootloader in Tools in Arduino to set the right value for the fuses in the ATTiny. Later Iván explained that I needed to set the value of fuses to use an external clock of 20 MHz. Because the correct value for the fuses to use external clock was not set, the serial monitor could not show the correct values. Now all the boards are working with serial monitor with Arduino sketch.
Programming in Processing
I decided to use Processing as my interface. It is similar environment to Arduino and easy to use. We can write commands following the examples and run the commands, then graphic appears. First I used Jari’s temperature sensor code to get familiar with Processing. The code shows rectangle which has two colours, and depending on the sensor value, it changes the ratio of two colours. It worked finely with my hall effect sensor board.
I learned basics from tutorials, such as Coordinate System and Shapes, and watched several tutorial videos of Processing, such as video 1 and video 2. I wanted a frog to move when the magnet comes close to the hall effect sensor (and optionally with frog sound).
Following this example, I drew a frog in GIMP and saved as png format. I created the new folder named data in the folder where my Processing code was saved. I saved the frog image in the data folder. I wrote the commands to use the image in Processing.
PImage img; img = loadImage("frog.png");
Save the image in the folder
Commands to use image in Processing
I tried to modify Jari's temperature sensor code which rectangle moves up and down depending on the sensor value. In my case instead of rectangle I wanted the frog to move up and down depending on sensor value. I referred to the tutorial to understand the basic concept to move an object. I thought I can replace the rectangles to the frog image easily. My plan was setting initial position of the frog which y position is y+val, setting val as sensor value. I thought in this way, the frog moves depending on the value from the sensor. So I removed commands for the rectangles from Jari's code, and added commands to show the frog image and set the frog position. When I ran the modified code, the frog moved, but somehow the timing was not correct. Sometimes the frog was stuck and didn’t move or moved with too fast speed. It seemed like the signal from the board was slow.
Considering time limitation, I decided to make it very simple using two status to define the position of the frog instead of moving the position depending on the sensor value.
I identified two conditions (magnet is close or not) to define the frog's position in Arduino sketch which I am a little bit more familiar with. I wrote sketch which says:
“if the magnet comes closer (val is greater than 500) - write byte 1, else - write byte 0”.
And using these two conditions, I wrote simple code in Processing saying:
“if byte 1 is sent by the board - frog moves down, else - frog moves up”.
With this code, frog moved up and down. Arduino sketch and the code for processing I used to move the frog are as below.
I added sound referring to this tutorial video. I downloaded the sound of frog from YouTube video as mp3 format. I added library to use sound (Sketch> Import library> Add library> Minim).
I wrote the code as below to add sound in my interface.
Reflection
This week, I learned how to build user interface. In the beginning, it took time to figure out to make serial communicate work. I had almost no experience in designing user interface, but there are many examples and tutorials available, so using software, such as Processing, simple functions are not so hard to make. And I found there are many possibilities of for example activity for kids, connecting physical objects they make and the screen of the computer. I didn’t have much time to explore many functions and their coding, but I will learn more later!
Files
Here are the files I used for this week's assignment.