Buy this awesome Ulanzi clock on AliExpress at: https://s.click.aliexpress.com/e/_DkPphDX

⭐ You can download the blueprints that I created for this video at: https://ko-fi.com/s/0d1e4419bd ⭐

Hi! I am so excited to present this today! This is the Ulanzi Desktop Clock! And it’s super awesome because you can customize it just the way you want with Home Assistant. You can show the time, date, sensor values, and animations on this matrix display. And you can send notifications to it as well. Next to that, you can use it for room presence control. This clock can do it all, and you definitely want to have this sitting on your desk! I did a lot of research on how you can control it in Home Assistant, and developed the most simple way for you so that you can set it up in minutes! Let’s dive into this true LaMetric Time killer!

---

⭐⭐⭐ NOTE: ⭐⭐⭐

This article accompanies a YouTube video. I wrote it for people who would rather read than watch a video. To keep doing this, I would like to ask you to also check out the video, leave a comment under the video, give the video a thumbs up, and subscribe to my YouTube channel. This means that the video is offered more often to new visitors so that they also stay informed of the latest Home Assistant tutorials.

Thank you for your support!

Ed

Click here to watch the video

Introduction

I am totally in love with this Ulanzi Desktop Clock! I bought it myself and I am not getting paid by Ulanzi for this video. This device is the clock that I’ve been waiting for, for a long time! I always liked the LaMetric Time clock, but that thing is way too expensive. A couple of weeks back, Ulanzi started selling this desktop Clock and there was a buzz on Twitter about flashing it so that it works with ESPHome. I looked into that method, but it’s way too clunky to set up. I never thought I’d say this, but don’t use this clock together with ESPHome! Just, don’t do it! There is a much better alternative to flash this clock and that is Awtrix 3!

Credits to…

I’d like to send a lot of credits to Blueforcer who created the firmware for this clock. We’ve been in close contact for the last couple of weeks and together we created the best solution for Home Assistant using his firmware and my Blueprints. Please, sponsor this guy on his GitHub page. The link is in the description below!

And I want to give a big shout-out to Frenck because he helped me a lot with some challenges that I had with the Blueprint. You will find the link to his GitHub as well. Thanks, Frenck!

I will explain how you can connect this clock to Home Assistant and how you can use my Blueprints to control the clock. You can download the Blueprints that I’ve created via the download links in the description below. This way you sponsor me and make sure that I can keep creating these videos for you.

But before we start, please give this video a thumbs up and subscribe to my channel if you didn’t already. By doing this, you help to make this channel grow!

The Ulanzi Desktop Clock

The Ulanzi Desktop Clock is a great device that has an ESP32 inside which means that we can flash it. It is powered through a USB-C cable and it has an internal battery that lasts up to 5 hours. There are some standard apps on this clock, but I am going to skip telling you about that because you are never going to use them once you’ve seen this video. When you start up the clock by pressing the left and right buttons simultaneously, you will see an interface that asks you to connect to the clock using your phone or pc by using the clock as the access point.

Install the custom firmware

We are not going to do that here, because we are going to flash the clock with the custom Awtrix 3 firmware. Make sure that you connect the clock using a USB-C cable to your PC, There are a couple of things to note here. If you have trouble connecting to the clock, please try to use a different USB-C cable than the one that came with the clock. And connect the USB-C cable straight to a USB port on the motherboard of your PC and do not use a USB hub or a USB port that is located somewhere on the front of your PC. I noticed that I got the most stable connection by connecting the USB-C cable to a USB port on the back of my PC.

Go to the online flashing page

Now that the clock is connected to your PC, go to this page and click on CONNECT. The link to this page is in the description below. Select the USB port that your Ulanzi Desktop is connected to. If you do not see that port here or don’t know what port to use, then disconnect the clock from the USB port and reconnect it again. The port will show up at that moment.

• Click Connect.
• Now select Install Awtrix 3.
• Click Erase device and click NEXT.
• Click Install.
• The clock will now first be erased and after that, the firmware will be installed on the clock. You will hear a high-pitched beep during the process.
• Grab yourself some coffee and wait until the flashing is done.
• If you get errors during the flashing process, don’t worry. Just disconnect the clock from the USB cable and reboot the clock by pressing the left and right buttons simultaneously. Reconnect the clock again and repeat the procedure. It will get flashed eventually.
• When the flashing process is finished, the clock will reboot and a message is shown on your screen that the installation is completed.

Configuring the clock

The clock will now show AP MODE on the display. Now we have to connect the clock to our WiFi network. For this, connect your phone or PC to the clock access point. This SSID will be something like awtrix_d6b064 or any other number. Write this SSID down, you will need it in a couple of minutes to access the web interface of your clock.

