E Paper Kiosk

Greetings everyone,

Recently I have been interning as a Research Intern at IIIT Hyderabad in Smart City Research Center.

this is the very first photo I took inside.. and yea I know my camera glitched up*

It’s been really fun working with cool stuff and having access to makers lab, which is an absolute Hardware haven.

I’ve worked on some basic projects with neopixels and stuff which I’ve already worked with at my home with the TV ambilight setup with prismatik and Adalight FastLED.

Anyway coming to my current project here, Recently we were planning on erecting bunch of Smart Lamps Throughout campus. (here’s my beautiful artistic rendition )

You see that e-paper display right there! yes, That’s what I was tinkering with for the last few weeks and boy the display is gorgeous.

The main plan involves displaying essential data on lamp post which is also visible in broad daylight, Since e-paper display uses external light source to diffuse the screen contents rather than relying on backlight or self emissive nature of LEDs and OLEDs, This is perfect for this type of application.

Electronic Paper Display

So what the heck is Electronic Paper display. For all the folks who used/seen a kindle its basically that.

Instead of traditional Pixels with Red Blue Green pixels lighting up in a matrix to form a screen , E-paper has charged balls which move in a fluid to give us the changable content of a screen.

LED display vs E-paper

There’s this company Waveshare which makes cool little hats for raspberry pi along with big E-paper displays which work by SPI. They are pretty expensive around 5000 INR just for a 800 x 480 7 inch display.

here’s how the raw display module looks like.. pretty gorgeous on itself.

Here is some tests with using the examples to render images on the panel (notice the induvidual dots instead of having grayscale values ).

The first limitation I kinda faced when working with this panel is … the display is 1 bit color!

Digital Color

Color in digital medium is represented in bits, Usually the images you see are 24 bit. $$ 3 * 8 \textrm(bit) $$

Since e-paper display is just grayscale we only have one channel of gray values from $$ 0 \rightarrow 1 $$ For a 8bit grayscale image we scale the normalized pixel brightness. $$ (0,1)_{\textrm(PixelValue)} * 2^8 $$ To have the standard (0,255) Color range we usually see.

ps If you've seen my selfie in the beginning you'd have noticed the blocky image, This is due to low bit depth of the image. This is called Quantization

Since we dont have any grayscale values in a 1 bit color display, we have to use some clever tricks to represent grayscale values at cost of display resolution.

If you’ve seen this display comparision we don’t really notice the induvidual Red Blue and Green Subpixels as they form different color shades, The orange you see on screen isn’t really orange but a peak of Red and half peak of Green.

So if you look at the spectrum you would see something like this.

Similar to frequency domain colors appearing as something different we have a method to show grayscale values in spatial domain.

Dithering

dithering an image is a way to make an imahe appear higher fidelity than it actually is.

So let’s consider a simple scenario, we have 3 colors

1
2
3
4
5

BLACK = (0,0,0)
GRAY = (0.5,0.5,0.5)
WHITE = (1,1,1)

colors = [BLACK,GRAY,WHITE]

If we directly apply the colors without any gradient it would look very discrete (Left Sphere), While if we add a bit of noise while interpolating between the colors we can get a pseudo smooth appearance (Right Sphere).

Floyd-Steinberg Dithering

This is a very cool dithering algorithm used in GIFs and many low fidelity formats to preserve detail lossy.

I was originally planned to write my own Dithering algorithm to generate dithered bitmap (bmp) format for the Waveshare API but found out python’s pillow Python Imaging Library’s

1

Image.convert('1')

method already does basic dithering which covers my need.

So taking a screenshot of my website and passing it through the dithering algorithm we have

Even the render of my head was represented really well using dithering.

Now since this current e-ink panel supports red pigment as well I tried doing some basic point processing to fetch red values to dither and represent as well and it turned out kinda weird so we decided to completely drop using the red pigment, But it looked really cool I say it.

1
2
3
4
5

webpage = Image.open("screenshot.png").convert("RGB").transpose(Image.ROTATE_90)
webpage = change_contrast(webpage,100)
#r = webpage.split()[0] Do the point processing for red
#r.point( lambda p: 255 - (10*p) if ((p >= 200) and (p < 240)) else 255 ).convert("1").save("screenshot_r.bmp")
webpage.convert("1").save("screenshot_b.bmp")

these images are manually segmented into red and black parts

Web rendering?

So the people here wanted the thing to be connected to WiFi so it can fetch data from onem2m server of iiith. Before my plan was to use opencv or pillow itself to completly render graphs and map and export as an image, but there was a problem.

If someone want’s to update the layout or want to completly change how it looks… they have to redo the whole image generation part again, So why not go the Electron route and just render a webpage, this way it’s more powerful as it uses HTML+CSS to markup the layout.

By calling chrome headless mode

1

subprocess.run(['chromium','--headless','--disable-gpu','--screenshot','--window-size=480,800',url])

It was possible to export a screenshot of the webpage which can be easily converted and displayed.

Enclosure Design

We wanted to place the whole e-ink panel inside the metal chassy of the lamp post so I had to come up with a way to put the panel and all the electronics inside the post.

The first iteration of design included a basic box where the display can easily slide through… yea sliding through is a very very stupid idea.

The display broke as it was sliding inside and that was a very expensive mistake! (not gonna elaborate on how much I thought I was gonna be fired! )

Here’s a new design which is yet to be printed.

Final Assembly

So after designing a whole enclosure this is how it finally fits in all together. We were extremely on time crunch as people from Wi-SUN were coming in a week for evaluation, After giving it a finishing color coat it started giving the look of being profesionally made.

At this point I wanted to put everything in a docker for easy deployment incase of issues with raspberry pi or broken SD card ( I have accidentally broken some while handling this 3D print ), But again due to the time crunch I’ve decided just to pile up on systemd scripts.

For automating simple updates I’ve worked with github actions to create a self runner to auto update the bot.

Which did save alot of time by not manually ssh-ing into the pi. The worst part about the lamp enclosure is … it’s made of metal, essentially making it a faraday cage.

A Faraday cage is a device which blocks external electromagnetic signals from passing through … Since WiFi is part of the electromagnetic spectrum, It was essentially making the communication with the main router absurdly slow. Also the fact that the only way the WiFi signal can even reach the lamp was through a window.

I found out about the WiFi issue on the day the Wi-SUN people are supposed to come, Dr Aftab suggested we remove a small metal panel to allow WiFi in and well it worked for the demo.

Since we were working with this lamp during the phase of KETI’s hackathon, we decided to present this alongside our main hackathon project.

Overall it was really a fun project to work with.

Update

We won the Best Technology award in KETI (Korean Electronics Technlogical Institute) OneM2M hackathon. I did not expect we would pull this off.