Add templates and icon_color to Home Assistant UI
BREAKING BREAKING
This is just a resource name change, but an important one. We have had 2 resources in this repo for some time now:
Reason was we developed a new Plugin Custom-more-info that supersedes the functionally in the former custom-ui, and has many extra features. Because the new Custom-more-info not only has more features, but also performs much better, we took out the updateMoreInfo functionality of the legacy custom-ui plugin, and release the new version in this release.
With this release we change the resource names:
From now on, It is advised to use the new Custom-ui (so the one without the UpdateMoreInfo functionality) alongside Custom-more-info for full functionality in modern Home Assistant.
If you don't need or want template functionality, please see our now Custom-icon-color plugin. Ofc this can also be combined with the new Custom-more-info.
There is no reason anymore to use the now called custom-ui-legacy, which we only have for historical reasons, and probably will take out soon to prevent confusion.
Full Changelog: https://github.com/Mariusthvdb/custom-ui/compare/20240111...20240118
Major new features are support for core type: button and type: entity cards. Thanks to @elchininet for expanding the functionality we long time sought.
@bratanon introduced Deep equal, preventing many unnecessary updates.
This will be the final update in its current state, still including the UpdateMoreInfo functionality.
We developed a new Plugin Custom-more-info that supersedes the functionally in custom-ui, and has many extra features. It is advised to use the available Custom-ui-only (without the UpdateMoreInfo functionality) alongside Custom-more-info for full functionality in modern Home Assistant.
If you don't need or want template functionality, please see our now Custom-icon-color plugin. Ofc this can also be combined with the new Custom-more-info.
Full Changelog: https://github.com/Mariusthvdb/custom-ui/compare/20231123...20240111
beware that this is not an update of the regular custom-ui with full functionality.
This is a new script for allowing to set icon_color attribute only.
It is much lighter because of that, and still offers a fundamental option core HA lacks.
Set icon_color in customize, or even in Jinja templates in a template: entity
Update UpdateMoreInfo() to be compatible with 2023.9 and remain backwards compatible thanks to @elchininet from the amazing Kiosk-mode custom card for fixing this
Update custom-ui.js by @Mariusthvdb in https://github.com/Mariusthvdb/custom-ui/pull/91
Update README.md by @Mariusthvdb in https://github.com/Mariusthvdb/custom-ui/pull/93
Update README.md by @Mariusthvdb in https://github.com/Mariusthvdb/custom-ui/pull/94
Update README.md by @Mariusthvdb in https://github.com/Mariusthvdb/custom-ui/pull/95
Create update_more_info.js by @Mariusthvdb in https://github.com/Mariusthvdb/custom-ui/pull/96
Update EXAMPLES.md by @Mariusthvdb in https://github.com/Mariusthvdb/custom-ui/pull/97
take out () on ternary in Examples by @Mariusthvdb in https://github.com/Mariusthvdb/custom-ui/pull/98
fix more-info with 2023.9 by @Mariusthvdb in https://github.com/Mariusthvdb/custom-ui/pull/100
Update custom-ui.js with new UpdateMoreInfo() by @Mariusthvdb in https://github.com/Mariusthvdb/custom-ui/pull/101
Full Changelog: https://github.com/Mariusthvdb/custom-ui/compare/2023.06.19...20230908
Full Changelog: https://github.com/Mariusthvdb/custom-ui/compare/20230106...2023.06.19
Assign the result of document.querySelector("home-assistant").shadowRoot.querySelector("ha-more-info-dialog").shadowRoot.querySelector("ha-dialog").getElementsByClassName("content")[0].querySelector("ha-more-info-info") to a variable to avoid repeating the same query multiple times.
Full Changelog: https://github.com/Mariusthvdb/custom-ui/compare/20230102...20230106
In the original code, a new object is created on every iteration with the spread operator (...). This can be inefficient if the number of iterations is large. By creating the newAttributes object before the loop and then updating it inside the loop, you only create a single object, which can be more efficient.
The original code also uses the Object.keys() function to get an array of the keys in entity.attributes.templates, and then uses the forEach() function to iterate over the array. This is an additional step that can add some overhead. In the optimized code, the for loop is used instead, which can be a more efficient way to iterate over an array.
The optimized code also uses the optional chaining operator (?.[]) to access properties of entity.untemplated_attributes, which can be more concise and readable than the original code.
Overall, these changes can make the maybeApplyTemplateAttributes() function more efficient, particularly if it is called frequently or if entity.attributes.templates has a large number of keys.
This revised version of the updateMoreInfo function does not use requestAnimationFrame at all.(.....) Instead, it selects all the necessary elements directly in a single call to querySelectorAll. This can potentially be faster and more efficient than making multiple querySelector calls and using getElementsByClassName, because it only requires the DOM to be traversed once.
By wrapping the function in a requestAnimationFrame call, you can ensure that the browser is able to optimize the rendering of the page and minimize the impact of the function on the main thread. This can help improve the performance of the code and provide a smoother user experience. However, if the updateMoreInfo function is not modifying the DOM, then there may not be a need to use requestAnimationFrame. It would be up to you to determine whether using requestAnimationFrame is necessary in this case.
Additionally, by eliminating the checkElements function and the use of requestAnimationFrame, the revised version of the code is simpler and easier to read. r equestAnimationFrame is a way to execute a function just before the browser is about to repaint the page, and it is generally used to improve performance by allowing the browser to handle DOM manipulation in an optimal way. However, in this case, the checkElements function was being used to repeatedly check for the existence of certain DOM elements, which is not the intended use of requestAnimationFrame. By selecting all the necessary elements in a single call, the revised version of the code avoids the need to use requestAnimationFrame for this purpose.
By storing the selected DOM elements in variables outside of the updateMoreInfo function, they will only be selected once and then be referenced from the cached variables in subsequent calls to the function, which should improve the performance of the code.
Avoid using .innerText to get the text of an element. Instead, use .textContent as it is faster.
Instead of using Array.from(attributesEl.querySelectorAll(".data-entry")), you can use [...attributesEl.querySelectorAll(".data-entry")] to create an array. This is faster and more concise.
using the spread operator (...) is faster than Array.from() when creating an array from a DOM collection. This is because Array.from() has to call the Array() constructor and has to perform additional checks and operations, whereas the spread operator simply creates a new array with the same elements as the original DOM collection
ran it through https://babeljs.io/ after some extra optimizations by GPT
Full Changelog: https://github.com/Mariusthvdb/custom-ui/compare/20221228...20230102
Optimized the lightOrShadow function to use a ternary operator to perform the check for the shadow root. This simplifies the code and makes it easier to read and understand. Rewrote the updateMoreInfo function to use requestAnimationFrame to wait until the DOM elements are available. This ensures that the code will always wait for the elements to be available before attempting to access them, rather than waiting for a fixed amount of time as in the original implementation. Modified the updateMoreInfo function to use the for...of loop to iterate over the t array, and also preserve the original behavior of scheduling another check if the elements are not yet available. Added an init function to the customUI object, which is called at the end of the script. Updated the computeTemplate function to handle both SyntaxError and ReferenceError exceptions, and added a console.warn message to report the error in these cases.
This version of the script is optimized for use with Home Assistant version 2022.4 and later. It may not work correctly with earlier versions of Home Assistant. This version of the script is based on the original script from https://github.com/Mariusthvdb/custom-ui/blob/master/custom-ui-gpt.js, with modifications to improve performance and reliability.
Full Changelog: https://github.com/Mariusthvdb/custom-ui/compare/20221217...20221228
Release Notes for Custom-ui 20221227-GPT
ChatbotGPT even generated the release notes ....
Adapted the code for compatibility with Home Assistant 2022.4 and higher. Optimized the installStatesHook function by removing the Object.values call and iterating over the obj.states object directly. Changed the updateMoreInfo function to clear the interval after the first successful iteration, instead of after two iterations.
The updateMoreInfo function still uses a setInterval loop to wait for the necessary DOM elements to be available. It would be better to use a more efficient mechanism, such as a Promise or MutationObserver, to wait for the elements to appear. The updateMoreInfo function uses several nested querySelector calls and getElementsByClassName calls to access nested DOM elements. It would be more efficient to use a single querySelector call with a compound selector to access these elements. The updateMoreInfo function uses innerText to get the text content of DOM elements, which can be slow and may not work correctly with some internationalized text. It would be better to use the textContent property to get the text content of DOM elements.
Full Changelog: https://github.com/Mariusthvdb/custom-ui/compare/20221115...20221217
Full Changelog: https://github.com/Mariusthvdb/custom-ui/compare/20220419.1...20221115