DWD Wk 3: HW

Some resources provided by the professor this time:

Code we did in class, and outline of how to get started with Heroku and SQL
https://github.com/anb429/inclass/tree/master/class3
Intro to SQL
https://www.khanacademy.org/computing/computer-programming/sql

 

https://www.khanacademy.org/computing/computer-programming/sql/sql-basics/pc/challenge-book-list-database

Screen Shot 2019-04-20 at 5.19.48 PMScreen Shot 2019-04-20 at 5.20.02 PM

Another resource for SQL:

https://code.tutsplus.com/tutorials/how-to-create-a-phpmysql-powered-forum-from-scratch–net-10188

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 do the “Getting Started with Node + Postgres”?

Light Wk 10: DMX Controller

Final code lives: here

—–

Final:

Spring:

Summer:

Fall:

Winter:

 


 

Process: 

gameplan.jpg

 

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:

https://forum.arduino.cc/index.php?topic=114305.0
https://learn.sparkfun.com/tutorials/terminal-basics/connecting-to-your-device

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.

array_buttons_cue.JPG

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){
    cue_lib[channel].run(universe,blackout());

  } else if (channel == 4) {
    blackout();
  }
  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)) {
    console.log(col_arr_0[j]);

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

     //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 {
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
  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

Notes:

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 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)

screenshot-2019-04-07-19.33.19.png

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:

https://www.netlify.com/blog/2016/10/27/a-step-by-step-guide-deploying-a-static-site-or-single-page-app/

https://www.npmjs.com/package/validator

https://www.npmjs.com

https://www.youtube.com/watch?v=U57kU311-nE
(*VERY HELPFUL)

https://codeburst.io/the-only-nodejs-introduction-youll-ever-need-d969a47ef219
(*VERY HELPFUL)


https://nodejs.org/api/http.html#http_response_writehead_statuscode_statusmessage_headers

Command lines to remember:

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

Light Wk 8: Observations

IMG_5056.JPG

Friday, 3/15/19, 6:51pm
Canal St, E Houston St – New York

The exterior of this historical building is accentuated by the soft, warm yellow glow that are cast from these industrial LED (most likely) lights that hang at the top of the roof. The lights are placed evenly along the side of the building, matching well with the rhythmic, staccato-like placements of the windows. When the light is further away from the source it makes this soft pink on the surface of the building front. I remember this day being very cold and overcast with clouds for most of the day. At this particular hour, the sun is in the process of setting. With the cold blue of the sky, the warm light illuminated from these floodlights are accentuated.