npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

epaperjs

v1.8.0

Published

Simple e-Paper display on a Raspberry Pi using Javascript and HTML

Downloads

28

Readme

ePaper.js
Discord

Node.js library for easily creating an ePaper display on a Raspberry Pi using HTML and Javascript.

Example weather station Example ereader gif

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.html from the static directory, 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 reboot

Install 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-browser

Node.js
Install ePaper.js

npm install -S epaperjs

Supported 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