In this year's HAcK, you will be communicating your sensor data collected from your ESP to your website in real time. To handle this, we have blackboxed the communication part so all you will need to do is call the proper functions that we will be providing you.
- Install the following two libraries into your IDE:
- ArduinoJSON by Benoit Blanchon
- PubSubClient by Nick O'Leary
- Download into your sketch folder:
Creates a HackPublisher
instance which will handle sending data to the
website.
Initializes the publisher. Call this in setup()
after connecting to wifi.
Store a sensor's value that will be communicated to the website on the next call
to HackPublisher.send()
. The sensor
argument will be used in your website to
target the tag with the same id (this will be explained further in the
javascript section of this document).
Send the stored sensor data to the website
#include "HackPublisher.h"
const char *ssid = <SECRET_SSID>;
const char *password = <SECRET_PASSWORD>;
HackPublisher publisher("hackers"); // publisher instance for team "hackers"
int temp = 0; // variable that holds the temperature
void setup() {
// Initialize serial communication
Serial.begin(115200);
while (!Serial) continue;
// Connect to wifi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Initialize publisher
publisher.begin();
}
void loop() {
publisher.store("ultrasonic", 12.56); // store value for ultrasonic sensor
publisher.store("temp", temp); // store value for temp
publisher.store("meow", "woof"); // store value for meow
publisher.send(); // send stored data to website
delay(2000);
temp++;
}
- Download into your website folder:
Add the following script tags to your html. Be sure to replace "hackers"
with your actual team name. The string that you use for the team name must
match the string you use when you initialize your arduino publisher.
<script>team_name = "hackers"</script>
<script type="module" src="communication.js"></script>
To add tags that contain the value of the sent sensor data, they must contain
an id
attribute with the same name as the sensor. This sensor name is the one
you used in arduino when you called HackPublisher.store()
.
/* arduino_file.ino */
// Initialize Wifi and Publisher
// ...
void loop() {
publisher.store("temperature", temp); // store value for temperature
publisher.send(); // send the stored value for temperature
}
<!-- html_file.html -->
<!-- ... -->
<p id="temperature"></p> <!-- this will be populated with the sensor data -->
<!-- ... -->
If you want to work locally on your website, these are two options that you could use to locally host your site: