I’d like a card / cards (guessing this is going to need to be custom made), that will reveal lines 1 by 1. Each line would fade from 0 - 100, and slightly shift downward as it fades in.
For each line, I’d like to be able to list a friendly name, and in some cases a state. EG: “80% Phone Battery”. As the states of items affect it’s visibility, when additional lines need to show or hide, this would animated in / out in the same way.
This will be for a non interactive ‘Magic Mirror’ dashboard…
Where I’m at:
I have worked out what I want to show and when.
I’m created a visual UX design and this is being tweaked as I see what does and does not work.
I’ve got the information showing on a dashboard, when desired.
I’ve got most of the hardware ready (acrylic 2 way mirror, bright tablet, wooden frame).
What I need to do:
Help with implementing theme / card styles / layout / animation. Pointers are also great, but I am probably not as techy as a lot of you and while I can get my head around basic code, also struggle with basic code.
Find something like the HA Tile card that will make it easier for me to style my lozenge cards.
Create or find a weather card that will show the weather now, and at 18:00 this day.
Create or find an entity that can provide the likelihood of precipitation today.
Design Principles:
This is not touchscreen. The relevant information should surface itself without interaction.
Keep it simple. Everything must justified itself. (The mirror is next to my front door, so only information that is useful there).
Bold bright colours as it needs to shine through the reflections.
So I’m trying to get the styling working for my list of items to show. I’m struggling with the CSS a bit. Despite not needing a button I’ve gone with the Custom Button Card as feel it offers a lot of flexibility, but am struggling to get things aligned as I’d like:
This is where I’d like to get to (visual mockup):
This is where I’m at (produced by below code):
I can’t seem to get the text to all push up to the left. I know this is basic CSS, but can’t seem to get my head around it.
The code is rather repetitive, but before I trying an improve that, just wanted to get something that was matching my design.
Any help very much appreciated.
type: custom:button-card
name: Mirror
entity: sensor.mirror_battery_level
show_icon: false
show_state: true
show_label: true
label: .
custom_fields:
charging: |
[[[
var charging = states['binary_sensor.mirror_is_charging'].state
return `${charging}`
]]]
styles:
grid:
- grid-template-areas: "\"l s n charging\""
- grid-template-rows: min-content
- grid-template-columns: min-content
card:
- padding: 0px
- background: black
name:
- justify-self: start
- align-self: start
- text-align: left
- font-size: 32px
- font-weight: 800
- color: red
- padding: 0px
state:
- justify-self: end
- align-self: end
- text-align: left
- font-size: 32px
- font-weight: 800
- color: red
- padding: 0px
label:
- justify-self: end
- align-self: end
- text-align: left
- font-size: 32px
- font-weight: 800
- color: red
- padding: 0px
custom_fields:
charging:
- justify-self: start
- align-self: end
- text-align: left
- font-size: 32px
- font-weight: 800
- color: red
- padding: 0px
