Category: Assignment 4

Making An Open Window More Accessible

Description:

The idea behind these two sketches is to have the ability to open a window via a slider on some interface. In place of a fully working window opening mechanism is a motor with an encoder wired up to an Arduino. This Arduino then uses serial communication to relay its current position back to a p5.js sketch and retrieve its goal position from that sketch as well. The goal position is determined by an on screen slider that moves around then the user clicks and drags the slider.

While I was able to get the motor moving to a specific degree based off of serial input through the Arduino serial command, I was not able to get the p5 sketch to communicate in such a way that the Arduino could read it and then interpret it into an actionable item. I was also not able to send data from the Arduino to the p5 sketch but instead was only able to communicate with the p5 serial application shown in the demo below. Despite all this non-functional code, however, I was able to code a working slider into the p5 sketch and convert the x position of the slider into a percent of 100 as it is dragged across the screen.

Demo:

Schematic:

Code:

*
  Making Things Interactive
  Assignment 4
  Judson Kyle (judsonk)
  02/07/2022

  Collaboration and sources:
  - Encoder_Interrupts functions copied from 24-354 Gadgetry lab code

*/

// Pin Variables

#define encoderPinA   2
#define encoderPinB   3
#define motorPin1     10
#define motorPin2     11
#define motorPWM      9

int encoderCount = 12 * 98; //12 encoder counts per revolution with 1:98 gear ratio
int incomingByte = 0;

// https://www.pololu.com/product/4824
float gearRatio = (22.0*20.0*22.0*22.0*23.0)/(12.0*12.0*10.0*10.0*10.0); 

bool motorSpinning = false;

// Motor distance measuring variables
volatile long currentEncoder_pos_f = 0, prevEncoder_pos = 0, revs = 0;
float motorCurPos = 0;

//PID Variables
float ep = 0; //Proportional error
float ei = 0; //Integral error
float ed = 0; //Derivative error
float prev_ep = 0;
double curTime = 0;
double prevTime = 0;

int pwmCmd = 0;

float motorGoalPos = 0; // desired angle [radians]
float kp = 50; // P gain
float ki = 0; // I gain
float kd = 0; // D gain

void setup() {

  //Initialize serial communication:
  Serial.begin(9600);

  //Initialize motor control pins
  pinMode(motorPin1, OUTPUT);
  pinMode(motorPin2, OUTPUT);
  pinMode(motorPWM, OUTPUT);

  //Initialize interrupts
  attachInterrupt(digitalPinToInterrupt(encoderPinA), encoderA, CHANGE);
  attachInterrupt(digitalPinToInterrupt(encoderPinB), encoderB, CHANGE);
}

void loop() {
  if (Serial.available() > 0){
    incomingByte = Serial.parseInt();
    if (incomingByte > 0 && incomingByte != motorGoalPos) {
       motorGoalPos = (float)incomingByte/100;
    }
  }
  
  //Update motorActualPos variable to reflect actual motor position in radians
  motorCurPos = (((float) currentEncoder_pos_f) / (4 * ((float) encoderCount))) * 3.14159*gearRatio/8; // Convert encoder counts to distance travelled

  Serial.println(motorCurPos);
  //PID controller to get motor to position
  // ----------------------- CONTROLLER CODE --------------
  // PID Controller
  curTime = millis();
  ep = (motorGoalPos - motorCurPos); // error in position (p)
  ei = ei + ep; // integral error in position (i)
  ed = (ep - prev_ep) / (curTime - prevTime); // derivative error in position (d)

  prev_ep = ep;
  prevTime = curTime;

  pwmCmd = (ep*kp + ei*ki + ed*kd);

  // switch directions if pass set point
  if(ep < 0) {
    // Turn on motor A & B
    digitalWrite(motorPin1, LOW);
    digitalWrite(motorPin2, HIGH);
  }
  else {
    // Turn on motor A & B
    digitalWrite(motorPin1, HIGH);
    digitalWrite(motorPin2, LOW);
  }

  pwmCmd = abs(pwmCmd);
  if (pwmCmd > 255) {
    pwmCmd = 255;
  }
  analogWrite(motorPWM, pwmCmd);
  
//  Serial.print("Motor Position: ");
  //Serial.println(motorCurPos, 7);
}

