Link Search Menu Expand Document

CodeGenerator for example code

works for both Yaml- and UI-mode

Here you can generate example code to see some of the possibilities this "theme" offers.

Select what you want to try out and click "Generate example code".

What this tool is:
This tool combines different options, to show the general scaffold to get the "theme" running. It shows the indentation and gives you examples to work with.

What this tool isn't:
This tool is not designed to give you a ready to use, working installation. You need to adapt the example code to your needs and wishes.

Note: This generator is in beta state, so there may be issues! Thanks for understanding!


Which mode are you using?


Choose the chips, you want to use.

 ? This is a `back-button`, primarly used if you switch between views and want a convenient way back.

 ? This `chip` displays just an icon.

 ? This `chip` displays an icon and a label, where the label can be any state of a sensor you configure.

 ? This `chip` shows you the electric consumption from a sensor. Configurable to show power (kWh) or price (currency).

 ? This `chip` shows you the actual presence in your home. Shows residents and guests (guests only if one or more).

 ? This `chip` is to display a weather icon together with the outside and inside temperature.


Would you like to set some titles?


Select the cards you want to use.

 ? The `battery-card` is a slightly enhanced `generic-card`, just to ease the use. You could always configure it from the `generic-card` yourself.

 ? The `binary-sensor-card` is to show the state (on/off, open/close, etc.) of a binary sensor, eg. your garage door or a window contact sensor.

 ? The `binary-sensor-card` is to show the state (on/off, open/close, etc.) of a binary sensor, eg. your garage door or a window contact sensor. This card shows an alert if the state is on/open or unavailable.

 ? With the `cover-card` you have the state of your cover and on the second line UP / PAUSE / DOWN to control it.

 ? This is the `generic-card` to display values from a sensor, eg. to show humidity, your next waste collection date or whatever sensor value is provided.

 ? This is a `generic-card` with swapped label and name.

 ? The `card_graph` shows an entity with the actual state and a *min-graph-card* integrated. This can be used for a thermostat to show the actual temperature and the history."

 ? The `input-boolean-card` is to switch an `input_boolean` on or off.

 ? This is the `light-card`, used to toggle a light or a light group. Shows state of the light and, if available, brightness in %. In the picture on the right in row Nr1

 ? The `light-slider-card` controls a light with the added possibilty to control the brightness of your light with a slider. See row Nr2 in the picture on the right.

 ? The `light-slider-card (collapse)` is an enhanced version of the `light-slider-card`, that only shows the slider, if the light is on. In the picture on the right, the 'off'-state is like row Nr1, the 'on'-state like row Nr2

 ? The `light-slider-card (horizontal)` is an enhanced version of the `light-slider-card`, that shows the slider on the right of the button, making it a 1-line-card. See the picture on the right row Nr3

 ? The `card_media_player` shows you the *app*, the *title* and the *album name* playing, if the data is available through HA. The *app* is shown via a different icon.

 ? This is the second `media-player-card`, in contrast to the first one above, it shows the cover art from your media player.

 ? With the `card_media_player_with_controls` you have the state of your media_player and on the second line PREVIOUS / PLAY-PAUSE / NEXT to control it

 ? The `card_navigate` is for navigating inside your HA dashboard(s).

 ? The `card_person` shows if a person is `home` or `not_home`. If you have setup other zones, it will show these as well.

 ? This is the `power-outlet-card`. It shows you the state of a power outlet, and if configured, the actual power consumption of the power outlet.

 ? This card starts/runs a script. You can configure icon and text.

Your example code

This is your generated code to paste into your config.
Remember to change all necessary entries and variables!

© by UI-Lovelace-Minimalist 2021

Documentation for ULM version 1.0.0-beta.6