Compass

על האפליקציה

Compass היא אפליקציית רשת מתקדמת (PWA) שהופכת את הטלפון שלך למצפן מטיילים אמיתי — לא רק חץ צפון, אלא כלי ניווט מלא עם נקודות ציון.

שמור מקום עכשיו (רכב, אוהל, נקודת מפגש) — האפליקציה מחשבת בזמן אמת כיוון ומרחק מהמיקום הנוכחי שלך אל היעד. החץ הצהוב בקצה הדיאל מצביע אל היעד, החץ האדום מצביע צפון, וכשאתה מיושר ליעד — רטט עדין מאשר.

מצפן הוא לא רק כיוון — הוא הבטחה: בכל מקום שאתה, אתה יודע איך לחזור.

לחצו לנסות בעצמכם → ofir.zbang.net/compass

האפליקציה רצה כאן בייצור — אפשר להתקין על המסך הבית. חייב לפתוח בטלפון (אין מגנטומטר במחשב).

יכולות מרכזיות

• דיאל מצפן מסתובב — הדיאל עצמו מסתובב כדי שהצפון תמיד יישאר למעלה מבחינתך, החץ האדום נשאר נעוץ בצפון מגנטי.
• חץ צפון מקצועי — אדום למעלה (צפון), לבן למטה (דרום), בסגנון מצפן ימי קלאסי.
• שמירת waypoints — לחץ אחת לשמור מיקום עם שם. נשמר ב-IndexedDB, ניתן להפעיל בכל זמן.
• bearing ו-distance בזמן אמת — חישוב Haversine למרחק, atan2 ל-initial bearing — נכון לשטח כדור הארץ.
• alignment indicator — סטטוס "סובב X° ימינה/שמאלה", ובמיקור — "מיושר ליעד · 347 מ׳" עם רטט אישור.
• דיוק GPS — מציג את accuracy של המיקום הנוכחי כדי שתדע אם הקריאה אמינה.
• רשימת waypoints — bottom sheet עם כל הנקודות, מסומן הפעיל, אפשר להפעיל אחרת/למחוק.

ארכיטקטורת ה-PWA

• DeviceOrientationEvent + webkitCompassHeading — תמיכה ב-iOS (חישוב heading מדויק) + Android (alpha עם conversion ל-compass heading).
• deviceorientationabsolute — ניסיון להעדיף absolute heading ב-Chrome/Android.
• Geolocation watchPosition — עדכון מיקום רציף עם high-accuracy.
• Haversine formula — 2R · asin(√(sin²(Δφ/2) + cos(φ₁)·cos(φ₂)·sin²(Δλ/2))) למרחק.
• Initial bearing — atan2(sin(Δλ)·cos(φ₂), cos(φ₁)·sin(φ₂) − sin(φ₁)·cos(φ₂)·cos(Δλ)) — formula סטנדרטית של ניווט.
• Angle smoothing — low-pass filter עם wrap-around ב-±180° כדי שהחץ לא יקפוץ במעבר 359→0.
• iOS permission flow — DeviceOrientationEvent.requestPermission() עם UI הסבר.
• Vibration debounced — רטט אחד כל 3 שניות במצב mountaging, לא רעש מתמיד.
• IndexedDB — waypoints + activeWpId persistent (האפליקציה זוכרת איזה יעד פעיל גם אחרי סגירה).
• Vanilla JS, אפס תלויות — כ-32KB total.

עיצוב

• פלטה teal/sky — #14b8a6 primary + #5eead4 light + #0ea5e9 accent + #020a0e deep teal-black bg.
• Dial אנלוגי — 72 tick marks (5° increments), 12 major (30°), 4 cardinals N/S/E/W, ring inner glow.
• גרדיאנט אמביינטי — שני orb blurs מרחפים אנימטיבית ברקע.
• Glassmorphic info card — מידע על ה-waypoint הפעיל בכרטיס זהב/ענבר.

שימושים

• רכב בחניון לא מוכר — שמור את המיקום, נווט בחזרה כשתחזור.
• טיולי שטח — שמור את האוהל/הרכב/נקודת המפגש.
• תיירות — שמור את המלון/תחנת הרכבת לפני שיוצאים לסיור.
• אירועים גדולים — נקודת מפגש משפחה במשק/תערוכה.

הכל נשמר רק במכשיר שלך. אפס שרתים, אפס tracking.