Magnifier

על האפליקציה

Magnifier היא זכוכית מגדלת דיגיטלית — מצלמה אחורית עם זום של עד 10×, פלאש להארת אזור, הקפאת תמונה לבדיקה ללא רעידות, ופילטרים לשיפור ניגודיות.

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

מה שהעיניים שלך לא רואות — המצלמה רואה.

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

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

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

• זום native MediaTrack — אם הטלפון תומך, משתמש ב-getCapabilities().zoom ו-applyConstraints({ advanced: [{ zoom }] }) — זום אופטי-לכאורה באיכות מקסימלית.
• Digital fallback — אם native zoom לא נתמך, חוזר ל-CSS transform: scale() כ-fallback (איכות נמוכה יותר אבל עובד בכל דפדפן).
• Pinch-to-zoom — שני אצבעות בvideo viewport → זיהוי Math.hypot(dx, dy) של המרחק → ratio ↔ zoom.
• פלאש (torch) — applyConstraints({ advanced: [{ torch: true }] }) להארת האזור הנקרא.
• הקפאת תמונה — snapshot ל-canvas מתוך video (drawImage), הסתרת video, הצגת canvas. בלי רעידות, אפשר לבדוק בנחת.
• 5 פילטרי תצוגה — רגיל, היפוך (negative), שחור-לבן + ניגודיות, ניגודיות גבוהה, חמים, קר. מיושם דרך CSS filter על אלמנט הvideo.
• שמירת snapshots — IndexedDB עם תמונה מלאה, זום, פילטר, timestamp. אפשר לפתוח, להוריד, למחוק.
• Wake Lock — מסך לא ננעל בזמן שימוש.

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

• MediaTrack getCapabilities — בדיקה דינמית של זום ו-torch לפני שמשתמשים בהם.
• Adaptive zoom — native zoom אם נתמך (איכות גבוהה), אחרת digital זום דרך CSS transform.
• Touch event handling — touchstart עם 2 אצבעות → תפיסת מרחק התחלתי, touchmove → חישוב יחס וקריאה ל-applyZoom() עם preventDefault() לחסימת pinch של הדפדפן.
• Canvas drawImage — snap מ-video למצב frozen, תמיד באיכות מלאה גם אם הזום הוא דיגיטלי (CSS scale מורח, canvas snap מקפיא במקור).
• CSS filter chains — invert(1) / grayscale(1) contrast(1.2) / contrast(1.6) brightness(1.1) / sepia(0.5) saturate(1.4) hue-rotate(-20deg) — מיושמים על אלמנט ה-video חי.
• IndexedDB עם snapshots store — תמונות נשמרות כ-DataURL JPEG (איכות 85%) — אפשר להציג מיד בלי להמיר.
• Permissions-Policy — camera=(self) ב-nginx.

עיצוב

• פלטה peach/blush — #fdba74 peach + #fed7aa light peach + #1c0c00 deep coffee. בחירה מכוונת — צבעים חמים ונעימים שמתאימים לעזר ראייה (לא agressive).
• Viewfinder גדול — aspect-ratio 4/3, zoom HUD קטן בפינה, frozen indicator בולט.
• Tools row של 4 כפתורים — torch (פלאש), freeze (הקפאה — primary), filter (פילטר), save (שמירה).
• Snapshots gallery — grid 2-עמודות עם hover effects, click להורדה.

שימושים

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

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