Hey @Mattias_Persson thanks so much for the response. So the interesting thing is that the state in the dev tool is perfectly how I would expect it, each shows the correct information when I call that sensor in dev tools, its just not coming up correctly in the user interface - I cleared cache, but the bottom line is only if I give the “unique_id” the name “sidebar” does anything come up in the interface. I checked indentations etc’ and they are all correct. why do you think the examples are wrong? they are exact copies of your code? Thanks
We can rule out the button-card template, it just returns all attributes that are not empty. Just tested on a light.
Nevermind, I asked because you posted this
yes, I went over button-card-templates and there was nothing there that would suggest the error, it seems to me that it has to do with the actual name “sidebar”…
I did the following tests:
A. if I call the hebrew section “sidebar” and the english section “sidebarheb”, they I get hebrew for both
B. if I call the english section “sidebar” and the hebrew section “sidebarheb”, I get english for both
C. if I call the english section “sidebareng” and the hebrew section “sidebarheb”, I get an empty sidebar that contains just the word “true”
so it seems that it only works when using the name “sidebar” exactly
here is an image of case c:
That can’t be the case… but test it out and rename them to dog and cat
Any entity works on my end. I think your issue is in your template or ui-lovelace
edit: just a thought, can hebrew characters be the issue?
so I did that (not exactly cat and dog… but similar 
), once I change the name from “sidebar” to anything else the panel comes up with nothing like in the picture above, if the name is sidebar exactly it comes up fine.
the only things I changed are in the template.yaml and in my custom-eng.yaml and custom-heb.yaml lovelace files:
include/template.yaml: the change is in the “unique_id” line
sensor:
- unique_id: dog
state: template
attributes:
time: >
{% set hours = now().strftime('%H') %}
custom-eng.yaml: the change is in the entity line:
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_dog
template: sidebar_template
just making those two changes (even without trying to use multiple languages) makes the sidebar not show up anymore - if I use the word “sidebar” instead of “dog” sidebar comes up
so with dog, the sidebar doesn’t come up, but in dev_tools sensor.template_dog does show the correct info
can’t be the hebrew - as in the test above - I tested only on changing the unique ID name for english and only tested that case
I think no… the aspect on this one is more beautiful
It’s like the color, the fonts is different.
Maybe because I use it on a too big monitor ?
Do you think that my picture is ok please ?
Thanks a lot again
Denis
Hi Giblet,
Would you mind sharing your template configuration for curtains & icon_curtains_combined ?
Very appreciated,
Kr,
Bart
But I didn’t find all the attributes that you applied in the theme.yaml file. I don’t understand how you assembled the file with all these attributes
It stays on “gallery” the whole time something is playing on spotify.
I do see the automations being triggered
I’m guessing this is normal:
So I have followed the rudimentary steps set forth in the post here. But… I get this.
Help?
I would really like to learn the structure of this and what tech is used. Not all that familiar with YAML, but i see javascript, CSS/SASS, html. any other architecture I am missing?
UPDATE: I think I figured it out. My path to layout-card.js, where the element is defined, was/is askew. I will test when I get home.
great project, almost have everything up an running, just need to add my door sensors and alarm, but it’s coming along.
screenshot:
1 Like
Good work. It looks nice!
1 Like
@Mattias_Persson why is this error? Is it in the sidebar_information file? thanks
Custom element doesn’t exist: hui-horizontal-stack-card.
I had a same problem. Fixed it by installing hui-element and added a dummy button for the ui-lovelace.yaml
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
GitHub - thomasloven/lovelace-hui-element: 🔹 Use built-in elements in the wrong place.
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?