Interfacing and Application Programming

Task for Week 14

- Group Assignment: Compare as many tool options as possible
- Individual Assignment: Write an application that interfaces a user with an input &/or output device that you made

Group Assignment

Here is the Link to our group Assignment.

This week we were asked to compare as many tool options as possible. I learnt about the MIT App Inventor and Processing.

MIT App Inventor

MIT App Inventor as its name suggest, is a App developing platform for Androids and IOS phones. It allows everyone even kids to build fully functional apps by using block-based programming language. Everything is done through a select and drop manner. This means we can select a particular chunk of code and drop in our code. Hence, no typing. Easy to test your app.

I watched several youtube tutorials and got inspired to build an App. So I decided to build a TIC TAC TOE Game App by referring to the Video. This is a very common game that we play with our friends when we are bored. This game was very famous before the mobile game dominated.
This is the design editor. We can drag components out from the palette to add them to the app.

This is how the block coding looks like for my app. Since had to do coding in Blocks, it was my first time so I really enjoyed using blocks even though it took a lot of time completing it.

This is a small clip from my phone of the app that I made.

Processing

Processing is a software sketchbook and a language for learning how to code. Processing is a simple programming environment that was created to make it easier to develop visually oriented applications with an emphasis on animation and providing users with instant feedback through interaction.

Processing is based on the Java programming language, but it has a simplified syntax and a set of built-in functions that make it easier to create graphics, animations and other visual effects.
Processing is very much similar to Arduino IDE and has the same type of interface.
With Processing, you can create programs that respond to user input like mouse and keyboard and that interact with other programs and devices.

Creating A Shape

There are many examples that is already built-in and I tried some of them since it was my first time using the Processing

First I tried making simple shapes.

Then tried making Stars from Example -> Form -> Star.

Then tired playing with image. There was an example under image which made the image transparent. I inserted my image.

Then tried making something different. That is when I moved the cursor, the shape moved along with it and created a image that i found cute.

Comparison Between Processing and Arduino IDE

Processing and Arduino are both programming environments that are designed to make it easy to create interactive programs, but they do have some important differences.
Processing is focused on creating visual and interactive programs that run on a computer while Arduino is focused on creating programs that interact with the physical world through sensors,motors and other electronics.
Processing has a simplified syntax and a set of built-in functions that make it easy to create graphics, animations, and other visual effects while Arduino has a set of libraries that make it easy to interact with sensors, motors and other electronic components.
Another difference is that processing is based on the Java programming language while Arduino uses simplified version of C++.

Individual Assignment

For this weeks assignment we are asked to write an application that interfaces a user with an input &/or output device that we made. So I used my input device board which has ATTINY1614 as the microcontroller.

With Push Button

I referred several documentations and tutorials and finally decided to do a simple application which interacts with a push button which is already soldered on my Board.
First I went to the example and got the serial.read code under libraries

After opening the code, towards the end of the code, I found the Arduino code which was already written in advance. So I copied that and pasted it in the Arduino IDE.

I just changed the Button pin number which was 10 of the ATTINY1614.
I simply connected the UPDI connector to my board and uploaded the Arduino Code

Then went to the Processing, changed the Port name to the port used for coding the Board in the Arduino IDE and in this case it was "COM3".

And this is how it worked.

With Ultrasonic Sensor

Now I wanted to do with some input devices so I decided to do with Ultrasonic sensor. For this I referred this tutorial.
The connections made are: connected the GND to GND, VCC to VCC. Trig pin and Echo pin to 8 and 7 of my Board.

This is the Arduino code I used

  #include <Mouse.h>
  const int trigpin = 8;
  const int echopin = 7;
  long duration;
  int distance;
  
  void setup() {
    pinMode(trigpin, OUTPUT);
    pinMode(echopin, INPUT);
    Serial.begin(9600);
  }
  
  void loop() {
    digitalWrite(trigpin, HIGH);
    delayMicroseconds(10);
    digitalWrite(trigpin, LOW);
    duration = pulseIn(echopin, HIGH);
    distance = duration * 0.034 / 2;
    Serial.println(distance);
  }

This is the processing code.

    import processing.serial.*;
    Serial myPort;
    String data="" ;
    PFont myFont;
    void setup()
    {
    size(1366,900); // size of processing window
    background(0);// setting background color to black
    myPort = new Serial(this, "COM3", 9600);
    myPort.bufferUntil('\n');
    }
    void draw()
    {
    background(0);
    textAlign(CENTER);
    fill(255);
    text(data,820,400);
    textSize(100);
    fill(#4B5DCE);
    text(" Distance : cm",450,400);
    noFill();
    stroke(#4B5DCE);
    }
    void serialEvent(Serial myPort)
    {
    
    data=myPort.readStringUntil('\n');
    }

This is a small video of how is interacted. The monitor displayed the distance of the obstacle.

Design Files

Codes