Skip to content

Commit 83d1525

Browse files
mscostimscosti
committed
add in example static asset serving with ajax call LED color changing
1 parent 5bd6c86 commit 83d1525

3 files changed

Lines changed: 61 additions & 23 deletions

File tree

‎examples/esp32spi_server.py‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,24 @@
88

99
import neopixel
1010

11+
12+
# This example depends on the 'static' folder in the examples folder
13+
# being copied to the root of the circuitpython filesystem.
14+
# This is where our static assets like html, js, and css live.
15+
16+
1117
# Get wifi details and more from a secrets.py file
1218
try:
1319
from secrets import secrets
1420
except ImportError:
1521
print("WiFi secrets are kept in secrets.py, please add them there!")
1622
raise
1723

24+
try:
25+
import json as json_module
26+
except ImportError:
27+
import ujson as json_module
28+
1829
print("ESP32 SPI simple web server test!")
1930

2031
esp32_cs = DigitalInOut(board.D10)
@@ -41,42 +52,32 @@
4152
server = server.server(80, debug=False)
4253

4354

44-
def onLedHigh(headers, body, client):
55+
def onLedHigh(headers, body, client): # pylint: disable=unused-argument
4556
print("led on!")
46-
print("headers: ", headers)
47-
print("body: ", body)
4857
status_light.fill((0, 0, 100))
49-
respond(headers, body, client)
58+
server.serve_file("static/index.html")
5059

51-
def onLedLow(headers, body, client):
60+
def onLedLow(headers, body, client): # pylint: disable=unused-argument
5261
print("led off!")
53-
print("headers: ", headers)
54-
print("body: ", body)
5562
status_light.fill(0)
56-
respond(headers, body, client)
57-
58-
def respond(headers, body, client):
59-
print("headers: ", headers)
60-
print("body: ", body)
61-
62-
client.write(b"HTTP/1.1 200 OK\r\n")
63-
client.write(b"Content-type:text/html\r\n")
64-
client.write(b"\r\n")
63+
server.serve_file("static/index.html")
6564

66-
client.write(b"Click <a href=\"/H\">here</a> turn the LED on!!!<br>\r\n")
67-
client.write(b"Click <a href=\"/L\">here</a> turn the LED off!!!!<br>\r\n")
68-
69-
client.write(b"\r\n")
65+
def onLedColor(headers, body, client): # pylint: disable=unused-argument
66+
rgb = json_module.loads(body)
67+
print("led color: " + rgb)
68+
status_light.fill((rgb.get("r"), rgb.get("g"), rgb.get("b")))
69+
client.write(b"HTTP/1.1 200 OK")
7070
client.close()
7171

72-
server.on("GET", "/", respond)
72+
server.set_static_dir("/static")
7373
server.on("GET", "/H", onLedHigh)
7474
server.on("GET", "/L", onLedLow)
75+
server.on("POST", "/ajax/ledcolor", onLedColor)
7576

7677

77-
print("IP addr: ", esp.pretty_ip(esp.ip_address))
78+
print("open this IP in your browser: ", esp.pretty_ip(esp.ip_address))
7879

7980
server.start()
80-
print("server started!")
81+
8182
while True:
8283
server.update_poll()

‎examples/static/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.4/jquery.minicolors.min.js"></script>
6+
<script async src="led_color_picker_example.js"></script>
7+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.4/jquery.minicolors.css" />
8+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
9+
</head>
10+
<body>
11+
<h1>LED color picker demo!</h1>
12+
<input id="colorPicker" type=text/>
13+
</body>
14+
</html>

‎examples/static/led_color_picker_example.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
console.log("initializing color picker")
2+
var colorPicker = $('input#colorPicker');
3+
colorPicker.minicolors({
4+
format: "rgb",
5+
changeDelay: 200,
6+
change: function (value, opacity) {
7+
rgbObject = colorPicker.minicolors("rgbObject");
8+
console.log(rgbObject);
9+
$.ajax({
10+
type: "POST",
11+
url: "/ajax/ledcolor",
12+
data: JSON.stringify(rgbObject),
13+
contentType: "application/json; charset=utf-8",
14+
dataType: "json",
15+
success: function(data){
16+
console.log("success!");
17+
},
18+
failure: function(errMsg) {
19+
console.log("error! " + errMsg);
20+
}
21+
});
22+
}
23+
});

0 commit comments

Comments
 (0)