Adhan Automation (الأذان التلقائي للصلاة) using google speaker

Share your Projects!
,
519

Hello All,
im looking for the easiest way to add offset to athan as follow:

This is the automation Trigger:

trigger:
  - platform: time
    at: sensor.dhuhr_prayer
    id: dhuhr
  - platform: time
    at: sensor.asr_prayer
    id: Asr
  - platform: time
    id: Maghrib
    at: sensor.maghrib_prayer
  - platform: time
    id: Isha
    at: sensor.isha_prayer
  - platform: time
    id: fajr
    at: sensor.fajr_prayer

And this is my configuration:

sensor:
  - platform: time_date
    display_options:
      - "time"
      - "date"
      - "date_time"
      - "date_time_iso"
      - "time_date"
      - "time_utc"
      - "beat"

Thanks in advance!

520

@chintito4ever @devilization Could you please share your automation code of how to play adthan with these sensors? I am having hard time get them triggered. I did not have any issue when I used the islamic prayers time integration.

Here the automation I have:

alias: AdhanviaAlexa
description: ""
trigger:
  - platform: time
    at: sensor.dhuhr_prayer_time
    id: dhuhr1
  - platform: time
    at: sensor.asr_prayer_time
    id: Asr1
  - platform: time
    id: Maghrib1
    at: sensor.maghrib_prayer_time
  - platform: time
    id: Isha1
    at: sensor.isha_prayer_time
  - platform: time
    id: fajr1
    at: sensor.fajr_prayer_time
condition: []

I don’t no notification on my mobile nor through the echo devices.

521

Trigger should be a template

alias: Hanafi Adhan
trigger:
  - platform: template
    value_template: >-
      {% set x = states('sensor.fajr_prayer_time') %} {{ now() >=
      today_at(strptime(x, "%I:%M %p").time()) }}
  - platform: template
    value_template: >-
      {% set x = states('sensor.dhuhr_prayer_time') %} {{ now() >=
      today_at(strptime(x, "%I:%M %p").time()) }}
  - platform: template
    value_template: >-
      {% set x = states('sensor.asr_prayer_time') %} {{ now() >=
      today_at(strptime(x, "%I:%M %p").time()) }}
  - platform: template
    value_template: >-
      {% set x = states('sensor.maghrib_prayer_time') %} {{ now() >=
      today_at(strptime(x, "%I:%M %p").time()) }}
  - platform: template
    value_template: >-
      {% set x = states('sensor.isha_prayer_time') %} {{ now() >=
      today_at(strptime(x, "%I:%M %p").time()) }}
    enabled: true
condition: []
action:
  - data:
      volume_level: 0.3
    service: media_player.volume_set
    target:
      entity_id:
        - media_player.master_bedroom_speaker
  - alias: ""
    data:
      entity_id: media_player.master_bedroom_speaker
      media_content_id: http://192.168.1.129:8123/local/azaan.mp3
      media_content_type: music
    service: media_player.play_media
1 Like
522

Thank you @chintito4ever . I will try the templates as triggers and report back later.

523

It worked perfectly with triggers Ids and the way I wanted too. Jazaka Allah khayran!

1 Like
524

image
image882×618 84.8 KB

What do you guys think of this design? It also dynamically selects current prayer card based on current prayer time .

3 Likes
525

This is great and I like the fact that highlight the current prayer. Can this be done vertically like the one I am using right now? or at least with two horizontal rows since I have more than 5 entities?
This is what I am using right now:

image
image370×571 20.9 KB

A side note question if you dont mind. Is there a way to make prayers time start a few seconds before the exact times? I am using the trigger templates you posted above to trigger adhan in my TV and it s a few seconds behind. Thank you!

526

It select current prayer or next prayer?
I think you Can clean the next prayer Time in secondary txt.

527

Hello. Can you share this latest code please

528

