ayushsharma82 / webserial Goto Github PK

Hi!
Is there an easy way to decode the HTML so I can change it an re-encode it again?
I believe that is a bytearray right?

Thanks!

how is it possible to change the serial interface to port2 or 3 at ESP32. Keyword hardware serial

how to host webserial in static ip address? help me . thanks in advance

Basic Infos
Hello,

I have a problem in using WiFiManager at the same time as WebSerial in a Program, because the two libraries below are NOT compatible with each other..
used for WiFiManager : #include <ESP8266WebServer.h>
used for WebSerial : #include <ESPAsyncWebServer.h>
is there any way to be able to use both, or the functionality of both ?

Hardware
Esp8266

Hardware: Wemos-D1-mini

Core Version: Core 6.0.2·Home 3.4.2

Description
Problem description
see above

Settings in IDE
PlatformIO
Module: Wemos D1

Additional libraries:

Sketch
n.a.

Debug Messages
incompattible libraries

I am new to esp8266, just a free time hobby.
I wanted to create a webserial for a network of devices and i succeeded using the native library provided. I wish to add some customization to the webpage if possible to better control devices on the network.

I have done some researches before i decided to ask.
I believe webpage is stored const uint8_t WEBSERIAL_HTML[] PROGMEM and const uint32_t WEBSERIAL_HTML_SIZE is the arraysize of WEBSERIAL_HTML.

My hypothesis:
1.Gzip the html file
2.Run it through some file to hex converter.
3.Run it through some hex to uint8 converter.

I guess my method is somewhat flaws, i can't seem to make it work.
Mind teach me how you encoded yours? It is interesting to know.
A step by step guide is appreciated. I tried for days to figure out how you encoded yours.
Hope to hear from you, Its fine if this somewhat violate your IP on your works.

We're sorry but WebSerial doesn't work properly without JavaScript enabled. Please enable it to continue.
Use on PlatformIO Project.
platform = [email protected]
lib_deps =
ArduinoJson@>=6.0.0,<7.0.0
ESP Async WebServer@>=1.2.0,<2.0.0
AsyncMqttClient@>=0.8.2
WebSerial@>=1.0.0

Is there a way to get WebSerial and ElegantOTA together? I'm using a ESP32-S3

This part of programming is kinda out of my league. I did briefly one time get both to work at their respective IP address's but by calling
AsyncElegantOTA.begin(&server);

WebSerial.begin(&server);

but I can also see this is not the correct way.

Any help would be appreciated.

UPDATE: Of course now it seems to be working although I can here the USB connecting and disconnecting every few seconds. When the ESP32 is just on battery power it appears to be all working although I'm still not convinced I am calling the function correctly.

Hi, do you have any plans to include printf ?
Or is there a trick to avoid having to replace the many printf statements I already have in my code ?

How did you create webserial_webpage.h? Could you add the source in for that?

how do you generate the new eeprom html contents? (I want to add some custom serial commands)

everything is very clean looking btw :)

Any tips on how i could implement basic auth?

Hi,

is there a way to check if the WebSerial.println or WebSerialPro.println still has room for buffering more characters?

best regards Stefan

The ESP32 and ESP8266 support printf statements and it would be great if this library could support those also.
Do you see any possibilities to implement that?

I would like to suggest adding browserbased timestamps for each newline. This would be very usefull in some cases without the need do add it manually to every line via additional Webserial.print command.

Hi.
I found that when I sent more messages via print in short time, some of them are lost. Is there any limitation about sending messages? Here is demo:

void loop() {
  for (byte i = 0; i<10; i++) {
    WebSerial.print("test ");
    WebSerial.print(i);
    WebSerial.println();
  }
  delay(5000);
}

It should write ten lines, but only 3 is written, as you can see below

I have noticed that each call to WebSerial.println leaks about 20 of Heap. Once the browser connects it then leaks about 40. When the browser disconnects about 900 is lost. See test programme which builds on the example:

`/*
WebSerial Demo

This example code works for both ESP8266 & ESP32 Microcontrollers
WebSerial is accessible at your ESP's /webserial URL.

Author: Ayush Sharma
Checkout WebSerial Pro: https://webserial.pro
*/
#include <Arduino.h>
#if defined(ESP8266)
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#elif defined(ESP32)
#include <WiFi.h>
#include <AsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>
#include <ESPAsyncWiFiManager.h> // https://github.com/alanswx/ESPAsyncWiFiManager

#include <WebSerial.h>

AsyncWebServer server(80);

const char* ssid = ""; // Your WiFi SSID
const char* password = ""; // Your WiFi Password

/* Message callback of WebSerial /
void recvMsg(uint8_t data, size_t len) {
WebSerial.println("Received Data...");
Serial.printf("Received Data... [%d] ", ESP.getFreeHeap());
String d = "";
for (int i = 0; i < len; i++) {
d += char(data[i]);
}
WebSerial.println(d);
Serial.printf(" %s [%d]\n", d.c_str(), ESP.getFreeHeap());
}

void setup() {
Serial.begin(115200);
Serial.println("Starting Wifi...");
DNSServer dns;
AsyncWiFiManager wifiManager(&server, &dns);
if (!wifiManager.autoConnect())
{
Serial.println("wifiManager.autoConnect() failed to connect - restarting ESP");
delay(3000);
ESP.restart();
delay(5000);
}
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
// WebSerial is accessible at "/webserial" in browser
WebSerial.begin(&server);
/* Attach Message Callback */
WebSerial.msgCallback(recvMsg);
server.begin();
Serial.printf("Setup complete [%d]\n", ESP.getFreeHeap());
}

void loop() {

static uint32_t    _AtStart = ESP.getFreeHeap();
static unsigned int _lastSend;
static uint32_t    _After = 0;
static uint32_t    _Before = 0;    
static uint32_t    _SinceStart = 0;

if (millis() - _lastSend > 5000)
{
    _Before = ESP.getFreeHeap();
    Serial.printf("Last WebSerial Call [%d] Lost Since [%d]\n", _After, _After - _Before);
    Serial.printf("Before WebS [%d] ", _Before);
    WebSerial.println(ESP.getFreeHeap());
    _After = ESP.getFreeHeap();
    Serial.printf("After WebS [%d] Lost [%d] \n", _After, _Before - _After);
    Serial.printf("At Start [%d] Lost Since Start [%d] Lost this iteration [%d]\n", _AtStart, _AtStart - _After, (_AtStart - _After) - _SinceStart);
    _SinceStart = _AtStart - _After;
    _lastSend = millis();
}

}`

i want to edit Webpage for WebSerial
and i found this

https://github.com/ayushsharma82/WebSerial/blob/master/src/webserial_webpage.h

What is the sequence of numbers in const uint8_t WEBSERIAL_HTML[] PROGMEM for?

When executing the following code:
WebSerial.println(WiFi.localIP());
//delay(500);
WebSerial.println("joe was here");
// delay(500);
WebSerial.println("this is now");

The output is:

When executing the following code:
WebSerial.println(WiFi.localIP());
delay(500);
WebSerial.println("joe was here");
delay(500);
WebSerial.println("this is now");

The output is:

It appears that subsequent WebSerial.println commands overwrite the previous WebSerial.println command if there is an insufficient delay. It would be expected that no delay should be necessary.

Would be nice to add a password protection to the WebSerial Portal like on ElegantOTA

Thanks for providing the WebSerial solution!
The issue is OTA fails if a WebSerial webpage is open.
Maybe a WebSerial.stop() functionality which closes the WebUI would be sufficient.
Thanks
CPH

I am getting all sorts of strange characters when using the message callback feature.

16:44:51.982 -> Message received: test it?�⸮⸮?xV⸮⸮
16:45:11.666 -> Message received: test⸮.⸮?�
16:45:17.775 -> Message received: asdfkjasfasfajsd;fjsadklfa⸮

What can I do to get a clean message to cause commands? I am following the specific example that was provided.

Is it possible to stream the serial monitor data?

For example, I would like to drop this library into an existing project and get all Serial.println("...") sent and displayed in the WebSerial page.

request a new method "onConnect()" that can accept a char * or const char * which will output a c-string or string literal when users connect to /webserial

From what i see there is no way to Force close Webserial Socket once open, This leads to OTA functions not working correctly
Shown Below is the errors i get while webserial is running(Client connected or not) from the USB Serial.

