Linear Stepper Motor Gauge

a full 1 metre range for the data visualisation. It uses a stepper motor for precise needle movement, and a limit switch for calibration, it can be adapted to any MQTT data feed and any base mount. The example shown uses a 5cm by 10cm peice of wood, cut to 1 metre length and indicates wind speed from 0 to 60 mph.

The design uses a stepper motor (like the 28BYJ-48) which offers high-precision, 360-degree movement without the jitter or limited range of a standard servo. The limit switch allows the gauge to “home” itself on startup, ensuring the pointer always starts at a known zero position.

The main code – WindStepperTimerBeltwithLimitSwitch.ino in the Github has a distance calibration number, adjust for your range.

Hardware Components

• Arduino-compatible Board: Any board like an Arduino Uno, Nano, or a NodeMCU.
• Stepper Motor: 28BYJ-48 5V stepper motor.
• Stepper Driver: ULN2003 driver board (which often comes with the 28BYJ-48).
• Limit Switch: A small microswitch to detect the pointers zero position.
• Power Supply: USB.
• Timer Belt GT2 Timer Belt

It is made to be as simple to build/power as possible but also adatable for a number of senarios.

The github provides the mount for the stepper motor, the pointer (which also joins together the timing belt) the limit switch and the end mount for the pulley. These allow the gauge to be adapted to any size required.

At the moment the gauge is sitting on the wall in our lounge and it has become one of our most used guages. The data updates every minute to show the maximum wind gust and due to the nature of the stepper motor, it provides a smooth movement, almost replicating the gust of wind.

The post Stepper Motor Linear Data Gauge appeared first on Digital Urban.

The light simulates an oil lamp by staying “steady” for a random period and then “flickering” for a short time by rapidly dimming and brightening – the flicker speed changes acording to the wind speed. The full code and details are available on Github as part of the ever growing Open Gauges Project.

Ships Lamp

Features

• Real-time Data: Connects to an MQTT broker to subscribe to a wind speed topic.
• Weather Map Gradient: Displays wind speed using an intuitive “weather map” color gradient:
  • 0 mph: Off (Black)
  • 1-10 mph: Solid Green
  • 10-20 mph: Fades from Green → Yellow
  • 20-30 mph: Fades from Yellow → Orange
  • 30-40 mph: Fades from Orange → Red
  • 40+ mph: Solid Red
• Realistic Flicker Effect: The light doesn’t just stay solid; it cycles between a “steady” phase (10-60s) and a “flicker” phase (5-15s) to simulate a real lamp.
• Asynchronous & Resilient: Built using uasyncio and mqtt_as. The mqtt_as library automatically handles and recovers from WiFi or MQTT broker disconnections, re-subscribing to topics as needed.
• Hardware Watchdog: Uses the Pico’s built-in machine.WDT (Watchdog Timer) to automatically reboot the device only if the main code loop freezes, ensuring high reliability. (This replaces the old 60-minute timer).
• Status LEDs: Provides a heartbeat flash on one LED and a WiFi status indicator on another.

Hardware Requirements

• Raspberry Pi Pico W: (or any Pico with a WiFi-capable board).
• NeoPixel LED Strip: The code is configured for a strip, but can be any WS812B/NeoPixel compatible LEDs.
• Power Supply: A sufficient power supply for your LED strip (a strip of 60 LEDs can draw several amps at full brightness).
• A Ships Lamp (old or new).

Default Pinout (Pico W)

• NeoPixel Data: GP15
• Blue LED (Heartbeat): blue_led (defined in config.py, often the onboard LED).
• WiFi LED: wifi_led (defined in config.py).

Software & Dependencies

This project relies on a few key MicroPython libraries that you must have on your Pico:

1. neopixel.py: The standard Adafruit NeoPixel library for MicroPython.
2. mqtt_as.py: A robust, asynchronous MQTT client. You can find it here.
3. config.py: A file you must create to hold your credentials and pin definitions.

Configuration

You must create a config.py file in the root of your Pico’s filesystem. This file should contain:

