Can't use server.printP to publish values in html interface


#1

Hi all,

we would like to show current variables in a text box. Like:

webserver.printP ("test=%i", red_0);

For some reason it doesn’t work with a larger output. The code below stopped at POS.

webserver.printP( "<html><head><title>IAB Lightbox Control-Panel</title>"
    "<body>"
    "<h1>IAB Lightbox 2 Control-Panel</h1>"
    "<form action='/box' method='POST'>"
    "<p> Red: <input type='number' name='red_0' min='0' max='2000' value'%i'>", red_0);

Is there an easy way to do it?

In principle we use the browser to set values for the device and only want to retrieve those again in an easy manner.

Thanks in advance.

Cheers,

Silenz


#2

What Particle device are you targeting?


#3

Hi ScruffR,

thanks for your reply.

The device is a Particle P1.

Everything works actually except for displaying the set values in the input box of the html file, if I print everything without %i etc…


#4

AFAICT printP() is not the function you want to use.
For one, it is meant for PROGMEM based strings but Particle devices don’t have a dedicated PROGMEM.
Second, I don’t see it being meant for formatting strings.

Try webserver.printf() instead.


#5

My bad, with this I got a little bit further:

    server.printf(
      "<html><head><title>IAB Lightbox Control-Panel</title>"
    "<body>"
    "<h1>IAB Lightbox 6 Control-Panel</h1>"
    "<form action=\'/box\' method=\'POST\'>"
    "<p> Red in µm photons/(m*s): <input type=\'number\' name=\'red_0\' min=\'0\' max=\'2000\' value=\'%i\'>"
    /*"Green in µm photons/(m²*s): <input type='number' name='green_0' min='0' max='2000'value='green_0'>"
    "Blue in µm photons/(m²*s): <input type='number' name='blue_0' min='0' max='2000' value='blue_0'>"
    "Infrared in µm photons/(m²*s): <input type='number' name='infrared_0' min='0' max='2000' value='infrared_0'>"
    "White in µm photons/(m²*s): <input type='number' name='white_0' min='0' max='2000' value='white_0'>"
    "Timer in min: <input type='number' name='timer_0' min='0' max='600000' value='timer_0'> </p>"
    "<p> Red in µm photons/(m²*s): <input type='number' name='red_1' min='0' max='2000' value='red_1'>"
    "Green in µm photons/(m²*s): <input type='number' name='green_1' min='0' max='2000' value='green_1'>"
    "Blue in µm photons/(m²*s): <input type='number' name='blue_1' min='0' max='2000' value='blue_1'>"
    "Infrared in µm photons/(m²*s): <input type='number' name='infrared_1' min='0' max='2000' value='infrared_1'>"
    "White in µm photons/(m²*s): <input type='number' name='white_1' min='0' max='2000' value='white_1'>"
    "Timer in min: <input type='number' name='timer_1' min='0' max='600000' value='timer_1'></p>"
    "<p> Red in µm photons/(m²*s): <input type='number' name='red_2' min='0' max='2000' value='red_2'>"
    "Greenin µm photons/(m²*s): <input type='number' name='green_2' min='0' max='2000' value='green_2'>"
    "Bluein µm photons/(m²*s): <input type='number' name='blue_2' min='0' max='2000' value='blue_2'>"
    "Infrared in µm photons/(m²*s): <input type='number' name='infrared_2' min='0' max='2000' value='infrared_2'>"
    "White in µm photons/(m²*s): <input type='number' name='white_2' min='0' max='2000' value='white_2'>"
    "Timer in min: <input type='number' name='timer_2' min='0' max='600000' value='timer_2'> </p>"
    "<p> Red in µm photons/(m²*s): <input type='number' name='red_3' min='0' max='2000' value='red_3'>"
    "Green in µm photons/(m²*s): <input type='number' name='green_3' min='0' max='2000' value='green_3'>"
    "Blue in µm photons/(m²*s): <input type='number' name='blue_3' min='0' max='2000' value='blue_3'>"
    "Infrared in µm photons/(m²*s): <input type='number' name='infrared_3' min='0' max='2000' value='infrared_3'>"
    "White in µm photons/(m²*s): <input type='number' name='white_3' min='0' max='2000' value='white_3'>"
    "Timer in min: <input type='number' name='timer_3' min='0' max='600000' value='timer_3'> </p> "
    "<p> <button name='enable' value='0' onclick='window.location.reload();'>Reset</button>"
    "<button name='enable' value='1' onclick='window.location.reload();'>Start</button> </p>"
    "Repeat: <input type='number' name='repeat_0' min='0' max='1'>"*/
    "</form></body></html>", red_0);

