InsideGubbio AR — Location-based augmented reality platform for Gubbio monuments

[Copilot]

Geolocation-aware AR webapp that overlays audio guides, historical narratives, and animated decorations on Gubbio's monuments via the device camera. Design derived from insidegubbio.framer.website.

Architecture

• SPA with hash routing — Three views: landing, explore, AR camera. No build step, no framework, vanilla JS modules.
• MonumentService (js/monuments.js) — Loads monument/route data from api/monuments.json, exposes proximity queries using Haversine distance.
• AREngine (js/ar.js) — Manages camera stream (getUserMedia), geolocation watch, per-monument HUD rendering, audio playback, and a canvas-based particle system.
• ARApp (js/app.js) — View lifecycle, navigation, wires geolocation callbacks to monument detection.

Monument data (api/monuments.json)

6 landmarks with GPS coordinates, proximity radius, category, epoch, description, audio path, and a historical character (name, role, greeting). 3 curated routes.

AR overlay features

• Audio toggle — Plays per-monument MP3 from assets/audio/; gracefully handles missing files
• Info panel — Slides up from bottom with full description, epoch tags. Dismissible via close button, backdrop tap, or swipe-down gesture. Reduced height (55vh) for better usability on iPhone.
• Full-body character figures — SVG silhouettes of historical characters rendered directly in the AR camera view, each with role-specific details (architect with scroll, centurion with sword/shield, bishop with staff/mitre, duke with crown/cape, jester with hat, saint with wolf at feet). Characters float with a gentle animation and display a speech bubble greeting. Togglable via the "Personaggio" button.
• Scan frame — Animated corner brackets + sweep line, color-coded by category
• Particle decorations — Category-specific shapes (diamonds for palazzi, circles for chiese, squares for archaeological sites) on a canvas layer

How proximity works

// ARApp starts geolocation watch → on each position update:
const closest = MonumentService.getClosestMonument(lat, lng);
if (closest) AREngine.setActiveMonument(closest);

Each monument defines a radius (meters). Users can also bypass geolocation by selecting a monument from the explore view, which opens AR in demo mode.

Navigation

• Back button in AR view returns to the home page
• Hash-based routing supports #home, #explore, #ar, and #ar/{monument-id} for direct monument links

Content slots

Audio files and images are referenced but not included — drop MP3s into assets/audio/ matching the filenames in monuments.json. Descriptions and character dialogue are editable directly in the JSON.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[gablilli]

@copilot fantastico! fixa il tasto indietro per tornare alla home; inoltre tornare alla visione dell'ar almeno su iphone quando si ha aperta la descrixione del monumento non è semplice. inoltre ci sono i personaggi che compaiono o no? se no metticeli proprio come corpi in ciò che l'utente inquadra

[Copilot]

@copilot fantastico! fixa il tasto indietro per tornare alla home; inoltre tornare alla visione dell'ar almeno su iphone quando si ha aperta la descrixione del monumento non è semplic...

Fixato tutto nel commit 1383125:

1. Tasto indietro → ora torna alla home (prima andava a "esplora")

2. Pannello testo su iPhone → aggiunto:

   • Pulsante X per chiudere in alto a destra
   • Tocca lo sfondo scuro dietro per chiudere
   • Swipe verso il basso per chiudere
   • Ridotta altezza max a 55vh per non coprire tutto

3. Personaggi → ora compaiono come figure a corpo intero (silhouette SVG) nell'inquadratura AR, ognuno con dettagli unici:

   • Angelo da Orvieto con pergamena e berretto
   • Sant'Ubaldo con mitra, pastorale e croce
   • Centurione Marco con elmo, spada e scudo
   • Federico da Montefeltro con corona e mantello
   • Il Matto con cappello da giullare
   • San Francesco con saio e il lupo ai piedi

   I personaggi fluttuano con animazione e hanno un fumetto con il saluto. Si possono mostrare/nascondere con il bottone "Personaggio".