Description
MyPrayerTimes is a simple Module, that calculate prayer times for any location around the world, based on a variety of calculation methods currently used in Muslim communities using the Aladhan API

Screenshot

Download
[card:htilburgs/MMM-MyPrayerTimes]

Extra
I’m not an experienced programmer and do this for fun. Feel free to suggest any ideas.

Versions
20-03-2019 - v1.0.0 - Initial release
02-04-2019 - v1.1.0 - Added option for 12/24 hour clock
03-04-2019 - v1.1.1 - Added Imsak to prayer times

@Sean @sdetweil I finaly figured it out! Thanx for the support and pointing me in the correct direction. See the result:

		var MPT = this.MPT;

		// creating the tablerows
		// Fajr
		var FajrRow = document.createElement("tr")
		FajrRow.className = "small fajr-row";
		
		var FajrTextCell = document.createElement("td");
		FajrTextCell.innerHTML = "Fajr";
		FajrRow.appendChild(FajrTextCell);
		table.appendChild(FajrRow);
		
		var FajrTimeCell = document.createElement("td");
		FajrTimeCell.className = "bright";
		FajrTimeCell.innerHTML = MPT.Fajr;
		FajrRow.appendChild(FajrTimeCell);
		table.appendChild(FajrRow);
		
		var FajrArabCell = document.createElement("td");
		FajrArabCell.innerHTML = "الفجر";
		FajrRow.appendChild(FajrArabCell);
		table.appendChild(FajrRow);
......
}		
		return table;	

@sdetweil I don’t understand what you mean.

Don’t I do this with this?

var callWrapper = document.createElement("tr");
callWrapper.appendChild(FajrTextCell);

