Interface and Application Programming

This Week I worked on Interface and Application Programming

Assignment Brief:

  1. Write an application that interfaces a user with an input &/or output device that you made
  2. As a group, Try out and compare multiple tools for interfacing with devices.

Lets begin

I started this weeks major work from, referring to the documentation pages of Siddharth Himanshi and Jesal sir. The concept was very knew to me so revised some of the basic stuff that came up during the lecture.

Processing using the Xiao RP2040

Processing is a Java-based programming language and environment primarily used for creating visuals and sketches. It is ideal for developing interactive graphics and offers libraries that support not only graphics but also sound and video processing.

In the context of APIs, Processing refers to handling and transforming data between requests and responses. It involves taking the input (like data from a user or device), processing it on the server, and then sending the result back to the client through the API.

You can download the software for here: Processing website.

Click download and install

gimp1

During this set up pint, select typical.

gimp1

Mouse to led blink

I started by looking at Siddharth's document. The task was to create a circle, and then code the RP2040 so that when the mouse clicks within the circle, the built-in RGB LED on the Xiao lights up. The process for which was:

1) Code for Ardiuno IDE

Install the library if not installed yet

gimp1

Upload the below code to Aurdino IDE

gimp1
2) Processing IDE

Processing IDE interface

gimp1

Upload the below code to Processing IDE

gimp1

Blynk.io

Blynk is an Internet of Things (IoT) platform that enables you to control and monitor hardware devices remotely. It provides both mobile and web applications for seamless interaction with connected hardware. Blynk is relatively easy to grasp, and its drag-and-drop graphical interface makes it very user-friendly.

You can download the website from: Blynk.io. Chinmay Sir guided us in the process.

Login to the software, The interface and Click on NEW TEMPLATE

gimp1

I was using ESP8266: Node MCU, add the project name below.

gimp1

Creating the project will give you an unique Template ID, choose setup data stream

gimp1

Datastream> New Datastream> Virtual pin

gimp1

In the virtual data stream, add different components that you will use from this app interface to the hardare side. I planned to use a a switch to ON/OF an LED and control the LED brightness on PWM using a potentiometer. Thus in ther Virtual data stream, I created three virtual pins as LED, potentiometer and PWM.

Potentiometer with max Pin value as 1023.

gimp1

LED Virtual Pin

gimp1

PWM with max Pin value as 1023.

gimp1

After creating each of them, the dashboard will the each data stream u created.

gimp1

Now click on the web dashboard to find the below screen with various widgets.

gimp1

To the dashboard, drag and drop the below widgets.

gimp1

Slider for POT, Switch for push buttonand Gauge for PWM.

gimp1

Saving this will give you the web dashboard.

gimp1

Go to Devices and create a NEW DEVICE

gimp1

NEW DEVICE> FROM TEMPLATE

gimp1

Add the template name which u set before and add the device name.

gimp1

New device is create

gimp1

This gives you a code including an unique: Template ID
Template Name (as u set before)
Authorization code (Most imp)
Copy the above code and add to note.

Edit each of the widget to add specifications.

gimp1

Add switch settings to the datastream: LED

gimp1

Add other details and Save

gimp1

Add PWM widget settings to the datastream: PWM

gimp1

Add Potentiometer widget settings to the datastream: Potentiometer.

gimp1

Save each widget> Save and apply

gimp1

gimp1

gimp1

gimp1

Copy the above code to Arduino Uno

gimp1

Add the Copied: Template ID, Template name and BLYNK_AUTH_TOKEN.

gimp1

Library Manager> Blynk> Install

gimp1

Drop down to the selected lines and add laptop Wifi name and password

gimp1

The above didnt work. The status of my Blyk.io was offline. Thus, I connected my Laptop with a stronger WIFI, and switched on a the hotspot and connected it to a hotspot connection. This gave and ONLINE status to my blynk platform as well

gimp1

gimp1
Made the connections gimp1

Final Outcome

gimp1


P5js

I used P5js as a first year student. Coding was very new to me then, its nice to see growth as I feel quite fimiliar with the alien coding language now. p5.js is a JavaScript library designed to make creative coding easy and accessible, especially for artists, designers, educators, and beginners.

P5js Interface gimp1

Thanks to the open software that it is, I could source my very first written code: It was a mickey mouse trailing shapes that follow the two circle and a rectangle. With the semi-transparent fill (alpha = 10) with smoky or trailing visual effect, and overlapping shapes. Whenever you left click your mouse the mickey gives a fill opacity effect otherwise it gives a trail.

Example1 gimp1
function setup() {
        createCanvas(400, 400);
      }
      
      function draw() {
        //background(250,1);
      
        fill(80,55,120);
        //rect(120, 120,90,90);
      noStroke();      
        fill(70,90,150,10);
        ellipse(mouseX, mouseY,40,40);
        rect(mouseX+4, mouseY+4, 50,50);
        
        ellipse(mouseX+50, mouseY+0, 40,40);
      }


Example2: This code gives the desired text on mouse click. gimp1

      function setup() {
      createCanvas(400, 400);
      }

      function draw() {
      //background(220);
      let someText='Bee'
      textSize(50);
      textStyle(BOLDITALIC);
      textFont('BASKERVILLE')
      //text(someText, mouseX ,mouseY,mouseX);
      //text('leo', mouseX+80, mouseY+80, 400);
      noFill();
      stroke(150);
      }

      function drawText(word,posX, posY, size){
      text(word, posX, posY);
      textSize(size);

      }

      function mouseClicked()
      {
      drawText('Bee', mouseX, mouseY, random(5,50));
      drawText('Leo', mouseX+50, mouseY+50, random(5,50));
      }


Group Assignment

Comparing Processing, P5.js, and Blynk

Processing is a Java-based programming environment widely used for creating visual art and interactive sketches. It excels at producing interactive graphics and also includes libraries for handling sound, video, and other media, making it a versatile tool for creative projects.

P5.js is the JavaScript counterpart to Processing, designed specifically for creative coding on the web. It enables you to build interactive graphics and animations that run directly in web browsers, making it ideal for sharing and showcasing digital art online.

Blynk is an Internet of Things (IoT) platform that allows users to remotely control and monitor hardware devices. It features a mobile and web-based app interface with a drag-and-drop GUI, making it very beginner-friendly. Blynk is especially useful for quick prototyping and real-time interaction with connected devices.

Tool Based On Main Use Strengths Platform
Processing Java Creating visuals and sketches Great for graphics, sound, and video projects Desktop (Java IDE)
P5.js JavaScript Creative coding for the web Runs in browser, good for animations and interaction Web (Browser-based)
Blynk IoT Platform Controlling and monitoring devices Easy to use, drag-and-drop UI, great for IoT projects Mobile + Web


Project files

Mouse to Led Processing code
Mouse to Led Aurdino code
Mouse to RGB Processing code
Mouse to RGB Aurdino code Blynk Code