E-ink display

It’s been a while since the last dev blog, although I feel like I didn’t make much progress. I “wasted” a lot of time programming things that in the end I had to redo. The thing is, I had to choose how I wanted to handle the communication between the web app, the phone, the ESP32, and everything else, and there are lots of ways to do it. In the end, I decided to build my own web app that only I can access, because it stores my information. Then I generate an API so the ESP32 can download the picture to display on the e-ink screen. I worked on the logic for that. Basically, I made a script that takes a screenshot of every item and sends one depending on the input. The ESP32 sends the input and the server returns the correct screenshot. The code also automatically generates a C array of the photo for the ESP32. Lastly, I organized the project, because it was getting messy.

As you can see in the first picture, the habit tracker has a frame. It can seem like just an innocent design decision, spoiler: it wasn’t. What I was going to do was simply embed the habit tracker page into the main one with an iframe, but this is how it looked (second image). It’s weird, but I just had to increase the height and that should have been it. I don’t have a screenshot, but after that it still looked bad for three reasons: the frame, the buttons and I don’t know what caused but everything was just glichy. And with an iframe I can’t fix that, because it brings the page exactly as it is and I can’t touch anything from the outside.
So I did some research about how I could import a page into my project, but only the part I wanted (in this case I didn’t want the frame or the buttons). I found fetch(). It downloads the HTML of the other page as plain text, and then DOMParser turns that text into a DOM I can modify before putting it on my page. So I keep only the .frame block, which already leaves the two nav buttons out because they live outside of it, and I switch the default view to the stats one instead of the daily checklist.
After that it didn’t look exactly as I expected, but it was a quick fix. The CSS of the habit tracker and the CSS of the copy are not the same file, so if I modify one the other doesn’t change. I just changed some font sizes and that was it.
Now the only thing I think is left (about the web part) is linking the buttons of the display with the functions I want them to do. I did this with the calendar, so it should be easy. Oh I almost forgot, the e-ink display don’t have grays so I will have to change the heatmap.
PS: next screenshot for the final result.

After lots and lots of mistakes and errors and trying to find the best way to do it, I figured it out.
Basically, I fused the two projects into the same folder so that the server can access all the local info (as you can see in the URL of the first two screenshots).
I think this is the easiest way to do it and the one that works best for me. I know there’s only 1h 27m left, but I spent like 3 hours thinking about how to implement everything together.
There are still some problems I have to solve. First of all, the /habit-tracker/ page was programmed using my phone’s resolution (as you can see in the last devblog). This may be a problem because now I basically have to copy and paste the habit tracker into the fourth menu (by “fourth menu” I mean the fourth button, the one with the fire emoji, that’s where the habit tracker goes). Since the habit tracker was programmed using my phone’s resolution, I don’t know how it’ll fit, and I don’t know how to “copy and paste” it either.
The second problem… actually, I think that’s all. It was just one big problem after all XD

I made the dashboard. To increase the streak, you have to complete all the habits. The GitHub-like grid gets darker depending on how many habits you’ve done, and below that you can see this week’s habits.
It’s designed to fit my phone’s resolution, so I’m not sure how it’ll look on other screen sizes. It’s in Spanish because the display will be in Spanish (since I’m Spanish XD)

I’ve made a web app that works as a habit tracker. I was going to make a native app, but then I thought: I’m not going to make this harder than it needs to be, I’ll just build a web app and then add a shortcut to the home screen so it feels like an app. It may be slower and you can’t store things on the phone, but it’s easier. From this web app I’ll send the data to the display. Now I’ll make the github-like grid.

I built the to-do list, though I ran into a few problems along the way. The documentation wasn’t very clear, which slowed me down. I added a function to select a task and mark it as done or undone. The selection part works, but I can’t actually mark a task as done. This is because the page is static HTML: it can only read tasks.json, a file the Python script wrote earlier. Writing back to Google Tasks needs OAuth authentication, which lives in the Python script, and that doesn’t run in the browser. I’d also like to show the time a task is due, but the Google API doesn’t expose that information.

I made this simple bottom bar so I could tell what each button does, since in the final product I’ll be using TTP223 modules, so there won’t be any emojis. What wasn’t so simple was linking the buttons to the calendar functions. I had to read through the whole docs to figure out how to do it.

I added a calendar. At first I was going to use the Google API but it was so difficult. I searched for alternatives on GitHub and found a website that lets you personalize your calendar, and then you just have to paste the code it gives you into the HTML file.

I’ve created the first screen of the project, it just shows the time and weather for now. I’m using emojis at the moment but I’ll look for black and white icons later. I wasted like 30 minutes trying to figure out what was wrong, and it turned out I just hadn’t closed a block properly lol

I sketched out the design for the app. Now that I know exactly what to do, I’ll finish it a lot faster.

I started by sketching a quick diagram of how the whole device should work. Then I built a web page with an 800×480px canvas , the exact resolution of the display. Every hour, a server renders this page, captures it as a 1-bit bitmap, and publishes it at a fixed URL. The ESP32 simply wakes up, downloads the bitmap, paints it on the e-ink panel, and goes back to deep sleep. It never runs any of the app logic itself, that’s what makes the battery last for months.