#Combine or keep two cards together on a dashboard

1 messages · Page 1 of 1 (latest)

hollow harbor
#

I have a guage card card configured to show the charge of the household batery.

I've now created a template sensor to calculate the estimated battery life based on charge and power drain. This is displayed in a seperate card.

How can I either combine these into one card or keep them linked in such a way as the guage is always on top of the calculation?

Right now the cards move depending on the size of the screen

foggy delta
#

If you're using the Masonry dashboard, consider putting them in a vertical stack card.

sweet relic
#

If you're not opposed to using custom cards, you could consider the custom:stack-in-card. It's basically a stack card like karwosts suggested but it removes the borders from the contained cards and makes it look like a single card is displayed. ```yaml
type: custom:stack-in-card
mode: horizontal
cards:

  • type: gauge
    entity: sensor.disk_use_percent_home
  • type: gauge
    entity: sensor.memory_use_percent
#

Also, consider not showing the gauge cards since they tend to take up a bunch of room. You could simply display the information from the entities. There's lots of options when it comes to doing something like this. A stock Markdown card can do the trick: ```yaml
type: markdown
content: It is at {{ states.sensor.s22_ultra_battery_level.state }}% and {{states.sensor.s22_ultra_battery_state.state }}.

#

The Mushroom card (specifically the Mushroom Template Card) and custom:button-card are two other options to be able to (relatively) easily display information. Both cards offer a good bit of customization, too. ```yaml
type: custom:mushroom-template-card
primary: Battery is at {{ states.sensor.s22_ultra_battery_level.state }}%
secondary: Currently {{ states.sensor.s22_ultra_battery_state.state }}.

type: custom:button-card
entity: sensor.s22_ultra_battery_level
layout: name_state
show_icon: false
show_state: true
name: '[[[ return `${entity.state}%` ]]]'
state_display: '[[[ return states["sensor.s22_ultra_battery_state"].state ]]]'
```
hollow harbor
hollow harbor
# sweet relic If you're not opposed to using custom cards, you could consider the [custom:stac...

Thankyou for much for this. I had been playing around with a multiple entities card without the gauge to get a feel for how that might work taking up less space.

I'm quite new to really customising HA so haven't done anything with states. I have used AI to work out how to do the battery life calculation and display that as sensor.battery_runtime_estimate

I seem to have binary_sensor.battery_charging and binary_sensor.battery_discharging as states for the solar battery and they are on/off. Will try and use AI to do something similar to your mushroom-template-card

sweet relic
#

Will try and use AI to do something similar to your mushroom-template-card
Personally (and many others around here will agree), I do not recommend relying on AI to help you with your dashboard design. For the most part, it's not that difficult. Read over the documentation for the Mushroom cards, find examples, look through the forum, watch videos on YouTube, look around this Discord channel. Understanding the terminology such as entities, states, and attributes will make everything start to come together.
Most importantly, I think, create another dashboard just for experimenting and trying things out. (My experimental dashboard is 13k lines long and I frequently go back and find stuff that I've put together in order to remember how it was done.)
I invite you to check out my GitHub. I've posted some useful stuff on there that can be helpful. My GitHub - Concepts and My GitHub - Examples.
Other than that, don't be afraid to ask for help (not AI). But, try it on your own first and see what you can come up with.