Shotland Live Statistics Module

The Partydashboard is an interactive drink counter of the current party. It helps inspire the next drink and encourages the guests to increase the counter.

Parts:

• Screen/tablet/projector

Details

The Partydashboard is a webpage that is served by the Shotland Raspberry Pi. It utilizes the antient technology of AJAX to fetch the current numbers every few seconds. Because of the black background the Partydashboard can be projected onto any surface.

Deployment

Out in the wild it usually looks something like this:

Short Ajax Example

If you want to get data in an html page without any modern framework you can use ajax to call some Javascript function that fetches some data. In this example I want to get the number of drinks every second.

This is my html code: I want to replace the span with the id of drinks with the number that I will fetch.

<li>Drinks: <span class='number' id='drinks'>loading</span></li>

The Javscript looks like this:

<script>
    window.onload = function() {
        getData();
    };

    async function getData() {
        try {
            const response = await fetch('getnodrinks.php');
            if (response.ok) {
                const data = await response.text();
                document.getElementById('drinks').innerHTML = data;
            } else {
                console.error('Network response was not ok.');
            }
        } catch (error) {
            console.error('There has been a problem with your fetch operation:', error);
        }

        await delay(5);
        getData();
    }

    function delay(n){
        return new Promise(function(resolve){
            setTimeout(resolve, n * 1000);
        });
    }
</script>

The getnodrinks.php looks like this:

$ingcountuse1a="YOUR SQL STATEMENT";
$ingcountuse1b=$conn->query($ingcountuse1a);
$ingcountuse1c=$ingcountuse1b->fetch_object();
echo $ingcountuse1c->Anzahl;

That code does not have good quality, for example the javascript fetches the data in a recursive loop. At some point the javascript might crash. But for my deployment it suffices and I had no reason to put in more effort. Maby I will look for a more elegant way to do this in the future. If you have any suggestions feel free to leave them in the comments.

If you want to learn more about Shotland checkout the Shotland Overview Page.