4 web pages are created: "/" - home page which is used to display the gauges. "/chart.html" - Is used to display chart. "/table.html" - Is used to display the data in a table. "/data.json"- Is used by the home page to update the the gauge values.
Hook Up
The below diagram shows how to connect a BerryIMU to an ESP8266 microcontroller, in this case it is the Adafruit Feather Huzzah .
The ESP8266 is another good microcontroller which can be used with the BerryIMU.
The ESP8266 is small and includes Wifi.
In this guide we will setup of the ESP8266 to provide a web page which we can then use to read the accelerometer, gyroscope and compass values from the BerryIMU. We will also force this webpage to refresh every 1 seconds.
Accessing the ESP8266 from an iPhone
The ESP8266 Arduino core to program our ESP8266. This allows you to use the Arduino IDE to program and upload to the ESP8266.
We have used the Adafruit Feather Huzzah and the Sparkfun Thing Dev board in this guide. Both are excellent boards with included USB to serial converters. Just plug in and upload. This guide can also be used with other ESP8266 boards, just take note of the pins used.
Sparkfun Thing and BerryIMUAdafruit Feather Hazzuh! and BerryIMU
The code can be found here . Download the entire Git repo. The code for this guide can be found under the directory ESP8266-BerryIMU/BerryIMU_ESP8266_simple_web/ The file you load into the Arduino IDE is BerryIMU_ESP8266_simple_web.ino.
This guide will only cover the specific to the ESP8266. There is another guide here https://ozzmaker.com/berryimu/ which covers the code used to calculate the angles and heading from the BerryIMU.
The first thing to do is update the code with your wireless network settings.
Further down you can see where we define the web server and what port to listen on
ESP8266WebServer server(80);
There is then a function called handleroot(). This is what builds the web page and sends it to the client when the client requests it E.g. When a web browser requests for a page. Looking at the line which contains the meta tag, you can see where the refresh timer is set to 1 seconds.
I have also hilighted the variables which store the angles and heading from the BerryIMU.
void handleroot()
{
//Create webpage with BerryIMU data which is updated every 1 seconds
server.sendContent("HTTP/1.1 200 OK\r\n"); //send new p\r\nage
server.sendContent("Content-Type: text/html\r\n");
server.sendContent("\r\n");
server.sendContent
("<html><head><meta http-equiv='refresh' content='1'</meta>"
"<h3 style=text-align:center;font-size:200%;color:RED;>BerryIMU and ESP8266</h3>"
"<h3 style=text-align:center;font-size:100%;>accelerometer, gyroscope, magnetometer</h3>"
"<h3 style=text-align:center;font-family:courier new;><a href=https://ozzmaker.com/ target=_blank>https://ozzmaker.com</a></h3><hr>");
server.sendContent
("<h2 style=text-align:center;> Filtered X angle= " + String(<strong><span style="color: #ff0000;">CFangleX</span></strong>));
server.sendContent
("<h2 style=text-align:center;> Filtered Y angle= " + String(<span style="color: #ff0000;"><strong>CFangleY</strong></span>));
server.sendContent
("</h2><h2 style=text-align:center;> Heading = " + String(<span style="color: #ff0000;"><strong>heading</strong></span>));
server.sendContent
("</h2><h2 style=text-align:center;> Tilt compensated heading = " + String(<strong><span style="color: #ff0000;">headingComp</span></strong>));
}
Within setup(), we define what pins are used for I2C to communicated with the BerryIMU.
Wire.begin(4,5);
The first value is the SDA pin and the second specifies the SCL pin. Any pin on the ESP8266 can be used for I2C.
Wireless is then enabled and then we try and connect to the wireless network. The IP address is then printed to the serial console.
WiFi.begin(ssid, password);
// Wait for connection
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
//Print IP to console
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
delay(3);
And finally, the web server is started and match on root of the web server and then run handleroot().
server.on("/", handleroot);
You need to add the below line in the main loop to handle web requests.
server.handleClient(); //Handler for client connections
