This week I wrote a thing to help show the data spewing out of our building. For the past 5 years I have been campaigning to make the data commonly available in modern buildings more accessible in our new UCL East campus. For the past year with help from folk across the organisation we have been successfully harvesting data from One Pool Street. But rather than just explaining to people what we were doing, I wanted to have a quick dashboard to show them.

This isn’t a practical interface. You cannot really see or understand the data. But for me the realtime nature of it conveys the volume of information being observed. I had to start somewhere. Next will be a page that highlights the tree structure of all the topics we have on the server - a bit like an expandable file system.

This summer we will be creating some more sophisticated overviews of the data being accessed both in our buildings and more broadly the Living Lab across the Olympic Park.

Notes:

Used Paho Javascript library to subsribe to the topics and then updated the document each time a message is received using this code:

    function displayMessageHistory() {
        mqttDataDiv = document.getElementById('mqtt-data');
        mqttDataDiv.innerHTML = ''; // Clear existing content

        // Display messages in reverse order (newest first)
        for (const msg of messageHistory) {
            msgElement = document.createElement('p');
            msgElement.textContent = msg.slice(0, 72); // Limit to 80 characters;
            msgElement.style.fontFamily = 'Courier New'; // Set font family
            msgElement.style.color = 'green'; // Set text color
            msgElement.style.marginBottom = '0.2em'; // Adjust spacing between rows
            mqttDataDiv.appendChild(msgElement);
        }
        mqttDataCountDiv = document.getElementById('mqtt-data-count');
        formattedCounter = counter.toLocaleString();
        mqttDataCountDiv.innerHTML = 'Message received since page opened: ' + formattedCounter;
    }