Ultrasonic sensor

A p5.js sketch that reads an HC-SR04 ultrasonic distance sensor and visualises the result as a colour bar. Distance and connection status are shown on screen in real time.

What This Example Does

• Polls the ultrasonic sensor every 200 ms
• Draws a vertical bar whose height represents distance (0–200 cm)
• Bar colour shifts from red (close) to green (far) using HSB colour mode
• Shows distance in cm and Arduino connection status

Hardware Requirements

• Arduino UNO R4 WiFi or ESP32 development board
• HC-SR04 ultrasonic sensor (or compatible: JSN-SR04T, HY-SRF05, etc.)
• Arduino and browser must be on the same WiFi network

Wiring (4-wire, HC-SR04)

Set the trig and echo pins at the top of sketch.js (const TRIG / const ECHO, defaults 12 and 14).

3-wire sensor (trig and echo on the same pin): set both fields to the same pin.

Arduino libraries

Install via Arduino IDE → Tools → Manage Libraries:

• WebSocketsServer (by Markus Sattler)

Install Pardalote itself by copying pardalote-arduino/library/Pardalote/ into your Arduino libraries folder (see the top-level README).

Quick Start

1. Upload the firmware

1. In Arduino IDE: File → Examples → Pardalote → ultrasonic-sensor. The sketch is two lines:

   Arduino

   #include <Pardalote.h>
   #include <PardaloteUltrasonic.h>
   
   void setup() { Pardalote.begin(); }
   void loop()  { Pardalote.run();   }
   

2. Select your board and upload

3. Open the Serial Monitor at 115200 baud — on first boot Pardalote asks for your WiFi credentials:

   === Pardalote ===
   No WiFi networks stored.
   === WiFi Configuration ===
   [a]dd  [d]elete  [c]lear all  [s]how  [x] exit
   > a
   SSID: YourWiFiName
   Password: ********
   Saved: YourWiFiName
   > x
   

   Credentials are saved to EEPROM and survive re-uploads. Press w in the Serial Monitor at any point while the board is trying to connect to update them.

   Prefer compile-time credentials? Create a secrets.h file in the sketch folder with:

   Arduino

   #define SECRET_SSID "YourWiFiName"
   #define SECRET_PASS "YourWiFiPassword"
   

   If both are configured, secrets.h is tried first.

4. Find your Arduino's IP address:

   • UNO R4 WiFi: scrolls across the LED matrix
   • ESP32: printed in the Serial Monitor

2. Open the example and connect

Open index.html in a browser. In the Board row, enter the Arduino's IP (or switch to USB) and press Connect — your choice is remembered per browser. The trig/echo pins are set at the top of sketch.js (const TRIG / const ECHO). Move an object in front of the sensor — the bar should respond.

How It Works

const TRIG = 12, ECHO = 14;   // HC-SR04 trigger / echo pins

arduino = new Arduino();
arduino.add('ultrasonicSensor', new Ultrasonic());   // register the extension
setupConnection(arduino, { store: 'pardalote-ultrasonic' });   // Board row + connection (connect.js)

// Attach + start polling once the board is ready ('ready' re-fires on every reconnect)
arduino.on('ready', () => {
    arduino.ultrasonicSensor.attach(TRIG, ECHO);
    arduino.ultrasonicSensor.setTimeout(40);   // 40 ms echo timeout ≈ 686 cm max range
    arduino.ultrasonicSensor.read(200, CM);    // poll every 200 ms, return cm
});

In draw(), read() returns the latest cached value — no extra network traffic:

let cm = arduino.ultrasonicSensor.read();

A return value of -1 means the echo timed out (nothing in range, or object too far away).

Echo timeout and range

The echo timeout determines maximum detectable range:

Increase with setTimeout() for longer range; decrease to speed up failed reads.

Script loading order

Include the pardalote.js bundle (core + every extension) before your sketch:

<script src="../../lib/pardalote.js"></script>
<script src="sketch.js"></script>

Troubleshooting

"Always reads -1"

• Echo timeout too short — try arduino.ultrasonicSensor.setTimeout(50)
• Point the sensor at a flat, hard surface (fabric and foam absorb ultrasound)
• Check wiring: TRIG and ECHO to the correct pins

"Readings jump around"

• Normal for ultrasound — add smoothing in draw() with a rolling average
• Make sure the sensor has a clear line of sight with no nearby reflective surfaces

"Sensor doesn't respond at all"

• Verify the sketch has #include <PardaloteUltrasonic.h>
• Check VCC → 5 V and GND → GND

"Arduino won't connect"

• Check the IP in the Board field and that you pressed Connect
• Arduino and browser must be on the same WiFi network

File Structure

ultrasonic-sensor/
├── index.html      # Canvas page (loads p5.js and the pardalote.js bundle)
├── sketch.js       # Sensor setup and distance visualisation
├── connect.js      # Board connection UI (WiFi / USB, remembered per browser)
└── README.md       # This file

dist/
└── pardalote.js    # Pardalote bundle (core + all extensions)

Next Steps

• Read in inches: arduino.ultrasonicSensor.read(200, INCH)
• Use as a trigger: fire an event when distance crosses a threshold with onChange()
• Up to 4 sensors simultaneously: arduino.add('front', new Ultrasonic()), arduino.add('side', new Ultrasonic())
• Combine with servos or NeoPixels to build reactive physical installations