const char *ssid = "xxxxzzxxxxxx";
const char *password = "xxxzxxxxxxxx";
/////////////////
float ardu1;
int ardu2;
AsyncWebServer server(80);
AsyncEventSource events("/events");
void setup() {
Serial.begin(115200);
WiFi.mode(WIFI_AP_STA);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Setting as a Wi-Fi Station..");
}
Serial.print("Station IP Address: ");
Serial.println(WiFi.localIP());
Serial.print("Wi-Fi Channel: ");
Serial.println(WiFi.channel());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send_P(200, "text/html", index_html);
});
server.addHandler(&events);
server.begin();
delay(4000);
}
void loop() {
ardu1 = ardu1 + 0.01;
ardu2 = random(1, 1234);
JSONVar myVal;
myVal["out1"] = ardu1;
myVal["out2"] = ardu2;
String jsonStr = JSON.stringify(myVal);
events.send(jsonStr.c_str(), "newVal", millis(), 5000);
events.send("ping", NULL, millis(), 5000);
}
```
---
### Author:  [@RichardDL](https://discourse.processing.org/u/RichardDL)
#### Post date: [May 3, 2023, 10:52pm UTC](https://discourse.processing.org/t/p5-js-with-esp8266-wifi/41889/2 "2023-05-03T22:52:42Z")
Hi @camperos. This is interesting, fun, and possibly useful. I’ve loaded it into an ESP8266 (Node MCU 0.9 (ESP-12 Module)). It’s using P5.js from the internet but in my utility projects I’ve always wanted them to be fully functional without the internet. Maybe the whole project uses the internet, then it doesn’t matter. I know the ESP has a filing system and it’s on my todo list to find how to use it. Maybe the .html, p5.js etc can go there.
With your code I saw the two values static for a few seconds, and then update several times rapidly. I put a 2 sec delay at the end of loop, now I have an update every 2 sec. I’ve never used ‘events.send’ before, haven’t yet Googled and understood what they do.
Thanks for posting.
---
### Author:  [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [May 3, 2023, 11:25pm UTC](https://discourse.processing.org/t/p5-js-with-esp8266-wifi/41889/3 "2023-05-03T23:25:22Z")
Hi
Maybe this useful
> **[GitHub - rwlloyd/p5-javascript-webserver: Demonstration of a webserver serving...](https://github.com/rwlloyd/p5-javascript-webserver)**
>
> Demonstration of a webserver serving a p5.js enabled webpage from an ESP8266 microcontroller. - GitHub - rwlloyd/p5-javascript-webserver: Demonstration of a webserver serving a p5.js enabled webpag...
---
### Author:  [@camperos](https://discourse.processing.org/u/camperos)
#### Post date: [May 4, 2023, 11:16am UTC](https://discourse.processing.org/t/p5-js-with-esp8266-wifi/41889/4 "2023-05-04T11:16:07Z")
thanks, I tried quickly for the little time I have now and I couldn’t see the result, it’s very complicated, I’ll try again in 8 hours and study it, the basis of the system seems to be identical
---
### Author:  [@RichardDL](https://discourse.processing.org/u/RichardDL)
#### Post date: [May 5, 2023, 10:04pm UTC](https://discourse.processing.org/t/p5-js-with-esp8266-wifi/41889/5 "2023-05-05T22:04:02Z")
After a while the the browser console started pouring out messages about insufficient resources. (And the browser was laggy on reload.) I moved
`var source;`
to above setup, and
```auto
source = new EventSource('/events');
source.addEventListener('newVal', function(e) {
const obj = JSON.parse(e.data);
arduVal1 = obj.v0.toFixed(2);
arduVal2 = obj.v1;
});
```
from draw to setup.
* * *
Working on Javascript buried in ESP code, in the Arduino IDE is not best. Compiling and loading into the ESP takes 62 seconds. That’s much too difficult and slow. So I moved the Javascript code to a file on a Raspberry Pi. It’s in directory where a node.js server is running. It can be edited with a Javascript editor. Save and reload takes a couple of seconds. This might not be what you want finally, but it’s better for development. The html for this is:
```auto
const char index_html[] PROGMEM = R"rawliteral(
)rawliteral";
```
If you want to try the game of life sketch.js from @jafal’s link it’s very quick to swap the sketch.js for a different one.
---
### Author:  [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [May 6, 2023, 12:01am UTC](https://discourse.processing.org/t/p5-js-with-esp8266-wifi/41889/6 "2023-05-06T00:01:29Z")
@camperos
More informations
[http://fabacademy.org/2020/labs/barcelona/students/benjamin-scott/week-12.html#using-the-wavemaker-example](http://fabacademy.org/2020/labs/barcelona/students/benjamin-scott/week-12.html#using-the-wavemaker-example)
> **[GitHub - gdsports/imu-wifi: Send IMU orientation data over WiFi](https://github.com/gdsports/imu-wifi#imu-to-p5js-over-web-sockets)**
>
> Send IMU orientation data over WiFi. Contribute to gdsports/imu-wifi development by creating an account on GitHub.
---
### Author:  [@camperos](https://discourse.processing.org/u/camperos)
#### Post date: [May 7, 2023, 7:52am UTC](https://discourse.processing.org/t/p5-js-with-esp8266-wifi/41889/7 "2023-05-07T07:52:13Z")
thanks for the reply,
insufficient resources (which happens on chrome and mobile) I think I solved it by introducing reception times and improving sending
## p5js side:
```auto
let interval
let previousMillis
....
function setup() {
...
interval = 5000;
previousMillis = 0;
}
function draw() {
let currentMillis = millis();
.....
if (currentMillis - previousMillis >= interval) {
source = new EventSource('/events');
source.addEventListener('newVal', function(e) {
const obj = JSON.parse(e.data);
arduVal1 = obj.out1.toFixed(2); // toFixed(2) = 2 decimal
arduVal2 = obj.out2;
});
previousMillis = currentMillis;
}
}
```
* * *
arduino side:
```auto
unsigned long previousMillis = 0;
const long interval = 5000;
.....
void loop() {
unsigned long currentMillis = millis();
if (currentMillis - previousMillis >= interval) {
events.send(jsonStr.c_str(), "newVal", millis(), 1);
events.send("ping", NULL, millis(), 1);
previousMillis = currentMillis;
}
}
```
---
### Author:  [@camperos](https://discourse.processing.org/u/camperos)
#### Post date: [May 7, 2023, 7:57am UTC](https://discourse.processing.org/t/p5-js-with-esp8266-wifi/41889/8 "2023-05-07T07:57:57Z")
hi jafal,
i couldn’t get “rwlloyd/p5-javascript-webserver” to work, i try again as soon as possible, but studying it i see that there is nothing sending values from esp8266 to p5js but maybe i saw wrong
---
### Author:  [@camperos](https://discourse.processing.org/u/camperos)
#### Post date: [May 8, 2023, 7:14am UTC](https://discourse.processing.org/t/p5-js-with-esp8266-wifi/41889/9 "2023-05-08T07:14:04Z")
hello, now I’m looking for how to P5js in simple mode … for example, turn on and off the led of esp8266 always with the eventsource system, I tried but for the moment I can’t, any ideas?
---
### Author:  [@RichardDL](https://discourse.processing.org/u/RichardDL)
#### Post date: [May 8, 2023, 10:44am UTC](https://discourse.processing.org/t/p5-js-with-esp8266-wifi/41889/10 "2023-05-08T10:44:10Z")
As I said, this sending events is new to me. Think you need to google for examples. I think I found a page that compared sending events with [socket.io](http://socket.io). Can’t find it now. Think it said you can’t send events from web-page to server. All my projects with RPi server and P5.js web-pages are based on [https://www.youtube.com/watch?v=bjULmG8fqc8&t=450s&pp=ygUXY29kaW5nIHRyYWluIG5vZGUganMgIzE%3D](https://www.youtube.com/watch?v=bjULmG8fqc8&t=450s&pp=ygUXY29kaW5nIHRyYWluIG5vZGUganMgIzE%3D) and use [socket.io](http://socket.io). Haven’t thought how ESP8266 might replace RPi in that scheme.
---
### Author:  [@camperos](https://discourse.processing.org/u/camperos)
#### Post date: [May 9, 2023, 5:25pm UTC](https://discourse.processing.org/t/p5-js-with-esp8266-wifi/41889/11 "2023-05-09T17:25:07Z")
I’ve read and you’re right, it’s only one way, however I keep trying new ways
---
### Author:  [@camperos](https://discourse.processing.org/u/camperos)
#### Post date: [May 10, 2023, 6:49pm UTC](https://discourse.processing.org/t/p5-js-with-esp8266-wifi/41889/12 "2023-05-10T18:49:17Z")
I succeeded, only one sketch to upload to esp8266 with arduino code and P5js code, it works and is bidirectional.
thanks to jafal for the links and RichardDL, if you want try it maybe the Rasp… clicking inside the circle the led turns on, clicking outside the circle the led turns off. it needs to be improved
```auto
//by camper0s
//////////////////////////////////////////////////////////////////////////html
const char index_html[] PROGMEM = R"rawliteral(
)rawliteral";
////////////////////////////////////////////////////////////////////arduino esp826
#include
#include "ESPAsyncWebServer.h"
#include "ESPAsyncTCP.h"
#include
const char *ssid = "xxxxxdfffvxxx";
const char *password = "xxxxxxxxcxfx";
float ardu1;
int ardu2;
unsigned long previousMillis = 0;
const long interval = 5000;
const char *in1 = "output";
const char *in2 = "state";
String inputMessage1;
String inputMessage2;
AsyncWebServer server(80);
AsyncEventSource events("/events");
void setup() {
Serial.begin(115200);
pinMode(LED_BUILTIN, OUTPUT);
WiFi.mode(WIFI_AP_STA);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Setting as a Wi-Fi Station..");
}
Serial.print("Station IP Address: ");
Serial.println(WiFi.localIP());
Serial.print("Wi-Fi Channel: ");
Serial.println(WiFi.channel());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send_P(200, "text/html", index_html);
});
server.on("/update", HTTP_GET, [](AsyncWebServerRequest *request) {
inputMessage1 = request->getParam(in1)->value();
inputMessage2 = request->getParam(in2)->value();
Serial.print("GPIO: ");
Serial.print(inputMessage1);
Serial.print(" - Set to: ");
Serial.println(inputMessage2);
request->send(200, "text/plain", "OK");
});
server.addHandler(&events);
server.begin();
delay(4000);
}
void loop() {
unsigned long currentMillis = millis();
ardu1 = ardu1 + 0.01;
ardu2 = random(1, 1234);
JSONVar myVal;
myVal["out1"] = ardu1;
myVal["out2"] = ardu2;
String jsonStr = JSON.stringify(myVal);
if (currentMillis - previousMillis >= interval) {
events.send(jsonStr.c_str(), "newVal", millis(), 1);
events.send("ping", NULL, millis(), 1);
previousMillis = currentMillis;
}
if (inputMessage1.toInt() == 0) {
digitalWrite(LED_BUILTIN, HIGH);
} else if (inputMessage1.toInt() == 1) {
digitalWrite(LED_BUILTIN, LOW);
}
}
```
---
### Author:  [@camperos](https://discourse.processing.org/u/camperos)
#### Post date: [May 16, 2023, 1:23pm UTC](https://discourse.processing.org/t/p5-js-with-esp8266-wifi/41889/13 "2023-05-16T13:23:15Z")
hello, I noticed that remotely on mobile that if I interact from chrome after 5 minutes it crashes, while from firefox it always works, sorry for the translated language