1. Your WiFi and MQTT broker credentials.
2. Definitions for your wifi_led and blue_led.

The mqtt_as library expects the config.py to contain a config dictionary.

Example config.py:

# config.py
from machine import Pin

# --- WiFi Configuration ---
config['wifi_led'] = Pin("WL_GPIO0", Pin.OUT) # Onboard LED on Pico W
config['ssid'] = 'YOUR_WIFI_SSID'
config['wifi_pw'] = 'YOUR_WWIFI_PASSWORD'

# --- MQTT Configuration ---
# This example is for the open broker mqtt.cetools.org
config['server'] = 'mqtt.cetools.org'
config['port'] = 1884
config['client_id'] = 'pico_ships_lamp' # Or any unique ID

# --- Optional: For Secured Brokers ---
# If your broker requires a username and password, add these lines:
# config['user'] = 'YOUR_MQTT_USER'
# config['password'] = 'YOUR_MQTT_PASSWORD'

# --- Other Hardware ---
# This is for the heartbeat LED
blue_led = Pin(10, Pin.OUT) # Example: an external LED on GP10

Running the Project

1. Upload main.py, neopixel.py, mqtt_as.py, and your config.py to your Raspberry Pi Pico.
2. Reset the device.
3. The device will automatically connect to your WiFi and MQTT broker.
4. It will subscribe to the topic personal/ucfnaps/downhamweather/windSpeed_mph.
5. As messages are published to that topic, the ship’s lamp will spring to life!

Customizing

• LED Count: Change the numpix variable at the top of main.py to match your strip.
• Data Pin: Change the 15 in pixels = Neopixel(numpix, 0, 15, "GRB") to match your data pin.
• MQTT Topic: Change the a topic name in the conn_han function to subscribe to your own data source.

The post Ships Lamp Wind Speed Gauge appeared first on Digital Urban.

It’s an exciting time to be a Pebble fan. After years of being kept alive by the dedicated Rebble community, the Pebble is officially back. The new Pebble 2 Duo watches (the black-and-white model) are officially shipping to the first backers, with the high-resolution color Pebble Time 2 set to follow.

So, I decided to make one myself.

 

Introducing ‘Just Weather’

I wanted a face that was clean, digital, and gave me all the key data at a glance, formatted to look great on the 144×168 screen of the Pebble 2. I call it “Just Weather.”

It uses the free Open-Meteo API to pull in a ton of useful, hyperlocal data right to your wrist:

 

• • Current Location (from your phone’s GPS)
  • Temperature
  • Current Conditions (“Partly Cloudy,” “Rain,” etc.)
  • Barometric Pressure & 3-Hour Trend
  • Wind Speed & Precipitation
  • …and of course, the time!

 

 

Built with GitHub CoPiliot

The best part is that the new Pebble development workflow is incredibly modern. I was able to build this using the CloudPebble IDE, which now integrates directly with VS Code in the browser.

This meant I could use the emerging tools like GitHub Copilot to help generate the code and work through the trickiest parts—like making direct HTTPS requests to the weather API, which (after a lot of testing!) we proved is possible from the phone app.

After getting the data, the final step was tweaking the C code to make sure the layout wasn’t clipped and all the information fit perfectly on the 144×168 screen. It’s now compatible with watches in the Pebble family, from the original Pebble Time (color) to the new Pebble 2 Duo and the upcoming Pebble Time 2.

 

 

Available Now

This project took around 6 hours, with the main issue being that Co-Pilot did not know how to get HTTP requests – it took me down a lot of rabbit holes, and in the end, it was down to using a simpler call on the data – XMLHttpRequest. Once this worked it all fell into place and it was simply a case of asking Copilot to add in the data fields, do the geocoding and then take a step back and explain how the code actually works.

If you’re like me and just want a simple, data-rich weather face, please give it a try…

 

• • Download ‘Just Weather‘ from the Rebble Appstore
  • Check out the source code on GitHub for the latest updates – now includes its own settings page (its become a proper watch face app)…

 

 

The post Just Weather for The Pebble Watch: Making a Data Watch Face appeared first on Digital Urban.

