Skip to content
BranchesTags
 
 

Repository files navigation

Raspberry Pi Adhan Clock & Display Dashboard

This project not only calculates and plays the five daily adhans on a Raspberry Pi via cron, but also drives a full‑screen display showing:

  • Today’s prayer times and live countdown
  • Next Jumʿah Khateeb schedule (automatically scraped each night)

🔧 Prerequisites

  1. Raspberry Pi running Raspberry Pi OS (formerly Raspbian)
    • Pi 3/4/400 or newer recommended (for Puppeteer). Avoid Pi Zero if new.
    • HDMI output to a display or TV.
  2. Speakers (wired aux recommended; Bluetooth has disconnect quirks).
  3. Internet connection (for initial setup and nightly scraping).
  4. Git, Node.js, Python 3 installed on the Pi: 
    sudo apt update
sudo apt install -y git nodejs npm python3 python3-pip chromium-browser xdotool
  5. Python packages (in your project folder): 
    cd ~/adhan-display
pip3 install requests beautifulsoup4
  6. Node packages (for the Jumʿah scraper): 
    cd ~/adhan-display
npm install puppeteer

📥 Clone & Initial Setup

cd ~
git clone https://github.com/SyButter/rasppi-adhan.git adhan-display
cd adhan-display

1. Configure prayer‑times script

Run the timer‑setup script once with your coordinates and preferred method:

python3 updateAzaanTimers.py   --lat  <YOUR_LATITUDE>   --lon  <YOUR_LONGITUDE>   --method ISNA       # or MWL, Egypt, Karachi, etc.

This will:

  • Write your lat, lon, method (and optional volumes) into settings.ini.
  • Calculate today’s prayer times and install cron jobs to play the Adhan audio.
  • Schedule itself to re‑run nightly at 1 AM and truncate logs monthly.

Tip: Use crontab -l to verify your jobs. Logs are in ~/adhan-display/adhan.log.

2. (Optional) Enable Friday Surah Baqarah

Edit settings.ini:

[FRIDAY]
playSurahBaqarah = True
surahVolume      = 0

🖥 Front‑End Display Setup

All files for the dashboard live in ~/adhan-display:

adhan-display/
├── index.html
├── style.css
├── script.js
├── prayTimes.js       # PrayTimes.js v2 from praytimes.org
├── schedule.json      # auto‑generated by scraper
├── scrape_jummah_schedule.js  # Node scraper
└── prayerTimes.json   # (optional) from updateDisplayData.py

1. Download PrayTimes.js

wget https://praytimes.org/code/v2/js/PrayTimes.js -O prayTimes.js

2. index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Prayer Times & Jummah</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Prayer Times</h1>
  <div id="date"></div>
  <ul id="times"></ul>
  <div id="next"></div>
  <section id="jummah-schedule">
    <h2>Next Jummah Khateeb</h2>
    <table>
      <thead><tr><th>Date</th><th>First</th><th>Second</th></tr></thead>
      <tbody></tbody>
    </table>
  </section>
  <script src="prayTimes.js"></script>
  <script src="script.js"></script>
</body>
</html>

3. style.css

body {
  background:#111; color:#ccc; font-family:sans-serif;
  display:flex; flex-direction:column; align-items:center;
}
h1 { margin:1rem; }
ul#times { list-style:none; width:300px; }
ul#times li { display:flex; justify-content:space-between; padding:.5rem; border-bottom:1px solid #444; }
#next { margin:1rem; font-size:1.2rem; }
#jummah-schedule {
  margin:2rem auto; padding:1rem; background:#222; border-radius:6px;
}
#jummah-schedule h2 { text-align:center; margin-bottom:1rem; }
#jummah-schedule table { width:100%; border-collapse:collapse; }
#jummah-schedule th, #jummah-schedule td { padding:.5rem; border:1px solid #333; text-align:center; }
#jummah-schedule th { background:#333; color:#eee; }

4. script.js

// CONFIG
const pt = new PrayTimes('ISNA'); // adjust or load from settings.ini

// helpers
function pad(n){return n<10?'0'+n:n;}
function format12(t){let [h,m]=t.split(':').map(Number),amp=h>=12?'PM':'AM';h=(h%12)||12;return `${h}:${pad(m)} ${amp}`;}

// render prayer times & countdown...
function renderTimes(){ /* your existing code */ }

// render next Jummah
async function renderNextJummah(){
  const data = await fetch('schedule.json').then(r=>r.json());
  const [next] = data;
  if(!next) return;
  document.querySelector('#jummah-schedule tbody').innerHTML =
    `<tr><td>${next.date}</td><td>${next.first}</td><td>${next.second}</td></tr>`;
}

// schedule 2 AM fetch
function scheduleDaily(fn,h){
  const now=new Date(), then=new Date(now.getFullYear(),now.getMonth(),now.getDate(),h);
  if(then<=now) then.setDate(then.getDate()+1);
  setTimeout(()=>{fn();setInterval(fn,86400000);},then-now);
}

