Week 16. INTERFACE AND APPLICATION PROGRAMMING

write an application that interfaces with an input &/or output device that you made, comparing as many tool options as possible.

WARNING!!! This webpage is following a different template than the rest of the assignment as I need a blank html page to embed the processing design here below

Assignements

Described your process using words/images/screenshots
Explained the the GUI that you made and how you did it
Outlined problems and how you fixed them
Included original code

Feedback: This is really fun to see sensor data (from an arduino) being displayed on your screen thanks a script in procesing. I attempted to do the same in the software Blender thanks to a class we got but this was unfortunately too complex for me to produce.

Embedding a processing sktech onto my mysite

To achieve this, i followed a well explained tutorial that you can find here. Below are the main steps I followed

1. Open an existing processing sketch that I slightly modified to understand the code better (line length, color background)
1. Saved my processing file
2. Export the processing files to the same folder where you will be creating your html page (This is very important as I found out a html page referencing a processing sketch that is in a different folder will not work.

In your website

1. Create a new HTML document
2. Place a copy of your Processing PDE file into the same folder as your HTML document. In this example our PDE file is named "Processing1.pde"
3. Place a copy of the processing.js library file into the same folder as your HTML document. (It needs to be in the same folder) You can get a copy of this file from the processingjs.org website
4. In the head of your document, place the following code to load in the processingjs library:
```
<script type="text/javascript" src="processing.js"></script>
```
In the body of your document create a canvas tag that references your PDE file, like this:
```
<canvas data-processing-sources="myProgram.pde"></canvas>
```

Finally in the header of your html page, place the following css to create the canva that will display your processing scrip

 < style type="text/css">
			pre {
				background-color: #EEE;
				padding: 15px;
			}
			
			#theCanvas {
				width: 500px;
				margin: auto;
				border: 5px solid black;
				display: block;
			}
		></style type="text/css">

Here's a live example (click and move your mouse to draw)

Notes from the instructables that I have not tried:

If you are planning on using external artwork you will need to upload your assets to your website along with your PDE source code file. Then add the following "preloader" directive at the top of your sketch as a comment - this will tell ProcessingJS to have the files available when your sketch begins running.

/* @pjs preload="file1.png","file2.png","file3.jgp"; */

Links

(processingJS library) Main source of this instructable

Using processing to graphically represent the data you are getting from your arduino sensor

I wanted to get the data from the pressure sensor I was working on with Arduino (Pee-ometer) project. Here are the steps I followed:

Note that to make the readind of the data in Arduino more easy to read, I used rolling average rather that raw sensor data, to avoid the value display changing too frequently.

In Arduino

Check the data in Arduino Monitor, to ensure you are tracking the right data, in my case Serial.println("average");

Close now the serial monitor as it is the using your USB port to communicate with your monitor, and you will need the port free to communicate with processing.

In the Arduino code add: void setup(){ while (!Serial); delay(1000); Serial.begin(9600);

In Void loop: Serial.write(average);//Serial communication This is the data I will be sendint to processing

Send the code to Arduino

In Processing

We had in class a tutorial of Processing, which helped me further understand how the graphical representation in processing was working. I was not able to create a whole new sketch on my own (I only modified an existing one). For my final project I will look into creating a sketch in Processing because it represents data beautifully, and can commmunicate 2 ways with Arduino (Make a light blink for instance if touching a button on a a screen

The imporant part in processing is to ensure it gets the data you are sending from Arduino. In My case, those are 3 lines of code in the processing script

import processing.serial.*; //Import Serial library

Serial port; //Serial port name // object

PrintWriter output; //Text file for writing sensor data.

Links

Arduino sketch to collect data input from the Force sensor and send those data to the serial port

Processing sketch to receive data from the serial port and display it on the screen real time

Interface of data in blender from data coming from Arduino