Hello, I am seeking some guidance on a project I'm working on using the ESP32 S3 Sense camera board. I am fairly confident in the C++ side of things, but this project has taken me into the HTML and javascript that I am much less familiar with. The goal is to connect to the ESP32 as an access point from a phone and then to use the client's device orientation events from the phone as feedback to the ESP32.
I have successfully connected and used the ESP32 as a webserver using buttons programmed on the page to send feedback. This is what all of the examples I've found in my searches do (turn on/off an LED, motor, etc). Now I'd like to take things to the next stage using the device orientation.
I tested that the browser (Chrome) on my android device supports using device orientation using this test page and everything worked as expected.
To send the client orientation data to the ESP32 I used one of the websocket examples out there and modified below:
#include <WiFi.h>
#include <WebServer.h>
#include <WebSocketsServer.h>
#include <ArduinoJson.h>
// SSID and password of Wifi connection:
const char* ssid = "ESP32";
const char* password = "PASSWORD";
// The string is the HTML for the page to be displayed
String webpage = "<!DOCTYPE html><html><head> <title>Device Orientation</title></head><body> <h1>Device Orientation</h1> <p>Move your device to see the orientation data.</p><script> var Socket; if(window.DeviceOrientationEvent) { window.addEventListener('deviceorientation', function(event) { var orientationData = { alpha: event.alpha, beta: event.beta, gamma: event.gamma }; Socket.send(JSON.stringify(orientationData));} } window.onload = function(event) { Socket = new WebSocket('ws://' + window.location.hostname + ':81/'); }</script></body></html>";
// Initialization of webserver and websocket
WebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81);
void setup() {
Serial.begin(115200);
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: http://");
Serial.println(IP);
server.on("/", []() {
server.send(200, "text/html", webpage);
});
server.begin();
webSocket.begin();
webSocket.onEvent(webSocketEvent);
}
void loop() {
server.handleClient();
webSocket.loop();
}
void webSocketEvent(byte num, WStype_t type, uint8_t * payload, size_t length) {
switch (type) { // switch on the type of information sent
case WStype_DISCONNECTED: // if a client is disconnected, then type == WStype_DISCONNECTED
Serial.println("Client " + String(num) + " disconnected");
break;
case WStype_CONNECTED: // if a client is connected, then type == WStype_CONNECTED
Serial.println("Client " + String(num) + " connected");
// optionally you can add code here what to do when connected
break;
case WStype_TEXT: // if a client has sent data, then type == WStype_TEXT
// try to decipher the JSON string received
StaticJsonDocument<200> doc; // create a JSON container
DeserializationError error = deserializeJson(doc, payload);
if (error) {
Serial.print(F("deserializeJson() failed: "));
Serial.println(error.f_str());
return;
}
else {
// JSON string was received correctly, so information can be retrieved:
const char* orientation_alpha = doc["alpha"];
const char* orientation_beta = doc["beta"];
const char* orientation_gamma = doc["gamma"];
Serial.print("Alpha = " + String(orientation_alpha) + "\t");
Serial.print("Beta = " + String(orientation_beta) + "\t");
Serial.println("Gamma = " + String(orientation_gamma));
}
break;
}
}
Since the HTML string in the code is hard to read I've got it here:
<!DOCTYPE html>
<html>
<head>
<title>Device Orientation</title>
</head>
<body>
<h1>Device Orientation</h1>
<p>Move your device to see the orientation data.</p>
<script>
var Socket;
if(window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function(event) {
var orientationData = {
alpha: event.alpha,
beta: event.beta,
gamma: event.gamma
};
Socket.send(JSON.stringify(orientationData));
}
}
window.onload = function(event) {
Socket = new WebSocket('ws://' + window.location.hostname + ':81/');
}
</script>
</body>
</html>
I can connect to the page as usual, but no data coming back on the serial monitor. To try and figure out which end the issue was on, I used the source code for the test page linked above and had the ESP32 serve that page. Again, I could connect, but the boxes where the data is to be displayed were all blank. It appears the issue is on the HTML javascript side of things. Can someone help me with this issue?