Week14, interface and application programming

This week is all about learning how to connect your device with a microchip to a computer and read out the values of the device on the screen of the computer. It is also possible to get input through the computer to the device.

Wednesday Global Class

The main thing Neil said is that if you want to develop yourself in this field you should learn Python and Javascript. He showed many examples of a cosinus/sinus combination in all these different programs. I thought this was not very inspirational, just a long list of possibilities and way too much to learn in one week.

Weekly Assignment

In my own words

Group assignment:

• Compare different tools Individual assignments:
• Make an interface with one of your own boards, you can choose to use input or output.

Planning this week

Thursday instruction

Henk showed what he did to complete the assignment, he started with some python-code that he found online, connected it to his own device and then started to alter different settings in the code so he could show what he wanted. By altering the python-code he learned to understand the parts of python that he needed to make an interface.

Group assignment

For the group assignment we wanted to see different tools and ways of coding, Nadieh was very helpful and since this is her work she was willing to give us a proper introduction to the different ways of making data visible. We really enjoyed the class activity

after this great introduction we followed a good tutorial for setting up a local server, which is really handy, because within this folder it is possible to put different sites and have it all working.

Individual assignments

Write an application that interfaces a user with an input &/or output device that you made

I really had no idea of any of this. so I first have to dive into the subject and then see what a possible goal could be for me this week. So on friday and in the weekend I have to do some learning and prepare myself for monday, when I will start the real assignment.

Friday Tutorials P5.js

On friday I tried to install P5.js on my oen computer, but could not find out how it worked. I looked at the tutorials of ‘the coding train’ and decided to start out with the online P5.js editor.

And I started playing around a bit with some examples with basic shapes.

Saturday open time

In the weekend I did follow the opentime, but sadly enough the questions weren’t fit for me. Since I only barely started with my kearning of P5.js I did not really gsve questions. Some of the other students had way more knowledge on the subject and it went a bit over my head.

Monday get really working on the assignment

On Monday I really dove inti the subject and tried to connect my SensLu2-setup and everything with Nadiehs example.

Connecting the serial, a lot of debugging:

I decided that the code with the phototransistor would be very good, because that has a nice serial output, which is also visible with the burning LED. It turned out to be quite hard. The P5-serial -controller was not very stable, and would not connect to the ftpi that we made ourselfes. I tried to check everything within the arduino-program and its serial monitor and after a lot of trying and changing cables and connectors I got that to work again. But then the P5-serial-connector would not work anymore. I learned online on the P5-serial-site that there is only one possible port connected to the serial socket, so I disconnected arduino and then it would not work either.

Back to the basics with Nadiehs example

I decided to go back to the example that Nadieh made and follow all the steps another time literally. This time I used my Hello Elvis board, because that was the setup that Nadieh used in her example. (This board has one of these phototransistors which is weirdly sensitive to light, so it would be harder to get different values) But the program did not connect anything anymore, so maybe it was stuck. I restarted the P5-serial connector and had to change the FTPI connection again (and test in arduino if it worked) And then, when I got the serial connector to work I could change the portname in Nadiehs code and, yes, after hours of debugging I had her basic setup working with Hello Elvis.

Smoke from the Attiny

Now I wanted to test my SensLu2 in the same setup, but made a short, and smoke came from my attiny.... Bummer, but the nice thing is that in my home-electronics-set I have several attiny412s and since this is the first microprocessor I destroyed I could finally use my hotairgun from the set.

Soldering new Attiny and LED-module

I soldered a new 412 on the board and since I was happily soldering away I decided to make a module with a LED and resistor and pins to stick in my SensLu2. I used the module-board that I milled at home (the testmill) and I am really content with it)

This time I was very careful with connecting everything and programmed the new chip again.

Reconnect again

It took quite some hassle to reconnect with the serial connection but when I got that right, I looked with. Nadiehs code and it worked! Nice thing of this setup with my oen code for the Attiny is that it only gives a serial output when the button is pushed, so you can really interact with the screen. And now it was also easier to adjust the data because this photoresistor is more sensitive in a normal way.

Yes everything connected.

So I have the hardware and backend working, now I still need a frontend.

The visual side in P5.js

I dove into P5.JS again and my plan was to make the same thing on screen as in the outputweek with the LED’s charlieplexing.

So the plan was to make a set of lights above each other with red-orange-green-orange-red and let the serial input be the data on which the right light should be on.

Start with the basics

First I practiced with drawing shapes in P5.js and after that I looked for examples with an array of shapes. With this I was able to make a vertical set of circles in different colors.

 1
 2function setup() {
 3  createCanvas(400, 400);
 4}
 5
 6function draw() {
 7
 8  background(255);
 9  noStroke();
10
11  //  red
12  fill(255,0,0);
13  ellipse(20,20,16,16);
14
15  // orange
16  fill(255,128,0);
17  ellipse(20,40,16,16);
18
19  // Green 
20  fill(0,175,128);
21  ellipse(20,60,16,16);
22  
23    // orange
24  fill(255,128,0);
25  ellipse(20,80,16,16);
26  
27  // red
28  fill(255,0,0);
29  ellipse(20,100,16,16);
30}

Now I needed to dive into interactivity. I looked around for some examples but it was hard to find things that would fit my needs. here the light will move if you move the mouwe here the dot will grow and change color if you move the mouse.

The best examples I could find were traffic lights.

One of the examples did not work with time or ‘mouseover’ but with vertical mouse position. I liked that, this way I did understand the code and could change it to five positions.

The way this code was build up was slightly different than my first try because there are of course variables for the interactivity, but also the colors are called on differently. Combining these two ways was good for my understanding of the different ways of doing it. In order to make five lights above each other I changed the size of the canvas, copied the different lights, gave them extra names and I did it not good, both yellow or red lights would turn on at the same time....

This way I found that I had to rename the different circles in stead of the different colours. with the code I got it working:

 1let redLight = 'red'
 2let yellowLight = 'yellow'
 3let greenLight = 'green'
 4let yellowLightlow = 'yellow'
 5let redLightlow = 'red'
 6function setup() {
 7  createCanvas(200,300)
 8}
 9
10function draw() {
11  background(220);
12  rectMode(CENTER)
13  fill(100);
14  rect(width / 2, height / 2, 80, 260);
15
16  fill(redLight)
17  ellipse(width / 2, height / 2 - 100, 40, 40)
18
19  fill(yellowLight)
20  ellipse(width / 2, height / 2  - 50, 40)
21
22  fill(greenLight)
23  ellipse(width / 2, height / 2 , 40, 40)
24
25  fill(yellowLightlow)
26  ellipse(width / 2, height / 2 +50, 40)
27  
28  fill(redLightlow)
29  ellipse(width / 2, height / 2 + 100, 40, 40)
30
31
32
33  if (mouseY < height/5) {
34  redLight ='red'
35  yellowLight = 'white'
36  greenLight = 'white'
37  yellowLightlow = 'white'
38  redLightlow ='white'
39    
40  }
41  else if (mouseY < height * 2/5) {
42  redLight ='white'
43  yellowLight = 'yellow'
44  greenLight = 'white'
45  yellowLightlow = 'white'
46  redLightlow ='white'
47  }
48    else if (mouseY < height * 3/5) {
49  redLight ='white'
50  yellowLight = 'white'
51  greenLight = 'green'
52  yellowLightlow = 'white'
53  redLightlow ='white'
54  }
55    else if (mouseY < height * 4/5) {
56  redLight ='white'
57  yellowLight = 'white'
58  greenLight = 'white'
59  yellowLightlow = 'yellow'
60  redLightlow ='white'
61  }
62    else if (mouseY < height) {
63  redLight ='white'
64  yellowLight = 'white'
65  greenLight = 'white'
66  yellowLightlow = 'white'
67  redLightlow ='red'
68  }
69}

Now it works on mouse-position, later I will sort out how to change that to the serial input.

Next up Getting the traffic light to work on the serial code

trying to combine everything

Tutorial serial and P5.js

I found this great explanation of how to setup your own serial connection with an Arduino and worked my way through it. There are two different setups for the online editor and for the offline version. I tried to work out both, because online I was capable of a little code in P5.js and for offline we now had the whole setup of a localhost and Nadiehs example to work with.

