Thermostat becomes a roller shutter UI

Open source software and hardware is often hard. Contrary to proprietary and closed solutions like Apple’s, open / free alternatives are often not polished. They usually take you lots of work to make them usable.

However, they give you all the power. You can do anything you want with them… Like turning a thermostat into a roller shutter user interface.

When I was thinking about automating my roller shutters, I didn’t know how to start. Luckily, I found a post from Recretonica where it was explained how to build a DIY roller shutter controller from scratch. I reproduced it easily with a Wemos D1 mini, a 6 channel relay and a HLK-PM01 AC to 5V transformer. No more electronics were needed.

Electronics: Wemos D1 Mini, 6 channel relay and HLK-PM01

An Arduino sketch controls the roller shutters position using MQTT. It subscribes to the corresponding MQTT topics, and commands the relay for the seconds that the roller shutter expends to move to the new position. You can find the sketch in my roller shutter repository.

I also designed a 3D printed case for the electronics, so they got isolated inside the roller shutter box, away from any humidity bough by the shutter.

Roller shutter controller case box

This was my first 3D design, so it was not easy. I was happy to start learning Blender. But the reality is that there is some distance from what you design, how it gets printed, and how it works. I had to make some tests and prototypes, and still, I had to cut back and adapt the final print. You can find the 3D case in my Thingiverse account.

Case box with electronics and top

Finally, I was wondering how to arrange the switch for 3 roller shutters at once. I envisioned the thermostat as the perfect place to control the roller shutters: it is placed in the same room, it is tactile, so you can control the positions with one gesture. So I modified the my thermostat‘s software so we could control the 3 roller shutters in their own screen, at once. You can find the modifications in the roller-shutter branch of my fork of hestia-touch-one-ui repository.

Hestia Pi’s roller shuter UI

Watch this video to see how well it works!

Hestia Pi controlling roller shutters

Open Bedroom Thermometer: Aesthetic Customization

I am pretty happy with my University education. I studied Telecommunications Engineering in Spain, which is a mix of Computer Science, Electrical Engineering and Telecommunication Systems. I think it gave me a solid base for a broad range of topics, from the signals inside a circuit to software engineering principles.

However, something I have missed is some basic formation on UX and design. I think it would have helped me a lot in many of my projects. Along the years, I have valued the importance of these aspects in a project: you might have the most wonderful technical implementation of something but, I you can’t let your users understand it, you will fail.

Suitable case

The first part obvious for placing my ANAVI Thermometer in the bedroom is that it needed a case. Dust protection, protection from humans, aesthetics. ANAVI’s setup is quite convenient for development, but not as suitable for a product that is going the take part of the decoration of your bedroom.

Vented Box – Anavi Thermometer in Thingiverse

Luckily, one of the Crowdsupply field reports on ANAVI Thermometer included a printing model for a case. I hadn’t a 3D printer yet, so I ordered it to be printed using one of the apps plugged into Thingiverse, and I got a mail package with my case ready to be placed. Cool!

Matching display

A white on black OLED display was more suited for this set than the yellow and blue that came from Anavi Technology. However, when the new display arrived, I discovered it had different dimensions. It didn’t fit in the 3D printed case.

OLED display

I didn’t want to order a new copy of the case. So I did an endless search for a display with the same dimensions than ANAVI’s. It was hard to find one. Finally, I found this 0.96 inch display from AZDelivery that was a perfect fit

Display reshape

I apply UX and design principles in my work, not only in product development, but also in the interfaces or the user experience of a command tool. I think the hardest but more beautiful job is making the complexity simple. I praise Apple for this. Despite I would never buy one of their products, I can admit the value and experience they used to deliver in each of them.

There were obvious things to cut in the original display information. Leon has done a great job creating a software that works for a lot of purposes (as we will see in the next article on the light sensor). But I am not plugging a water temperature sensor, so the Air word is not needed. The temperature unit as well, we just use Celsius. And also Humidity word, the % sign is just enough

These cuts allows increasing the font size and placing the figures in one row. I also prefer a sans-serif font, which I chose from the amazing U8g2 library.

ANAVI’s default display vs customized display

I have published all the changes in display customization. You can find them in the display-reshape branch of my fork of ANAVI Thermometer firmware.