Error[4]: End Failed
Start updating sketch
Progress: 0%
Error[2]: Connect Failed
Error[4]: End Failed
Start updating sketch
Progress: 0%
Error[2]: Connect Failed
Error[4]: End Failed
Start updating sketch
Progress: 0%
Error[2]: Connect Failed
Error[4]: End Failed
Start updating sketch
Progress: 0%
Error[2]: Connect Failed
Error[4]: End Failed
Start updating sketch
Progress: 0%
Error[2]: Connect Failed
Error[4]: End Failed
Start updating sketch
Progress: 0%
Error[2]: Connect Failed
Error[4]: End Failed

So in this block i want to close Webserial so OTA can work(Shown Below)

ArduinoOTA
  .onStart([]() {
    String type;
    if (ArduinoOTA.getCommand() == U_FLASH)
      type = "sketch";
    else // U_SPIFFS
      type = "filesystem";

    // NOTE: if updating SPIFFS this would be the place to unmount SPIFFS using SPIFFS.end()
    Serial.println("Start updating " + type);

    //Would also like a way to check if Webserial is running currently
    if (WebSerial.IsRunning()==true) {
     WebSerial.CloseConnection(); //close Connection so i have to recall "WebSerial.begin(&server);"
      //OR
     WebSerial.PauseConnection(5); //A pause for X world work as well however i would prefer to close and begin Webserial
    }
    
  })

Thank you for making this modern utility accessible!
Absolute URLs are used in multiple locations of the front-end. This makes the interface inaccessible in several use-cases where the device needs to be behind a NAT(for example, with a reverse-proxy).

Replacing these with relative URLs would make the interface work in such cases.

Example:
WebSocket URL is defined in this way: "ws://" + document.location.host + "/webserialws" . document.location.host needs to be replaced here with document.location.host + document.location.port + document.location.pathname.

I could submit a PR with all the required changes, but the front-end is minified and it wouldn't make sense to submit a PR over minified content.

I'm trying to build a sketch for NodeMCU using PubSubClient for MQTT and WebSerial libraries.
I'm using the following libraries:
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <AsyncElegantOTA.h>
#include <WebSerial.h>
#include <PubSubClient.h>

When I'm enabling WebSerial library, I'm receiving the following error:
D:\Arduino\ESP8266_Async_Demo\ESP8266_Async_Demo.ino: In function 'void setup()':
ESP8266_Async_Demo:36:22: error: 'callback' was not declared in this scope; did you mean 'calloc'?
36 | client.setCallback(callback);
| ^~~~~~~~
| calloc
Multiple libraries were found for "Hash.h"
Used: C:\Users\home\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\3.0.2\libraries\Hash
Not used: D:\Arduino\libraries\AsyncElegantOTA
exit status 1
'callback' was not declared in this scope; did you mean 'calloc'?

Could you please check how to make webserial library working with PubSubClient library?

#include <WebSerial.h> causes the Arduino compiler to give an error with all my functions that are located after the main loop(). The compiler is happy when the functions are defined before the main loop().

E.g. this gives a compile error:

#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <WebSerial.h>

AsyncWebServer server(80);

const char* ssid = "wifi"; // Your WiFi SSID
const char* password = "128bitwepison"; // Your WiFi Password
int count;

void printCount(){
WebSerial.println(count++);
}

void recvMsg(uint8_t *data, size_t len){
WebSerial.println("Received Data...");
String d = "";
for(int i=0; i < len; i++){
d += char(data[i]);
}
WebSerial.println(d);
}

void setup() {
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
Serial.printf("WiFi Failed!\n");
return;
}
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
// WebSerial is accessible at "/webserial" in browser
WebSerial.begin(&server);
WebSerial.msgCallback(recvMsg);
server.begin();
}

void loop() {
printCount();
delay(1000);
}

void printCount(){
WebSerial.println(count++);
}

Hey,

I want to make a small PR to fix warnings.

How do I build this library directly, as a "stand-alone project", not as a dependency of other (PlatformIO) project?

I want to embed WebSerial in my ui webpage without having to display it in WebSerial's webpage, how do I do that?

I want to change the way the webserial webpage looks. I'd like a more efficient layout (less margins on top, bottom and sides.) Also, while the word at the top "Webserial" and its logo are cool, I'd like them to be much smaller.

Can you publish the source code that created the webserial_webpage.h?

Thanks, Mark.

Hello, I would like to send a message to the ESP32 by composing a URL, like <ip_address>/webserial/message=<my_message>
Is it possible anyhow?
Thank you,
GA

