SKAR: a Robotic Desk Companion

Are you locked inside your room, sitting in front of the monitor, vigorously slamming the keys of your keyboard to code the next Boston Dynamics Spot or TikTok, pondering what is even happening outside of this realm you are in? Well, I have just the instructable for you, my friend, because I will guide you through creating your own amazing robotic desk companion.

Your little robotic companion will have a small TFT touchscreen powered by an ESP32. It will gaze at you with a pair of blinking cartoon eyes that react to the weather. Changing colour based on the temperature and tearing up when it’s raining. A quick tap on the screen will provide you a more detailed forecast screen, all pulled live from the OpenWeatherMap API.

So buckle up and prepare to finally have a friend who is not imaginary!

1. ESP32 development board
2. 320x240 3.2" TFT ILI9341 LCD touchscreen
3. Step-down converter from 5V to 3.3V
4. Female USB-C module
5. Perfboard (at least 70x50mm)
6. Female pin headers
7. 2x 20-pin* (for the ESP32)
8. 1x 14-pin (for the LCD display)
9. 1x 3-pin (for the step-down converter)
10. 10x M3x12 self-tapping screws
11. A 3D printer with some material to print
12. A micro USB cable for power and programming
13. Weather API key from OpenWeatherMap.org
14. A bit of patience and crippling loneliness (optional)

*The 20-pin headers will be used for the ESP32, which technically has 38 pins, so a 19-pin header would be more optimal, but I found it to be less of a hassle to just use the 20-pin.

Also for the screws and pin headers I included the exact numbers, but I highly advise to buy some more just to be safe in case for example a screw decides to play hide and seek for a couple of days.

To model the shape of our friend, I have used Fusion 360, which is great news for you, because I can share the Fusion files, which are then easily editable, in case you decide to alter something. I would very much recommend this, at least for the embossed name on the top. Moreover, you can try to see all the different colour combinations of the files before actually printing them, and you can make cool little renders (without the need for a beefy PC, because Fusion does rendering in the cloud)

Overall, the enclosure is made of 5 parts, which can mostly be printed with very few supports from some basic PLA. For me, the prints took a little over 4 hours in total (on my Ender 3V3 SE), so they are not too filament and time-hungry either.

All of the parts can be printed at 0.2 layer height and any infill density you want (I printed them at 10% and they work just fine, so perhaps to lower your plastic usage, you could also go very low infill like me). The "screen bracket front" and "screen bracket back" can be printed without any supports at all, while the "bottom left part", "top right part", and the "back cover" have to be printed with supports. I printed them with organic ones, because they are easier to remove and also don't mess with other surfaces, which is quite crucial, as everything is quite a tight fit. Furthermore, some slicers might try and convince you to put supports even inside the screwholes, so tell them not to do that, as that will cause you more trouble than merit.

Down below are the STLs, which you can also find on here my Printables profile and the Fusion files.

Continuing the theme of how awesome Fusion 360 is, I created the schematic for the circuit using the electronics designer functionality inside Fusion. So I could keep all the files nicely placed in one cloud folder accessible from anywhere. What I meant to say is that I would genuinely recommend using Fusion, because I have been using it for quite some time to model all of my funky 3D creations, and it is really nice and convenient, but I digress.

Since there is a very high chance you will be only able to buy a perfboard that is larger than the specific dimensions I mentioned, you will have to make it smaller in order to make it fit in the enclosure. This process is quite straightforward, as you just need a sharp object to scar a line across the perfboard and then gently bend in along this line, and it should nicely break into two pieces, one of which you are going to use. You can also maybe sandpaper the breakline down afterwards, as it can be quite sharp in places, and cutting yourself is not nice (at least that is what my therapist said).

After you are done breaking the perfboard, it is time to get to soldering. It is easiest to first solder the female header pins, as those will dictate where your large components will be.

Since the LCD is the largest component of them all, I placed the female 14-pin header completely to the side as it is visible on the picture (this is important, otherwise your creation might not fit in the enclosure). To make the soldering easier, I used the extra pin header I had and placed it at the other end, so the perfboard was basically sitting on those two. This ensures the headers are up straight and also as close to the perfboard as possible.

After that is done, I did the same for the two 20-pin headers for the ESP32, I placed them two pin holes away from the LCD header, so that there is enough space for routing wires, but also it is as close to the side as possible, as the USB programming port is there.

Next, solder the step-down header on the same opposite side as the ESP32 but opposite to where the LCD pins are peeking out.

Now comes the part that took me the most time, which is soldering the individual wires to make the connections from the LCD to the ESP32. Here, I would advise taking my photos as an example of how it should not really look, because my soldering skills are not the sharpest. Otherwise, just follow the schematic and have a systematic approach. I first connected all of the power lines, as those are easy to recognise while also very crucial. Afterwards, I went from left to right on all of the LCD pins I needed to connect.

The last step is soldering the USB-C for powering the robot. Here, you simply use the 5V and GND from the module and leave the data lines floating. Also, make sure you leave the wires quite loose, as the USB-C module will be pressed into the back cover, so if they are too short, removing it will be a bit annoying.

The assembly is quite easy and fast once all of the models are printed and the electronics are soldered.

First, you take the front and back bracket for the screen, snap them onto the screen and connect them using 4 of the self-taping screws. Once the bracket is screwed together onto the screen, all that is left to do is to press the bracket into either on of the side parts, than press on the other sidepart. Once that is done, you can put the perfboard into the enclosure by sliding the pins into the female header. Since the perfboard is inside we can take the USB-C module and put it into the little cavity on the left bottom corner of the back cover. Lastly press in the back cover and screw the 6 remaining screws into the holes on the side. (with my printer the screws were not even necessary, as the whole assembly held together with the tight press fits)

