50

Library of Congress

Conquest of Mexico Table App

A table app designed to give visitors a deep dive into the eight Conquest of Mexico paintings, leveraging insights from the Library's curatorial team, and helping frame the ideas of 17th-century painting as a complex colonial and civic venture.

Conquest of Mexico Table App
Date: Oct 2023 - Apr 2024
Project Types:#Upswell#Touch Table
Tech Stacks:#Javascript#Vue.js#Vite#Pinia#TailwindCSS#PostCSS#AnimeJS#Electron#BrightSign

Constructed and optimized Multi-Kiosk Deep Zoom Application for Library of Congress Interactive Exhibit

đź“ŚThe Challenge

The Library of Congress needed an interactive exhibit system to display high-resolution historical paintings (9272Ă—6277px) across 6 independent BrightSign media player kiosks. Each kiosk required unique content from a single codebase, with sub-second deep zoom transitions between 40+ story points. The system had to run offline on embedded hardware with strict memory constraints and handle complex state transitions between video, static images, and zoomable artwork.

Body ImageBody Image

🛠️The Engineering

1. Implemented Deep Zoom Image tiling with OpenSeadragon

This reduce a 132MB source image to 14MB of progressive JPEG tiles across 15 zoom levels. This cut initial load time by 95%—only the viewport's visible tiles are fetched on-demand, enabling smooth navigation of gigapixel artwork on embedded hardware.

2. Architected a JSON-driven multi-station deployment system

The multi-station systemw as created using BrightSign device serial numbers for runtime content resolution. Built custom Vite plugins to inject station-specific config and strip ES module syntax from build output, solving BrightSign OS incompatibilities. One build artifact serves 6 kiosks with different content.

3. Developed dynamic Vue Router generation

By utilizing JSON schema, I eliminated hardcoded routes. Programmatically mapped component strings to Vue imports at runtime, reducing codebase by ~40% compared to duplicating routes per station.

4. Optimized state management with Pinia

Implemented passive event listeners for idle timeout with automatic attract-loop reset across 5 specialized stores (viewport, media transitions, idle detection, module config).

5. Debugged viewport panning race conditions

Resolved bugs where automated 10-second panning started before OpenSeadragon instance mounted. Added lifecycle guards and custom animation timing overrides to differentiate programmatic vs. gesture-based navigation.

6. Refactored video loading to async/await

Prevent main thread blocking during 98MB asset loads. Implemented media layer orchestration with 1s transition delays between video/image/deep-zoom modes.

Body ImageBody Image

🚀The Impact

  • 95% reduction in initial asset load (132MB → ~50KB base tiles)
    Deployed to 6 physical kiosks from a single codebase using runtime config injection
  • 120-second idle timeout with passive event listeners—no performance overhead
  • 150 commits focused on viewport bugs, state management, and BrightSign compatibility
  • ~1500 LOC Vue 3 application with Pinia state architecture
    Eliminated ~40% code duplication through dynamic routing vs. hardcoded multi-station approach
Body ImageBody Image