I hope this feedback will give you some guidance. I really love this approach and I strongly believe this project has huge potential for nice dashboards.
Currently I’m seeing a lot of latency and I didn’t build many components in the same view yet. Benchmarking is done comparing tailwind elements in my view with native elements from home assistant in the same view.
Very often tailwind components are not loaded at all or very slow. Native components show instantly.
Changing entity status is not immediately visible in the tailwind elements (using the predefined classes to reflect a change). Ex: green color of a button means status is on and no color is reflecting status off.
Changing status of a device (only tested light) is picked up instantly using the onclick event with the hass services.
Would the impact of running this setup locally (not loading the entire framework over and over again from the cloud) have a positive result?
Can we cache the tailwind framework once loaded to speed up loading times?
Is the onchange event on an input element that is used with a drag not going to fire every change it sees? In other words, if I drag the slider from 0 to 255, is this going to hit the event 255 times and thus call the Hass service 255 times? Can we use something like focused?
@usernein This is awesome. This would make styling custom cards a breeze. I’ll give it a try in the next few days and report back.
One immediate concern or comment I have is embedding logic (JavaScript) inside the content itself. It would be nice if there was a way to have the chance to specify a script that could handle all the interaction with the HTML content you’re rendering.
I found this (New lovelace custom card approach - fully customizable card with your own design) a few minutes ago, where there’s a clear separation between content, binding and behavior. I don’t necessarily think binding is needed, but scripts (behavior) definitely is when you start working on more complex interactive cards.
I know this might go beyond the “style cards using Tailwind” approach shown here, but I’d love to see a solution to create custom cards in a more lightweight manner instead of creating a full-blown custom component.
@silvio we are on the same page! I
That’s exactly what i did on the first example: call a service on home assistant passing the value of the input. You just need to adjust it to use the home assistant service that you want.
@silvio About onchange, it will run only on release, as @fabianluque said. If you want to update instantly, use “onInput”, but be aware that if you use jinja templates to fetch entities values, the card will update everytime the entities update
@fabianluque i took a while to fully understand how amazing the approach of the project you shared is
I totally agree with you. I was already dissapointed on how long complex cards as the last examples i shared here can be. Specially when you need to write the same entity_id again and again or when you need to have the card synced with the state.
I was even thinking about using aliases for “hass.callService”
I got excited by the idea, so i can confirm that you will see this amazing feature very soon.
What I do to solve the issue of having to rewrite the hass element over and over again is the following. I define my light and other checks as illustrated below:
Next nice feature would be to be able to use the hass icons locally. As they already exist in the system, we don’t want to pull them over and over from the cloud. Can this be done?
I found my mistake. Lichten cannot be called from onclick as it’s not a known var in th js scope. Rookie mistake.
Despite correcting the issue by calling the entity by the entity_id known in Hass, I still have many freezes. After loading the view with the tailwind UI the elements don’t appear. Very often it doesn’t load the objects at all, but the native Hass objects are loaded fine in the view.
When the tailwind components are loaded correctly in the view, the buttons to toggle my light (onclick) don’t respond at all. It’s strange because after reboot the onclick is fast as native (very rare), after a few clicks I have delays going up to 10 seconds but more often I have no response at all. This what my log shows: