Overview
I designed and built a wall-mounted MagicMirror² smart display and developed a custom slideshow module to address
limitations in existing solutions. The project combined hardware integration, frontend development, and open-source
contribution — resulting in a polished, reliable display and a publicly available module now used by others.
I built this module because none of the existing slideshow options offered what I needed: a clean, centered photo
display instead of a full‑screen background slideshow.
Key Objectives
- Create a stable MagicMirror² display: Built using a Raspberry Pi and a 24" monitor.
- Develop a custom slideshow module: Added smooth transitions and predictable sizing.
- Improve user experience: Resolved layout, timing, and shuffle issues present in existing modules.
- Open‑source contribution: Published the module with clear documentation and installation steps.
Technical Highlights
- Frontend engineering: Implemented a dual-image crossfade system using CSS transitions and absolute positioning.
- DOM timing control: Ensured stable rendering by managing asynchronous loading and applying CSS after DOM creation.
- Shuffle logic: Built a non‑repeating randomization algorithm for a better viewing experience.
- Layout stability: Overrode MagicMirror’s auto-sizing behavior with fixed-size containers and targeted CSS.
- Hardware integration: Mounted and configured a Raspberry Pi–powered display with automated power scheduling.
Impact
- Improved reliability: Eliminated layout drift and inconsistent transitions.
- Enhanced visual quality: Delivered smooth crossfades and correct image orientation.
- Better user control: Added configuration options for timing, sizing, and shuffle behavior.
- Open‑source contribution: Released a fully documented module for the MagicMirror community.
Skills Demonstrated
- JavaScript module development
- CSS animation and layout control
- Debugging asynchronous rendering
- Hardware/software integration
- Technical documentation for public release
Outcome
The final MagicMirror setup runs smoothly with predictable behavior, clean transitions, and a professional appearance.
The module, MMM‑RandomSlideshow, is available on GitHub and designed for easy installation,
configuration, and community contribution.
GitHub Repository:
https://github.com/RyanKimTech/MMM-RandomSlideshow