• When your phone is connected to the clock, a Wi-Fi Setup page will open. If that page does not open, you can connect to the clock using the IP address 192.168.4.1 manually.
• Now scan for Wi-Fi networks, or enter your SSID manually.
• Enter the Wi-Fi password for your SSID and click the connect button.
• The clock will reboot and start showing the stock apps.

Great, we’ve now flashed our Ulanzi clock with Awtrix 3! The next step is that we are going to connect the clock to Home Assistant!

Connect the clock to Home Assistant

To make the clock communicate with Home Assistant, we need to set up an MQTT broker in Home Assistant. Luckily this is fairly simple to do and it might even be that you have this broker already running in your installation. For instance, if you use Zigbee2MQTT for your Zigbee devices, you probably installed the Mosquitto MQTT broker already. In that case, you do not have to install it again and you can skip the next step.

Install Mosquitto MQTT Broker

To install the Mosquitto Broker, go to Settings and click Add-Ons.

• Click Add-On store.
• Search for Mosquitto.
• Click Mosquitto Broker.
• Click Install.
• If you like you can click all the toggles here.
• Click Start

The Mosquitto broker is now installed. The next thing that we need to do is that we need to create a user in Home Assistant to give external application access using MQTT.

For this,

• Go to Settings.
• Go to People.
• Click the Users Tab.
• Click add-user
• Enter a Display name, username, and password.
• To increase security, toggle the “can only log in from the local network” switch.
• Click Create.

Enter the MQTT credentials in Awtrix 3

The Mosquitto MQTT broker is now ready to use. The next step is that we have to connect our clock to this MQTT broker so that Home Assistant can start sending MQTT messages to it. Therefore we need to know the IP address of the Home Assistant Server. You can find that IP address by going to Settings, System, Network. Click on the three dots in the Configure network interfaces area. Then click IP Information. The IP Address of your Home Assistant server is shown here. Write it down for future reference.

Now open the Awtrix interface in your browser. You can disconnect the Ulanzi clock from your PC because we can connect to it through Wi-Fi.

Open your browser and connect to the clock using the clock id or IP address of the clock. The clock id is the SSID that you connected to before and that you hopefully wrote down followed by dot local.

You will now see the AWTRIX 3 web interface.

• Go to the MQTT menu item.
• Enter your IP-Address in the Broker Field.
• Enter the username that you created in Home Assistant in the Username field.
• Enter the password in the password field.
• You might want to change the prefix, but I will leave it as is.
• Toggle the Homeassistant Discovery switch to on and click Save Configuration.
• Click Restart ESP.

Your Clock will now restart.

Check if the display is visible in Home Assistant.

Let’s see if the clock is now visible in Home Assistant.

• Go to Settings > Devices and Services.
• Click the Devices tab.
• Search for Awtrix.
• You should see your Awtrix device now as an MQTT device.
• Give the Awtrix device a click.
• Now you see all the controls and sensors of your Ulanzi clock. There are a ton of options here already. You can check if the connection works by clicking on the Matrix toggle. The display screen should toggle off and on if you do so.

Send a basic MQTT message to the clock

You can start creating automations yourself using MQTT, but that is a lot of tedious work! Because of the fact that I’ve developed Blueprints for this clock, you do not really need to know anything about MQTT, but I will show you a little bit of MQTT code, just to test if the display shows a message that you send to it.

For this,

• Go to Settings, Devices & Services.
• Search for Mosquitto.
• Click Configure in the Mosquitto broker card.
• Enter the following line in the Topic field. This is the id of your device, followed by the MQTT function. In this case, it’s called notify.
• Enter the following code in the Payload. This is the JSON data that is sent to the function. So, we are sending the text “Hello Smart Home Junkie” to the display. We are using an icon with ID (or name) 1, we want to show the text in Rainbow colors and the message may be visible for 10 seconds.
• Click Publish.

If everything went well, the message will now show on your Ulanzi clock.

I’m not going to explain how MQTT works in this video because of the fact that I will show you my Blueprints in a minute, but if you want to know more about the MQTT functions that work for this clock, you can check the documentation of Awtrix 3. The link is in the description of the video.

Downloading Icons

I pointed to an icon in the test message that I’ve just shown, but no icon was visible in my message on the display. That is because I did not download an icon on the display yet. You can choose from thousands of icons on the LaMetric site and download them to Awtrix 3 as follows:

• Go to the LaMetric Developer site.
• Search for an Icon.
• Let’s search for Smile.
• You will get a list of all icons that match your search.
• Click on the icon that you want to use.
• Copy the icon ID.
• Now go to the Awtrix 3 web interface and click on the Icons tab.
• Paste the LaMetric Icon ID and click on Preview to check if it works.
• Click Download if it works.
• Click Close.
• Now go back to the MQTT interface in Home Assistant.
• and enter the ID number in the icon JSON data field.
• Click Publish.

You will now see the icon on the Ulanzi display.

Alternative icon download option

