Since I started using HomeAssistant I wanted to make my own cards, with my personalized CSS and even with JS, but it has not been as easy as I thought. I discovered CustomUI, and I started trying the [https://developers.home-assistant.io/docs/en/frontend_creating_custom_ui.html] (example)
I modified the state-card-my-custom-light.html file to show the percentage of RAM usage, the html is this:
<h1>
<span class = "iron-icon">
<iron-icon icon = "mdi: memory"> </ iron-icon>
</ span>
<span> RAM Used </ span>
<span class = "score">
[[getValueState ('sensor.memory_use_percent')]]%
</ span>
</ h1>
The function that I use to obtain the values of the state is this:
getValueState (sensor) {
return this.hass.states [sensor] .state;
}
All this works for me, it shows me the percentage of the RAM at the time the frontend loads, but after a while, I see on another card that the percentage has been lowered or raised, but on the custom card that I have made it continues with the same value as at the beginning, is not updated, unless you update the page (F5). What else do I have to add so that each time the sensor value changes, my customized card is updated?
Thank you!