Connected Devices

Week 2

❓

(database above is temporarily broken)

Week 2

Final Dashboard

I wanted to use the Accelerometer to create a Dinosaur Game style interaction from Google Chrome’s 404 page in my dashboard. From there I ended up, using it to interact with an old sketch.

Next up would be to increase the communication rate and make the “controller” actually wireless and battery powered.

When I overwork my computer, something interesting has been happening: it gets stuck in a keyboard position but it’s a software issue.

Scan Networks Sketch Serial Monitor:

Please upgrade the firmware
MAC: 8C:AA:B5:8A:C9:04
Scanning available networks...
** Scan Networks **
number of available networks:2
0) MyAltice 540c8b	Signal: -83 dBm	Encryption: WPA2
1) crab	Signal: -94 dBm	Encryption: WPA2

Running WiFiTCPClient Logger

The Arduino I was using mysteriously lost its WiFi antenna.

/*
  WiFi TCP Client
  TCP Socket client for WiFiNINA and WiFi101 libraries.
  Connects to the TCP socket server, reads a sensor once
  every five seconds, and sends a message with the reading.

  You'll need to include an arduino_secrets.h file with the following info:
  #define SECRET_SSID "ssid"      // your network name
  #define SECRET_PASS "password"  // your network password

  Here's a test with netcat: 
  char serverAddress[] = "x.x.x.x";  // replace with your computer's IP
  then on your computer, run  netcat:
  $ nc -klw 2 8080 | tee log.json
  This will send the output to the command line and to a file called log.json

  created 30 Dec 2022
  updated 27 Jan 2025
  by Tom Igoe
 */

// #include <WiFi101.h>   // use this for MKR1000 board
#include <WiFiNINA.h>  // use this for Nano 33 IoT or MKR1010 boards
// #include <WiFi.h>      // use this for Nano ESP32 board
#include "arduino_secrets.h"

// Initialize the Wifi client library
WiFiClient client;

// replace with your host computer's IP address
const char server[] = "192.168.1.96"; // 0.0.0.0
const int portNum = 8080;
// change this to a unique name for the device:
String deviceName = "first";
// message sending interval, in ms:
int interval = 5000;
// last time a message was sent, in ms:
long lastSend = 0;

void setup() {
  //Initialize serial
  Serial.begin(9600);
  // if serial monitor's not open, wait 3 seconds:
  if (!Serial) delay(3000);
 
  // Connect to WPA/WPA2 network.
  WiFi.begin(SECRET_SSID, SECRET_PASS);

  // attempt to connect to Wifi network:
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print("Attempting to connect to SSID: ");
    Serial.println(SECRET_SSID);
    // wait a second for connection:
    delay(1000);
  }
  Serial.print("Connected to to SSID: ");
  Serial.println(SECRET_SSID);
  Serial.print("IP: ");
  Serial.println(WiFi.localIP());
  Serial.print("Signal Strength (dBm): ");
  Serial.println(WiFi.RSSI());
}

void loop() {
  // if the client's not connected, connect:
  if (!client.connected()) {
    Serial.println("connecting");
    Serial.println(server);
    Serial.println(portNum);
    client.connect(server, portNum);
    // skip the rest of the loop:
    return;
  }

  // once every interval, get a reading and send it:
  if (millis() - lastSend > interval) {
    // read sensor:
    int sensor = analogRead(A0);
    // format the message as JSON string:
    String message = "{\"device\": \"DEVICE\", \"sensor\": READING}";
    // replace READING with the reading:
    message.replace("READING", String(sensor));
    // and DEVICE with your device's name:
    message.replace("DEVICE", deviceName);
    // send the message:
    client.println(message);
    // update the timestamp:
    lastSend = millis();
  }

  // check if there is incoming data available to be received
  int messageSize = client.available();
  // if there's a string with length > 0:
  if (messageSize > 0) {
    Serial.println("Received a message:");
    Serial.println(client.readString());
  }
}

Q: is there a reason to be replacing instead of using the value directly?

Q ✅

Serial Monitor showed:

connecting
192.168.1.96
8080

When I closed Serial Monitor and opened nc -klw 2 8080, the expected messages of {"device": "first", "AccX": 0.22, "AccY": -0.96, "AccZ": 0.28} started rolling in. Upon closing Serial Monitor, there seemed to be a glitch.

Why? ~~I expected to see the same output on both.~~

Answer:

Arduino was stuck in a loop because client.connect() kept failing (no server to connect to). Once netcat was running, the connection succeeded, moving past the return to actually read sensors and send data.

To send output of netcat server on port 8080 to log.json, as well as keep sending it to terminal window and keep it running in the background: nc -l 8080 | tee log.json &

Now logging port 8080 data onto log.json, leave it running in the background and spin a web server on port assigned by terminal (?) - 8000

nc -l 8080 >> log.json & python3 -m http.server

Useful Commands

➜  wifi-dashboard echo "# wifi-dashboard" >> README.md
➜  wifi-dashboard echo "# wifi-dashboard" >> .gitignore
➜  wifi-dashboard echo "arduino_secrets.h" >> .gitignore

nano filename # Edit directly 
killall nc # kill all netcat processes (were all competing for same port)

#TODO Add database of useful commands, shortcuts, aliases? categorized by program.

Making the dashboard interesting

As I know roughly what I want to be seeing, but it would take me more time than I can dedicate, I decided to try and prompt my way into it. To avoid losing anything, I created a GitHub repo.

❓

I did some other fixes in between manually, particularly in regards to timing.

Prompt

I now want to take these barebones HTML Pages and turn them into something visually more interesting. I want to create 3 divs side by side.

1 should show the accelerometer data raw exactly as it comes in.

The second div should be a 3D canvas, either done with the Canvas Browser API or with Three JS. This will require some data processing as I want to use the X, Y; Z coordinates to trace a path. The latest data to come in should have the brightest color and it should diminish in brightness as we see older and older data. Let's have a maximum of 10 data points at any given time being visualized.

The 3rd one for now will be a placeholder.

When possible implement responsive UI.

Result without further changes

Prompt #2

❓

I wanted to use the accelerometer data to interact with something I’ve previously done for one of my websites - https://www.digipeasy.studio. Also have been wanting to explore how much of customization can be done with Claude Code, based on creative direction existing in other projects. It did quite well in one prompt, including copying my existing color codes and imagery.

On desktop, panel 1 will now be above panel 2, to create more room for panel 2.

/Users/ineslucas/code/ineslucas/creative-toolbox/src/pages/SkillsTags.js

For the 3rd panel, you're going to recreate my SkillsTags.js page. Copy the relevant assets from my Creative Toolbox project, including colors and my picture.

I also want you to look at the kind of styling, colors and fonts I'm using in that project and bring those over.

Do not change the tech stack unless you have my explicit permission. I want to keep this as simple as possible.

Prompt #3

Make the 3JS container occupy the full height of the container and have the animation be on or off via a toggle. Default is for animation to be off. Add orbit controls.

In the desktop version, now panel 1 and 2 only occupy 30% of the screen width.

On Panel 3:

Instead of spinning the balls into the ecosystem through the mouse, let's have that happen on load.
Make them bigger and let's have 30% less of them.
Add one in this color #F57935.
Now I want to use the x and y values of the accelerometer to move the #F57935 colored ball. Of course it should represent the movement I'm doing in reality.

Week 1

Goals for class are around wanting to contribute towards the evolution of small form factor personal devices into what I’ve been calling single purpose hardware if we prioritize personalization and user satisfaction instead of ad driven pricing models.

Electronic devices in my routines

Personal

Phone
Laptop
Wireless Headphones
Two-factor authentication prompts
Go Pro & live streaming into app

Home Devices

