Transcription

Sponsored by Brilliant, more on them later. Do you ever go to work on something, only to find yourself hours later scrolling or watching random research videos? Well, that's what happens a lot of the times I try to work on my projects, something always throws me off track. Even when I remembered to set Do Not Disturb on my phone, I still managed to distract myself. I needed to find a solution, and that's when I stumbled on TimeShe, a Pomodoro-based gadget that promises to block digital distractions and help you focus. It sounded like exactly what I needed to try, but unfortunately, despite a successful crowdfunding campaign, the startup folded, leaving many disappointed backers empty-handed. So I thought, like this commenter, how hard could it be to make something like this myself? And that's what I exactly did, and you can too. Stick around and I'll show you how I made what I call the Focus Dial. Let's dive in. First things first, let's define design goals and few constraints. I like the form factor of the TimeShe device, so I'm keeping the LED indicator, the screen in the middle, and the glass face. But there is something that drives me nuts. It's a round device with a timer in the middle, yet you can't turn it to interact with the features. Apparently, you'll have to use the companion app, as far as I understand. That's a no for me, so for my version, I'll definitely include additional input like an encoder along with the main button. Next, I want this device to seamlessly set a focus mode on my phone, suppressing all notifications at the start and reverting back when the timer ends. I will even take it further, and during those sessions, I want to block distracting websites and apps at a network level for all my devices. Maybe this seems like overkill, but knowing how easily I get sidetracked, I'd rather go all in for 2 hours than get little to nothing done. To help me get in the zone faster and build a habit out of this, I'm thinking of creating a consistent lighting scene in my home automation that triggers each time I push start. Lastly, I want to build this out of easy to find, off-the-shelf modules, no custom PCBs, no fancy parts. This is enough of a side quest as it is, and I don't want to complicate it further. So with all that in mind, we can get started on the prototype. I put together this breadboard using an ESP32 from Adafruit paired with this LED ring, a simple OLED module, and an encoder with a switch for input. The goal here is to validate my ideas and get at least 80% of the features working before moving forward. Let's get started with an easy one to get the ball rolling. As I mentioned before, I wanted to create a repeatable home automation scene and set up some lights as indicators for people around me so they know I'm trying to get work done. To achieve this, I'm using a simple webhook automation that the ESP will trigger in Home Assistant to indicate the start and end of each timer. I added a notification and tied it to the button press on the encoder to test it. Next up was blocking distracting apps and websites at the network level. I'll show you how I'm doing this for myself, but please keep in mind that you'll need to adapt this to your own setup. I thought that it would be a good idea to have Home Assistant control this from the same automation endpoint, so if you don't want or can't configure this in a firewall, you could use something like PyHole or AdGuard to do a DNS block instead. In my case, I'm using a UDM Pro, and I recently discovered the new Unify traffic rules that let you set policies and restrictions for specific apps or groups without having to manually enter them for each thing like I used to do before. But I needed a way for Home Assistant to control this, and at the time, this was impossible through the regular Unify integration, so I decided to use a simple bash script to do this and have Home Assistant control it. I found someone on GitHub who had solved a similar problem, though their script controlled classic firewall rules, not the new traffic ones. After digging into the Unify API documentation and examining some network queries, I found the right endpoints and modified the script to log in to the console, retrieve all the rules and enable or disable the specific one. Then I added this to the automation and tested it. Later while working on this video, I updated Home Assistant and noticed that the Unify integration had added this functionality, so you have a simple switch entity to toggle the traffic rules on and off, and I totally didn't waste 3 hours on that script for no reason at all. This brings us to the third important feature, setting up focus mode on the phone seamlessly. I'll be doing this for an iPhone, but the process should be somewhat similar or even easier on Android using apps like Tasker. What we need to accomplish is once I hit the button on the device, the phone should activate a special Do Not Disturb mode and once the timer is up, it should revert back. In iOS, this can be done through something called shortcuts. I created a focus mode to suppress all notification and added this to two Siri shortcuts that toggle this mode, dim the display and change the home screen layout. Now we just need an effective way to trigger these shortcuts on the phone for each session. From Home Assistant, we can trigger Siri shortcuts on the iPhone using push notifications according to the documentation, but while this is easy to implement, it has a major flaw. It requires you to tap the notification to continue before the shortcut runs. I know this might not seem like a big deal, but for me, if I have to push the button on the device and remember to tap the notification on the phone, I might as well just do it manually. This eventually will be enough to deter me from using this altogether. I went back to look for a solution and here where things will get a bit janky. Let me explain. Basically, the only way to run a personal automation without confirmation on iOS is to use certain system triggers. But none of these made sense for my application, except maybe Bluetooth. I set this up using my AirPods as a test and it worked. When the device connects, the shortcut runs, activates the focus mode, dims the display and so on. When it disconnects, it reverts back using the second shortcut. Now I just need to replicate this with the ESP. Except it did not work at all. I tried emulating various devices like keyboard, mice, media controllers, but none of them appeared in that list, even though they showed up and were recognized in the Bluetooth pairing. I almost abandoned this idea, then I realized all the devices in the list are audio syncs, like speakers and headphones. That's why it worked with my AirPods, but not with the ESP. Apple why? This makes no sense, but at least now I knew the reason. So to fake an audio sync, I used this library that makes it super easy to set up Bluetooth audio. But I had a different problem. I started this prototype using the S3 or C3, which, like most of the ESP lineup, supports only modern BLE standard, not the Bluetooth Classic that we need for audio streaming. Luckily, Adafruit also makes the ESP Pico that supports Bluetooth Classic in the same form factor. I swapped them out and now we have a fake audio sync that spins the entire Bluetooth stack to only connect and disconnect from the phone. This triggers the personal automation without any extra intervention, and that's what I mean by the jank, but hey, it works. Now that we have all the main features working, I put together a display controller to manage and update all the UIs we need for different states. I used this cool tool I found recently called Lopaka to help me design the graphics. I'll link it down below. I also created another controller for the LED indicator to handle all the animations and reuse them. I may go into more details later, but for now, the prototype is advanced enough to move on to the mechanical design. Since I'm using off-the-shelf parts, I need to account for all the limitations they bring, so I started by arranging the components in a configuration that made sense and tried to replicate some of the elements from the timesheet product. Right away we can notice a problem. The OLED module is partially covering the LEDs. To fix this, I'll need to modify it a bit by literally cutting corners. Since the top part will make the face of the product, I need a durable transparent material for the surface. This is where you'll press to start and should be able to see through the interface like the original device. I went on Amazon and found these beaker covers made out of glass, about 50mm in diameter, and they are very close to the dimension of the LED ring. Perfect. I added this to the mock-up assembly, along with the ESP, and now the only thing missing is the input components. So like the prototype, we need an encoder and a switch. The problem is, I can't mount the top face assembly on the encoder since it's the moving part, and if I flip it to fix that, I run into other issues with the ESP and the height of the entire thing. What I need is to be able to rotate only a ring around the device while still be able to run wires through it. So I went on DigiKey and found a hollow shaft encoder ring that's the closest match to our outer dimension, around 56mm. For the switch, I'll be using a simple pushbutton mounted upside down. With all the modules arranged, I started modeling the enclosure around them as tightly packed as possible, and here's what I came up with. The face piece holds the display in the center, and these baffles are meant to separate the LEDs to avoid any light spill and create a ridge to hold the lens. I'll later put a diffuser in this channel to have a smoother light ring. Next we have this hollow stem that will be the rotational axis for the encoder, and we'll also have wires running through it to connect everything to the microcontroller. After that, I added a little platform dead center for the button, and three springs to support the assembly and provide the stiffer click. I did a few FDM prints to test a few things, especially the top shell that appears on the face of the device. After adjusting a few tolerances and iterating a couple of times, I felt it was dialed enough, so I sent the design over to the resin printer. After curing the parts, I sanded the surface with 80 grit sandpaper. Sanded off the support marks and went over the visible surfaces with 1000 grit sandpaper to prep them for the clear coat. The parts turned out great. One thing I also printed is this mold for the diffuser. While I could've have simply printed it or used a popular material for light diffusion like EVF foam or even parchment baking paper, I thought I'll try making a custom one using two-part silicone for molds. The silicone I have is already this translucent milky color, which is a great start, but since the diffuser can't be too thick, I need something else to refract the light more. To do that, I added a bit of titanium dioxide, a very popular and cheap white pigment. I think this third one looks the best so far. It looks almost like a real factory diffuser. Another thing I wanted to address before assembly is the glass lens. This is purely aesthetic, but I wanted to hide the edges of the OLED module and the LED diffuser when it's not on. I want the lens to be completely black and only let the light shine through. To achieve that, I'll use the same stuff they use to tint car windows. You can get this in film form pretty cheap, or even a spray can. I cleaned the inside surface and applied it, being careful with the bubbles. You can also use a bit of heat around the edges to help it come form. It's time to put everything together, starting with the screen. I desoldered the pins that came with it and trimmed the corners to make it fit in the facepiece. Next, I soldered some very thin gauge wire to the four pads and added the back support with a bit of black tape. This helps keep it in place and prevent the light bleed from behind the screen. Then I placed the LED rings, seated it properly and soldered wires to it as well. To finish this part of the face assembly, I added the central stem, threaded the wires through the metal and secured it to the face with some self-tapping screws. Now let's deal with the encoder ring. There are some ground leads to trim and three main pins to bend before soldering more wires. I isolated them using some heat shrink tubing and once that's done, it snaps into the bottom enclosure cap with the wires sticking out from this opening. I then installed the central ring, the bearings and previously assembled face. Few screws later and we have the entire top assembly ready for the next step. After placing the bottom on the tiny platform and wrestling the rest of the wires into place, I was ready to close off this section. This prevents the switch from moving and keeps the wires from interfering with the rest of the assembly. To close the bottom, I added three compression springs and sealed it with the bottom piece. All what's left now is to add the lens and screw on the face ring. And here are the final shots. Now that you've seen what it looks like, I want to walk you through how it works and how the code is set up. But before we do that, I want to address a question that I get all the time on this channel. How do I get started building skills for projects like these? For me, the best way to learn is through discovery and figuring things out as I encounter them. As for resources I'd recommend, that's where today's sponsor, Brilliant, comes in. Brilliant is a platform where you learn by doing, offering thousands of interactive lessons in math, data analysis, programming and AI. You can build valuable knowledge from the ground up in just a few minutes a day. Their interactive problems let you experiment with concepts making what you learn stick far better than passively absorbing information. What I appreciate about Brilliant is their bite-sized lessons help build in lasting habits, just like what I'm trying to do with the focus style. Lately, whenever I had a few spare minutes, I've been trying to solidify some foundational math concepts that I didn't fully grasp before. Seeing these concepts come to life through interactive lessons make learning both enjoyable and even more effective in my opinion. If you're interested in learning new things and building your skills, I recommend checking out Brilliant. To try everything they have to offer, free for a full 30 days, visit brilliant.org slash Saleem or scan the QR code on screen. I will also leave a link for you in the description to get 20% off the premium annual subscription. Thanks to Brilliant for making this video possible. Now let's get back to the project. After the splash screen, the device checks for previous settings. If none found, it transitions to the provision state. Here the ESP serves the page in AP mode, so you can give it to Wi-Fi, the webhook URL, and pair it to Bluetooth if you want to use the junky trigger. Once provisioning is complete, we transition back to the idle state indicated by the slow breathing animation. To adjust the session duration, you can use the encoder ring and save your setting by pressing once on the main button. After a few minutes of inactivity, the device enters the sleep state, where it turns off the LED and screen, and any input wakes it back up to idle, where you can start a session by pressing once on the main button. When the timer starts, the network controller initiates both the webhook and Bluetooth tasks at the same time, and starts the countdown using this decaying animation to represent the remainder of the duration. You can pause the timer by pressing once, or cancel it all together by pressing twice. Holding down the main button for a few seconds brings out the reset state that allows you to erase everything and trigger provisioning again. I've tried to keep the project organized and modular for easy customization, but I'm sure there are many ways to improve it. I won't go into all the details here, but you can check out the code in the link below along with the files and build instructions as usual. To wrap up, here are a few mistakes and things to improve for next time. First, I underestimated the space needed for wiring, and this made the assembly somewhat challenging. Again, I said this exact same thing last time, but some of these parts are very thin, and this can lead to potential print issues and blemishes on the surface. In the pursuit of replicating some of the features from the commercial product, I made the assembly more complicated than it should. If you prefer something simpler, you can use a regular encoder with the exact same prototype we did earlier and just make a basic enclosure for it. Despite all these challenges, it was a very valuable learning experience and I had a lot of fun making this. If you're interested in a well-designed smart knob project, check out this one by Scott. It uses a brushless gimbal motor and lets you dynamically program the detent and haptic feedback. Very cool. That's it for this one. Thanks again to Brilliant for sponsoring the video, and as always, thank you for watching. I will see you in the next one.