Assignment 4 – James Kyle

Automatic Blinds Adjuster:

Description:

The device I decided to make is an automatic blinds adjuster for people who may have a hard time maneuvering to a window to adjust their blinds. The user can either use a theoretical slider on a wall somewhere that would change the slide position on the webpage or they could use the webpage to adjust the blinds height.

I had some trouble integrating both ways into one script so I have split the Arduino to p5.js and p5.js to Arduino parts for the purpose of this post.

Arduino to p5.js:

The user can adjust the slider on the webpage with a theoretical slider represented by a potentiometer.

Video Demo:

p5.js Code:

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.usbmodem14101';

var inData = 0;   // 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 sliderWidth = 30;
var sliderHeight = 200;
var slideLength = 400;
var outlineWeight = 10;
var sliderStartX;
var sliderX;
var sliderY = 200;
var sliderClicked = 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;
  }

  sliderStartX = width/2 - slideLength/2;
  sliderX = sliderStartX;

  //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() {
  // set background to black
  background(0);
  fill(255);
  textSize(24);
  textAlign(CENTER, BOTTOM);
  text("Curtain Height", sliderStartX + slideLength/2, sliderY - outlineWeight);



  //-----Draw Slider-----//
  updateSlider();

}

// 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 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 inteer
    // so we have to use Number() to convert it to a number.
    // otherwise it would be a string
    inData = serial.readLine();
    //  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.');
}

function updateSlider() {

  serial.write(parseInt(map(sliderX, sliderStartX, sliderStartX+slideLength-sliderWidth, 0, 1023)));
  text("Value: " + parseInt(map(sliderX, sliderStartX, sliderStartX+slideLength-sliderWidth, 0, 1023)), sliderStartX + slideLength/2, 70);


  //This section is commented out for the p5.js to arduino configuration

  // if (!sliderClicked && inData != sliderX){
  //   sliderX = map(inData, 0, 180, sliderStartX, sliderStartX+slideLength);
  // }

  //Background
  fill(100);
  rect(sliderStartX - outlineWeight/2, sliderY - outlineWeight/2, slideLength + outlineWeight, sliderHeight + outlineWeight,30);
  fill(255);
  rect(sliderStartX, sliderY, slideLength, sliderHeight,30);

  //Slider
  fill(100, 10, 10);
  rect(sliderX, sliderY, sliderWidth, sliderHeight,30);

}


function mousePressed() {

  sliderClicked = isInRectangle(mouseX, mouseY, sliderY, (sliderY + sliderHeight), sliderX, (sliderX + sliderWidth));

  if (sliderClicked) {
    if (inBounds(mouseX, sliderStartX, sliderStartX + slideLength - sliderWidth)){
      sliderX = mouseX;
    }
  }

}


function mouseDragged() {

  if (sliderClicked) {
    if (inBounds(mouseX, sliderStartX, sliderStartX + slideLength - sliderWidth)){
      sliderX = mouseX;
    }
  }
}


function inBounds(value, lowerBound, upperBound) {
  if ((value > lowerBound) && (value < upperBound)) {
    return 1;
  } else {
    return 0;
  }
}


function isInRectangle(x, y, topBound, bottomBound, leftBound, rightBound) {

  let xInRect = inBounds(x, leftBound, rightBound);
  let yInRect = inBounds(y, topBound, bottomBound);

  if (xInRect && yInRect) {

    return 1;

  } else {

    return 0;
  }

}

Arduino Code:

#include <Servo.h>

const int POT_PIN = A0;
const int SERVO_PIN = 10;

int incomingData = 0;
int potVal;
int newHeight;
int prevHeight = 0;

Servo curtainHeight;


void setup() {
  Serial.begin(9600);

  pinMode(LED_PIN, OUTPUT);
  pinMode(POT_PIN, INPUT);

  curtainHeight.attach(SERVO_PIN);


}

void loop() {
  // this sends the sensorValue as a raw int

  //LED state changes
  if (Serial.available() > 0) {
    incomingData = Serial.parseInt();
    newHeight = map(incomingData, 0, 1023, 0, 180);
    curtainHeight.write(newHeight);

  } else {
    newHeight = map(analogRead(POT_PIN), 0, 1023, 0, 180);
    if (abs(prevHeight - newHeight) > 2) {
      curtainHeight.write(newHeight);
      Serial.println(newHeight);
      prevHeight = newHeight;
    }
  }

}

p5.js to Arduino:

The user can also use the slider on the interface to adjust the blind height from a potential website. I was not able to get this part to work as I was having a little trouble figuring out how to read data from p5.js in Arduino. The code and setup are the same as for the Arduino to p5.js case.