Author: jkyle1@andrew.cmu.edu

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.

 

Some interrupts in daily life:

• • The urge to drink water
  • The sunset – indicates it’s time to go home
  • A notification on your phone (quite literally an interrupt)
  • Gas light in your car – tells you it’s time to fill up

 

Thoughts on Make it So:

The reading talks a lot about how science fiction and design are symbiotic in nature because of the way that they both influence each other. I thought this cat and mouse description of the way designers and science fiction writers interact was interesting because they are in competition to push the future to customers but it’s not necessarily clear whether the fiction or the design comes first. I also liked the way they explained how design frequently follows science fiction because it is a way of determining what products will succeed. If a work of fiction does well, i.e. Star Trek, then maybe products from that universe will also do well. I think the idea of using what already exists is a powerful tool because I feel like as an engineer myself I often get caught up in trying to design a solution from end to end (which is quite inefficient and not very successful) instead of leveraging what has already created to actually make something new.

I also liked the note about feedback and time delay when they talk about minimizing the time between a users action and the systems reaction. The field of haptics relies on this minimization of interaction and system reaction in order to convey realism from electromechanical systems so it makes sense that the same rule applies in visual mediums as well.