It is a well known trick (mentioned in the docs to create a header on a lovelace view by using panel:true and vertical-stack.
The problem with this approach is that anything below the header is locked in position by the stack. You lose lovelaces ability to adjust for wider screens. The column card fixes this.
Here are two screenshots from my configuration, showing the same view with my phone held in portrait and landscape mode respectively:
Note how the header stretches across the entire screen, but the cards below move to either below or beside each other depending on the available space.
On the topic of slight modifications to default cards, there’s also useful-markdown-card.
Because let’s face it; the default markdown card isn’t terribly useful…
My card allows you to embed states and attributes from entities in the markdown. Besides that, it works exactly the same as the default.
- type: custom:useful-markdown-card
content: >
## Lovelace
Starting with Home Assistant 0.72, we're experimenting with a new way of defining your interface. We're calling it the **Lovelace UI**
Also, the current time is [[ sensor.time.state ]] [[ sensor.time.attributes.icon ]].
This is not a card but a general plugin that lets you use any browser that’s currently viewing your lovelace interface as a media_player. This means that it can, for example, play back TTS messages.
This also requires that you add a custom component to home assistant, made by @pkozul who is my main source of inspiration for this plugin and the next one.
There’s a fun app for android devices called Fully Kiosk Browser. Its main purpose is to display a single web page, without the user being able to move away from the site, or close the app. But it also gives you a degree of control over the device that iDevice users like myself could only dream of.
For example, you can get a live feed from the devices camera into home assistant, or you can get it to report movement in front of the camera like a security sensor.
All of those features are available through a REST interface and can easily be connected to home assistant. A few of them, though can benefit from this plugin.
Specifically, this plugin gives you the ability to turn on and off the screen of the device remotely, as well as check its current state. It also enables a movement sensor with shorter response time than you’d get via the REST interface. It only works while the device is setup to display your lovelace interface, though.
This gives you a brightness slider for any dimmable light.
You can configure it a bit, put the slider below the toggle, hide the slider when the light is turned off and so on…
This is inspired by the custom-ui project for the “old” home assistant interface.
UPDATE
The slider-entity-row now also supports media_player (volume control) and cover (position).
The customization options have been changed though. So your old config may not work with the new version.
This lets you input a time to a input_datetime right in the lovelace interface, without having to open up the more-info dialog.
I made this solely for my own benefit, so it’s not documented at all, and it only support inputing times, not dates.
If you think you’d use it, let me know and I might try to add the feature.
This allows you to add elements to your picture that does one thing when you click them, and another - totally different - thing when you click and hold for about half a second.
A typical use case would be a light that you toggle on or off by clicking (or tapping on a touch screen), but holding the mouse button (or finger) down for a while will bring up the more-info dialog and allow you to dim the light or change its color.
But the long-press action can also be something entirely different, like calling a service or toggling a different entity.
Think of the amazing stuff people have made with picture-elements over at sharethelove.io. That’s made possible - in part - because elements can be styled with custom css. And now any normal card can as well.
It’s also a great way to produce atrocities such as:
But I’m sure that in the hands of anyone even just a tiny bit more artistic than myself, it can be used to produce wonderful things.
A bonus feature of this card is that you can manually select which size it will report when placing in the layout. That can give some more control over which card ends up where on screen:
Is there any way to change the number of columns used? Mine is showing 2 columns when 3 would be better. Goes down to 1 on my phone which is great.
Would it be as simple as changing the max column width from 500px to 300px or something like that?
Also getting an error…
https://domain.duckdns.org/local/mini-media-player.js?ver=0.8.1:592:22 NotSupportedError: Cannot define multiple custom elements with the same tag name
