MVP Mockups
Basic wireframes for review

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

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.

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.

Modifying Sequence

Overview

User can view this page when sequence is in processed phase.
User can:

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
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

Integrate

Staff area

Staff area should show:
  • User list (search, details and modify)
  • Plan list (search, details and modify)
  • Sequence list (search, details and modify)
Last modified 10d ago