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

Silenz · November 6, 2019, 9:29pm

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

ScruffR · November 7, 2019, 6:22am

What Particle device are you targeting?

Silenz · November 7, 2019, 7:57am

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…

ScruffR · November 7, 2019, 9:15am

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.

Silenz · November 7, 2019, 9:44am

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.

ScruffR · November 7, 2019, 2:02pm

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.

Silenz · November 7, 2019, 2:12pm

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

Silenz · November 7, 2019, 2:19pm

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.

ScruffR · November 7, 2019, 2:26pm

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

github.com

m-mcgowan/Webduino/blob/master/firmware/WebServer.h#L505


    write(value);
  }
#endif  
}


void WebServer::printCRLF()
{
  print(CRLF);
}


void WebServer::printf(char *fmt, ... )
{
  char tmp[128]; // resulting string limited to 128 chars
  va_list args;
  va_start (args, fmt );
  vsnprintf(tmp, 128, fmt, args);
  va_end (args);
  print(tmp);
}


#ifdef F

Silenz · November 7, 2019, 2:31pm

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?

ScruffR · November 7, 2019, 2:37pm

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.

Silenz · November 7, 2019, 6:02pm

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.

ScruffR · November 7, 2019, 6:16pm

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));

Silenz · November 8, 2019, 3:52pm

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));

Topic		Replies	Views
Send a value to a variable from a webpage [SOLVED] Getting Started	26	14891	January 27, 2018
Looking for step by step tutorial using the cloud Cloud	9	4080	June 2, 2014
Setting values not working as expected - noob needs help Firmware	29	775	November 30, 2021
Best way to combine data for Particle.Publish? Cloud photon	9	1919	June 22, 2019
Can't pass data to web page Cloud	5	2656	April 2, 2017

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

Related topics