Node.js library for easily creating an ePaper display on a Raspberry Pi using HTML and Javascript.
- Render HTML DOM onto ePaper display
- Simple and extensible Javascript and WebSocket API
- Supports multiple Waveshare ePaper Displays
- High performance, native c++ hardware access
Working with the API
Create static/index.html. The contents of this webpage will be rendered onto the ePaper display.
<!DOCTYPE html>
<html lang="en">
...
<body>
<h1>Hello from ePaper.js</h1>
<script>
// connect to the WebSocket API
const ws = new WebSocket('ws://localhost:8080');
ws.addEventListener('open', () => {
// draw contents of DOM onto ePaper display
ws.send('render');
});
</script>
</body>
</html>From Node.js initialize ePaper.js. This does the following:
- Creates a webserver that serves
index.htmlfrom thestaticdirectory, or serves a page from an external web server - Loads index.html in a headless instance of Chromium, using Puppeteer
- Creates a WebSocket API that the frontend can use to trigger a display refresh, or perform custom actions
- Renders the contents of the browser DOM onto the ePaper display
const { init } = require('epaperjs');
init();Additional Configuration
Additional Configuration Options
const { devices, init } = require('epaperjs');
init(devices.waveshare4in2, {
webPort: 3000, // WebServer Port
websocketPort: 8080, // WebSocket API Port
staticDirectory: 'static', // Directory to serve frontend from
skipWebServer: false, // If set to true will not create a local web server
url: `http://localhost:3000/index.html`, // Initial URL to load
enableDithering: true, // If set to true, a dithering algorithm will be applied to approximate mid-tones
});Extend the server side WebSocket API
const { devices, init } = require('epaperjs');
const render = (page, ws) => {
// Forward frontend console output to Node.js console
page.onConsoleLog(console.log);
// When recieving 'render' from frontend, update display
ws.on('message', async (message) => {
if (message === 'render') {
await page.display();
}
});
// forward keypresses to the frontend over WebSocket
process.stdin.addListener('keypress', (key, data) => {
if (data.name === 'left') {
ws.send('left');
}
if (data.name === 'right') {
ws.send('right');
}
});
};
init(devices.waveshare4in2, {}, render);Examples
See the examples directory
- weather-station: This creates and example weather station display
- ereader: An ereader that reads epub files and uses the left and right keypresses to change pages
- 4gray: A demonstration of the 4gray capabilities
- dithering: A demonstration of the dithering feature
Installation
Raspberry PI
Enable SPI
sudo raspi-config
# Choose Interfacing Options -> SPI -> Yes to enable SPI interface
sudo rebootInstall Dependencies
# Install latest Node.js LTS
curl -sL install-node.now.sh/lts | sudo bash
sudo apt-get update
# Install wiringpi
wget https://project-downloads.drogon.net/wiringpi-latest.deb
sudo dpkg -i wiringpi-latest.deb
#You will get 2.52 information if you've installed it correctly
gpio -v
# Remaining dependencies
sudo apt-get install -y build-essential chromium-browserNode.js
Install ePaper.js
npm install -S epaperjsSupported Hardware
| Device | Black / White | 4 Gray | Dithering |
|---|---|---|---|
| Waveshare 4.2" | B/W only | ||
| Waveshare 7.5" v2 | |||
| Waveshare 3.7" hat | B/W only | ||
| Waveshare 2.13" hat v2 | |||
| Waveshare 2.13" bc | |||
| Waveshare 2.7" | Partial |
Adding Support For Additional Displays
It's easy to extend ePaper.js to support additional Waveshare devices. Displays from other manufacturers should be possible to support as well, as long as there is a C / C++ driver available.
If you would like to request support for another display, please open an issue with the title 'Add support for <Device Make \ Model>'. If you're a developer and have extended support yourself, put up a pull request!
Feature Backlog
- [x] Add support for portrait or landscape display (rotate 90 deg)
- [ ] Add support for remaining Waveshare SPI ePaper displays
- [x] Implement 4 Color Grayscale
- [ ] Implement Red / White / Black Color Mode
- [ ] Implement Yellow / White / Black Color Mode
- [ ] Implement Partial Refresh