Hi i’ve just tried this again and same results i don’t think the issue i’m having is with the decluttering.
As i said before i don’t use the Lovelace UI yaml i do it all in the UI with the raw configuration and i’ve just read that the raw configuration editor doesn’t support !include so i’m unable to add it.
I’m going to read up on how i can change over to the yaml file without anything messing up as i don’t want to start again.
Thanks
Hi,
Stunned by the animated floorplan for your tablet. Very Curious on how (or with what) did you created that?
I apologise, I have actually deleted this and am now using the sidebar component instead I use a similar style to the above for my mobile version though. Below is the code for that, which you should be able to modify to get close to the above.
- type: custom:button-card
entity: sensor.dark_sky_summary
color_type: card
size: 50%
lock: false
show_name: false
show_state: false
show_label: false
show_icon: true
show_entity_picture: false
tap_action:
action: more-info
haptic: success
aspect_ratio: 1/1
margin-right: 60px
styles:
card:
- border-radius: 100%
- border-style: hidden
- padding: 0px
- box-shadow: none
icon:
- color: var(--primary-color)
state:
- value: "Mostly Cloudy"
color: 'rgb(116,115,115)'
- value: "Partly Cloudy"
color: 'rgb(189,213,225)'
- value: "Sunny"
color: 'rgb(255,247,162)'
- value: "Overcast"
color: 'rgb(114,131,166)'
- value: "Possible Light Rain"
color: 'rgb(105,139,208)'
- value: "Light Rain"
color: 'rgb(105,139,208)'
- value: "Rain"
color: 'rgb(118,131,156)'
- value: "Possible Drizzle"
color: 'rgb(105,139,208)'
- value: "Clear"
color: 'rgb(114,186,218)'
- value: "Windy"
color: 'rgb(108,133,171)'
- type: vertical-stack
flex-grow: 2
style: |
ha-card {
box-shadow: none;
border-style: hidden;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
cards:
- type: markdown
style:
.: |
ha-card {
background-color: var(--primary--color) !important;
box-shadow: none;
}
ha-markdown:
$: |
ha-markdown-element:first-of-type h2 {
background-color: var(--primary-color);
color: var(--primary-background-color);
font-size: 18px;
line-height: 18px;
}
ha-markdown-element:first-of-type h3 {
background-color: var(--primary-color);
font-weight: normal;
color: var(--primary-background-color);
font-size: 12px;
line-height: 12px;
}
ha-markdown-element:second-of-type h3 {
background-color: var(--primary-color);
color: var(--primary-background-color);
font-weight: normal;
font-size: 12px;
line-height: 12px;
}
content: |
## {{ states('input_select.frontend_greeting') }}, {{user}}
### Today will be {{ states('sensor.dark_sky_daytime_high_temperature_1d') }}°C <br/> {{ states('sensor.dark_sky_summary_1d') }}
Mobile version looks like this:
Here is my dashboard in my daughter’s room. Not a Lovelace dashboard (it is floorplan) and not my main driver, but could be fun to look at:
Clicking on Elsa will make the room cooler, Anna = warmer, Kristoff with guitar = turn on sleep music, Olaf with candle = turn on the lights, Swen’s antlers = clock.
Hello,
Two weeks in to Home Assitant. I have already rebuilt my UI 100 times . But i think i am finally happy, for now… Nothing fancy, just a clean look
I have modified the Caule Dark Grey alot. Using card-mod way to much instead of just changeing in the theme-file.
I am most pleased with my spotify player. I am using spotcast and mini media player with shortcuts so i can start my chromecast devies directly from mini media player.
I liked your propane tank card. Can you post the icon you used? Also what are you using to track the tanks amount? I have a tank but the company put a wireless tracker on it but I have access to the data. Just curious how you did that card and setup.
This weekend I have been busy with creating a new dashboard. primary goal was making it work with a samsung Tab A7 10.4inch and an iPad.
This is the result…
I have used a mix of cards
- custom: thermostat-dark-card
- picture-elements
- horizontal-stack
- custom: button-card
The custom: button-card is amazing as I have setup all the buttons and sensors with it
configured with almost all options combined.
If you want a sample of the script, let me know and I will send you one.
What is it that you use to measure the power usage on each fase group?
Hi Vasco,
I use a Shelly 3EM for that, works perfect.
My son wanted his own SpaceX themed dashboard for the tab I mounted on his wall.
The basics are done. Now to populate with the things he wants it will require some css and js magic
UPDATE!
Here is some video of the almost final product. Special note. The planets in the backgrond are fully CSS code.
Nice work.
Are you using the sidebar integration from hacs for your sidebar or something different ?
I’m trying to get a decent sidebar working on mine.
Really good job!
Are you able to share your Lovelace code?
Thx a lot.
I am using this sidebar from hacs
Thank you … and here it is