NOTE: WHEN WRITING THIS GUIDE, IT WAS BASED TO FIT A 'LENOVO TAB3 7 ESSENTIAL'. ALL SETTINGS AND SIZES CAN BE ADJUSTED TO FIT YOUR TABLET ACCORDINGLY.
First, we start by creating the needed sensors in Home Assistant
Second, we do the Lovelace cards designs
Finally, we test our setup
Add the below times sensors in the configuration.yaml file
sensor:
# Time Seonsors - Parameters available at https://strftime.org/
- platform: time_date
display_options:
- "time"
- "date"
- "date_time"
- "date_time_utc"
- "date_time_iso"
- "time_date"
- "time_utc"
- "beat"
In your Home Assistant, goto Settings, then Devices & services, and on the right bottom corner, click on + ADD INTEGRATION
Search for the Islamic Prayer Times and enter the required parameters, as in below
In your configuration.yaml, add the below binary sensor to check for DST
template:
# DST Binary Sensor
#begins at 2am on the first Sunday in October
#ends at 2am on the first Sunday in April
- trigger:
- platform: time
at: '02:10'
- platform: homeassistant
event: start
binary_sensor:
- name: "dst"
state: >
{% if now().isoweekday() == 7 and now().hour >= 2 and now().month == 10 and now().month != (now() - timedelta(days=7)).month %}
{{ "on" }}
{% elif now().day in (1,2,3,4,5,6,7) and now().hour >= 2 and now().month == 10 and now().month != (now() - timedelta(days=7)).month %}
{{ "on" }}
{% elif now().hour >= 2 and now().month == 10 and now().month != (now() - timedelta(days=7)).month %}
{{ "off" }}
{% elif now().month in (10,11,12,1,2,3) %}
{{ "on" }}
{% elif now().isoweekday() == 7 and now().hour >= 2 and now().month == 4 and now().month != (now() - timedelta(days=7)).month %}
{{ "off" }}
{% elif now().day in (1,2,3,4,5,6,7) and now().hour >= 2 and now().month == 4 and now().month != (now() - timedelta(days=7)).month %}
{{ "off" }}
{% elif now().hour >= 2 and now().month == 4 and now().month != (now() - timedelta(days=7)).month %}
{{ "on" }}
{% elif now().month in (4,5,6,7,8,9) %}
{{ "off" }}
{% endif %}
attributes:
value: >
{{ "0" }}
icon: >
mdi:timelapse
In your configuration.yaml, add the below sensors to get the Hijri Date, Day, Arabic Weekday, Arabic Month and Hijra Year
rest:
# Gregorian to Hijri Date Converter
- resource_template: http://api.aladhan.com/v1/gToH/{{now().timestamp() | timestamp_custom('%d-%m-%Y')}}
scan_interval: 3600
sensor:
- name: "Hijri Date"
value_template: "{{value_json.data.hijri.date}}"
- name: "Hijri Day"
value_template: "{{value_json.data.hijri.day}}"
- name: "Hijri Weekday"
value_template: "{{value_json.data.hijri.weekday.ar}}"
- name: "Hijri Month"
value_template: "{{value_json.data.hijri.month.ar}}"
- name: "Hijri Year"
value_template: "{{value_json.data.hijri.year}}"
In your configuration.yaml, add the below sensor to check for the Next Prayer ETA time
This part to be added after the Daylight Saving Sensor, and ommit the template: line from it before adding it.
template:
# Next Prayer ETA
- trigger:
- platform: time_pattern
minutes: "/1"
- platform: homeassistant
event: start
sensor:
- name: "Next Prayer ETA"
state: >
{% set ns = namespace(next = [])%}
{% set times = expand('sensor.islamic_prayer_times_fajr_prayer', 'sensor.islamic_prayer_times_dhuhr_prayer', 'sensor.islamic_prayer_times_asr_prayer', 'sensor.islamic_prayer_times_maghrib_prayer', 'sensor.islamic_prayer_times_isha_prayer') | sort(attribute = 'state',reverse = false) | map(attribute = 'state') | list %}
{% for t in times %}
{% if (t | as_datetime | as_local >= now()) %}
{% set ns.next = ns.next + [t] %}
{% endif %}
{% endfor %}
{{ (ns.next[0] | as_timestamp - now().timestamp()) | timestamp_custom('%-H hours %M minutes', local=false) }}
icon: mdi:camera-timer
This step is REQUIRED in order to have the display as seen in the screenshot at the end of this guide
The below front-end integrations were used, they can be installing from HACS.
- WallPanel
- Layout Card
- Vertical Stack in Card
- Multiple Entity Row
- Lovelace Clock Card
- Simple Clock Card
- card-mod
- Template Entity Row
- Google Dark Theme
It is advisable to have a seperate user for this display, and make sure that it is not an admin, and can only be accessed through local network only.
Also, I advise to have a seperate dashboard (name it 'prayers-dashboard') and add a view in this dashboard (name it 'salat-times') for this display which is visible only to the admin and the display user created. Make sure you choose the View type as Horizontal (layout-card) and add the below lines in the code area
width: 700
max_cols: 2
Once you created the user with the recommeneded permissions, and had the dashboard visible to that user, enter the dashboards edit mode, add click on + ADD CARD from the bottom right corner. Choose any card as there is no difference in fact. Now click on SHOW CODE EDITOR at the lower left corner. Delete whatever is there, and add the following
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- entity: binary_sensor.dst
type: custom:multiple-entity-row
name: توقيت صيفي
secondary_info: Day Light Saving
icon: ' '
show_state: false
card_mod:
style: |
:host {
{% if states("binary_sensor.dst") == "on" %}
--card-mod-icon-color: green;
color: yellow;
{% else %}
--card-mod-icon-color: gray;
color: gray;
{% endif %}
card_mod:
style: |
ha-card {
font-size: 20px;
text-align: center;
}
- type: custom:simple-clock-card
time_zone: Australia/Melbourne
use_military: true
hide_seconds: false
bold_clock: false
font_size: 3rem
paddingLeft_size: 32px
paddingRight_size: 32px
paddingTop_size: 32px
paddingBottom_size: 32px
- type: custom:clock-card
size: 250
font_size: 20
disable_seconds: false
caption: null
display_date: DDD DD MMM, YYYY
theme:
background: black
hands: orange
numbers: white
border: grey
wp_style:
margin-top: 10px
width: 400px
grid-row: 1
grid-column: 1
- type: entities
entities:
- type: custom:template-entity-row
name: |
{{states.sensor.hijri_weekday.state}}
{{states.sensor.hijri_day.state}}
{{states.sensor.hijri_month.state}}
{{states.sensor.hijri_year.state}}
هـ
state: ''
show_header_toggle: false
state_color: false
card_mod:
style: |
ha-card {
font-size: 20px;
text-align: center;
}Repeate the above steps, but this time, add the following into the newly created card
type: custom:vertical-stack-in-card
cards:
- square: false
columns: 1
type: grid
cards:
- type: entities
entities:
- entity: sensor.islamic_prayer_times_fajr_prayer
type: custom:multiple-entity-row
name: الفجر
secondary_info: Fajr
format: time
styles:
width: 200px
text-align: left
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host {
{% if states("sensor.islamic_prayer_times_fajr_prayer")| as_timestamp > now().timestamp() %}
--card-mod-icon-color: green;
color: green;
{% endif %}
- type: section
- entity: sensor.islamic_prayer_times_sunrise_time
type: custom:multiple-entity-row
name: الشروق
secondary_info: Sunrise
format: time
styles:
width: 200px
text-align: left
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host {
{% if states("sensor.islamic_prayer_times_sunrise_time")| as_timestamp > now().timestamp() and now().timestamp() > states("sensor.islamic_prayer_times_fajr_prayer")| as_timestamp %}
--card-mod-icon-color: green;
color: green;
{% endif %}
- type: section
- type: conditional
conditions:
- condition: state
entity: sensor.hijri_weekday
state_not: الجمعة
row:
entity: sensor.dhuhr_dst
type: custom:multiple-entity-row
name: الظهر
secondary_info: Dhuhur
format: time
styles:
width: 200px
text-align: left
card_mod:
style: |
:host {
{% if states("sensor.dhuhr_dst")| as_timestamp > now().timestamp() and now().timestamp() > states("sensor.sunrise_dst")| as_timestamp %}
--card-mod-icon-color: green;
color: green;
{% endif %}
- type: conditional
conditions:
- condition: state
entity: sensor.hijri_weekday
state: الجمعة
row:
entity: sensor.dhuhr_dst
type: custom:multiple-entity-row
name: الجمعة
secondary_info: Juma'a
format: time
styles:
width: 200px
text-align: left
card_mod:
style: |
:host {
{% if states("sensor.dhuhr_dst")| as_timestamp > now().timestamp() and now().timestamp() > states("sensor.sunrise_dst")| as_timestamp %}
--card-mod-icon-color: green;
color: green;
{% endif %}
- type: section
- entity: sensor.islamic_prayer_times_asr_prayer
type: custom:multiple-entity-row
name: العصر
secondary_info: Asr
format: time
styles:
width: 200px
text-align: left
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host {
{% if states("sensor.islamic_prayer_times_asr_prayer")| as_timestamp > now().timestamp() and now().timestamp() > states("sensor.islamic_prayer_times_dhuhr_prayer")| as_timestamp %}
--card-mod-icon-color: green;
color: green;
{% endif %}
- type: section
- entity: sensor.islamic_prayer_times_maghrib_prayer
type: custom:multiple-entity-row
name: المغرب
secondary_info: Maghrib
format: time
styles:
width: 200px
text-align: left
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host {
{% if states("sensor.islamic_prayer_times_maghrib_prayer")| as_timestamp > now().timestamp() and now().timestamp() > states("sensor.islamic_prayer_times_asr_prayer")| as_timestamp %}
--card-mod-icon-color: green;
color: green;
{% endif %}
- type: section
- entity: sensor.islamic_prayer_times_isha_prayer
type: custom:multiple-entity-row
name: العشاء
secondary_info: Isha
format: time
styles:
width: 200px
text-align: left
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host {
{% if states("sensor.islamic_prayer_times_isha_prayer")| as_timestamp > now().timestamp() and now().timestamp() > states("sensor.islamic_prayer_times_maghrib_prayer")| as_timestamp %}
--card-mod-icon-color: green;
color: green;
{% endif %}
- type: section
- entity: sensor.islamic_prayer_times_midnight_time
type: custom:multiple-entity-row
name: منتصف الليل
secondary_info: Midnight
format: time
styles:
width: 200px
text-align: left
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host {
{% if states("sensor.islamic_prayer_times_midnight_time")| as_timestamp > now().timestamp() and now().timestamp() > states("sensor.islamic_prayer_times_isha_prayer")| as_timestamp %}
--card-mod-icon-color: green;
color: green;
{% endif %}
- type: section
card_mod:
style: |
ha-card {
font-size: 180%
}
- type: entities
entities:
- type: custom:template-entity-row
name: الزمن المتبقي للصلاة
secondary: Next Prayer ETA
state: |
{% if states("sensor.next_prayer_eta")=="unavailable" %}
TBC
{% else %}
{{states("sensor.next_prayer_eta")}}
{% endif %}
state_color: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
text-align: left;
font-size: 20px;
color: orange;
}
Now, the last piece of code is to click on the three dots on the upper right corner, and choose {} Raw configuuration editor.
On top of what you see, insert the below lines
wallpanel:
enabled: true
enabled_on_tabs:
- salat-times
hide_toolbar: true
hide_sidebar: true
fullscreen: true
idle_time: 0
NOTE: If you needed to enter the edit mode after that, press F11 to exit fullscreen mode, and add ?edit=1 at the end of the Home Assistant instance url of this dashboard
https://192.168.1.100:8123/prayers-dashboard/salat-times?edit=1
This is the last step to make sure that nothing wrong is made during the setup, and have all integrations installed and working properly.
Install the Home Assistant companion application, login using the user dedicated to this dashboard view, and enter the local ip address for Home Assistant rather than the domain.
To make the view as Dark, which I personally prefer and based all text colouring accordingly, click on the User at the lower left corner, scroll down till you find Theme and choose Google Dark Theme
Now if everything went perfect, then you should see the below view on your tablet
Last step is to make sure that the tablet has its screen stay-on while charging and having the Home Assistant dashboard on screen. To do so:
- In the companion app, click on the 4-dashes on the top left corner
- At the bottom, click on the "Username" to opne the Profile page
- Scroll down, and make sure that Automatically close connection is enabled
- Again, click on the 4-dashes on the top left corner and click on the Settings
- Find the Companion app and click on it
- Scroll down and make sure that the Screen orientation is set to Landscape
- Make sure that Keep screen on is enabled
TO MAKE SURE THAT THE TABLET DOES NOT TURN THE SCREEN ON, AS AN INTERNAL TABLED SETTINGS, YOU NEED TO FOLLOW THE BELOW. IT COULD BE NOT NEEDED ON SOME TABLET MODELS
- Open the Android Settings and click on the About phone at the bottom of the list
- Click on Software information and keep on clicking on the Build number for around 7-10 clics
- Stop when you see that the Developer mode is enabled
- Go back to the Settings screen, and at the bottom of the list, you will see Developer options below the About phone appered. Click on that
- Finally, scroll down and make sure that Stay awake is enabled
Now you should have your tablet in ALWASY ON MODE with the prayers dashboard visible. Make sure you plug in the charger as well
This document guide is licensed under the CC0 1.0 Universal license. The terms of the license are detailed in LICENSE
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent