Week 15 - interface and application programming
Brief
To program a UI (user interface) to sense an input or control an output.
Intro
For this weeks assignment I was keen to try and use a process needed in my final project, and as such I chose to try and drive a UI with my temperature sensor circuit. In my final project one of the goals is to sense and regulate the temperature of the beer throughout the fermentation process and so this will be an integral part of the whole system.
Initially I concentrated on making a UI using Processing. Processing is a coding language that allows graphical output to be driven from input and output devices. It is closely linked with Arduino, and with a wealth of tutorials available online and an open source ethos to project creation it seems to be a very useful program.
As I understand it Processing predominantly outputs to software whereas Arduino predominantly outputs to hardware.
Processing
First of all I worked through some of the examples that are built in to the Processing program. They helped me understand some of the basic draw functions which can use colour and shape.
I then decided to create a background for my UI that would look good on screen and display the temperature by showing a thermometer. I used Inkscape to draw my background and took care to leave the area of the thermometer blank (to allow a drawn area in Processing).
I then wrote a program to draw a red rectangle within the thermometer based on the position of the mouse within the window. I loaded my exported png to the window as a background and mapped the pixel position of the rectangle from my Inkscape file. I am only just beginning to use Processing and this week I got a lot of help from Joel to understand the structure of the code, syntax used and available functions.
Firstly I simply loaded my background, making sure the window size was exactly the same number of pixels as the exported png.
Next I added in the drawing of a red rectangle related to the mouse position within the window. I also added in a threshold variable which illustrates the temperature at which my fermenting beer should be kept at. When the value reaches the threshold level the program prints the line "switch heater off" in the console. This was achieved using an if statement. and the pixel height 200 as the threshold level. It was also important to add in the condition of only switching the heater on/off if it was currently in the other state. This stops the program sending an instruction to switch on repeatedly and then off repeatedly. As I understand it this would be bad because when a chip is sending data it can't be listening for data so it is important to understand the flow of comm's in a network and to think about which parts talk and which parts listen.
Next I wanted to connect the program to an output board to simulate my relay circuit in my final project. I decided to just use my bridge circuit from the network comm's week as it has serial communication and an LED indicator light to simulate the switch.
To use the circuit I created I had to re-program the bridge to listen for a '1' to switch on the LED and wait for a '2' to switch off the LED.
I then set up serial in my Processing program by using the import serial library instruction and using myPort.write to instruct the program to send a '1' on the serial when below threshold temp and a '2' when above threshold temp, thus turning the LED on & off. In doing this I realised it was important to set the baudrate correctly (9600) and to set communication on the right COM port. This can be done by getting the console to list all available COM ports at the start of the program. If more than one COM is available you can unplug a cable and re-check available COM ports to correctly identify the right port to send communication down. This port is then referenced inside the [] in this case it was [0] which says use the first COM port in the list (in programming numbers start at 0 and not 1).
Next I wanted to set up my UI to read the temperature from my thermistor circuit (from input devices week). In order to do this I had to make a modification to the circuit which connected up the Rx pin from the FTDI connector to the MOSI pin. This was necessary as the circuit was only set up to send information and not listen.
It was necessary for my program to send a signal to the thermistor board to ask for the temp reading and then listen to the response. Otherwise reading the serial data would simply show a string of byte's that are hard to interpret and convert to a meaningful temperature value. This was done by modifying the standard c program for the thermistor circuit to listen for a '3' then send out the low byte and then the high of the 10 bit temperature reading. I then used the maths conversion in Neil's program to translate the voltage drop across thermistor into degrees C, and included that in my Processing code.
I then changed my Processing code to map the rectangle in relation to T value between 2 new variables that define my temp range (minTemp & maxTemp) instead of mouseY position. The map function is a useful one in Processing and allows you to scale an output between 2 ranges. In this case I am scaling T between
(minTemp-maxTemp) and my available drawing area (0-290 pixels).
I wrote all the outputs to console before testing my circuit and found that helped in being able to see what data was coming in and going out. This is a good lesson going forward and Joel advised me this week to use LED indicator lights on each board I have if there is the space and if possible put send/receive indicators. This will allow me to debug knowing that the send receive functions are in fact working or not. This makes a lot of sense and should help in the inevitable fault finding as my network of circuits becomes more complicated.
I connected my thermistor circuit up and found that it was working nicely.
I then blew hot air on the thermistor and saw that it could reach about 30 deg c and used a bottle of milk from the fridge to cool the circuit down to 20 deg c. This gave me my temp range (minTemp and maxTemp values). I set the threshold temp to 28 degrees to simulate the switching of the relay and it worked well.
My final alteration to the UI used a heater on/off indicator sign which was drawn into my background. I then mapped the position of a drawn ellipse on my screen by introducing another variable heaterIndicatorY in Processing. This variable was then used in at the end of each if statement to change the y-position of the drawn ellipse dependant on the result of the if statement (is the heater on or off). I then played around with the fill values of the drawn ellipse to try and get it to switch from green in the 'on' position to red in the 'off' position but found I couldn't keep it that colour without affecting the colour of the drawn rectangle as well. I tried to use PShape to give attributes to each shape but found that made my ellipse invisible and so reverted back to simply switching the fill values between each draw cycle.
There is definitely more to learn and improve for my UI but for my first week using Processing I was very happy with my result.
Downloadable Files
Processing Script
UIbackground
tempRequest.45.c