Latch Building Door Lock (Bluetooth app)
Alexa as a speaker and alarm clock with music :(
Smart bulbs
Air Purifier
3D Printer
Wifi Router
Smart TV
K-beauty LED Tech Device (bluetooth connection to phone app?)
Photo printer (Wifi connection into phone app)
Label Maker (not a connected device)

On the go

MTA Tap to Pay or POS Keypad
Passport Scanner at the airport
Buzzer to signal restaurant meal is ready
Receipt Printers
Motion Sensors

On campus

NYU Card to enter building
System determines # of people on campus setting general AC temp :( + what does that system look like and how does it ‘network’ floor to floor differently than others?
Charger Locker by the ER

Some affecting my environment indirectly

….. 🤔

Connected Devices

Examples include Arduino to a web server or laptops talking to each other's laptops. IoT is the new connected devices.

Operating Systems

Unix & Linux = POSIX operating systems with similar commands and structure. MacOS is now a Unix OS.

Networking Infrastructure

VPN = allows you to be in one real network while you're also in the private one
Virtual Private Server: Instance of an operating system within an operating system = containers. Each instance won't affect other people's instances

❓

How is this different from Docker?

Network Interfaces

Laptop has 3 network layers: WiFi, Bluetooth, Ethernet

Geographies of the internet: OSI Model: Please do not throw sausage pizza away

Physical layer - What physical medium are you transmitting on?
Datalink layer - What's your physical address (MAC address), regardless of which network you're on?
Network layer - What's your network address (IP address)? How do you connect to other networks?
Transport layer - How are you sending data packets? Should the receiver acknowledge them?
Session layer - How do you say hello and goodbye?
Presentation layer - How is the data formatted and/or encrypted? (e.g., HTML)
Application layer - What are you doing with the data transmitted or received?

Key points

With OSI model, web developers know a lot about presentation and application layer.

MAC address is unique to each computer.

IP (or Inet) number changes everytime you connect to a network. As long as you have an address.

Network Topologies

Random Networks Links between nodes are placed randomly. Messages travel hop by hop to reach distant nodes (distributed network).

Centralized Networks All nodes connect to one central node (star shape). Without the central node, the network is gone.

Decentralized Networks Essentially comprised of hubs, each with a central node. Hubs are linked together. Removal of one hub only affects nodes dependent on it.

The Internet Structure

No single central router
Network providers connect to each other through multiple links
Greater link density = more possible paths = more reliable service
Complete networks connect every node to every other node, requiring (n²-n)/2 links

Small World Networks

Strong ties to nearest neighbors, weak ties across larger network
Weak ties are crucial for connecting the larger network
Example: finding jobs through acquaintances rather than close friends

Visual Trace Route:

Stefan Sundin Traceroute mapper

Network Infrastructure

Content Delivery Network = Cloudflare

Autonomous Systems Networks of networks joined using Border Gateway Protocol (BGP). Major ISPs maintain these routers.

IP Addresses

IPv4: 4 bytes long
Public IP addresses are unique on the internet
Private IP address ranges: 10.0.0.0, 172.16.0.0, 192.168.0.0
Routers have both public and private IP addresses, acting as gateways

Address Assignment

MAC addresses: Licensed from IEEE, 6 bytes (first 3 = OUI, last 3 = unique device ID)
IP addresses: Managed by IANA through Regional Internet Registries (RIRs)
ARP (Address Resolution Protocol): Associates MAC address with IP address

Interface types GUI (the p5 editor for example) vs Text Interfaces (Command line tools?).

Command Line Tools

❓

I’m trying to figure out ways to use AI to standardize format of my notes. Original version lives here. Reformatted clean version is below.

‣

Command Line Tools

Network Diagnostics

nslookup tigoe.net              # See IP address for any website
ifconfig en0                    # The developer way to check network config
traceroute tigoe.net            # Shows network touchpoints/nodes
                                # Reveals who has info about our traffic

File Management

clear                           # End terminal instance
ls -l                          # List with details (shows permissions like drwxr-xr-x)
cat filename                    # See file contents (stands for concatenate)
cat *.txt                      # Open all txt files
ls *.txt                       # List all txt files

Serial Port Access

ls /dev/cu.*                   # See available serial ports
ls /dev/                       # Alternative way
cat /dev/cu.usbmodem101        # Stream data from serial port
                               # Port name from Arduino IDE or by running diff
                               # Serial port created after plugging in Arduino

Piping & Background Processes

cat /dev/cu.usbmodem101 >> log.txt     # Redirect output to file
cat /dev/cu.usbmodem101 >> log.txt &   # Run in background with &
cat myfile.txt | grep Velux            # Search for "Velux" in file

Process Management

ps                             # List all running processes
kill process_number            # Kill a specific process

Network Tools

nc tigoe.net 80                # Netcat - works over network (vs cat locally)
                               # Port 80
nc -nklw 2 80                  # l=listen, w=wait timeout
man nc                         # Manual/help

HTTP Server

nc -l 80                       # Listen on port 80
/get                           # Request verb

python3 -m http.server 80      # Serve HTTP on port 80
# Example IP: 10.20.54.224