Add possibility to display pictures

[Nina]

Is it possible to display pictures in any way?
Some kind of frame that can be updated with small sized images.

[Marc Paradis]

Sure you can.
You can create a label and make the label img src.

Like so:

uint16_t tabBijinti = ESPUI.addControl( ControlType::Tab, "MODÈLE HEURE &#x1F467", F("IMAGE &#x1F467"));
uint16_t image;

image = ESPUI.addControl(ControlType::Label, "MA PHOTO &#x1F467", F(""), COLOR_PETERRIVER, tabBijinti);

String currentModeleBijinti= "sendai";

char bufferTimePic[65];
sprintf( bufferTimePic, "http://www.bijint.com/assets/pict/%s/240x320/%02d%02d.jpg", currentModeleBijinti.c_str(), myTZ.hour(), myTZ.minute() );
Serial.println(bufferTimePic);

String picString((char*)0);
picString += F("<img src=\"");
picString += String(bufferTimePic);
picString += F("\"");
picString += F(" width=100% height=100%\"");
picString += F(">");

Serial.println( F("PIC STRING") );
Serial.println(picString);
yield();

char picBuffer[picString.length() + 1];
picString.toCharArray( picBuffer, sizeof(picBuffer) );
ESPUI.print(imageBijinti, picBuffer);

etc...
thanks.
Marc.

[Ian Gray]

To clarify what @nodoubtman is saying here, a Label's value is just copied into the UI as raw HTML. Therefore you can simply do the following:

ESPUI.addControl(ControlType::Label, "Label", "<img src='path/to/image'>", ControlColor::Peterriver);

Obviously this requires that the client has access to the image in question. If you want to include images in a UI that is not on the internet, you could include images directly into the img tag as a Data URI. Bear in mind that these get big, fast, and I've not tested labels with that kind of size. It should work though.

I'll add a clarification into the docs.