Interface and Application Programming

For this week's assignment we are supposed to use a programming language to interface an output or some data.

To fulfill the assignment I decided to use Processing To interface the output of DHT11 sensor which is sending data over serial using my version od SatshaKit

Programming the Satsha Kit

I connected my board to the sensor. It's pretty easy to do so there are just 3 lines VCC, GND and output. The output of the sensor should be connected to a digital pin I connected it to Arduino Pin 3 as I used Arduino IDE. I programmed the board using FTDI cable. This is how the connection looked like.

Mountain View
Mountain View

Mountain View

  #include <dht.h>
dht DHT;

// if you require to change the pin number, Edit the pin with your arduino pin.

#define DHT11_PIN 3

void setup() {


//Serial.println("welcome to TechPonder Humidity and temperature Detector"); 

void loop() { // READ DATA

int chk = DHT.read11(DHT11_PIN);

Serial.println((DHT.temperature*1), 1);



  • Next step was to write the processing sketch to be able to represent the data. I started by taking a look at this example as a reference and then I modified it a little bit.
  • First thing I did was to change the background colour from black to white. I also changed the colour of the graph and I made it related to the temperature. final modification I did was to change the height of the graph as It was too small compared to the window or canvas size.

Mountain View
Mountain View

  import processing.serial.*;

Serial myPort;        // The serial port
int xPos = 1;         // horizontal position of the graph
float inByte = 0;

void setup () {
  // set the window size:
  size(400, 300);

  // List all the available serial ports
  // if using Processing 2.1 or later, use Serial.printArray()

  // I know that the first port in the serial list on my mac
  // is always my  Arduino, so I open Serial.list()[0].
  // Open whatever port is the one you're using.
  myPort = new Serial(this, Serial.list()[0], 9600);

  // don't generate a serialEvent() unless you get a newline character:

  // set inital background:
void draw () {
  // draw the line:
  line(xPos, height, xPos, height - (15*inByte));

  // at the edge of the screen, go back to the beginning:
  if (xPos >= width) {
    xPos = 0;
  } else {
    // increment the horizontal position:

void serialEvent (Serial myPort) {
  // get the ASCII string:
  String inString = myPort.readStringUntil('\n');

  if (inString != null) {
    // trim off any whitespace:
    inString = trim(inString);
    // convert to an int and map to the screen height:
    inByte = float(inString);
    inByte = map(inByte, 0, 1023, 0, height);


Final product

Mountain View
Mountain View


-Arduino sketch
-Processing Sketch

Source code is licensed under the terms of the GNU Lesser General Public License v2.1 (LGPL).

Projects, drawings, images and videos are licensed under Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0).

Ahmed Abdellatif 2017