add in example static asset serving with ajax call LED color changing

mscosti · mscosti · commit 83d15258a4d9 · 2019-07-14T18:03:35.000-04:00
diff --git a/examples/esp32spi_server.py b/examples/esp32spi_server.py
@@ -8,13 +8,24 @@
 
 import neopixel
 
+
+# This example depends on the 'static' folder in the examples folder
+# being copied to the root of the circuitpython filesystem. 
+# This is where our static assets like html, js, and css live.
+
+
 # Get wifi details and more from a secrets.py file
 try:
     from secrets import secrets
 except ImportError:
     print("WiFi secrets are kept in secrets.py, please add them there!")
     raise
 
+try:
+    import json as json_module
+except ImportError:
+    import ujson as json_module
+
 print("ESP32 SPI simple web server test!")
 
 esp32_cs = DigitalInOut(board.D10)
@@ -41,42 +52,32 @@
 server = server.server(80, debug=False)
 
 
-def onLedHigh(headers, body, client):
+def onLedHigh(headers, body, client): # pylint: disable=unused-argument
     print("led on!")
-    print("headers: ", headers)
-    print("body: ", body)
     status_light.fill((0, 0, 100))
-    respond(headers, body, client)
+    server.serve_file("static/index.html")
 
-def onLedLow(headers, body, client):
+def onLedLow(headers, body, client): # pylint: disable=unused-argument
     print("led off!")
-    print("headers: ", headers)
-    print("body: ", body)
     status_light.fill(0)
-    respond(headers, body, client)
-
-def respond(headers, body, client):
-    print("headers: ", headers)
-    print("body: ", body)
-
-    client.write(b"HTTP/1.1 200 OK\r\n")
-    client.write(b"Content-type:text/html\r\n")
-    client.write(b"\r\n")
+    server.serve_file("static/index.html")
 
-    client.write(b"Click <a href=\"/H\">here</a> turn the LED on!!!<br>\r\n")
-    client.write(b"Click <a href=\"/L\">here</a> turn the LED off!!!!<br>\r\n")
-
-    client.write(b"\r\n")
+def onLedColor(headers, body, client): # pylint: disable=unused-argument
+    rgb = json_module.loads(body)
+    print("led color: " + rgb)
+    status_light.fill((rgb.get("r"), rgb.get("g"), rgb.get("b")))
+    client.write(b"HTTP/1.1 200 OK")
     client.close()
 
-server.on("GET", "/", respond)
+server.set_static_dir("/static")
 server.on("GET", "/H", onLedHigh)
 server.on("GET", "/L", onLedLow)
+server.on("POST", "/ajax/ledcolor", onLedColor)
 
 
-print("IP addr: ", esp.pretty_ip(esp.ip_address))
+print("open this IP in your browser: ", esp.pretty_ip(esp.ip_address))
 
 server.start()
-print("server started!")
+
 while True:
     server.update_poll()
diff --git a/examples/static/index.html b/examples/static/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.4/jquery.minicolors.min.js"></script>
+        <script async src="led_color_picker_example.js"></script>
+        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.4/jquery.minicolors.css" />
+        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
+    </head>
+    <body>
+        <h1>LED color picker demo!</h1>
+        <input id="colorPicker" type=text/>
+    </body>
+</html>
diff --git a/examples/static/led_color_picker_example.js b/examples/static/led_color_picker_example.js
@@ -0,0 +1,23 @@
+console.log("initializing color picker")
+var colorPicker = $('input#colorPicker');
+colorPicker.minicolors({
+    format: "rgb",
+    changeDelay: 200,
+    change: function (value, opacity) {
+        rgbObject = colorPicker.minicolors("rgbObject");
+        console.log(rgbObject);
+        $.ajax({
+            type: "POST",
+            url: "/ajax/ledcolor",
+            data: JSON.stringify(rgbObject),
+            contentType: "application/json; charset=utf-8",
+            dataType: "json",
+            success: function(data){
+                console.log("success!");
+            },
+            failure: function(errMsg) {
+                console.log("error! " + errMsg);
+            }
+        });
+    }
+});
