<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Raspberry Pi on Making Clean Tech</title><link>https://nunrg.eu/tags/raspberry-pi/</link><description>Recent content in Raspberry Pi on Making Clean Tech</description><generator>Hugo -- 0.136.5</generator><language>en-us</language><copyright>2024 Franci Kopač</copyright><lastBuildDate>Wed, 13 Nov 2024 12:12:09 +0100</lastBuildDate><atom:link href="https://nunrg.eu/tags/raspberry-pi/index.xml" rel="self" type="application/rss+xml"/><item><title>A Minimalist Digital Photo Frame Using 7-color E-paper</title><link>https://nunrg.eu/posts/epaper_7color/</link><pubDate>Wed, 13 Nov 2024 12:12:09 +0100</pubDate><guid>https://nunrg.eu/posts/epaper_7color/</guid><description>How I built a minimalist digital photo frame using a 7-colour e-paper display, a Raspberry Pi and Floyd-Steinberg dithering.</description><content:encoded><![CDATA[<p>You can support me by <a href="https://medium.com/@francikopa/a-minimalist-digital-photo-frame-using-7-color-e-paper-9dacde085464">reading this article on Medium</a></p>
<p><img loading="lazy" src="/images/epaper/7color.jpg" alt="Picture of the finished device"  />
</p>
<p>When researching the e-paper displays for the art project described <a href="https://nunrg.eu/posts/lowpowerepaper/">here</a>, I bought a <a href="https://www.waveshare.com/5.65inch-e-paper-module-f.htm">Waveshare ECP 600x488 7-color E-paper Display</a> (just a normal link, I&rsquo;m not making any money with this), but ended up never using it. I really try to avoid stuff piling up in my drawers, so I decided to use an old (vintage: 2011 😀) Raspberry Pi 1B I had lying around too and build a simple photo frame.</p>
<h2 id="using-raspberry-pi-to-control-the-e-paper-display">Using Raspberry Pi To Control the E-paper Display</h2>
<p>First, <a href="https://www.tomshardware.com/reviews/raspberry-pi-headless-setup-how-to,6028.html">set up a headless Pi</a> using Raspberry Pi OS Lite.</p>
<p>Next, you have to wire the display to the Pi header. The <a href="https://www.waveshare.com/wiki/5.65inch_e-Paper_Module_(F)_Manual#Working_With_Raspberry_Pi">Waveshare Wiki</a> instructions are pretty good and the setup should work out of the box for most people.</p>
<p>I had to make a few changes for my setup, because I wanted to use my old Raspberry Pi 1B to keep it from the e-waste bin. But it has different GPIO pins, so I ended up using the SPI pins on the Pi 1 and GPIO0, GPIO2, and GPIO3 for the DC, RST, and BUSY signals. This required a change in the <code>/RaspberryPi_JetsonNano/python/lib/waveshare_epd/epdconfig.py</code> file. Under <code># Pin definition</code> I changed the defs this way:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"><span style="display:flex;"><span> <span style="color:#75715e"># Pin definition</span>
</span></span><span style="display:flex;"><span>    RST_PIN  <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;WPI2&#34;</span>
</span></span><span style="display:flex;"><span>    DC_PIN   <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;WPI0&#34;</span>
</span></span><span style="display:flex;"><span>    CS_PIN   <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;WPI10&#34;</span>
</span></span><span style="display:flex;"><span>    BUSY_PIN <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;WPI3&#34;</span>
</span></span><span style="display:flex;"><span>    PWR_PIN  <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;WPI1&#34;</span>
</span></span><span style="display:flex;"><span>    MOSI_PIN <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;WPI12&#34;</span>
</span></span><span style="display:flex;"><span>    SCLK_PIN <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;WPI14&#34;</span>
</span></span></code></pre></div><p>This enabled the Waveshare e-paper library to work with my old Pi. If you will be using a newer Pi (2 or higher, with the 40-pin header), you don&rsquo;t need to do this.</p>
<p>Now just run the <code>/RaspberryPi_JetsonNano/python/examples/epd_5in65f_test.py</code> file to see if everything works.</p>
<h3 id="preparing-the-image-files-for-display">Preparing the Image Files for Display</h3>
<p>The 7-color e-paper display works differently than the normal LCD displays. Instead of every pixel having an RGB value, each pixel can only display one of the seven available colors: black, white, green, blue, violet, yellow, and red. Then there is the fixed 600x488 pixel resolution. Finally, the Waveshare library is written to accept bitmap (*.bmp) files only.</p>
<h4 id="color-conversion">Color Conversion</h4>
<p>The 7 color limitation means we have to do a color conversion to be able to display the pictures on this display. Selecting simply the nearest color for each pixel will give pretty underwhelming results, so we need a better method, called Floyd-Steinberg dithering. <a href="https://scipython.com/blog/floyd-steinberg-dithering/">This is a very good explanation of it.</a></p>
<p>You could code this yourself, but there is a lovely program called <a href="https://www.imagemagick.org/">ImageMagick</a> that will take care of this for us. But first we need an file that contains only the colors we need. Luckily, the Waveshare library comes with example pictures and you only need this one: <code>RaspberryPi_JetsonNano/python/pic/5in65_n0.bmp</code>, just copy it to the folder you will be using.</p>
<h5 id="select-the-files">Select the Files</h5>
<p>This is a pretty obvious first step—collect all the pictures you want displayed on your photo frame. In my case, I did a keyword search in my Google Photo account and simply exported all the results to a temporary directory. Then I did a quick scroll through to delete some photos I did not want to include. Since I was dealing with about 7000 photos, &ldquo;quick&rdquo; was a relative term, but it only took a couple of hours.</p>
<h5 id="do-the-conversion">Do the Conversion</h5>
<p>First install ImageMagick (I used <code>winget install ImageMagick.Q16-HDRI</code> on my windows PC). Next, run the following command-line command (replace the folder name accordingly):</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>magick *.jpg -resize 600x488 -dither FloydSteinberg -define dither:diffusion-amount<span style="color:#f92672">=</span>85% -remap <span style="color:#e6db74">&#34;folder/your/color/definition/file/is/in/5in65_n0.bmp&#34;</span> BMP3:images.bmp
</span></span></code></pre></div><p>This opens all the JPEG files in your folder, resizes them to max 600x488 pixels (leaving the unused space blank, so the aspect ratio stays correct), applies the Floyd-Steinberg dithering using the specified file, and, finally, saves them as bitmap files using the given filename, to which the sequence number of the file is appended.</p>
<p>Of course, there are many other ways of doing this, but this worked for me.</p>
<h5 id="doing-the-conversion-in-batches">Doing the Conversion in Batches</h5>
<p>ImageMagick is a very powerful program, but once you convert more than about 1000 pics at once, it will create a crazy amount of temporary files and the conversion itself will take a LONG time. So it&rsquo;s best to limit the conversion to batches of about 500-2000 files. This depends on your computer: 2000 pics took almost an hour on my rather new and quite powerful computer, producing over <strong>hundred GBs</strong> of temporary files in the process.</p>
<p>I think the best way is to copy all the image files to a folder called <code>todo</code> first. Then you copy the first batch of, say, 1000 files to your working folder. You then run the conversion, wait until it completes, and then copy everything but the resulting BMP files to the <code>done</code> folder. Then copy the next 1000 files, run the conversion again, but add &ldquo;_1&rdquo; to the result filename. Repeat, incrementing the suffix, until the <code>todo</code> folder is empty.</p>
<p>Congratulations, you now have a  large pile of bitmap files suitable for displaying on the 7 color e-paper display 😀 All you have to do now is copy it to a folder of your choice on the Raspberry Pi.</p>
<h3 id="the-python-code">The Python Code</h3>
<p>The code to display the files we just prepared is quite trivial, I simply copied the <code>/RaspberryPi_JetsonNano/python/examples/epd_5in65f_test.py</code> demo code and removed all the unnecessary parts. Then I added the code to be able to display bitmaps that don&rsquo;t fill the whole screen. Finally, I added random selection to keep the files from repeating too quickly. The code uses Pillow and you should take care to use proper file handling or you will have problems.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"><span style="display:flex;"><span><span style="color:#f92672">import</span> sys
</span></span><span style="display:flex;"><span><span style="color:#f92672">import</span> os
</span></span><span style="display:flex;"><span><span style="color:#f92672">import</span> random
</span></span><span style="display:flex;"><span><span style="color:#f92672">import</span> logging
</span></span><span style="display:flex;"><span><span style="color:#f92672">import</span> time
</span></span><span style="display:flex;"><span><span style="color:#f92672">from</span> PIL <span style="color:#f92672">import</span> Image
</span></span><span style="display:flex;"><span><span style="color:#f92672">import</span> traceback
</span></span><span style="display:flex;"><span><span style="color:#75715e"># Imports the Waveshare library</span>
</span></span><span style="display:flex;"><span>libdir <span style="color:#f92672">=</span> os<span style="color:#f92672">.</span>path<span style="color:#f92672">.</span>join(os<span style="color:#f92672">.</span>path<span style="color:#f92672">.</span>dirname(os<span style="color:#f92672">.</span>path<span style="color:#f92672">.</span>dirname(os<span style="color:#f92672">.</span>path<span style="color:#f92672">.</span>realpath(__file__))), <span style="color:#e6db74">&#39;lib&#39;</span>)
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">if</span> os<span style="color:#f92672">.</span>path<span style="color:#f92672">.</span>exists(libdir):
</span></span><span style="display:flex;"><span>    sys<span style="color:#f92672">.</span>path<span style="color:#f92672">.</span>append(libdir)
</span></span><span style="display:flex;"><span><span style="color:#f92672">from</span> waveshare_epd <span style="color:#f92672">import</span> epd5in65f
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e"># Let&#39;s keep the log short and only collect warnings. Use levels &#34;INFO&#34; or &#34;DEBUG&#34; for setup.</span>
</span></span><span style="display:flex;"><span>logging<span style="color:#f92672">.</span>basicConfig(level<span style="color:#f92672">=</span>logging<span style="color:#f92672">.</span>WARN)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">try</span>:
</span></span><span style="display:flex;"><span>    logging<span style="color:#f92672">.</span>info(<span style="color:#e6db74">&#34;Random files&#34;</span>)
</span></span><span style="display:flex;"><span>    
</span></span><span style="display:flex;"><span>    <span style="color:#75715e"># Initialize the display driver</span>
</span></span><span style="display:flex;"><span>    epd <span style="color:#f92672">=</span> epd5in65f<span style="color:#f92672">.</span>EPD()
</span></span><span style="display:flex;"><span>    logging<span style="color:#f92672">.</span>info(<span style="color:#e6db74">&#34;init&#34;</span>)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">#The forever loop</span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">while</span> <span style="color:#66d9ef">True</span>:
</span></span><span style="display:flex;"><span>        logging<span style="color:#f92672">.</span>info(<span style="color:#e6db74">&#34;read bmp file&#34;</span>)
</span></span><span style="display:flex;"><span>        image_folder<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/the/folder/with/the/bitmaps/&#34;</span>
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">#Randomly select the file from the folder</span>
</span></span><span style="display:flex;"><span>        random_file<span style="color:#f92672">=</span>random<span style="color:#f92672">.</span>choice(os<span style="color:#f92672">.</span>listdir(image_folder))
</span></span><span style="display:flex;"><span>        logging<span style="color:#f92672">.</span>info(<span style="color:#e6db74">&#34;Chosen file: &#34;</span> <span style="color:#f92672">+</span> image_folder <span style="color:#f92672">+</span> random_file)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">#This is important: if you don&#39;t use proper file handling using &#34;with&#34;,</span>
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">#the file stays open and displaying the next file will fail</span>
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">with</span> Image<span style="color:#f92672">.</span>open(image_folder <span style="color:#f92672">+</span> random_file)<span style="color:#f92672">.</span>convert(<span style="color:#e6db74">&#39;RGBA&#39;</span>) <span style="color:#66d9ef">as</span> bitmap:
</span></span><span style="display:flex;"><span>            <span style="color:#75715e">#First set up a white background</span>
</span></span><span style="display:flex;"><span>            Himage <span style="color:#f92672">=</span> Image<span style="color:#f92672">.</span>new(<span style="color:#e6db74">&#39;RGB&#39;</span>, (epd<span style="color:#f92672">.</span>width, epd<span style="color:#f92672">.</span>height), <span style="color:#ae81ff">0xffffff</span>)
</span></span><span style="display:flex;"><span>            <span style="color:#75715e">#Get image dimensions from the bitmap file</span>
</span></span><span style="display:flex;"><span>            width, height <span style="color:#f92672">=</span> bitmap<span style="color:#f92672">.</span>size
</span></span><span style="display:flex;"><span>            <span style="color:#75715e">#Paste the image on the middle of the white background</span>
</span></span><span style="display:flex;"><span>            Himage<span style="color:#f92672">.</span>paste(bitmap, (int((<span style="color:#ae81ff">600</span><span style="color:#f92672">-</span>width)<span style="color:#f92672">/</span><span style="color:#ae81ff">2</span>), int((<span style="color:#ae81ff">488</span><span style="color:#f92672">-</span>height)<span style="color:#f92672">/</span><span style="color:#ae81ff">2</span>), int((<span style="color:#ae81ff">600</span><span style="color:#f92672">-</span>width)<span style="color:#f92672">/</span><span style="color:#ae81ff">2</span>)<span style="color:#f92672">+</span>width, int((<span style="color:#ae81ff">488</span><span style="color:#f92672">-</span>height)<span style="color:#f92672">/</span><span style="color:#ae81ff">2</span><span style="color:#f92672">+</span>height)))
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">#Initialize the display</span>
</span></span><span style="display:flex;"><span>        epd<span style="color:#f92672">.</span>init()    
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">#Display the bitmap on background</span>
</span></span><span style="display:flex;"><span>        epd<span style="color:#f92672">.</span>display(epd<span style="color:#f92672">.</span>getbuffer(Himage))
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">#Turn off the display internals and wait 10 minutes before you show the next pic</span>
</span></span><span style="display:flex;"><span>        logging<span style="color:#f92672">.</span>info(<span style="color:#e6db74">&#34;Goto Sleep...&#34;</span>)
</span></span><span style="display:flex;"><span>        epd<span style="color:#f92672">.</span>sleep()
</span></span><span style="display:flex;"><span>        time<span style="color:#f92672">.</span>sleep(<span style="color:#ae81ff">600</span>)
</span></span><span style="display:flex;"><span>    
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">except</span> <span style="color:#a6e22e">Exception</span> <span style="color:#66d9ef">as</span> e:
</span></span><span style="display:flex;"><span>    logging<span style="color:#f92672">.</span>info(e)
</span></span><span style="display:flex;"><span>    
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">except</span> <span style="color:#a6e22e">KeyboardInterrupt</span>:    
</span></span><span style="display:flex;"><span>    logging<span style="color:#f92672">.</span>info(<span style="color:#e6db74">&#34;ctrl + c:&#34;</span>)
</span></span><span style="display:flex;"><span>    epd5in65f<span style="color:#f92672">.</span>epdconfig<span style="color:#f92672">.</span>module_exit(cleanup<span style="color:#f92672">=</span><span style="color:#66d9ef">True</span>)
</span></span><span style="display:flex;"><span>    exit()
</span></span></code></pre></div><p>Insert the image path as needed, then run and check if it works.</p>
<h3 id="set-up-the-pi-to-run-unattended">Set Up the Pi To Run Unattended</h3>
<p>If everything works as intended, <a href="https://www.dexterindustries.com/howto/run-a-program-on-your-raspberry-pi-at-startup/">set up the Pi to auto-run the code on startup using this handy guide</a>. I like the SYSTEMD method best.</p>
<p>Once everything works well after you reboot the Pi, don&rsquo;t forget to <a href="https://learn.adafruit.com/read-only-raspberry-pi/overview">turn on the Overlay File System</a> to prevent SD card corruption if the power goes out unexpectedly.</p>
<h2 id="putting-everything-together">Putting Everything Together</h2>
<p>You now have an e-paper display showing beautiful pictures next to a Raspberry Pi. But it&rsquo;s not a digital photo frame yet, it needs some kind of a housing first. I decided to use a simple <a href="https://www.thingiverse.com/thing:922740">3D-printed VESA 75 mm case</a> for my Pi and then designed a <a href="https://www.printables.com/model/1072040-stand-for-565-7-color-waveshare-e-paper-with-vesa">simple stand to hold everything together</a>.</p>
<figure>
    <img src="/images/epaper/stand.png" alt="The stand from the back">
    <figcaption>You need to glue the two parts together using a drop of superglue</figcaption>
  </figure>
  
<h2 id="conclusion">Conclusion</h2>
<p>The first thing anybody will probably ask is: Why? Why use a strange display with a rather low resolution and only 7 colors to display your family photos? Without even keeping it low-power?</p>
<p>The answer is a bit complicated, but I can explain it best like this:</p>
<ul>
<li>Constraints spur creativity.</li>
<li>It&rsquo;s not about the resolution or color fidelity, it&rsquo;s about the pictures.</li>
<li>The grainy dithered images have a nice rough and timeless vintage feel to them. They give a new quality to the images I saw many times before.</li>
<li>The slow tempo of changing images does not demand your attention. It is a decor item, not another gadget to waste time with.</li>
</ul>
<p>And I got to rescue an 13-year old Raspberry Pi from the drawer in the process 😄</p>
<p>If you found this article useful, you can buy me a beer <a href="https://paypal.me/FranciKopac?country.x=SI&amp;locale.x=en_US">here</a>.</p>
]]></content:encoded></item></channel></rss>