Skip to content

Commit 88af797

Browse files
rsoricrsoric
committed
Added two examples for Inkplate 5
1 parent c050808 commit 88af797

File tree

6 files changed

+276
-0
lines changed

6 files changed

+276
-0
lines changed

‎examples/Inkplate5/Advanced/WEB_WiFi/Inkplate5_HTTP_Web_Server/Inkplate5_HTTP_Web_Server.ino

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/*
2+
Inkplate5_HTTP_Web_Server example for Soldered Inkplate 5
3+
For this example you will need a USB C cable, Inkplate 5 and a device with WiFi and Internet brower (PC, Laptop,
4+
Smartphone, ...). Select "Soldered Inkplate5" from Tools -> Board menu. Don't have
5+
"Soldered Inkplate5" option? Follow our tutorial and add it:
6+
https://soldered.com/learn/add-inkplate-6-board-definition-to-arduino-ide/
7+
8+
This example will show you how you can use Inkplate 5 as a small and simple standlone Web Server.
9+
You need to connect to Inkplate via WiFi. Then, simply open the IP address shown on Inkplate 5's e-Paper display in
10+
your browser. After opening, you will see a text box where you can type some text. After typing something in, press
11+
"Send to display". The text will then appear on Inkplate's display!
12+
13+
This is just a simple example of what you can do, of course, you can create much more complex stuff.
14+
15+
HINT: You can change the WiFi name and password of your Inkplate WiFi Access point by changing the ssid and pass in
16+
#define macros!
17+
18+
Want to learn more about Inkplate? Visit www.inkplate.io
19+
Looking to get support? Write on our forums: https://forum.soldered.com/
20+
23 March 2023 by Soldered
21+
*/
22+
23+
// Next 3 lines are a precaution, you can ignore those, and the example would also work without them
24+
#ifndef ARDUINO_INKPLATE5
25+
#error "Wrong board selection for this example, please select Soldered Inkplate5 in the boards menu."
26+
#endif
27+
28+
#include "Inkplate.h" //Include Inkplate library to the sketch
29+
#include "htmlCode.h" //Include .h file where we stored out html code of our web page
30+
#include <WebServer.h> //Include ESP32 library for Web server
31+
#include <WiFi.h> //Include ESP32 WiFi library
32+
#include <WiFiClient.h> //Include ESP32 WiFi library for AP
33+
#include <uri/UriBraces.h>
34+
35+
#define ssid "Inkplate 5"
36+
#define pass "Soldered"
37+
38+
Inkplate display(INKPLATE_1BIT); // Create an object on Inkplate library and also set library into 1 Bit mode (BW)
39+
WebServer server(80); // Create Web server on port 80 (HTTP port number)
40+
41+
IPAddress serverIP;
42+
String txt;
43+
44+
void setup()
45+
{
46+
display.begin(); // Init Inkplate library (you should call this function ONLY ONCE)
47+
display.clearDisplay(); // Clear frame buffer of display
48+
display.display(); // Put clear image on display
49+
display.setTextSize(3); // Scale text to be two times bigger then original (5x7 px)
50+
display.setTextColor(BLACK, WHITE); // Set text color to black and background color to white
51+
display.setTextWrap(true); // If text does not fit on screen, send it to new line
52+
53+
WiFi.begin(); // Init. WiFi library
54+
WiFi.mode(WIFI_AP); // Set WiFi to Access point mode
55+
WiFi.softAP(ssid, pass); // Set SSID (WiFi name) and password for Access point
56+
57+
serverIP = WiFi.softAPIP(); // Get the server IP address
58+
59+
server.on("/", handleRoot); // If you open homepage, go to handle root function
60+
server.on(UriBraces("/string/{}"),
61+
handleString); // If you send some text to Inkplate, go to handleString function. Note that {} brackets at
62+
// the end of address. That means that web address has some arguments (our text!).
63+
server.begin(); // Start the web server
64+
updatePaper();
65+
}
66+
67+
void loop()
68+
{
69+
server.handleClient(); // You have to constantly read if there is any new client connected to web server
70+
}
71+
72+
void updateHTML()
73+
{ // This function will send response to client and send HTML code of our web page
74+
server.send(200, "text/html", s);
75+
}
76+
77+
void handleRoot()
78+
{ // This function will send response to client if client open a root (homepage) of our web page
79+
updateHTML();
80+
}
81+
82+
void handleString()
83+
{ // This function will send response to client, send HTML code of web page, get the text from argument sent in web page
84+
// address and refresh screen with new text
85+
txt = server.arg(0);
86+
updateHTML();
87+
updatePaper();
88+
}
89+
90+
void updatePaper()
91+
{ // This function updates screen with new data (text)
92+
display.clearDisplay(); // Clear everything from epaper frame buffer
93+
display.setCursor(140, 40); // Print out instruction on how to connect to Inkplate WiFi and how to open a web page
94+
display.print("Connect to ");
95+
display.print(ssid);
96+
display.println(" WiFi with pass: ");
97+
display.setCursor(400, 100);
98+
display.println(pass);
99+
display.setCursor(230, 155);
100+
display.print("Open Your web browser and open");
101+
display.setCursor(330, 210);
102+
display.print("http://");
103+
display.print(serverIP);
104+
display.println('/');
105+
display.println();
106+
display.fillRect(10, 240, 940, 4, BLACK);
107+
display.println("User text:"); // Print out what user typed in web page
108+
display.print(txt);
109+
display.display(); // Send everything to screen (refresh the screen)
110+
}