If I try to use the library with Wifimanager I get error:
previous declaration 'httpmethod http_any' enum httpmethod { http_any, http_get, http_head, http_post, http_put, http_patch, http_delete, http_options };

There is a way to use it with Wifimanager?

WebSerial.println(WiFi.localIP());

i am trying to print local ip in webserial but it result 314747072

in serial moniter printing localip correctly 192.168.194.18

i dont know whats the issue

Thanks for providing WebSerial.
It is a beautiful abstraction layer for Websocket based communication.
My current use case is a remote console for editing ESP device configuration parameters over the network.
As others already mentioned in issues #56 and #58, I also felt a need for some small UI changes.
Unfortunately I have no glue about how to change the Vue framework solution in WebSerials /ui source files.
So I strived for a solution with just a few lines of Javascript ...
Eventually I added the necessary parameters for WebSerial.begin() and provided an example for a remote console.
I guess it is not as robust as the original Vue framework solution, but may be acceptable for hobbyists like me.

My proposal may be found in fork https://github.com/tinkering4fun/WebSerial-Custom-HTML

Best regards
Werner

Screenshot

I have an ESP32S3 with a W5500 ethernet module, I can only get this to work with Arduino V3.0.0.0 alpha3.
I can't get the async libraries to compile with V3.x and wondered if you could help?
Thanks

First of all - love WebSerial, it's extremely useful!

I did stumble upon a very nasty bug, wonder if it's just me or it's a legit one:
I accidentally discovered that if you send a command via WebSerial input and the command is 8 or 16 or 32 chars in length, this sometimes completely crashes the microcontroller and causes it to reboot. To replicate:

1. Use ESP2866 (mine is NodeCMU ESP12E)
2. Open example "Demo" from the WebSerial package
3. Configure WiFi credentials and compile
4. Open WebSerial in the browser
5. Try spamming any of these into the input field and pressing Enter:

12345678 (8 chars)
1234567812345678 (16 chars)

At some point the console will stop responding and the microcontroller crashes and reboots. After a reboot the same command can be sent several times and it will crash ESP8266 over and over again.

This only happens with 8/16 etc-long commands. Any idea why?

Hey, is it possible to resize the Serial window longer than 8 lines. I can see in the code where it is limited to 8 lines, but am uncertain how to go about re-compiling. On a desktop machine, I can simply re-size the window by dragging the lower right corner. I can see no way to do this on my mobile device? (The serial display uses less than 1/3 of my device screen, it would be nice to use more of my display.) Might it be possible to add a variable to the webserial_webpage.h file (or, the WebSerial.cpp), to allow the user to set the number of window lines? (Make it a Pro feature, & I would certainly donate for the Pro Version, as, I believe would a lot of others.)

When I try to compile the example, I get this error:

In file included from /home/mark/Arduino/libraries/WebSerial/src/WebSerial.h:20:0, from /home/mark/Arduino/libraries/WebSerial/examples/Demo/Demo.ino:19: /home/mark/Arduino/libraries/WebSerial/src/webserial_webpage.h:1915:1: error: scalar object 'WEBSERIAL_HTML' requires one element in initializer }; ^

I think you must count the lines, if you add a line to 'textArea.value' and after 200 Lines or so you must delete lines from the beginning.

Hi, thx for this great work.

I purchased the Pro version and I wonder if there is any option to send special characters like ^C or so over the textbox. I'm using the webserial on an ESP32 to directly interface a PC over a serial port, giving me a login to the PC. Login and password prompt works as expected, so do all commands that terminate. If I do a simple ping X.X.X.X , it obviously does never terminate automatically, so I wonder if I could send ^C eg. over the textbox.

Is this possible and if yes, how? Can this be integrated somehow if it is not there already?
thx

I'm using Arduino IDE 2.3.2 - controlling a OSOYOO V2.1 Robot Car which I believe has an Adruino Uno board with ESP8266

Followed the steps in the readme and get the following error when try to compile

In file included from C:\1Work\WebSerialDemo\WebSerialDemo.ino:18:0:
c:\Users\scott\OneDrive\Documents\Arduino\libraries\ESP_Async_WebServer\src/ESPAsyncWebServer.h:26:10: fatal error: functional: No such file or directory
#include
^~~~~~~~~~~~
compilation terminated.
exit status 1

Compilation error: exit status 1

Any ideas ?

