DWD Wk 3: HW

Code we did in class, and outline of how to get started with Heroku and SQL
Intro to SQL

Extra Resources:

Questions about these instructions: (https://github.com/anb429/inclass/tree/master/class3

1.) “In your local shell, you can try PORT=12345 node index.js (in your github page for this week’s resources). Can you explain local shell more? And what does this do? 

2.) How do you do this step “Add var { Client } = require(‘pg’) to your imports”  in the postgres section? what imports? where do I find imports?

3.) How do you connect Postgresql to Javascript? Trying to follow along with: http://www.tothenew.com/blog/connect-to-postgresql-using-javascript/

but became stuck with this line of code (how do you know what to put for those specific parts, which password?):

var connectionString = "postgres://userName:password@serverName/ip:port/nameOfDatabase";

Light Wk 10: DMX Controller

Final code lives: here












1.) Getting the DotzPar to work with the QLC+ GUI first. There was no problems with this.

2.) Using node to run a simple test code that has the DMX lights fade in and out.

3.) Running into issues again with the usb port not showing up even after installing the driver. The usb port often does not show up when I use the command line ‘ls /dev/cu.*’ or ‘ls /dev/tty.*’. This is becoming very frustrating and eventually had to work on a separate laptop.

Here was a link that was semi-helpful for trying to restart your laptop when serial port doesn’t show up in terminal/arduino:


1. Disk Utility, repair permissions. 
2. Reset the PRAM. Shut down. press Command + Option+ P+ R then the Power Button. Hold down these buttons till the computer restarts the second time, then release. 
3. For RFduino will need Arduino 1.5.6 to run. Consider the 1.5.7 Beta. 
4. Install/Re-Install the FTDI software.

4. Tried Tom’s node dmx slider example: https://github.com/tigoe/DMX-Examples/tree/master/nodeDmx/public

For a reason I don’t know yet, when I try to run the code on my server, it doesn’t work. But it works on the p5js editor: https://editor.p5js.org/elinsterz/sketches/ZaGG5OQTy

5. I decided to switch gears and instead of editing Tom’s slider code because I can’t completely understand what each line of code is doing, I am now using the ‘simpleTest.js’ code that fades white in and out. My plan is to add the sliders to this code.

First I tried to figure out how to fade r, g, b separately. Here is ‘R’ channel fading in and out:

6.) How to run html page off of node? I didn’t know, but then these tutorials helped me better understand node.

7.) Trying to create 3 sliders for the 3 color modes in p5js:

Screenshot 2019-04-14 01.32.31.png

8.) I decided against sliders and decided to do these buttons. p5js code here: https://editor.p5js.org/elinsterz/sketches/5kxhcg5uw

9.) Then, it became about communicating between the client and server. I went to office hours with Tom Igoe, which was (yet again) the best thing I could’ve done! We set up a very simple example of how communication between client and server is done with “httpGet”. The very helpful example lives: here

Here are some notes from the office hour.

10.) The rest of the time was spent trying to apply the simple example with my own code.  A lot of the code was already in Tom’s DMX example; it was about trying to get it to work for me.

Some notes on my array for the cues and array for the button.


JS side:
Function set channel: gets info (channel, level) > sets into variables “channel” “level” > based on only channel variable > it will run if statement > if button condition satisfies the if statement > run cue sequence / if channel is 4 then turn off lights

Here is the code for the above description

JS Side:
Check location of mousePressed > if within boundary of button + color of the box is the same as the background > send a message to the server with "httpGET" (which is in the function checkLocation())

