type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid
layout:
grid-template-columns: auto 120px
grid-template-rows: auto auto
margin: '-4px 0px -10px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Prayer Timings
secondary: >-
{{ states('sensor.next_prayer') }} | {{
states('sensor.time_until_next_prayer_formatted') }} time left
icon: mdi:mosque
entity: sensor.next_prayer
tap_action:
action: none
hold_action:
action: none
icon_color: red
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px ;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.fajr_prayer_time
primary: Fajr
secondary: |
{{ states('sensor.fajr_prayer_time') }}
icon: mdi:weather-sunset-up
icon_color: '#F44336'
tap_action:
action: more-info
layout: vertical
fill_container: false
multiline_secondary: false
card_mod:
style: |
.mushroom-template-card .title {
grid-row: 1 / 2; /* span across the first row */
justify-self: start; /* align to the left */
}
.mushroom-template-card .subtitle {
grid-row: 2 / 3; /* span across the second row */
justify-self: end; /* align to the right */
}
- type: custom:mushroom-template-card
entity: sensor.dhuhr_prayer_time
primary: Dhuhr
secondary: |
{{ states('sensor.dhuhr_prayer_time') }}
icon: mdi:weather-sunny
icon_color: '#F1C40F'
tap_action:
action: more-info
layout: vertical
fill_container: false
multiline_secondary: false
card_mod:
style: |
.mushroom-template-card .title {
grid-row: 1 / 2; /* span across the first row */
justify-self: start; /* align to the left */
}
.mushroom-template-card .subtitle {
grid-row: 2 / 3; /* span across the second row */
justify-self: end; /* align to the right */
}
- type: custom:mushroom-template-card
entity: sensor.asr_prayer_time
primary: Asr
secondary: |
{{ states('sensor.asr_prayer_time') }}
icon: mdi:weather-sunset-down
icon_color: '#9C27B0'
tap_action:
action: more-info
layout: vertical
fill_container: false
multiline_secondary: false
card_mod:
style: |
.mushroom-template-card .title {
grid-row: 1 / 2; /* span across the first row */
justify-self: start; /* align to the left */
}
.mushroom-template-card .subtitle {
grid-row: 2 / 3; /* span across the second row */
justify-self: end; /* align to the right */
}
- type: custom:mushroom-template-card
entity: sensor.maghrib_prayer_time
primary: Maghrib
secondary: |
{{ states('sensor.maghrib_prayer_time') }}
icon: mdi:weather-sunset
icon_color: '#FF9800'
tap_action:
action: more-info
layout: vertical
fill_container: false
multiline_secondary: false
card_mod:
style: |
.mushroom-template-card .title {
grid-row: 1 / 2; /* span across the first row */
justify-self: start; /* align to the left */
}
.mushroom-template-card .subtitle {
grid-row: 2 / 3; /* span across the second row */
justify-self: end; /* align to the right */
}
- type: custom:mushroom-template-card
entity: sensor.isha_prayer_time
primary: Isha
secondary: |
{{ states('sensor.isha_prayer_time') }}
icon: mdi:weather-night
icon_color: '#673AB7'
tap_action:
action: more-info
layout: vertical
fill_container: false
multiline_secondary: false
card_mod:
style: |
.mushroom-template-card .title {
grid-row: 1 / 2; /* span across the first row */
justify-self: start; /* align to the left */
}
.mushroom-template-card .subtitle {
grid-row: 2 / 3; /* span across the second row */
justify-self: end; /* align to the right */
}
style: |
ha-card {
background: none;
box-shadow: none;
}
2 Likes
Thank you for providing the code for the prayer cards. It have a couple of questions.
- For next prayer timings you have the below code. Could you provide details on how you defined the sensors and where to add them.
secondary: >-
{{ states('sensor.next_prayer') }} | {{
states('sensor.time_until_next_prayer_formatted') }} time left
icon: mdi:mosque
entity: sensor.next_prayer
- For standard prayer times I have sensors like sensor.fajr_prayer, and you have sensor.fajr_prayer_time. To get my card to show the time I removed the _prayer to point it to the defined sensor. Doing this shows the entire date with time. How can I modify the code to show just the time?
Which Integration are you using to fetch Prayer times?
Here’s my complete code. I use Al-Adhan API for prayer timing. If you want to use this source then replace ‘USE_YOUR-LATITUDE’ and ‘USE_YOUR_LONGITUDE’ with your location’s lat and lon. Also, change school if you follow other than Hanafi.
- platform: rest
name: "Prayer Times"
json_attributes:
- data
resource: "http://api.aladhan.com/v1/timings?latitude=USE_YOUR_LATITUDE&longitude=USE_YOUR_LONGITUDE&method=2&school=1"
value_template: '{{ value_json["data"]["meta"]["method"]["name"].title() }}'
scan_interval: 3600
- platform: template
sensors:
fajr_prayer_time:
friendly_name: "Fajr Prayer Time"
value_template: >
{{ today_at(state_attr('sensor.prayer_times','data').timings['Fajr']).strftime("%I:%M %p") }}
dhuhr_prayer_time:
friendly_name: "Dhuhr Prayer Time"
value_template: >
{{ today_at(state_attr('sensor.prayer_times','data').timings['Dhuhr']).strftime("%I:%M %p") }}
asr_prayer_time:
friendly_name: "Asr Prayer Time"
value_template: >
{{ today_at(state_attr('sensor.prayer_times','data').timings['Asr']).strftime("%I:%M %p") }}
maghrib_prayer_time:
friendly_name: "Maghrib Prayer Time"
value_template: >
{{ today_at(state_attr('sensor.prayer_times','data').timings['Maghrib']).strftime("%I:%M %p") }}
isha_prayer_time:
friendly_name: "Isha Prayer Time"
value_template: >
{{ today_at(state_attr('sensor.prayer_times','data').timings['Isha']).strftime("%I:%M %p") }}
imsak_time:
friendly_name: "Imsak"
value_template: >
{{ today_at(state_attr('sensor.prayer_times','data').timings['Imsak']).strftime("%I:%M %p") }}
- platform: template
sensors:
next_prayer:
friendly_name: Next Prayer
value_template: >-
{% set now = strptime(states('sensor.time'), '%H:%M') %}
{% set imsak = strptime(states('sensor.imsak_time'), '%I:%M %p') %}
{% set fajr = strptime(states('sensor.fajr_prayer_time'), '%I:%M %p') %}
{% set dhuhr = strptime(states('sensor.dhuhr_prayer_time'), '%I:%M %p') %}
{% set asr = strptime(states('sensor.asr_prayer_time'), '%I:%M %p') %}
{% set maghrib = strptime(states('sensor.maghrib_prayer_time'), '%I:%M %p') %}
{% set isha = strptime(states('sensor.isha_prayer_time'), '%I:%M %p') %}
{% if now < imsak %}
{{ states('sensor.imsak_time') }}
{% elif imsak <= now < fajr %}
{{ states('sensor.fajr_prayer_time') }}
{% elif fajr <= now < dhuhr %}
{{ states('sensor.dhuhr_prayer_time') }}
{% elif dhuhr <= now < asr %}
{{ states('sensor.asr_prayer_time') }}
{% elif asr <= now < maghrib %}
{{ states('sensor.maghrib_prayer_time') }}
{% elif maghrib <= now < isha %}
{{ states('sensor.isha_prayer_time') }}
{% else %}
{% set tomorrow = now + timedelta(days=1) %}
{% set tomorrow_str = tomorrow.strftime('%Y-%m-%d') %}
{{ states('sensor.fajr_prayer_time', {'date': tomorrow_str}) }}
{% endif %}
- platform: template
sensors:
time_until_next_prayer:
friendly_name: Time Until Next Prayer
value_template: >-
{% set current_time = now().strftime('%H:%M') %}
{% set next_prayer = states('sensor.next_prayer') %}
{% set next_prayer_datetime = strptime(next_prayer, '%I:%M %p') %}
{% set current_datetime = strptime(current_time, '%H:%M').replace(year=next_prayer_datetime.year, month=next_prayer_datetime.month, day=next_prayer_datetime.day) %}
{% if current_datetime < next_prayer_datetime %}
{{ (next_prayer_datetime - current_datetime).total_seconds() }}
{% else %}
{{ (next_prayer_datetime + timedelta(days=1) - current_datetime).total_seconds() }}
{% endif %}
unit_of_measurement: seconds
- platform: template
sensors:
time_until_next_prayer_formatted:
friendly_name: Time Until Next Prayer Formatted
value_template: >-
{% set total_seconds = states('sensor.time_until_next_prayer') | float %}
{% set hours = (total_seconds // 3600) | int %}
{% set minutes = ((total_seconds % 3600) // 60) | int %}
{{ '%02d:%02d' % (hours, minutes) }}
1 Like
Thank you. Using Islamic Prayer Times integration.
I am pretty close. There are just two minor issues that I am looking to clean up.
- The “PRAYER TIMES” heading is not showing up on my card. Is there a separate code for that?
- My cards have this ugly border all around them. How do I get rid of that?
I think “Prayer Times” in that specific example is another card.
The borders can be removed via card_mod
I have card-mod installed. Using the same code provided in the earlier post. Tried a few other options by searching other codes as well. The borders are still persistent.
Add it a couple of times for each element.
style: |
ha-card {
--ha-card-box-shadow: 0px ;
}```
Thank you. I tried it, still no dice. Here is my complete card code. Would appreciate if you could identify what I am missing
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid
layout:
grid-template-columns: auto 120px
grid-template-rows: auto auto
margin: '-4px 0px -10px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Prayer Timings
secondary: >-
{{ states('sensor.next_prayer') }} | {{
states('sensor.time_until_next_prayer_formatted') }} time left
icon: mdi:mosque
entity: sensor.next_prayer
tap_action:
action: none
hold_action:
action: none
icon_color: green
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px ;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.fajr_prayer_time
primary: Fajr
secondary: >
{{ states('sensor.fajr_prayer') | as_timestamp |
timestamp_custom('%I:%M %p') }}
icon: mdi:weather-sunset-up
icon_color: '#F44336'
tap_action:
action: more-info
layout: vertical
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px ;
}
.mushroom-template-card .title {
grid-row: 1 / 2; /* span across the first row */
justify-self: start; /* align to the left */
}
.mushroom-template-card .subtitle {
grid-row: 2 / 3; /* span across the second row */
justify-self: end; /* align to the right */
}
- type: custom:mushroom-template-card
entity: sensor.dhuhr_prayer_time
primary: Dhuhr
secondary: >
{{ states('sensor.dhuhr_prayer') | as_timestamp |
timestamp_custom('%I:%M %p') }}
icon: mdi:weather-sunny
icon_color: '#F1C40F'
tap_action:
action: more-info
layout: vertical
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px ;
}
.mushroom-template-card .title {
grid-row: 1 / 2; /* span across the first row */
justify-self: start; /* align to the left */
}
.mushroom-template-card .subtitle {
grid-row: 2 / 3; /* span across the second row */
justify-self: end; /* align to the right */
}
- type: custom:mushroom-template-card
entity: sensor.asr_prayer_time
primary: Asr
secondary: >
{{ states('sensor.asr_prayer') | as_timestamp |
timestamp_custom('%I:%M %p') }}
icon: mdi:weather-sunset
icon_color: '#9C27B0'
tap_action:
action: more-info
layout: vertical
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px ;
}
.mushroom-template-card .title {
grid-row: 1 / 2; /* span across the first row */
justify-self: start; /* align to the left */
}
.mushroom-template-card .subtitle {
grid-row: 2 / 3; /* span across the second row */
justify-self: end; /* align to the right */
}
- type: custom:mushroom-template-card
entity: sensor.maghrib_prayer_time
primary: Maghrib
secondary: >
{{ states('sensor.maghrib_prayer') | as_timestamp |
timestamp_custom('%I:%M %p') }}
icon: mdi:weather-sunset-down
icon_color: '#FF9800'
tap_action:
action: more-info
layout: vertical
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px ;
}
.mushroom-template-card .title {
grid-row: 1 / 2; /* span across the first row */
justify-self: start; /* align to the left */
}
.mushroom-template-card .subtitle {
grid-row: 2 / 3; /* span across the second row */
justify-self: end; /* align to the right */
}
- type: custom:mushroom-template-card
entity: sensor.isha_prayer_time
primary: Isha
secondary: >
{{ states('sensor.isha_prayer') | as_timestamp |
timestamp_custom('%I:%M %p') }}
icon: mdi:weather-night
icon_color: '#673AB7'
tap_action:
action: more-info
layout: vertical
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px ;
}
.mushroom-template-card .title {
grid-row: 1 / 2; /* span across the first row */
justify-self: start; /* align to the left */
}
.mushroom-template-card .subtitle {
grid-row: 2 / 3; /* span across the second row */
justify-self: end; /* align to the right */
}
style: |
ha-card {
--ha-card-box-shadow: 0px ;
}
if you have HACS installed on your system you can install Mushroom themes from here: GitHub - piitaya/lovelace-mushroom-themes: Additional themes for Lovelace Mushroom Cards 🍄
These themes will get rid of the grid lines.
type: custom:button-card
variables:
currentview: |
[[[
return window.location.pathname.split('/').slice(-1);
]]]
name: PRAYER TIMES
color_type: card
styles:
card:
- height: 3em
- align: center
- font-weight: bold
- background-color: ''
color: var(--primary-color)
For the Prayer Times Title I’m using button card.
I have all the below packages installed in HACS. Any missing ones for this to work? I have selected “Mushroom” in my user profile theme drop down. Not sure if that’s enough as I don’t see any change to the default HA theme.
Much appreciated. I presume the font black color comes from your theme? This is how it looks in my dashboard. Working to get those ugly borders removed. I like how your dashboard is bigger in fonts. Mine is a bit small… somehow need to enlarge it.
How do you show the actual prayer time?
I am using Islamic Prayer Times integration and the sensors are showing:
“Asr Prayer xx hours ago”
You really dont need to change anything in the configuration file as most of the those can be handled through the UI, here is a simpler automation file:
alias: Adhan
description: ""
trigger:
- platform: time
at: "01:00:00"
id: "1"
- platform: time
at: sensor.islamic_prayer_times_fajr_prayer
- platform: time
at: sensor.islamic_prayer_times_dhuhr_prayer
- platform: time
at: sensor.islamic_prayer_times_asr_prayer
- platform: time
at: sensor.islamic_prayer_times_maghrib_prayer
- platform: time
at: sensor.islamic_prayer_times_isha_prayer
condition: []
action:
- if:
- condition: trigger
id: "1"
then:
- service: homeassistant.restart
data: {}
else:
- service: media_player.volume_set
data:
volume_level: 0.5
target:
device_id: 50ad12e8f3938a8547e5d79354146334
- service: media_player.play_media
target:
entity_id: media_player.living_room_speaker
data:
media_content_id: http://praytimes.org/audio/adhan/Sunni/Abdul-Basit.mp3
media_content_type: audio/mpeg
metadata:
title: Abdul-Basit.mp3
thumbnail: null
media_class: music
children_media_class: null
navigateIds:
- {}
- media_content_type: app
media_content_id: media-source://media_source
mode: single
I am facing the same issue you had with Prayer Timings not working . Showing unavailable.
How did you manage to fix it?
Which integration are you using for Prayer time?
I am actually using your code you posted few posts up. fetching from Prayer Times API - Prayer Times and Adhan Player
I have to mention I am using include.yaml so templates have their own config page and so are sensors
- sensor:
- name: "Fajr Prayer Time"
state: >
{{ today_at(state_attr('sensor.prayer_times','data').timings['Fajr']).strftime("%I:%M %p") }}
- name: "Dhuhr Prayer Time"
state: >
{{ today_at(state_attr('sensor.prayer_times','data').timings['Dhuhr']).strftime("%I:%M %p") }}
- name: "Asr Prayer Time"
state: >
{{ today_at(state_attr('sensor.prayer_times','data').timings['Asr']).strftime("%I:%M %p") }}
- name: "Maghrib Prayer Time"
state: >
{{ today_at(state_attr('sensor.prayer_times','data').timings['Maghrib']).strftime("%I:%M %p") }}
- name: "Isha Prayer Time"
state: >
{{ today_at(state_attr('sensor.prayer_times','data').timings['Isha']).strftime("%I:%M %p") }}
- name: "Imsak"
state: >
{{ today_at(state_attr('sensor.prayer_times','data').timings['Imsak']).strftime("%I:%M %p") }}
- sensor:
- name: Next Prayer
state: >-
{% set now = strptime(states('sensor.time'), '%H:%M') %}
{% set imsak = strptime(states('sensor.imsak_time'), '%I:%M %p') %}
{% set fajr = strptime(states('sensor.fajr_prayer_time'), '%I:%M %p') %}
{% set dhuhr = strptime(states('sensor.dhuhr_prayer_time'), '%I:%M %p') %}
{% set asr = strptime(states('sensor.asr_prayer_time'), '%I:%M %p') %}
{% set maghrib = strptime(states('sensor.maghrib_prayer_time'), '%I:%M %p') %}
{% set isha = strptime(states('sensor.isha_prayer_time'), '%I:%M %p') %}
{% if now < imsak %}
{{ states('sensor.imsak_time') }}
{% elif imsak <= now < fajr %}
{{ states('sensor.fajr_prayer_time') }}
{% elif fajr <= now < dhuhr %}
{{ states('sensor.dhuhr_prayer_time') }}
{% elif dhuhr <= now < asr %}
{{ states('sensor.asr_prayer_time') }}
{% elif asr <= now < maghrib %}
{{ states('sensor.maghrib_prayer_time') }}
{% elif maghrib <= now < isha %}
{{ states('sensor.isha_prayer_time') }}
{% else %}
{% set tomorrow = now + timedelta(days=1) %}
{% set tomorrow_str = tomorrow.strftime('%Y-%m-%d') %}
{{ states('sensor.fajr_prayer_time', {'date': tomorrow_str}) }}
{% endif %}
- sensor:
- name: Time Until Next Prayer
state: >-
{% set current_time = now().strftime('%H:%M') %}
{% set next_prayer = states('sensor.next_prayer') %}
{% set next_prayer_datetime = strptime(next_prayer, '%I:%M %p') %}
{% set current_datetime = strptime(current_time, '%H:%M').replace(year=next_prayer_datetime.year, month=next_prayer_datetime.month, day=next_prayer_datetime.day) %}
{% if current_datetime < next_prayer_datetime %}
{{ (next_prayer_datetime - current_datetime).total_seconds() }}
{% else %}
{{ (next_prayer_datetime + timedelta(days=1) - current_datetime).total_seconds() }}
{% endif %}
unit_of_measurement: seconds
- sensor:
- name: Time Until Next Prayer Formatted
state: >-
{% set total_seconds = states('sensor.time_until_next_prayer') | float %}
{% set hours = (total_seconds // 3600) | int %}
{% set minutes = ((total_seconds % 3600) // 60) | int %}
{{ '%02d:%02d' % (hours, minutes) }}
this is how my template is setup. The prayer times are working but the time until next prayer is showing unavailable.