There is another way to download icons to Awtrix 3 as well.

If you go to the files tab, you see the file manager. Within the file manager, you see an ICONS and MELODIES folder. The icons are stored in the ICONS folder. You can choose an icon from your PC and upload the icon in this folder. Please make sure that you upload the icon in the ICONS folder and that the size of the icon is either 8×8 pixels or 8×32 pixels for a widescreen animation.

There’s also a possibility to play RTTTL tunes on the clock, but the speaker of the clock is really bad, so I will not cover that topic in this video.

Brilliant! We can now send messages and icons to our display. To make your life easy, I’ve created some Blueprints that will handle everything for you so that you do not have to create complex MQTT automations yourself. It took me a lot of hours to create these Blueprints and they work flawlessly. You can download them by sponsoring me using the link in the description below. By doing so, you help me to keep creating these videos for you.

Using the Blueprints

Now, if you downloaded the Blueprints, you must install them in Home Assistant. The easiest way to do that is by using Studio Code Server.

• Go to Settings.
• Go to Add-Ons.
• Click Add-On Store.
• Search for Studio Code Server.
• Click Studio Code Server.
• Click Install.
• Click Show in sidebar and click start.

Now that studio code server is installed, you can copy the Blueprints to your Home Assistant server.

• Click Studio Code server.
• You will see this folder called blueprint over here.
• Open that folder.
• Within that folder, there’s a folder called automation.
• Open that folder as well.
• Now drag and drop the smarthomejunkie folder that you’ve just downloaded into the automation folder.
• You will see all the blueprints in that folder after that.
• To test if the blueprints work, go back to Settings and then click on Automations and Scenes.
• Click on Create Automation.
• You will see a list of the Blueprints that you’ve just installed if everything went well.

Awesome! We can now start using the Blueprints and creating our own apps, notifications, and animations to show on the Ulanzi display!

How it works

The general idea of using my Blueprints and sending information to the display is as follows. The Blueprint generates an automation, and that automation should be triggered by “something”. That “something” is a toggle helper. So, for each Blueprint that sends information to the Ulanzi display, you need to create a toggle helper as well. This approach is very flexible because you can trigger sending information to the display using a dashboard card, another automation, or a script. You just have to toggle the helper and the information will be shown on your Ulanzi display. Don’t worry if you do not get this yet, I will explain this in a second when we create the first automation based on a Blueprint.

Blueprint 1: Send a notification to the display

Let’s start with the first Blueprint. This Blueprint sends a notification to the Ulanzi Display.

Create the toggle helper

The first thing that we are going to do, is creating a toggle helper for the Notification automation.

• Go to Settings.
• Go to Devices & Services.
• Go to the Helpers Tab.
• Click Create Helper.
• Select the Toggle Helper.
• Give the Helper a Name.
• Click Create.

Create the automation

The helper is now created. We can start creating the notification automation in the next step.

• Go to Settings > Automations & Scenes.
• Click Create Automation.
• Select the Awtrix Create Notification BluePrint.
• You can now configure the notification.
• Start by selecting the Awtrix Display.
• Then, select the Toggle Helper that We’ve just created.
• Enter a notification text.
• Enter the icon ID or icon name. I will use the smile icon ID from the icon that I downloaded a couple of steps back.
• You have several options for showing how the icon behaves.
  • You can choose to show the icon in a fixed position.
  • You can choose to move the icon with the text and not show it again.
  • or, you can choose to move the icon with the text and let it re-appear again.
• You also have several options for the Text Case.
  • You can use the global setting, which is by default Uppercase. But, you can change the global setting for this. Check the manual of Awtrix 3 on how to do that.
  • You can choose to Force Uppercase.
  • or, you can show the text in the case as you entered it.
• Choose a text color.
• If you want to show the text in rainbow colors, then toggle this switch.
• If you would like the notification to stay on the display until it’s manually dismissed, then toggle this switch.
• If you do not want the notification to stay indefinitely, then you can enter a duration in seconds here.
• Click Save
• Enter a meaningful name for your automation and click Save.

Test the notification automation

You Automation is now created. Let’s test if it works!

• Go to Settings.
• Go to Devices & Services.
• Click on the Helpers Tab.
• Select the Test Notification Helper.
• Switch the helper to On.
• Great! The notification is shown on the display now!
• Switch the helper to Off.
• And the notification gets dismissed!

Awesome, we’ve created a notification automation now! You can toggle the helper on your dashboard or in other automations if you want to show a message on your Ulanzi display. I will show you my final dashboard at the end of this tutorial, so you will get an idea of how that can look.

Blueprint 2: Create a custom app to show a sensor on the Ulanzi clock

The second Blueprint creates a custom app that shows any sensor in Home Assistant on your Ulanzi clock. I’ve already created a toggle helper for this app, which I called Test App.

