In the few coming minutes, you’ll find out about epaper screens, raspberry pi, node, web components, tailwindcss, open-wc, netlify and much more :).
This short article is fairly long so for once I’ll develop a few pointers with TL;DR each time 🙂
- The hardware
- -> the screen
- -> the computer
- -> the OS
- The program
- -> the ‘backend’
- -> the frontend
- Some remarks
It is the second time I develop a dashboard for the house. We are spending so much time on reducing our carbon emissions. Tracking energy usage and also making food plans is an extremely good way to accomplish that.
This time around, I needed my dashboard to be constructed with an e-paper screen, in order to avoid the ugly backlight of a tablet, and reduce energy consumption. This is actually the final product :
In this article, I’ll let you know about how it’s built, and how that can be done it too. I will not describe everything, but point one to relevant documentations I followed. I’ll also share guidelines.
TL;DR: Get yourself a Waveshare screen, a Raspberry Pi and follow instructions.
As worthwhile physical product, everything starts with the hardware :). In order to build exactly the same dashboard, you will need:
Total is approximately 70, everything included.
I’m by using this 7.5 inch 2 colors screen from Waveshare. My initial plan was to get a 9.7inch with gray levels, but I had no experience at all with that hardware therefore i went for the safer, 50$, solution.
The initial very good news is that the screen is CRAZY thin, this is a photo to provide you with a concept :
When buying an e-paper screen, listed below are the things you need to search for :
- Refresh time. Among the cons of experiencing an e-ink screen is that refreshes usually have a while. If you would like performance, also look whether partial refreshes can be found. This is a video of mine and that means you get a concept:
- Resolution. e-ink screen of higher resolution remain very costly (in comparison to a tablet). Based on what you would like regarding the screen, you may end up getting artifacts. A good font can help you there, nonetheless it won’t do miracles either. For instance, this is exactly what my dashboard appeared as if before I put my text in bold. It is possible to clearly start to see the artifacts :
- Gray levels. My screen is two colors ( essentially, ink or no ink). Various other screen have 16 gray levels. Many others have even color. You might want to choose one particular but understand that you will be charged you in refresh time or price.
- Driver board. We’ll talk more concerning this soon but remember that not absolutely all screen include connectors and a driver board. Unless you know what What i’m saying is, be careful investing in a HAT version, otherwise you will not have the ability to utilize the screen :
This post will undoubtedly be utilizing a Raspberry Pi. Remember that the Waveshare screens have a fairly extensive documentation so that you can also choose Arduino as well as the Jatson nano in the event that you fancy it.
Merely to be clear, I’m utilizing a Raspberry Pi Zero W in my own build, and that means you don’t need crazy levels of capacity to run it.
If you are afraid of soldering, I would recommend you utilize the B version of the Raspberry as the driver board from Waveshare can directly clip on the GPIO :
WHEN I mentioned, I went for a Raspberry Pi Zero W for just two reasons :
- The proper execution factor is a lot smaller, that allows for a brilliant small setup alongside the screen
- The Zero applies to 10$, that is near nothing!
In the event you choose the 0 like me, you need to solder several cables. You shouldn’t be afraid though, everything is described here. All you have to may be the table below alongside the Raspberry GPIO.
Once you have done that, you’re just about all set! Look for a 5V adapter and switch on your Raspberry Pi! The nice thing is your screen will feed off the Raspberry which means you need only 1 alimentation. We’re prepared to proceed to phase 2!
I’ve made a decision to keep this in the hardware part, because I don’t possess much to state. What we shall wish to accomplish on our Raspberry Pi is use a default OS that’s not too old. It is possible to create and flash one here by following a instructions.
The following point you should do is follow all of the instructions described in the default Waveshare setup. Again, they’re perfectly done therefore i don’t possess much to include but when you have any issue feel absolve to drop me a note.
In the event you have to setup WiFi for the Raspberry Pi, this is actually the guide I used!
You’ll enable SPI, install the necessaries libraries and download the library and test code from Waveshare. I tested with Python.
When you have exactly the same screen when i do, you will need to run the
epd_7in5_V2_test.py script situated in
waveshare/e-Paper/RaspberryPi_JetsonNano/python/examples/! If all goes in accordance with plan and you’ve soldered everything correctly, your screen will awaken!
TL;DR: Use epaper.js on the Pi, created something around it and serve static content in the static folder :).
Our screen is awake, and we’ve a linux to utilize! Time and energy to start creating our dashboard!
I’ve used the amazing epaper.js project to generate my dashboard. The project is insanely useful. In a nutshell, it runs a static website locally and projects it on the screen using puppeteer.
It has an enormous advantage : you merely have to develop a website and deploy it on these devices! You could find the entire code for leading and back end of the project here on Github. And the web site can be acquired anytime on Netlify.
The project comprises two parts, which reside in exactly the same repository.
- The main repository which has the code which will operate on the Raspberry Pi, ‘the backend’
epaper-uifolder, that will contain our actual dashboard, the ‘frontend’.
Let’s dive into each one of the parts, but first, a word of warning:
Epaper.js can only just be operate on the raspberry. Indeed, this will depend on native libraries (the GPIO drivers) that not exist on your pc :). No problem, just something to understand (For instance, don’t set a CI on your own project on Github).
Conversely, the most recent version of Node that I possibly could operate on my raspberry is version 10.x, meaning that I possibly could not run the frontend code onto it. Again, no problem; just something to understand.
What which means is merely that I have already been developing the frontend on my computer, and the backend only on the pi.
Given that it’s clear, let’s go!
This part may be the easiest to speak about. Remember that on your own project, you may use any technology that best suits you. The only real requirement you have is that the consequence of your build lands in the
static folder of the repository to be found by the backend.
This is actually the current deployed frontend :
I made a decision to use Web Components, and my website is founded on top of LitElement and TailwindCSS. I used the wonderful open-wc library to create my project skeleton in Typescript. Those are personal choices, you might well choose whatever you like.
I picked these because through the use of Web Components I had hardly any to learn along with the essential capabilities of HTML. Because of tailwind I also didn’t need to learn much CSS :). My knowledge is bound in the front-end, having a straightforward syntax, a boring technological choice no build-chain appeared like an ideal deal. You don’t need to screw around with Webpack <3!
Another positive thing is that because I’m basically only creating a website, I possibly could use Netlify as a platform to start to see the results of might work. And gosh I really like their product!
Some what to note :
- I wrote a brief article on how best to easily use tailwind as well as LitElement
- Because it is really a personal dashboard, I needed personal data. I leave it your decision to decide where you can fetch your computer data from. Easy and simple for all of us to sync up with the girlfriend is Google Spreadsheets :). I wrote a complete post about how exactly to achieve that to sync calendars and prevent needing to use Oauth2. In a nutshell, it is possible to publish your spreadsheets online as CSV files. I really do that and ingest the info to generate my dashboard. The best thing is that the CSV files are always updated!
I created my whole dashboard through the use of
$ npm start in the
epaper-ui folder, running
$npm build each and every time I was pleased with the effect. That pushed the built version in the
static folder of my project and sent it to Github. By pulling the repository on my raspberry, I could be sure to will have the most recent version of the dashboard.
One very last thing I would like to mention before shifting may be the way I refresh my dashboard :). The epaper.js examples comes with an example with data that updates. However, that data updates from the backend to the frontend. In my own application, all of the data is pulled from the web via the frontend, meaning that I cannot utilize the same mechanism.
To resolve this issue, I utilize a early capacity for HTML itself to inform the page to refresh itself after hardly any minutes :
Based on the way you build your personal dashboard, you might not get worried by this.
Naming that part ‘the backend’ helps it be look like I’ve done a lot of work but I’ve really only been piggybacking on the fantastic work done by epaper.js.
I want to demonstrate the integral content of my ‘backend’ code :
Yep, the one thing I did so was call the epaper.js library and select the device I’m using. (Be cautious, in the event you use another style of Waveshare display you will need to change that value).
That’s enough for this content of the static folder to be successfully displayed on the screen :).
Now, you may be expecting some more things approaching. And you would be right…
The very first time I ran my dashboard (
$node index.js ) and logged off the SSH connection, I acquired just a little surprise : the application form stopped. Needless to say, I had to perform it in the backdrop.
However, it isn’t directly possible, because epaper.js supports stdin inputs (for buttons or keyboards). I looked around and made a decision to comment out the lines of code that handle stdin :). To get this done, you can continue your clone of the project on the raspberry and in
node_modules/epaperjs/index.js. You need to comment out the next line in the init function:
You can find cleaner ways, but that works for the present time.
Once that works, the next matter to do would be to ensure it is start automatically at boot of the raspberry. I’ve created something for that. It will come in two parts:
dashboard.jsfile in the main of the project.
dashboard.servicefile in the service folder of the project. To activate it, you would like to follow the normal way to develop a new service Linux. (careful, you would like to ensure that the positioning of dashboard.js in the file is correct for the system!).
Et voil! Your dashboard now runs automagically on boot of the raspberry and may be started and stopped on demand.
Additional thoughts and remarks:
- A very important factor that got me several times is an e-paper screen literally functions by projecting ink on the screen. After the ink will there be, it will not go way alone. Which means that even though the raspberry is off, the info sticks to the screen. I acquired tricked several times by this :).
- With respect to the resolution of one’s screen, you might see artifacts on the screen. Selecting a newspaper font might help there. There exists a good Reddit thread concerning this.
Overall, I’m extremely happy concerning the consequence of this side project and the options I’ve made. Picking epaper.js, open-wc and tailwind has helped tremendously to iterate fast and become productive. Having a straightforward website that I could use and deploy on Netlify anytime is a tremendous help.
It had been also great fun to create this project with the household. The gilfriend was responsible of the look of the dashboard along with the data, I built it while my 4 year old did the casing.
Because I don’t need the interactions capabilities of epaper.js, I probably could easily get gone the websockets altogether in the project and pull the web site directly from the net rather than running it locally. That might be very interesting, because then I’d automatically obtain the latest version of the dashboard each and every time I push a fresh version to Netlify. To be continued….
Be mindful! For those who have thoughts or questions, you could find me on Twitter.