├── ESP32_CAM_WebSocket_Servo_Tests.ino
├── README.md
└── data
    ├── edit.htm
    ├── favicon.ico
    ├── graphs.js.gz
    ├── index.htm
    ├── ws_arm.html
    ├── ws_basic.html
    ├── ws_gamepad.html
    ├── ws_gamepad_example_data.html
    └── ws_touchscreen_joystick.html


/ESP32_CAM_WebSocket_Servo_Tests.ino:
--------------------------------------------------------------------------------
  1 | /* 
  2 |   FSWebServer - Example WebServer with SPIFFS backend for esp8266
  3 |   Copyright (c) 2015 Hristo Gochkov. All rights reserved.
  4 |   This file is part of the ESP8266WebServer library for Arduino environment.
  5 | 
  6 |   This library is free software; you can redistribute it and/or
  7 |   modify it under the terms of the GNU Lesser General Public
  8 |   License as published by the Free Software Foundation; either
  9 |   version 2.1 of the License, or (at your option) any later version.
 10 |   This library is distributed in the hope that it will be useful,
 11 |   but WITHOUT ANY WARRANTY; without even the implied warranty of
 12 |   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 13 |   Lesser General Public License for more details.
 14 |   You should have received a copy of the GNU Lesser General Public
 15 |   License along with this library; if not, write to the Free Software
 16 |   Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 17 |   
 18 |   upload the contents of the data folder with MkSPIFFS Tool ("ESP8266 Sketch Data Upload" in Tools menu in Arduino IDE)
 19 |   or you can upload the contents of a folder if you CD in that folder and run the following command:
 20 |   for file in `\ls -A1`; do curl -F "file=@$PWD/$file" esp8266fs.local/edit; done
 21 |   
 22 |   access the sample web page at http://esp8266fs.local
 23 |   edit the page by going to http://esp8266fs.local/edit
 24 | */
 25 | #if defined(ARDUINO_ARCH_ESP8266)
 26 | #include <ESP8266WiFi.h>
 27 | #include <WiFiClient.h>
 28 | #include <ESP8266WebServer.h>
 29 | #include <ESP8266mDNS.h>
 30 | #include <FS.h>
 31 | #elif defined(ARDUINO_ARCH_ESP32)
 32 | #include <WiFi.h>
 33 | #include <WiFiClient.h>
 34 | #include <WebServer.h>
 35 | #include <ESPmDNS.h>
 36 | #include <SPIFFS.h>
 37 | #endif
 38 | //Add a below line for AutoConnect.
 39 | #include <AutoConnect.h>
 40 | #include <WebSocketsServer.h>
 41 | 
 42 | #include <Wire.h>
 43 | #include <Adafruit_PWMServoDriver.h>
 44 | Adafruit_PWMServoDriver pwm = Adafruit_PWMServoDriver();
 45 | #define SERVOMIN  150 // This is the 'minimum' pulse length count (out of 4096)
 46 | #define SERVOMAX  600 // This is the 'maximum' pulse length count (out of 4096)
 47 | #define SERVO_FREQ 50 // Analog servos run at ~50 Hz updates
 48 | 
 49 | #define DBG_OUTPUT_PORT Serial
 50 | 
 51 | const char* ssid = "esp32001";
 52 | const char* password = "esp32001";
 53 | #if defined(ARDUINO_ARCH_ESP8266)
 54 | const char* host = "esp8266fs";
 55 | 
 56 | ESP8266WebServer server(80);
 57 | #elif defined(ARDUINO_ARCH_ESP32)
 58 | const char* host = "esp32fs";
 59 | 
 60 | WebServer server(80);
 61 | #endif
 62 | 
 63 | #define AC_DEBUG
 64 | WebSocketsServer webSocket = WebSocketsServer(81);
 65 | 
 66 | //Add a below line for AutoConnect.
 67 | AutoConnect       portal(server);
 68 | AutoConnectConfig config;
 69 | AutoConnectAux    FSBedit("/edit", "Edit");
 70 | AutoConnectAux    FSBlist("/list?dir=\"/\"", "List");
 71 | //holds the current upload
 72 | File fsUploadFile;
 73 | 
 74 | //format bytes
 75 | String formatBytes(size_t bytes){
 76 |   if (bytes < 1024) {
 77 |     return String(bytes) + "B";
 78 |   } else if (bytes < (1024 * 1024)) {
 79 |     return String(bytes / 1024.0) + "KB";
 80 |   } else if (bytes < (1024 * 1024 * 1024)) {
 81 |     return String(bytes / 1024.0 / 1024.0) + "MB";
 82 |   } else {
 83 |     return String(bytes / 1024.0 / 1024.0 / 1024.0) + "GB";
 84 |   }
 85 | }
 86 | 
 87 | String getContentType(String filename) {
 88 |   if (server.hasArg("download")) {
 89 |     return "application/octet-stream";
 90 |   } else if (filename.endsWith(".htm")) {
 91 |     return "text/html";
 92 |   } else if (filename.endsWith(".html")) {
 93 |     return "text/html";
 94 |   } else if (filename.endsWith(".css")) {
 95 |     return "text/css";
 96 |   } else if (filename.endsWith(".js")) {
 97 |     return "application/javascript";
 98 |   } else if (filename.endsWith(".png")) {
 99 |     return "image/png";
100 |   } else if (filename.endsWith(".gif")) {
101 |     return "image/gif";
102 |   } else if (filename.endsWith(".jpg")) {
103 |     return "image/jpeg";
104 |   } else if (filename.endsWith(".ico")) {
105 |     return "image/x-icon";
106 |   } else if (filename.endsWith(".xml")) {
107 |     return "text/xml";
108 |   } else if (filename.endsWith(".pdf")) {
109 |     return "application/x-pdf";
110 |   } else if (filename.endsWith(".zip")) {
111 |     return "application/x-zip";
112 |   } else if (filename.endsWith(".gz")) {
113 |     return "application/x-gzip";
114 |   }
115 |   return "text/plain";
116 | }
117 | 
118 | bool handleFileRead(String path) {
119 |   DBG_OUTPUT_PORT.println("handleFileRead: " + path);
120 |   if (path.endsWith("/")) {
121 |     path += "index.htm";
122 |   }
123 |   String contentType = getContentType(path);
124 |   String pathWithGz = path + ".gz";
125 |   if (SPIFFS.exists(pathWithGz) || SPIFFS.exists(path)) {
126 |     if (SPIFFS.exists(pathWithGz)) {
127 |       path += ".gz";
128 |     }
129 |     File file = SPIFFS.open(path, "r");
130 |     server.streamFile(file, contentType);
131 |     file.close();
132 |     return true;
133 |   }
134 |   return false;
135 | }
136 | 
137 | void handleFileUpload() {
138 |   if (server.uri() != "/edit") {
139 |     return;
140 |   }
141 |   HTTPUpload& upload = server.upload();
142 |   if (upload.status == UPLOAD_FILE_START) {
143 |     String filename = upload.filename;
144 |     if (!filename.startsWith("/")) {
145 |       filename = "/" + filename;
146 |     }
147 |     DBG_OUTPUT_PORT.print("handleFileUpload Name: "); DBG_OUTPUT_PORT.println(filename);
148 |     fsUploadFile = SPIFFS.open(filename, "w");
149 |     filename = String();
150 |   } else if (upload.status == UPLOAD_FILE_WRITE) {
151 |     //DBG_OUTPUT_PORT.print("handleFileUpload Data: "); DBG_OUTPUT_PORT.println(upload.currentSize);
152 |     if (fsUploadFile) {
153 |       fsUploadFile.write(upload.buf, upload.currentSize);
154 |     }
155 |   } else if (upload.status == UPLOAD_FILE_END) {
156 |     if (fsUploadFile) {
157 |       fsUploadFile.close();
158 |     }
159 |     DBG_OUTPUT_PORT.print("handleFileUpload Size: "); DBG_OUTPUT_PORT.println(upload.totalSize);
160 |   }
161 | }
162 | 
163 | void handleFileDelete() {
164 |   if (server.args() == 0) {
165 |     return server.send(500, "text/plain", "BAD ARGS");
166 |   }
167 |   String path = server.arg(0);
168 |   DBG_OUTPUT_PORT.println("handleFileDelete: " + path);
169 |   if (path == "/") {
170 |     return server.send(500, "text/plain", "BAD PATH");
171 |   }
172 |   if (!SPIFFS.exists(path)) {
173 |     return server.send(404, "text/plain", "FileNotFound");
174 |   }
175 |   SPIFFS.remove(path);
176 |   server.send(200, "text/plain", "");
177 |   path = String();
178 | }
179 | 
180 | void handleFileCreate() {
181 |   if (server.args() == 0) {
182 |     return server.send(500, "text/plain", "BAD ARGS");
183 |   }
184 |   String path = server.arg(0);
185 |   DBG_OUTPUT_PORT.println("handleFileCreate: " + path);
186 |   if (path == "/") {
187 |     return server.send(500, "text/plain", "BAD PATH");
188 |   }
189 |   if (SPIFFS.exists(path)) {
190 |     return server.send(500, "text/plain", "FILE EXISTS");
191 |   }
192 |   File file = SPIFFS.open(path, "w");
193 |   if (file) {
194 |     file.close();
195 |   } else {
196 |     return server.send(500, "text/plain", "CREATE FAILED");
197 |   }
198 |   server.send(200, "text/plain", "");
199 |   path = String();
200 | }
201 | 
202 | void handleFileList() {
203 |   if (!server.hasArg("dir")) {
204 |     server.send(500, "text/plain", "BAD ARGS");
205 |     return;
206 |   }
207 |   
208 |   String path = server.arg("dir");
209 |   DBG_OUTPUT_PORT.println("handleFileList: " + path);
210 | #if defined(ARDUINO_ARCH_ESP8266)
211 |   Dir dir = SPIFFS.openDir(path);
212 | #elif defined(ARDUINO_ARCH_ESP32)
213 |   File root = SPIFFS.open(path);
214 | #endif
215 |   path = String();
216 | 
217 |   String output = "[";
218 | #if defined(ARDUINO_ARCH_ESP8266)
219 |   while (dir.next()) {
220 |     File entry = dir.openFile("r");
221 |     if (output != "[") {
222 |       output += ',';
223 |     }
224 |     bool isDir = false;
225 |     output += "{\"type\":\"";
226 |     output += (isDir) ? "dir" : "file";
227 |     output += "\",\"name\":\"";
228 |     output += String(entry.name()).substring(1);
229 |     output += "\",\"size\":\"";
230 |     output += String(entry.size());
231 |     output += "\"}";
232 |     entry.close();
233 |   }
234 | #elif defined(ARDUINO_ARCH_ESP32)
235 |   if(root.isDirectory()){
236 |     File file = root.openNextFile();
237 |     while(file){
238 |       if (output != "[") {
239 |         output += ',';
240 |       }
241 |       output += "{\"type\":\"";
242 |       output += (file.isDirectory()) ? "dir" : "file";
243 |       output += "\",\"name\":\"";
244 |       output += String(file.name()).substring(1);
245 |       output += "\",\"size\":\"";
246 |       output += String(file.size());
247 |       output += "\"}";
248 |       file = root.openNextFile();
249 |     }
250 |   }
251 | #endif
252 |   
253 |   output += "]";
254 |   server.send(200, "text/json", output);
255 | }
256 | 
257 | void setup(void){
258 |   DBG_OUTPUT_PORT.begin(115200);
259 |   DBG_OUTPUT_PORT.print("\n");
260 |   DBG_OUTPUT_PORT.setDebugOutput(true);
261 |   SPIFFS.begin();
262 |   {
263 | #if defined(ARDUINO_ARCH_ESP8266)
264 |     Dir dir = SPIFFS.openDir("/");
265 |     while (dir.next()) {
266 |       String fileName = dir.fileName();
267 |       size_t fileSize = dir.fileSize();
268 |       DBG_OUTPUT_PORT.printf("FS File: %s, size: %s\n", fileName.c_str(), formatBytes(fileSize).c_str());
269 |     }
270 | #elif defined(ARDUINO_ARCH_ESP32)
271 |     File root = SPIFFS.open("/");
272 |     File file = root.openNextFile();
273 |     while(file){
274 |       String fileName = file.name();
275 |       size_t fileSize = file.size();
276 |       DBG_OUTPUT_PORT.printf("FS File: %s, size: %s\n", fileName.c_str(), formatBytes(fileSize).c_str());
277 |       file = root.openNextFile();
278 |     }
279 | #endif
280 |     DBG_OUTPUT_PORT.printf("\n");
281 |   }
282 |   
283 | 
284 |   DBG_OUTPUT_PORT.println("PWM starting");
285 |   Wire.begin(13,15);
286 |   pwm.begin();
287 |   pwm.setPWMFreq(SERVO_FREQ);  // Analog servos run at ~50 Hz updates
288 |   DBG_OUTPUT_PORT.println("PWM started");
289 | 
290 |   //SERVER INIT
291 |   //list directory
292 |   server.on("/list", HTTP_GET, handleFileList);
293 |   //load editor
294 |   server.on("/edit", HTTP_GET, []() {
295 |     if (!handleFileRead("/edit.htm")) {
296 |       server.send(404, "text/plain", "FileNotFound");
297 |     }
298 |   });
299 |   //create file
300 |   server.on("/edit", HTTP_PUT, handleFileCreate);
301 |   //delete file
302 |   server.on("/edit", HTTP_DELETE, handleFileDelete);
303 |   //first callback is called after the request has ended with all parsed arguments
304 |   //second callback handles file uploads at that location
305 |   server.on("/edit", HTTP_POST, []() {
306 |     server.send(200, "text/plain", "");
307 |   }, handleFileUpload);
308 | 
309 |   DBG_OUTPUT_PORT.println("server handlers started");
310 |   //called when the url is not defined here
311 |   //use it to load content from SPIFFS
312 |   //Replacement as follows to make AutoConnect recognition.
313 |   //server.onNotFound([](){
314 |   portal.onNotFound([](){
315 |     if(!handleFileRead(server.uri()))
316 |       server.send(404, "text/plain", "FileNotFound");
317 |   });
318 |   DBG_OUTPUT_PORT.println("404 handler started");
319 | 
320 |   //get heap status, analog input value and all GPIO statuses in one json call
321 |   server.on("/all", HTTP_GET, [](){
322 |     String json = "{";
323 |     json += "\"heap\":"+String(ESP.getFreeHeap());
324 |     json += ", \"analog\":"+String(analogRead(A0));
325 | #if defined(ARDUINO_ARCH_ESP8266)
326 |     json += ", \"gpio\":"+String((uint32_t)(((GPI | GPO) & 0xFFFF) | ((GP16I & 0x01) << 16)));
327 | #elif defined(ARDUINO_ARCH_ESP32)
328 |     json += ", \"gpio\":" + String((uint32_t)(0));
329 | #endif
330 |     json += "}";
331 |     server.send(200, "text/json", json);
332 |     json = String();
333 |   });
334 | 
335 |   DBG_OUTPUT_PORT.println("/all handler started");
336 |   //Set menu title
337 |   config.title = "FSBrowser";
338 |   portal.config(config);
339 |   //Register AutoConnect menu
340 |   DBG_OUTPUT_PORT.println("portal about to join");
341 |   portal.join({ FSBedit, FSBlist });
342 |   //Replacement as follows to make AutoConnect recognition.
343 |   //server.begin();
344 |   DBG_OUTPUT_PORT.println("portal about to begin");
345 |   portal.begin();
346 |   DBG_OUTPUT_PORT.println("HTTP server started");
347 | 
348 |   //Relocation as follows to make AutoConnect recognition.
349 |   DBG_OUTPUT_PORT.println("");
350 |   DBG_OUTPUT_PORT.print("Connected! IP address: ");
351 |   DBG_OUTPUT_PORT.println(WiFi.localIP());
352 | 
353 |   //Relocation as follows to make AutoConnect recognition.
354 |   if (MDNS.begin(host)) {
355 |     MDNS.addService("http", "tcp", 80);
356 |     DBG_OUTPUT_PORT.print("Open http://");
357 |     DBG_OUTPUT_PORT.print(host);
358 |     DBG_OUTPUT_PORT.println(".local/edit to see the file browser");
359 |   }
360 |   else {
361 |     DBG_OUTPUT_PORT.print("mDNS start failed");
362 |   }
363 |   webSocket.begin();
364 |   webSocket.onEvent(webSocketEvent);
365 | 
366 |   centerServos();
367 | }
368 |  
369 | void loop(void){
370 |   //Replacement as follows to make AutoConnect recognition.
371 |   //server.handleClient();
372 |   portal.handleClient();
373 | #ifdef ARDUINO_ARCH_ESP8266
374 |   MDNS.update();
375 | #endif
376 |   webSocket.loop();
377 |   if(Serial.available() > 0){
378 |     char c[] = {(char)Serial.read()};
379 |     webSocket.broadcastTXT(c, sizeof(c));
380 |   }
381 | }
382 | 
383 | void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length){
384 |   if(type == WStype_TEXT){
385 |     if(payload[0] == 'S'){ // S0=90
386 |       uint16_t servoNum = (uint16_t) strtol((const char *) &payload[1], NULL, 16);
387 |       uint16_t servoVal = (uint16_t) strtol((const char *) &payload[3], NULL, 10);
388 | 
389 |       Serial.print("S");
390 |       Serial.print(servoNum);
391 |       Serial.print("=");
392 |       Serial.println(servoVal);
393 | 
394 |       uint16_t servoPWM = map(servoVal, 0, 180, SERVOMIN, SERVOMAX); // map(value, fromLow, fromHigh, toLow, toHigh)
395 | 
396 |       Serial.print(servoNum);
397 |       Serial.print(" ");
398 |       Serial.println(servoPWM);
399 |       pwm.setPWM(servoNum, 0, servoPWM);
400 |     }
401 | 
402 |     else{
403 |       for(int i = 0; i < length; i++)
404 |         Serial.print((char) payload[i]);
405 |       Serial.println();
406 |     }
407 |   }
408 |   
409 | }
410 | 
411 | void centerServos(){
412 |   for(int i = 0; i < 16; i++){
413 |     Serial.print(i);
414 |     Serial.print(" ");
415 |     Serial.println(((SERVOMAX-SERVOMIN)/2)+SERVOMIN);
416 |     pwm.setPWM(i, 0, ((SERVOMAX-SERVOMIN)/2)+SERVOMIN);
417 |   }
418 | }
419 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ESP32_CAM_WebSocket_Servo_Tests
 2 | Test/example code for the ESP32-CAM to run servos via a PCA9685 servo driver over I2C
 3 | 
 4 | - Started with the [Autoconnect's FSBrowser example](https://github.com/Hieromon/AutoConnect/tree/master/examples/FSBrowser).
 5 |   - Allows automatic handling of WiFi access point selection.
 6 |   - Allows auto handling of web server set up.
 7 | - Added/modified websockets from [this example](https://github.com/acrobotic/Ai_Tips_ESP8266/tree/master/webserver_websockets).
 8 |   - Gives good basic websocket example code with no extra fluff.
 9 | - Added/modified [servo driver code](https://github.com/adafruit/Adafruit-PWM-Servo-Driver-Library/blob/master/examples/servo/servo.ino).
10 |   - Allows driving 16 servos (expandable to more) with 2 pins (I2C).
11 | - Added/modified HTML joysticks from [here](https://github.com/stemkoski/HTML-Joysticks).
12 |   - Example webpage with 4 touchscreen joysticks without extra fluff.  Each joystick controls 2 servos
13 | - Added/modified [inverse kinematics example](https://www.instructables.com/id/Arduino-Control-Robot-Arm-Via-Web/).
14 |   - Example webpage with SVG arm picture to position arm.  Looks like a good way to control a robot arm via web page.
15 | - Added/modified [Gamepad API example](https://github.com/luser/gamepadtest).
16 |   - Example webpage that uses browser's Gamepad API to get joystick data.  Grab a joystick or game pad and control your robot.
17 | 
18 | # To Do:
19 | - Add camera stream/capture.
20 | - Add camera tracking features.
21 | - Store joystick configuration.
22 | - Add error handling to both ESP32 side and javascript side.
23 | - Add socket closing/opening handling to both ESP32 side and javascript side.
24 | 
25 | # Hardware set up
26 | - ESP32-CAM board
27 | - PCA9685 board
28 | - Serial board for programming
29 | 
30 | # Software set up
31 | - Install Arduino IDE
32 | - Install ESP32 board to board manager
33 | - Install Autoconnect library (and its required dependancies)
34 | - Install Websocket library
35 | - Install Adafruit's PWM Servo Driver library
36 | - Install [SPIFFS file uploader](https://github.com/me-no-dev/arduino-esp32fs-plugin).
37 | - Compile and upload ESP32_CAM_WebSocket_Servo_Tests.ino
38 | - Upload data directory to SPIFFS
39 | - Play
40 | 


--------------------------------------------------------------------------------
/data/edit.htm:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 | <!-- 
   3 | Important:
   4 | If you use the gzipped or `INCLUDE_FALLBACK_INDEX_HTM` options, please remember 
   5 | to rerun the `reduce_index.sh` script located in the `extras` subfolder and recompile 
   6 | the sketch after each change to this file.
   7 | -->
   8 | <html lang="en">
   9 |   <head>
  10 |     <title>File manager</title>
  11 |     <style type="text/css" media="screen">
  12 |       body {
  13 |         font-size: 12px;
  14 |         font-family: Verdana, Arial, Sans-serif;
  15 |       }
  16 |       .contextMenu {
  17 |         z-index: 300;
  18 |         position: absolute;
  19 |         left: 5px;
  20 |         border: 1px solid #444;
  21 |         background-color: #F5F5F5;
  22 |         display: none;
  23 |         box-shadow: 0 0 10px rgba( 0, 0, 0, .4 );
  24 |         font-size: 11px;
  25 |         font-weight: bold;
  26 |       }
  27 |       .contextMenu ul {
  28 |         list-style: none;
  29 |         top: 0;
  30 |         left: 0;
  31 |         margin: 0;
  32 |         padding: 0;
  33 |       }
  34 |       .contextMenu li {
  35 |         position: relative;
  36 |         min-width: 60px;
  37 |         cursor: pointer;
  38 |       }
  39 |       .contextMenu span {
  40 |         color: #444;
  41 |         display: inline-block;
  42 |         padding: 6px;
  43 |       }
  44 |       .contextMenu li:hover { background: #444; }
  45 |       .contextMenu li:hover span { color: #EEE; }
  46 |     
  47 |       .css-treeview ul, .css-treeview li {
  48 |         padding: 0;
  49 |         margin: 0;
  50 |         list-style: none;
  51 |       }
  52 |       .css-treeview input {
  53 |         position: absolute;
  54 |         opacity: 0;
  55 |       }
  56 |       .css-treeview {
  57 |         font-size: 11px;
  58 |         -moz-user-select: none;
  59 |         -webkit-user-select: none;
  60 |         user-select: none;
  61 |       }
  62 |       .css-treeview span {
  63 |         color: #00f;
  64 |         cursor: pointer;
  65 |       }
  66 |       .css-treeview span:hover {
  67 |         text-decoration: underline;
  68 |       }
  69 |       .css-treeview input + label + ul {
  70 |         margin: 0 0 0 22px;
  71 |       }
  72 |       .css-treeview input ~ ul {
  73 |         display: none;
  74 |       }
  75 |       .css-treeview label, .css-treeview label::before {
  76 |         cursor: pointer;
  77 |       }
  78 |       .css-treeview input:disabled + label {
  79 |         cursor: default;
  80 |         opacity: .6;
  81 |       }
  82 |       .css-treeview input:checked:not(:disabled) ~ ul {
  83 |         display: block;
  84 |       }
  85 |       .css-treeview label, .css-treeview span, .css-treeview label::before {
  86 |         background: url(" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAACgCAMAAAAy5xwmAAAAb1BMVEVHcEyWm55WW2E6QUdAQEBiaG1jaG7///8vNj3KzM7CxMbm5ufMzc/Y2dqxtLaGio58gYWJjZFRVFZJTE/Lzc+vsbNdXV74+PhvdHlsbW2kp6q7vLzy8vMuNTzf39+ho6UyOUCFhYWUl5nv7+/p6ekQi/GRAAAAAXRSTlMAQObYZgAAASRJREFUSMftk9tywiAQhoUAhVAwJpqDRqfavv8zluNKkurEjrY3+e74JizLn2W1miAKxphOBMeUYq6uH/A3A66YpRBRqJZaMI8iwsV/CdM6A2xj5nIUsK0/iTUPrGNm0MUDIkeG/J54uOiksb9hXh55PhIIjfKgdJTHSEy2/FD06Xmod8NOwrrwFUsQmXZHZhhekHBiByYIoaIJAjP8USWiCA8KhEW8UGT7KPaZExsObHyrUgTkjTz8liPXwzwEB+OPFVxHE8X2ckRByLaVyhVKxP27KN+nAtH7Rvur2Dr621tekMes+WiG86Hr6jKYj+7Q1Kd0PpxI58NsQdN/25zlQDQdKb9AnM6fHSGkPsQaJamIpQzCrywhD1iT2XksLCws/IZv8Zof7t25YlkAAAAASUVORK5CYII=") no-repeat;
  87 |       }
  88 |       .css-treeview label, .css-treeview span, .css-treeview label::before, .css-treeview span::before {
  89 |         display: inline-block;
  90 |         height: 16px;
  91 |         line-height: 16px;
  92 |         vertical-align: middle;
  93 |       }
  94 |       .css-treeview label {
  95 |         background-position: 18px 0; /* folder icon */
  96 |       }
  97 |       .css-treeview span {
  98 |         background-position: 18px -48px; /* generic file icon */
  99 |       }
 100 |       .css-treeview span.txt {
 101 |         background-position: 18px -64px; /* text file icon */
 102 |       }
 103 |       .css-treeview span.img {
 104 |         background-position: 18px -80px; /* image file icon */
 105 |       }
 106 |       .css-treeview label::before {
 107 |         content: "";
 108 |         width: 16px;
 109 |         margin: 0 22px 0 0;
 110 |         vertical-align: middle;
 111 |         background-position: 0 -32px; /* expand icon */
 112 |       }
 113 |       .css-treeview span::before {
 114 |         content: "";
 115 |         width: 16px;
 116 |         margin: 0 22px 0 0;
 117 |       }
 118 |       .css-treeview input:checked + label::before {
 119 |         background-position: 0 -16px; /* collapse icon */
 120 |       }
 121 |       
 122 |       /* webkit adjacent element selector bugfix */
 123 |       @media screen and (-webkit-min-device-pixel-ratio:0)
 124 |       {
 125 |         .css-treeview{
 126 |           -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
 127 |         }
 128 | 
 129 |         @-webkit-keyframes webkit-adjacent-element-selector-bugfix 
 130 |         {
 131 |           from  { 
 132 |             padding: 0;
 133 |           } 
 134 |           to  { 
 135 |             padding: 0;
 136 |           }
 137 |         }
 138 |       }
 139 |       
 140 |       #header { 
 141 |         position: absolute;
 142 |         top: 0;
 143 |         right: 0;
 144 |         left: 0;
 145 |         height:24px;
 146 |         padding: 1px 1px 0px 10px;
 147 |         background-color: #444;
 148 |         color:#EEE;
 149 |       }
 150 |       #tree { 
 151 |         position: absolute;
 152 |         top: 25px;
 153 |         bottom: 0;
 154 |         left: 0;
 155 |         width: 20%;
 156 |         padding: 8px;
 157 |       }
 158 |       #editor, #preview { 
 159 |         position: absolute;
 160 |         top: 25px;
 161 |         right: 0;
 162 |         bottom: 0;
 163 |         left: 20%;
 164 |       }
 165 |       #preview {
 166 |         background-color: #EEE;
 167 |         padding:5px;
 168 |       }
 169 |       
 170 |       #status {
 171 |         position: absolute;
 172 |         top: 3px;
 173 |         right: 10px;
 174 |         font-size: 15px;
 175 |       }
 176 |       
 177 |       #fsMeter {
 178 |         width:100px;
 179 |         padding-bottom:2px;
 180 |       }
 181 |       
 182 |       #warning {
 183 |         height:100%;
 184 |         background-color:orange;
 185 |         color:black;
 186 |       }
 187 |       .tooltip {
 188 |         position: absolute;
 189 |         z-index: 2; /* must be above editor which is at 1 */
 190 |         right:0px;
 191 |         top:20px;
 192 |         visibility: hidden;
 193 |         background-color: white;
 194 |         color: black;
 195 |         text-align: center;
 196 |         border: 1px solid #000;
 197 |         padding: 3px;
 198 |         font-size: 10px;
 199 |       }
 200 |       #warning:hover .tooltip {
 201 |         visibility: visible;
 202 |       }
 203 | 
 204 |       #loading {
 205 |         position:absolute;
 206 |         // note: changing between block and none cancels the opacity anim, so we move it in and out of screen instead by changing the top value
 207 |         // maybe see https://www.impressivewebs.com/animate-display-block-none/ for another approach
 208 |         display:block; 
 209 |         top: -100vh;
 210 |         left: 0;
 211 |         width: 100vw;
 212 |         height: 100vh;
 213 |         z-index: 100;
 214 |         background-color: rgba(0, 0, 0, 0.5);
 215 |         opacity: 0;
 216 |         transition: opacity 500ms ease-in-out;
 217 |       }
 218 |       #loading.shown {
 219 |         top: 0;
 220 |         opacity: 1;
 221 |       }
 222 |       
 223 |       #loading-msg {
 224 |         display: inline-block;
 225 |         position: absolute;
 226 |         top: 0px;
 227 |         left: 50%;
 228 |         transform: translateX(-50%);
 229 |         color:white;
 230 |         font-size: 32px;
 231 |       }
 232 | 
 233 |       @keyframes spinner-anim {
 234 |         0% {
 235 |           transform: rotate(0deg);
 236 |         }
 237 |         100% {
 238 |           transform: rotate(360deg);
 239 |         }
 240 |       }
 241 |       /* :not(:required) hides this rule from IE9 and below */
 242 |       .spinner-anim:not(:required) {
 243 |         display: inline-block;
 244 |         position: relative;
 245 |         top: 50%;
 246 |         left: 50%;
 247 |         transform: translate(-50%, -50%);
 248 |         animation: spinner-anim 1s infinite linear;
 249 |         border: 16px solid #eee;
 250 |         border-right-color: transparent;
 251 |         border-radius: 32px;
 252 |         box-sizing: border-box;
 253 |         overflow: hidden;
 254 |         text-indent: -9999px;
 255 |         width: 64px;
 256 |         height: 64px;
 257 |       }
 258 |     </style>
 259 |     <script>
 260 |       var tree;   // needed by editor to refresh file size on save
 261 |       var fsInfo; // needed to change refreshPath behaviour on SPIFFS
 262 |       /////////////////////////
 263 |       // UTILS
 264 | 
 265 |       function setLoading(show, message) {
 266 |         if (message) console.log(message);        
 267 |         document.getElementById("loading-msg").innerHTML = message?message:"";
 268 |         if (show) document.getElementById("loading").classList.add("shown");
 269 |         else      document.getElementById("loading").classList.remove("shown");
 270 |         document.body.style.cursor = show?"wait":"default";
 271 |       }
 272 | 
 273 |       function readableSize(bytes) {
 274 |         if (bytes < 1024) return bytes + " B";          
 275 |         var units = [' KiB', ' MiB', ' GiB', ' TiB', 'PiB'];
 276 |         var i = -1;
 277 |         do {
 278 |           bytes = bytes / 1024;
 279 |           i++;
 280 |         } while (bytes > 1024);
 281 |         return bytes.toFixed(2) + units[i];
 282 |       }
 283 | 
 284 |       function refreshStatus(){
 285 |         document.getElementById("status").innerHTML = "(refreshing...)";
 286 |         var xmlHttp = new XMLHttpRequest();
 287 |         xmlHttp.onload = function() {
 288 |           if (xmlHttp.status != 200) showHttpError(xmlHttp);
 289 |           else {            
 290 |             fsInfo = JSON.parse(xmlHttp.responseText);
 291 |             var status = fsInfo.type + " - ";
 292 |             if (fsInfo.isOk) {
 293 |               var percent = (1+Math.round(99*fsInfo.usedBytes/fsInfo.totalBytes)); // fake to see the "used" bar in any case
 294 |               var text = readableSize(fsInfo.totalBytes - fsInfo.usedBytes) + " free of " + readableSize(fsInfo.totalBytes);
 295 |               status += "<meter id='fsMeter' min='0' optimum='0'low='90' high='95' max='100' value='" + percent + "' title='" + text + "'>" + text + "</meter>"
 296 |               if (fsInfo.unsupportedFiles) {
 297 |                 status += " <span id='warning'>WARNING<span class='tooltip'>"
 298 |                   + "Filesystem&nbsp;contains&nbsp;unsupported&nbsp;filenames:<br/>"
 299 |                   + fsInfo.unsupportedFiles
 300 |                   + "</span></span>";
 301 |               }
 302 |             } 
 303 |             else {
 304 |               status += "<span style='background-color:red;color:white;font-weight:bold'>INIT ERROR !</span>";
 305 |             }
 306 |             document.getElementById("status").innerHTML = status;
 307 |             if (fsInfo.type != "SPIFFS") {
 308 |               document.getElementById("mkdir").style.display = "inline";
 309 |             }
 310 |           }
 311 |         };
 312 |         xmlHttp.open("GET", "/status", true);
 313 |         xmlHttp.send(null);
 314 |       }
 315 |       
 316 |       function showHttpError(request) {
 317 |         alert("ERROR: [" + request.status+"] " + request.responseText);
 318 |       }
 319 |            
 320 |       function canLoadNewContents() {
 321 |         // The fact the save button is enabled indicates the editor has unsaved changes
 322 |         if (document.getElementById("saveBtn").disabled) return true;
 323 |         if (confirm("Changes to your document will be lost if you continue")) {
 324 |           enableSaveDiscardBtns(false);
 325 |           return true;
 326 |         }
 327 |         return false;
 328 |       }
 329 | 
 330 |       function enableSaveDiscardBtns(enabled) {
 331 |         document.getElementById("saveBtn").disabled = !enabled;
 332 |         document.getElementById("discardBtn").disabled = !enabled;
 333 |       }
 334 | 
 335 | 
 336 |       /*
 337 |        * Returns the parent folder of a given path
 338 |        * ""      > ""
 339 |        * "/"     > ""
 340 |        * "a"     > ""
 341 |        * "/a"    > ""
 342 |        * "a/"    > ""
 343 |        * "/a/"   > ""
 344 |        * "a/b"   > "/a"
 345 |        * "/a/b"  > "/a"
 346 |        * "a/b/"  > "/a" 
 347 |        * "/a/b/" > "/a" 
 348 |        */
 349 |       function getParentFolder(path) {
 350 |         if (!path.startsWith("/")) path = "/" + path;
 351 |         if (path.endsWith("/")) path = path.slice(0, -1);
 352 |         return path.substring(0, path.lastIndexOf("/"));        
 353 |       }
 354 | 
 355 | 
 356 |       /////////////////////////
 357 |       // HEADER with uploader, buttons ans status
 358 | 
 359 |       function createHeader(element, tree, editor){       
 360 |         var header = document.getElementById(element);
 361 |         var xmlHttp;
 362 |         var fileSelector = document.createElement("input");
 363 |         fileSelector.type = "file";
 364 |         fileSelector.multiple = false;
 365 |         fileSelector.name = "data";
 366 |         header.appendChild(fileSelector);
 367 |         
 368 |         var pathInput = document.createElement("input");
 369 |         pathInput.id = "pathInput";
 370 |         pathInput.type = "text";
 371 |         pathInput.name = "path";
 372 |         pathInput.defaultValue = "/";
 373 |         header.appendChild(pathInput);
 374 | 
 375 |         var upload = document.createElement("button");
 376 |         upload.innerHTML = "Upload";
 377 |         header.appendChild(upload);
 378 | 
 379 |         var mkdir = document.createElement("button");
 380 |         mkdir.id = "mkdir";
 381 |         mkdir.style.display = "none";
 382 |         mkdir.innerHTML = "MkDir";
 383 |         header.appendChild(mkdir);
 384 | 
 385 |         var mkfile = document.createElement("button");
 386 |         mkfile.innerHTML = "MkFile";
 387 |         header.appendChild(mkfile);
 388 | 
 389 |         var editorButtons = document.createElement("span");
 390 |         editorButtons.id = "editorButtons";
 391 |         editorButtons.style.display = "none";
 392 |         header.appendChild(editorButtons);
 393 | 
 394 |         var save = document.createElement("button");
 395 |         save.id = "saveBtn";
 396 |         save.innerHTML = "Save";
 397 |         save.style.marginLeft = "30px";
 398 |         save.disabled = true;
 399 |         editorButtons.appendChild(save);
 400 |   
 401 |         var discard = document.createElement("button");
 402 |         discard.id = "discardBtn";
 403 |         discard.innerHTML = "Discard";
 404 |         discard.disabled = true;
 405 |         editorButtons.appendChild(discard);
 406 |   
 407 |         var help = document.createElement("button");
 408 |         help.id = "helpBtn";
 409 |         help.innerHTML = "?";
 410 |         editorButtons.appendChild(help);
 411 |   
 412 |         var status = document.createElement("span");
 413 |         status.id = "status";
 414 |         status.innerHTML = "(loading)";
 415 |         header.appendChild(status);
 416 |   
 417 |         fileSelector.onchange = function(e){ // A file has been selected
 418 |           if (fileSelector.files.length === 0) return;          
 419 |           var filename = fileSelector.files[0].name;
 420 |           if (mustFormat83()) {
 421 |             filename = to83(filename);
 422 |           }
 423 |           if (!pathInput.value.startsWith("/")) pathInput.value = "/" + pathInput.value;
 424 |           pathInput.value = getParentFolder(pathInput.value) + "/" + filename;
 425 |         }
 426 | 
 427 |         upload.onclick = function(e) {
 428 |           if (fileSelector.files.length === 0) return;   
 429 |           tree.httpUpload(fileSelector.files[0], pathInput.value);
 430 |         }
 431 | 
 432 |         function mustFormat83() {
 433 |           return false; // TODO: if needed, test fsInfo.type (and fatType ?)
 434 |         }
 435 | 
 436 |         function to83(filename) {
 437 |           var ext = /(?:\.([^.]+))?$/.exec(filename)[1];
 438 |           var name = /(.*)\.[^.]+$/.exec(filename)[1];
 439 |           if (name !== undefined){
 440 |             if (name.length > 8) name = name.substring(0, 8);
 441 |             filename = name;
 442 |           }
 443 |           if (ext !== undefined){
 444 |             if (ext === "html") ext = "htm";
 445 |             else if (ext === "jpeg") ext = "jpg";
 446 |             filename = filename + "." + ext;
 447 |           }
 448 |           return filename;
 449 |         }
 450 | 
 451 |         mkfile.onclick = function(e){
 452 |           var path = pathInput.value.trim();
 453 |           if (path === "") alert("A filename must be given");
 454 |           else if (path.endsWith("/")) alert("Filenames must not end with a '/' character");
 455 |           else tree.httpCreate(path);
 456 |         };
 457 |         
 458 |         mkdir.onclick = function(e){
 459 |           var path = pathInput.value.trim();
 460 |           if (path === "") alert("A folder name must be given");
 461 |           else {
 462 |             if (!path.endsWith("/")) path = path + "/";
 463 |             tree.httpCreate(path);
 464 |           }
 465 |         };
 466 |         
 467 |         save.onclick = function(e){
 468 |           editor.save();
 469 |         }
 470 |         
 471 |         discard.onclick = function(e){
 472 |           editor.discard();
 473 |         }
 474 |         
 475 |         help.onclick = function(e){
 476 |           editor.showShortcuts();
 477 |         }
 478 |         
 479 |       }
 480 |       
 481 |       
 482 |       /////////////////////////
 483 |       // FILE TREE
 484 | 
 485 |       function createTree(element, editor){
 486 |         var preview = document.getElementById("preview");
 487 |         var treeRoot = document.createElement("div");
 488 |         treeRoot.className = "css-treeview";
 489 |         treeRoot.id = "/";
 490 |         document.getElementById(element).appendChild(treeRoot);
 491 |   
 492 |         function loadDownload(path){
 493 |           document.getElementById("download-frame").src = path+"?download=true";
 494 |         }
 495 |         
 496 |         function loadImgPreview(path){
 497 |           document.getElementById("pathInput").value = path;
 498 |           document.getElementById("editor").style.display = "none";
 499 |           document.getElementById("editorButtons").style.display = "none";
 500 |           preview.style.display = "block";
 501 |           preview.innerHTML = "<img src='"+path+"' style='max-width:100%; max-height:100%; margin:auto; display:block;' />";
 502 |         }
 503 |         
 504 |         // Fall back code used when ace.js is not available (neither online or local)
 505 |         function loadTxtPreview(path){
 506 |           document.getElementById("pathInput").value = path;
 507 |           document.getElementById("editor").style.display = "none";
 508 |           document.getElementById("editorButtons").style.display = "none";
 509 |           preview.style.display = "block";
 510 |           preview.innerHTML = "<span style='color:red;'>Ace editor could not be loaded from the internet nor from /edit/ace.js . Defaulting to text viewer...</span><pre id='txtContents' style='overflow: auto;'></pre>";
 511 |           var xhr = new XMLHttpRequest();
 512 |           xhr.onload = function () {
 513 |             document.getElementById('txtContents').textContent = this.responseText;
 514 |           };
 515 |           xhr.open('GET', path);
 516 |           xhr.send();
 517 |         }
 518 |         
 519 |         this.clearMainPanel = function() {
 520 |           document.getElementById("editor").style.display = "none";
 521 |           document.getElementById("editorButtons").style.display = "none";
 522 |           preview.style.display = "block";
 523 |           preview.innerHTML = "<div style='text-align:center'>(file not found or format not supported)</div>";
 524 |         }
 525 |     
 526 |         function isTextFile(path){
 527 |           var ext = /(?:\.([^.]+))?$/.exec(path)[1];
 528 |           if (ext !== undefined){
 529 |             switch(ext.toLowerCase()){
 530 |               case "txt":
 531 |               case "htm":
 532 |               case "html":
 533 |               case "js":
 534 |               case "json":
 535 |               case "c":
 536 |               case "h":
 537 |               case "cpp":
 538 |               case "css":
 539 |               case "xml":
 540 |                 return true;
 541 |             }
 542 |           }
 543 |           return false;
 544 |         }
 545 |   
 546 |         function isImageFile(path){
 547 |           var ext = /(?:\.([^.]+))?$/.exec(path)[1];
 548 |           if (ext !== undefined){
 549 |             switch(ext.toLowerCase()){
 550 |               case "png":
 551 |               case "jpg":
 552 |               case "jpeg":
 553 |               case "gif":
 554 |               case "ico":
 555 |                 return true;
 556 |             }
 557 |           }
 558 |           return false;
 559 |         }
 560 |         
 561 |         function fillFolderMenu(el, path){
 562 |           var list = document.createElement("ul");
 563 |           el.appendChild(list);
 564 |           var action = document.createElement("li");
 565 |           list.appendChild(action);          
 566 |           var isChecked = document.getElementById(path).childNodes[0].checked;
 567 |           var expnd = document.createElement("li");
 568 |           list.appendChild(expnd);
 569 |           if (isChecked){
 570 |             expnd.innerHTML = "<span>Collapse</span>";
 571 |             expnd.onclick = function(e){
 572 |               if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
 573 |               document.getElementById(path).childNodes[0].checked = false;
 574 |             };
 575 |             var refrsh = document.createElement("li");
 576 |             list.appendChild(refrsh);
 577 |             refrsh.innerHTML = "<span>Refresh</span>";
 578 |             refrsh.onclick = function(e){
 579 |               if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
 580 |               httpList(path);
 581 |             };
 582 |           } 
 583 |           else {
 584 |             expnd.innerHTML = "<span>Expand</span>";
 585 |             expnd.onclick = function(e){
 586 |               if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
 587 |               document.getElementById(path).childNodes[0].checked = true;
 588 |               httpList(path);
 589 |             };
 590 |           }
 591 |           var renFolder = document.createElement("li");
 592 |           list.appendChild(renFolder);
 593 |           renFolder.innerHTML = "<span>Rename/Move</span>";
 594 |           renFolder.onclick = function(e){
 595 |             if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
 596 |             var newPath = prompt("Rename " + path + " to", path);
 597 |             if (newPath != null && newPath != path) {
 598 |               httpRename(path, newPath);
 599 |             }
 600 |           };
 601 |           var delFolder = document.createElement("li");
 602 |           list.appendChild(delFolder);
 603 |           delFolder.innerHTML = "<span>Delete</span>";
 604 |           delFolder.onclick = function(e){
 605 |             if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
 606 |             httpDelete(path);
 607 |           };
 608 |         }
 609 |   
 610 |         function fillFileMenu(el, path){
 611 |           var list = document.createElement("ul");
 612 |           el.appendChild(list);
 613 |           var action = document.createElement("li");
 614 |           list.appendChild(action);
 615 |           if (isTextFile(path)){
 616 |             if (typeof ace == "undefined") {
 617 |               // Could not load editor
 618 |               action.innerHTML = "<span>View</span>";
 619 |               action.onclick = function(e){
 620 |                 if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
 621 |                 if (canLoadNewContents()) loadTxtPreview(path);
 622 |               };
 623 |             }
 624 |             else {
 625 |               action.innerHTML = "<span>Edit</span>";
 626 |               action.onclick = function(e){
 627 |                 if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
 628 |                 if (canLoadNewContents()) editor.loadUrl(path);
 629 |               };
 630 |             }
 631 |           } 
 632 |           else if (isImageFile(path)){
 633 |             action.innerHTML = "<span>Preview</span>";
 634 |             action.onclick = function(e){
 635 |               if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
 636 |               if (canLoadNewContents()) loadImgPreview(path);
 637 |             };
 638 |           }
 639 |           var download = document.createElement("li");
 640 |           list.appendChild(download);
 641 |           download.innerHTML = "<span>Download</span>";
 642 |           download.onclick = function(e){
 643 |             if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
 644 |             loadDownload(path);
 645 |           };
 646 |           var renFile = document.createElement("li");
 647 |           list.appendChild(renFile);
 648 |           renFile.innerHTML = "<span>Rename/Move</span>";
 649 |           renFile.onclick = function(e){
 650 |             if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
 651 |             var newPath = prompt("Rename " + path + " to", path);
 652 |             if (newPath != null && newPath != path) {
 653 |               httpRename(path, newPath);
 654 |             }
 655 |           };
 656 |           var delFile = document.createElement("li");
 657 |           list.appendChild(delFile);
 658 |           delFile.innerHTML = "<span>Delete</span>";
 659 |           delFile.onclick = function(e){
 660 |             if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(el);
 661 |             httpDelete(path);
 662 |           };
 663 |         }
 664 |   
 665 |         function showContextMenu(e, path, isfile){
 666 |           var divContext = document.createElement("div");
 667 |           var scrollTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
 668 |           var scrollLeft = document.body.scrollLeft ? document.body.scrollLeft : document.documentElement.scrollLeft;
 669 |           var left = e.clientX + scrollLeft;
 670 |           var top = e.clientY + scrollTop;
 671 |           divContext.className = 'contextMenu';
 672 |           divContext.style.display = 'block';
 673 |           divContext.style.left = left + 'px';
 674 |           divContext.style.top = top + 'px';
 675 |           if (isfile) fillFileMenu(divContext, path);
 676 |           else fillFolderMenu(divContext, path);
 677 |           document.body.appendChild(divContext);
 678 |           var width = divContext.offsetWidth;
 679 |           var height = divContext.offsetHeight;
 680 |           divContext.onmouseout = function(e){
 681 |             if (e.clientX < left || e.clientX > (left + width) || e.clientY < top || e.clientY > (top + height)){
 682 |               if (document.body.getElementsByClassName('contextMenu').length > 0) document.body.removeChild(divContext);
 683 |             }
 684 |           };
 685 |         }
 686 |         
 687 |         function createTreeLeaf(parentPath, name, size){
 688 |           var leaf = document.createElement("li");
 689 |           leaf.id = ((parentPath == "/")?"":parentPath)+"/"+name;
 690 |           var span = document.createElement("span");
 691 |           if (isTextFile(name)) span.classList.add("txt");
 692 |           else if (isImageFile(name)) span.classList.add("img");
 693 |           span.innerHTML = name + " <i>(" + readableSize(size) + ")</i>";
 694 |           leaf.appendChild(span);
 695 |           leaf.onclick = function(e){
 696 |             attemptLoad(leaf.id);
 697 |           };
 698 |           leaf.oncontextmenu = function(e){
 699 |             e.preventDefault();
 700 |             e.stopPropagation();
 701 |             showContextMenu(e, leaf.id, true);
 702 |           };
 703 |           return leaf;
 704 |         }
 705 |   
 706 |         function createTreeBranch(parentPath, name, disabled){
 707 |           var leaf = document.createElement("li");
 708 |           leaf.id = ((parentPath == "/")?"":parentPath)+"/"+name;          
 709 |           var check = document.createElement("input");
 710 |           check.type = "checkbox";
 711 |           if (typeof disabled !== "undefined" && disabled) check.disabled = "disabled";
 712 |           leaf.appendChild(check);
 713 |           var label = document.createElement("label");
 714 |           label.textContent = name;
 715 |           leaf.appendChild(label);
 716 |           check.onchange = function(e){
 717 |             if (check.checked){
 718 |               httpList(leaf.id);
 719 |             }
 720 |           };
 721 |           label.onclick = function(e){
 722 |             if (!check.checked){
 723 |               check.checked = true;
 724 |               httpList(leaf.id);
 725 |             } 
 726 |             else {
 727 |               check.checked = false;
 728 |             }
 729 |           };
 730 |           leaf.oncontextmenu = function(e){
 731 |             e.preventDefault();
 732 |             e.stopPropagation();
 733 |             showContextMenu(e, leaf.id, false);
 734 |           }
 735 |           return leaf;
 736 |         }
 737 |   
 738 |         function addFileNodes(parentPath, items){
 739 |           items.sort(function(a, b) {
 740 |             if (a.type == b.type) {
 741 |               return a.name.localeCompare(b.name); // a before z
 742 |             }
 743 |             else {
 744 |               return a.type.localeCompare(b.type); // dir before file
 745 |             }           
 746 |           });
 747 |           var list = document.createElement("ul");
 748 | 
 749 |           document.getElementById(parentPath).appendChild(list);
 750 |           var ll = items.length;
 751 |           for(var i = 0; i < ll; i++){
 752 |             var item = items[i];
 753 |             var itemEl;
 754 |             if (item.type === "file") itemEl = createTreeLeaf(parentPath, item.name, item.size);
 755 |             else itemEl = createTreeBranch(parentPath, item.name);
 756 |             list.appendChild(itemEl);
 757 |           }   
 758 |         }
 759 |   
 760 |         this.attemptLoad = function(path) {
 761 |           console.log("Attempting load of '" + path  + "'...");
 762 |           document.getElementById("pathInput").value = path;
 763 |           if (canLoadNewContents()) {
 764 |             if (isTextFile(path)) {
 765 |               if (typeof ace == "undefined") {
 766 |                 loadTxtPreview(path);
 767 |               }
 768 |               else {
 769 |                 editor.loadUrl(path);              
 770 |               }
 771 |             }
 772 |             else if (isImageFile(path)) loadImgPreview(path);
 773 |             else clearMainPanel();
 774 |           }
 775 |         }
 776 |         
 777 |         /*
 778 |          * Refresh the given path, e.g. "/a/b/c/d"
 779 |          * It means we have to make sure d is already displayed
 780 |          * If not, we get to its parent first (c), if open, and so on (b, a).
 781 |          * Once we have found an ancestor, we refresh it, then we must come back to where we started, refreshing nodes on our way down.
 782 |          * This is done by pushing all paths to be refreshed in an array that will be pop'd in the callback function
 783 |          */
 784 |         this.refreshPath = function(path){
 785 |           if (fsInfo.type == "SPIFFS") {
 786 |             // on SPIFFS : No parent node => refresh full tree
 787 |             console.log("Refreshing '/'...");
 788 |             httpList("/");
 789 |           }
 790 |           else {
 791 |             console.log("Refreshing '" + path + "'...");
 792 |             if (path.lastIndexOf("/") == -1){
 793 |               // No "/" => reset the root
 794 |               httpList("/");
 795 |             } 
 796 |             else {
 797 |               var paths = [];            
 798 |               // Climb the tree until we get to an open node, adding paths to the array
 799 |               var parentPath = path;
 800 |               while ((parentPath.lastIndexOf("/") != -1) && !document.getElementById(parentPath)) {
 801 |                 paths.push(parentPath);
 802 |                 parentPath = getParentFolder(parentPath);
 803 |               }
 804 |               
 805 |               // If we've reached the top
 806 |               if (parentPath == "") paths.push("/"); // list the root
 807 |               else paths.push(parentPath); // otherwise list the last folder
 808 |               
 809 |               // And list it back down by iterating on collected paths
 810 |               listPaths(paths);  
 811 |             }
 812 |           }
 813 |         }
 814 | 
 815 |         
 816 |         //////////////////////////////
 817 |         // HTTP OPERATIONS
 818 |         
 819 |         // Callbacks
 820 |         
 821 |         function onListReceived(req, parentPath, remainingPaths) {
 822 |           return function(){
 823 |             setLoading(false);
 824 |             if (req.status != 200) showHttpError(req);
 825 |             else {
 826 |                // Remove previous child list, if any
 827 |               var parentEl = document.getElementById(parentPath);
 828 |               if (parentEl) {
 829 |                 var lastChild = parentEl.lastElementChild;
 830 |                 if (lastChild && lastChild.tagName == "UL") parentEl.removeChild(lastChild);
 831 |               }
 832 |               // And reinsert the received ones instead
 833 |               addFileNodes(parentPath, JSON.parse(req.responseText));
 834 |               if (document.getElementById(parentPath).childNodes[0].checked !== undefined) {
 835 |                 document.getElementById(parentPath).childNodes[0].checked = true;              
 836 |               }
 837 |               // If there are more folders to refresh, go ahead
 838 |               if (remainingPaths && remainingPaths.length) {
 839 |                 listPaths(remainingPaths);
 840 |               }
 841 |             }
 842 |           }
 843 |         }
 844 |   
 845 |         /*
 846 |          * Callback after a FS operation was performed. 
 847 |          * The "req" param is the http request
 848 |          * The "path" param is the "affected" (created, moved, renamed, delteted) path, of which the parent must be refreshed
 849 |          * In case of move/delete, the "target" path is returned in the response, so that it can be refreshed too
 850 |          * Operation      | path (file to be loaded) | req.responseText (between brackets if same as parent of path)
 851 |          * ---------------+--------------------------+--------------------------------------------------------------
 852 |          * Create file    | created file             | (parent of created file)
 853 |          * Create folder  | created folder           | (parent of created folder)
 854 |          * Rename file    | target file              | (parent of source file)
 855 |          * Move file      | target file              | parent of source file, or remaining ancestor
 856 |          ? Rename folder  | target folder            | (parent of source folder)
 857 |          ? Move folder    | target folder            | parent of source folder, or remaining ancestor
 858 |          * Delete file    |                          | parent of deleted file, or remaining ancestor
 859 |          * Delete folder  |                          | parent of deleted folder, or remaining ancestor
 860 |          */
 861 |         function onOperationComplete(req, path){
 862 |           return function(){
 863 |             setLoading(false);
 864 |             if (req.status != 200) showHttpError(req);
 865 |             else {
 866 |               if (path) {                
 867 |                 var parentPath = getParentFolder(path);
 868 | 
 869 |                 // Refresh returned path, if requested and different from path
 870 |                 if (req.responseText && req.responseText != parentPath) {
 871 |                   refreshPath(req.responseText);
 872 |                 }
 873 | 
 874 |                 // Refresh original path
 875 |                 refreshPath(parentPath);
 876 |                               
 877 |                 // Try to load given path
 878 |                 attemptLoad(path);
 879 |               }
 880 |               else {
 881 |                 // Delete, only refresh returned path
 882 |                 refreshPath(req.responseText);
 883 |               }              
 884 |             }
 885 |             refreshStatus();
 886 |           }
 887 |         }
 888 | 
 889 | 
 890 |         // Requests        
 891 |         
 892 |         function httpList(parentPath, remainingPaths){
 893 |           setLoading(true, "Listing '" + parentPath + "'...");         
 894 |           // Fetch an updated list
 895 |           xmlHttp = new XMLHttpRequest();
 896 |           xmlHttp.onload = onListReceived(xmlHttp, parentPath, remainingPaths);
 897 |           xmlHttp.open("GET", "/list?dir="+parentPath, true);
 898 |           xmlHttp.send(null);
 899 |         }
 900 |         
 901 |         function listPaths(paths) {
 902 |           var path = paths.pop();     
 903 |           if (path) {
 904 |             httpList(path, paths);
 905 |           }
 906 |         }  
 907 | 
 908 |     
 909 |         this.httpUpload = function(file, path) {
 910 |           setLoading(true, "Uploading '" + path + "'...");
 911 |           if (!path.startsWith("/")) path = "/" + path;
 912 |           xmlHttp = new XMLHttpRequest();
 913 |           xmlHttp.onload = onOperationComplete(xmlHttp, path);
 914 |           var formData = new FormData();
 915 |           formData.append("data", file, path);
 916 |           xmlHttp.open("POST", "/edit");
 917 |           xmlHttp.send(formData);
 918 |         };     
 919 | 
 920 |         this.httpCreate = function(path){
 921 |           setLoading(true, "Creating '" + path + "'...");
 922 |           if (!path.startsWith("/")) path = "/" + path;
 923 |           xmlHttp = new XMLHttpRequest();
 924 |           xmlHttp.onload = onOperationComplete(xmlHttp, path);
 925 |           var formData = new FormData();
 926 |           formData.append("path", path);
 927 |           xmlHttp.open("PUT", "/edit");
 928 |           xmlHttp.send(formData);
 929 |         }
 930 |         
 931 |         function httpRename(srcPath, dstPath){
 932 |           setLoading(true, "Renaming '" + srcPath + "' to '" + dstPath + "'...");
 933 |           if (!dstPath.startsWith("/")) dstPath = "/" + dstPath;
 934 |           xmlHttp = new XMLHttpRequest();
 935 |           xmlHttp.onload = onOperationComplete(xmlHttp, dstPath);
 936 |           var formData = new FormData();
 937 |           formData.append("path", dstPath);
 938 |           formData.append("src", srcPath);
 939 |           xmlHttp.open("PUT", "/edit");
 940 |           xmlHttp.send(formData);
 941 |         }
 942 | 
 943 |         function httpDelete(path) {
 944 |           setLoading(true, "Deleting '" + path + "'...");
 945 |           xmlHttp = new XMLHttpRequest();
 946 |           xmlHttp.onload = onOperationComplete(xmlHttp);
 947 |           var formData = new FormData();
 948 |           formData.append("path", path);
 949 |           xmlHttp.open("DELETE", "/edit");
 950 |           xmlHttp.send(formData);
 951 |         }
 952 | 
 953 |   
 954 |         httpList("/");
 955 |         return this;
 956 |       }
 957 | 
 958 |       /////////////////////////
 959 |       // ACE EDITOR MANAGEMENT
 960 | 
 961 |       function createEditor(element, file, lang, theme, type){
 962 |         function getLangFromFilename(filename){
 963 |           var lang = "plain";
 964 |           var ext = /(?:\.([^.]+))?$/.exec(filename)[1];
 965 |           if (ext !== undefined){
 966 |             switch(ext){
 967 |               case "txt": lang = "plain"; break;
 968 |               case "htm": lang = "html"; break;
 969 |               case "js": lang = "javascript"; break;
 970 |               case "c": lang = "c_cpp"; break;
 971 |               case "cpp": lang = "c_cpp"; break;
 972 |               case "css":
 973 |               case "scss":
 974 |               case "php":
 975 |               case "html":
 976 |               case "json":
 977 |               case "xml":
 978 |                 lang = ext;
 979 |             }
 980 |           }
 981 |           return lang;
 982 |         }
 983 |   
 984 |         if (typeof file === "undefined") file = "/index.htm";
 985 |   
 986 |         if (typeof lang === "undefined"){
 987 |           lang = getLangFromFilename(file);
 988 |         }
 989 |   
 990 |         if (typeof theme === "undefined") theme = "textmate";
 991 |   
 992 |         if (typeof type === "undefined"){
 993 |           type = "text/"+lang;
 994 |           if (lang === "c_cpp") type = "text/plain";
 995 |         }
 996 |   
 997 |         var xmlHttp = null;
 998 |         var editor = ace.edit(element);
 999 |         
1000 |         function filePosted(){
1001 |           setLoading(false);
1002 |           if (xmlHttp.status != 200) showHttpError(xmlHttp);
1003 |           tree.refreshPath(getParentFolder(file)); // to update size in tree
1004 |           refreshStatus();
1005 |         }
1006 |         function postFile(path, data, type){
1007 |           setLoading(true, "Saving '" + path + "'...");
1008 |           xmlHttp = new XMLHttpRequest();
1009 |           xmlHttp.onload = filePosted;
1010 |           var formData = new FormData();
1011 |           formData.append("data", new Blob([data], { type: type }), path);
1012 |           xmlHttp.open("POST", "/edit");
1013 |           xmlHttp.send(formData);
1014 |         }
1015 | 
1016 |         function fileLoaded(){
1017 |           setLoading(false);
1018 |           document.getElementById("preview").style.display = "none";
1019 |           document.getElementById("editor").style.display = "block";
1020 |           document.getElementById("editorButtons").style.display = "inline";
1021 |           if (xmlHttp.status == 200) {
1022 |             editor.setValue(xmlHttp.responseText);
1023 |             editor.clearSelection();
1024 |             enableSaveDiscardBtns(false);
1025 |           }
1026 |           else tree.clearMainPanel();
1027 |         }
1028 |         function loadFile(path){
1029 |           setLoading(true, "Loading '" + path + "'...");
1030 |           xmlHttp = new XMLHttpRequest();
1031 |           xmlHttp.onload = fileLoaded;
1032 |           xmlHttp.open("GET", path, true);
1033 |           xmlHttp.send(null);
1034 |         }
1035 |   
1036 |         if (lang !== "plain") editor.getSession().setMode("ace/mode/"+lang);
1037 |         editor.setTheme("ace/theme/"+theme);
1038 |         editor.$blockScrolling = Infinity;
1039 |         editor.getSession().setUseSoftTabs(true);
1040 |         editor.getSession().setTabSize(2);
1041 |         editor.setHighlightActiveLine(true);
1042 |         editor.setShowPrintMargin(false);
1043 |         editor.commands.addCommand({
1044 |             name: 'save',
1045 |             bindKey: {win: 'Ctrl-S',  mac: 'Command-S'},
1046 |             exec: function(editor) {
1047 |               editor.save();
1048 |             },
1049 |             readOnly: false
1050 |         });
1051 |         editor.commands.addCommand({
1052 |             name: "showKeyboardShortcuts",
1053 |             bindKey: {win: "Ctrl-Alt-h", mac: "Command-Alt-h"},
1054 |             exec: function(editor) {
1055 |                 editor.showShortcuts();
1056 |             }
1057 |         })
1058 | 
1059 |         editor.session.on('change', function(delta) {
1060 |           enableSaveDiscardBtns(true);
1061 |         });        
1062 | 
1063 |         editor.loadUrl = function(path){
1064 |           document.getElementById("pathInput").value = path;
1065 |           enableSaveDiscardBtns(false);
1066 |           file = path;
1067 |           lang = getLangFromFilename(file);
1068 |           type = "text/"+lang;
1069 |           if (lang !== "plain") editor.getSession().setMode("ace/mode/"+lang);
1070 |           loadFile(file);
1071 |         }
1072 |         
1073 |         editor.save = function() {
1074 |           enableSaveDiscardBtns(false);
1075 |           postFile(file, editor.getValue()+"", type);
1076 |         }
1077 |         
1078 |         editor.discard = function() {
1079 |           editor.loadUrl(file);
1080 |           enableSaveDiscardBtns(false);
1081 |         }
1082 |         
1083 |         editor.showShortcuts = function() {
1084 |           ace.config.loadModule("ace/ext/keybinding_menu", function(module) {
1085 |             module.init(editor);
1086 |             editor.showKeyboardShortcuts()
1087 |           });
1088 |         }
1089 | 
1090 |         loadFile(file);        
1091 |         
1092 |         return editor;
1093 |       }
1094 |       
1095 |       /////////////////////////
1096 |       // MAIN ENTRY POINT
1097 |       
1098 |       function onBodyLoad(){
1099 |         var vars = {};
1100 |         var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; });        
1101 |         if (typeof ace != "undefined") {
1102 |           var editor = createEditor("editor", vars.file, vars.lang, vars.theme);
1103 |         }
1104 |         tree = createTree("tree", editor);
1105 |         createHeader("header", tree, editor);
1106 |         refreshStatus();
1107 |       };
1108 |     </script>
1109 |   </head>
1110 |   <body onload="onBodyLoad();">
1111 |     <div id="header"></div>
1112 |     <div id="tree"></div>
1113 |     <div id="editor"></div>
1114 |     <div id="preview" style="display:none;"></div>
1115 |     <div id="loading"><span id="loading-msg"></span><br/><div class="spinner-anim">Loading...</div></div>
1116 |     <iframe id=download-frame style='display:none;'></iframe>
1117 |   </body>
1118 | </html>
1119 | 


