I tried it but it didn’t work.
Hello,
I hope you can help me.
- the upper value is the outside temperature. how can I add the HA icon mdi:thermometer before this value?
- how can I add the decimal place, so that I have -1.0?
- how can I add °C after the value?
- is it possible to replace the bulb with the HA icon mdi:thermometer?
Thank you very much!
ui-lovelace.yaml
- type: custom:button-card
entity: sensor.netatmo_mein_haus_innen_temperature
name: Außen
custom_fields:
graph:
card:
type: 'custom:mini-graph-card'
entities:
- sensor.netatmo_mein_haus_innen_temperature
color_thresholds:
- color: '#007BFE'
value: 1
- color: '#26fe00'
value: 15
- color: '#FF5733'
value: 20
- color: '#fe0000'
value: 33
line_color: blue
hours_to_show: 24
line_width: 8
font_size: 75
show:
name: false
icon: false
state: false
circle_temp: >
[[[ { return states['sensor.netatmo_mein_haus_innen_temperature'].state;
return ` <svg viewBox="0 0 50 50">
</svg>`; } ]]]
circle_hum: >
[[[ { return states['sensor.netatmo_mein_haus_innen_humidity'].state;
}]]]
circle_rain: >
[[[ { return states['sensor.netatmo_mein_haus_innen_regenfee_rain'].state;
return `<svg viewBox="0 0 50 50">
</svg>`; } ]]]
styles:
custom_fields:
graph:
[top: 60%, left: 0%, width: 100%, position: absolute]
circle_temp:
[top: 5%, left: 60%, width: 50%, font-size: 2vw, font-weight: bold, text-align: left, color: white, position: absolute]
circle_hum:
[top: 30%, left: 60%, width: 50%, font-size: 1vw, text-align: left, position: absolute]
circle_rain:
[top: 45%, left: 60%, width: 50%, font-size: 1vw, text-align: left, position: absolute]
template:
- graph_tempe
- icon_hue
button_card_templates.yaml
graph_tempe:
template:
- base_temp
show_state: false
show_icon: false
1 Like
A huge thanks to you Mattias_Persson !
I still have a few bugs (especially for the responsive interface ) but I’m already very happy with the result
1 Like
I was able to fix my input_select.conditional_media. Now it works and changes from gallery to spotify when it needs to.
I changed the trigger part of your automations:
trigger:
- platform: state
entity_id: media_player.spotify_xxx
to: idle
But now when I play spotify, the gallery card disappears and I get a blank space instead. So the spotify card doesn’t show.
These are still the only 2 conditional cards I have:
- type: conditional
conditions:
- entity: input_select.conditional_media
state: gallery
card:
type: custom:gallery-card
entities:
- sensor.gallery_images
menu_alignment: hidden
slideshow_timer: 120
maximum_files: 60
file_name_format: '%YYY_%m_%d_%H_%M_%S'
caption_format: ' '
card_mod:
style: |
ha-card {
border-radius: calc(var(--custom-button-card-border-radius) / 2); /* card - rounded corners */
aspect-ratio: 1/1; /* card - square */
}
figure {
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
}
figcaption {
display: none; /* hide image caption */
}
img {
object-fit: cover !important; /* fill the whole card */
aspect-ratio: 1/1; /* needed for object-fit */
}
.btn {
top: 50% !important; /* center buttons */
}
.modal-content {
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
}
- type: conditional
conditions:
- entity: input_select.conditional_media
state: spotify
card:
type: custom:button-card
entity: media_player.spotify.xxx
tap_action: !include popup/spotify.yaml
template:
- conditional_media
- icon_spotify
I double checked every part of the base, base_media and conditional_media templates with yours and they match in every way.
Argh!
EDIT: Now I get this for the media position (even though I didn’t change anything) :
And entity.attributes.media_title does exist.
This will be my last question. Pretty sure…
Once I get my conditional set of course.
When I load up this beautiful setup on my Galaxy Tab A 10 (510). I am always presented wit this resolution:
But I want the resolution where I can see all the icons at once. For some reason when it loads up, it actually shows up for a half a second:
And then the loading changes back to the other resolution I showed first.
Anyone have any idea why this is happening?
is it zoomed on the tablet (like is the browser zoom set to higher than 100%?)
at the top of the UI-lovelace.yaml there is the “mediaquery” section where it decides how to layout the UI based on what the resolution of the display is set to. I would say it is treating your laptop like a phone because the resolution reported is too low. to test you could set the “max-width” in the media query section to be lower to force it to use the “full screen” version
If you are using Fully Kiosk Browser check the Web Zoom and Scaling option. You should disable the View in Desktop Mode option
2 Likes
Yes, this did the trick. Thanks.
Now how do you make the sidebar icons at the bottom smaller? (the ones for vaccum, information and updates)
Hi, this is such a good dashboard, thank you so much! My fonts do not seem to be the same as yours, where do I find the font files for SF fonts and where do I add these files to? Thanks in advance!
Hey All,
Still pluggin through this massive dashboard setup. This is more of a debugging question, but how can I use the browser console to watch or output (via console or otherwise) some of the values in these scripts? (eg. “variables” array in button_card_templates.) I am trying to thoroughly understand this code so I can modify it for my situation.
@chezpaul2 - Great layout. This is close to what I am looking for.
@Mattias_Persson Hi, is it possible to show the loader spinning wheel during particular states? I have a door lock that have ‘locked’ ‘unlocking’ ‘unlocked’ ‘locking’, I want to always show spinning wheel during ‘locking’ and ‘unlocking’. Thanks.
icon_lock:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -2%
- margin-top: 0%
custom_fields:
icon: >
[[[
if (variables.state === 'locked') {
return `
<svg viewBox="0 0 57 57">
<path d="M16.5 28V12.601C16.5 6.77 21.675 2 28 2h0c6.325 0 11.5 4.77 11.5 10.601V28h-23z" fill="none" stroke="#9da0a2" stroke-width="4" stroke-miterlimit="10"/><path d="M7.5 25h42v32h-42z" fill="#9da0a2"/><path d="M28.5 45h0a3.01 3.01 0 0 1-3-3v-6a3.01 3.01 0 0 1 3-3h0a3.01 3.01 0 0 1 3 3v6a3.01 3.01 0 0 1-3 3z" fill="#3C3C3C"/><path d="M7.5 51h42v6h-42z" fill="#9da0a2"/>
</svg>
`;
} else if (variables.state === 'locking') {
return `
<svg viewBox="0 0 57 57">
<path d="M16.5 28V12.601C16.5 6.77 21.675 2 28 2h0c6.325 0 11.5 4.77 11.5 10.601V28h-23z" fill="none" stroke="#424a60" stroke-width="4" stroke-miterlimit="10"/><path d="M7.5 25h42v32h-42z" fill="#ebba16"/><path d="M28.5 45h0a3.01 3.01 0 0 1-3-3v-6a3.01 3.01 0 0 1 3-3h0a3.01 3.01 0 0 1 3 3v6a3.01 3.01 0 0 1-3 3z" fill="#424a60"/><path d="M7.5 51h42v6h-42z" fill="#ebba16"/>
</svg>
`;
} else {
return `
<svg viewBox="0 0 57 57">
<path d="M16.5 15.82v-3.219C16.5 6.77 21.675 2 28 2h0c6.325 0 11.5 4.77 11.5 10.601V25" fill="none" stroke="#424a60" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10"/><path d="M7.5 25h42v32h-42z" fill="#ebba16"/><path d="M28.5 45h0a3.01 3.01 0 0 1-3-3v-6a3.01 3.01 0 0 1 3-3h0a3.01 3.01 0 0 1 3 3v6a3.01 3.01 0 0 1-3 3z" fill="#424a60"/><path d="M7.5 51h42v6h-42z" fill="#ebba16"/>
</svg>
`;
}
]]]
This is an awesome setup! Been playing around with it the past few days and it works great!
Only thing I can’t seem to figure out: how can I remove Home Assistant’s own header and sidebar? The customer-header addon is no longer supported.
Can someone answer how “sensor.hass_version_installed” gets its data?
Update: Well mine works, but I do not understand how.
Thanks! Works for me as well!
This looks great and I’ve started experimenting with it. Can anyone give me some help as to where I can reduce the vertical gap between rows? I’d like to bring them closer to each other (for example the 2 rows belonging to a single grid card are too far apart for me)