The BluePrint is called Awtrix Create Sensor App and looks like this:

All the fields look pretty much the same as in the Notification Blueprint. The only difference is that you can select a sensor in Home Assistant now. And, there is no Hold function because an App is not a notification, but an app that will show in the cycle of all the apps that you want to show.

After you’ve created the automation using this Blueprint, you can test it again by toggling the toggle helper for the app.

Blueprint 3: Create a weather app to show the weather on the Ulanzi clock

The third Blueprint will show the current weather on the Ulanzi display. For this, you need to have some things prepared. First of all, you need to have a Weather integration installed in Home Assistant. I use Openweathermap for this, but any other weather integration will do.

Next to this, you need to upload icons to Awtrix that have the same name as the weather states that your integration returns. For instance, if your weather integration returns a state sunny, then you should upload an icon with the name sunny.gif or sunny.jpg. I already created some icons for this and will upload them first.

• Go to your Awtrix 3 web interface.
• Click on Files.
• Click Choose file and select an icon with the weather state name.
• Make sure the target folder is /ICONS/.
• Upload the file and repeat this process for all the weather states that your weather integration returns.

You can download the icons using the LaMetric site which I explained earlier in this tutorial, or you can use a tool to create icons yourself. I’ve added a link to such a tool in the description of this video.

As for all BluePrints, we need to create a toggle helper again. I’ve already prepared that and it’s called Test Weather.

Now that we prepared this, we can start creating the automation.

The Blueprint is called Awtrix Weather App and looks a lot like the Awtrix Create sensor App. The only difference is that you can only select a Weather Sensor here. The rest of the fields are the same. Let’s save the automation and test it by clicking on the Test Weather toggle helper.

Great! The weather is now shown as an app as well!

Blueprint 4: Toggle Stock App

The fourth BluePrint is used to Toggle the stock apps like the clock, date, temperature, humidity, and battery.

You need to create toggle helpers for all of these options again.

The BluePrint is called Awtrix Toggle Stock App and in this Blueprint you can select which stock app you want to show or hide on the Ulanzi clock. Just like the other automation, it can be tested by toggling the corresponding toggle helper that you’ve created.

Blueprint 5: Set the app time

The last Blueprint makes it possible to set the default duration time that the apps are shown on the clock. For this, you need to create a number helper first.

• Go to Settings.
• Go to devices and services.
• Go to the Helpers tab.
• Click Create helper.
• Select Number helper.
• Give the helper a name.
• Enter 1000 in the minimum value and 60000 in the maximum value. These values are in milliseconds, so the minimum possible time is one second and the maximum possible time is 60 seconds.

Now, let’s create the automation!

The BluePrint is called Awtrix Set App Time and you can select the Number Helper that we’ve just created in the automation. You can test this by going to the number helper and adjusting the value of the number helper. The cycle time between the apps will now adjust accordingly.

Animations!

Now, last but definitely not least, you can show full-screen animations on the display as well. For this, you need to create an animated gif icon with a dimension of 32×8 pixels and upload that animation using the file editor in Awtrix 3. Then you can create a notification automation just like how I explained before and point to that icon in the automation. After saving the automation, it will show the full-screen animation on the Ulanzi display as soon as you trigger the corresponding toggle helper! Isn’t that cool?

Conclusion

This is how you connect Home Assistant to the Ulanzi Display. You can download the Blueprints via the link in the description by sponsoring me and start setting it up in minutes!

Awtrix does have more functions. You can also set some global settings using the middle button on the clock and you can use the clock as a room presence detector. But, I will explain how to set it up as a room presence detector in another video.

I am very enthusiastic about this clock. It’s such a cool device and looks awesome on your desk! Get your own Ulanzi Desktop Clock via the link in the description of this video and set it up using my Blueprints. You won’t regret it!

Oh, and I promised to show you my Desktop Clock dashboard. It looks like this and you can build it yourself using Mushroom cards and Tile Cards!

These wonderful people over here made it possible for me to create this tutorial for you. I cannot keep doing this work without your help, so please help me too and become one of my patrons. The links to Patreon, Ko-Fi, and joining my channel are in the description. This way, you make sure that I can keep creating these tutorials that save you a ton of time. And don’t forget to give this video a thumbs up and subscribe to my channel to help this channel grow!

I’ll see you in my next video!

Bye Bye!

Links:

• The Github sponsor page of Blueforcer: https://github.com/sponsors/Blueforcer
• The github page of Frenck: https://github.com/frenck
• The Awtrix-light online flasher: https://blueforcer.github.io/awtrix3/#/flasher
• The Awtrix-Light manual: https://blueforcer.github.io/awtrix3/#/README
• Online Icon creator/editor Piskel: https://www.piskelapp.com/p/create/sprite

Keywords:

• home assistant, clock
• display
• lametric, led display, display device,ulanzi, led matrix
• matrix display