--------------------------------------------------------------------------------
/data/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RobotHacker/ESP32_CAM_WebSocket_Servo_Tests/b2c4d1bc2be9bbeda37f6e10609d539364e38a0c/data/favicon.ico


--------------------------------------------------------------------------------
/data/graphs.js.gz:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RobotHacker/ESP32_CAM_WebSocket_Servo_Tests/b2c4d1bc2be9bbeda37f6e10609d539364e38a0c/data/graphs.js.gz


--------------------------------------------------------------------------------
/data/index.htm:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 |   FSWebServer - Example Index Page
  3 |   Copyright (c) 2015 Hristo Gochkov. All rights reserved.
  4 |   This file is part of the ESP8266WebServer library for Arduino environment.
  5 |  
  6 |   This library is free software; you can redistribute it and/or
  7 |   modify it under the terms of the GNU Lesser General Public
  8 |   License as published by the Free Software Foundation; either
  9 |   version 2.1 of the License, or (at your option) any later version.
 10 |   This library is distributed in the hope that it will be useful,
 11 |   but WITHOUT ANY WARRANTY; without even the implied warranty of
 12 |   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 13 |   Lesser General Public License for more details.
 14 |   You should have received a copy of the GNU Lesser General Public
 15 |   License along with this library; if not, write to the Free Software
 16 |   Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 17 | -->
 18 | <!DOCTYPE html>
 19 | <html>
 20 | <head>
 21 |   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 22 |   <meta name="viewport" content="width=device-width,initial-scale=1">
 23 |   <title>ESP Monitor</title>
 24 |   <script type="text/javascript" src="graphs.js"></script>
 25 |   <script type="text/javascript">
 26 |     var heap,temp,digi;
 27 |     var reloadPeriod = 1000;
 28 |     var running = false;
 29 |     
 30 |     function loadValues(){
 31 |       if(!running) return;
 32 |       var xh = new XMLHttpRequest();
 33 |       xh.onreadystatechange = function(){
 34 |         if (xh.readyState == 4){
 35 |           if(xh.status == 200) {
 36 |             var res = JSON.parse(xh.responseText);
 37 |             heap.add(res.heap);
 38 |             temp.add(res.analog);
 39 |             digi.add(res.gpio);
 40 |             if(running) setTimeout(loadValues, reloadPeriod);
 41 |           } else running = false;
 42 |         }
 43 |       };
 44 |       xh.open("GET", "/all", true);
 45 |       xh.send(null);
 46 |     };
 47 |     
 48 |     function run(){
 49 |       if(!running){
 50 |         running = true;
 51 |         loadValues();
 52 |       }
 53 |     }
 54 |     
 55 |     function onBodyLoad(){
 56 |       var refreshInput = document.getElementById("refresh-rate");
 57 |       refreshInput.value = reloadPeriod;
 58 |       refreshInput.onchange = function(e){
 59 |         var value = parseInt(e.target.value);
 60 |         reloadPeriod = (value > 0)?value:0;
 61 |         e.target.value = reloadPeriod;
 62 |       }
 63 |       var stopButton = document.getElementById("stop-button");
 64 |       stopButton.onclick = function(e){
 65 |         running = false;
 66 |       }
 67 |       var startButton = document.getElementById("start-button");
 68 |       startButton.onclick = function(e){
 69 |         run();
 70 |       }
 71 |       
 72 |       // Example with 10K thermistor
 73 |       //function calcThermistor(v) {
 74 |       //  var t = Math.log(((10230000 / v) - 10000));
 75 |       //  t = (1/(0.001129148+(0.000234125*t)+(0.0000000876741*t*t*t)))-273.15;
 76 |       //  return (t>120)?0:Math.round(t*10)/10;
 77 |       //}
 78 |       //temp = createGraph(document.getElementById("analog"), "Temperature", 100, 128, 10, 40, false, "cyan", calcThermistor);
 79 |       
 80 |       temp = createGraph(document.getElementById("analog"), "Analog Input", 100, 128, 0, 1023, false, "cyan");
 81 |       heap = createGraph(document.getElementById("heap"), "Current Heap", 100, 125, 0, 30000, true, "orange");
 82 |       digi = createDigiGraph(document.getElementById("digital"), "GPIO", 100, 146, [0, 4, 5, 16], "gold");
 83 |       run();
 84 |     }
 85 |   </script>
 86 | </head>
 87 | <body id="index" style="margin:0; padding:0;" onload="onBodyLoad()">
 88 |   <div id="controls" style="display: block; border: 1px solid rgb(68, 68, 68); padding: 5px; margin: 5px; width: 362px; background-color: rgb(238, 238, 238);">
 89 |     <label>Period (ms):</label>
 90 |     <input type="number" id="refresh-rate"/>
 91 |     <input type="button" id="start-button" value="Start"/>
 92 |     <input type="button" id="stop-button" value="Stop"/>
 93 |   </div>
 94 |   <div id="heap"></div>
 95 |   <div id="analog"></div>
 96 |   <div id="digital"></div>
 97 |   <p style="padding-top:15px;text-align:center">
 98 |     <a href="/_ac"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC2klEQVRIS61VvWsUQRSfmU2pon9BUIkQUaKFaCBKgooSb2d3NSSFKbQR/KrEIiIKBiGF2CgRxEpjQNHs7mwOUcghwUQ7g58IsbGxEBWsb2f8zR177s3t3S2cA8ftzPu993vzvoaSnMu2vRKlaqgKp74Q/tE8qjQPyHGcrUrRjwlWShmDbFMURd/a6TcQwNiYUmpFCPElUebcuQ2vz6aNATMVReHEPwzfSSntDcNwNo2rI+DcvQzhpAbA40VKyV0p1Q9snzBG1qYVcYufXV1sREraDcxpyHdXgkfpRBj6Uwm2RsC5dxxmZ9pdOY9cKTISRcHTCmGiUCh4fYyplTwG2mAUbtMTBMHXOgK9QfyXEZr+TkgQ1oUwDA40hEgfIAfj+HuQRaBzAs9eKyUZ5Htx+T3ZODKG8DzOJMANhmGomJVMXPll+hx9UUAlzZrJJ4QNCDG3VEfguu7mcpmcB/gkBOtShhQhchAlu5jlLUgc9ENgyP5gf9+y6LTv+58p5zySkgwzLNOIGc8sEoT1Lc53NMlbCQQuvMxeCME1NNPVVkmH/i3IzzXDtCSA0qQQwZWOCJDY50jsQRjJmkslEOxvTcDRO6zPxOh5xZglKkYLhWM9jMVnkIsTyMT6NBj7IbOCEjm6HxNVVTo2WXqEWJZ1T8rytB6GxizyDkPhWVpBqfiXUtbo/HywYJSpA9kMamNNPZ71R9Hcm+TMHHZNGw3EuraXEUldbfvw25UdOjqOt+JhMwJd7+jSTpZaEiIcaCDwPK83jtWnTkwnunFMtxeL/ge9r4XItt1RNNaj/0GAcV2bR3U5sG3nEh6M61US+Qrfd9Bs31GGulI2GOS/8dgcQZV1w+ApjIxB7TDwF9GcNzJzoA+rD0/8HvPnXQJCt2qFCwbBTfRI7UyXumWVt+HJ9NO4XI++bdsb0YyrqXmlh+AWOLHaLqS5CLQR5EggR3YlcVS9gKeH2hnX8r8Kmi1CAsl36QAAAABJRU5ErkJggg==" border="0" title="AutoConnect menu" alt="AutoConnect menu"/></a>
 99 |   </p>
