Display information received by serial port with webserver

Hello everybody,

I want to show data received by serial port in a webpage. I have looked at the webserver example from ethernet but being not the best programmer I can't figure out how to show serial data. I have a arduino uno r3 with a ethernetshield (wiz5100). Does anyone have an idea?

Thanks in advance,

Doppie

Read and parse the serial data in every loop() round, then put it out instead of the digital and analog inputs that are currently in the example.

If you experience problems, post the code that you have and we try to point you to the problems.

Hello Pylon,

What I.m trying to do is to show a smart meter telegram (a couple off lines of text and digits coming through serial) in a webpage. In the attached sketch I have used a Mega. Now it will only show 1 digit. How can I show the whole telegram?

Thanks,

Doppie

WebServer_serial.ino (2.75 KB)

You will likely get more help if you follow the guidelines and post your code using the code tags (</>)

The main problem with your code is that you only allow it to read one byte from serial each time you refresh the webpage. You need to read in serial data outside the “if (client) {” loop and send a completed string to each client. The data from serial also arrives at random times compared with the web page fetches.

Something like this (not compiled so might have errors)

String completed_line,current_line;


void loop() {
   if (Serial2.available()) {
     char s=Serial2.read();
     if (s == '\n') { // end of line so transfer to completed_line and reset current_line
       completed_line=current_line;
       current_line="";
     } else { // just add the new character to the end of the current_line string.
       current_line+=s;
     }
     EthernetClient client = server.available();
 if (client) {
        // your code here
           client.println("<html>");
        // now insert the last complete line received from serial2
          client.println(completed_line)
          client.println("
");
          client.println("</html>");
        // etc etc
        
        };
   };

This code will only display the last complete line (ending with unix end-of-line character). If your serial message is more than one line you will have to modify the serial read code to properly handle this.

Hi,

I found this sketch:

#include <SPI.h>
#include <Ethernet.h>

// assign a MAC address for the Ethernet controller.
byte mac = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xEE};
// assign an IP address for the controller:
IPAddress ip(192, 168, 1, 175);
EthernetServer server(80);

char inputString[900];// a string to hold incoming data
int x = 0;//counter for incoming data
boolean lastline = false; //lastline of incoming data
boolean Update = false; // Flag when a full message is received

void setup() {

// start the Ethernet connection and the server:
Ethernet.begin(mac, ip);
server.begin();

// initialize serial:
Serial.begin(115200);

// give the sensor and Ethernet shield time to set up:
delay(1000);

}

void loop() {
EthernetClient client = server.available(); // gets client object if available and put it in the var
client.flush(); //flush input buffer if there is any data
//looks like domoticz is not sending data only setting up the connection. Therefore you need to start
//sending data to all connected clients every set interval.Not wait for a request.

//only send data if P1 message is fully updated. Every 10 seconds
if (Update == true){
server.write(inputString);
Serial.write(inputString);
Update = false;
}
// }
}

void serialEvent() {
while (Serial.available()) {
// get the new byte
char inChar = (char)Serial.read();
// add it to the inputString:
inputString= inChar;
x += 1;
//When ! is received continue until end of line and start over filling the var, the ! is followed by an CRC. Used by Domoticz.
if (inChar == ‘!’) {
lastline = true;
}
if (inChar == ‘\n’ && lastline == true){
lastline = false;
x = 0;
Update = true;
}
}
}

Now after a little while the so called telegram appears in the browser but you have to scroll down as it prints the new telegram under the telegram received prior to the new one. Does anyone have an idea to have it print over the old telegram?

Does anyone have an idea to have it print over the old telegram?

Act as a web server.

Your sketch (BTW, you still forgot to use the code tags, it the button “</>” in the editor) is a simple TCP server (sometimes called Telnet server) listening on port 80 but it doesn’t use the HTTP protocol.