Hello Ayush, which WebSerial.print command can be applied to clear the WebSerial screen programmatically? Thank you for any feedback or help!

it always gives http error 500 (internal server error)

libraries and cores used:
ESP32-arduino 1.0.1 (core)

ESPAsiyncWebServer direct download from here: https://github.com/me-no-dev/ESPAsyncWebServer

AsyncTCP direct download from here https://github.com/me-no-dev/AsyncTCP

am i using the wrong libraries?

It would be really nice if webserial could, at least minimally,, support ANSI colors.

Thanks, Mark.

When I try to compile my project, I get the below following error:

.pio\libdeps\esp01_1m_debug\WebSerial\src\WebSerial.cpp:18:17: error: 'DEBUG_WEB_SERIAL' was not declared in this scope; did you mean 'DEBUG_GENERIC'?

I've tracked it down to the following code: (several others are similar as well)

#if defined(DEBUG)
  DEBUG_WEB_SERIAL("Received Websocket Data");
#endif

The problem is, that in both the header and source files, there is a #ifdef..#endif block around the declaration/definition of DEBUG_WEB_SERIAL() method.

// h source
#if defined(WEBSERIAL_DEBUG)
    void DEBUG_WEB_SERIAL(const char* message);
#endif

// cpp source
#if defined(WEBSERIAL_DEBUG)
    void WebSerialClass::DEBUG_WEB_SERIAL(const char* message){
        Serial.println("[WebSerial] "+message);
    }
#endif

The fix for this is simple enough. Change the #if defined(DEBUG) tests to #if defined(WEBSERIAL_DEBUG) to match the declarations. If needed, I can do a pull request for it but am I really the only one that has had this problem to date?

Let me know,

Hi, Great work of providing webserial for ESP32 & ESP8266.
But how to keep receiving webserial output data in python ?
Websocket example ?
Richard

hello, thanks for this great software! is it possible to change the font to a monospaced type? best regards
andreas

Hi,
from some weeks already, I cannot compile anymore my own software which was working well 1 month ago.
Even the simple demo version here cannot be compile anymore. Seems some issues with some dependent libraries.
Always got undefined reference:
c:/users/gfama/appdata/local/arduino15/packages/esp32/tools/xtensa-esp32-elf-gcc/gcc8_4_0-esp-2021r2-patch3/bin/../lib/gcc/xtensa-esp32-elf/8.4.0/../../../../xtensa-esp32-elf/bin/ld.exe: C:\Users\gfama\OneDrive\Documents\Arduino\libraries\ESPAsyncWebServer-master\src/AsyncWebSocket.cpp:1273: undefined reference to SHA1Update'** c:/users/gfama/appdata/local/arduino15/packages/esp32/tools/xtensa-esp32-elf-gcc/gcc8_4_0-esp-2021r2-patch3/bin/../lib/gcc/xtensa-esp32-elf/8.4.0/../../../../xtensa-esp32-elf/bin/ld.exe: C:\Users\gfama\OneDrive\Documents\Arduino\libraries\ESPAsyncWebServer-master\src/AsyncWebSocket.cpp:1274: undefined reference to SHA1Final'
c:/users/gfama/appdata/local/arduino15/packages/esp32/tools/xtensa-esp32-elf-gcc/gcc8_4_0-esp-2021r2-patch3/bin/../lib/gcc/xtensa-esp32-elf/8.4.0/../../../../xtensa-esp32-elf/bin/ld.exe: libraries\ESPAsyncWebServer-master\WebAuthentication.cpp.o:(.literal._ZL6getMD5PhtPc+0x4): undefined reference to mbedtls_md5_starts' c:/users/gfama/appdata/local/arduino15/packages/esp32/tools/xtensa-esp32-elf-gcc/gcc8_4_0-esp-2021r2-patch3/bin/../lib/gcc/xtensa-esp32-elf/8.4.0/../../../../xtensa-esp32-elf/bin/ld.exe: libraries\ESPAsyncWebServer-master\WebAuthentication.cpp.o: in function getMD5(unsigned char, unsigned short, char)':
C:\Users\gfama\OneDrive\Documents\Arduino\libraries\ESPAsyncWebServer-master\src/WebAuthentication.cpp:73: undefined reference to `mbedtls_md5_starts'

Any idea ? I tried to downgrade board ESP32, all dependent libraries, cannot find the reason.

Thanks,

Laurent