Nothing

It turned out that this tutorial was maybe a little over my head. Since I had to download and upload a lot of different parts and they were different for all these different setups. I really gave it a good try but could not get it to list the serial-ports. Or at least it was gave something in a separate window but that was not one of my known serial ports. Hmmmmpf what to do.

Go to bed and try again tomorrow.

Tuesday

Computer crashed during worktime, It took me forever to get all the FTPI-connections correct again, this really starts to feel like groundhog-day. Connect again, again looking for a setup that would connect with Nadiehs example.

Compare Nadiehs example with my tutorial code,

Try to find the differences, I did not have the P5.js library in the right place, I added that, still nothing.

Reverse engineering.

I would start with Nadiehs code and take out the things I won’t need. Made a new folder with a copy of Nadiehs files and libraries. And started to work my way through the sketch.js.

Change mouse-position into serial data

I added my own attributes and changed the mouse-location to data. Since the data is between 0 and 1024, to divide it into 5 parts I took steps of 200 (the highest part would be a little larger, 224 to get up to 1024)

A high value of the sensor (1000) is almost dark and a low value (50) is superbright, which is a bit confusing to me, but is not a problem. I made a few new lines of code to devide the data in these 5 bits.

1if (data < 200) 
2else if (data < 400)
3else if (data < 600)
4else if (data < 800)
5else if (data < 1024)

Success

After all this hassle, I got it working:

Here is the working code, this is the sketch in javascript (P5.js):

  1// onderdelen van Nadieh
  2let serial;
  3let data;
  4
  5let width = 200;
  6let height = 300;
  7
  8// onderdelen van mij
  9//Create variables for the light colors
 10
 11let redLight = 'red'
 12let yellowLight = 'yellow'
 13let greenLight = 'green'
 14let yellowLightlow = 'yellow'
 15let redLightlow = 'red'
 16
 17
 18// onderdelen van Nadieh:
 19
 20function setup() {
 21    // Instantiate our SerialPort object
 22    serial = new p5.SerialPort();
 23
 24    // Assuming the board is connected, let's open the connection to it
 25    // Use the FTDI ID
 26    // serial.open("/dev/tty.usbserial-D30A3T7C");    
 27   // serial.open("/dev/tty.usbserial-D308HTPM");
 28
 29serial.open("/dev/tty.usbserial-0001");
 30
 31    /////// Register some callbacks ///////
 32    // When we connect to the underlying server
 33    serial.on('connected', () => { console.log("We are connected!"); });
 34    // When we get a list of serial ports that are available
 35    let portlist = serial.list();
 36    serial.on('list', gotList);
 37    // When or if we get an error
 38    serial.on('error', (err) => { console.log(err); });
 39    // When our serial port is opened and ready for read/write
 40    serial.on('open', () => { console.log("Serial Port is open!"); });
 41    // When we some data from the serial port
 42    serial.on('data', gotData);
 43
 44    /////////// Setup general p5.js stuff ///////////
 45    createCanvas(width, height);
 46}//function setup
 47
 48
 49function draw() {
 50    background('rgba(255,255,255, 0.1)');
 51
 52    if (data) {
 53        document.getElementById("text-value").innerHTML = data;
 54        
 55        // weggehaald van Nadieh
 56        // circle(map(data, 0, 255, 0, width), height/2, 80);
 57    
 58       // weggehaald bij mij daarna mijn code {
 59         //   background(220);
 60            rectMode(CENTER)
 61            fill(100);
 62            rect(width / 2, height / 2, 80, 260);
 63          
 64            fill(redLight)
 65            ellipse(width / 2, height / 2 - 100, 40, 40)
 66          
 67            fill(yellowLight)
 68            ellipse(width / 2, height / 2  - 50, 40)
 69          
 70            fill(greenLight)
 71            ellipse(width / 2, height / 2 , 40, 40)
 72          
 73            fill(yellowLightlow)
 74            ellipse(width / 2, height / 2 +50, 40)
 75            
 76            fill(redLightlow)
 77            ellipse(width / 2, height / 2 + 100, 40, 40)
 78            
 79          
 80            // if (mouseY < height/5) {
 81            if (data < 200) {
 82            redLight ='red'
 83            yellowLight = 'white'
 84            greenLight = 'white'
 85            yellowLightlow = 'white'
 86            redLightlow ='white'
 87              
 88            }
 89            // else if (mouseY < height * 2/5) {
 90            else if (data < 400) { 
 91            redLight ='white'
 92            yellowLight = 'yellow'
 93            greenLight = 'white'
 94            yellowLightlow = 'white'
 95            redLightlow ='white'
 96            }
 97             
 98            // else if (mouseY < height * 3/5) {
 99            else if (data < 600) { 
100            redLight ='white'
101            yellowLight = 'white'
102            greenLight = 'green'
103            yellowLightlow = 'white'
104            redLightlow ='white'
105            }
106
107            //  else if (mouseY < height * 4/5) {
108            else if (data < 800) { 
109                redLight ='white'
110            yellowLight = 'white'
111            greenLight = 'white'
112            yellowLightlow = 'yellow'
113            redLightlow ='white'
114            }
115            
116            //else if (mouseY < height) {
117            else if (data < 1024) { 
118            redLight ='white'
119            yellowLight = 'white'
120            greenLight = 'white'
121            yellowLightlow = 'white'
122            redLightlow ='red'
123            }
124         // }
125    
126    
127    
128    
129    
130    
131    }//if
132
133    // onderdelen van Nadieh
134
135}//function draw
136
137//////////////////// Serial Helper Functions ////////////////////
138// Got the list of ports
139function gotList(thelist) {
140    // theList is an array of their names
141    for (let i = 0; i < thelist.length; i++) {
142        // Display in the console
143        print(i + " " + thelist[i]);
144    }//for i
145}//function gotList
146
147// There is data available to work with from the serial port
148function gotData() {
149    let inString = serial.readStringUntil('\r\n');
150    // check to see that there's actually a string there:
151    if (inString.length > 0) {
152        // convert it to a number:
153        data = Number(inString);
154    }//if
155}//function gotData
156

