| 2 |
raymond |
1 |
#ifndef LED_BUILTIN_LED
|
|
|
2 |
#define BUILTIN_LED 15
|
|
|
3 |
#endif
|
|
|
4 |
#define BOOT_BUTTON 0
|
|
|
5 |
|
|
|
6 |
#if defined(ESP8266)
|
|
|
7 |
#include <ESP8266mDNS.h>
|
|
|
8 |
#elif defined(ESP32)
|
|
|
9 |
#include <ESPmDNS.h>
|
|
|
10 |
#endif
|
|
|
11 |
#include <FS.h>
|
|
|
12 |
#include <LittleFS.h>
|
|
|
13 |
#include <AsyncFsWebServer.h> // https://github.com/cotestatnt/async-esp-fs-webserver
|
|
|
14 |
|
|
|
15 |
#define FILESYSTEM LittleFS
|
|
|
16 |
|
|
|
17 |
char const* hostname = "fsbrowser";
|
|
|
18 |
AsyncFsWebServer server(FILESYSTEM, 80, hostname);
|
|
|
19 |
long unsigned int timer = 0; // used to determine when to send websocket packets
|
|
|
20 |
|
|
|
21 |
// type declarations for websocket packet
|
|
|
22 |
|
|
|
23 |
// data type
|
|
|
24 |
typedef struct trig_t {
|
|
|
25 |
float sin;
|
|
|
26 |
float cos;
|
|
|
27 |
float tan;
|
|
|
28 |
uint16_t angle; // storing angle (x1000) as an integer, just to be different!
|
|
|
29 |
uint16_t X; // column on chart
|
|
|
30 |
};
|
|
|
31 |
|
|
|
32 |
// union of data type and a byte array for websockets
|
|
|
33 |
typedef union trig_u {
|
|
|
34 |
trig_t data;
|
|
|
35 |
uint8_t byteArray[sizeof(trig_t)];
|
|
|
36 |
};
|
|
|
37 |
|
|
|
38 |
trig_u trig; // union to store trig data to be transmitted
|
|
|
39 |
uint16_t X=0; // chart column
|
|
|
40 |
|
|
|
41 |
// HTML of homepage:
|
|
|
42 |
static const char homepage[] PROGMEM = R"EOF(
|
|
|
43 |
<!DOCTYPE html>
|
|
|
44 |
<html>
|
|
|
45 |
|
|
|
46 |
<body onload="onBodyLoad()">
|
|
|
47 |
<canvas id="chart" width="500" height="202"></canvas>
|
|
|
48 |
<span>Angle (radians): </span><span id="angle"></span>
|
|
|
49 |
<script type="text/javascript">
|
|
|
50 |
|
|
|
51 |
var ws = null; // reference to websocket
|
|
|
52 |
var v16; // 16-bit view of incoming data
|
|
|
53 |
var v32; // 32-bit view of incoming data
|
|
|
54 |
|
|
|
55 |
var ctxChart = null; // reference to chart canvas 2d context
|
|
|
56 |
var angle; // angle (radians)
|
|
|
57 |
var sin = 0; // sin of angle
|
|
|
58 |
var cos = 1; // cos of angle
|
|
|
59 |
var tan = 0; // tan of angle
|
|
|
60 |
|
|
|
61 |
// Handles incoming messages
|
|
|
62 |
function rxMessage(msg) {
|
|
|
63 |
// console.log(msg);
|
|
|
64 |
v16 = new Uint16Array(msg);
|
|
|
65 |
v32 = new Float32Array(msg);
|
|
|
66 |
angle = v16[6] / 1000; // (1000x) angle is stored as an int in the 7th pair of bytes in the websocket packet
|
|
|
67 |
var X = v16[7]; // current column is stored as an int in the 8th pair of bytes in the websocket packet
|
|
|
68 |
document.getElementById("angle").innerHTML = angle;
|
|
|
69 |
// Draw a line from previous sin point to current sin point
|
|
|
70 |
ctxChart.strokeStyle = "red";
|
|
|
71 |
ctxChart.beginPath();
|
|
|
72 |
ctxChart.moveTo(X-1, 100 - 100*sin);
|
|
|
73 |
sin = v32[0]; // sin is stored as a float in the first four bytes of the websocket packet
|
|
|
74 |
ctxChart.lineTo(X, 100 - 100*sin);
|
|
|
75 |
ctxChart.stroke();
|
|
|
76 |
// Draw a line from previous cos point to current sin point
|
|
|
77 |
ctxChart.strokeStyle = "green";
|
|
|
78 |
ctxChart.beginPath();
|
|
|
79 |
ctxChart.moveTo(X-1, 100 - 100*cos);
|
|
|
80 |
cos = v32[1];
|
|
|
81 |
ctxChart.lineTo(X, 100 - 100*cos);
|
|
|
82 |
ctxChart.stroke();
|
|
|
83 |
// Draw a line from previous tan point to current tan point
|
|
|
84 |
ctxChart.strokeStyle = "blue";
|
|
|
85 |
ctxChart.beginPath();
|
|
|
86 |
ctxChart.moveTo(X-1, 100 - 100*tan);
|
|
|
87 |
tan = v32[2];
|
|
|
88 |
ctxChart.lineTo(X, 100 - 100*tan);
|
|
|
89 |
ctxChart.stroke();
|
|
|
90 |
// increment X and wrap if necessary
|
|
|
91 |
if (++X >= 500) {
|
|
|
92 |
X = 0;
|
|
|
93 |
ctxChart.clearRect(0,0,500,202);
|
|
|
94 |
}
|
|
|
95 |
}
|
|
|
96 |
|
|
|
97 |
// Configure and start WebSocket client
|
|
|
98 |
function startSocket() {
|
|
|
99 |
ws = new WebSocket('ws://' + document.location.host + '/ws', ['arduino']);
|
|
|
100 |
ws.binaryType = "arraybuffer";
|
|
|
101 |
ws.onopen = function (e) {
|
|
|
102 |
console.log("WebSocket client connected to " + 'ws://' + document.location.host + '/ws');
|
|
|
103 |
};
|
|
|
104 |
ws.onclose = function (e) {
|
|
|
105 |
addMessage("WebSocket client disconnected");
|
|
|
106 |
};
|
|
|
107 |
ws.onerror = function (e) {
|
|
|
108 |
console.log("ws error", e);
|
|
|
109 |
addMessage("Error");
|
|
|
110 |
};
|
|
|
111 |
ws.onmessage = function (e) {
|
|
|
112 |
rxMessage(e.data)
|
|
|
113 |
};
|
|
|
114 |
}
|
|
|
115 |
|
|
|
116 |
// When page is fully loaded start connection
|
|
|
117 |
function onBodyLoad() {
|
|
|
118 |
startSocket();
|
|
|
119 |
ctxChart = document.getElementById("chart").getContext("2d");
|
|
|
120 |
}
|
|
|
121 |
</script>
|
|
|
122 |
</body>
|
|
|
123 |
|
|
|
124 |
</html>
|
|
|
125 |
)EOF";
|
|
|
126 |
|
|
|
127 |
// In this example a custom websocket event handler is used instead default
|
|
|
128 |
void onWsEvent(AsyncWebSocket* server, AsyncWebSocketClient* client, AwsEventType type, void* arg, uint8_t* data, size_t len) {
|
|
|
129 |
switch (type) {
|
|
|
130 |
case WS_EVT_CONNECT:
|
|
|
131 |
client->printf("{\"Websocket connected\": true, \"clients\": %u}", client->id());
|
|
|
132 |
Serial.printf("Websocket client %u connected\n", client->id());
|
|
|
133 |
break;
|
|
|
134 |
|
|
|
135 |
case WS_EVT_DISCONNECT:
|
|
|
136 |
Serial.printf("Websocket client %u connected\n", client->id());
|
|
|
137 |
break;
|
|
|
138 |
|
|
|
139 |
case WS_EVT_DATA:
|
|
|
140 |
{
|
|
|
141 |
AwsFrameInfo* info = (AwsFrameInfo*)arg;
|
|
|
142 |
if (info->opcode == WS_TEXT) {
|
|
|
143 |
char msg[len+1];
|
|
|
144 |
msg[len] = '\0';
|
|
|
145 |
memcpy(msg, data, len);
|
|
|
146 |
Serial.printf("Received message \"%s\"\n", msg);
|
|
|
147 |
}
|
|
|
148 |
}
|
|
|
149 |
break;
|
|
|
150 |
|
|
|
151 |
default:
|
|
|
152 |
break;
|
|
|
153 |
}
|
|
|
154 |
}
|
|
|
155 |
|
|
|
156 |
//////////////////////////////// Filesystem /////////////////////////////////////////
|
|
|
157 |
bool startFilesystem() {
|
|
|
158 |
if (LittleFS.begin()){
|
|
|
159 |
server.printFileList(LittleFS, "/", 1);
|
|
|
160 |
Serial.println();
|
|
|
161 |
return true;
|
|
|
162 |
}
|
|
|
163 |
else {
|
|
|
164 |
Serial.println("ERROR on mounting filesystem. It will be reformatted!");
|
|
|
165 |
LittleFS.format();
|
|
|
166 |
ESP.restart();
|
|
|
167 |
}
|
|
|
168 |
return false;
|
|
|
169 |
}
|
|
|
170 |
|
|
|
171 |
void setup() {
|
|
|
172 |
pinMode(BUILTIN_LED, OUTPUT);
|
|
|
173 |
digitalWrite(BUILTIN_LED, HIGH);
|
|
|
174 |
|
|
|
175 |
Serial.begin(115200);
|
|
|
176 |
while (!Serial) {
|
|
|
177 |
if (millis() > 3000) break; // 3 second timeout to start Serial
|
|
|
178 |
}
|
|
|
179 |
|
|
|
180 |
digitalWrite(BUILTIN_LED, LOW);
|
|
|
181 |
if (Serial) { // flash LED if Serial is available
|
|
|
182 |
delay(200);
|
|
|
183 |
digitalWrite(BUILTIN_LED, HIGH);
|
|
|
184 |
delay(200);
|
|
|
185 |
digitalWrite(BUILTIN_LED, LOW);
|
|
|
186 |
}
|
|
|
187 |
|
|
|
188 |
// FILESYSTEM INIT
|
|
|
189 |
startFilesystem();
|
|
|
190 |
|
|
|
191 |
// Try to connect to WiFi (will start AP if not connected after timeout)
|
|
|
192 |
if (!server.startWiFi(10000)) {
|
|
|
193 |
Serial.println("\nWiFi not connected! Starting AP mode...");
|
|
|
194 |
char ssid[21];
|
|
|
195 |
#ifdef defined(ESP8266)
|
|
|
196 |
snprintf(ssid, sizeof(ssid), "ESP-%dX", ESP.getChipId());
|
|
|
197 |
#elif defined(ESP32)
|
|
|
198 |
snprintf(ssid, sizeof(ssid), "ESP-%llX", ESP.getEfuseMac());
|
|
|
199 |
#endif
|
|
|
200 |
server.startCaptivePortal(ssid, "123456789", "/setup");
|
|
|
201 |
}
|
|
|
202 |
|
|
|
203 |
|
|
|
204 |
// Add custom page handlers
|
|
|
205 |
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
|
|
|
206 |
request->send(200, "text/html", homepage);
|
|
|
207 |
});
|
|
|
208 |
|
|
|
209 |
// Enable ACE FS file web editor and add FS info callback function
|
|
|
210 |
server.enableFsCodeEditor();
|
|
|
211 |
|
|
|
212 |
// Init with custom WebSocket event handler and start server
|
|
|
213 |
server.init(onWsEvent);
|
|
|
214 |
|
|
|
215 |
Serial.print(F("ESP Web Server started on IP Address: "));
|
|
|
216 |
Serial.println(server.getServerIP());
|
|
|
217 |
Serial.println(F(
|
|
|
218 |
"This is \"BinaryWebSocket.ino\" example.\n"
|
|
|
219 |
"Open /setup page to configure optional parameters.\n"
|
|
|
220 |
"Open /edit page to view, edit or upload example or your custom webserver source files."
|
|
|
221 |
));
|
|
|
222 |
|
|
|
223 |
// Set hostname
|
|
|
224 |
#ifdef ESP8266
|
|
|
225 |
WiFi.hostname(hostname);
|
|
|
226 |
#elif defined(ESP32)
|
|
|
227 |
WiFi.setHostname(hostname);
|
|
|
228 |
#endif
|
|
|
229 |
|
|
|
230 |
// Start MDSN responder
|
|
|
231 |
if (WiFi.status() == WL_CONNECTED) {
|
|
|
232 |
if (MDNS.begin(hostname)) {
|
|
|
233 |
Serial.println(F("MDNS responder started."));
|
|
|
234 |
Serial.printf("You should be able to connect with address http://%s.local/\n", hostname);
|
|
|
235 |
// Add service to MDNS-SD
|
|
|
236 |
MDNS.addService("http", "tcp", 80);
|
|
|
237 |
}
|
|
|
238 |
}
|
|
|
239 |
}
|
|
|
240 |
|
|
|
241 |
void loop() {
|
|
|
242 |
|
|
|
243 |
// send websocket every 50ms
|
|
|
244 |
if (millis() > 50 * timer) {
|
|
|
245 |
timer++;
|
|
|
246 |
trig.data.angle = 1000.0 * 2 * PI * X/500; // angle (x1000) is stored as a 16-bit integer, just to be different!
|
|
|
247 |
trig.data.sin = sin(trig.data.angle/1000.0);
|
|
|
248 |
trig.data.cos = cos(trig.data.angle/1000.0);
|
|
|
249 |
trig.data.tan = tan(trig.data.angle/1000.0);
|
|
|
250 |
trig.data.X = X;
|
|
|
251 |
if (++X >= 500) X = 0;
|
|
|
252 |
server.wsBroadcastBinary(trig.byteArray, sizeof(trig.byteArray));
|
|
|
253 |
}
|
|
|
254 |
}
|