100 | </body>
101 | </html>


--------------------------------------------------------------------------------
/data/ws_arm.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <title>Arduino - Arm Robot - Web</title>
  5 | <meta name="viewport" content="width=device-width, initial-scale=0.9">
  6 | <style>
  7 | body { text-align: center; }
  8 | canvas { background-color: #FFFFFF; }
  9 | </style>
 10 | <script>
 11 | var MOTOR_1 = 0;
 12 | var MOTOR_2 = 1;
 13 | var MOTOR_3 = 2;
 14 | var MOTOR_4 = 3;
 15 | var MOTOR_5 = 4;
 16 | var MOTOR_6 = 5;
 17 | 
 18 | var ARM_LENGTH_1 = 95;
 19 | var ARM_LENGTH_2 = 88;
 20 | var ARM_LENGTH_3 = 155;
 21 | 
 22 | var SOLE_WIDTH = 160;
 23 | var SOLE_HEIGHT = 73;
 24 | 
 25 | var flywheel_img = new Image();
 26 | flywheel_img.src = "flywheel.png";
 27 | 
 28 | var zone_A_radius = ARM_LENGTH_1 + ARM_LENGTH_2 + ARM_LENGTH_3;
 29 | 
 30 | var pivot_x = zone_A_radius + 5;
 31 | var pivot_y = zone_A_radius + 5;
 32 | 
 33 | var zone_B_radius = 100;
 34 | var zone_B_center_x = pivot_x / 2;
 35 | var zone_B_center_y = -(zone_B_radius + SOLE_HEIGHT + 20);
 36 | var zone_B_last_angle = 0;
 37 | 
 38 | var zone_C_radius = 70;
 39 | var zone_C_center_x = -pivot_x / 2;
 40 | var zone_C_center_y = -(zone_B_radius + SOLE_HEIGHT + 20);
 41 | var zone_C_last_angle = 0;
 42 | 
 43 | var zone_D_width = 30;
 44 | var zone_D_height = 200.0;
 45 | var zone_D_center_x = 0;
 46 | var zone_D_center_y = -(zone_B_radius + SOLE_HEIGHT + 110);
 47 | var grip_height = 70;
 48 | var grip_width = 100;
 49 | 
 50 | var canvas_width = zone_A_radius * 2 + 10;
 51 | var canvas_height = zone_A_radius  + SOLE_HEIGHT + zone_B_radius * 2 + 180;
 52 | 
 53 | var grip_max_angle = 62.0; // 62 degree
 54 | 
 55 | var click_state = 0;
 56 | var mouse_xyra = {x:0, y:0, r:0.0, a:0.0};
 57 | var angles = [90, 90, 180, 180, 90, 17];
 58 | 
 59 | var ws = null;
 60 | var servo = null, ctx = null;
 61 | 
 62 | var last_time;
 63 | 
 64 | var a = 0, b = 0, c = 0;
 65 | 
 66 | function init()
 67 | {
 68 | 	servo = document.getElementById("servo");
 69 | 	servo.width = canvas_width;
 70 | 	servo.height = canvas_height;
 71 | 
 72 | 	servo.addEventListener("touchstart", mouse_down);
 73 | 	servo.addEventListener("touchend", mouse_up);
 74 | 	servo.addEventListener("touchmove", mouse_move);
 75 | 	servo.addEventListener("mousedown", mouse_down);
 76 | 	servo.addEventListener("mouseup", mouse_up);
 77 | 	servo.addEventListener("mousemove", mouse_move);
 78 | 
 79 | 	ctx = servo.getContext("2d");
 80 | 
 81 | 	ctx.translate(pivot_x, pivot_y);
 82 | 	ctx.rotate(Math.PI);
 83 | 
 84 | 	// quadratic equation parameters
 85 | 	a = 4*ARM_LENGTH_1*ARM_LENGTH_3;
 86 | 	b = 2*(ARM_LENGTH_2*ARM_LENGTH_1 + ARM_LENGTH_2*ARM_LENGTH_3);
 87 | 	c = Math.pow(ARM_LENGTH_1, 2) + Math.pow(ARM_LENGTH_2, 2)  + Math.pow(ARM_LENGTH_3, 2) - 2*ARM_LENGTH_1*ARM_LENGTH_3;
 88 | }
 89 | function update_view()
 90 | {
 91 | 	ctx.clearRect(-canvas_width/2, -SOLE_HEIGHT, canvas_width, canvas_height);
 92 | 	ctx.save();
 93 | 
 94 | 	//draw zone A
 95 | 	ctx.fillStyle = "#D9D9D9";
 96 | 	ctx.beginPath();
 97 | 	ctx.arc(0,0,zone_A_radius, 0, 2*Math.PI);
 98 | 	ctx.fill();
 99 | 	
100 | 	ctx.fillStyle = "#FFFFFF";
101 | 	ctx.fillRect(-pivot_x , -canvas_height + pivot_y, canvas_width, canvas_height - pivot_y - SOLE_HEIGHT);
102 | 
103 | 	// draw arm segments
104 | 	ctx.strokeStyle="#00979D";
105 | 	ctx.fillStyle = "#FF4500";
106 | 	ctx.lineWidth = 20;
107 | 	ctx.rotate(angles[MOTOR_2] / 180 * Math.PI);
108 | 	ctx.beginPath();
109 | 	ctx.moveTo(0,0);
110 | 	ctx.lineTo(ARM_LENGTH_1,0);
111 | 	ctx.stroke();
112 | 	draw_pivot(0, 0);
113 | 
114 | 	ctx.translate(ARM_LENGTH_1,0);
115 | 	ctx.rotate(-Math.PI + angles[MOTOR_3] / 180 * Math.PI);
116 | 	ctx.beginPath();
117 | 	ctx.moveTo(0,0);
118 | 	ctx.lineTo(ARM_LENGTH_2, 0);
119 | 	ctx.stroke();
120 | 	draw_pivot(0, 0);
121 | 
122 | 	ctx.translate(ARM_LENGTH_2,0);
123 | 	ctx.rotate(-Math.PI + angles[MOTOR_4] / 180 * Math.PI);
124 | 	ctx.beginPath();
125 | 	ctx.moveTo(0,0);
126 | 	ctx.lineTo(ARM_LENGTH_3, 0);
127 | 	ctx.stroke();
128 | 	draw_pivot(0, 0);
129 | 
130 | 	ctx.restore();
131 | 
132 | 	ctx.strokeStyle = "#00979D";
133 | 	ctx.lineWidth = 6;
134 | 
135 | 	// draw zone B
136 | 	angle = (angles[MOTOR_1] + 45) * Math.PI / 180;
137 | 	ctx.save();
138 | 	ctx.translate(zone_B_center_x, zone_B_center_y);
139 | 	ctx.rotate(angle);
140 | 	//ctx.drawImage(flywheel_img, - zone_B_radius, - zone_B_radius, zone_B_radius * 2, zone_B_radius * 2);
141 | 	ctx.beginPath();
142 | 	ctx.moveTo(0,0);
143 | 	ctx.lineTo(zone_B_radius, 0);
144 | 	ctx.arc(0, 0, zone_B_radius, 0, 2 * Math.PI);
145 | 	ctx.stroke();
146 | 	ctx.restore();
147 | 
148 | 	// draw zone C
149 | 	angle = (angles[MOTOR_5] + 45) * Math.PI / 180;
150 | 	ctx.save();
151 | 	ctx.translate(zone_C_center_x, zone_C_center_y);
152 | 	ctx.rotate(angle);
153 | 	//ctx.drawImage(flywheel_img, - zone_C_radius, - zone_C_radius, zone_C_radius * 2, zone_C_radius * 2);
154 | 	ctx.beginPath();
155 | 	ctx.moveTo(0,0);
156 | 	ctx.lineTo(zone_C_radius, 0);
157 | 	ctx.arc(0, 0, zone_C_radius, 0, 2 * Math.PI);
158 | 	ctx.stroke();
159 | 	ctx.restore();
160 | 
161 | 	// draw zone D
162 | 	ctx.fillStyle = "#00DEE6";
163 | 	ctx.lineWidth = 15;
164 | 	var grip_dist = Math.floor(angles[MOTOR_6] / grip_max_angle * zone_D_height);
165 | 	ctx.fillRect(zone_D_center_x - zone_D_width / 2, zone_D_center_y - zone_D_height / 2, zone_D_width, zone_D_height);
166 | 
167 | 	ctx.lineWidth = 1;
168 | 	ctx.strokeStyle = "#FFFFFF";
169 | 
170 | 	var center_x = zone_D_center_x;
171 | 	var center_y = zone_D_center_y + grip_dist / 2;
172 | 
173 | 	var grd = ctx.createLinearGradient(center_x, center_y, center_x, center_y  + grip_height);
174 | 	grd.addColorStop(0,"#004A4D");
175 | 	grd.addColorStop(1,"#b3fcff");
176 | 	ctx.fillStyle = grd;
177 | 	ctx.beginPath();
178 | 	ctx.moveTo(center_x + grip_width / 2, center_y);
179 | 	ctx.bezierCurveTo(center_x + grip_width / 4, center_y + grip_height, center_x - grip_width / 4, center_y + grip_height,center_x - grip_width / 2, center_y);
180 | 	ctx.closePath();
181 | 	ctx.fill();
182 | 	ctx.stroke();
183 | 
184 | 	center_x = zone_D_center_x;
185 | 	center_y = zone_D_center_y - grip_dist / 2;
186 | 
187 | 	grd = ctx.createLinearGradient(center_x, center_y, center_x, center_y  - grip_height);
188 | 	grd.addColorStop(0,"#004A4D");
189 | 	grd.addColorStop(1,"#b3fcff");
190 | 	ctx.fillStyle = grd;
191 | 	ctx.beginPath();
192 | 	ctx.moveTo(center_x + grip_width / 2, center_y);
193 | 	ctx.bezierCurveTo(center_x + grip_width / 4, center_y - grip_height, center_x - grip_width / 4, center_y - grip_height,center_x - grip_width / 2, center_y);
194 | 	ctx.closePath();
195 | 	ctx.fill();
196 | 	ctx.stroke();
197 | 
198 | 	ctx.restore();
199 | 
200 | 	// draw sole
201 | 	ctx.fillStyle = "#006468";
202 | 	ctx.fillRect(-SOLE_WIDTH/2, -SOLE_HEIGHT, SOLE_WIDTH, SOLE_HEIGHT);
203 | }
204 | function event_handler(event)
205 | {
206 | 	var x, y, r, alpha;
207 | 	// convert coordinate
208 | 	if(event.touches)
209 | 	{
210 | 		var touches = event.touches;
211 | 
212 | 		x = (touches[0].pageX - touches[0].target.offsetLeft) - pivot_x;
213 | 		y = (touches[0].pageY - touches[0].target.offsetTop) - pivot_y;
214 | 
215 | 	}
216 | 	else
217 | 	{
218 | 		x = event.offsetX - pivot_x;
219 | 		y = event.offsetY - pivot_y;
220 | 	}
221 | 	x = -x;
222 | 	y = -y;
223 | 
224 | 	//check whether it's located in zone A or not
225 | 	r = Math.sqrt(x * x + y * y);
226 | 
227 | 	if(r < zone_A_radius && y > -SOLE_HEIGHT)
228 | 	{
229 | 		if((x < SOLE_WIDTH/2) && (x > -SOLE_WIDTH/2) && (y < 0))
230 | 			return false;
231 | 
232 | 		alpha = Math.atan2(y, x);
233 | 
234 | 		if(alpha < 0)
235 | 			alpha += 2*Math.PI;
236 | 
237 | 		mouse_xyra.x = x;
238 | 		mouse_xyra.y = y;
239 | 		mouse_xyra.r = r;
240 | 		mouse_xyra.a = alpha;
241 | 
242 | 		if(geometric_calculation())
243 | 			return true;
244 | 	}
245 | 
246 | 	//check whether it's located in zone B or not
247 | 	temp_x = x - zone_B_center_x;
248 | 	temp_y = y - zone_B_center_y;
249 | 	var distance = Math.sqrt(temp_x * temp_x + temp_y * temp_y);
250 | 
251 | 	if(distance < zone_B_radius)
252 | 	{
253 | 		var angle = Math.atan2(temp_y, temp_x)* 180 / Math.PI;
254 | 
255 | 		if(click_state == 0)
256 | 			zone_B_last_angle = angle;
257 | 		else
258 | 		{
259 | 			if((Math.abs(angle) > 90) && (angle * zone_B_last_angle < 0))
260 | 			{
261 | 				if(zone_B_last_angle > 0)
262 | 					zone_B_last_angle = -180;
263 | 				else
264 | 					zone_B_last_angle = 180;
265 | 			}
266 | 
267 | 			angles[MOTOR_1] += Math.floor(angle - zone_B_last_angle);
268 | 
269 | 			angles[MOTOR_1] = Math.max(0, angles[MOTOR_1]);
270 | 			angles[MOTOR_1] = Math.min(180, angles[MOTOR_1]);
271 | 
272 | 			zone_B_last_angle = angle;
273 | 		}
274 | 		return true;
275 | 	}
276 | 
277 | 	//check whether it's located in zone C or not
278 | 	temp_x = x - zone_C_center_x;
279 | 	temp_y = y - zone_C_center_y;
280 | 	var distance = Math.sqrt(temp_x * temp_x + temp_y * temp_y);
281 | 
282 | 	if(distance < zone_C_radius)
283 | 	{
284 | 		var angle = Math.atan2(temp_y, temp_x)* 180 / Math.PI;
285 | 
286 | 		if(click_state == 0)
287 | 			zone_C_last_angle = angle;
288 | 		else
289 | 		{
290 | 			if((Math.abs(angle) > 90) && (angle * zone_C_last_angle < 0))
291 | 			{
292 | 				if(zone_C_last_angle > 0)
293 | 					zone_C_last_angle = -180;
294 | 				else
295 | 					zone_C_last_angle = 180;
296 | 			}
297 | 
298 | 			angles[MOTOR_5] += Math.floor(angle - zone_C_last_angle);
299 | 
300 | 			angles[MOTOR_5] = Math.max(0, angles[MOTOR_5]);
301 | 			angles[MOTOR_5] = Math.min(180, angles[MOTOR_5]);
302 | 
303 | 			zone_C_last_angle = angle;
304 | 		}
305 | 		return true;
306 | 	}
307 | 
308 | 	//check whether it's located in zone D or not
309 | 	var temp_x = Math.abs(x - zone_D_center_x);
310 | 	var temp_y = Math.abs(y - zone_D_center_y);
311 | 
312 | 	if(temp_x < (zone_D_width / 2) && temp_y < (zone_D_height / 2))
313 | 	{
314 | 		var angle = temp_y / (zone_D_height / 2) * grip_max_angle;
315 | 		angles[MOTOR_6] = Math.floor(angle);
316 | 		console.log(angles[MOTOR_6]);
317 | 		return true;
318 | 	}
319 | 
320 | 	return false;
321 | }
322 | function geometric_calculation()
323 | {
324 | 	var c_ = c - Math.pow(mouse_xyra.r, 2);
325 | 	var delta = b*b - 4*a*c_;
326 | 	if(delta < 0)
327 | 		return false; // no root
328 | 
329 | 	var x1 = 0, x2 = 0;
330 | 	var x = 0;
331 | 	var cos_C = 0;
332 | 	var alpha = 0, beta = 0, gamma = 0;
333 | 
334 | 	x1 = (-b + Math.sqrt(delta)) / (2*a);
335 | 	x2 = (-b - Math.sqrt(delta)) / (2*a);
336 | 	x = x1;
337 | 
338 | 	if(x > 1)
339 | 		return false;
340 | 
341 | 	alpha = Math.acos(x);
342 | 	alpha = alpha * 180 / Math.PI;
343 | 	beta = 180 - alpha;
344 | 	cos_C = Math.pow(mouse_xyra.r, 2) + Math.pow(ARM_LENGTH_1, 2) - ( Math.pow(ARM_LENGTH_2, 2) + Math.pow(ARM_LENGTH_3, 2) + 2*ARM_LENGTH_2*ARM_LENGTH_3*x );
345 | 
346 | 	cos_C = cos_C /(2*mouse_xyra.r*ARM_LENGTH_1);
347 | 	angle_C = Math.acos(cos_C);
348 | 	gamma = (angle_C + mouse_xyra.a) % (2*Math.PI);
349 | 	gamma = gamma * 180 / Math.PI;
350 | 
351 | 	if(gamma < 0)
352 | 		gamma += 360;
353 | 
354 | 	if(gamma > 180)
355 | 	{
356 | 		var temp = gamma -  mouse_xyra.a * 180 / Math.PI;
357 | 		gamma = gamma - 2* temp;
358 | 		beta = 360 - beta;
359 | 	}
360 | 
361 | 	if(gamma < 0 || gamma > 180)
362 | 		return false;
363 | 
364 | 	angles[MOTOR_3] = Math.floor(beta);
365 | 	angles[MOTOR_4] = Math.floor(beta);
366 | 	angles[MOTOR_2] = Math.floor(gamma);
367 | 
368 | 	return true;
369 | }
370 | function draw_pivot(x, y)
371 | {
372 | 	ctx.beginPath();
373 | 	ctx.arc(x,y, 10, 0, 2*Math.PI);
374 | 	ctx.stroke();
375 | 	ctx.fill();
376 | }
377 | function ws_onmessage(e_msg)
378 | {
379 | 	e_msg = e_msg || window.event; // MessageEvent
380 | }
381 | function ws_onopen()
382 | {
383 | 	document.getElementById("ws_state").innerHTML = "OPEN";
384 | 	document.getElementById("wc_conn").innerHTML = "Disconnect";
385 | 	angles_change_notice();
386 | 
387 | 	update_view();
388 | }
389 | function ws_onclose()
390 | {
391 | 	document.getElementById("ws_state").innerHTML = "CLOSED";
392 | 	document.getElementById("wc_conn").innerHTML = "Connect";
393 | 	console.log("socket was closed");
394 | 	ws.onopen = null;
395 | 	ws.onclose = null;
396 | 	ws.onmessage = null;
397 | 	ws = null;
398 | }
399 | function wc_onclick()
400 | {
401 | 	if(ws == null)
402 | 	{
403 | 		ws = new WebSocket('ws://' + window.location.hostname + ':81/');
404 | 		document.getElementById("ws_state").innerHTML = "CONNECTING";
405 | 
406 | 		ws.onopen = ws_onopen;
407 | 		ws.onclose = ws_onclose;
408 | 		ws.onmessage = ws_onmessage;  
409 | 	}
410 | 	else
411 | 	{
412 | 		ws.close();
413 | 	}
414 | }
415 | function mouse_down()
416 | {
417 | /* 	if(ws == null)
418 | 		return;
419 |  */
420 | 	if(event.touches && (event.touches.length > 1))
421 | 		click_state = event.touches.length;
422 | 
423 | 	if(click_state > 1)
424 | 		return;
425 | 
426 | 	var state = event_handler(event);
427 | 	if(state)
428 | 	{
429 | 		click_state = 1;
430 | 		angles_change_notice();
431 | 	}
432 | 
433 | 	event.preventDefault();
434 | }
435 | function mouse_up()
436 | {
437 | 	click_state = 0;
438 | }
439 | function mouse_move()
440 | {
441 | /* 	if(ws == null)
442 | 		return;
443 |  */
444 | 	var d = new Date();
445 | 	var time = d.getTime();
446 | 	if((time - last_time) < 50)
447 | 		return;
448 | 
449 | 	last_time = time;
450 | 
451 | 	if(event.touches && (event.touches.length > 1))
452 | 		click_state = event.touches.length;
453 | 
454 | 	if(click_state > 1)
455 | 		return;
456 | 
457 | 	if(!click_state)
458 | 		return;
459 | 
460 | 	var state = event_handler(event);
461 | 	if(state)
462 | 	{
463 | 		click_state = 1;
464 | 		angles_change_notice();
465 | 	}
466 | 
467 | 	event.preventDefault();
468 | }
469 | function angles_change_notice()
470 | {
471 | 	if(ws != null && ws.readyState == 1)
472 | 	{
473 | 		// ws.send(angles.join(",") + "\r\n");
474 | 		ws.send("S0="+angles[0]);
475 | 		ws.send("S1="+angles[1]);
476 | 		ws.send("S2="+angles[2]);
477 | 		ws.send("S3="+angles[3]);
478 | 		ws.send("S4="+angles[4]);
479 | 		ws.send("S5="+angles[5]);
480 | 	}
481 | 		update_view(); 
482 | }
483 | window.onload = init;
484 | setTimeout(function(){ update_view();}, 500);
485 | </script>
486 | </head>
487 | <body>
488 | <h2>Arduino - Control Arm Robot via Web</h2>
489 | <canvas id="servo"></canvas>
490 | <p>WebSocket : <span id="ws_state">null</span><br></p>
491 | <button id="wc_conn" type="button" onclick="wc_onclick();">Connect</button>
492 | </body>
493 | </html>
494 | 


--------------------------------------------------------------------------------
/data/ws_basic.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <script>
 4 |     var Socket;
 5 |     function init() {
 6 |       Socket = new WebSocket('ws://' + window.location.hostname + ':81/');
 7 |       Socket.onmessage = function(event){
 8 |         document.getElementById("rxConsole").value += event.data;
 9 |       }
10 |     }
11 |     function sendText(){
12 |       Socket.send(document.getElementById("txBar").value);
13 |       document.getElementById("txBar").value = "";
14 |     }
15 |     function sendServo(id,value){
16 |       Socket.send(id+"="+value);
17 |     }    
18 |   </script>
19 | </head>
20 | <body onload="init()">
21 |   <div>
22 |     <textarea id="rxConsole"></textarea>
23 |   </div>
24 |   <hr/>
25 |   <div>
26 |     <input type="text" id="txBar" onkeydown="if(event.keyCode == 13) sendText();" />
27 |   </div>
28 |   <hr/>
29 |   <div>0<input type="range" min="0" max="180" value="90" id="S0" oninput="sendServo(this.id,this.value)" /></div>  
30 |   <hr/>
31 |   <div>1<input type="range" min="0" max="180" value="90" id="S1" oninput="sendServo(this.id,this.value)" /></div>  
32 |   <hr/>
33 |   <div>2<input type="range" min="0" max="180" value="90" id="S2" oninput="sendServo(this.id,this.value)" /></div>  
34 |   <hr/>
35 |   <div>3<input type="range" min="0" max="180" value="90" id="S3" oninput="sendServo(this.id,this.value)" /></div>  
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/data/ws_gamepad.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <meta charset="utf-8">
  5 | <!--
  6 | 
  7 | Gamepad API Test
  8 | 
  9 | Written in 2013 by Ted Mielczarek <ted@mielczarek.org>
 10 | 
 11 | To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.
 12 | 
 13 | You should have received a copy of the CC0 Public Domain Dedication along with this software. If not, see <http://creativecommons.org/publicdomain/zero/1.0/>.
 14 | 
 15 | -->
 16 | <script type="text/javascript">/*
 17 |  * Gamepad API Test
 18 |  * Written in 2013 by Ted Mielczarek <ted@mielczarek.org>
 19 |  *
 20 |  * To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.
 21 |  *
 22 |  * You should have received a copy of the CC0 Public Domain Dedication along with this software. If not, see <http://creativecommons.org/publicdomain/zero/1.0/>.
 23 |  */
 24 | var haveEvents = 'GamepadEvent' in window;
 25 | var haveWebkitEvents = 'WebKitGamepadEvent' in window;
 26 | var controllers = {};
 27 | var rAF = window.mozRequestAnimationFrame ||
 28 |   window.webkitRequestAnimationFrame ||
 29 |   window.requestAnimationFrame;
 30 | 
 31 | function connecthandler(e) {
 32 |   addgamepad(e.gamepad);
 33 | }
 34 | function addgamepad(gamepad) {
 35 |   controllers[gamepad.index] = gamepad;
 36 |   var d = document.createElement("div");
 37 |   d.setAttribute("id", "controller" + gamepad.index);
 38 | 
 39 |   var t = document.createElement("h1");
 40 |   t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
 41 |   d.appendChild(t);
 42 | 
 43 |   var b = document.createElement("div");
 44 |   b.className = "buttons";
 45 |   for (var i=0; i<gamepad.buttons.length; i++) {
 46 |     var e = document.createElement("span");
 47 |     e.className = "button";
 48 |     //e.id = "b" + i;
 49 |     e.innerHTML = i;
 50 |     b.appendChild(e);
 51 |   }
 52 |   d.appendChild(b);
 53 | 
 54 |   var a = document.createElement("div");
 55 |   a.className = "axes";
 56 |   for (var i=0; i<gamepad.axes.length; i++) {
 57 |     var e = document.createElement("meter");
 58 |     e.className = "axis";
 59 |     //e.id = "a" + i;
 60 |     e.setAttribute("min", "-1");
 61 |     e.setAttribute("max", "1");
 62 |     e.setAttribute("value", "0");
 63 |     e.innerHTML = i;
 64 |     a.appendChild(e);
 65 | 	var x = document.createElement("SELECT");
 66 | 	x.id = "c" + gamepad.index + "as" + i;
 67 | 	var option = document.createElement("option");
 68 | 	option.value = "";
 69 | 	option.text = "none";
 70 | 	x.add(option);
 71 | 	for (var j=0; j<8; j++) {
 72 | 		option = document.createElement("option");
 73 | 		option.value = "S" + j;
 74 | 		option.text = "S" + j;
 75 | 		x.add(option);
 76 | 	}
 77 |     a.appendChild(x);
 78 |   }
 79 |   d.appendChild(a);
 80 |   document.getElementById("start").style.display = "none";
 81 |   document.body.appendChild(d);
 82 |   rAF(updateStatus);
 83 | }
 84 | 
 85 | function disconnecthandler(e) {
 86 |   removegamepad(e.gamepad);
 87 | }
 88 | 
 89 | function removegamepad(gamepad) {
 90 |   var d = document.getElementById("controller" + gamepad.index);
 91 |   document.body.removeChild(d);
 92 |   delete controllers[gamepad.index];
 93 | }
 94 | 
 95 | function updateStatus() {
 96 |   scangamepads();
 97 |   document.getElementById("rxConsole").value = "";
 98 | 
 99 |   for (j in controllers) {
100 |     var controller = controllers[j];
101 |     var d = document.getElementById("controller" + j);
102 |     var buttons = d.getElementsByClassName("button");
103 |     for (var i=0; i<controller.buttons.length; i++) {
104 |       var b = buttons[i];
105 |       var val = controller.buttons[i];
106 |       var pressed = val == 1.0;
107 |       var touched = false;
108 |       if (typeof(val) == "object") {
109 |         pressed = val.pressed;
110 |         if ('touched' in val) {
111 |           touched = val.touched;
112 |         }
113 |         val = val.value;
114 |       }
115 |       var pct = Math.round(val * 100) + "%";
116 |       b.style.backgroundSize = pct + " " + pct;
117 |       b.className = "button";
118 |       if (pressed) {
119 |         b.className += " pressed";
120 |       }
121 |       if (touched) {
122 |         b.className += " touched";
123 |       }
124 |     }
125 | 
126 |     var axes = d.getElementsByClassName("axis");
127 |     for (var i=0; i<controller.axes.length; i++) {
128 |       var a = axes[i];
129 |       a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
130 |       a.setAttribute("value", controller.axes[i]);
131 | 	  if (document.getElementById("c" + j + "as" + i).value){
132 | 		sendServo(document.getElementById("c" + j + "as" + i).value,joysticktoservo(controller.axes[i]));
133 | 	  }
134 |     }
135 |   }
136 |   rAF(updateStatus);
137 | }
138 | 
139 | function scangamepads() {
140 |   var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
141 |   for (var i = 0; i < gamepads.length; i++) {
142 |     if (gamepads[i] && (gamepads[i].index in controllers)) {
143 |       controllers[gamepads[i].index] = gamepads[i];
144 |     }
145 |   }
146 | }
147 | 
148 | if (haveEvents) {
149 |   window.addEventListener("gamepadconnected", connecthandler);
150 |   window.addEventListener("gamepaddisconnected", disconnecthandler);
151 | } else if (haveWebkitEvents) {
152 |   window.addEventListener("webkitgamepadconnected", connecthandler);
153 |   window.addEventListener("webkitgamepaddisconnected", disconnecthandler);
154 | } else {
155 |   setInterval(scangamepads, 500);
156 | }
157 | 
158 | var Socket;
159 | function init() {
160 |   Socket = new WebSocket('ws://' + window.location.hostname + ':81/');
161 |   Socket.onmessage = function(event){
162 | 	document.getElementById("rxConsole").value += event.data;
163 |   }
164 | }
165 | function sendText(){
166 |   Socket.send(document.getElementById("txBar").value);
167 |   document.getElementById("txBar").value = "";
168 | }
169 | function sendServo(id,value){
170 |   //Socket.send(id+"="+value);
171 |   document.getElementById("rxConsole").value += id+"="+value+"\n";
172 | }    
173 | 
174 | function joysticktoservo(joyvalue){ // input: -1 to 1  output: 0 to 180
175 | 	if (joyvalue<-1) {
176 | 		return 0;
177 | 	} else if (joyvalue>1) {
178 | 		return 180;
179 | 	} else {
180 | 		return Math.round((90 * joyvalue) + 90);
181 | 	}
182 | }    
183 | 
184 | </script>
185 | <style>
186 | .axes {
187 |   padding: 1em;
188 | }
189 | 
190 | .buttons {
191 |   margin-left: 1em;
192 | }
193 | 
194 | /*meter*/.axis {
195 |   min-width: 200px;
196 |   margin: 1em;
197 | }
198 | 
199 | .button {
200 |   display: inline-block;
201 |   width: 1em;
202 |   text-align: center;
203 |   padding: 1em;
204 |   border-radius: 20px;
205 |   border: 1px solid black;
206 |   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdjYPjPAAACAgEAqiqeJwAAAABJRU5ErkJggg==);
207 |   background-size: 0% 0%;
208 |   background-position: 50% 50%;
209 |   background-repeat: no-repeat;
210 | }
211 | 
212 | .pressed {
213 |   border: 1px solid red;
214 | }
215 | 
216 | .touched::after {
217 |   content: "touch";
218 |   display: block;
219 |   position: absolute;
220 |   margin-top: -0.2em;
221 |   margin-left: -0.5em;
222 |   font-size: 0.8em;
223 |   opacity: 0.7;
224 | }
225 | </style>
226 | </head>
227 | <body>
228 | <div>
229 | 	<textarea id="rxConsole"></textarea>
230 | </div>
231 | <hr/>
232 | <div>
233 | 	<input type="text" id="txBar" onkeydown="if(event.keyCode == 13) sendText();" />
234 | </div>
235 | <hr/>
236 | <h2 id="start">Press a button on your controller to start</h2>
237 | </body>
238 | </html>
239 | 