Together with that comes the HTML page to show everything in the localserver:

 1<!DOCTYPE html>
 2	<head>
 3        <meta charset="utf-8">
 4	    <meta name="viewport" content="width=device-width, shrink-to-fit=0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 5	    <title>P5.js | Fab Academy</title>
 6	    <meta name="author" content="Lucia, based on Nadieh Bremer">
 7        
 8        <!-- JavaScript files -->
 9        <script src="lib/p5.min.js"></script>
10        <script src="lib/p5.serialserver.js"></script>
11	</head>
12	<body>
13        <h3 id="text-value">X</h3>
14
15        <!-- Custom JavaScript -->
16        <script src="script.js"></script>
17	</body>
18</html>

I was quite surprised that this worked at once (after everything else was not working in one time.) And it is already tuesday-evening. And in order to finish this week I really quickly setup a camera to film everything while still working. because I am very afraid that the serial connection would crash again. To show that it is working I made a nice little video of everything. If the light is medium the traffic light is on green in the middle, if the light is brighter the trafficlight is yellow at the top and when it is superbright it is red at the top. If the light is dimmed it turns yellow at the bottom and if it is all the way dark it turns red at the bottom. This is great for the measurements on my Wormbin, because I have to look at the PH-value, temperature and humidity, so these values can be good, too low or too high and with this interface the sensor can be readable and set in different ways.

Learnings this week

This week was not my best week, I spend a lot of time debugging everything and did not really get to programming a nice interface, but all in all I did get it to work and I am quite content with that.

• P5.js is a really nice way to start with javascript.
• with P5.js it is not really hard to make things, my example is really basic but it is a nice logical language that is easy to understand and combine.
• If I would need less time debugging I could have learned more of the coding, but for now I am content.
• Seeing the work of Nadieh was really interesting and a very high level but triggering introduction to the subject.
• After deciding to replicate my output device in a screen-version it was much easier to find the right information. It is good to set a goal for myself.

Links to Design-files

All the code of this week is in the page, and I used last weeks board, so no designfiles this week.