Newer
Older
#### [notes](http://academy.cba.mit.edu/classes/interface_application_programming/index.html) + [video](https://vimeo.com/412495586)
This week is about writing an application that can be interfaced by a user with an external input &/or output device.
Software programming is completely new for me. So I'm going to try briefly whatever I can.
I start with processing as suggested by Steven.
A good way to learn about the what and why of 'Processing' is this essay ['A Modern Prometheus'](https://medium.com/processing-foundation/a-modern-prometheus-59aed94abe85) by the initiators of the project.
Processing is basically a program that connects graphic design to computer science. It has a set of elements for creating visual design with code. The processing website has a good set of [video tutorials that covers the basics](https://processing.org/tutorials/).
Here is a screenshot of a sketch I wrote while learning the basics of the code structure, the void setup and draw, the-coordinate system, and use simple visual elements - shape, colour in greyscale and rgb, interact with the mouse, conditional statements...
The processing PDE (processing development environment) looks very similar to the Arduino IDE (integrated Development Environment). I learnt that the Arduino Env was inspired by the Processing Env, and in the process learnt how python and other coding systems are all related and are developed from each other.
After playing around with some examples from the P3 library, I really like the program, there are some features like tweak (that visually helps tweak variable values), the error message (that clearly states the error in the code, instead of giving generic error 403292348 that you don't really understand). I look forward to using a lot of [libraries](https://processing.org/reference/libraries/) and the the debugger () that really makes it easy and fun to use.
I found that keeping the [Programming reference](file:///Applications/Processing.app/Contents/Java/modes/java/reference/index.html) open is quite useful while making a sketch from scratch.
Software Switch + hardware LED using Processing & Arduino IDE
---
For this week's assignment I do a simple virtual switch. A button made in processing will control a hardware LED connected to Arduino. With the help of [this guide](https://tutorial.cytron.io/2019/07/26/simple-gui-to-control-led-on-arduino-with-processing/).
The code for Arduino is [here](./images/app/LED_GUI_A.zip). Upload it to an Arduino Uno which has an external LED & resistor connected to Pin 3.
To check it you can open the serial monitor, and on typing in 't' you can switch on and switch off the LED like so:
<iframe
src="http://academany.fabcloud.io/fabacademy/2020/labs/barcelona/students/mitalee-parikh/app-1.mp4">
</iframe>
The code for Processing is [here](./images/app/LED_GUI_P.zip).
You need to mention the port of the Arduino in the processing sketch to interface them together. You can find the port name by typing in this in the terminal:
```
ls /dev/tty.usb*
This lists the serial ports connected on Mac OS system. Run the P3 program, and a virtual button will pop up.
You can control the external LED through the virtual button like so:
<iframe
src="http://academany.fabcloud.io/fabacademy/2020/labs/barcelona/students/mitalee-parikh/app-2.mp4">
</iframe>
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
Next, I use the hello board I made in electronic design week to interface with a software switch.
This board has:
LED on pin 8
Button on pin 7
Arduino Code:
```
#define btn 7
#define led 8
#include <SoftwareSerial.h>
SoftwareSerial mySerial(0, 1); // RX, TX
bool pressed = false;
void setup() {
pinMode(btn, INPUT_PULLUP);
pinMode(led, OUTPUT);
mySerial.begin(9600);
}
void loop() {
if (digitalRead(btn) == LOW && pressed == false)
{
pressed = true;
mySerial.write(byte(0x01));
delay(100); // debouncing
}
if (digitalRead(btn) == HIGH && pressed == true)
{
pressed = false;
mySerial.write(byte(0x02));
}
if (mySerial.available())
{
byte msg = mySerial.read();
if (msg == 0x0A) digitalWrite(led, HIGH);
if (msg == 0x0B) digitalWrite(led, LOW);
}
}
```
References
---
[Processing story](https://medium.com/processing-foundation/a-modern-prometheus-59aed94abe85)
[Processing tutorials](https://processing.org/tutorials/)
[connecting Arduino & Processing with this sparkfun guide](https://learn.sparkfun.com/tutorials/connecting-arduino-to-processing/all#introduction)
[Arduino + Processing](https://www.hackster.io/hardikrathod/control-arduino-using-gui-arduino-processing-2c9c6c)
[Radar Project](https://howtomechatronics.com/projects/arduino-radar-project/)
[with BT module](https://randomnerdtutorials.com/getting-started-with-mit-app-inventor-2-and-arduino/)
[MIT app inventor + arduino](https://howtomechatronics.com/tutorials/arduino/how-to-build-custom-android-app-for-your-arduino-project-using-mit-app-inventor/)
[MIT app inventor](https://appinventor.mit.edu/)
[ai2](http://ai2.appinventor.mit.edu/)
[with python + tk](http://arduinolearning.com/code/led-control-with-arduino-and-python-tkinter.php)
[this doc](http://archive.fabacademy.org/fabacademy2017/fablabsingapore/students/216/exercise16.html)
[and this](http://fab.academany.org/2020/labs/singapore/students/noel-kristian/exercise12.html)
[and this](https://eatpoopandgrowstrong.github.io/FDFAB/hub/interfacingandapplicationsprogramming.html)
[Open Processing](https://openprocessing.org/)
[D3js](https://d3js.org/)
[P5js](https://p5js.org/)