Strugling with formatting. When I use the basic code, I got the result I like but it’s not displayed nice. I like to have 3 columns.

		var MPT = this.MPT;
		
		// Creating the div's for your data items
		var top = document.createElement("div");
		top.classList.add("list-row");

		// Fajr from data
		var mptFajr = document.createElement("div");
		mptFajr.classList.add("small", "bright", "Fajr");
		mptFajr.innerHTML = "Fajr : " + MPT.Fajr + " الفجر";
		wrapper.appendChild(mptFajr);			
			
		// Sunrise from data
		if (this.config.showSunrise != false) {
		    var mptSunrise = document.createElement("div");
		    mptSunrise.classList.add("small", "bright", "Sunrise");
		    mptSunrise.innerHTML = "Sunrise : " + MPT.Sunrise + " شروق الشمس";
		    wrapper.appendChild(mptSunrise);
		}
		// Dhuhr from data
		var mptDhuhr = document.createElement("div");
		mptDhuhr.classList.add("small", "bright", "Dhuhr");
		mptDhuhr.innerHTML = "Duhr : " + MPT.Dhuhr + " الظهر";
		wrapper.appendChild(mptDhuhr);

		// Asr from data
		var mptAsr = document.createElement("div");
		mptAsr.classList.add("small", "bright", "Asr");
		mptAsr.innerHTML = "Asr : " + MPT.Asr + " العصر";
		wrapper.appendChild(mptAsr);
			
		// Sunset from data
		if (this.config.showSunset != false) {
		    var mptSunset = document.createElement("div");
		    mptSunset.classList.add("small", "bright", "Sunset");
		    mptSunset.innerHTML = "Sunset : " + MPT.Sunset + " غروب الشمس";
		    wrapper.appendChild(mptSunset);
		}
			
		// Maghrib from data
		var mptMaghrib = document.createElement("div");
		mptMaghrib.classList.add("small", "bright", "Maghrib");
		mptMaghrib.innerHTML = "Maghrib : " + MPT.Maghrib + " المغرب";
		wrapper.appendChild(mptMaghrib);
		
		// Isha from data
		var mptIsha = document.createElement("div");
		mptIsha.classList.add("small", "bright", "Isha");
		mptIsha.innerHTML = "Isha : " + MPT.Isha + " العشاء";
		wrapper.appendChild(mptIsha);
			
		// Midnight from data
		if (this.config.showMidnight != false) {
		    var mptMidnight = document.createElement("div");
		    mptMidnight.classList.add("small", "bright", "Midnight");
		    mptMidnigh

Now I trying for several hours to figure out how to create table, columns, rows…
I’ve changed the code part to

		var MPT = this.MPT;

		var logs = document.createElement("table");
		var callWrapper = document.createElement("tr");
		callWrapper.classList.add("small");
		
		// Fajr
		var FajrTextCell = document.createElement("td");
		FajrTextCell.className.add = "xsmall bright fajrtext";
		FajrTextCell.innerHTML = "Fajr";
		callWrapper.appendChild(FajrTextCell);
		
		var FajrTimeCell = document.createElement("td");
		FajrTimeCell.className = "xsmall bright fajrtime";
		FajrTimeCell.innerHTML = MPT.Fajr;
		callWrapper.appendChild(FajrTimeCell);
		
		var FajrArabCell = document.createElement("td");
		FajrArabCell.className = "xsmall bright fajrarab";
		FajrArabCell.innerHTML = "الفجر";
		callWrapper.appendChild(FajrArabCell);

		logs.appendChild(callWrapper);
		wrapper.appendChild(logs);
		return wrapper;

The result for 1 item is nice

But when I repeat this for the other items, no rows are created and everything is on the same row.

		var MPT = this.MPT;

//Table Test

		var logs = document.createElement("table");
		var callWrapper = document.createElement("tr");
		callWrapper.classList.add("small");
		
		// Fajr
		var FajrTextCell = document.createElement("td");
		FajrTextCell.className.add = "xsmall bright fajrtext";
		FajrTextCell.innerHTML = "Fajr";
		callWrapper.appendChild(FajrTextCell);
		
		var FajrTimeCell = document.createElement("td");
		FajrTimeCell.className = "xsmall bright fajrtime";
		FajrTimeCell.innerHTML = MPT.Fajr;
		callWrapper.appendChild(FajrTimeCell);
		
		var FajrArabCell = document.createElement("td");
		FajrArabCell.className = "xsmall bright fajrarab";
		FajrArabCell.innerHTML = "الفجر";
		callWrapper.appendChild(FajrArabCell);
		
		// Sunrise
		var SunriseTextCell = document.createElement("td");
		SunriseTextCell.className.add = "xsmall bright sunrisetext";
		SunriseTextCell.innerHTML = "Sunrise";
		callWrapper.appendChild(FajrTextCell);
		
		var SunriseTimeCell = document.createElement("td");
		SunriseTimeCell.className = "xsmall bright fajrtime";
		SunriseTimeCell.innerHTML = MPT.Sunrise;
		callWrapper.appendChild(SunriseTimeCell);
		
		var SunriseArabCell = document.createElement("td");
		SunriseArabCell.className = "xsmall bright sunrisearab";
		SunriseArabCell.innerHTML = "شروق الشمس";
		callWrapper.appendChild(SunriseArabCell);		

		logs.appendChild(callWrapper);
		wrapper.appendChild(logs);
		return wrapper;

Any help to get me on the right track again?

@Sean,
Thank you for explaining and pointing me out.
I understand what was the issue. I’ve cleaned up the code and removed the caroussel part (and unneeded variables), because I don’t use that.

Added the possibility for showing or not showing some items.
Up to the next part… HTML Markup

@Sean,
This is what I want. Thanx for the quick reply!

Can you tell me what is the difference in the code?

This was an example from the MMM-UFO where information is rotated.
Because I don’t need it, I’m going to cleanup.

@Mykle1, @sdetweil ,
Looking at the website from the API Prayer Times API, the result are all displayed in JSON

The API has several endpoints to assist developers. Note that all the endpoints return JSON and are available over http and https.

I’ve looked at the code again and it should be MPT.Fajr.
I’ve made the module public on github, so you can take a look if you like.
MMM-MyPrayerTime

Meanwhile I’m trying to solve it…

@Mykle1 I’m using MMM-UFO as example and trying to figure out. I’m getting somewhere but… The data is retrieved through the api and this is the result:

Asr: "16:01"
Dhuhr: "12:46"
Fajr: "05:12"
Imsak: "05:02"
Isha: "20:21"
Maghrib: "18:49"
Midnight: "00:46"
Sunrise: "06:44"
Sunset: "18:49"

The module is generated on the MM

But as you can see, it cannot read or display the data in the correct way.
This is the code that I use to get the data from the resultset.

// Fajr from data
var mptFajr = document.createElement("div");
mptFajr.classList.add("small", "bright", "fajr");
mptFajr.innerHTML = "Fajr : " + MPT.Fajr;
wrapper.appendChild(mptFajr);

I can’t figure out what the problem is. It seems have something to do with the time-string that is returned. But whatever I try, no luck. Any idea?

Oke, got it. I had to add some console.log settings…:flushed_face:

I used the example from MMM-UFO, and started the module.
How can I check if there is data from the API URL?

@Mykle1 @Sean
Both thanks for the quick reply.
For now I’ve information that I can use to start.
If there are any questions, I know where to be ;-)

