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.