The post MQTT Frame – Beautifully Framed Live Data appeared first on Digital Urban.

There are many tutorials online on using an LED Matrix to display data—many of them require wiring up a screen, external power supplies, or flashing boards. We wanted to highlight a slightly more accessible way to get an LED Matrix—in our case, a Hub 75, 32×64 pixel up and running using an Interstate75W from Pimoroni. The benefit of the Interstate is that it plugs indirectly into the matrix and can power a single screen directly from the board.

Interstate75W

We wanted a way to display any data we wanted on the screen with the screen lighting up and data scrolling up as it arrives and then turning off. To use this we use MQTT to load our data (a test feed is included in the scripts – which displays Time, News and Environmental Information) – see below for a demo:

 

We also incorporate manual brightness control and reconnecting for the MQTT for message handling, making it easy to update the display from anywhere. Setting up your own MQTT is beyond this post, but its easier than you may think and once you have one it can be used to display any data, from external feeds such as weather apis through to data from systems such as Home Assistant. Edit April 2025, we have added additional files to allow use with the new Pimoroni Intersate Starter Kit 128×128 Matrix, allowing a larger format screen, as pictured below.

Matrix128x128

Features

• Scrolling Text Messages: Display messages that scroll across the HUB75 LED matrix.
• Manual Brightness Control: Adjust the brightness of the display manually.
• MQTT Integration: Receive and display messages via MQTT.

Hardware Requirements

To get started, you’ll need the following hardware:

• Pimoroni Interstate75W
• A HUB75 LED matrix display
• 3D Printed Case
• MQTT broker (local or cloud-based) – we provide our own feed so you can test the set up.

There is also room in the 3D printed case to attach a cloth cover, acting a diffuser (a grey t-shirt works well, cut to size):

LED Matrix with Cloth Cover

Software Requirements

You’ll also need the following software – all available from our GitHub

• MicroPython
• Required MicroPython libraries:
  • interstate75
  • mqtt_as
  • uasyncio

Setup

1. Clone the Repository

First, clone the project repository from GitHub, or just download the files directly:

“`sh
git clone https://github.com/digitalurban/Interstate75W_MQTT_Scroller
cd interstate75w-mqtt-display
“`

2. Upload the Code

Next, upload the code to your microcontroller. You can use tools like Thonny or ampy to do this.

3. Configure WiFi and MQTT

Update the config.py file with your WiFi credentials, the MQTT details can also be updated if you have your own server, if not then leave them for our demo feed.

“`python
config = {
‘ssid’: ‘your_wifi_ssid’,
‘wifi_pw’: ‘your_wifi_password’,
‘server’: ‘mqtt_broker_address’,
‘user’: ‘mqtt_user’,
‘password’: ‘mqtt_password’,
‘port’: 1883,
‘keepalive’: 60,
}
“`

Usage

Run the Script

The script will automatically connect to WiFi and the MQTT broker, then start displaying messages – our MQQ feed displays messages approximatly every 3 minutes.

Constants and Initial Setup

The script defines constants for controlling the scrolling text speed, how long the screen says on for after displaying the message and brightness settings. It also initializes the Interstate75W object:

Constants for controlling scrolling text

BACKGROUND_COLOUR = (0, 0, 0) # Black background to turn off the screen
HOLD_TIME = 2.0
BLANK_SCREEN_TIME = 10.0
BUFFER_PIXELS = 2 # Increased buffer to ensure full scroll off
SCROLL_SPEED_LEVEL = 8 # Set the desired scrolling speed level (1 to 10)
SCROLL_SPEED = 1 / SCROLL_SPEED_LEVEL # Convert to a delay in seconds

Brightness settings

brightness = 50 # Initial brightness (0 to 100)

Do let us know if you make one – we would love to see images of your own set up and we hope this made it a little easier for anyone new looking to run an LED matrix using MQTT.

The post Make a Scrolling Hub75 Matrix Display using a Pimoroni Interstate75W and MQTT appeared first on Digital Urban.

Introduction

Viewing real-time data from a personal weather station such as a Davis Vantage Pro, a Tempest, or an EcoWhitt device can be complex. However, the majority of systems that process weather data, such as Weather Display, Weewx, or CumlusMx, all have the ability to output MQTT data. This data can be used to display a real-time graph of the data, keeping you engaged with the latest weather updates, and supplemented with any other data which is MQTT-based.

With this in mind, we’ve developed a live weather monitoring dashboard as an illustrative example. This dashboard uses MQTT for real-time data updates and Chart.js for dynamic visualization. We’ve also included a visual indicator for connection status and a brief pulse effect to notify when new data arrives, enhancing the user experience.

You can view it live at: https://finchamweather.co.uk/weathergraph.htm

The data populates as the page loads – we could of course back load it via a database link, but the aim was to simply use MQTT and have a graphing system that streams in data, its a work in progress but here is how we got it working:

Setting Up the Environment

Before we dive into the code, ensure you have the following libraries included in your HTML:

• Paho MQTT: for MQTT protocol handling – our MQTT feed is open to use as a test, replace this with your own MQTT details in the main code.
• Chart.js: for creating dynamic charts
• Chart.js adapter for date-fns: for handling time scales in charts

Initial HTML Setup

We’ll start by setting up the basic HTML structure. This includes elements for displaying the connection status, forecast, weather statistics, and the weather chart.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Live Weather Graph</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #mqttStatus {
            margin-bottom: 20px;
            text-align: left;
            font-size: 1.2em;
        }
        .dot {
            height: 20px;
            width: 20px;
            border-radius: 50%;
            display: inline-block;
        }
        .green {
            background-color: green;
        }
        .red {
            background-color: red;
        }
        .orange {
            background-color: orange;
        }
        .pulse-once {
            animation: pulse-once 1s;
        }
        @keyframes pulse-once {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        #forecast {
            margin-bottom: 20px;
            text-align: left;
            font-size: 1.2em;
            font-weight: bold;
        }
        #stats {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
            font-size: 1.2em;
            font-weight: bold;
        }
        #stats div {
            padding: 10px 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 2px 2px 12px #aaa;
            background-color: #f9f9f9;
        }
        canvas {
            border: 1px solid #ccc;
            box-shadow: 2px 2px 12px #aaa;
        }
    </style>
</head>
<body>
    <div id="mqttStatus"><span id="connectionDot" class="dot red"></span> mqtt: disconnected</div>
    <div id="forecast">Forecast: Loading...</div>
    <div id="stats">
        <div id="maxWindSpeed">Max Wind Speed: 0 mph</div>
        <div id="maxTemp">Max Temperature: 0 °C</div>
        <div id="minTemp">Min Temperature: 0 °C</div>
        <div id="maxPressure">Max Pressure: 0 mbar</div>
        <div id="minPressure">Min Pressure: 0 mbar</div>
    </div>
    <canvas id="weatherChart" width="800" height="400"></canvas>
</body>
</html>

Connecting to MQTT

Next, we set up the MQTT connection. The MQTT client will connect to the broker, subscribe to the necessary topics, and handle messages when they arrive.

// MQTT connection settings
var mqtt;
var reconnectTimeout = 2000;
var host = "mqtt.cetools.org";
var port = location.protocol === 'https:' ? 8081 : 8080;
var options = {
    timeout: 3,
    onSuccess: onConnect,
    onFailure: onFailure,
    useSSL: location.protocol === 'https:',
};
var clientID = "clientID" + parseInt(Math.random() * 100);

function updateConnectionStatus(status) {
    const dot = document.getElementById("connectionDot");
    if (status === "connected") {
        dot.className = "dot green";
        document.getElementById("mqttStatus").innerHTML = `<span class="dot green" id="connectionDot"></span> mqtt: connected`;
    } else if (status === "disconnected") {
        dot.className = "dot red";
        document.getElementById("mqttStatus").innerHTML = `<span class="dot red" id="connectionDot"></span> mqtt: disconnected`;
    } else if (status === "reconnecting") {
        dot.className = "dot orange";
        document.getElementById("mqttStatus").innerHTML = `<span class="dot orange" id="connectionDot"></span> mqtt: reconnecting`;
    }
}

function pulseDot() {
    const dot = document.getElementById("connectionDot");
    dot.classList.add("pulse-once");
    setTimeout(() => {
        dot.classList.remove("pulse-once");
    }, 1000); // Duration of the pulse-once animation
}

function onFailure(message) {
    console.log("Connection Attempt to Host " + host + " Failed: ", message.errorMessage);
    updateConnectionStatus("disconnected");
    setTimeout(MQTTconnect, reconnectTimeout);
}

function onConnect() {
    console.log("Connected ");
    updateConnectionStatus("connected");
    mqtt.subscribe("personal/ucfnaps/downhamweather/loop");
    mqtt.subscribe("personal/ucfnaps/eink/met");
}

function MQTTconnect() {
    console.log("Connecting to " + host + " on port " + port);
    updateConnectionStatus("reconnecting");
    mqtt = new Paho.MQTT.Client(host, port, clientID);
    mqtt.onMessageArrived = onMessageArrived;
    mqtt.onConnectionLost = function(responseObject) {
        if (responseObject.errorCode !== 0) {
            console.log("Connection Lost: " + responseObject.errorMessage);
            updateConnectionStatus("disconnected");
            setTimeout(MQTTconnect, reconnectTimeout);  // Attempt to reconnect
        }
    };
    mqtt.connect(options);
}

window.onload = function() {
    MQTTconnect();
}

Handling Incoming Messages

When messages arrive, we process the data and update the chart. We also update the connection dot to pulse briefly, indicating new data has been received.

let lastUpdate = Date.now();  // Initialize to current time
let firstUpdate = true;  // Flag to ensure first update happens immediately

let maxWindSpeed = 0;
let maxTemp = -Infinity;
let minTemp = Infinity;
let maxPressure = -Infinity;
let minPressure = Infinity;

function updateWindSpeed(windSpeed, timestamp) {
    weatherChart.data .labels.push(timestamp);
    weatherChart.data.datasets[0].data.push(windSpeed);

    // Update max wind speed
    if (windSpeed > maxWindSpeed) {
        maxWindSpeed = windSpeed;
        document.getElementById('maxWindSpeed').innerText = `Max Wind Speed: ${maxWindSpeed} mph`;
    }

    // Limit the number of data points to keep the chart responsive
    if (weatherChart.data.labels.length > 1440) { // Assuming 1 data point per minute, keep 24 hours of data
        weatherChart.data.labels.shift();
        weatherChart.data.datasets[0].data.shift();
    }

    weatherChart.update();
}

function updateOtherMetrics(temperature, solarRadiation, rainAmount, pressure, timestamp) {
    weatherChart.data.datasets[1].data.push({x: timestamp, y: temperature});
    weatherChart.data.datasets[2].data.push({x: timestamp, y: solarRadiation});
    weatherChart.data.datasets[3].data.push({x: timestamp, y: rainAmount > 0 ? rainAmount : null});
    weatherChart.data.datasets[4].data.push({x: timestamp, y: pressure});

    // Update max and min temperature
    if (temperature > maxTemp) {
        maxTemp = temperature;
        document.getElementById('maxTemp').innerText = `Max Temperature: ${maxTemp} °C`;
    }
    if (temperature < minTemp) { minTemp = temperature; document.getElementById('minTemp').innerText = `Min Temperature: ${minTemp} °C`; } // Update max and min pressure if (pressure > maxPressure) {
        maxPressure = pressure;
        document.getElementById('maxPressure').innerText = `Max Pressure: ${maxPressure} mbar`;
    }
    if (pressure < minPressure) { minPressure = pressure; document.getElementById('minPressure').innerText = `Min Pressure: ${minPressure} mbar`; } // Limit the number of data points to keep the chart responsive if (weatherChart.data.labels.length > 1440) { // Assuming 1 data point per minute, keep 24 hours of data
        weatherChart.data.datasets[1].data.shift();
        weatherChart.data.datasets[2].data.shift();
        weatherChart.data.datasets[3].data.shift();
        weatherChart.data.datasets[4].data.shift();
    }

    weatherChart.update();
}

function updateForecast(forecast) {
    document.getElementById('forecast').innerText = `Forecast: ${forecast}`;
}

function onMessageArrived(message) {
    console.log("Message Arrived: " + message.destinationName + " : " + message.payloadString);
    if (message.destinationName === "personal/ucfnaps/downhamweather/loop") {
        const data = JSON.parse(message.payloadString);
        const windSpeed = data['windSpeed_mph'];  // Adjust this key according to your data structure
        const temperature = data['outTemp_C'];  // Adjust this key according to your data structure
        const solarRadiation = data['radiation_Wpm2'];  // Adjust this key according to your data structure
        const rainAmount = data['dayRain_mm'];  // Adjust this key according to your data structure
        const pressure = data['pressure_mbar'];  // Adjust this key according to your data structure

        const nowTimestamp = new Date();

        // Update wind speed every time
        updateWindSpeed(windSpeed, nowTimestamp);

        if (firstUpdate || Date.now() - lastUpdate >= 60000) {
            // Update other metrics every minute
            updateOtherMetrics(temperature, solarRadiation, rainAmount, pressure, nowTimestamp);
            lastUpdate = Date.now();
            firstUpdate = false;  // Ensure subsequent updates follow the interval
        }

        // Pulse the dot when new data arrives
        pulseDot();
    } else if (message.destinationName === "personal/ucfnaps/eink/met") {
        const forecast = message.payloadString;
        updateForecast(forecast);
    }
}

Chart.js Setup

Now, let’s configure Chart.js to visualize the weather data. We will use multiple datasets to display wind speed, temperature, solar radiation, rain amount, and pressure.

// Chart.js setup
const ctx = document.getElementById('weatherChart').getContext('2d');
const weatherChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [],  // Time labels
        datasets: [{
            label: 'Wind Speed (mph)',
            data: [],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 3,
            fill: false,
            yAxisID: 'y-axis-1',
            tension: 0.1
        },
        {
            label: 'Temperature (°C)',
            data: [],
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 3,
            fill: false,
            yAxisID: 'y-axis-2',
            tension: 0.1
        },
        {
            label: 'Solar Radiation (W/m²)',
            data: [],
            borderColor: 'rgba(255, 206, 86, 1)',
            borderWidth: 3,
            fill: false,
            yAxisID: 'y-axis-3',
            tension: 0.1
        },
        {
            label: 'Rain Amount (mm)',
            data: [],
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 3,
            fill: false,
            yAxisID: 'y-axis-4',
            tension: 0.1
        },
        {
            label: 'Pressure (mbar)',
            data: [],
            borderColor: 'rgba(153, 102, 255, 1)',
            borderWidth: 3,
            fill: false,
            yAxisID: 'y-axis-5',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Live Weather Data'
            },
            decimation: {
                enabled: true,
                algorithm: 'lttb',
                samples: 100,  // Adjust this value as needed for performance
            },
        },
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'minute'
                },
                title: {
                    display: true,
                    text: 'Time'
                }
            },
            'y-axis-1': {
                type: 'linear',
                position: 'left',
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Wind Speed (mph)'
                }
            },
            'y-axis-2': {
                type: 'linear',
                position: 'right',
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Temperature (°C)'
                },
                grid: {
                    drawOnChartArea: false
                }
            },
            'y-axis-3': {
                type: 'linear',
                position: 'right',
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Solar Radiation (W/m²)'
                },
                grid: {
                    drawOnChartArea: false
                }
            },
            'y-axis-4': {
                type: 'linear',
                position: 'right',
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Rain Amount (mm)'
                },
                grid: {
                    drawOnChartArea: false
                }
            },
            'y-axis-5': {
                type: 'linear',
                position: 'right',
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Pressure (mbar)'
                },
                grid: {
                    drawOnChartArea: false
                }
            }
        },
        interaction: {
            intersect: false,
            mode: 'nearest',
        },
        elements: {
            line: {
                cubicInterpolationMode: 'monotone',
            },
        },
    }
});

