Browse Source

The first commit.

master
Martins Eglitis 2 years ago
commit
802b3bd27f
8 changed files with 247 additions and 0 deletions
  1. +19
    -0
      README.md
  2. +149
    -0
      chewbacca.ino
  3. +79
    -0
      data/index.html
  4. BIN
      data/pattern_1.png
  5. BIN
      data/pattern_2.png
  6. BIN
      data/pattern_3.png
  7. BIN
      data/pattern_4.png
  8. BIN
      data/pattern_5.png

+ 19
- 0
README.md View File

@@ -0,0 +1,19 @@
# Chewbacca

An ESP8266 based webserver and a web-app.

## Requirements

- Wifi
- WifiClient
- WebServer
- FS
- mDNS (optional)

## Setup

Choose your board from arduino board manager. Follow the instruction given in [the FS plugin website](https://github.com/esp8266/arduino-esp8266fs-plugin) to install the filesystem and flash / link files under the `data` directory. From this point on, the development of the server and the app becomes easy because of the actaul filesystem concept underneath. By default, the app uses the HTTP/1.1 protocol (port 80) to communicate with the server and the static resource (images) requests are routed internally by the server.

## Result

If you've set it up correctly, 5 default robot emotions should be received when making a request to the respective IP (or FQDN). When clicking on the emotions, respective AJAX requests are made to the server. The default internal AJAX routes are intentionally empty placeholders - it is up to the end-user to define them.

+ 149
- 0
chewbacca.ino View File

@@ -0,0 +1,149 @@
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include "FS.h"

ESP8266WebServer server(80);

void mainLoadRoute()
{
SPIFFS.begin();
File f = SPIFFS.open("/index.html", "r");
server.streamFile(f, "text/html");
int filesize = f.size();
SPIFFS.end();

String WebString = "";
WebString += "HTTP/1.1 200 OK\r\n";
WebString += "Content-Type: text/html; charset=utf-8\r\n";
WebString += "Content-Length: " + String(filesize) + "\r\n";
WebString += "\r\n";
server.send(200, "text/html", WebString);
}

void patternLoadRoute(const char *patternFilename)
{
SPIFFS.begin();
File f = SPIFFS.open(patternFilename, "r");
server.streamFile(f, "image/png");
int filesize = f.size();
SPIFFS.end();

String WebString = "";
WebString += "HTTP/1.1 200 OK\r\n";
WebString += "Content-Type: image/png\r\n";
WebString += "Content-Length: " + String(filesize) + "\r\n";
WebString += "\r\n";
server.send(200, "text/html", WebString);
}

void patternLoad1Route()
{
patternLoadRoute("/pattern_1.png");
}

void patternLoad2Route()
{
patternLoadRoute("/pattern_2.png");
}

void patternLoad3Route()
{
patternLoadRoute("/pattern_3.png");
}

void patternLoad4Route()
{
patternLoadRoute("/pattern_4.png");
}

void patternLoad5Route()
{
patternLoadRoute("/pattern_5.png");
}

void patternAction1Route()
{
}

void patternAction2Route()
{
}

void patternAction3Route()
{
}

void patternAction4Route()
{
}

void patternAction5Route()
{
}

void notFoundRoute()
{
String message = "File Not Found\n\n";
message += "URI: ";
message += server.uri();
message += "\nMethod: ";
message +=(server.method() == HTTP_GET) ? "GET" : "POST";
message += "\nArguments: ";
message += server.args();
message += "\n";

for(uint8_t i = 0; i < server.args(); i++) {
message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
}

server.send(404, "text/plain", message);
}

void setup(void)
{
Serial.begin(115200);
WiFi.begin(ssid, password);

Serial.println("");

// Wait for connection
while(WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}

Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());

if(MDNS.begin("esp8266")) {
Serial.println("MDNS responder started");
}

server.on("/", mainLoadRoute);

server.on("/data/pattern_1.png", patternLoad1Route);
server.on("/data/pattern_2.png", patternLoad2Route);
server.on("/data/pattern_3.png", patternLoad3Route);
server.on("/data/pattern_4.png", patternLoad4Route);
server.on("/data/pattern_5.png", patternLoad5Route);

server.on("/pattern/1", patternAction1Route);
server.on("/pattern/2", patternAction2Route);
server.on("/pattern/3", patternAction3Route);
server.on("/pattern/4", patternAction4Route);
server.on("/pattern/5", patternAction5Route);

server.onNotFound(notFoundRoute);

server.begin();
}

void loop(void)
{
server.handleClient();
}

+ 79
- 0
data/index.html View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mans Robots</title>
<meta name="author" content="Mans Robots">
<meta name="description" content="Mans Robots">
<meta name="keywords" content="mans robots, robots, iRobot">

<style>
body {
margin:0;
padding:0;
}
img {
width: 100%;
display: block;
}
td {
padding: 0px;
margin: 0px;
box-sizing: border-box;
border: 2px solid;
}
</style>
</head>
<body>
<table>
<tr>
<td id="1" class="container" onclick="setPattern(1);"><img src="data/pattern_1.png" /></td>
<td id="2" class="container" onclick="setPattern(2);"><img src="data/pattern_2.png" /></td>
</tr>
<tr>
<td id="3" class="container" onclick="setPattern(3);"><img src="data/pattern_3.png" /></td>
<td id="4" class="container" onclick="setPattern(4);"><img src="data/pattern_4.png" /></td>
</tr>
<tr>
<td id="5" class="container"onclick="setPattern(5);"><img src="data/pattern_5.png" /></td>
</tr>
</table>
<script>
function setPattern(id)
{
var xhr = new XMLHttpRequest();
xhr.open("GET", "/pattern/" + id, true);
xhr.onload = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.send(null);

var containers = document.getElementsByClassName("container");

for (i = 0; i < containers.length; i++) {
var container = document.getElementById(containers[i].id);

if (containers[i].id == id) {
container.style.borderColor = "#64A70B";
} else {
container.style.borderColor = "#FFFFFF";
}
}
}

window.onload = function () {
setPattern(1);
}
</script>
</body>
</html>

BIN
data/pattern_1.png View File

Before After
Width: 1063  |  Height: 1063  |  Size: 24 KiB

BIN
data/pattern_2.png View File

Before After
Width: 1063  |  Height: 1063  |  Size: 24 KiB

BIN
data/pattern_3.png View File

Before After
Width: 1063  |  Height: 1063  |  Size: 23 KiB

BIN
data/pattern_4.png View File

Before After
Width: 1063  |  Height: 1063  |  Size: 25 KiB

BIN
data/pattern_5.png View File

Before After
Width: 1063  |  Height: 1063  |  Size: 24 KiB

Loading…
Cancel
Save