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.

Feedback

Feel free to add comments, suggestions, or feedback to this page by editing the wiki or creating an issue in the repository.