Elevate Your Home Automation Dashboard with a Dynamic Screensaver Slideshow 🖼️

Powered by QNAP QuMagie and Fully Kiosk

For years, my trusty QNAP NAS has been a steadfast companion for file backups. However, my foray into home automation and the addition of a wall-mounted tablet dashboard has unveiled a delightful new use — transforming it into a vibrant display for my cherished photo collection.

In this piece, I’ll guide you through leveraging your QNAP NAS as a dynamic source for a photo slideshow screensaver that will bring your home automation dashboard to life.

Essentials for Setup

A QNAP NAS running QuMagie is essential — it’s likely you have one or can acquire an affordable model. It will serve as the repository for your photos and host a curated album of favorites.

Next, choose a suitable display. I recommend the Amazon FireHD 10 for its affordability, ample size, and capability to present a seamless dashboard without additional hardware — save for a wall mount.

Optional: For those replicating my setup, a home automation dashboard is key. If a photo slideshow suffices, this step is not needed. Consider exploring ioBroker or Home Assistant for their robust documentation, community support, and integration options.

Lastly, the Fully Kiosk Browser app is crucial. It will display your dashboard and trigger the slideshow screensaver. A PLUS license is required to unlock all features.

Let’s get started!

Crafting Your Dashboard

Tailor a dashboard to your liking on your home automation platform. With Home Assistant, creating a new dashboard is a breeze. Customize the layout and components to fit your needs, ensuring it has a distinct URL for Fully Kiosk to access. Consider setting up a dedicated dashboard user account for tailored access control.

Configuring Your QNAP

Install QuMagie, the modern successor to QPhotos, and consider enabling the QNAP AI core for automated photo management using AI. This local feature can identify subjects and themes, allowing you to create smart albums filled with specific content. For instance, I’ve crafted an album featuring all our family members.

Regardless of your choice, establish an album and generate a shareable URL for later use.

Installing Fully Kiosk

Refer to the comprehensive documentation on their website for installation guidance. You can install the app via ADB or opt for a straightforward download from the Google Play Store.

Activating Fully Kiosk

Acquiring a PLUS license is a simple process. Visit their website, select a pricing plan, and complete the purchase using your device ID found in the app’s sidebar (accessable by swiping right). Once payment is finalized, activate the license on your device to access the PLUS features.

Final Touches

1. Configure remote administration within the app settings for hassle-free adjustments.
2. Enter your dashboard’s URL as the start page within the Web Content Settings.
3. Enable Auto Reload for your dashboard to stay current.
4. Enable the Keep screen on feature for uninterrupted display.

Enabling Screensaver Mode

Activate the screensaver feature with your PLUS license and input your QNAP album’s URL. Set the idle time before the screensaver initiates, and consider using motion detection settings to exit the screensaver upon detected movement.

Creating a slideshow

To achieve the advertised aesthetic, navigate to Advanced Web Settings and inject this JavaScript snippet to cycle through your album’s images in preview mode, refreshing every 10 minutes or as desired.

if (document.title === 'QuMagie') {
    fSlideshow = function() {
        // Close Preview
        var tools = document.getElementsByClassName("tools")[0];
        tools?.getElementsByTagName("button")[0].click();
        
        var main = document.getElementById("main");
        
        // Load random previews
        var grid = main.getElementsByClassName("ReactVirtualized__Grid")[0];
        grid.scrollTop = Math.random() * grid.scrollHeight;
        
        // Open random preview
        var cols  = main.getElementsByClassName("col");
        var randomIndex = Math.floor(Math.random() * cols.length);
        var randomCol = cols[randomIndex];
        randomCol.getElementsByTagName("div")[2].click();
    }
    
    window.setInterval(fSlideshow, 1000 * 60 * 10); // switch every 10min
    window.setTimeout(fSlideshow,1000); // start after 1s
}

I hope this revamped guide empowers you to create a stunning visual element for your home automation setup, doubling as a picturesque frame and functional dashboard.

Additions

1. Login to Your Home Automation Platform:
   When you first load the dashboard, make sure to log in to your home automation platform. Look for a “Keep me signed in” or similar option to stay logged in for future visits.
2. QNAP Albums Public URL:
   QNAP Albums can generate a public URL that allows access to your photos and videos. Keep in mind that you won’t be able to log in to your QNAP from the screensaver directly, so having a public URL can be helpful.
3. Security Considerations:
   To enhance security, configure your QNAP firewall settings appropriately. Ensure that only authorized devices can access your QNAP.
4. Amazon FireHD 10 Advertisements:
   Depending on the version of your Amazon FireHD 10 tablet, you may encounter ads displayed throughout the interface. To remove these ads, consider blocking internet access for the tablet through your router settings.
5. Script Timeout for Screensaver Preview:
   If the screensaver preview mode isn’t triggered promptly, consider adjusting the initial timeout value in your script. The current 1000ms (1 second) timeout may not be sufficient for all setups.

Please let me know what you think of this guide and if you have any trouble setting this up.

👏 Maybe leave a clap, too?