Need help understanding sprintf() to draw a graph using ESP8266 & Arduino

Projects Programming
1

I am using an Arduino as greenhouse controller and an ESP8266 to provide a web interface (IOT ftw). The arduino sends 60 temperature data points to the ESP8266 which stores it in an array called tempDataArray(). The code is basically the ESP8266WebServer example sketch called AdvancedWebServer. One of the things I liked about this example code is that it generates a bunch random data points and creates a graph from the data (see the first pic), which i thought would be cool if i could re purpose it to show the temperatures in the greenhouse throughout the day. Unfortunately i can't seem to make sense of what exactly is going on with the code. What i tried to do is pull data from the array instead of using rand(). This didn't quite work as I planned (see second pic). the full code is attached and the function in question is shown below. I added my stuff below the original code.

void drawGraph() {
  getTempData();
 
  String out = "";
  char temp[100];
  out += "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"375\" height=\"140\">\n";
  out += "<rect width=\"375\" height=\"140\" fill=\"rgb(250, 230, 210)\" stroke-width=\"1\" stroke=\"rgb(0, 0, 0)\" />\n";
  out += "<g stroke=\"black\">\n";
 /*
// ------- Original Code-------//

  int y = rand() % 130;
  for (int x = 10; x < 390; x+= 10) {
  	int y2 = rand() % 130;
  	sprintf(temp, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke-width=\"1\" />\n", x, 140 - y, x + 10, 140 - y2);
  	out += temp;
  	y = y2;
  }
  */ 
// ------- my Code-------//
 
  int j = 0;
  int y = tempDataArray[j];
  for (int x = 10; x < 390; x += 10)
  {
    ++j;
    int y2 = (tempDataArray[j]);
    sprintf(temp, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke-width=\"1\" />\n", x, 140 - y, x + 10, 140 - y2);
    out += temp;
    y = y2;

  }
 


  out += "</g>\n</svg>\n";

  server.send ( 200, "image/svg+xml", out);
}

So the questions are: how is sprintf function working to help create the graph? what do I need to change to make it display my data?

Next, I am getting the following error messages while it compiles:

AdvancedWebServer1.ino:67:34: warning: backslash and newline separated by space [enabled by default]
AdvancedWebServer1.ino:69:30: warning: backslash and newline separated by space [enabled by default]
AdvancedWebServer1.ino: In function 'void handleRoot()':
AdvancedWebServer1.ino:57:1: warning: unknown escape sequence: '\T' [enabled by default]

I think it has to do with my terrible/non-existent html skills. the program seems to compile and upload fine so i am not too concerned, but it would be great someone could shed some light on that.

with_rand().PNG

tempDataArray.PNG

AdvancedWebServer1.ino (6.87 KB)

2

So the questions are: how is sprintf function working to help create the graph?

It is generating a command that some system understands. Why not print the data in temp to see what the command looks like each way?

3

Did you enable the line numbers ? It is in the settings.
The compiler has trouble with lines 57, 69, 69. Those are all the very long string, which is using multiple lines. So there must be something wrong with it.

You can use either the double quotes for each line of text, or the backslash at the very end of each line.
In a few places, there is a space after the backslash, the compiler is complaining about that.
The line "

\Temperature: %02d" is very weird because of the "\T", the compiler is also complaining about that.

4

So the problem with the graph was the data was either not being entered into the array or retrieved properly, maybe both. I spent some time tweaking it and got it to work.

The compiler warnings were in fact caused by those long strings mainly because I put blackslashes in the middle where they don't belong.

Thanks for the help!