Code Monkey home page Code Monkey logo

custom-ui's Introduction

Custom-ui adapted for Home Assistant 2022.4

hacs_badge GH-release GH-downloads GH-last-commit GH-code-size

We can customize entities in core Home Assistant. This is however rather limited. Two of the most important features Custom-ui offers on top of the core customization are Templates and support for the icon_color attribute. We can use these features globally in our Home Assistant configuration and thus create extremely powerful yet very compact customizations. Added to that, custom-ui allows one to hide attributes from the more-info pane. Check the examples how.

icon-color

NEWS

GPT has arrived As an experiment several iterations of optimizations by https://chat.openai.com/chat have been made available as pre-releases. Please have a look, and test if you can. Note: if you download the 'beta' and get an error on Faled to load resource check this issue tracker.

Recently discovered....: custom-ui facilitates setting a Jinja template on custom attributes in core integrations that allow setting a custom attribute.


Installation

Manual Installation

  1. Download the custom-ui

  2. Place the file in your config/www folder or any subfolders.

  3. Include the card code in your ui-lovelace-card.yaml

    title: Home
    resources:
      - url: /local/custom-ui.js
        type: module

or when using the UI, click

Open your Home Assistant instance and show your Lovelace resources.

Installation and tracking with hacs

  1. Make sure the HACS component is installed and working.

  2. Search for custom-ui and add it through HACS

  3. Add the configuration to your ui-lovelace.yaml

    resources:
      - url: /hacsfiles/custom-ui/custom-ui.js
        type: module
  4. Refresh home-assistant.

Other installation methods

See INSTALLING

Examples

See EXAMPLES.


Learn core Home Assistant customization

It goes without saying that custom-ui is an extension of core Home Assistant functionality. As such, you should understand what is documented on Homeassisant.io about the subject.

Important to note, is that Home Assistant core Jinja templating is calculated in the back-end, server side, (the device Home Assistant is running on). Custom-ui Javascript templating is calculated in the front-end, browser side, (the device Home Assistant is displayed on).

Heavy templating might impact the performance of the system and will depend on processor power and memory available on either side of your devices.

Caveats

Custom-ui can't customize everything. Entities created in python scripts (you need to set the customization in the script itself) and entities created by several add-ons can't be touched by custom-ui. E.g. Home Assistant Google Drive Backup, and Argon One active cooling. You can work around that by creating template sensors for those entities, which you can again customize in HA.

Not all Lovelace cards are equal

Not all core HA cards use the same icon handling. Because of that custom-ui doesn't work with

Thomas Loven's Card-mod, which is an amazing plugin for Lovelace with many features, to the rescue.

Interaction with Card-mod

Be aware that custom-ui is very impactful. As a matter of fact, it is 'stronger' than card-mod. Meaning if you have e.g. a customize_glob on icon_color set using custom-ui, any card-mod config won't work.

Credits

I've been a longtime and heavy user of custom-ui, and this is the place to applaud Andrey for his amazing plugin. Home Assistant wouldn't be the same without the global customizing it enables us to do. Couldn't live without it! All credits go to @andrey-git. You can read up on a bit if history how it came to this adapted version.

custom-ui's People

Contributors

mariusthvdb avatar cab426 avatar bratanon avatar alexarch21 avatar acortelyou avatar wrt54g avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.