Conclusion

By integrating MQTT and Chart.js, it is possible to create a dynamic and real-time weather monitoring dashboard. The connection status indicator provides immediate feedback on the connection state, and the pulsing effect when new data arrives enhances user experience by visually notifying them of updates.

This setup can be further extended by adding more datasets, customizing the chart’s appearance, or integrating additional sensors. The data of course couple be from any feed, but real-time weather monitoring provides a good example of how IoT and web technologies can be combined to create realtime dashboards.

The post Enhancing Live Weather Monitoring with MQTT and Chart.js appeared first on Digital Urban.

The YouTube clip below details the collection so far (Spring 2021):

Each of these objects will be explored further and made available to print, insert into 3D worlds and view online. One such example is our ‘THE’ – Time, Headlines and Environmental Data.

We have a full tutorial on making a ‘THE’ over at Connected Environments. A more recent addition is the ability to upload models to SketchFab and make them available to download.

SketchFab also allows models to be embed and viewed directly within a web browser – below is an example of our 3D Printed Barograph, using realtime data feeds combined with more traditional paper and ink to recreate the Barograph – click ‘Play’ to view the model in 3D.

We will be posting more about the Spring 2021 collection in the coming weeks. Its been a while since our last post over here on Digital Urban, it is good to be back.

The post IoT 3D Printable Devices – The Spring 2021 Collection appeared first on Digital Urban.

Luctus fermentum commodo

Nulla sed mi leo, sit amet molestie nulla. Phasellus lobortis blandit ipsum, at adipiscing eros porta quis. Phasellus in nisi ipsum, quis dapibus magna. Phasellus odio dolor, pretium sit amet aliquam a, gravida eget dui. Pellentesque eu ipsum et quam faucibus scelerisque vitae ut ligula. Ut luctus fermentum commodo. Mauris eget justo turpis, eget fringilla mi. Duis lobortis cursus mi vel tristique. Maecenas eu lorem hendrerit neque dapibus cursus id sit amet nisi. Proin rhoncus semper sem nec aliquet.

Nulla facilisi. Vestibulum pretium, dui eu aliquam faucibus, est dui hendrerit nulla, mattis semper turpis mauris eget tellus. Nulla accumsan rutrum nibh, sed eleifend felis blandit.

Integer vel libero arcu, egestas tempor ipsum. Vestibulum id dolor aliquet dolor fringilla ornare. Nunc non massa erat. Vivamus odio sem, rhoncus vel bibendum vitae, euismod a urna. Aliquam erat volutpat. Aenean non lorem arcu. Phasellus in neque nulla, sed sodales ipsum. Morbi a massa sed sapien vulputate lacinia. Vivamus et urna vitae felis malesuada aliquet sit amet et metus.

• Consectetur adipiscing elit vtae elit libero
• Nullam id dolor id eget lacinia odio posuere erat a ante
• Integer posuere erat dapibus posuere velit

Nulla sed mi leo, sit amet molestie nulla. Phasellus lobortis blandit ipsum, at adipiscing eros porta quis. Phasellus in nisi ipsum, quis dapibus magna. Phasellus odio dolor, pretium sit amet aliquam a, gravida eget dui. Pellentesque eu ipsum et quam faucibus scelerisque vitae ut ligula. Ut luctus fermentum commodo. Mauris eget justo turpis, eget fringilla mi. Duis lobortis cursus mi vel tristique. Maecenas eu lorem hendrerit neque dapibus cursus id sit amet nisi. Proin rhoncus semper sem nec aliquet. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.

.some-style {
width: 960px;
height: 200px;
margin: 0 auto;
background-color: #000000;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non enim ut enim fringilla adipiscing id in lorem. Quisque aliquet neque vitae lectus tempus consectetur. Aliquam erat volutpat. Nunc eu nibh nulla, id cursus arcu.
 

The post The Field appeared first on Digital Urban.