Difference between revisions of "E-Paper ESP8266 Driver Board"
(→Pin) |
(→Driver) |
||
| (13 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| + | <div class="wiki-pages jet-green-color"> | ||
{{Infobox item | {{Infobox item | ||
|img=[[File:e-Paper-ESP8266-Driver-Board-1.jpg|300px|{{Amazon_nolink|default={{#ifeq: {{#urlget:amazon|0}}|{{#urlget:Amazon|0}}| default|}}|url=link=https://www.waveshare.com/e-paper-esp8266-driver-board.htm}}]] | |img=[[File:e-Paper-ESP8266-Driver-Board-1.jpg|300px|{{Amazon_nolink|default={{#ifeq: {{#urlget:amazon|0}}|{{#urlget:Amazon|0}}| default|}}|url=link=https://www.waveshare.com/e-paper-esp8266-driver-board.htm}}]] | ||
| Line 42: | Line 43: | ||
PS: The above is the board fixed connection, no additional operation by the user | PS: The above is the board fixed connection, no additional operation by the user | ||
| − | ==Feature== | + | ===Feature=== |
| − | *Onboard ESP8266, support Arduino development | + | *Onboard ESP8266, support Arduino development. |
| − | *Provide HTML host computer program, can update content remotely through web page, easy to integrate into various network applications | + | *Provide HTML host computer program, can update content remotely through web page, easy to integrate into various network applications. |
| − | *Supports Floyd-Steinberg dithering algorithm for more color combinations and better shadow rendering of the original image | + | *Supports Floyd-Steinberg dithering algorithm for more color combinations and better shadow rendering of the original image. |
| − | *Supports a variety of common image formats (BMP, JPEG, GIF, PNG, etc.) | + | *Supports a variety of common image formats (BMP, JPEG, GIF, PNG, etc.). |
| − | *Built-in e-ink screen driver (open source) | + | *Built-in e-ink screen driver (open source). |
| − | *Provide complete supporting information manual | + | *Provide complete supporting information manual. |
| − | ==Application== | + | |
| − | This driver board works with the Micro Snow E-ink screen, which can be applied to the wireless update of electronic tags | + | ===Application=== |
| − | *Electronic price tags in supermarkets | + | This driver board works with the Micro Snow E-ink screen, which can be applied to the wireless update of electronic tags. |
| − | *Information labels for customer service windows, such as name labels | + | *Electronic price tags in supermarkets. |
| − | *Small advertising label | + | *Information labels for customer service windows, such as name labels. |
| + | *Small advertising label. | ||
| + | |||
= Preparation = | = Preparation = | ||
==Download examples== | ==Download examples== | ||
| Line 73: | Line 76: | ||
[[File:epd_esp8266_hardware.png|600px]] | [[File:epd_esp8266_hardware.png|600px]] | ||
{|border=1; style="width:900px;" align="center" | {|border=1; style="width:900px;" align="center" | ||
| − | |-style="background: | + | |-style="background:green; color:white;" align="center" |
|Trigger state||E-Paper | |Trigger state||E-Paper | ||
|-align="center" | |-align="center" | ||
| Line 80: | Line 83: | ||
|B||1.54 inch(b), 2.13 inch(b), 2.7 inch, 2.7 inch(b), 2.9 inch(b), 4.2 inch, 4.2 inch (b), 7.5 inch(b), 7.5 inch(b) | |B||1.54 inch(b), 2.13 inch(b), 2.7 inch, 2.7 inch(b), 2.9 inch(b), 4.2 inch, 4.2 inch (b), 7.5 inch(b), 7.5 inch(b) | ||
|} | |} | ||
| + | |||
==Image Process Algorithm== | ==Image Process Algorithm== | ||
In the Bluetooth example and the WiFi example, we use two kinds of Image algorithms, Level and Dithering.<br> | In the Bluetooth example and the WiFi example, we use two kinds of Image algorithms, Level and Dithering.<br> | ||
===Level=== | ===Level=== | ||
An image can be divided into several large color gamuts. Each pixel on the image is classified into the corresponding color gamuts according to how close the color is to these color gamuts. This method is more suitable for images that have few colors, such as bright or three-color shapes or text images. Take the black, white and red ink screen as an example. When processing the image, we hope to process it into black, white, and red. Therefore, for an image, we can divide all the colors of the image into three color areas: black area, white area, and red area. <br> | An image can be divided into several large color gamuts. Each pixel on the image is classified into the corresponding color gamuts according to how close the color is to these color gamuts. This method is more suitable for images that have few colors, such as bright or three-color shapes or text images. Take the black, white and red ink screen as an example. When processing the image, we hope to process it into black, white, and red. Therefore, for an image, we can divide all the colors of the image into three color areas: black area, white area, and red area. <br> | ||
| − | For example, according to the figure below, if the value of a certain pixel in the grayscale image is equal to or less than 127, we regard this pixel as a black pixel, otherwise, it is white <br> | + | For example, according to the figure below, if the value of a certain pixel in the grayscale image is equal to or less than 127, we regard this pixel as a black pixel, otherwise, it is white. <br> |
[[File:epd_esp32_lever_1.png|400px]]<br> | [[File:epd_esp32_lever_1.png|400px]]<br> | ||
As we know, color images have three color channels called RGB. Compared with the red channel, we can collectively call blue and green the blue-green channel or the non-red channel. According to the figure below, if a pixel on a color image has a high red channel value but a low blue-green channel value, we classify it as a red pixel; if the value of both the red and blue-green channels are very low, we classify it as a black pixel; if the values of the red and blue-green channels are both high, we classify it as white. <br> | As we know, color images have three color channels called RGB. Compared with the red channel, we can collectively call blue and green the blue-green channel or the non-red channel. According to the figure below, if a pixel on a color image has a high red channel value but a low blue-green channel value, we classify it as a red pixel; if the value of both the red and blue-green channels are very low, we classify it as a black pixel; if the values of the red and blue-green channels are both high, we classify it as white. <br> | ||
| Line 90: | Line 94: | ||
In the algorithm, the color definition is calculated based on the difference between the RGB value and the sum of squares of the expected color value. The expected color value refers to the color value that the pixel is closest to, and these values are stored in the curPal array. <br> | In the algorithm, the color definition is calculated based on the difference between the RGB value and the sum of squares of the expected color value. The expected color value refers to the color value that the pixel is closest to, and these values are stored in the curPal array. <br> | ||
[[File:epd_esp32_lever_3.png|400px]]<br> | [[File:epd_esp32_lever_3.png|400px]]<br> | ||
| + | |||
==Dithering== | ==Dithering== | ||
For images with more colors or more gradient areas, the above color scale method is not suitable. In many cases, the pixels in the gradient area in the image may be very close to all color gamuts. If you use the Level method, the image will lose a lot of image details. Many pictures taken by cameras use the method of mixing colors to draw shadows and transition areas. In these images, the gradual area accounts for most of them. <br> | For images with more colors or more gradient areas, the above color scale method is not suitable. In many cases, the pixels in the gradient area in the image may be very close to all color gamuts. If you use the Level method, the image will lose a lot of image details. Many pictures taken by cameras use the method of mixing colors to draw shadows and transition areas. In these images, the gradual area accounts for most of them. <br> | ||
| Line 108: | Line 113: | ||
[[File:epd_esp32_compare_3.png|300px]] [[File:epd_esp32_compare_3-2.png|300px]]<br> | [[File:epd_esp32_compare_3.png|300px]] [[File:epd_esp32_compare_3-2.png|300px]]<br> | ||
| − | + | ||
| − | |||
{{ESP32 e-Paper WiFi-Example}} | {{ESP32 e-Paper WiFi-Example}} | ||
| − | + | ||
| − | |||
{{ESP8266 e-Paper Offline-Example}} | {{ESP8266 e-Paper Offline-Example}} | ||
| − | + | ||
=Resources= | =Resources= | ||
==Documentation == | ==Documentation == | ||
| Line 126: | Line 129: | ||
This is a post in Arduino Form about our SPI e-Paper thanks to ZinggJM, maybe you want to refer to. | This is a post in Arduino Form about our SPI e-Paper thanks to ZinggJM, maybe you want to refer to. | ||
*[https://forum.arduino.cc/index.php?topic=487007.0 Waveshare e-Paper display with SPI] | *[https://forum.arduino.cc/index.php?topic=487007.0 Waveshare e-Paper display with SPI] | ||
| + | ==Driver== | ||
| + | *[https://www.waveshare.com/w/upload/6/62/CP210x_USB_TO_UART.zip CP210x_USB_TO_UART] | ||
| + | *[https://www.waveshare.com/w/upload/8/8f/Mac_OSX_VCP_Driver.zip Mac_OSX_VCP_Driver] | ||
| + | ==ESP8266== | ||
| + | *[https://docs.ai-thinker.com/en/esp8266 esp8266] | ||
=FAQ= | =FAQ= | ||
| Line 132: | Line 140: | ||
[[File:epd2in13_esp_chose.png|400px]] | [[File:epd2in13_esp_chose.png|400px]] | ||
|||}} | |||}} | ||
| − | + | {{FAQ|Why does it keep prompting ERROR that the picture cannot be refreshed?| | |
| − | + | Try it with Google Chrome, if it still doesn't work, try another network. | |
| + | |||}} | ||
| + | {{FAQ|If you don't have a V2 logo on the back of your 1.54inch e-paper screen, how do I use it?| | ||
| + | * Open epd1in54.h in the project and change the following value to 1 | ||
| + | [[File:epd2in13_esp_chose2.png|400px]] | ||
| + | |||}} | ||
| + | {{FAQ|The wifi demo upload is normal, the serial port outputs the IP address, but the computer input IP address cannot be accessed, you need to check that the network segment of the IP is consistent with the network segment value of the wifi, and the IP does not conflict.| | ||
| + | Modify the IP network segment, as shown in the following figure.<br/> | ||
| + | [[File:epd2in13_esp_chose3.png|400px]] | ||
| + | |||}} | ||
{{Service00}} | {{Service00}} | ||
[[Category:Expansions|Expansions]] [[Category:e-Paper|e-Paper]] [[Category:Raspberry Pi|Raspberry Pi]] | [[Category:Expansions|Expansions]] [[Category:e-Paper|e-Paper]] [[Category:Raspberry Pi|Raspberry Pi]] | ||
Latest revision as of 01:12, 2 August 2022
| ||
Introduction
F-Paper ESP8266 Driver Board can read picture from PC or phone by WiFi and display the information. It also supports Arduino.
Parameter
- WiFi standard: 802.11b/g/n
- Interface port: 3-wire SPI、4-wire SPI(default)
- Operating voltage: 5V
- Operating current: 50mA ~ 100mA
- Outline dimension: 29.57mm x 48.26mm
- Hole diameter: 2.9mm
Pin
| Pin | ESP8266 | Description |
|---|---|---|
| VCC | VCC | 3.3V Power input |
| GND | GND | Power ground |
| SCK | GPIO14(D5) | SPI CLK, Clock Signal Input |
| DIN | GPIO13(D7) | SPI MOSI, Data Input |
| CS | GPIO15(D8) | Chip Select, active-low |
| BUSY | GPIO5(D1) | Busy Output Pin (means busy) |
| RST | GPIO2(D4) | Reset, active-low |
| DC | GPIO4(D2) | Reset, Data/Demand, low level means to demand, high level means data |
PS: The above is the board fixed connection, no additional operation by the user
Feature
- Onboard ESP8266, support Arduino development.
- Provide HTML host computer program, can update content remotely through web page, easy to integrate into various network applications.
- Supports Floyd-Steinberg dithering algorithm for more color combinations and better shadow rendering of the original image.
- Supports a variety of common image formats (BMP, JPEG, GIF, PNG, etc.).
- Built-in e-ink screen driver (open source).
- Provide complete supporting information manual.
Application
This driver board works with the Micro Snow E-ink screen, which can be applied to the wireless update of electronic tags.
- Electronic price tags in supermarkets.
- Information labels for customer service windows, such as name labels.
- Small advertising label.
Preparation
Download examples
Two examples were provided for the display, WiFi example and the offline example. You can find the archive in Resources tabber. Or directly download the link here to download
Unzip the arvhive and you will get the following examples：
- examples：Offline example
- Loader_esp32wf：WiFi Example
Setup Arduino IDE
- If the Arduino IDE is not installed on your computer before, or the version of the IDE is older. It is recommended to go to the Arduino official website to download the latest IDE and install it according to your own system. Link：https://www.arduino.cc/en/Main/Software
- Open the IDE and choose File->Preferences and add the link to the Additional Boards Manager URLs box:
- http://arduino.esp8266.com/stable/package_esp8266com_index.json and then click toOK(GitHub domestic access is relatively slow, it is recommended to use a search engine to complete this step)
- Open Tools -> Boards -> Boards Manager, find the ESP8266by ESP8266 Community, and install it
- After installing, you can find the NodeMCU 1.0 option in Tools - Boards of Arduino IDE Menu.
- Set up the model switch, and set the model switch according to the ink screen model used (if the display effect is poor or cannot be driven, please try to switch the switch)
| Trigger state | E-Paper |
| A | 1.54 inch, 2.13 inch, 2.9 inch |
| B | 1.54 inch(b), 2.13 inch(b), 2.7 inch, 2.7 inch(b), 2.9 inch(b), 4.2 inch, 4.2 inch (b), 7.5 inch(b), 7.5 inch(b) |
Image Process Algorithm
In the Bluetooth example and the WiFi example, we use two kinds of Image algorithms, Level and Dithering.
Level
An image can be divided into several large color gamuts. Each pixel on the image is classified into the corresponding color gamuts according to how close the color is to these color gamuts. This method is more suitable for images that have few colors, such as bright or three-color shapes or text images. Take the black, white and red ink screen as an example. When processing the image, we hope to process it into black, white, and red. Therefore, for an image, we can divide all the colors of the image into three color areas: black area, white area, and red area.
For example, according to the figure below, if the value of a certain pixel in the grayscale image is equal to or less than 127, we regard this pixel as a black pixel, otherwise, it is white.
As we know, color images have three color channels called RGB. Compared with the red channel, we can collectively call blue and green the blue-green channel or the non-red channel. According to the figure below, if a pixel on a color image has a high red channel value but a low blue-green channel value, we classify it as a red pixel; if the value of both the red and blue-green channels are very low, we classify it as a black pixel; if the values of the red and blue-green channels are both high, we classify it as white.
In the algorithm, the color definition is calculated based on the difference between the RGB value and the sum of squares of the expected color value. The expected color value refers to the color value that the pixel is closest to, and these values are stored in the curPal array.
Dithering
For images with more colors or more gradient areas, the above color scale method is not suitable. In many cases, the pixels in the gradient area in the image may be very close to all color gamuts. If you use the Level method, the image will lose a lot of image details. Many pictures taken by cameras use the method of mixing colors to draw shadows and transition areas. In these images, the gradual area accounts for most of them.
For the human eye, it is easy to confuse very small colors. For example, set two colors red and blue side by side, if it is reduced to a small enough size, it will become a mixture color of red and blue to the human eye. The defect of the human eye means that we can deceive the human eye and use the "mixing" method to obtain more colors that can be expressed. The dithering algorithm uses this phenomenon.
The Floyd-Steinberg algorithm is based on the error diffusion method(published by Robert Floy and Louis Steinberg in 1976). The formula is based on the error diffusion of the image below
X is the error (a scalar (vector) difference between the original color and the gray-scale value (the color value)), and the error spreads to the right, bottom right, bottom, and bottom left, adding weights of 7/16, 1/16, 5/16, and 3/16, respectively, to the values of the four pixels. If you are interested in the algorithm, you can search online for more resources
Expected result of two methods
Original picture
"Black/White-Level" and "Colors-Level"
"Black/White-Dithering" and "Colors-Ditherring"
WiFi Demo
How to Use
- Go to the Loader_esp32wf directory, double click Loader_esp32wf.ino file to open the project.
- Choose Tools->Boards->ESP32 Dev Module in IDE menu, and select the correct COM port:Tools->Port
- Open the srvr.h file, modify the ssid and password to your actual WiFi used.
- Click the Upload icon to build the project and upload it to the ESP32 driver board.
- Open the serial monitor, set the baud rate to 115200. Then you can get the information printed like the IP of the ESP32 board.
- Open a browser on the PC or mobile phone (Note that you should connect your PC/Phone to the same network as the ESP32 board), go to the webpage with the IP address of the ESP32 board:
- There are five areas in the webpage：
- Image Operation：
Select Image file: Click the option to choose a picture from PC/phone
- Image Operation：
Level: mono: Black/White image level processing.
Level: color: Colorful image level processing (only valid for colorful display)
Dithering: mono: Black/White image Dithering processing
Dithering: color: Colorful image Dithering processing (only valid for colorful display)
Update image: Upload image to ESP32 board and display it.
- IP Information: In this are, the IP information of the ESP32 board connected is listed.
- Image Size Setting: x and y is the beginning position on the image. For example, if you select an image with 800x480 resolution, and the display you connect is the 2.13. The 2.13inch display cannot display the whole picture, the codes will crop the picture according to the resolution of displays. If you set the x and y, the codes will set the (x, y) as the being pixel where it starts to crop. w and h is the resolution of the displays choose.
Note: If you modify the x and y value, you need to click the Level or Dithering options to process the image again.
- Display Type: You should first select the display size here according to the display used.
- Image Preview: it will display the original image selected and the image processed.
- PS: The upload progress value is printed at the bottom of the webpage when uploading.
For examples:
- In area ① click Select image file to choose a picture, you can also drag the picture to the Original image area directly.
- In area ④ choose the type according to the display, for example 1.54b
- In area ① choose an algorithm to process the image, for example Dithering: color
- In area ① click Upload image to upload the image and display.
Download example
- Go to examples\ directory. copy the whole esp8266-waveshare-epd folder to [Installation directory of Arduino %LOCALAPPDATA%\Arduino15\packages\esp8266\hardware\esp8266\2.7.1\libraries, Where "2.7.1" needs to be changed according to the installed ESP8266 support package version
- Open the Arduino IDE, Find the wareshare-e-Paper examples from File->Example, and select one according to the display type.
Resources
Documentation
Demo Code
Related Resources
This is a post in Arduino Form about our SPI e-Paper thanks to ZinggJM, maybe you want to refer to.
Driver
ESP8266
FAQ
- Open epd1in13.h in the project and change the following value to 1
Try it with Google Chrome, if it still doesn't work, try another network.
- Open epd1in54.h in the project and change the following value to 1
Modify the IP network segment, as shown in the following figure.
Support
If you require technical support, please go to the Support page and open a ticket.