I pride myself on my READMEs and find them really fun to write! It’s fully fledged with a detailed feature list, pictures, E-ink explanations, information about all of the components and more!
I thought I’d hate writing the code but with some YouTube videos and a LOT of help from the ESPhome docs, I managed to fully flesh out the firmware!
I did have a couple of issues along the way but i figured them out! (eg. I found out the hard way that ESPhome id’s can’t have hyphens..)
There’s no way to test this code yet, but after running it through the github copilot to check for any errors and triple checking it myself, it should work. Should anything go wrong when the parts arrive, I can iron them out but for now everything’s good.
(I also added M2.5 screws to the BOM as 4 are needed for the front plate)
I needed the 3d models of all the different components as something to base myself off. I managed to find files for the 1.54” E-ink display, the SEEED XIAO ESP32-C6, the TP4056, and the 2 environment sensors - the SHT40 and the SGP40 on GrabCAD.
This was the time intensive part! I made it (hopefully) super easy to put together, with 3 main parts. There’s the front plate, back plate, and the main enclosure sandwiched in the middle of the two.
The front plate is secured to the e-ink and the main enclosure via 4 screws in the corners.
The back plate is secured to the main enclosure via 4 screws in the corners that go into heatset inserts inserted in the main enclosure.
The components aren’t randomly placed! The E-Ink display has to go at the front followed by the battery. Then there’s the 2 sensors either side of the enclosure. They are placed there next to grills to allow airflow and increase the accuracy of the readings. Then there’s the TP4056 charging module right at the back which will be glued down. It also has a big cutout in the backplate for the USB-C port. (the cutout is a lot bigger than the USB-C port itself as the TP4056 module might not be flush with the bottom of the enclosure so more space gives it more wiggle room.
The microcontroller (the SEEED XIAO ESP32-C6) doesn’t have any mounting holes and I can’t glue it down as I need to access the BAT+ and BAT- pads on the bottom. This means it will be freefloating within the enclosure which will help the ease of assembly and any debugging via its USB-C port.
So I’ve made the wiring diagram using PIXLR E as it makes it super easy to add the wires and import pictures of components. It made it look quite cool I think! You can also see we’ve still got 2 GPIO pins so if I ever wanted another sensor in the future I could add one (or unlimited if its I2c!😂)
I thought I had finished the diagram but then I realised when writing this devlog that I never added the voltage divider so I spent an extra 5mins getting that into it and everything is finally all good! (I also had to update the BOM in the github repo to include the extra resistors (which i’ve already got)
I made the bill of materials in excel. It includes both USD$ and my local GBP£ but haven’t included the USD$ conversion yet as exchange rates could change so I’ll do that nearer the time of shipping.
Made the repo on github, and uploaded the bill of materials as a .csv.
Made a mockup of the device + a feature list! So the idea of this device is to be able to see my environment (temp, humidity, VOCs)at a glance along with useful info like battery % and the time. (See the WIP feature list in the photo!!) I think i’m going to get the BOM fully figured out next and then get onto the enclosure design in fusion360, before making the ESPhome code and shipping! 🤞
I think I’m done! In this last devlog, I animated the clouds and they now float up and down by 10px. The clouds are also now bigger. More text was boldened and I added some padding around the hobbies div. Also, this div I made an inline block so it doesn’t take up the whole screen and only uses the space it needs. Under coding, I added the HTML logo as well as the CSS logo which joins the JS logo. The NAV bar isn’t as ugly so the blue links have gone and they’re black now. Each item has gotten its own class so they’re now individually animated when you hover on them. Finally, the Hackclub link didn’t work so i added ‘https://’ before it and it works now. I’m ready to ship!!
Nearly there! Done a lot since the last devlog including… Changed the class from ‘esp32’ to ‘hobby-pics’ so that effects would apply to all new images with that class. Added a navbar that takes you to that section (I put sections in for each hobby within the div) and it smooth scrolls you using scroll-behavior: smooth. Then I boldened some text and changed ‘stormworks’ in the gaming section to ‘scrap mechanic’. Also added some clouds at the top which have their own class too. Nearly done but I wanna experiment with animations before shipping.
In this devlog, I decided to pause with adding main elements and started doing some nitty gritty fun stuff with CSS. I made the ‘My Hobbies’ part a DIV so i could change the background colour, add an outline and rounded edges. I also added my first image, an ESP32 which grows slightly and rotates with a transition to make it smooth when you hover! (very cool i know)
Started the Website!! The zoom workshop really helped me pick html and css back up as i’d learnt a bit a few years ago.(thanks @jenin!) In this first devlog, i’ve added a title, and some of my hobbies with a description. I want to get some images in that hopefully move if possible by next devlog!