// initial + intervals
renderTimes(); renderNextJummah();
setInterval(renderTimes,60000);
scheduleDaily(renderNextJummah,2);

5. Jumʿah Scraper (scrape_jummah_schedule.js)

Uses Puppeteer to load the site, extract #schedule-table rows, filter for upcoming Fridays, write schedule.json.

Run manually or via cron:

node scrape_jummah_schedule.js

⏰ Automation & Deployment

Nightly Jumʿah scrape at 2 AM

crontab -e
# Add:
0 2 * * * cd ~/adhan-display && /usr/bin/node scrape_jummah_schedule.js >> scrape.log 2>&1

Serve the Dashboard

sudo tee /etc/systemd/system/adhan-display.service <<EOF
[Unit]
Description=Adhan Dashboard HTTP Server
After=network.target

[Service]
Type=simple
User=pi
WorkingDirectory=/home/pi/adhan-display
ExecStart=/usr/bin/python3 -m http.server 8000 --bind 0.0.0.0
Restart=on-failure

[Install]
WantedBy=multi-user.target
EOF
sudo systemctl daemon-reload
sudo systemctl enable adhan-display
sudo systemctl start adhan-display

Kiosk‑Mode Chromium

mkdir -p /home/pi/.config/lxsession/LXDE-pi
tee /home/pi/.config/lxsession/LXDE-pi/autostart <<EOF
@xset s off
@xset -dpms
@xset s noblank
@bash -c "sleep 10"
@chromium-browser --noerrdialogs --disable-infobars --kiosk http://localhost:8000
EOF
chown -R pi:pi /home/pi/.config

🌐 Management website (admin panel)

A small Flask app in webadmin/ gives you a browser UI (from any device on your home network) to manage everything without editing files over SSH:

  • Location & method — edit lat/lon and calculation method. Written to settings.ini and mirrored to adhan-display/display_config.json, so the speaker schedule and the wall display always agree (one source of truth).
  • Custom angles & Asr madhab — override the Fajr/Isha twilight angles (leave blank to use the method default) and pick the Asr calculation: Standard (Shafi'i/Maliki/Hanbali) or Hanafi (later Asr). Applied identically by both the audio scheduler and the display.
  • Volumes — regular adhan, Fajr adhan, and Friday Surah Baqarah volumes (mpv percentage, 0–130; 100 = normal). These now take effect immediately.
  • Friday Surah Baqarah — toggle on/off.
  • Prayer playback — mute the adhan sound for individual prayers (e.g. Fajr and Dhuhr after a night shift). Times still show on the display; only the sound is skipped, and it takes effect on the next prayer with no reschedule.
  • Adhan library — upload new .mp3 adhans, preview them in-browser, delete them, mark each as Fajr or Regular, and toggle which are eligible for the random pick.
  • Test on speakers — fire a test Fajr / regular / Surah playback.
  • Apply & reschedule — re-runs updateAzaanTimers.py to recompute times and reinstall the cron jobs.

How playback works now

Cron no longer bakes a fixed file + volume into each job. Instead it runs play_adhan.py <fajr|regular|surah>, which at play time reads settings.ini (volume, audio device) and adhans.json (the random pool) and picks a random enabled adhan. This means changes you make in the admin panel take effect on the very next prayer — no need to click "Apply" for volume or pool changes. "Apply" is only needed after changing location/method (to recompute times) or toggling Friday Surah.

Run it

cd ~/adhan-display/webadmin
pip3 install -r requirements.txt
python3 app.py            # http://<pi-ip>:8080

There's no login — it's meant to run on your home network only. Don't expose port 8080 to the internet.

Auto-start everything on boot (recommended)

One script installs dependencies and sets up systemd services so the admin panel (:8080) and wall display (:8000) come back automatically after any reboot or power outage, and refreshes the adhan cron jobs. Paths and user are auto-detected:

cd ~/adhan-disp          # your repo folder
./install-services.sh                 # servers + cron
./install-services.sh --with-kiosk    # also set up the full-screen kiosk browser

Adhan playback itself runs from cron, which already survives reboots on its own.

Run it as a service (optional, manual)

sudo tee /etc/systemd/system/adhan-admin.service <<EOF
[Unit]
Description=Adhan Admin Panel
After=network.target

[Service]
Type=simple
User=pi
WorkingDirectory=/home/pi/adhan-display/webadmin
ExecStart=/usr/bin/python3 app.py
Restart=on-failure

[Install]
WantedBy=multi-user.target
EOF
sudo systemctl daemon-reload
sudo systemctl enable --now adhan-admin

Note on adhan files: any file in media/ named Adhan*.mp3 is part of the random pool. Uploads through the panel are auto-prefixed with Adhan- if needed. Files with fajr in the name default to the Fajr category.

Set–and–forget – your Pi will ring adhans, scrape upcoming Jumʿah, and display both on screen every day!

About

Updated fork of achaudhury/adhan's Raspberry Pi Adhan Clock

Resources

Readme
License
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages