Featured Community Plugin - Home Assistant Entity Cards
This post is part of a series, featuring the incredible work of plugin authors who grow the TRMNL plugin ecosystem with every contribution. The TRMNL team has individually selected these plugins and authors to be featured.
Home Assistant Entity Cards
Community member Jef-NL (Discord: TheBoomNL) created the Home Assistant Entity Cards plugin; here are their words on how it was created.
Why did you want this plugin to exist?
Usually when I am working or watching something, one of my PC screens has my home assistant dashboard open. I made 1 custom view with statistics like: current ETF values, Temperature in different rooms, Time at work, Over hours for the week and so on. It is data that is really nice to see and to do something with if for instance my work hours are too much for the week, but it doesn't change soo much and it doesn't have to take up one of my PC screens. So I really wanted it to be something to just have on the wall.
Were you inspired by any other recipes or plugin creators?
Not really, I wanted to make it look and feel the same as the home assistant entity cards. And browsing through the TRMNL Framework page I came across a fun way to play with the grids.
How did you balance look vs functionality?
It needed to look clean. Main focus was the values it shows, so that was the thing put most visible, the icon and layout option are more there to make it look nice.
What, if any, challenges did you face while creating it?
I made the initial logic and display in the shared part of the markup editor, but this did not work for all screen layouts. I had to ask for some help and tips in discord, but after playing with it I figured out the order of loading the shared and the views, and with some help from the DOM on how to make sure the order was correct.
Did you learn anything you want to apply to future recipes?
I learned about the construction order of the shared code compared to the views. With this, running a function that is defined on a view is not possible without wrapping the shared code in:
document.addEventListener("DOMContentLoaded", () => {}
This is something I will probably use more often to reduce duplicate code and allow for defining view specific functions.
Is there a tip you would give to a new plugin developer?
I am pretty new to this as well, don't even have a physical TRMNL yet. But my tip would be, even in this time of AI, read the documentation 😅 Liquid is something not just TRMNL specific and it's quite strong, would have used it more if I had read more about it before building this.
What is your favorite plugin that someone else created and why?
I came across the HVV Transit recipe. This is such a useful one to have. My first thought was to build something like this as this would be a must have for rainy mornings when I want to get to the office and want to know what busses and trains show up when.
What could have made building the recipe easier and faster?
Combine the framework, liquid and general help documentation in a single browsable webpage. I now had to have 3 different pages open to find what I was looking for. And I kept forgetting that it was called the framework, so I had to Google "TRMNL developer docs", that did not give a link to the docs directly but to the main page, from there to developer, docs and in there somewhere there was the link to the Framework help page 🤣. I wasn't so efficient in building this recipe but it was fun.