Food4Thoth

📷 FOOD4THOTH Trace Overlay — Mobile Camera Lucida

Trace on paper using your phone. Load any reference image (or capture a frame from the live camera), position it atop the camera view, then look through your phone to trace with accurate proportions.

👉 Live demo: https://www.food4thoth.com/Trace/
👉 Add to Home Screen: Use your browser share menu → Add to Home Screen for a fullscreen, app-like experience.

✨ Features

Overlay any image from Photos / Files (supports HEIC/HEIF, JPG, PNG).
Grab Frame from the live camera to freeze a reference.
Drag / Pinch / Rotate gestures on the overlay image.
Ghost (opacity) slider for see‑through tracing.
Mirror (flip horizontally) and Rotate with snapping.
Grid overlay to help align proportions.
Torch toggle (on devices/browsers that expose the capability).
Camera Zoom (hardware zoom via MediaTrackConstraints when available, else CSS fallback).
Nudge controls for pixel-precise moves + angle snap.
Fit Width / Fit Height quick scaling.
Help bubble with core gestures.
Bottom Bar Toggle button in the top toolbar hides/shows the entire bottom control panel.
State persistence via localStorage (opacity, grid, overlay transform, camera zoom, bottom bar state).
PWA‑ready: optional manifest.webmanifest and sw.js service worker.

🧭 UI & Controls

Top Bar

🖼️ Photos — Pick an image from Photos/Files.
📷 Take Photo — Capture via camera picker (rear camera).
🧩 Grab Frame — Snapshot the current live camera frame into the overlay.
↺ Reset — Reset overlay position/scale/rotation (keeps lock).
🔒 Lock — Locks overlay; pinch then zooms the camera instead.
↔︎ Mirror — Flip overlay horizontally.
Grid — Toggle grid overlay above camera.
💡 Torch — Toggle device torch (where supported).
❓ Help — Show/hide help bubble.
⬇︎ / ⬆︎ Hide/Show — Collapse/expand the bottom bar.
⬆️ Add Home — Instructions to Add to Home Screen.

Bottom Bar

Ghost — Overlay opacity.
Rotate — Slider (snaps when within 3° of –180, –90, 0, 90, 180).
CamZoom — Camera zoom slider (hardware zoom if supported).
Nudge Pad — ⬆︎⬇︎⬅︎➡︎ move overlay by a few pixels; • center; ⤾ snap rotation.
Fit — Fit Width / Fit Height to quickly scale overlay.

Gestures

Drag with one finger.
Pinch to scale.
Twist (two fingers) to rotate.
Double‑tap overlay to reset transform.
When Locked: two‑finger pinch adjusts camera zoom.

📁 File Structure

/Trace
│── index.html            # This app
│── og-preview.jpg        # Social preview image
│── manifest.webmanifest  # (optional PWA manifest)
│── sw.js                 # (optional Service Worker)
│── nav-fetch.js          # (optional site navigation)
│── nav_script2.js        # (optional site navigation)

The nav-*.js files are optional. Remove their <script> tags if you don’t use site-wide navigation injection.

🔧 Quick Start (Local Development)

1) Serve over HTTPS or localhost

Camera access requires a secure context:

Deploy on https:// OR
Use localhost during development.

2) Run a quick local server

Python 3

cd Trace
python -m http.server 8000
# open http://localhost:8000 
in Safari/Chrome 
(mobile devices: same Wi‑Fi, use your machine IP)

Node (http-server)

npm i -g http-server
http-server -p 8000

💾 State Persistence (localStorage Keys)

trace.opacity — number (0.05–1).
trace.grid — boolean.
trace.zoom — number (hardware zoom value or CSS scale).
trace.state — object { x, y, scale, rot, mirror, locked }.
trace.bottomOpen — boolean to show/hide the bottom bar.

All values are stored locally on device. No data leaves the browser.

🔒 Permissions & Privacy

The app uses getUserMedia({ video }) to access the camera feed.
No server upload: Images you load or frames you grab remain on device.
Torch/zoom requests are applied to the current camera track where supported.
Wake Lock API (when available) keeps the screen on during tracing.

Canonical link, basic description, robots.
Open Graph (og:*) and Twitter card.
JSON‑LD WebApplication schema.
Favicons / apple-touch-icon.

🧩 Accessibility Notes

Buttons include aria-label/aria-pressed where relevant.
Bottom bar declares role="region"; top bar declares role="navigation".
Live status for nudges may use a visually hidden element with aria-live="polite".
Ensure contrast (light text on dark UI).

📱 Compatibility & Known Limitations

