This week we learned about wireless networking and wired communication, which required learning to use a ESP32 device.
The assignment this week was to program a microcontroller to obtain and respond to information from the internet or radio, including at least one input and one output. Aurora and I decided to program the ESP32 XIAO to connect to a Firebase database and write values from an ultrasonic sensor to the database, and then code a web interface to read values from the database and move through a GIF as the object moved farther away.
We started with this tutorial to set up our Firebase database and connect our ESP32 XIAO to the database. The only hiccup was getting the ESP32 XIAO to connect to Wifi, which Bobby helped us fix by attaching the antenna to it!
The next step was the hardest: getting the ESP32 XIAO to work with the ultrasonic sensor. We started with my code from Week 6, which worked on the Arduino Uno. However, when we used the same code on the ESP32 XIAO, it kept giving 0’s! To debug, Nathan suggested we use the oscilloscope, so we commented stuff out of the code until the oscilloscope was showing a square wave signal from the trigger pin. However, we were stuck as to how to get our measureSignal function to actually detect the signal that was getting sent; it was like a qubit that collapsed when you tried to measure it. D:
So, we went back to a simpler version of the code that used delay and did not have a class structure. After lots of fiddling around, we realized that moving the echo pin to D2 while keeping the trigger pin at D9 allowed us to get a nonzero signal from the sensor using this simpler version of the code. After fixing this, we compared the code to our original code again and realized that we were waiting too long before calling pulseIn on the echo pin, and we should instead call it right away after the signal is sent on the trigger pin. After making both changes, we were able to detect the ultrasonic sensor signal!
#include <Arduino.h>
#include <WiFi.h>
#include <Firebase_ESP_Client.h>
// Provide the token generation process info.
#include "addons/TokenHelper.h"
// Provide the RTDB payload printing info and other helper functions.
#include "addons/RTDBHelper.h"
// Network credentials
#define WIFI_SSID REPLACE_WITH_YOUR_OWN
#define WIFI_PASSWORD REPLACE_WITH_YOUR_OWN
// Firebase project API Key
#define API_KEY REPLACE_WITH_YOUR_OWN
// Define the RTDB URL */
#define DATABASE_URL REPLACE_WITH_YOUR_OWN
//Define Firebase Data object
FirebaseData fbdo;
FirebaseAuth auth;
FirebaseConfig config;
class Ultrasonic {
public:
int trigPin;
int echoPin;
int signalInterval;
unsigned long signalStartTime = 0;
int measured = 3;
long duration;
Ultrasonic(int pin1, int pin2, int interval) {
trigPin = pin1;
echoPin = pin2;
signalInterval = interval; // in microseconds
pinMode(trigPin, OUTPUT);
pinMode(echoPin, INPUT);
}
void sendSignal() {
if ((micros() - signalStartTime > signalInterval) && (measured == 3)) {
signalStartTime = micros();
digitalWrite(trigPin, LOW); // Set the Trigger pin LOW to start a pulse
measured = 2;
}
else if ((micros() - signalStartTime > 2) && (measured == 2)) {
digitalWrite(trigPin, HIGH); // Set the Trigger pin HIGH
measured = 1;
}
else if ((micros() - signalStartTime > 12) && (measured == 1)) {
digitalWrite(trigPin, LOW); // Set the Trigger pin LOW again to complete the pulse
measured = 0; // Signal is done so ready to measure
}
}
void measureSignal() {
if (measured == 0) {
duration = pulseIn(echoPin, HIGH); // Listen for a pulse on the Echo pin
Serial.print("Duration: ");
Serial.println(duration);
measured = 3;
}
}
};
Ultrasonic ultrasonic(D9, D2, 10000);
unsigned long sendDataPrevMillis = 0;
bool signupOK = false;
void setup(){
Serial.begin(115200);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
Serial.print("Connecting to Wi-Fi");
while (WiFi.status() != WL_CONNECTED){
Serial.print(".");
delay(300);
}
Serial.println();
Serial.print("Connected with IP: ");
Serial.println(WiFi.localIP());
Serial.println();
/* Assign the api key (required) */
config.api_key = API_KEY;
/* Assign the RTDB URL (required) */
config.database_url = DATABASE_URL;
/* Sign up */
if (Firebase.signUp(&config, &auth, "", "")){
Serial.println("ok");
signupOK = true;
}
else{
Serial.printf("%s\n", config.signer.signupError.message.c_str());
}
/* Assign the callback function for the long running token generation task */
config.token_status_callback = tokenStatusCallback; //see addons/TokenHelper.h
Firebase.begin(&config, &auth);
Firebase.reconnectWiFi(true);
}
void loop(){
if (Firebase.ready() && signupOK){
ultrasonic.sendSignal();
ultrasonic.measureSignal();
// Write the duration to the database path ultrasonic
if (Firebase.RTDB.setInt(&fbdo, "ultrasonic", ultrasonic.duration)){
} else {
Serial.println("FAILED");
Serial.println("REASON: " + fbdo.errorReason());
}
}
}
We wanted to make a webpage that would display different frames of a gif depending on the readings of the ultrasonic sensor. We picked out two different gifs of milk and mocha bears and took screenshots of each of the frames (one of them has three frames and the other has four). Once we got past all of the sensor ~issues~ we started on the webpage, using the firebase web interface html code from the PS70 website as a starting point. We kept most of the basic configuration code to connect to the firebase page, but deleted the buttons and button functions that were from the PS70 code and replaced them with image displays to make our gif page. The frames for each gif are put into an array and each element of the array is displayed based on intervals (0-500, 500-900, 900-1300, and 1300+) for the duration variable read from the firebase page. See our code below and this page for our GIFs (which do not move at the moment because our sensor is not connected). Lauren is super speedy and a CS genius so this part of the project didn’t take too long yay :D (obviously I, Aurora, wrote this sentence because Lauren is also very humble and would probably not call herself a speedy CS genius) The webpage turned out cuteeeeee (in my opinion), but lags sometimes because the firebase page will randomly stop receiving values every once in a while with the error from fbdo.errorReason() being response payload read timed out (which means that the webpage cannot read new values from the firebase page, so no new values are being read/written anywhere so no new frame of gif is being shown).
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PHYSCI 70: Introduction to Digital Fabrication</title>
</head>
<body>
<figure>
<img id="gif1" src="./hug1.jpg" alt="hug1" width="400">
</figure>
<figure>
<img id="gif2" src="./love1.png" alt="love1" width="400">
</figure>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-database.js"></script>
<script>
var img1_array = ['./hug1.jpg', './hug2.jpg', './hug3.jpg'];
var img2_array = ['./love1.png', './love2.png', './love3.png', './love4.png'];
function changeImg(duration) {
if (duration <= 500) {
document.getElementById("gif1").src = img1_array[0];
document.getElementById("gif2").src = img2_array[0];
} else if (duration <= 900) {
document.getElementById("gif1").src = img1_array[1];
document.getElementById("gif2").src = img2_array[1];
} else if (duration <= 1300) {
document.getElementById("gif1").src = img1_array[2];
document.getElementById("gif2").src = img2_array[2];
} else {
document.getElementById("gif1").src = img1_array[2];
document.getElementById("gif2").src = img2_array[3];
}
}
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyANVWLb3l_BJL9bgHcHYrW4cr0Jkef9pA8",
authDomain: "REPLACE_WITH_YOUR_OWN",
databaseURL: "https://ps-70-10b27-default-rtdb.firebaseio.com",
projectId: "REPLACE_WITH_YOUR_OWN",
storageBucket: "REPLACE_WITH_YOUR_OWN",
messagingSenderId: "REPLACE_WITH_YOUR_OWN",
appId: "REPLACE_WITH_YOUR_OWN"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Get a database reference to our blog
var ref = firebase.database().ref("/");
setInterval(function() {
ref.on("value", function(snapshot) {
changeImg(snapshot.val().ultrasonic);
}, function (error) {
console.log("Error: " + error.code);
});
}, 100);
</script>
</body>