The entity in the error message does not match the one in your code: There is a slash between „light“ and „micro“, I assume you wanted a bracket there.
Hi, thanks for your reply. Its the same code that is generating that error message (there is a “.” and not a “/” in the code). Maybe the error is on parsing of the file?
I don’t know Insteon so I have to ask stupid: Is the use of insteon.scene mandatory or an integration-built service?
I’m playing with the cover-popup-card which I saw in this thread and cannot get it to show a popup at all. I have other popup cards working but this one does not. Wondering if anyone could help, maybe it’s some config issue?
The slider-entity-row popups work just fine, it’s the cover-popup-card that just does not do anything
popup_cards:
cover.dining_room_left:
card:
type: custom:slider-entity-row
entity: cover.dining_room_left
title: Shade Position
cover.dining_room_middle:
card:
type: custom:slider-entity-row
entity: cover.dining_room_middle
title: Shade Position
cover.dining_room_right:
card:
type: custom:cover-popup-card
entity: cover.dining_room_right
sliderService: cover.set_cover_position
icon: mdi:blinds
actionsInARow: 2
actions:
- service: cover.open_cover
service_data:
entity_id: this
name: open
icon: mdi:window-shutter-open
- service: cover.close_cover
service_data:
entity_id: this
name: close
icon: mdi:window-shutter
No probs, its an integration based serevice
Is a pure service call working? Like
tap_action:
action: call-service
service: insteon.scene_on
service_data:
group: 10
I’ve never been able to get this card type to work. I have added it under HACS and can see it there, and it shows properly understood Lovelace resources, but it’s not one of my options when I create a new card and if I do it manually it always say “no card type found”. Any ideas?
Perhaps, if we cold see your code used in a card.
Did you add the necessary line to the lovelace resources?
I managed to hack together a popup slider for my shades last night based on code for the popup light slider card type.
popup_cards:
cover.dining_room_left:
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 50%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width: 50%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.5);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: custom:cover-popup-card
entity: cover.dining_room_left
sliderService: cover.set_cover_position
icon: mdi:blinds
actionsInARow: 2
actions:
- service: cover.open_cover
service_data: null
entity_id: this
name: open
icon: mdi:window-shutter-open
- service: cover.close_cover
service_data: null
entity_id: this
name: close
icon: mdi:window-shutter
title: Shade Position
2 Likes
Did you ever build the split popup card with the on/off switch and the slider type? I would like to do this and was wondering if you had the configuration already to share.
Thank you
Thanks, I scrolled through the 1500 or so posts and was able to create a few cards.
One thing, the long press pop ups work on my ipad, but not on my Galaxy S10 using the official HASS app (tried clearing cache and re-opening the app). Any ideas?
Yes it does
@DBuit First off, great work. I have your cards as my default for all views.
Some feedback: The spin animation is off center for the rotation when using MDI icons. Not sure if that’s something you can fix though.
Also, would it be possible to add custom animations as an option? I have seen it done as a custom entity using the style property in other addons.
What do you think?
Ok, never done learning. I read cross and it seems that not everything is adjustable. Think you can only template service_data but not service
1 Like
And what should be seen on long-press?
Light pop up, thermostat pop up, switch pop up, etc. Works on my iPad and on my phone’s browser, but not in the official Android app.
Call the Popup by service: browser_mod.popup or by action: fire-dom-event
First of all, thanks for this awesome family of cards. You rock!
I’ve been trying to use the HomeKit card style parameter to set a background image from a virtual camera.
Kodi updates this camera entity_picture thru a Kodi Media Sensor:
meta: >-
[{"sensor_entity_id": "sensor.sala_de_estar_kodi", "service_domain":
"kodi_media_sensors", "playlist_id": 1, "playlist_type": "video",
"currently_playing": 3087}]
data: >-
[{"object_type": "episode", "id": 3087, "artist": "", "genre":
"Action,Crime,Drama", "thumbnail":
"http://thetvdb.com/banners/fanart/original/266189-1.jpg", "album": "",
"label": "Dr. Hans Koehler", "title": "Dr. Hans Koehler", "episode": 1,
"season": 6, "year": 2019, "track": -1}]
friendly_name: sensor.sala_de_estar_kodi
The camera setup is as follows:
camera:
- platform: generic
still_image_url: >
{% set o = state_attr('sensor.sala_de_estar_kodi', 'data') | from_json %}
{{o[0].thumbnail}}
name: sala_de_estar_no_ar
I’ve tried to set the background using a template this way:
views:
- title: ''
path: sala-de-estar
panel: false
icon: 'mdi:sofa'
theme: clear
badges: []
cards:
- type: 'custom:homekit-card'
enableColumns: true
tileHoldAnimation: true
style: |
:host {
background-image: >
url( {{state_attr ( 'camera.sala_de_estar_no_ar','entity_picture' )}});
and in this other way:
[[[
return `url( ${state_attr ( 'camera.sala_de_estar_no_ar','entity_picture' )});˜;
]]]
Can you point out what is it I am doing wrong or suggest some other way to achieve the same goal?
Muito obrigado!
Hi m8.
Can this code be used in anyway to shorten the status of sensors?
timestampFormat: '[in ] h [hour(s) and ] mm [min]'
timestampDiff: true
I want to make it say “25 min ago” or 25h ago or 25 sek ago. That will make the text fitt in the square.
Or is there any other way?
Anyone that has horizontalScroll working?
No matter what i change tilesOnRow to it just breaks to a new row and will not scroll.
Posting code below:
title: Hjemme
kiosk_mode:
admin_settings:
hide_header: true
views:
- title: Home
panel: true
badges: []
popup_cards:
alarm_control_panel.verisure_alarm:
title: Alarm
card:
type: alarm-panel
entity: alarm_control_panel.verisure_alarm
cards:
- type: vertical-stack
cards:
- type: 'custom:mod-card'
style:
swipe-card:
$: |
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background-color: rgba(255,255,255,1.0) !important;
position: relative;
top: 15px
}
.swiper-pagination-bullet-active {
background-color: rgba(255,165,0,1.0) !important;
}
card:
type: 'custom:swipe-card'
start_card: 1
reset_after: 30
parameters:
spaceBetween: 8
autoHeight: true
pagination:
type: bullets
cards:
- type: picture-glance
style: |
ha-card {
margin-bottom: -15px;
background: rgba(255, 255, 255, 0.0);
border-radius: 0;
box-shadow: none;
color: white;
}
aspect_ratio: '16:9'
camera_image: camera.stue
camera_view: live
entities: []
hold_action:
action: call-service
service: script.stuekamera_turn_on
double_tap_action:
action: call-service
service: script.camera_tapoc200_stue_hd
- type: 'custom:homekit-card'
home: false
title: Hjemme
useBrightness: false
useTemperature: false
titleColor: '#FFF'
horizontalScroll: true
enableColumns: true
statePositionTop: true
style: |
:host
--tile-background: rgba(255, 255, 255, 0.10);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: rgba(255, 255, 255, 0.7);
--tile-name-text-color: rgba(255, 255, 255, 0.8);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(255, 255, 255, 0.8);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 255, 255, 1);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgba(255, 255, 255, 0.8);
--tile-on-icon-color: rgba(255,165,0,1.0);
/* #f7d959; */
font-family: Arial;
}
.top-fav {
background-color: rgba(255, 255, 230,0.5) !important;
}
.off-bg {
background-color: rgba(255, 255, 255, 0.10) ;
}
.fan .icon {
color: rgba(0, 0, 0, 0.5) !important;
}
.hideState .state {
visibility:hidden !important;
}
homekit-button .icon.climate {
background-color: rgba(255,165,0,1.0) !important;
}
rows:
- row: 1
columns:
- column: 1
tileOnRow: 4
entities:
- title: Lys
popup:
type: 'custom:light-popup-card'
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
entities:
- entity: light.stue_3
name: Stue
icon: 'mdi:ceiling-light'
- entity: light.color_temperature_light_15
icon: 'mdi:floor-lamp'
name: Godstol
- entity: light.soverom_2
name: Soverom
icon: 'mdi:ceiling-light'
- entity: light.bad
name: Bad
icon: 'mdi:ceiling-light'
- row: 2
columns:
- column: 1
tileOnRow: 3
entities:
- title: Temp
entities:
- entity: sensor.multisensor_stue
name: Stue
- entity: sensor.multisensor_gang
name: Gang
- entity: sensor.temperature_9
name: Loft
- column: 2
tileOnRow: 3
entities:
- title: Div
entities:
- card: custom:button-card
cardOptions:
entity: vacuum.xiaomi_vacuum_cleaner
icon: mdi:robot-vacuum
size: 60%
name: Jeeves
show_state: true
state:
- value: "cleaning"
spin: true
color: green
- value: "returning"
spin: true
color: yellow
styles:
card:
- '-webkit-box-shadow': none
- box-shadow: none
- background-color: 'rgba(255, 255, 255, 0.0)'
- margin-top: '-8px'
- font-size:
name:
- color: black
- font-weight: bold
- font-size: 15px
- padding-top: 7px
grid:
- grid-template-areas: '"i" "s" "n"'
- card: custom:button-card
cardOptions:
entity: alarm_control_panel.verisure_alarm
size: 90%
hold_action:
action: more-info
tap_action:
action: none
show_name: true
show_state: false
show_label: false
state:
- value: 'armed_home'
icon: mdi:shield-account
color: green
name: Skallsikret
- value: 'armed_away'
icon: mdi:shield-home
color: green
name: Helsikret
- value: 'disarmed'
icon: mdi:shield-off
color: red
name: Desarmert
styles:
card:
- '-webkit-box-shadow': none
- box-shadow: none
- background-color: 'rgba(255, 255, 255, 0.0)'
- margin-top: '-8px'
- font-size:
name:
- color: black
- font-weight: bold
- font-size: 15px
- card: 'custom:button-card'
action: toggle
cardOptions:
entity: switch.ventilasjon
size: 90%
show_name: false
show_state: false
show_label: false
state:
- value: 'on'
icon: mdi:hvac
name: På
- value: 'off'
icon: mdi:hvac-off
name: Av
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.ventilasjon
hold_action:
action: none
styles:
card:
- '-webkit-box-shadow': none
- box-shadow: none
- background-color: 'rgba(255, 255, 255, 0.0)'
- margin-top: '-2px'
icon:
- color: |
[[[
if (states['switch.ventilasjon'].state == "off")
return "255, 255, 255, 0.8";
return "rgba(255,165,0,1.0)";
]]]