Amanda_Ticker/index.html at main · Donostio/Amanda_Ticker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Rotating URL Display (Household Member)</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background-color: #000;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }
    </style>
</head>
<body>
    <iframe id="contentFrame" src="about:blank"></iframe>

    <script>
        // Array of URLs to rotate, now with the two new departure board links
        // Each object contains: { url: "your_url_string", duration: milliseconds }
        const urlsToRotate = [
            { url: "https://www.leddepartureboard.com/singleboard/SRC/to/VIC?hideClock=false&hideMenu=true&showStationName=true", duration: 12000 }, // Display for 10 seconds
            { url: "https://www.leddepartureboard.com/singleboard/STE/to/EPH?hideClock=false&hideMenu=true&showStationName=true", duration: 12000 },  // Display for 10 seconds
            { url: "https://donostio.github.io/Amanda_Tube_Status/", duration: 11000 }  // Display for 10 seconds
        ];

        let currentUrlIndex = 0;
        const contentFrame = document.getElementById('contentFrame');
        let rotationTimer; // To store the setTimeout ID for clearing

        function loadNextUrl() {
            // Clear any existing timer to prevent overlapping, though the logic below naturally handles this.
            if (rotationTimer) {
                clearTimeout(rotationTimer);
            }

            const currentItem = urlsToRotate[currentUrlIndex];
            contentFrame.src = currentItem.url;
            console.log("Loading URL: " + currentItem.url + " for " + (currentItem.duration / 1000) + " seconds.");

            // Set the timer for the duration of the *current* item
            rotationTimer = setTimeout(() => {
                // Move to the next URL, looping back to the start if we reach the end
                currentUrlIndex = (currentUrlIndex + 1) % urlsToRotate.length;
                loadNextUrl(); // Recursively call to load the next URL
            }, currentItem.duration);
        }

        // Start the rotation immediately when the page loads, without an initial blank delay
        loadNextUrl();
    </script>
</body>
</html>