16. Interface and application programming¶

Welcome to week’s assignment, this journey through Fabacademy has been great and I’m glad you have made it through this far. Great job! for not giving up.

Task¶

individual assignment: write an application that interfaces a user with an input &/or output device that you made
group assignment: compare as many tool options as possible

Group Assignment¶

The task for this week’s group assignment is to compare as many tool options as possible. So let’s begin with comparing some tools(i.e. Processing and websockets) that can be used for this assignment purposes. To begin with I will talk about Processing. I came across Bas’s tutorial. You can check it out it is in great detail and he is an expert in processing thumbs up to him. Bente Talks about WebSockets to communicate with a web-page.

These two techniques have their merits and I will be sharing a few. Processing is great because it is direct. The hardware on your computer can be easily accessed . As long as you keep to the basics it is not hard to learn. Processing uses a main loop function called draw(), it functions much like the loop() function in Arduino. Both environments have a lot of similarities, Arduino is based on the Processing environment.

The draw loop makes it relatively intuitive to get something on the screen and animate it. Processing has simple shape drawing functions, like circle and rect, which makes it a good tool for artists to create computer generated art

Javascript, wether in a web environment or in Node.js takes a different approach. Although Java and Javascript look connected based on the name, they are not. They share as much characteristics as a Car and a Carpet.

Javascript is an event driven language, most of the time you handle events that result from actions you initiated (like loading an image or a video) or events that come from user interaction ( scrolling, like clicking, pressing a key, moving the mouse).

javascript also has drawing functionality that you can use with canvas, to create user interfaces it is common to use html/css. This is a completely different language, that has it’s own history . Using it can be extremely cumbersome as it basically involves translating a graphic design into text and tags.

Pacome made use of the Javascript and I think he did a good job with it. You can check it out to find the details of the process.

Hero Shots¶

Research¶

As discussed in the week’s Global class, we had a lot of choices to choose from to complete the task at hand. I went with the Processing as my choice of programming language. it has been enlighting to learn something completely new. You can download the software here. The processing software and language reads the data from the chip through FTDI pins on my circuit board. you can learn more about ftdi. On the Processing homepage,they have a lot of examples you can download and try your hands on, you can tweak these examples to suit your purpose if not they have complete libraries and Referrences you can download and read through if you want to write your own custom code from the begining and they have tutorials for beginners.

Code¶

Arduino to show the changing values of an analog input¶

This code is simply going to read and record every change in value of the analoRead function and serial Print it. This Serial print will enable the processing code to get the values for the plot.

int sensor_pin = 1;
int value;


void setup() {
  // put your setup code here, to run once:
Serial.begin(9600);

}

void loop() {
  // send the value of analog input 0:
  value = 1023 - analogRead(sensor_pin);

  Serial.println(value);
  // wait a bit for the analog-to-digital converter to stabilize after the last
  // reading:
  delay(1000);
}

Processing code to plot the serial values on a graph¶

The code below was written using the processing language in the Processing 4 software on a windows machine. The comments added to the code explains each section of the code.

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(1360, 400);

    // List all the available serial ports on my computer
    // if using Processing 2.1 or later, use Serial.printArray()
    println(Serial.list());

    // I know that the first port in the serial list on my computer 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:
    myPort.bufferUntil('\n');

    // set initial background:
    background(0);
  }

  void draw () {
    // draw the line:
    stroke(127, 34, 255);
    line(xPos, height, xPos, height - inByte);

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

  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);
      println(inByte);
      inByte = map(inByte, 510, 850, 0, height);
    }
  }

Brief explanation¶

so this is a brief explanation of the ui programme this is simply an interactive programme to show a plotted graph of the data collected from an analog sensor. In the code above there are comment explaining ever block of code, what it does and what goes where. As you can see in the video below, the programe plots the change in value from the soil moisture sensor as it is dipped and removed from the water. The higher the moisture leve the higher the blue bar and vice versa.

Files¶

Below is the link to the generated application to plot the analog values read. This comes with Java embbeded in it. Google_drive_link

you can download a version without java embbeded in it below

Moisture_code_processing_rar

what I would Do differently¶

I would like to explor other choices of programming languages like java script and the likes.

wrapping up.¶

I learnt a lot from this processing language and I want to develop the app I wrote further.

Last update: July 8, 2022