UI Mockups

UI Mockups

Overview

This page is dedicated to showcasing the UI mockups for the Wildfire Visualization Platform. These mockups are part of the design process and serve as a visual guide to understand the layout, structure, and user experience of the platform.

Main Page Mockup

Description

The main page of the Wildfire Visualization Platform is designed to support wildfire management and analysis. It provides users with an interface to visualize historical wildfire data and synthetic simulations through 2D maps and time-lapse animations. The initial screen presents a base layer map with no active data layers, a sidebar listing available datasets, and controls for dataset filtering and timeline navigation.

The interface features:

• Map Display Area: Covers the center of the screen, initially showing a global or national map.
• Sidebar for Dataset Management: Allows users to view and select datasets, with search and filtering options based on name, date, and geographic region.
• Timeline Controls: Allows users to navigate wildfire data over time, with options to play, pause, and adjust playback speed.
• Layer Controls: Users can toggle data layers, such as satellite imagery, fire perimeters, and weather conditions.

Mockup Image

Key Elements

1. Map Visualization:

   • Displays 2D map layers, including satellite imagery, meteorological data, and topographical information.
   • Allows users to zoom, pan, and toggle between different data layers.

2. Dataset Sidebar:

   • Lists available datasets with details (e.g., name, date, type, and bounding box).
   • Allows sorting, searching, and filtering based on the current map view.

3. Timeline Navigation:

   • Enables users to observe wildfire progression over time.
   • Features play, pause, stop, and speed adjustment controls for time-lapse animation.
   • Users can interact with the timeline to move to specific time points.

4. Simulation Controls:

   • For synthetic wildfire simulations, users can select parameters like wind direction, temperature, and humidity.
   • Allows starting, pausing, and stopping simulations with real-time visualization.

Next Steps

• Collect feedback and make necessary adjustments to improve the design.
• Develop mockups for additional pages, such as simulation setup, detailed statistics, and user settings.

UI Updates

Recent Enhancements

We have updated the UI based on user feedback and improved requirements for a better user experience. Below are the recent additions and changes implemented in the Wildfire Visualization Platform:

Key UI Enhancements

• Full-Screen Button: Added a full-screen button. This is already an integrated feature of OpenLayers.
• Collapsible Sidebars: Each sidebar, including Metadata, Available Datasets, and Views, now has arrows for collapsing and expanding. This allows users to maximize their viewing area by hiding panels as needed.
• Updated Color Scheme: We adopted the CRIM theme colors, featuring blue and grey, to enhance visual coherence and readability.

New Control Buttons

We refactored and expanded the settings buttons for improved functionality:

1. Endpoint Button: Opens a pop-up window for adding new endpoints. Users can view the current state and details of previously added endpoints within this dialog.
2. Language Selection: A dedicated button now allows users to choose between English and French, improving accessibility for bilingual users.
3. Reset Button: This button is now split into two functions:
   • Factory Reset: Completely resets the application, including deletion of all data, simulation configurations, and configuration files, starting the app fresh. A confirmation message ensures that users are certain before proceeding.
   • Standard Reset: Clears only cached data and simulation configurations but retains the primary application settings.

Updated Mockups

The following mockup images illustrate these UI enhancements:

1. Refactored Dashboard
   

2. Endpoint Prompt Popup
   

3. Language Selection
   

4. Reset Settings Function
   

5. Collapsed Sidebars Dashboard
   

---

UI Updates – Weather Assets on Timestamp Slider

The following mock-ups illustrate the updated behavior and flow for accessing Weather Assets via the timestamp slider:

1. Default View (Normal State)
   Initial timestamp slider view with no interaction.
   

2. On Hover
   Hovering over the timestamp slider reveals a new interaction element.
   

3. "Load Weather Assets" Button Appears
   A button becomes visible to allow users to load weather data.
   

4. User Clicks "Load Weather Assets" Button
   Initiates the weather asset loading process.
   

5. Loading State (Weather Assets)
   Visual feedback while weather data is being fetched.
   

6. Weather Assets Begin to Appear
   Initial weather asset layers start populating on the map.
   

7. Weather Assets Fully Loaded
   All weather assets for the selected timestamp are now visible.
   

8. User Clicks on a Weather Asset — Asset Appears in the Layer Panel
   Selected asset is added to the active layer list for user interaction.