What I got now in the browser is:
IAB Lightbox 6 Control-Panel

<html><head><title>IAB Lightbox Control-Panel</title><body><h1>IAB Lightbox 6 Control-Panel</h1><form action='/box' method='POS

What I expected is a input box with the value from the variable. Also in front the Red […]

I don’t understand why the rest is now missing. Sorry for the many questions.


#6

One thing I’d expect to cause issues are all the embedded backslashes in your string.

In a string (denoted by double quotes) embedded single quotes would not require escaping.

Another thing I’d try would be sending the data in chunks instead of one massive packet.
IIRC the maximum size for TCPClient on WiFi devices is 1024 byte and on Cellular 512.


#8

I used now:

    server.printf(
      "<html><head><title>IAB Lightbox Control-Panel</title>"
    "<body>"
    "<h1>IAB Lightbox 6 Control-Panel</h1>"
    "<form action='/box' method='POST'>"
    "<p> Red in µm photons/(m*s): <input type='number' name='red_0' min='0' max='2000' value='%i'>"
    "</form></body></html>", red_0);

Strangely it led to the same stopp:

<html><head><title>IAB Lightbox Control-Panel</title><body><h1>IAB Lightbox 6 Control-Panel</h1><form action='/box' method='POS

#9

With the message alone without variable it works strangly enough:

  if ( type == WebServer::GET ) {

    P ( message ) =
    //server.printf(
      "<html><head><title>IAB Lightbox Control-Panel</title>"
    "<body>"
    "<h1>IAB Lightbox 6 Control-Panel</h1>"
    "<form action='/box' method='POST'>"
    "<p> Red in µm photons/(m*s): <input type='number' name='red_0' min='0' max='2000' value=''>"
    "Green in µm photons/(m²*s): <input type='number' name='green_0' min='0' max='2000'value='green_0'>"
    "Blue in µm photons/(m²*s): <input type='number' name='blue_0' min='0' max='2000' value='blue_0'>"
    "Infrared in µm photons/(m²*s): <input type='number' name='infrared_0' min='0' max='2000' value='infrared_0'>"
    "White in µm photons/(m²*s): <input type='number' name='white_0' min='0' max='2000' value='white_0'>"
    "Timer in min: <input type='number' name='timer_0' min='0' max='600000' value='timer_0'> </p>"
    "<p> Red in µm photons/(m²*s): <input type='number' name='red_1' min='0' max='2000' value='red_1'>"
    "Green in µm photons/(m²*s): <input type='number' name='green_1' min='0' max='2000' value='green_1'>"
    "Blue in µm photons/(m²*s): <input type='number' name='blue_1' min='0' max='2000' value='blue_1'>"
    "Infrared in µm photons/(m²*s): <input type='number' name='infrared_1' min='0' max='2000' value='infrared_1'>"
    "White in µm photons/(m²*s): <input type='number' name='white_1' min='0' max='2000' value='white_1'>"
    "Timer in min: <input type='number' name='timer_1' min='0' max='600000' value='timer_1'></p>"
    "<p> Red in µm photons/(m²*s): <input type='number' name='red_2' min='0' max='2000' value='red_2'>"
    "Greenin µm photons/(m²*s): <input type='number' name='green_2' min='0' max='2000' value='green_2'>"
    "Bluein µm photons/(m²*s): <input type='number' name='blue_2' min='0' max='2000' value='blue_2'>"
    "Infrared in µm photons/(m²*s): <input type='number' name='infrared_2' min='0' max='2000' value='infrared_2'>"
    "White in µm photons/(m²*s): <input type='number' name='white_2' min='0' max='2000' value='white_2'>"
    "Timer in min: <input type='number' name='timer_2' min='0' max='600000' value='timer_2'> </p>"
    "<p> Red in µm photons/(m²*s): <input type='number' name='red_3' min='0' max='2000' value='red_3'>"
    "Green in µm photons/(m²*s): <input type='number' name='green_3' min='0' max='2000' value='green_3'>"
    "Blue in µm photons/(m²*s): <input type='number' name='blue_3' min='0' max='2000' value='blue_3'>"
    "Infrared in µm photons/(m²*s): <input type='number' name='infrared_3' min='0' max='2000' value='infrared_3'>"
    "White in µm photons/(m²*s): <input type='number' name='white_3' min='0' max='2000' value='white_3'>"
    "Timer in min: <input type='number' name='timer_3' min='0' max='600000' value='timer_3'> </p> "
    "<p> <button name='enable' value='0' onclick='window.location.reload();'>Reset</button>"
    "<button name='enable' value='1' onclick='window.location.reload();'>Start</button> </p>"
    "Repeat: <input type='number' name='repeat_0' min='0' max='1'>"
    "</form></body></html>";


    server.printP ( message );

This works perfectly:

<html><head><title>IAB Lightbox Control-Panel</title><body><h1>IAB Lightbox 6 Control-Panel</h1><form action='/box' method='POST'><p> Red in µm photons/(m*s): <input type='number' name='red_0' min='0' max='2000' value=''>Green in µm photons/(m²*s): <input type='number' name='green_0' min='0' max='2000'value='green_0'>Blue in µm photons/(m²*s): <input type='number' name='blue_0' min='0' max='2000' value='blue_0'>Infrared in µm photons/(m²*s): <input type='number' name='infrared_0' min='0' max='2000' value='infrared_0'>White in µm photons/(m²*s): <input type='number' name='white_0' min='0' max='2000' value='white_0'>Timer in min: <input type='number' name='timer_0' min='0' max='600000' value='timer_0'> </p><p> Red in µm photons/(m²*s): <input type='number' name='red_1' min='0' max='2000' value='red_1'>Green in µm photons/(m²*s): <input type='number' name='green_1' min='0' max='2000' value='green_1'>Blue in µm photons/(m²*s): <input type='number' name='blue_1' min='0' max='2000' value='blue_1'>Infrared in µm photons/(m²*s): <input type='number' name='infrared_1' min='0' max='2000' value='infrared_1'>White in µm photons/(m²*s): <input type='number' name='white_1' min='0' max='2000' value='white_1'>Timer in min: <input type='number' name='timer_1' min='0' max='600000' value='timer_1'></p><p> Red in µm photons/(m²*s): <input type='number' name='red_2' min='0' max='2000' value='red_2'>Greenin µm photons/(m²*s): <input type='number' name='green_2' min='0' max='2000' value='green_2'>Bluein µm photons/(m²*s): <input type='number' name='blue_2' min='0' max='2000' value='blue_2'>Infrared in µm photons/(m²*s): <input type='number' name='infrared_2' min='0' max='2000' value='infrared_2'>White in µm photons/(m²*s): <input type='number' name='white_2' min='0' max='2000' value='white_2'>Timer in min: <input type='number' name='timer_2' min='0' max='600000' value='timer_2'> </p><p> Red in µm photons/(m²*s): <input type='number' name='red_3' min='0' max='2000' value='red_3'>Green in µm photons/(m²*s): <input type='number' name='green_3' min='0' max='2000' value='green_3'>Blue in µm photons/(m²*s): <input type='number' name='blue_3' min='0' max='2000' value='blue_3'>Infrared in µm photons/(m²*s): <input type='number' name='infrared_3' min='0' max='2000' value='infrared_3'>White in µm photons/(m²*s): <input type='number' name='white_3' min='0' max='2000' value='white_3'>Timer in min: <input type='number' name='timer_3' min='0' max='600000' value='timer_3'> </p> <p> <button name='enable' value='0' onclick='window.location.reload();'>Reset</button><button name='enable' value='1' onclick='window.location.reload();'>Start</button> </p>Repeat: <input type='number' name='repeat_0' min='0' max='1'></form></body></html>

Still I want to use the variable to display, which values are used.


#10

I don’t think it’s a coincidence that your turncated message is clips after 128 bytes (if I haven’d miscounted).


#11

Could I change this to send bigger strings or how can I send smaller packages?

Do several printf after each other achieve what I’m looking for?


#12

I’d avoid server.printf(), create my own buffer and use server.write(buf, strlen(buf)) instead.

Alternatively you could send the entire web form without your dynamic data via server.write(staticPage, strlen(staticPage)) and then after that inject the dynamic data via a short dynamic JaveScrip that updates that data.


#13

You mean somthing like this? Actually I don’t get it. For server.write I get invalid conversion from const char to const unint8_t*{aka const unsigned char*’ [-fpermissive]

#define buffer "<p> Red in µm photons/(m*s): <input type='number' name='red_0' min='0' max='2000' value='%i'>"

server.write(buffer,strlen(buffer));

For JavaScript I thought of something like this:

<p> Red: <input id="Rot" type='number' name='red_0' min='0' max='2000' value="">

<script>
    var test = "500";
    document.getElementById("Rot").value = test;
</script>

I could write only the variables with printf I guess and the rest with printp, but I’m not surehow to do it properly.


#14

That’s easily fixed by type-casting like this

  server.write((uint8_t*)buffer, strlen(buffer));

In order to have the JavaScript execute you’d have to inject that before closing the <html> tag.
You can also have a static script to “expose” your dynamic elements like this

<script>
  var r = document.getElementById("Rot");
  var b = document.getElementById("Blau");
</script>

and then just use this in your code

  server.printf("<script>r.value=%d;b.value=%d;</script></html>", red_0, blue_0);

Or if you need a script longer than 128 chars

  char js[512];
  snprintf(js, sizeof(js), "<script>r.value=%d;b.value=%d;</script></html>", red_0, blue_0);
  server.write((uint8_t*)js, strlen(js));

#15

Thank you very much. I got some help and we solved it like this:

    #define BUFFER_SIZE 3000
    char buffer[BUFFER_SIZE];

    snprintf(buffer, BUFFER_SIZE, "<html><head><title>IAB Lightbox Control-Panel</title>"
    "<body>"
    "<h1>IAB Lightbox 6 Control-Panel</h1>"
    "<form action='/box' method='POST'>"
    "<p> Red in µm photons/(m²*s): <input type='number' name='red_0' min='0' max='2000' value='%i'>"
    "Green in µm photons/(m²*s): <input type='number' name='green_0' min='0' max='2000'value='%i'>"
    "Blue in µm photons/(m²*s): <input type='number' name='blue_0' min='0' max='2000' value='%i'>"
    "Infrared in µm photons/(m²*s): <input type='number' name='infrared_0' min='0' max='2000' value='%i'>"
    "White in µm photons/(m²*s): <input type='number' name='white_0' min='0' max='2000' value='%i'>"
    "Timer in min: <input type='number' name='timer_0' min='0' max='600000' value='%i'> </p>"
    "<p> Red in µm photons/(m²*s): <input type='number' name='red_1' min='0' max='2000' value='%i'>"
    "Green in µm photons/(m²*s): <input type='number' name='green_1' min='0' max='2000' value='%i'>"
    "Blue in µm photons/(m²*s): <input type='number' name='blue_1' min='0' max='2000' value='%i'>"
    "Infrared in µm photons/(m²*s): <input type='number' name='infrared_1' min='0' max='2000' value='%i'>"
    "White in µm photons/(m²*s): <input type='number' name='white_1' min='0' max='2000' value='%i'>"
    "Timer in min: <input type='number' name='timer_1' min='0' max='600000' value='%i'></p>"
    "<p> Red in µm photons/(m²*s): <input type='number' name='red_2' min='0' max='2000' value='%i'>"
    "Green in µm photons/(m²*s): <input type='number' name='green_2' min='0' max='2000' value='%i'>"
    "Blue in µm photons/(m²*s): <input type='number' name='blue_2' min='0' max='2000' value='%i'>"
    "Infrared in µm photons/(m²*s): <input type='number' name='infrared_2' min='0' max='2000' value='%i'>"
    "White in µm photons/(m²*s): <input type='number' name='white_2' min='0' max='2000' value='%i'>"
    "Timer in min: <input type='number' name='timer_2' min='0' max='600000' value='%i'> </p>"
    "<p> Red in µm photons/(m²*s): <input type='number' name='red_3' min='0' max='2000' value='%i'>"
    "Green in µm photons/(m²*s): <input type='number' name='green_3' min='0' max='2000' value='%i'>"
    "Blue in µm photons/(m²*s): <input type='number' name='blue_3' min='0' max='2000' value='%i'>"
    "Infrared in µm photons/(m²*s): <input type='number' name='infrared_3' min='0' max='2000' value='%i'>"
    "White in µm photons/(m²*s): <input type='number' name='white_3' min='0' max='2000' value='%i'>"
    "Timer in min: <input type='number' name='timer_3' min='0' max='600000' value='%i'> </p> "
    "<p> <button name='enable' value='0' onclick='window.location.reload();'>Reset</button>"
    "<button name='enable' value='1' onclick='window.location.reload();'>Start</button> </p>"
    "Repeat: <input type='number' name='repeat_0' min='0' max='1' value='%i'>"
    "</form></body></html>", red_h_0, green_h_0, blue_h_0, infrared_h_0, white_h_0, timer_0, red_h_1, green_h_1, blue_h_1, infrared_h_1, white_h_1, timer_1, red_h_2, green_h_2, blue_h_2, infrared_h_2, white_h_2, timer_2, red_h_3, green_h_3, blue_h_3, infrared_h_3, white_h_3, timer_3, repeat_0 ) ;
    server.write((uint8_t *)buffer, strlen(buffer));