Read the statement by Michael Teeuw here.
How Can I Display Live Qibla Direction on My MagicMirror Without Lag?
-
I recently set up a MagicMirror at home, and I’m absolutely loving the versatility it offers. The ability to add different modules and customize my mirror has been an exciting experience. However, I’ve run into a small challenge that I can’t seem to figure out, and I was hoping to get some insights from this amazing community.
One of the ideas that I got really inspired by was a Qibla finder. It’s a web-based tool that helps determine the correct prayer direction, and I thought it would be an interesting addition to my mirror. Since the MagicMirror already supports various modules related to location, weather, and even calendars, I was wondering how feasible it would be to display live Qibla direction updates directly on the mirror. My idea is to have something minimalistic—just a simple arrow that updates based on my location. However, I’ve encountered a few issues while trying to make this work.
The Qibla finder is a tool that allows users to determine the exact direction of the Kaaba in Mecca, which is essential for performing prayers in Islam. Many online platforms provide this service under different names, and I personally found the term “find my qibla” quite useful when searching for accurate and reliable direction-based tools. These tools generally use GPS coordinates to calculate the most precise orientation based on the user’s location. Since it’s entirely web-based, it doesn’t rely on additional hardware like a physical compass, making it a convenient and widely accessible solution. This concept inspired me positively, and I thought it would be great to integrate something similar into my MagicMirror setup.
The first challenge is related to real-time updates. I know that MagicMirror modules usually rely on APIs to fetch data, but when it comes to direction-based data, I’m not sure how frequently I should be pulling updates. Would requesting data every few seconds cause performance issues for my MagicMirror? Or is there a better way to ensure that the Qibla direction is accurate without overloading the system?
Another issue I ran into is how to properly align the displayed direction with the actual orientation of my mirror. Unlike a phone that has built-in sensors to detect movement and direction, the mirror stays in a fixed position. So, what’s the best approach to adjust the Qibla indicator based on my location and the mirror’s fixed placement? Should I manually input the angle, or is there a smarter way to calculate it dynamically?
I also noticed that MagicMirror’s default modules don’t really focus much on directional arrows or compass-based data. Has anyone here worked with modules that involve real-time directional adjustments? If so, what approach worked best for you? I imagine something similar to a compass widget could work, but I’m unsure how to integrate that into a web-based system like MagicMirror.
I was also wondering about the visual representation. I want the arrow to look sleek and blend well with the mirror’s interface without making it too distracting. Ideally, it would update smoothly and be subtle enough to not take away from the overall aesthetic. Are there any existing modules that handle smooth UI transitions for elements like this? I know weather modules update smoothly, so maybe I could apply a similar method here.
Has anyone tried something similar? What would be the best way to achieve this without causing lag or unnecessary resource consumption? Would love to hear your thoughts!
-
@Munya-Pualani i think the EmbedUrl module can do all you ask, with scheduled updates
see the 3rd party module list linked in the top menu here
-
@Munya-Pualani Without location services this would be near impossible. You can get a GPS module and add that onto the PI and maybe integrate that. As the Raspberry Pi does not have built-in location services you will not be able to auto determine the position of the mirror. If you change the location of the mirror, you will have to manually update the module with the new facing direction. You can possibly use your location, lat and lon but that would not 100% determine direction either. Using the Embedded URL module will not work either as the page relies on location services running.
The only way I can see is to get a GPS module and add that onto the PI.
-
@mumblebaj google maps will give your gps coordinates to 6 decimal places . i don’t know how you tell the web page
-
@sdetweil How do you get the coordinates if the Pi does not have location services for Google Maps to determine your location? It will give it if you tell it where you are.
-
@mumblebaj i just look up my address and the gps is in the url
-
@mumblebaj i dont know how it does it. but the position is correct for where i am standing in the house, one side or the other. none of my computers have gps
the MagicMirror system is not moving around, and if you were using a remote browser, then gps on the server side would be wrong too
-
@Munya-Pualani this site
https://www.movable-type.co.uk/scripts/latlong.html#:~:text=const Bx = Math.cos(,kmhas the formulas for bearing and distance using two gps locations.
drawing an arrow pointing on that bearing using web technologies is also well known
