MVP Mockups

Source file for mockups
https://docs.google.com/presentation/d/1RUeXMMxZ73MP5yx6NH8U76Jsq4RCFvZ5gJxKCQxa6Fs/edit
UI
For development simplicity, we use a simple bootstrap v5 template: https://django-bootstrap-v5.readthedocs.io/en/latest/​
​
Public pages
Unauthenticated index page just shows map view popup message. 
To upload, user must login / sign up. 
Else show user map view to browse with filters
On public sequence view user can filter by
Date (to / from)
Transport type (parent - child)
Distance (meters min / max)
Time (secs min / max) 
Title / description (text search)
Tags (multi select auto correct)
Camera model (GoPro Fusion, GoPro MAX)
Is 360 / equirectangular (TRUE/FALSE)
Is uploaded to integration
Username (text search)
Tour name (text search)
When filter applied sequence disappears.
When point on the map click, show thumbnail image and sequence details:
Thumbnail
Title/description fields
Capture date
Usernames
Transport type parent
Transport type child
Tags
Is 360?
Count of photos
Distance in kilometers 
Time in seconds
Date of first image in sequence
Link to view/edit (or show processing)
Only if viewed by owner
Any integrations (if in in processing or complete state)
And link to integration
If user clicks point map that is uploaded to Mapillary, we will show Mapillary JS pop up. User can minimise (hide) this, or expand to full screen view.
Note it is possible multiple GPS (lat,lon) positions could be identical for 2 points. Although very unlikely. Even so, we should show all Sequence photos / Sequence info the belongs to that position.
Entering fullscreen Mapillary JS view will apply filter mapillary=true.
User can then browse using arrows in Mapillary JS, or use the map popup in bottom to navigate through filtered sequences.
Note, because user can browse non Explorer images in Mapillary JS, if they view non-explorer image, we should show "This sequence does not exist on Explorer. Please use the map view to find an Explorer sequence".
User can also toggle to list view (instead of map).
Toggling filter keeps same filters applied.
Each sequence card shows (list view)
Map (with sequence images plotted)
Elevation profile
Title/description fields
Capture date
Transport type parent
Transport type child
Is 360?
Count of photos
Tags
Distance in kilometers 
Time in seconds
Date of first image in sequence
Link to view/edit (or show processing)
Only if viewed by owner
Any integrations (if in in processing or complete state)
And link to integration
​Filters identical to sequence management.​
User management/auth
We allow for login/sign up using Google social login.
If user already has account when authenticating, they will be redirected to My Sequence page, else if no account the registration page.
To register user must enter username (unique) between 7-20 chars (A-Z,1-9,"-").
User can also select to have email submitted to mailing list (mailerlite).
In some cases user might already be logged into Google account / Facebook account which is not the same one as they used to create an account with (e.g. work vs personal Google account). Therefore we should also make this clear, so user can go back, log into right Google account in Google, and reauthenticate.
User cannot modify their username or email (it is linked to Google/Facebook) but we should show them what info we hold.
View should also show a summary of aggregated sequence stats.
User can also modify if they are subscribed to mailing list. If their email is currently subscribed should show as ticked. By unticking will unsubscribe user, by ticking will subscribe user.
​User can also completely delete their account in this view (with confirmation).​
Sequence management
Showing an example of Sequence that can be edited as in processed state and view only due to being in locked state.
On user sequence view user can filter by
Date (to / from)
Transport type (parent - child)
Distance (meters min / max)
Time (secs min / max) 
Title / description (text search)
Tags (multi select)
Camera model (GoPro Fusion, GoPro MAX)
Is 360 / equirectangular (TRUE/FALSE)
Is uploaded to integration
Username
Each sequence card shows (list view)
Map (with sequence images plotted)
Elevation profile
Title/description fields
Capture date
Transport type parent
Transport type child
Is 360?
Count of photos
Tags
Distance in kilometers 
Time in seconds
Date of first image in sequence
Link to view/edit (or show processing)
Any integrations (if in in processing or complete state)
And link to integration
Showing an example of Sequence that cannot be edited due to it being in processed state and view only due to being in locked state.
Like in public view, owner should also be able to toggle their sequence to show map view (with only their sequences)
Uploading a Sequence
User must first enter sequence information.
name. Required. 140 chars max. 10 chars min. No special chars.
description. Optional. 280 chars. No special chars.
transport type. Required. Dropdown selection.
parent (e.g. water)
child (e.g boat)
User should also see message below dropdown 
tags. Optional. Max 30 chars. A-Z,1-9,and "-"
User should also see message "Explorer is a place for off-road imagery. Any imagery uploaded that is captured by a car and designed for surveying larger sections of roadway is a breach of our terms and your account suspended. If you want to upload imagery of roadways captured by a car, please use another service like Mapillary or Street View instead. Thanks for your understanding!"
If upload fails at any point they will be redirected to this page with content pre-filled based on previous selections.
​When file entered it goes through a set of validations before upload starts.
​
​User should only see success message if all pre-processing validation critical checks pass, else error.

If non-critical checks fail, show appropriate options to user.  
Modifying Sequence
Overview
User can view this page when sequence is in processed phase.
​In the map view, the current image precedent for sequence is shown.
User can:
reset to original images (makes all images ACTIVE and raw directory)
[UPGRADE NEEDED] remove nadir (if exists) - just set image precedent to raw directory (equirectangular only)
[UPGRADE NEEDED] Add nadir (or new one if already exists) (equirectangular only)
[UPGRADE NEEDED] Modify photos 
Change tour metadata (name, desc...)
​Delete Sequence​
Modify image spacing [UPGRADE NEEDED]
In this view a user can choose between spacing in meters of by time. The function is described here.
As user changes slider, that map auto updates to show photos that match the new spacing filter.
If user clicks any photo in map it shows a popup with Pannellum 360 viewer (for equirectangular) or photo viewer showing that photo (this view already exists in MTPU -- where screenshot above was taken from). It also shows information about the photo selected:
time
lat
lon
elevation
distance to next photo
time to next photo
​When in this view, user can also select to delete a photo.
User also has front and back navigational toggles to move to next ACTIVE photo in the sequence.
If user does not confirm changes, or abandons modification before confirming changes, any changes will be lost (user will be warned).
Add a nadir (equirectangular Sequences only) [UPGRADE NEEDED]
Here a user can select a square png file to be used as a nadir. Staff also should be able to maintain a library of nadir files a user can select to use (instead of their own). Nadir logo requirements are defined here.
Media server processes nadir onto first image in sequence so that use can preview what it looks like in Panellum 360 viewer.
User can choose size of nadir using a slider which changes the preview image loaded in Pannellum. User can select values in 1% increments described here​
Because nadir need some time to be processed onto all Sequence images (is in processing mode) we should make it clear to the user once they confirm nadir addition.
Publish
Once user is happy with modification, they can publish the sequence. This will stop them from editing any of the sequence information (it enters locked state), but they can now:
Upload to an integration
download GPX
download final images
download final video
​Delete Sequence​
Integrate
​User will perform OAuth flow to Mapillary or Street View (Google) as defined in each integration.
​Against each integration shows the status of the upload to the integrations.​
Staff area
Staff area should show:
User list (search, details and modify)
Plan list (search, details and modify)
Sequence list (search, details and modify)