Here you go

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 Times
        secondary: |-
          Next Prayer: {{ states('sensor.next_prayer') }} | Starts in         {{
           states('sensor.time_until_next_prayer_formatted') }}
        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 {
                background: none;
                box-shadow: none;
              }
            mushroom-state-info$: |
              .container {
                --primary-text-color: rgba(255, 255, 255, 0.9);  /* White with slight transparency for high legibility */
                --secondary-text-color: rgba(255, 235, 59, 0.9);  /* A soft amber for a warm contrast */
              }
  - type: custom:timer-bar-card
    entities:
      - timer.next_prayer_timer
    layout: full_row
    bar_radius: 5px
    bar_height: 20px
    bar_width: 70%
    bar_foreground: rgba(92, 107, 192, 1)
    bar_background: rgba(237, 231, 246, 1)
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Fajr
        secondary: |
          {{ states('sensor.fajr_prayer_time') }}
        icon: mdi:weather-sunset-up
        icon_color: '#F44336'
        layout: vertical
        tap_action:
          action: more-info
        entity: sensor.current_prayer
        card_mod:
          style:
            .: |
              ha-card {       
                /* Set size and spacing of button */

                {% if states('sensor.current_prayer') == 'Fajr' %}
                  border: 1px outset green; /* Example border color */
                  background: rgba(70, 130, 180, 0.5) !important;
                {% else %}
                  background: rgba(199, 224, 238, 0.5) !important; 
                {% endif %}
                
                width: 75px;
                --spacing: 8px;
                padding-bottom: calc(var(--spacing) * 1.718) !important;
                margin-bottom: 5px;
                /* Styling of button */
                
                
                box-shadow: var(--ha-card-box-shadow) !important;
                border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;

                /* Center button */
                margin-left: auto;
                margin-right: auto;
                transition: all 0s;
              }

              /* Add subtle color on hover */
              ha-card:hover {
                background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
                border-color: orange; /* Orange border on hover */
              }
              ha-state-icon {
                {% if states('sensor.current_prayer') == 'Fajr' %}
                  animation: spin 2s linear infinite;
                {% endif %}
              }
              @keyframes spin {
                0% {transform: rotate(0deg);}
            mushroom-state-info$: |
              .container {               
                --secondary-text-color: rgba(13, 71, 161, 0.9);  /* A soft amber for a warm contrast */
              }
      - type: custom:mushroom-template-card
        primary: Dhuhr
        secondary: |
          {{ states('sensor.dhuhr_prayer_time') }}
        tap_action:
          action: more-info
        entity: sensor.current_prayer        
        icon: mdi:weather-sunny
        icon_color: '#FFC107'
        layout: vertical
        card_mod:
          style:
            .: |
              ha-card {       
                /* Set size and spacing of button */

                {% if states('sensor.current_prayer') == 'Dhuhr' %}
                  border: 1px outset green; /* Example border color */
                  background: rgba(70, 130, 180, 0.5) !important;
                {% else %}
                  background: rgba(199, 224, 238, 0.5) !important; 
                {% endif %}
                
                width: 75px;
                --spacing: 8px;
                padding-bottom: calc(var(--spacing) * 1.718) !important;
                margin-bottom: 5px;
                /* Styling of button */
                
                
                box-shadow: var(--ha-card-box-shadow) !important;
                border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;

                /* Center button */
                margin-left: auto;
                margin-right: auto;
                transition: all 0s;
              }

              /* Add subtle color on hover */
              ha-card:hover {
                background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
                border-color: orange; /* Orange border on hover */
              }
              ha-state-icon {
                {% if states('sensor.current_prayer') == 'Dhuhr' %}
                  animation: spin 2s linear infinite;
                {% endif %}
              }
              @keyframes spin {
                0% {transform: rotate(0deg);}
            mushroom-state-info$: |
              .container {               
                --secondary-text-color: rgba(13, 71, 161, 0.9);  /* A soft amber for a warm contrast */
              }
      - type: custom:mushroom-template-card
        primary: Asr
        secondary: |
          {{ states('sensor.asr_prayer_time') }}
        icon: mdi:weather-sunset-down
        icon_color: '#9C27B0'
        layout: vertical
        tap_action:
          action: more-info
        entity: sensor.current_prayer
        card_mod:
          style:
            .: |
              ha-card {       
                /* Set size and spacing of button */

                {% if states('sensor.current_prayer') == 'Asr' %}
                  border: 1px outset green; /* Example border color */
                  background: rgba(70, 130, 180, 0.5) !important;
                {% else %}
                  background: rgba(199, 224, 238, 0.5) !important; 
                {% endif %}
                
                width: 75px;
                --spacing: 8px;
                padding-bottom: calc(var(--spacing) * 1.718) !important;
                margin-bottom: 5px;
                /* Styling of button */
                
                
                box-shadow: var(--ha-card-box-shadow) !important;
                border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;

                /* Center button */
                margin-left: auto;
                margin-right: auto;
                transition: all 0s;
              }

              /* Add subtle color on hover */
              ha-card:hover {
                background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
                border-color: orange; /* Orange border on hover */
              }
              ha-state-icon {
                {% if states('sensor.current_prayer') == 'Asr' %}
                  animation: spin 2s linear infinite;
                {% endif %}
              }
              @keyframes spin {
                0% {transform: rotate(0deg);}
            mushroom-state-info$: |
              .container {               
                --secondary-text-color: rgba(13, 71, 161, 0.9);  /* A soft amber for a warm contrast */
              }
      - type: custom:mushroom-template-card
        primary: Maghrib
        secondary: |
          {{ states('sensor.maghrib_prayer_time') }}
        icon: mdi:weather-sunset
        icon_color: '#FF9800'
        layout: vertical
        tap_action:
          action: more-info
        entity: sensor.current_prayer
        card_mod:
          style:
            .: |
              ha-card {       
                /* Set size and spacing of button */

                {% if states('sensor.current_prayer') == 'Maghrib' %}
                  border: 1px outset green; /* Example border color */
                  background: rgba(70, 130, 180, 0.5) !important;
                {% else %}
                  background: rgba(199, 224, 238, 0.5) !important; 
                {% endif %}
                
                width: 75px;
                --spacing: 8px;
                padding-bottom: calc(var(--spacing) * 1.718) !important;
                margin-bottom: 5px;
                /* Styling of button */
                
                
                box-shadow: var(--ha-card-box-shadow) !important;
                border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;

                /* Center button */
                margin-left: auto;
                margin-right: auto;
                transition: all 0s;
              }

              /* Add subtle color on hover */
              ha-card:hover {
                background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
                border-color: orange; /* Orange border on hover */
              }
              ha-state-icon {
                {% if states('sensor.current_prayer') == 'Maghrib' %}
                  animation: spin 2s linear infinite;
                {% endif %}
              }
              @keyframes spin {
                0% {transform: rotate(0deg);}
            mushroom-state-info$: |
              .container {               
                --secondary-text-color: rgba(13, 71, 161, 0.9);  /* A soft amber for a warm contrast */
              }
      - type: custom:mushroom-template-card
        primary: Isha
        secondary: |
          {{ states('sensor.isha_prayer_time') }}
        tap_action:
          action: more-info
        entity: sensor.current_prayer          
        icon: mdi:weather-night
        icon_color: '#673AB7'
        layout: vertical
        card_mod:
          style:
            .: |
              ha-card {       
                /* Set size and spacing of button */

                {% if states('sensor.current_prayer') == 'Isha' %}
                  border: 1px outset green; /* Example border color */
                  background: rgba(70, 130, 180, 0.5) !important;
                {% else %}
                  background: rgba(199, 224, 238, 0.5) !important; 
                {% endif %}
                
                width: 75px;
                --spacing: 8px;
                padding-bottom: calc(var(--spacing) * 1.718) !important;
                margin-bottom: 5px;
                /* Styling of button */
                
                
                box-shadow: var(--ha-card-box-shadow) !important;
                border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;

                /* Center button */
                margin-left: auto;
                margin-right: auto;
                transition: all 0s;
              }

              /* Add subtle color on hover */
              ha-card:hover {
                background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
                border-color: orange; /* Orange border on hover */
              }
              ha-state-icon {
                {% if states('sensor.current_prayer') == 'Isha' %}
                  animation: spin 2s linear infinite;
                {% endif %}
              }
              @keyframes spin {
                0% {transform: rotate(0deg);}
            mushroom-state-info$: |
              .container {               
                --secondary-text-color: rgba(13, 71, 161, 0.9);  /* A soft amber for a warm contrast */
              }
card_mod:
  style: |
    ha-card {
      /* Styling of card background */
      background: linear-gradient(to bottom right, rgba(95, 158, 160, 0.85) 30%, rgba(173, 216, 230, 0.85) 100%);
    }
529

If you want to use vertical you can use something like this:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 70% 30%
      grid-gap: 0px;
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.fajr_prayer_time
        primary: Fajr Prayer
        secondary: null
        icon: mdi:weather-sunset-up
        icon_color: '#F1C40F'
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: -4px -7px;
            }
      - type: custom:mushroom-template-card
        entity: sensor.fajr_prayer_time
        primary: '{{states(entity)}}'
        card_mod:
          style:
            mushroom-state-info$: |
              * {
                text-align: end;
                font-family: 'SF Pro Rounded';
              }
            .: |
              ha-card {
                margin: 6px 2px -6px 0px;
                box-shadow: none;
              }
  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-card {
          margin: -25px 0px 0px 66px;
          border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
        }
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 70% 30%
      grid-gap: 0px;
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.dhuhr_prayer_time
        primary: Dhuhr Prayer
        secondary: ''
        icon: mdi:weather-sunny
        icon_color: '#E74C3C'
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: -4px -7px;
            }
      - type: custom:mushroom-template-card
        entity: sensor.dhuhr_prayer_time
        primary: '{{states(entity)}}'
        secondary: ''
        card_mod:
          style:
            mushroom-state-info$: |
              * {
                text-align: end;
                font-family: 'SF Pro Rounded';
              }
            .: |
              ha-card {
                margin: 6px 2px -6px 0px;
                box-shadow: none;
              }
  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-card {
          margin: -25px 0px 0px 66px;
          border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
        }
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 70% 30%
      grid-gap: 0px;
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.asr_prayer_time
        primary: Asr Prayer
        secondary: ''
        icon: mdi:sun-angle
        icon_color: '#3498DB'
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: -4px -7px;
            }
      - type: custom:mushroom-template-card
        entity: sensor.asr_prayer_time
        primary: '{{states(entity)}}'
        secondary: ''
        card_mod:
          style:
            mushroom-state-info$: |
              * {
                text-align: end;
                font-family: 'SF Pro Rounded';
              }
            .: |
              ha-card {
                margin: 6px 2px -6px 0px;
                box-shadow: none;
              }
  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-card {
          margin: -25px 0px 0px 66px;
          border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
        }
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 70% 30%
      grid-gap: 0px;
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.maghrib_prayer_time
        primary: Maghrib Prayer
        secondary: null
        icon: mdi:weather-sunset-down
        icon_color: '#A569BD'
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: -4px -7px;
            }
      - type: custom:mushroom-template-card
        entity: sensor.maghrib_prayer_time
        primary: '{{states(entity)}}'
        card_mod:
          style:
            mushroom-state-info$: |
              * {
                text-align: end;
                font-family: 'SF Pro Rounded';
              }
            .: |
              ha-card {
                margin: 6px 2px -6px 0px;
                box-shadow: none;
              }
  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-card {
          margin: -25px 0px 0px 66px;
          border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
        }
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 70% 30%
      grid-gap: 0px;
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.isha_prayer_time
        primary: Isha Prayer
        secondary: ''
        icon: mdi:moon-waxing-crescent
        icon_color: green
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: -4px -7px;
            }
      - type: custom:mushroom-template-card
        entity: sensor.isha_prayer_time
        primary: '{{states(entity)}}'
        secondary: ''
        card_mod:
          style:
            mushroom-state-info$: |
              * {
                text-align: end;
                font-family: 'SF Pro Rounded';
              }
            .: |
              ha-card {
                margin: 6px 2px -6px 0px;
                box-shadow: none;
              }

