Components<\/h2>\n\n\n\n\n- Max7219 display<\/a><\/li>\n\n\n\n
- Esp8266<\/a><\/li>\n<\/ul>\n\n\n\n
Hardware<\/h2>\n\n\n\n
Wiring it up to an ESP is simple enough, it uses SPI for communication, and one extra pin. So hook up the CLK and CS pins to the ones configured for it, and wire up the DIN on the display to the configured MOSI pin.<\/p>\n\n\n\n![\"\"](\"https:\/\/lab.rapternet.us\/wp-content\/uploads\/2024\/01\/pxl_20240107_0020135835065962653091082248-1024x771.jpg\")
<\/figure>\n\n\n\nBelow are my mappings from the display board pins to those configured in EspHome<\/p>\n\n\n\n
\n- Max7219 DIN pin -> MOSI Pin from EspHome SPI settings<\/li>\n\n\n\n
- Max7219 CS pin -> CS Pin from the EspHome display settings<\/li>\n\n\n\n
- Max7219 CLK pin -> CLK Pin from EspHome SPI settings<\/li>\n<\/ul>\n\n\n\n
EspHome Configuration<\/h2>\n\n\n\n
Before we get into the EspHome configuration, we first want to get the font files in place. This font is a pixelated font that is great for these kinds of displays. It is the pixel mix font from wfonts<\/a>. With the file in hand, I uploaded it to the esphome\/font folder using VS Code (the same folder I used for my air gradient display fonts, if you don’t have the folder, you can create it in VS Code as well). <\/p>\n\n\n\n![\"\"](\"https:\/\/lab.rapternet.us\/wp-content\/uploads\/2024\/01\/image.png\")
<\/figure>\n\n\n\nFor this example configuration, we’ll just be showing the current time on the display. This is a nice simple EspHome configuration for it to get our feet wet.<\/p>\n\n\n\n
# Example configuration entry
spi:
clk_pin: 15
mosi_pin: 13
font:
- file: \"font\/pixelmix.ttf\"
id: digit_font
size: 8
time:
- platform: homeassistant
id: hass_time
display:
- platform: max7219digit
cs_pin: 3
num_chips: 4
intensity: 15
lambda: |-
it.strftime(0, 0, id(digit_font), \"%H:%M\", id(hass_time).now());
<\/pre>\n\n\n\nNow that we have everything wired up and EspHome configured, we can start up our clock!<\/p>\n\n\n\n![\"\"](\"https:\/\/lab.rapternet.us\/wp-content\/uploads\/2024\/01\/pxl_20240107_0014394555728225761546207427-1024x771.jpg\")
Everything Running with the Time<\/figcaption><\/figure>\n\n\n\nText Input Field from Home Assistant<\/h2>\n\n\n\n
Now that we have the basics down, let’s get the display to read text coming from a Home Assistant text sensor. This will give Home Assistant the ability to send any arbitrary message to the display, and let automations send data as well.<\/p>\n\n\n\n
To start out, we’ll add a text sensor helper to Home Assistant. This can be done at: Settings -> Devices and Services -> Helpers<\/p>\n\n\n\n![\"\"](\"https:\/\/lab.rapternet.us\/wp-content\/uploads\/2024\/01\/image-6.png\")
Adding a Text Helper<\/figcaption><\/figure>\n\n\n\nOnce you click to create a text helper, you’ll get a dialog with some inputs used to define it. I just left those on the defaults and gave it a unique name and clicked create.<\/p>\n\n\n\n![\"\"](\"https:\/\/lab.rapternet.us\/wp-content\/uploads\/2024\/01\/image-7.png\")
Creating a Text Helper<\/figcaption><\/figure>\n\n\n\nOnce it’s been created, you can find it on the dashboard, type in some text and hit enter to send it in.<\/p>\n\n\n\n![\"\"](\"https:\/\/lab.rapternet.us\/wp-content\/uploads\/2024\/01\/image-5.png\")
In the Home Assistant Dashboard<\/figcaption><\/figure>\n\n\n\nNow that we have the Home Assistant side of things setup, let’s go over to the EspHome configuration and start getting that going. We’ll need the sensor name for our text sensor in home assistant. This way we can configure the screen to read from that sensor. Everything else is the same as the clock from above.<\/p>\n\n\n\n
The heart of our code is in the lambda, where we get the string data from the home assistant text field.<\/p>\n\n\n\n
text_sensor:
- platform: homeassistant
name: \"Display Text\"
entity_id: input_text.esphome_display_text
id: input_text_field
font:
- file: \"font\/pixelmix.ttf\"
id: digit_font
size: 8
display:
- platform: max7219digit
cs_pin: 3
num_chips: 4
intensity: 5
id: cool_display
lambda: |-
it.printf(0, 0, id(digit_font), \"%s\", id(input_text_field).state.c_str());<\/pre>\n\n\n\nNow that the code is done, we can upload the new firmware and have some fun tooling in messages in home assistant and seeing them show up on the display. This allows home assistant to send any arbitrary text to the display for notifications for information. The text does scroll if it’s longer than the display as well, so no worries about character limits (within reason).<\/p>\n\n\n\n\n![\"\"](\"https:\/\/lab.rapternet.us\/wp-content\/uploads\/2024\/01\/pxl_20240112_2152041104813636764360346911-1024x771.jpg\")
Text Sent from Home Assistant<\/figcaption><\/figure>\n\n\n\n![\"\"](\"https:\/\/lab.rapternet.us\/wp-content\/uploads\/2024\/01\/pxl_20240112_2152164628769566139117342391.jpg\")
\ud83d\ude00<\/figcaption><\/figure>\n<\/figure>\n\n\n\nConclusion<\/h2>\n\n\n\n
This was a fun little thing to try out in EspHome and I’ll eventually use it in one of my builds or projects. I may even try to make a rack mount blanking panel like my inspiration.<\/p>\n\n\n\n
Future Things to Try<\/h2>\n\n\n\n\n- Diffusion Acrylic from Adafruit <\/a>or elsewhere<\/a><\/li>\n<\/ul>\n\n\n\n
Resources<\/h2>\n\n\n\n\n- Pixelmix font<\/a><\/li>\n\n\n\n
- EspHome max 7219 display documentation<\/a><\/li>\n\n\n\n
- Maker guide on the display<\/a><\/li>\n\n\n\n
- Inspiration on discord<\/a><\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Some of the links in this post are affiliate links, which means I may earn a small commission if you make a purchase through them\u2014at no extra cost to you. This helps support the blog and allows me to continue creating content that you love. I will only recommend products and services that I trust and believe will be beneficial to my readers. Thank you for your support!<\/p>\n","protected":false},"excerpt":{"rendered":"
I saw a really cool blanking panel for a server rack recently that used a bunch of LED displays to show information powered by an ESP and home assistant. I thought the displays were pretty cool and decided to get some and try them out. I may also have some ulterior motives with a project … <\/p>\n
Hardware<\/h2>\n\n\n\n
Wiring it up to an ESP is simple enough, it uses SPI for communication, and one extra pin. So hook up the CLK and CS pins to the ones configured for it, and wire up the DIN on the display to the configured MOSI pin.<\/p>\n\n\n\n Below are my mappings from the display board pins to those configured in EspHome<\/p>\n\n\n\n Before we get into the EspHome configuration, we first want to get the font files in place. This font is a pixelated font that is great for these kinds of displays. It is the pixel mix font from wfonts<\/a>. With the file in hand, I uploaded it to the esphome\/font folder using VS Code (the same folder I used for my air gradient display fonts, if you don’t have the folder, you can create it in VS Code as well). <\/p>\n\n\n\n For this example configuration, we’ll just be showing the current time on the display. This is a nice simple EspHome configuration for it to get our feet wet.<\/p>\n\n\n\n Now that we have everything wired up and EspHome configured, we can start up our clock!<\/p>\n\n\n\n Now that we have the basics down, let’s get the display to read text coming from a Home Assistant text sensor. This will give Home Assistant the ability to send any arbitrary message to the display, and let automations send data as well.<\/p>\n\n\n\n To start out, we’ll add a text sensor helper to Home Assistant. This can be done at: Settings -> Devices and Services -> Helpers<\/p>\n\n\n\n Once you click to create a text helper, you’ll get a dialog with some inputs used to define it. I just left those on the defaults and gave it a unique name and clicked create.<\/p>\n\n\n\n Once it’s been created, you can find it on the dashboard, type in some text and hit enter to send it in.<\/p>\n\n\n\n Now that we have the Home Assistant side of things setup, let’s go over to the EspHome configuration and start getting that going. We’ll need the sensor name for our text sensor in home assistant. This way we can configure the screen to read from that sensor. Everything else is the same as the clock from above.<\/p>\n\n\n\n The heart of our code is in the lambda, where we get the string data from the home assistant text field.<\/p>\n\n\n\n Now that the code is done, we can upload the new firmware and have some fun tooling in messages in home assistant and seeing them show up on the display. This allows home assistant to send any arbitrary text to the display for notifications for information. The text does scroll if it’s longer than the display as well, so no worries about character limits (within reason).<\/p>\n\n\n\n This was a fun little thing to try out in EspHome and I’ll eventually use it in one of my builds or projects. I may even try to make a rack mount blanking panel like my inspiration.<\/p>\n\n\n\n <\/p>\n\n\n\n Some of the links in this post are affiliate links, which means I may earn a small commission if you make a purchase through them\u2014at no extra cost to you. This helps support the blog and allows me to continue creating content that you love. I will only recommend products and services that I trust and believe will be beneficial to my readers. Thank you for your support!<\/p>\n","protected":false},"excerpt":{"rendered":" I saw a really cool blanking panel for a server rack recently that used a bunch of LED displays to show information powered by an ESP and home assistant. I thought the displays were pretty cool and decided to get some and try them out. I may also have some ulterior motives with a project … <\/p>\n<\/figure>\n\n\n\n\n
EspHome Configuration<\/h2>\n\n\n\n
<\/figure>\n\n\n\n# Example configuration entry
spi:
clk_pin: 15
mosi_pin: 13
font:
- file: \"font\/pixelmix.ttf\"
id: digit_font
size: 8
time:
- platform: homeassistant
id: hass_time
display:
- platform: max7219digit
cs_pin: 3
num_chips: 4
intensity: 15
lambda: |-
it.strftime(0, 0, id(digit_font), \"%H:%M\", id(hass_time).now());
<\/pre>\n\n\n\nText Input Field from Home Assistant<\/h2>\n\n\n\n
text_sensor:
- platform: homeassistant
name: \"Display Text\"
entity_id: input_text.esphome_display_text
id: input_text_field
font:
- file: \"font\/pixelmix.ttf\"
id: digit_font
size: 8
display:
- platform: max7219digit
cs_pin: 3
num_chips: 4
intensity: 5
id: cool_display
lambda: |-
it.printf(0, 0, id(digit_font), \"%s\", id(input_text_field).state.c_str());<\/pre>\n\n\n\nConclusion<\/h2>\n\n\n\n
Future Things to Try<\/h2>\n\n\n\n
\n
Resources<\/h2>\n\n\n\n
\n