Thanks for the reply.
I’ve an api for getting the Prayer Times.

http://api.aladhan.com/v1/timings/19-03-2019?latitude=51.508515&longitude=-0.1254872&method=2

In this case there a 4 parameters: date, latitude, longitude and method.
The result is a json file

{"code":200,"status":"OK","data":{"timings":{"Fajr":"04:34","Sunrise":"06:06","Dhuhr":"12:08","Asr":"15:23","Sunset":"18:11","Maghrib":"18:11","Isha":"19:44","Imsak":"04:24","Midnight":"00:09"},"date":{"readable":"19 Mar 2019","timestamp":"1552953600","hijri":{"date":"12-07-1440","format":"DD-MM-YYYY","day":"12","weekday":{"en":"Al Thalaata","ar":"\u0627\u0644\u062b\u0644\u0627\u062b\u0627\u0621"},"month":{"number":7,"en":"Rajab","ar":"\u0631\u064e\u062c\u064e\u0628"},"year":"1440","designation":{"abbreviated":"AH","expanded":"Anno Hegirae"},"holidays":[]},"gregorian":{"date":"19-03-2019","format":"DD-MM-YYYY","day":"19","weekday":{"en":"Tuesday"},"month":{"number":3,"en":"March"},"year":"2019","designation":{"abbreviated":"AD","expanded":"Anno Domini"}}},"meta":{"latitude":51.508515,"longitude":-0.1254872,"timezone":"Europe\/London","method":{"id":2,"name":"Islamic Society of North America (ISNA)","params":{"Fajr":15,"Isha":15}},"latitudeAdjustmentMethod":"ANGLE_BASED","midnightMode":"STANDARD","school":"STANDARD","offset":{"Imsak":0,"Fajr":0,"Sunrise":0,"Dhuhr":0,"Asr":0,"Maghrib":0,"Sunset":0,"Isha":0,"Midnight":0}}}}

I like to filter on the first object “timings” (Fajr until Midnight) and present this information in a table on the Mirror (HTML layout comes later)

I’ve been looking in other modules and trying to learn, but some use node_helper, some don’t and I’m a littlebit stuck right now.

Hi all,
Let me start saying, I’m a new MM enthousiast. I’ve several ideas for a new MM Module, but I’m not a programmer. I can read the javascript en mostly I understand how it works, but writing my own is going to be the first time.

I like to build one from scratch and started with Head first developing mm module for extreme beginners.

Now I’m trying to go further and in particular using an API to:

• Get data from a site (in JSON format)
• Extract the correct data from the JSON result
• Display the extracted data nicely in de module

I’m reading Javascript for Dummies, I’ve been looking on the forum and looking into existing modules, but I’m not getting there. The question is:

Is there a template or are there sites/instructions on how to get started with what I like to do so, I can get started and figure it out (with or without the awesome support of this forum? I hope to hear from somebody!

I didn’t create a new calendar, only for testing purposes. After finding out what the possible issue was, I’ve unchecked and thereafter checked “make public” and copied the new URL.

Great it works for you too!! :thumbs_up_medium-light_skin_tone:

I had the same issue from last Monday. I was using the calendar for about 1 month (newby MagicMirror). I checked everything and as it seems nothing had changed, but get keeping “No upcoming events”.

Then I created a new calendar and made it public. What I saw is that the URL was quite different from the one I used. I see the same with you.

old: webcal://p01-calendarws.icloud.com/ca/subscribe/1/
new:webcal://p40-calendars.icloud.com/published/2/

I openend my calendar on my Macbook and set the published option off for my calendar. Than I put it back on and got a new URL with the same ‘new’ format. I put this in my MagicMirror config and everything works again (now for 1 week already).

I hope this is the solution for your problem also…Succes!

@onkelbobby, seems nice for my next mirror ;-)
How let you this interact with the Pi and MagicMirror? Is there a module, or do you use a Python script?

I still have to paint the frame, thinking of a kind of ‘white-wash’ so you keep seeing the wood grains. Maybe it’s less ‘obvious’.
But you know and I know, but most visitors I’ve had didn’t even see it or looking for it 🤔

I made a 8 mm hole on the backside and a 2 mm hole on the frontside.
Removed the cap from the motion sensor and placed it in the 8 mm hole.
Works great and you can hardly see the 2 mm hole.

Backside:

Frontside:

I have the spymirror. If you click on the word Pyrasied, you see what I ordered (As I said in the bullet 😉)