Week 16. Interface and Application Programming¶
This week we learnt about Interface and Application Programming. There are different programming languages, device interfaces, data interfaces, user interfaces, graphics, multimedia, VR/AR/MR/XR, math, performance, deployment involved.
As usual, this week we have individual and group assignment:
- Individual assignment: write an application that interfaces with an input and/or output device that you made.
- group assignment: compare as many tool options as possible.
Learning Process Documentation¶
Python¶
I’ve learnt a tiny little bit of Python, which was said to be a powerful-yet-easy-to-get-started language. This time I want to pick it up and learn it in a more structural and systematic way.
I followed Al Sweigart’s book Automate the Boring Stuff with Python: Practical Programming for Total Beginners to get started.
Apart from learning basics such as math, data types, variables, flow charts, boolean values, comparison operators etc., I learnt to write a simple code of a ‘guess a number game’, which gave me excitement and encouragement!
Here is the code for my guess game: Guess a number between 0 and 50 within 9 guesses.
#This is a modified guess the number game.
import random
secretNumber = random.randint(0, 50)
print( 'I am thinking of a number between 0 and 50.')
#Ask the player to guess 6 times.
for guessesTaken in range (1, 10):
print('Take a guess.')
guess = int(input())
if guess < secretNumber:
print('Your guess is too low.')
elif guess > secretNumber:
print('Your guess is too high.')
else: break #This condition is the correct guess!
if guess == secretNumber:
print('Good job! You guessed my number in ' + str (guessesTaken) + ' guesses!')
else:
print('Nope. The number I was thinking of was ' + str(secretNumber))
And based on the previous learning, I managed to make a guessing game in Chinese. And here is the code:
#这是一个猜数字的游戏
import random
secretNumber = random.randint(0, 100)
print('这个数字在0到100之间')
#参与者只能猜10次
for guessesTaken in range (1, 11):
print('请猜一个数字。')
guess = int(input())
if guess < secretNumber:
print('你猜的數字太小了。')
elif guess > secretNumber:
print('你猜的数字太大了。')
else: break #猜到对的数字就停止
if guess == secretNumber:
print('太棒了！你在' + str(guessesTaken) + ' 次猜中了!')
else:
print('不对哦。我的数字是' + str(secretNumber))
Python Web Serial Console¶
I also followed the Fab Academy tutorial Python Web Serial Console.
First of all, I opened the terminal at my Mac, and put in the following code:
sudo pip install pyserial tornado multiprocessing
Next, I open IDLE, “File => New File”, copied the following code into the new file.
<!DOCTYPE HTML>
<html>
<head>
<style>
body { margin: 0px; padding: 20px; }
#received { width: 500px; height: 400px; border: 1px solid #dedede; overflow-y:scroll;}
#sent { width: 500px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="static/main.js"></script>
</head>
<body>
<h1>Websockets serial console</h1>
<p>Data received from serial port</p>
<div id="received">
</div>
<button id="clear">Clear</button>
<p>Send data to serial port</p>
<form id="sent">
<input type="text" id="cmd_value">
<button id="cmd_send">Send</button>
</form>
</body>
</html>
And then click “File => Save As”, save it as this file: python HTML 5.html
When I double click the above-saved file, it turned into the Websockets serial console.
Pure Data - Arduino¶
I followed this tutorial - Pure Data to Arduino Over Serial to try Arduino programming. One of the lucky parts of working at Seeed is I can always get an Arduino board to use no matter in which office :D First of all, I downloaded Pd-Extended[http://puredata.info/downloads/pd-extended].
I downloaded and installed successfully.
Now I connected Arduino to my MacBook and flash Arduino with the following code.
#include <SoftwareSerial.h>
SoftwareSerial mySerial(0, 1); // Change to whatever you hooked
// RX, TX up to
void setup() {
mySerial.begin(9600);
}
void loop() {
for (int i=0; i<255; i++) {
mySerial.write(i);
delay(100);
}
for (int i=255; i>0; i--) {
mySerial.write(i);
delay(100);
}
}
And then I copied the following code to a txt. file and changed the file name to SimpleExample.pd
#N canvas 499 140 450 300 10; #X msg -158 30 devices; #X floatatom -120 111 5 0 0 0 - - -; #X msg -94 32 open 2; #X obj -120 78 comport 2 9600; #X msg -37 33 close 2; #X obj -117 177 osc~; #X obj -116 212 dac~; #X obj -120 140 * 10; #X connect 0 0 3 0; #X connect 1 0 7 0; #X connect 2 0 3 0; #X connect 3 0 1 0; #X connect 4 0 3 0; #X connect 5 0 6 0; #X connect 5 0 6 1; #X connect 7 0 5 0;
However, when I used PureData to open the above-saved file. It ran into the following error.
[comport] ** WARNING ** port #2 does not exist! (max == 1)
[comport] opening serial port 2 failed!
[comport] ** WARNING ** port #2 does not exist! (max == 1)
[comport] ** WARNING ** port #2 does not exist! (max == 1)
[comport] ** WARNING ** port #2 does not exist! (max == 1)
[comport] ** WARNING ** port #2 does not exist! (max == 1)
[comport] ** WARNING ** port #2 does not exist! (max == 1)
[comport] ** WARNING ** port #2 does not exist! (max == 1)
[comport] ** WARNING ** port #2 does not exist! (max == 1)
[comport]: available serial ports:
0 /dev/tty.Bluetooth-Incoming-Port
1 /dev/tty.usbmodem14201
In the tutorial, it mentioned the port might be different on different laptop. However, I do not know how to find out my port number. So I stuck here. I will need to figure it out. Will update later when I find the solution.
When I looked at the error message again, I noticed “hey, isn’t it shown here?!(at the last three lines of the error message.)
[comport]: available serial ports:
0 /dev/tty.Bluetooth-Incoming-Port
1 /dev/tty.usbmodem14201
So I decided to try port 0 first. I continued following the tutorial to proceed. Here is how to change the port number:
1. In the Pd-Extended window, click: Edit => Edit Mode.
-
Now move the cursor to the “open 2” section, click it to edit, change 2 to 0.
-
Go back to step 1, uncheck “Edit Mode”
-
Now when I click “devices” and “open” button, there is no error messages any more.
-
I tried “test audio” by clicking: Media => Test Audio and MIDI, and this window popped up.
-
I tried clicking different options and there are different tones & voices.
Next, I wanted to follow the tutorial to continue. However, I was stuck again! I couldn’t find “compute audio” in my Pd window. With a lot of searchings, still no solutions yet. Will keep digging and update later.
And then I found out I made another mistake. I blinding chose Port 0. However, when I checked it again, Port 0 is bluetooth, and now I am using Arduino, I should choose Port 1 - /dev/tty.usbmodem14201.
So I followed the previous steps to change the port number. And voila! It worked. Even though I still couldn’t find “compute audio” on my Pd window, after checking IN OUT and DSP (which is short for digital signal processor), I got the result of rising and falling tones, with the bars of IN OUT changing as well as the values changing on the serial monitor. See the video below :)
Device Interfaces¶
We’ve encountered several device interfaces, among which USB is the most common one.
And in the past weeks of Fab Academy journal, I’ve learnt to use the following interfaces: serial, FTDI. And a few years back, I’ve also used IFTTT, which is very easy to use.
Data interfaces¶
The most commonly seen and used data interface is sheets, such as Google sheets. And there are other database systems as well.
My Interface Application¶
I decided to use the Light sensor that I made from the Input Device week for this week’s assignment with Processing.
With the following Arduino already uploaded to the board, I connected the Light Sensor board to my computer with a USB-TTL directly.
Since I already have Processing installed on my MacBook, I directly opened the Processing client, using the following code (modified from here) to create the interface to display and visualize the light sensor value.
import processing.serial.*;
Serial myPort;
int lf = 10;
void setup(){
size(500,300);
myPort = new Serial(this,"/dev/cu.usbserial-1420",9600);
}
void draw(){
while(myPort.available() > 0){
String str = myPort.readStringUntil(lf);
//println(str);
if(str!=null){
int value = Integer.parseInt(trim(str));
int nValue = (value-200)*200;
println(nValue);
background(nValue);
}
}
}
When the light sensor was exposed to different light strenth, the value changes and the color of changes as well, please see the following screenshot.
And here is the video of how it works.