Secure context required: HTTPS or localhost.
iOS Safari
- Torch and hardware zoom availability depends on device and iOS version.
- Some HEIC/HEIF images may decode differently across devices.
Android/Chrome: Torch/zoom vary by OEM and camera HAL capabilities.
Desktop browsers: App works, but intended for phones/tablets.

If the camera feed remains blank: 1) Confirm page is on https:// or localhost.
2) Check browser camera permissions (blocked = no prompt).
3) Ensure another tab/app is not using the camera.
4) Reload the page after granting permission.

🤝 Contributing

Fork this project.
Create a feature branch: git checkout -b feature/your-idea
Commit: git commit -m "feat: add your idea"
Push: git push origin feature/your-idea
Open a Pull Request.

🌌 Philosophy and Vision

Food4Thoth is inspired by the principles of its namesake, Thoth:

Creativity: A celebration of art, imagination, and innovation.
Exploration: Encouraging curiosity and the pursuit of knowledge.
Community Building: Connecting individuals through shared resources and mutual support.
Playfulness: Balancing deep inquiry with interactive and fun experiences.

The platform is a digital garden where ancient wisdom meets modern innovation.

✨ Why Visit Food4Thoth?

Diverse Offerings: Content that caters to various interests, from art and mysticism to community activism.
Interactive Tools: Explore engaging applications like calculators, games, and divination apps.
Community Engagement: Opportunities for collaboration and connection through artistic and social projects.
Inspiration: A space to spark curiosity, reflection, and joy.

🤝 Support and Contributions

Your contributions help support innovative projects like the Rainbow Glo-Calculato, community gardens, and esoteric tools, ensuring Food4Thoth continues to thrive.

Donation Options

Traditional Payments:

PayPal
Venmo

Cryptocurrency:

Ethereum (ETH) & ERC-20 Tokens:
0x900e8f0d397048fD946b05553DeD5Ed3D5e4f1a0
Bitcoin (BTC):
bc1qcsa7ffef296pp9hkrn03p9wu7lt0fm3s2sz0wp
Ethereum Classic (ETC):
0xEb3C0e08868ACB0f515442579333c41E7a34F215
Solana (SOL):
B7nCFQs6HkFAvkz1wEUiPpM4Cj7G6FJNYQ7Avrt6a4cm
Ripple (XRP):
Address: <div class="wrap">rEAKseZ7yNgaDuxH74PkqB12cVWohpi7R6</div> Memo: 3109966062
Dogecoin (DOGE):
DP2e6J8NbUzswLtBw8ou2xYz4BinyzgU7n
Cardano (ADA):
addr1qxqgjp4h4vh4pxrg7jur8m96lzf5w98cahfflrw376qhufgg6h5us0avc20ee2azzun58lgylyl54sjr6y9efwq86krs3ladtw
Bitcoin Cash (BCH):
bitcoincash:qpu93py8j8ykcf7m6tmau2hldefl67t9lydw8afsa5
Stellar Lumens (XLM):
Address: <div class="wrap">GB2ES2N326MZK4EGJBKN3ZARCQ5RTFQSAWIJAAKFVIIIJSCC35TXIMLB</div> Memo: 2967141893
Litecoin (LTC):
ltc1qklestxa5shsym0gmuqmv2xewp56cst58vmhggl
Tezos (XTZ):
tz1guFykj1dQAyiGH7g5YJVZzaGdoTWeMK81

💡 Wallets

Coinbase Wallet:

0x30D47A5815D94040291a819B8E39765AA09d44A8

Metamask Wallet:
0x30D47A5815D94040291a819B8E39765AA09d44A8
VeWorld Wallet:
0x020a79559990145e2f7d48c5771b233399b30bee
Anchor Wallet:
artabilly.gm

🤝 Contribution Guidelines

We welcome contributions to enhance this project:

Fork the repository.
Create a feature branch: git checkout -b feature-name.
Commit your changes: git commit -m "Add feature or fix".
Push your branch: git push origin feature-name.
Submit a pull request for review.

🔗 Explore the Food4Thoth Hub

Visit the Food4Thoth portal and begin your journey through creativity, mysticism, and connection.

💌 Contact

For inquiries or feedback:

Email: food4thoth@proton.me

🎉 Acknowledgments

Food4Thoth represents the collective effort of artists, mystics, and community builders. Thank you to all contributors and supporters who make this digital garden flourish.

Join us and explore the endless possibilities of Food4Thoth!

Thank you for exploring the FOOD4THOTH Trace Camera Lucida! Keep creating, keep questioning, and keep playing with the infinite. 🌌✨

🧾 License

🙏 Credits

Design & development by FOOD4THOTH.
Inspired by classic camera lucida tools, adapted for modern mobile browsers.