glanceapp / glance

A self-hosted dashboard that puts all your feeds in one place
GNU Affero General Public License v3.0
8.48k stars 295 forks source link

[FEATURE REQUEST] Auto switch pages specified in minutes, looping between all the pages for a period of time #92

Closed HummusB0x closed 5 months ago

HummusB0x commented 5 months ago

Hello,

First of all, thank you very much for the share of this tool!

To use your project as dashboard, could we have an option that would automatically switch between pages after a given period defined by the user?

This configuration could be proposed through an option within the page page itself or even globally.

For example, let's configure the case you have 4 pages: page1, page2, page3 and page4.

When the auto switch enabled, the default time between page switch could be 1 minute for example.

This would be an awesome feature!

svilenmarkov commented 5 months ago

Hey,

It kind of sounds like you're trying to use Glance for a kiosk. While I don't intend on adding such automatic page switching functionality, you could easily achieve the same with a bit of HTML and JS:

<body>

<style>
    * {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>

<iframe id="iframe" src="" frameborder="0"></iframe>

<script>
    const baseUrl = "http://localhost:8080";

    const pages = [
        {
            path: "page1",
            // 90 seconds
            duration: 90 * 1000
        },
        {
            path: "page2",
            // 4 minutes
            duration: 4 * 60 * 1000
        },
        {
            path: "page3",
            // 1 hour
            duration: 60 * 60 * 1000
        },
    ];

    const iframe = document.getElementById('iframe');
    var currentPage = 0;

    const update = () => {
        const page = pages[currentPage];
        currentPage = (currentPage + 1) % pages.length;
        iframe.src = `${baseUrl}/${page.path}`;
        setTimeout(update, page.duration);
    }

    update();
</script>

</body>