Interactive wayfinding is a touch-screen navigation system that helps visitors find rooms, departments, and services in buildings. SpinetiX players support native touch input, multi-floor maps, and on-screen search — all running locally without a server. One player, one screen, one project covers an entire building. Content updates from Elementi or Arya whenever the floor plan changes.
When to Use This Guide
- Corporate lobbies — visitors finding meeting rooms, departments, visitor registration
- Hospitals — patients navigating to wards, labs, pharmacies, emergency exits
- Shopping malls — shoppers locating stores, restaurants, parking, restrooms
- University campuses — students finding lecture halls, libraries, admin offices
How to Build Wayfinding on SpinetiX
Step 1: Prepare Floor Plans
Export building floor plans as SVG or high-resolution PNG images. SVG is preferred — it scales perfectly on any screen resolution. Clean up architectural details that aren't relevant to visitors: remove electrical wiring, structural notes, and engineering symbols. Keep: rooms, corridors, stairs, elevators, restrooms, exits.
Step 2: Define Touch Zones
In Elementi, overlay transparent touch zones on your floor plan. Each zone represents a tappable area — a room, a department, or a navigation button. The jSignage interactive API handles touch events: tap, long-press, swipe.
Step 3: Build the Navigation Logic
Create a destination list (JSON or CSV) with room names, floor numbers, and coordinates. When a visitor taps a destination, the display highlights the route from "You Are Here" to the target. Use animated paths (SVG line animations) for visual route guidance.
Step 4: Add Multi-Floor Support
Create separate map layers for each floor. Add floor-selection buttons (Floor 1, Floor 2, etc.) that switch between layers. For routes spanning multiple floors, show "Take elevator to Floor 3" transition screens between floor maps.
Step 5: Add Search (Optional)
Elementi supports on-screen virtual keyboards. Add a search bar where visitors type a destination. The system filters the destination list and highlights matching results. Tap a result → the route appears. Search data is a local file — no backend needed.
Key Parameters
| Parameter | Value | Why It Matters |
|---|---|---|
| Touch Input | IR overlay or capacitive (USB) | Standard hardware, no drivers needed |
| Map Format | SVG (preferred) or PNG | SVG scales perfectly on all resolutions |
| Floor Limit | Unlimited | One player handles an entire building |
| Offline Support | Full | Maps and logic stored locally — no server |
| Update Method | Replace image/data files | No redesign needed for room changes |
| Accessibility | Large touch targets, high contrast | Compliant with accessibility standards |
Common Mistakes
- Using raster images at low resolution. A 1080p PNG looks blurry on a 4K touch display. Use SVG floor plans that scale to any resolution, or export PNG at 2× target resolution minimum.
- Touch zones too small. Minimum touch target: 44×44 pixels. On a large floor plan, room labels might be tiny — use larger invisible touch zones that extend beyond the visible label.
- Not accounting for screen orientation. Wayfinding kiosks are often portrait (9:16). Design your maps for the actual screen orientation, not the architectural drawing format.
- Forgetting "You Are Here." The most important element on any wayfinding display. Make it prominent — pulsing animation, distinctive color, always visible regardless of which floor is shown.