Yes, doing the above has resolved the issue and my card mod styling is applying correctly now. Thanks for your help.
1 Like
I think you’re wrong, because with the following code I can call up an IFrame via the Companion App:
content:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: 0
grid-template-columns: 60vw
grid-template-rows: fit-content(100%)
mediaquery:
'(max-width: 800px)':
grid-template-columns: 100vw
cards:
- type: iframe
aspect_ratio: >
[[[
if (window.matchMedia('(max-width: 800px)').matches)
return '180%';
else return '100%';
]]]
url: >
[[[
if (entity) {
if (entity && entity.attributes ) {
let tmdb = entity.attributes.tmdb_link;
return `${tmdb}`;
}
}
]]]
1 Like
Hi,
I will ask my question again as I still can’t find answer…
Is it possible to dynamically move card on the dashboard?
I would like to use sensor value and assign it to x,y coordinates on the fly.
TIA
I’m very unsure whether I understand your question right? But one way to display a card dynamically is the conditional card. This allows you to show or hide cards depending on an condition. (state:heat, state:on , state:off …). The structure looks something like this:
- type: conditional
conditions:
- entity: input_boolean.leave_home_status
state: 'off' # Show card when Input Boolean is "off"
card:
type: custom:button-card
entity: script.return_home_lin
name: Zuhause
template:
- base
- icon_home
You can find more information here:
Well, not exactly. I want to move card or element on the card according to sensor value. So, when the value is 0 the element is on position x when value is 100 it moves to position y.
Hello
Do you have an idea why in the mobile view the size of my temperature card are not same like other ?
Where search this bug ?
1 Like
Check the templates you’re using for the “RDC” and “Temperatures” button cards. It also helps to post the code you used for these templates, and your ui-lovelace.yaml.
1 Like
Can anyone suggest a way that I can display the state of 2 different entities on one button card? Currently I have 2 separate button cards on my dashboard (Inspired by Mattias dashboard), which represent the 2 features of my bathroom mirror. One card represents the LED lights on the mirror, and one card represents the heated pad/demister behind the mirror. Each feature uses a smart relay.
- type: custom:button-card
entity: switch.led_driver
name: Mirror LED
template:
- base
- icon_mirror
- type: custom:button-card
entity: switch.demister_pad
name: Demister
template:
- base
- icon_mirror
Both cards share the same Icon. I have created the icon so that it displays both the LED lights and the Heated pad, and each feature is styled to light up based on the state of each entity.
To save dashboard space, I would like to combine both cards into one ideally. I’m looking for some help/suggestions as to how I could achieve this. I need the single card to be able to display the state of each entity, which will either be ‘On’ or ‘Off’. Here are my 2 cards as they stand currently:
In terms of the button card layout, I will probably need to change the name ‘Demister’ to ‘Heat’ or similar, as I wondered about having the name section of the grid that makes up the card having 2 columns, so ‘name name’ and then have ‘state state’ underneath in the ‘state’ area. Unless anyone can suggest an alternative way?
I’ve made some progress with this. I’ve managed to combine things into one card, which represents both entities. Here are the 4 possible appearances of the Mirror card:
I used the following for my single button card:
- type: custom:button-card
entity: switch.led_driver
name: Mirror
hold_action: !include popup/mirror.yaml
template:
- base
- icon_mirror
state_display: |
[[[
const ledState = states['switch.led_driver'].state;
const demisterState = states['switch.demister_pad'].state;
if (ledState === 'on' && demisterState === 'on') {
return 'LED+Heat';
} else if (ledState === 'on') {
return 'LED On';
} else if (demisterState === 'on') {
return 'Heat On';
} else {
return 'Off';
}
]]]
The only thing remaining issue is that the card doesn’t change background colour when just the Demister entity is on - only when the LED lights are on, as the LED lights are the entity referenced in the button card config. How can I get the card to take the ‘on’ appearance if ‘either’ of the two entities are on?
EDIT: OK so sometimes writing the problem down helps you to figure out a solution 
I simply created a base mirror template and set the variables to the following:
base_mirror:
template:
- tilt
- extra_styles
variables:
state_on: >
[[[
const ledState = states['switch.led_driver'].state;
const demisterState = states['switch.demister_pad'].state;
return (ledState === 'on' || demisterState === 'on');
]]]
state: >
[[[ return !entity || entity.state; ]]]
entity_id: >
[[[ return !entity || entity.entity_id; ]]]
entity_picture: >
[[[ return !entity || entity.attributes.entity_picture; ]]]
timeout: >
[[[ return !entity || Date.now() - Date.parse(entity.last_changed); ]]]
This seems to work fine
1 Like
What do I’m wrong here?
- sensor:
- unique_id: sidebar_time
state: template
attributes:
time: >
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">
{{ hours }}<span class="time-colon">:</span>{{ minutes }}
</span>
date: >
<font color='#D2D5D6'>
{% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %}
{% set days = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'] %}
{% set months = ['Januar', 'Feber', 'März', 'April', 'Mai', 'Juni',
'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'] %}
{{ days[now().weekday()] }}<br>
{{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
{% endif %}
</font>
- unique_id: sidebar
state: template
attributes:
greet: >
<b>
{% set time = now().hour %}
{% if time <= 1 %} Gute Nacht {{'\U0001F611'}}
{% elif time <= 3 %} Gute Nacht {{'\U0001F62A'}}
{% elif time <= 5 %} Gute Nacht {{'\U0001F634'}}
{% elif time <= 9 %} Guten Morgen {{'\U0001F642'}}
{% elif time <= 11 %} Guten Tag {{'\U0001F60E'}}
{% elif time <= 13 %} Mahlzeit {{'\U0001F60A'}}
{% elif time <= 18 %} Guten Tag {{'\U0001F60E'}}
{% elif time <= 19 %} Guten Abend {{'\U0001F44B\U0001F3FB'}}
{% elif time <= 22 %} Guten Abend {{'\U0001F60C'}}
{% elif time <= 23 %} Guten Abend {{'\U0001F974'}}
{% else %} Guten Abend {{'\U0001F974'}}
{% endif %}
</b>
weather: >
{% set temperature = states('sensor.openweathermap_feels_like_temperature') %}
{% set temperaturemax = states('sensor.openweathermap_forecast_temperature') %}
{% set temperaturecondition = states('weather.openweathermap') %}
{% set apparent = states('sensor.openweathermap_feels_like_temperature') | round %}
{% set precip = states('sensor.openweathermap_forecast_precipitation') | round %}
{% if not is_state('sensor.openweathermap_temperature', 'unknown') %}
{% if temperature | float(default=0) <= 0.0 %}
{{ apparent }}° / {{ (temperaturemax) | round }}° {% if precip | float(default=0) != 0 %} {{ precip }}% {{'\u2744\uFE0F'}} {% endif %}<br />{{ temperaturecondition }}
{% elif temperature | float(default=0) > 0.0 %}
{{ apparent}}° / {{ (temperaturemax) | round }}° {% if precip | float(default=0) != 0 %}{{ precip }}% {{ '\u2614\uFE0F' if precip == 0 }}{% endif %}<br />{{ temperaturecondition }}
{% endif %}
{% else %}
Kann die Wetterinformationen nicht lesen...
{% endif %}
active: >
<b>
{% set lights = [
states.light.licht_bad_keller,
states.light.Ben,
states.light.licht_esszimmer,
states.light.licht_kuche,
states.light.licht_paula,
states.light.licht_phil,
states.light.licht_windfang,
states.light.licht_wohnzimmer,
states.switch.stehlampe,
states.light.phil,
states.light.schlafzimmer,
] %}
{% set devices = [
] %}
{% set lights_on = lights | selectattr('state','eq','on') | list %}
{% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
{% set devices_on = devices | selectattr('state','search','(open|closed)') | list %}
{% set devices_name = devices_on | map(attribute='name') | join(', ') %}
{% if (lights_on | length == 0) and (devices_on | length > 0) %}
{{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} ist eingeschaltet
{% elif (lights_on | length == 1) and (devices_on | length == 1) %}
{{ lights_name }} und {{devices_name }} ist eingeschaltet
{% elif (lights_on | length == 1) and (devices_on | length > 1) %}
{{ lights_name }}, {{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} ist eingeschaltet
{% elif (lights_on | length > 1) and (devices_on | length == 1) %}
{{ lights_on | length }} Lampen und {{ devices_name }} ist eingeschaltet
{% elif (lights_on | length > 1) and (devices_on | length > 1) %}
{{ lights_on | length }} Lampen, {{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} ist eingeschaltet
{% elif (lights_on | length == 1) and (devices_on | length == 0) %}
{{ lights_name }} ist eingeschaltet
{% elif (lights_on | length > 1) and (devices_on | length == 0) %}
{{ lights_on | length }} Lampe ist eingeschaltet
{% else %}
<font color='#6a7377'>Alle Lichter sind ausgeschaltet</font>
{% endif %}
</b>
Did you add the date sensor to your configuration.yaml?
Hi everyone, I know Matt is not doing maintenance anymore on this project…
I am trying to remove the header HA bar with search and AI on my wall mounted tablet with kiosk browser, but I have some problems, I am modify the card-mod section directly in the theme file tablet.yaml as per Thomas Loven cookbook without success:
Theme cookbook · thomasloven/lovelace-card-mod Wiki · GitHub
I am not sure about indentation:
####################################################
# #
# CARD-MOD #
# #
####################################################
card-mod-theme: tablet
card-mod-root: |
#view {
background: url('/local/background.png');
background-size: cover;
}
card-mod-view-yaml: |
.: |
hui-view {
background: none !important;
}
card-mod-root-yaml: | <<==== THIS
paper-tabs$: |
.not-visible {
display: none;
}
.: |
app-toolbar {
display: none;
}
With browser dev tools I can disable from here changing from flex to none, but I am not sure if I can add this section on the theme file:
Can someone suggest me please?
Please use Browser_mod as per the installation instruction. It will allow you to remove the header and side bar on a per browser basis.
1 Like
Thank you very much asahani, I didnt see it because it was too easy!!
1 Like
I would like a card like the one in the picture.
I’ve tried making one myself and searched without finding anything.
I don’t want a name on it, just three values for three different entities.
If anyone can help me with that, I would be incredibly grateful.
Hey Folks, has any a template Icon Code for open / closed Windows ? Will be really really nice.
Sorry for my bad english.
I have another question, if someone could help me it would be great!
I am trying to move my music from a device to another (2 Sonos and WR320), normally I use the spotcast service start, I pass to service the spotify device id, and it works fine:
My button card
- type: conditional
conditions:
- entity: media_player.stereo_salone
state_not: unavailable
card:
type: custom:button-card
entity: media_player.stereo_salone
template:
- base
- media
- icon_play_pause
- icon_monitors
This is from dev tools
service: spotcast.start
data:
limit: 20
force_playback: true
repeat: "off"
shuffle: false
offset: 0
ignore_fully_played: false
spotify_device_id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
I’m trying to put it in the button card media, with variables, to be able to use the same button with different devices:
media:
template:
- base_media
...
base_media:
template:
- settings
variables:
entity_id: >
[[[ return !entity || entity.entity_id; ]]]
media_on: >
[[[ return !entity || ['playing', 'idle', 'paused'].indexOf(entity.state) !== -1; ]]]
media_off: >
[[[ return !entity || ['off', 'standby', 'unknown', 'unavailable'].indexOf(entity.state) !== -1; ]]]
spotify_id:
[[[
if (variables.entity_id == 'media_player.stereo_salone');
return variables.stereo_salone_spotify_id;
if (variables.entity_id == 'media_player.camera_da_letto');
return variables.camera_da_letto_spotify_id;
if (variables.entity_id == 'media_player.laboratorio');
return variables.laboratorio_spotify_id;
]]]
tap_action:
action: >
[[[
return variables.media_on
? 'call-service'
: 'none';
]]]
service: spotcast.start
service_data:
spotify_device_id:
[[[
return variables.spotify_id;
]]]
my template settings:
settings:
variables:
camera_da_letto_spotify_id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
bagno_spotify_id: yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
stereo_salone_spotify_id: zzzzzzzzzzzzzzzzzzzzzzzzzz
laboratorio_spotify_id: ccccccccccccccccccccccccccc
I got this error:
Invocazione del servizio spotcast/start non riuscita. value should be a string for dictionary value @ data[‘spotify_device_id’]
I think I made a mistake creating/passing the spotify_id, how to debug it?
Can you share the setup?
thank you for the reply, what would you like to know about the setup?
Anyway I think I found 1st error, I forgot to define the variable:
entity_id: >
[[[ return !entity || entity.entity_id; ]]]
but here are still other errors, I am sure this part has a wrong syntax:
spotify_id:
[[[
if (variable......
