Custom application for live weather data

Monitoring devices at ports in the United Kingdom gather data on tide height, temperature, wind speed, wind direction, barometric pressure, and other metrics. Ferry and port operators carefully monitor these feeds to ensure the safety of their staff, passengers, and vessels.

The client required a solution which collects weather data from specific ports for display on their public website in interactive, graphical gauges and charts over a 24-hour period, allowing maritime enthusiasts to view live weather data and video feeds of ferries arriving and leaving harbours.

The security and integrity of the monitoring equipment at each harbour was a primary concern, which we tackled from multiple angles, including limits on timeouts, retries and the number of connections to each device.

The final solution was developed 100% in-house, and is one we are particularly proud of, including the brand-integrated, custom user interface, robust and lightweight solution architecture, tight security, and feature-rich administrative dashboard. The solution was delivered on time and within the proposed budget.

User interface features

• Custom design matches the client’s brand identity.
• Animated gauges are modelled after real-world counterparts in the maritime industry for visual familiarity.
• Automatic adjustment for GMT and BST, based on the active time zone with a toggle switch.
• Multilingual support.
• WCAG 2.1 AA accessible.

Technical features

• Purpose-built application integrates seamlessly into the existing CMS.
• Feature-rich and intuitive administrative dashboard allows administrators to add new locations, devices, sensors, and view detailed logs to help troubleshoot errors.
• Security-focused architecture ensures the safety of monitoring devices.
• Multilayer automatic error handler captures, logs, and sends an automated summary reports to administrators.
• User-friendly, customisable error messages are displayed to visitors if data is stale or unavailable.

We used the client’s brand guide to illustrate custom gauges that are familiar to people in the maritime industry, and match the look and feel of their identity.

Animated weather gauges display current weather data (which is accurate within 5 minutes), and interactive charts display current and historical data for tide height, wind speed and barometric pressure. The tidal graph also provides an overlay of predicted tide height.

Data is refreshed frequently behind the scenes, keeping visitors up to date without requiring a page refresh. In the rare instance that data is stale or unavailable, a user-friendly message is overlaid on the gauges to alert users that current data is unavailable.

The design is mobile-responsive, and automatically adjusts to fit desktop, tablet and mobile devices. The UI is multilingual and allows administrators to update text and user messages in the required languages.

Thorough UX, wireframes and design mockups ensured that we were all on the same page during the planning phases. This also helped identify further requirements including:

• maximum duration for each connection (to configure timeouts),
• the age of data until it is considered stale,
• how the frontend and backend scripts should manage and display errors, and
• how to manage time zone changes (since the UK observes daylight savings time).

During the planning phases, we thoroughly researched and tested various APIs, and inspected device configurations and data formats to dispel all assumptions.

To ensure a lightweight and mobile-friendly solution, we chose to illustrate the gauges in SVG format, and used lightweight JSON for data feeds. This provides a small footprint on page load and an even lighter one when data is automatically refreshed at regular intervals.

Video preview of weather gauges animations.