Now comes the programming part. If you are not a big fan of the programming and just want to get it working than here is the link to the github repo, but if you want to learn a bit about how your friend works and interacts with you (so you can finally understand a conversation between you and someone else) please stay.

As you noticed from the pictures, we are going to be programming two different screens. The main one is going to display two cute little eyes (coloured based on the temperature), which will stare very deeply into your timid little soul. The second one will show a detailed forecast with exact temperature and cloudiness for the upcoming hours. So let's get this started!

Libraries needed:

To get everything working smoothly, we’ll need a few libraries. Most of them are very common, and you should be able to install them from the Arduino Library Manager:

1. TFT_eSPI: This one does all the heavy lifting when it comes to talking to the display. Make sure to configure the User_Setup.h file in the library by uncommenting the ILI9341 display option and then writing all of the connections from the schematic into the pins section.
2. ArduinoJson: Used to parse all of the HTTPS data received from OpenWeatherMap.
3. WiFi + WiFiClientSecure: These libraries will be used to connect to the internet and to

Built-in libraries:

1. SPIFFS + FS: These are the libraries you will need to save the touch calibration file.
2. SPI: This comes built-in with Arduino and is used for fast communication with the display.

TFT_eSPI setup:

As I already mentioned briefly, this library requires an additional step of configuration. Once you have installed the library through the Arduino Library Manager, open up File Explorer and navigate to the location of your Arduino folder. Once there, go to libraries/TFT_eSPI/. In this folder, look through the files and find the one called User_Setup.h and open it in your preferred text/code editor.

As you can see, the file has 4 main sections, but we will need to alter stuff only in the first two, where one is for selecting the display driver and the other is for specifying the pin connections between the ESP32 and the LCD display.

In the first section, make sure you have only uncommented the line "#define ILI9341_DRIVER" (for me it was on line 4,5 but this could differ). In the second section comment out everything except the ESP32 Dev Board setup (on lines 206-212). You can check the connections with the schematic, but they should be set as follows:

Once you have implemented all of these changes, make sure to save the file. That is all for the TFT_eSPI setup.

Include files:

Apart from the libraries already mentioned, there are two files you need to include in the same folder you have your project, which are secrets.h and icons.h. The secrets header file is crucial for saving all of the stuff we need for connecting to the WiFi and OpenWeatherMap API. Here is the template for it (make sure to keep the variable names the same, otherwise they won't be recognized in the main Arduino code):

The icons header file is only a helper file for drawing icons on the second screen (meaning it only stores the bitmaps). You can copy this file from the GitHub repo, as the code itself is not special.

CA certificate:

Since we will be using the HTTPS connection, we need to store the CA certificate of the server we are connecting to. In this case, you can use the certificate I extracted, as you will also be accessing just the OpenWeatherMap; however, if you want to find the certificate of a different server/site, here is a very good tutorial on how to do exactly that.

Constants and global variables:

Now we will define the most crucial variables for the whole GUI. Firstly, there are the touch calibration settings. The CALIBRATION_FILE name is not too important to us, as it is just a random name for the ESP32 to be able to store and retrieve the calibration data from its SPIFFS. The line below is a little more important because it dictates whether the calibration happens only once or during every boot-up of the screen. It is also very useful just in case you have calibrated the touch system poorly and want to recalibrate it.

Next, we have the screen dimensions, which are very much set and should not be changed. Lastly, we have the eye configuration. The X and Y constants refer to the top left coordinate of any object we are going to be drawing, since we are using the default datum (here are all the possible datums which can be set).

Custom data structures:

Since we are going to be concerned with the displayed eyes and the forecast, I figured it would be quite useful, perhaps to create some custom data structure to store the data we need in a more manageable manner than just an endless number of single variables.

The eyeState is a simple variable that is going to keep track of the current state of the eyes. The eyes array will store all of the data of the left and right eyes, together with the method to reset the eyes to their initial state. Lastly, the forecast array will store all the forecasts for the upcoming four 3-hour blocks.

Touch calibration:

Now comes the calibration of the touch system. If you feel a little lost in this code don't worry you don't have to change anything inside of it and it is basically just a quick function which starts the SPIFFS system, checks if there already is a valid calibration file and in the case that there is none it starts the calibration (asking the user to click on one arrow in each of the screen corners) and later saves it.

Fetching data:

Another undoubtedly crucial function is the one for fetching the results from the API. This function creates an HTTPS connection, sends the request for the data we want, and most importantly, parses the data we have received.

Drawing eyes:

I am sure you have seen that a lot of the popular desktop robots have the cute little eyes that move around, so we are going to be implementing the exact same thing. And you know what they say, the eyes don't lie, chico.

Setup and loop

Great work! You have all of the components we need for the app to function. Now let's piece them together inside the setup and loop function to bring our friend truly to life.

If you’ve made it this far — congrats, and thank you! I really hope you’ve enjoyed building this little companion as much as I did putting it together. Whether it’s now sitting on your desk making funny faces, keeping you company while you work, or just staring blankly into the void (relatable) — I think that counts as a win.

This was a passion project for me, and I’ve learned a lot along the way. If it helped you learn something new, sparked an idea, or just gave you a reason to dig out your 3D printer again, then I’m genuinely happy.

Feel free to remix it, tweak it, make it better (especially the eyes 👀) — and please do share your version! I'd love to see how others bring their own spin to it.

Thanks again for following along