‎examples/Inkplate5/Advanced/WEB_WiFi/Inkplate5_HTTP_Web_Server/htmlCode.h

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
String s = "<head>"
2+
"<title>Soldered Inkplate e-paper display</title>"
3+
4+
"<style type='text/css'>"
5+
6+
"textarea {"
7+
"width: 300px;"
8+
"height: 5em;"
9+
"}"
10+
11+
"textarea {"
12+
" font-size: 150%;"
13+
"}"
14+
15+
"t1 {"
16+
" font-size: 150%;"
17+
" font-weight: bold;"
18+
"}"
19+
20+
"</style>"
21+
22+
"</head>"
23+
24+
"<body><form action='/string/' method='get' target='_self'><t1>Insert string that you want to display:</t1><br><textarea autofocus maxlength = '100' rows = '7' cols = '30' name = 'input1'>Write some text!</textarea><br>"
25+
26+
"<input type='submit' value='Send to display!'></form></body></html>";

‎examples/Inkplate5/Advanced/WEB_WiFi/Inkplate5_Show_Pictures_From_Web/Inkplate5_Show_Pictures_From_Web.ino

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/*
2+
Inkplate5_Show_Pictures_From_Web example for Soldered Inkplate 5
3+
For this example you will need a USB C cable, Inkplate 5, and an available WiFi connection.
4+
Select "Soldered Inkplate5" from Tools -> Board menu.
5+
Don't have "Soldered Inkplate5" option? Follow our tutorial and add it:
6+
https://soldered.com/learn/add-inkplate-6-board-definition-to-arduino-ide/
7+
8+
You can open .bmp files that have a color depth of 1 bit (BW bitmap), 4 bit, 8 bit and
9+
24 bit AND have resoluton smaller than 960x540 or otherwise it won't fit on screen.
10+
11+
.jpg files encoded with Baseline DCT, Huffman coding are supported.
12+
.png files are generally well supported.
13+
14+
If you are experiencing issues, usually opening the image in an image editor and
15+
exporting it in a different format resolves the issue.
16+
17+
This example will show you how you can download a .bmp and .jpg file from the web and
18+
display that image on Inkplate 5's e-Paper display.
19+
20+
Want to learn more about Inkplate? Visit www.inkplate.io
21+
Looking to get support? Write on our forums: https://forum.soldered.com/
22+
22 March 2023 by Soldered
23+
*/
24+
25+
// Next 3 lines are a precaution, you can ignore those, and the example would also work without them
26+
#ifndef ARDUINO_INKPLATE5
27+
#error "Wrong board selection for this example, please select Soldered Inkplate5 in the boards menu."
28+
#endif
29+
30+
// Include needed libraries
31+
#include "HTTPClient.h" //Include library for HTTPClient
32+
#include "Inkplate.h" //Include Inkplate library to the sketch
33+
#include "WiFi.h" //Include library for WiFi
34+
35+
// Enter your WiFi credentials
36+
const char *ssid = "Soldered";
37+
const char *pass = "dasduino";
38+
39+
Inkplate display(INKPLATE_1BIT); // Create an object on Inkplate library and also set library into 1 Bit mode (BW)
40+
41+
void setup()
42+
{
43+
display.begin(); // Init Inkplate library (you should call this function ONLY ONCE)
44+
display.clearDisplay(); // Clear frame buffer of display
45+
display.display(); // Put clear image on display
46+
47+
display.setTextSize(2); // Use larger text for easier readability
48+
display.print("Connecting to WiFi...");
49+
display.partialUpdate();
50+
51+
// Connect to the WiFi network.
52+
WiFi.mode(WIFI_MODE_STA);
53+
WiFi.begin(ssid, pass);
54+
while (WiFi.status() != WL_CONNECTED)
55+
{
56+
delay(500);
57+
display.print(".");
58+
display.partialUpdate();
59+
}
60+
display.println("\nWiFi OK! Downloading...");
61+
display.partialUpdate();
62+
63+
// Draw the first image from web.
64+
// Monochromatic bitmap with 1 bit depth. Images like this load quickest.
65+
// NOTE: Both drawImage methods allow for an optional fifth "invert" parameter. Setting this parameter to true
66+
// will flip all colors on the image, making black white and white black. This may be necessary when exporting
67+
// bitmaps from certain softwares. Fourth parameter will dither the image. Photo taken by: Roberto Fernandez
68+
if (!display.drawImage("https://varipass.org/neowise_mono.bmp", 0, 0, false, true))
69+
{
70+
// If is something failed (wrong filename or wrong bitmap format), write error message on the screen.
71+
// REMEMBER! You can only use Windows Bitmap file with color depth of 1, 4, 8 or 24 bits with no compression!
72+
display.println("Image open error");
73+
display.display();
74+
}
75+
display.display();
76+
77+
// Draw the second image from web, this time using a HTTPClient to fetch the response manually.
78+
// Full color 24 bit images are large and take a long time to load, will take around 20 secs.
79+
HTTPClient http;
80+
// Set parameters to speed up the download process.
81+
http.getStream().setNoDelay(true);
82+
http.getStream().setTimeout(1);
83+
84+
// Photo taken by: Roberto Fernandez
85+
http.begin("https://varipass.org/neowise.bmp");
86+
87+
// Check response code.
88+
int httpCode = http.GET();
89+
if (httpCode == 200)
90+
{
91+
// Get the response length and make sure it is not 0.
92+
int32_t len = http.getSize();
93+
if (len > 0)
94+
{
95+
if (!display.drawBitmapFromWeb(http.getStreamPtr(), 0, 0, len))
96+
{
97+
// If is something failed (wrong filename or wrong bitmap format), write error message on the screen.
98+
// REMEMBER! You can only use Windows Bitmap file with color depth of 1, 4, 8 or 24 bits with no
99+
// compression!
100+
display.println("Image open error");
101+
display.display();
102+
}
103+
display.display();
104+
}
105+
else
106+
{
107+
display.println("Invalid response length");
108+
display.display();
109+
}
110+
}
111+
else
112+
{
113+
display.println("HTTP error");
114+
display.display();
115+
}
116+
117+
display.clearDisplay();
118+
delay(3000);
119+
120+
// Try to load image and display it on e-paper at position X=80, Y=70 (centered)
121+
// NOTE: Both drawJpegFromWeb methods allow for an optional fifth "invert" parameter. Setting this parameter to
122+
// true will flip all colors on the image, making black white and white black. Fourth parameter will dither the
123+
// image.
124+
if (!display.drawImage("https://varipass.org/destination.jpg", 0, 100, true, false))
125+
{
126+
// If is something failed (wrong filename or format), write error message on the screen.
127+
display.println("Image open error");
128+
display.display();
129+
}
130+
display.display();
131+
132+
http.end();
133+
134+
WiFi.mode(WIFI_OFF);
135+
}
136+
137+
void loop()
138+
{
139+
// Nothing...
140+
}

‎examples/Inkplate5/Advanced/WEB_WiFi/Inkplate5_Show_Pictures_From_Web/destination.jpg

174 KB
Loading

‎examples/Inkplate5/Advanced/WEB_WiFi/Inkplate5_Show_Pictures_From_Web/neowise.bmp

1.37 MB
Binary file not shown.

‎examples/Inkplate5/Advanced/WEB_WiFi/Inkplate5_Show_Pictures_From_Web/neowise_Mono.bmp

58.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)