// from Tom's simpleBoardServer.js example
function setChannel(request, response) {
  console.log('got a request. channel: ' + request.params.channel
  + ' level: ' + request.params.level);
  var channel = request.params.channel;
  var level = request.params.level;
  // set channel (most DMX systems are 1-indexed, but this library is 0-indexed):
  // universe.update({[channel-1]:level});
  if (channel <= 3){

  } else if (channel == 4) {
  response.end('set ' + channel + ' to ' + level);

p5js Side: 

Check location of mousePressed > if within boundary of button + color of box is same as background > send a message to the server using format of “httpGet (‘/set/’ + channel + level + function)”

// function checks the location of mouse within the bounds of the box / button

function checkLocation(xloc, yloc, j) {

  //check to see if mouse is over that quadrant

  if ((mouseX > xloc) && (mouseX < xloc + btn_width) &&
    (mouseY > yloc) && (mouseY < yloc + btn_height)) {

    let comp_test = arr_comp(col_arr_0[j], col_arr[j]);      

     //if mouse is over quadrant and it is white, then go through color array
      //compares 2 arrays, if box color turns to color send an animation command
      //if box turns white from color then send a command to stop

      if (comp_test == false) {
        col_arr_0[j] = col_arr[j];
        httpGet('/set/'+ j + '/'+ j, foo("Turn On!"));

      } else {

        col_arr_0[j] = [0, 0, 0];
        httpGet('/set/'+ 4 + '/'+ 4, foo("Turn Off!"));

11.) Last was just trying to get the css side up to snuff. I wanted to make the site responsive to the window width. This turned out to be harder than expected but ended up being able to do so with:

canvas {
  display: block;
  margin-left: auto;
  margin-right: auto 

Helpful Resources for coding:


*** As always, biggest thank you to Professor Tom for being patient and so helpful. If I didn’t ask him about the code and communication between client and server, I would not have it working.

DWD Wk 3

In class notes:

git branch  (tells you what branch you are on)
git status (gets status/tells you where you are)
git checkout master (goes back to master)
git checkout -b (creates new branch)
touch.gitignore (create .gitignore file)
touch "filename" (creates a new file)

Steps for creating branch:
1. git branch fileName
2. git checkout (like cd for branches)
3. git add .
4. git commit (push locally)
5. git push (push to github)

  • need to put node modules as git ignore


Helpful Resources:


Heroku Notes:

  • easily create sites
  • heroku takes our packages –> hosts at new url for us
git push heroku master
heroku logs -t

heroku needs below code in js file: 
"var port = process.env.PORT || 8000;"


SQL Notes:

  • SQL stores database for you. SQL Database is a set of tables, like a spreadsheet.
  • Different SQL datatypes: numbers, strings, binary data (just use text field)
  • Connect to database, define fields
  • Talk to it through node. Need to install database client library
  • One database per project
  • psql connects: a terminal-based front-end to PostgreSQL. It enables you to type in queries interactively, issue them to PostgreSQL, and see the query results. Alternatively, input can be from a file or from command line arguments.

SQL Steps:

  • in command line: Brew install postgresql

Big thank you to MIGNA!

DWD Wk 2

Assignment lives on github


npm install -s body-parser
npm install -s socket.io
npm install mustache --save
npm install express --save


Somewhat helpful resources (?): 


The most helpful:

Light + Energy Wk 9 – 10: CO2 Light Concept

Project Objective:

This is a 24 hour LED clock that will display the amount of CO2 every hour. Using an air quality sensor, I plan to track the amount of CO2 in the unit of parts per million (ppm) in my local surroundings (home and school) and visualize that data in the form of a light clock. Similar to my prior “Energy” project,  I will have the air quality sensor in the same enclosure with a solar panel, which will be placed near a window. The solar panel will provide energy to power the sensor.

In addition, I hope to relate this data collected to the broader picture of global warming. The specifics of how to do that are still not determined.



Rough Sketch: details still being worked out

sketch of concept

Determining which sensor to use:

After talking with Jeff, I have decided to try out the Adafruit SGP30 Air Quality Sensor Breakout. We came to this conclusion based on both the price and the eCO2 ppm (parts per million) range.

Potential Sensors
Project planning
$ 84.00

Notes from speaking with Jeff:

  • Interesting to compare the measurements of global CO2 (ppm/ppb) with the data I receive myself. Will the data from sensor track closely to the global aggregate?
  • Make a comparison of data from API with data from my own sensor
  • Read “Inhabitable Earth” by David Wallace Wells
  • Listen to vox podcast with David Wallace Wells.
  • Is there any way to create a sense of panic based on the data I provide
  • Firey or smog-like visual
  • How to connect the CO2 data with a broader concept of global warming

Helpful References:


Light Wk 9: Observation

Entryway in Museum of City of New York

03/27/19, 2pm
Museum of the City of New York, East Harlem

The lobby space inside the Museum of the City of New York shines with elegance with its grecian columns, marble floors and victorian stairs. The light plays a central role to the feeling of awe when walking into the space. The light shines in a downward angle from the 2nd story windows. At 2pm in the afternoon the sun must be directly above the building, but the light shining from the east is still illuminating the interior. And the marble spiral staircase becomes  decorated with these stripes of light and dark.

Light bounces off the iron stairwell with the brass (?) edging well thus creating these sharp highlights. Whereas the light looks soft and edgeless when cast on the marble flooring. The light shows off the distinct materials used in the interior. For example, the black paint on the bottom of the column reflects light differently than shiny surface of the white column. The central column also shows the stark difference between the interior light, which is shone on the top of the column, and the natural light that is illuminating the bottom half of the column. Interior lighting creates a yellowish tint compared to the beautiful whiteness of sunlight.

DWD Wk 1

Part 1: Make a static HTML page using specific HTML tags listed on the site. Get your static website hosted somewhere publicly available.

For part 1, I decided to make a website about penguins. I had a good time and may have gotten carried away with the css and penguin side of things.

Code for the website is here: https://github.com/emilylin-itp/pingu_pong

The website is deployed using Netlify: pingu.netlfiy.com
(still need need to make it responsive though)


Part 2

  • Write a command-line JavaScript program that takes a URL as a command-line argument, makes a request to that host, and prints the HTML response.
  • Write a command-line JavaScript program that generates a valid HTML document, writing it to a file. Try to include randomness or some other external source of data.
  • Write a command-line JavaScript program that reads a plain text file and generates an HTML page based on its contents. For example, consider each line in the text file to be a headline, and generate a mock newspaper homepage.


Helpful Resources:







Command lines to remember:

'node -v' : version of node
'process.exit()' : exiting terminal
'npm init':