image
image1013×772 27.2 KB

2 Likes
530

Great thanks. May i Ask for your current prayer sensor please?

531

Yap, forgot to add it yesterday.

You can exclude icon_template and attribute_templates, one dynamically chooses icon and other one shows time passed since current prayer started.

- platform: template
  sensors:
    current_prayer:
      friendly_name: "Current Prayer"
      value_template: >-
        {% set now = strptime(states('sensor.time'), '%H:%M') %}
        {% set fajr = strptime(states('sensor.fajr_prayer_time'), '%I:%M %p') %}
        {% set sunrise = strptime(states('sensor.sunrise_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') %}
        {% set midnight = strptime('00:00', '%H:%M') %}
        {% set noon = strptime('12:00', '%H:%M') %}

        {% if now >= fajr and now < sunrise %}
          Fajr
        {% elif now >= sunrise and now < dhuhr %}
          Sunrise
        {% elif now >= dhuhr and now < asr %}
          Dhuhr
        {% elif now >= asr and now < maghrib %}
          Asr
        {% elif now >= maghrib and now < isha %}
          Maghrib
        {% elif now >= isha or now < fajr %}
          Isha
        {% endif %}

      icon_template: >-
        {% set now = strptime(states('sensor.time'), '%H:%M') %}
        {% 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') %}
        {% set midnight = strptime('00:00', '%H:%M') %}
        {% set noon = strptime('12:00', '%H:%M') %}
        {% if now >= fajr and now < dhuhr %}
          mdi:weather-sunset-up
        {% elif now >= dhuhr and now < asr %}
          mdi:weather-sunny
        {% elif now >= asr and now < maghrib %}
          mdi:weather-sunset-down
        {% elif now >= maghrib and now < isha %}
          mdi:weather-sunset
        {% elif now >= isha or now < fajr %}
          mdi:weather-night
        {% endif %}
      attribute_templates:
        Started: >-
          {% set now = strptime(states('sensor.time'), '%H:%M') %}
          {% 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') %}
          {% set current_prayer_time = None %}

          {% if now >= fajr and now < dhuhr %}
            {% set current_prayer_time = fajr %}
          {% elif now >= dhuhr and now < asr %}
            {% set current_prayer_time = dhuhr %}
          {% elif now >= asr and now < maghrib %}
            {% set current_prayer_time = asr %}
          {% elif now >= maghrib and now < isha %}
            {% set current_prayer_time = maghrib %}
          {% elif now >= isha or now < fajr %}
            {% set current_prayer_time = isha %}
          {% endif %}

          {% if current_prayer_time %}
            {% set time_diff = now - current_prayer_time %}
            {% set hours = (time_diff.total_seconds() // 3600) | int %}
            {% set minutes = ((time_diff.total_seconds() % 3600) // 60) | int %}
            -{{ hours }}:{{ minutes }}
          {% else %}
            "Not started"
          {% endif %}
532

Thanks it worked.
I deleted sunrise as i don’t need it.

533

Thank you very much brother. How can I change the color of the whole background of this card? The vertical one did not work for me as I wanted to. However, I appreciate your efforts and time.

534

Hello i guess you have to change color in the last cardmod :

card_mod:
  style: |
    ha-card {
      /* Styling of card background */
      background: linear-gradient(to bottom right, rgba(95, 158, 160, 0.85) 30%, rgba(173, 216, 230, 0.85) 100%);
    }

Mine is like this :

card_mod:
  style: |
    ha-card {
      background: none;
      box-shadow: none;
    }

image

1 Like
535

Thank you very much! I would also like to add a text under the prayers name. For instance, under Fajr, would like to write in arabic. I tried doing :

primary: Fajr
secondary: الفجر
tertiary: |
          {{ states('sensor.fajr_prayer_time') }}

That did not work as I wanted to be. If you happen to know how to accomplish this, please post and thank you in advance!

536

I don’t think there is any tertiary.
You should try two lines in secondary

537

I tried that but no success so far!

538

I also tried but it won’t work because it is combination of different cards. You may try Entities card instead, that might work.

1 Like