[conn-dev wk 1] Hey Arduino

First week of class! We were asked to study notes and examples on DOM elements, and make our own browser-based application that communicates with a microcontroller (Arduino). I regretted not starting earlier and ended up really cramming the day before class.

The structure of my site is not significantly different from the example code, I just made some CSS animations for extra pahzzaz. I also learned how to host things on GitHub, so here’s this page online:


Some experiments along the way

Learning to use terminal as Serial port –

Attempted to write the on/off switch in Arduino.

int lastButtonState = LOW;
int powerState = 0;
int lastPowerState = 1;
int buttonState = digitalRead(buttonPin);

  if (buttonState != lastButtonState) {
    if (buttonState == HIGH) {
      if (powerState < lastPowerState) {
        outgoing["button"] = 1;   
        inputsChanged = true;
        lastPowerState = powerState;
      } else {
        outgoing["button"] = 0;   
        inputsChanged = true;
        lastPowerState = 1; 
        powerState = 0; 
   lastButtonState = buttonState;

I didn’t end up using this little snippet of code because writing it in the .js event turned out to be much better. Instead, just send out 1 for pressed, 0 for released. Determining the button states in js then would look like:

let lastButtonState = 0;

if (sensors.button !== lastButtonState) {
  if (sensors.button === 0) {
lastButtonState = sensors.button;

I had just found out about this app controlling lights on the floor via bluetooth, and spent all afternoon making all the lights orange (some got changed back but some seemed to have overridden the control panel, whoops). Inspired by the warm, warm lighting that surrounded me, I decided to make the bg color interactive.

“looks like a bar” — jezzy lu

Some (elementary) discoveries along the way:

1. Color is much easier to manipulate in HSL, which i was able to write directly in CSS

2. document.body.style. is a valid syntax to find/change body CSS! And there I was struggling to give <body> an id…

I guess that was it. Then I just mapped the h and l values using the JSON string that came from Arduino input, and set them to backgroundColor.

Surprisingly I struggled the most at the hardware. I thought I had brought my Nano and breadboard home, but I didn’t, so I had to work with Uno and a pretty bad breadboard. I haven’t touched pcomp for a month and it shows. I wasn’t having the best day with the push button: first I connected it wrong, then it refused to work with the PULLUP in the code (or perhaps there’s no internal pullup resistor in Arduino Uno?); I tried with different buttons, internal PULLDOWN, actual resistors, changed jumper wires… 2 hours later it turned out it was just the breadboard that was unstable. I later put the button onto a smaller “cheeseboard” and it worked much better.

Attaching hand-drawn schematic. It seems a bit off, not gonna lie.

Leave a Reply

Your email address will not be published. Required fields are marked *