void encoderA(){
  // look for a low-to-high on channel A
  if (digitalRead(encoderPinA) == HIGH) { 
    // check channel B to see which way encoder is turning
    if (digitalRead(encoderPinB) == LOW) {  
      
        currentEncoder_pos_f = currentEncoder_pos_f + 1;         // CW
    } 
    else {
        currentEncoder_pos_f = currentEncoder_pos_f - 1;        // CCW
    }
  }
  else   // must be a high-to-low edge on channel A                                       
  { 
    // check channel B to see which way encoder is turning  
    if (digitalRead(encoderPinB) == HIGH) {   
      
        currentEncoder_pos_f = currentEncoder_pos_f + 1;          // CW
    } 
    else {
        currentEncoder_pos_f = currentEncoder_pos_f - 1;          // CCW
    }
  }
}

void encoderB(){

  // look for a low-to-high on channel B
  if (digitalRead(encoderPinB) == HIGH) {   
   // check channel A to see which way encoder is turning
    if (digitalRead(encoderPinA) == HIGH) {  
       
        currentEncoder_pos_f = currentEncoder_pos_f + 1;         // CW
    } 
    else {
        currentEncoder_pos_f = currentEncoder_pos_f - 1;         // CCW
    }
  }
  // Look for a high-to-low on channel B
  else { 
    // check channel B to see which way encoder is turning  
    if (digitalRead(encoderPinA) == LOW) {   
        currentEncoder_pos_f = currentEncoder_pos_f + 1;          // CW
    } 
    else {
        currentEncoder_pos_f = currentEncoder_pos_f - 1;         // CCW
    }
  }
}

var serial;   // variable to hold an instance of the serialport library

// for macos and *nix, you'll do something like this:
//var portName = '/dev/cu.usbserial-DN01DW79';    // fill in your serial port name here

// for windows, just the COM port you're using
var portName = '/dev/tty.usbmodem144101';

var inData;   // variable to hold the input data from Arduino

var minWidth = 600;   //set min width and height for canvas
var minHeight = 400;
var width, height;    // actual width and height for the sketch
var squareWidth = 100;

var sliderLength = 200;
var sliderHeight = 100;
var sliderBackgroundStrokeWeight = 4;
var sliderBackgroundSideOffset = 100;
var sliderOffset = sliderBackgroundSideOffset + (sliderBackgroundStrokeWeight + sliderLength)/2;
var sliderX = sliderBackgroundSideOffset + sliderBackgroundStrokeWeight + sliderLength/2;
var sliderY;
var collision = false;
var windowActualPos = 0;
var windowGoalPos = 0;

var i = 0;

function setup() {
  // set the canvas to match the window size
  if (window.innerWidth > minWidth){
    width = window.innerWidth;
  } else {
    width = minWidth;
  }
  if (window.innerHeight > minHeight) {
    height = window.innerHeight;
  } else {
    height = minHeight;
  }

  sliderX = sliderOffset + sliderLength/2;
  sliderY = height/2;

  //set up canvas
  createCanvas(width, height);
  noStroke();

  //set up communication port
  serial = new p5.SerialPort();       // make a new instance of the serialport library
  serial.on('list', printList);  // set a callback function for the serialport list event
  serial.on('connected', serverConnected); // callback for connecting to the server
  serial.on('open', portOpen);        // callback for the port opening
  serial.on('data', serialEvent);     // callback for when new data arrives
  serial.on('error', serialError);    // callback for errors
  serial.on('close', portClose);      // callback for the port closing

  serial.list();                      // list the serial ports
  serial.open(portName);              // open a serial port
}

function draw() {
  drawBackgroundCanvas();

  //Draw slider background
  strokeWeight(sliderBackgroundStrokeWeight);
  stroke('grey');
  fill('white');
  rect(sliderBackgroundSideOffset, sliderY/2 - sliderHeight/2 - sliderBackgroundStrokeWeight, width - 2*sliderBackgroundSideOffset, sliderHeight + 2*sliderBackgroundStrokeWeight);

  //Draw actual slider
  strokeWeight(4);
  stroke('black');
  fill('grey');
  rect(sliderX - sliderLength/2, sliderY/2 - sliderHeight/2, sliderLength, sliderHeight);
}

//Initialize drawing canvas
function drawBackgroundCanvas() {
  // set background to black
  background(0);
    fill(255);
  textSize(30);
  textAlign(CENTER);
  text("Window Opener", width/2, 80);
  textSize(16);
  text("Degree open: " + Number(serial.read()), width/2, 100);    // displaying the input

  //Draw playing canvas
  strokeWeight(4);
  stroke('white');
  fill('black');
  noStroke();
}

function updateSliderPosition() {
  if (mouseX <= sliderOffset) {
    sliderX = sliderOffset;
  }
  else if (mouseX >= width - sliderOffset) {
    sliderX = width - sliderOffset; 
  }
  else {
    sliderX = mouseX;
  }
  windowGoalPos = (sliderX - sliderOffset)/(width - 2*sliderOffset);
  windowGoalPos = (windowGoalPos);
  serial.write(windowGoalPos);
}

