That is one intense automation code, well done!
Does your source web site has all the times for USA, state and cities?
I see ABD (USA) is included. These are diyanet times only. So most likely only relevant if you are Turkish…
Thank you. I am not Turkish but I was interested in Imsak notification and would love to implement it in my setup from the Islamic prayer times integration.
I have been trying to scrape my local website for timings for the past few weeks and just cant get my head around how to get it to work. I have managed to scrape the time which shows as 4:57 am but can not get it to format as a timestamp. This is my code:
scrape:
- resource: https://www.noorulislam.org.uk
sensor:
- name: "Fajr_Prayer_Time"
select: "tr"
index: 2
value_template: '{{ value.split("am")[0] }}'
The value template for this is:
value_template: >
{{ strptime(states('sensor.fajr_prayer_time'), '%I:%M %p').strftime('%H:%M') }}
This turned out to be a bit messy, as the HTML in that table is a long way from standards-compliant. The data is in the third <tr> element, but the mess of <td> and <th> tags make it impossible to scrape any further.
Scraping that <tr> element gives this (for today):
Begins4:07 am5:42 am1:04 pm5:58 pm8:16 pm9:29 pm
So we’ll configure our sensors to pull out those times, with the second time being sunrise. The regex pattern is looking for an optional 1 (in e.g. 10:15 am) followed by digit:digit digit then am or pm. It should find all six as a list, so we just need to tell each sensor which one it’s using.
scrape:
- resource: https://www.noorulislam.org.uk
sensor:
- name: "Fajr Prayer Time"
select: "tr"
index: 2
value_template: '{{ today_at(strptime((value|regex_findall("(1?\d:\d\d\ [ap]m)"))[0], "%I:%M %p").strftime("%H:%M")) }}'
device_class: timestamp
- name: "Zuhr Prayer Time"
select: "tr"
index: 2
value_template: '{{ today_at(strptime((value|regex_findall("(1?\d:\d\d\ [ap]m)"))[2], "%I:%M %p").strftime("%H:%M")) }}'
device_class: timestamp
- name: "Asr Prayer Time"
select: "tr"
index: 2
value_template: '{{ today_at(strptime((value|regex_findall("(1?\d:\d\d\ [ap]m)"))[3], "%I:%M %p").strftime("%H:%M")) }}'
device_class: timestamp
- name: "Maghrib Prayer Time"
select: "tr"
index: 2
value_template: '{{ today_at(strptime((value|regex_findall("(1?\d:\d\d\ [ap]m)"))[4], "%I:%M %p").strftime("%H:%M")) }}'
device_class: timestamp
- name: "Isha Prayer Time"
select: "tr"
index: 2
value_template: '{{ today_at(strptime((value|regex_findall("(1?\d:\d\d\ [ap]m)"))[5], "%I:%M %p").strftime("%H:%M")) }}'
device_class: timestamp
This assumes sunrise is always in between Fajr and Zuhr. If that’s not the case, it gets a bit more difficult but not impossible.
Also, you can create these sensors via the UI:
Settings / Devices & Services / Integrations (at the top) / Add integration / Scrape
Brother you dont understand how much i appreciate your post. I’ve been trying to figure this out for weeks losing my sleep. Thank you so much!
I managed to get the timings separated by using this code which looked for the td tables, however the code you provided worked instantly and can not thank you enough.
scrape:
- resource: https://www.noorulislam.org.uk
sensor:
- name: "Fajr_Prayer_Time"
select: "td"
index: 1
value_template: "{{ strptime(states('sensor.fajr_prayer_time'), '%H:%M %p').strftime('%H:%M %p') }}"
1 Like
Nice!
Where do you get the icons from?
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 ;
}