--------------------------------------------------------------------------------
/data/ws_gamepad_example_data.html:
--------------------------------------------------------------------------------
 1 | <div id="controller1">
 2 | 	<h1>gamepad: AIRFLO              (Vendor: 124b Product: 4d01)</h1>
 3 | 	<div class="buttons">
 4 | 		<span class="button" style="background-size: 0% 0%;">0</span>
 5 | 		<span class="button" style="background-size: 0% 0%;">1</span>
 6 | 		<span class="button" style="background-size: 0% 0%;">2</span>
 7 | 		<span class="button" style="background-size: 0% 0%;">3</span>
 8 | 		<span class="button" style="background-size: 0% 0%;">4</span>
 9 | 		<span class="button" style="background-size: 0% 0%;">5</span>
10 | 		<span class="button" style="background-size: 0% 0%;">6</span>
11 | 		<span class="button" style="background-size: 0% 0%;">7</span>
12 | 		<span class="button" style="background-size: 0% 0%;">8</span>
13 | 		<span class="button" style="background-size: 0% 0%;">9</span>
14 | 		<span class="button" style="background-size: 0% 0%;">10</span>
15 | 		<span class="button" style="background-size: 0% 0%;">11</span>
16 | 		<span class="button" style="background-size: 0% 0%;">12</span>
17 | 	</div>
18 | 	<div class="axes">
19 | 		<meter class="axis" min="-1" max="1" value="0.003921627998352051">0: 0.0039</meter>
20 | 		<meter class="axis" min="-1" max="1" value="0.003921627998352051">1: 0.0039</meter>
21 | 		<meter class="axis" min="-1" max="1" value="0.003921627998352051">2: 0.0039</meter>
22 | 		<meter class="axis" min="-1" max="1" value="0">3: 0.0000</meter>
23 | 		<meter class="axis" min="-1" max="1" value="0">4: 0.0000</meter>
24 | 		<meter class="axis" min="-1" max="1" value="0.003921627998352051">5: 0.0039</meter>
25 | 		<meter class="axis" min="-1" max="1" value="0">6: 0.0000</meter>
26 | 		<meter class="axis" min="-1" max="1" value="0">7: 0.0000</meter>
27 | 		<meter class="axis" min="-1" max="1" value="0">8: 0.0000</meter>
28 | 		<meter class="axis" min="-1" max="1" value="-1.2857142686843872">9: -1.2857</meter>
29 | 	</div>
30 | </div>
31 | <div id="controller1">
32 | 	<h1>gamepad: 6771 (Vendor: 06a3 Product: 053c)</h1>
33 | 	<div class="buttons">
34 | 		<span class="button" style="background-size: 0% 0%;">0</span>
35 | 		<span class="button" style="background-size: 0% 0%;">1</span>
36 | 		<span class="button" style="background-size: 0% 0%;">2</span>
37 | 		<span class="button" style="background-size: 0% 0%;">3</span>
38 | 		<span class="button" style="background-size: 0% 0%;">4</span>
39 | 		<span class="button" style="background-size: 0% 0%;">5</span>
40 | 		<span class="button" style="background-size: 0% 0%;">6</span>
41 | 		<span class="button" style="background-size: 0% 0%;">7</span>
42 | 		<span class="button pressed touched" style="background-size: 100% 100%;">8</span>
43 | 		<span class="button" style="background-size: 0% 0%;">9</span>
44 | 		<span class="button" style="background-size: 0% 0%;">10</span>
45 | 		<span class="button pressed touched" style="background-size: 100% 100%;">11</span>
46 | 		<span class="button" style="background-size: 0% 0%;">12</span>
47 | 		<span class="button" style="background-size: 0% 0%;">13</span>
48 | 		<span class="button" style="background-size: 0% 0%;">14</span>
49 | 		<span class="button" style="background-size: 0% 0%;">15</span>
50 | 		<span class="button" style="background-size: 0% 0%;">16</span>
51 | 		<span class="button" style="background-size: 0% 0%;">17</span>
52 | 		<span class="button" style="background-size: 0% 0%;">18</span>
53 | 		<span class="button" style="background-size: 0% 0%;">19</span>
54 | 		<span class="button" style="background-size: 0% 0%;">20</span>
55 | 		<span class="button" style="background-size: 0% 0%;">21</span>
56 | 		<span class="button" style="background-size: 0% 0%;">22</span>
57 | 		<span class="button" style="background-size: 0% 0%;">23</span>
58 | 		<span class="button" style="background-size: 0% 0%;">24</span>
59 | 		<span class="button" style="background-size: 0% 0%;">25</span>
60 | 	</div>
61 | 	<div class="axes">
62 | 		<meter class="axis" min="-1" max="1" value="-0.03571426868438721">0: -0.0357</meter>
63 | 		<meter class="axis" min="-1" max="1" value="-0.026785731315612793">1: -0.0268</meter>
64 | 		<meter class="axis" min="-1" max="1" value="0">2: 0.0000</meter>
65 | 		<meter class="axis" min="-1" max="1" value="0.8734177350997925">3: 0.8734</meter>
66 | 		<meter class="axis" min="-1" max="1" value="0">4: 0.0000</meter>
67 | 		<meter class="axis" min="-1" max="1" value="0.07792210578918457">5: 0.0779</meter>
68 | 		<meter class="axis" min="-1" max="1" value="0">6: 0.0000</meter>
69 | 		<meter class="axis" min="-1" max="1" value="0.4390244483947754">7: 0.4390</meter>
70 | 		<meter class="axis" min="-1" max="1" value="0">8: 0.0000</meter>
71 | 		<meter class="axis" min="-1" max="1" value="-1.2857142686843872">9: -1.2857</meter>
72 | 	</div>
73 | </div>
74 | 