// Following functions print the serial communication status to the console for debugging purposes

function printList(portList) {
 // portList is an array of serial port names
 for (var i = 0; i < portList.length; i++) {
 // Display the list the console:
 print(i + " " + portList[i]);
 }
}

function mousePressed() {
  updateSliderPosition();
}

function mouseDragged() {
  updateSliderPosition();
}

function serverConnected() {
  print('connected to server.');
}

function portOpen() {
  print('the serial port opened.')
}

function serialEvent() {
    // on the arduino we are using Serial.write to send an integer
    // so we have to use Number() to convert it to a number.
    // otherwise it would be a string
    inData = Number(serial.read());
    motorActualPos = inData;
    //  if you do this, the inData value will be a string, not a number
    // 
    //inData = serial.read();
    //
    // in arduino terms it's
    // int inData = 1;
    // vs
    // String inData = "1';
}

function serialError(err) {
  print('Something went wrong with the serial port. ' + err);
}

function portClose() {
  print('The serial port closed.');
}

 

Before adding p5js to the operation, I set up a first iteration of input and output in Arduino.

The intention of the project is to measure environmental conditions and cue an alert when environmental conditions exceed a desired limit (too hot or too cold). This could have applications as a monitoring device during excessive heat waves. Based on temperature input from the sensor, the arduino  turns on a blinking warming light at a set temperature limit. For those seeking to use air-conditioning to a bare minimum (and save $), this system could act as a gauge that advises on serious conditions. Especially if someone is reliant on a window unit A/C instead of central air-conditions, it may encourage someone to seek a cooler environment and avoid risk of heat stroke.

I used the sensor to capture temperature data in warm and cold spots in my apartment. At the time measured, there was about a 7 degree F difference between the kitchen (~72 degrees F) and the bedroom (~65 degrees F). Since this was the temperature differential currently present in my apartment, I used tempF>= 70 to test the code, moving between rooms. In the kitchen, the LED light blinked, indicating the temperature was equal to or greater than 70 degrees F (I also used the Arduino serial monitor to check readings as I moved around).

 

^DHT 22 Temperature and Humidity Sensor and LED

//

#include "DHT.h"   //adafruit dht library 
#define DHTPIN 2        // sensor DHT22 data connected to Arduino pin 2
#define DHTTYPE DHT22  // using sensor DHT22

DHT dht(DHTPIN, DHTTYPE);  //dht library 
int chk;
float humid; //stores humidity
float tempC; //stores temperature
float tempF; //stores temp in F
int blueled=10;


void setup() {
  pinMode(blueled, OUTPUT);
  Serial.begin(9600);
  dht.begin();


}

void loop() {
  //read dht22 data and store to variables humid and temp
  if (isnan(humid) || isnan(tempC) ||isnan(tempF)){
    Serial.println(F("Failed to read from DHT sensor"));
    delay(10000);
    return;
  }
// troubleshooting issues with getting nan reading from dht22
  humid=dht.readHumidity();
  tempC=dht.readTemperature();
//converting to fahrenheit
  tempF=(tempC*1.8)+32;
//printing temp and humid values to serial monitor
  Serial.print("Humidity: ");
  Serial.print(humid);
  Serial.print(" %, Temp: ");
  Serial.print(tempF);
  Serial.println("Fahrenheit");
  delay(2000);
  if (tempF >= 70){
    digitalWrite(blueled,HIGH);
    delay(150);
    digitalWrite(blueled,LOW);
    delay(75);
  }
 delay(2000); 


}

Arduino was a success. The LED light blinked on and off when temperature was above 70, and stayed off when temperature was less than 70.

—

When I connected the p5.serial control, the console was printing out the serial print that had been set up on the arduino:

^first, I thought I would break out the second part of the arduino code (the control of the LED light) as data sent to arduino via p5. serial control. The library for DHT22 is all C++ and not clear to me initially how to modify. So as a first step, I tried to print sensor data on p5js.

