Final code lives: here
—–
Final:
Spring:
Summer:
Fall:
Winter:
Process:
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:
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){
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.