--------------------------------------------------------------------------------
/data/ws_touchscreen_joystick.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<title>Joystick Controls</title>
  6 | 	<style>
  7 | 	body
  8 | 	{
  9 | 		font-family: Courier, monospaced;
 10 | 		font-size: 16px;
 11 | 		font-weight: bold;
 12 | 	}
 13 | 	.joystickbase
 14 | 	{
 15 | 		border: 1px solid;
 16 | 		height: 128px;
 17 | 		width: 128px;
 18 | 		position: absolute;
 19 | 	}
 20 | 	.joystickball
 21 | 	{
 22 | 		border: 1px solid;
 23 | 		height: 64px;
 24 | 		width: 64px;
 25 | 		position: absolute;
 26 | 		left:32px;
 27 | 		top:32px;
 28 | 	}
 29 | 	</style>
 30 | </head>
 31 | 
 32 | <body onload="init()">
 33 | 
 34 | <div>
 35 | 	<textarea id="rxConsole"></textarea>
 36 | </div>
 37 | <hr/>
 38 | <div>
 39 | 	<input type="text" id="txBar" onkeydown="if(event.keyCode == 13) sendText();" />
 40 | </div>
 41 | <hr/>
 42 | 
 43 | Joystick Controls.
 44 | <hr>
 45 | <div id="status1" style="color: red;">Joystick 1</div>
 46 | <div id="status2" style="color: blue;">Joystick 2</div>
 47 | <div id="status3" style="color: red;">Joystick 3</div>
 48 | <div id="status4" style="color: blue;">Joystick 4</div>
 49 | 
 50 | <hr>
 51 | <div class="joystickbase" style="border-color: red; left:10px; top:150px;">
 52 | 	<div class="joystickball" id="stick1" style="border-color: red;">
 53 | 	</div>
 54 | </div>
 55 | 
 56 | <div class="joystickbase" style="border-color: blue; left:210px; top:150px;">
 57 | 	<div class="joystickball" id="stick2" style="border-color: blue;">
 58 | 	</div>
 59 | </div>
 60 | 
 61 | <div class="joystickbase" style="border-color: red; left:10px; top:350px;">
 62 | 	<div class="joystickball" id="stick3" style="border-color: red;">
 63 | 	</div>
 64 | </div>
 65 | 
 66 | <div class="joystickbase" style="border-color: blue; left:210px; top:350px;">
 67 | 	<div class="joystickball" id="stick4" style="border-color: blue;">
 68 | 	</div>
 69 | </div>
 70 | 
 71 | <script>
 72 | 
 73 | class JoystickController
 74 | {
 75 | 	// https://github.com/stemkoski/HTML-Joysticks
 76 | 	// stickID: ID of HTML element (representing joystick) that will be dragged
 77 | 	// maxDistance: maximum amount joystick can move in any direction
 78 | 	// deadzone: joystick must move at least this amount from origin to register value change
 79 | 	constructor( stickID, maxDistance, deadzone )
 80 | 	{
 81 | 		this.id = stickID;
 82 | 		let stick = document.getElementById(stickID);
 83 | 
 84 | 		// location from which drag begins, used to calculate offsets
 85 | 		this.dragStart = null;
 86 | 
 87 | 		// track touch identifier in case multiple joysticks present
 88 | 		this.touchId = null;
 89 | 		
 90 | 		this.active = false;
 91 | 		this.value = { x: 0, y: 0 }; 
 92 | 
 93 | 		let self = this;
 94 | 
 95 | 		function handleDown(event)
 96 | 		{
 97 | 		    self.active = true;
 98 | 
 99 | 			// all drag movements are instantaneous
100 | 			stick.style.transition = '0s';
101 | 
102 | 			// touch event fired before mouse event; prevent redundant mouse event from firing
103 | 			event.preventDefault();
104 | 
105 | 		    if (event.changedTouches)
106 | 		    	self.dragStart = { x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY };
107 | 		    else
108 | 		    	self.dragStart = { x: event.clientX, y: event.clientY };
109 | 
110 | 			// if this is a touch event, keep track of which one
111 | 		    if (event.changedTouches)
112 | 		    	self.touchId = event.changedTouches[0].identifier;
113 | 		}
114 | 		
115 | 		function handleMove(event) 
116 | 		{
117 | 		    if ( !self.active ) return;
118 | 
119 | 		    // if this is a touch event, make sure it is the right one
120 | 		    // also handle multiple simultaneous touchmove events
121 | 		    let touchmoveId = null;
122 | 		    if (event.changedTouches)
123 | 		    {
124 | 		    	for (let i = 0; i < event.changedTouches.length; i++)
125 | 		    	{
126 | 		    		if (self.touchId == event.changedTouches[i].identifier)
127 | 		    		{
128 | 		    			touchmoveId = i;
129 | 		    			event.clientX = event.changedTouches[i].clientX;
130 | 		    			event.clientY = event.changedTouches[i].clientY;
131 | 		    		}
132 | 		    	}
133 | 
134 | 		    	if (touchmoveId == null) return;
135 | 		    }
136 | 
137 | 		    const xDiff = event.clientX - self.dragStart.x;
138 | 		    const yDiff = event.clientY - self.dragStart.y;
139 | 		    const angle = Math.atan2(yDiff, xDiff);
140 | 			const distance = Math.min(maxDistance, Math.hypot(xDiff, yDiff));
141 | 			const xPosition = distance * Math.cos(angle);
142 | 			const yPosition = distance * Math.sin(angle);
143 | 
144 | 			// move stick image to new position
145 | 		    stick.style.transform = `translate3d(${xPosition}px, ${yPosition}px, 0px)`;
146 | 
147 | 			// deadzone adjustment
148 | 			const distance2 = (distance < deadzone) ? 0 : maxDistance / (maxDistance - deadzone) * (distance - deadzone);
149 | 		    const xPosition2 = distance2 * Math.cos(angle);
150 | 			const yPosition2 = distance2 * Math.sin(angle);
151 | 		    const xPercent = parseFloat((xPosition2 / maxDistance).toFixed(4));
152 | 		    const yPercent = parseFloat((yPosition2 / maxDistance).toFixed(4));
153 | 		    
154 | 		    self.value = { x: xPercent, y: yPercent };
155 | 		  }
156 | 
157 | 		function handleUp(event) 
158 | 		{
159 | 		    if ( !self.active ) return;
160 | 
161 | 		    // if this is a touch event, make sure it is the right one
162 | 		    if (event.changedTouches && self.touchId != event.changedTouches[0].identifier) return;
163 | 
164 | 		    // transition the joystick position back to center
165 | 		    stick.style.transition = '.2s';
166 | 		    stick.style.transform = `translate3d(0px, 0px, 0px)`;
167 | 
168 | 		    // reset everything
169 | 		    self.value = { x: 0, y: 0 };
170 | 		    self.touchId = null;
171 | 		    self.active = false;
172 | 		}
173 | 
174 | 		stick.addEventListener('mousedown', handleDown);
175 | 		stick.addEventListener('touchstart', handleDown);
176 | 		document.addEventListener('mousemove', handleMove, {passive: false});
177 | 		document.addEventListener('touchmove', handleMove, {passive: false});
178 | 		document.addEventListener('mouseup', handleUp);
179 | 		document.addEventListener('touchend', handleUp);
180 | 	}
181 | }
182 | 
183 | let joystick1 = new JoystickController("stick1", 64, 8);
184 | let joystick2 = new JoystickController("stick2", 64, 8);
185 | let joystick3 = new JoystickController("stick3", 64, 8);
186 | let joystick4 = new JoystickController("stick4", 64, 8);
187 | 
188 | function update()
189 | {
190 | 	document.getElementById("status1").innerText = "Joystick 1: " + JSON.stringify(joystick1.value);
191 | 	sendServo("S0",joysticktoservo(joystick1.value.x));
192 | 	sendServo("S1",joysticktoservo(joystick1.value.y));
193 | 	document.getElementById("status2").innerText = "Joystick 2: " + JSON.stringify(joystick2.value);
194 | 	sendServo("S2",joysticktoservo(joystick2.value.x));
195 | 	sendServo("S3",joysticktoservo(joystick2.value.y));
196 | 	document.getElementById("status3").innerText = "Joystick 3: " + JSON.stringify(joystick3.value);
197 | 	document.getElementById("status4").innerText = "Joystick 4: " + JSON.stringify(joystick4.value);
198 | }
199 | 
200 | function loop()
201 | {
202 | 	requestAnimationFrame(loop);
203 | 	update();
204 | }
205 | 
206 | loop();
207 | 
208 | var Socket;
209 | function init() {
210 |   Socket = new WebSocket('ws://' + window.location.hostname + ':81/');
211 |   Socket.onmessage = function(event){
212 | 	document.getElementById("rxConsole").value += event.data;
213 |   }
214 | }
215 | function sendText(){
216 |   Socket.send(document.getElementById("txBar").value);
217 |   document.getElementById("txBar").value = "";
218 | }
219 | function sendServo(id,value){
220 |   Socket.send(id+"="+value);
221 | }    
222 | 
223 | function joysticktoservo(joyvalue){ // input: -1 to 1  output: 0 to 180
224 | 	if (joyvalue<-1) {
225 | 		return 0;
226 | 	} else if (joyvalue>1) {
227 | 		return 180;
228 | 	} else {
229 | 		return Math.round((90 * joyvalue) + 90);
230 | 	}
231 | }    
232 | 
233 | </script>
234 | 
235 | </body>
236 | </html>


--------------------------------------------------------------------------------