Reviewed two arduino/potentiometer/P5js tutorials (https://medium.com/@yyyyyyyuan/tutorial-serial-communication-with-arduino-and-p5-js-cd39b3ac10ce, https://itp.nyu.edu/physcomp/labs/labs-serial-communication/lab-serial-input-to-the-p5-js-ide/#Draw_a_Graph_With_the_Sensor_Values). I thought it would be interesting to use the information from the sensor to draw a graph, which would highlight changes in temperature or humidity. There was a lot that needed to be done to set up serial port, not sure if this is where everything went wrong, and my final result was undefined. I am wondering if this has to do with the DHT22 library being all C++ or if DHT 22 values need to be mapped to 0 to 255 before this information is read by P5 serial.

 

let serial; // variable to hold an instance of the serialport library
let inData;
 
function setup() {
  serial = new p5.SerialPort(); // make a new instance of the serialport library
  serial.on('list', printList); // set a callback function for the serialport list event
 
  serial.list(); // list the serial ports
}
 
// get the list of ports:
function printList(portList) {
  // portList is an array of serial port names
  for (var i = 0; i < portList.length; i++) {
    // Display the list the console:
    console.log(i + portList[i]);
  }
}


let portName = 'COM5';  // fill in your serial port name here
 
function setup() {
  serial = new p5.SerialPort();       // make a new instance of the serialport library
  serial.on('list', printList);  // set a callback function for the serialport list event
  serial.on('connected', serverConnected); // callback for connecting to the server
  serial.on('open', portOpen);        // callback for the port opening
  serial.on('data', serialEvent);     // callback for when new data arrives
  serial.on('error', serialError);    // callback for errors
  serial.on('close', portClose);      // callback for the port closing
 
  serial.list();                      // list the serial ports
  serial.open(portName);              // open a serial port
}

function serverConnected() {
  console.log('connected to server.');
}
 
function portOpen() {
  console.log('the serial port opened.')
}
 
function serialEvent() {
  inData=Number(serial.read());
 
}
 
function serialError(err) {
  console.log('Something went wrong with the serial port. ' + err);
}
 
function portClose() {
  console.log('The serial port closed.');
}

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


function draw() {
  background(0);
  fill(255);
  text("data:"+ inData, 30, 50)
}

 

My references include:

https://www.arduino.cc/reference/en/libraries/dht-sensor-library/

https://stackoverflow.com/questions/40874880/getting-nan-readings-from-dht-11-sensor

https://create.arduino.cc/projecthub/mafzal/temperature-monitoring-with-dht22-arduino-15b013

https://www.instructables.com/How-to-use-DHT-22-sensor-Arduino-Tutorial/

https://itp.nyu.edu/physcomp/videos/videos-serial-communication/#Serial_to_p5js_in_binary

How to Set Up the DHT11 Humidity Sensor on an Arduino

Notes-

When looking for DHT22 and p5js, this project came up: https://github.com/TTurbo0824/pcom_final/blob/master/test_led_hum_serial.ino

^has a note for incorporating p5js but this just looks like what got uploaded to arduino, not additional p5js data sent

 

** 2/08/2022 Update:

Serial port appears now to be connected to P5JS. I was able to use the test sketch from last week to check that the values for temperature (in C) came through, then both values for temperature and for humidity.

HOWEVER, while running the sketch in the browser editor, the data from the serial port is not registering.

New P5JS sketch:

let serial; // variable to hold an instance of the serialport library
let portName = 'COM5'
let inData;
 
function setup() {
  createCanvas(400,300);
  background('rgba(0,255,0, 0.15)');
  

}

  serial = new p5.SerialPort(); // make a new instance of the serialport library
  serial.on('list', printList); // set a callback function for the serialport list event
 
  serial.list(); // list the serial ports

 
// get the list of ports:
function printList(portList) {
  // portList is an array of serial port names
  for (var i = 0; i < portList.length; i++) {
    // Display the list the console:
    console.log(i + portList[i]);
    serial.on('list',printList);
    serial.on('connected', serverConnected); // callback for connecting to the server
  serial.on('open', portOpen);        // callback for the port opening
  serial.on('data', serialEvent);     // callback for when new data arrives
  serial.on('error', serialError);    // callback for errors
  serial.on('close', portClose);      // callback for the port closing
    
    
serial.open(portName);              
    // open a serial port
    
  function serverConnected() {
  console.log('connected to server.');
}
 
function portOpen() {
  console.log('the serial port opened.')
}
 
function serialEvent() {
  inData = Number(serial.read());
 
}
 
function serialError(err) {
  console.log('Something went wrong with the serial port. ' + err);
}
 
function portClose() {
  console.log('The serial port closed.');
}

    
  }
 

  function graphData(newData) {
  var yPos=map(newData,0,255,0,height)
  stroke(0xA8,0xD9,0xA7);
  line(xPos,height,xPos,height - YPos);
  if (xPos>=width) {
    xPos=0;
    background(0x08, 0x16, 0x40);
  } else {
    xPos++;
  }
  }  
 function draw() {
  graphData(inData);
  text("temperature in Celsius:" + inData, 1, 50);
  
} 
  
}