media mapper mobile iteration #10 –updated mockups · 2. the mockups in this slide set provide...

24
1 Media Mapper Mobile Iteration #10 – updated mockups Topic Page Quick Overview 2 What Does MMM Do? (diagram) 3 Startup and Home Screens 4 Home > GPS Details & Point of Interest screen 5 Home > GPS Details & Point of Interest > buttons 6 Home > Setup > GPS screen and pop-up windows 7-12 Home > Setup > Proj screen 13 Home > Setup > Log screen 14 Home > Setup > Camera screen and pop-up windows 15-17 Home > Setup > Intervalometry and pop-up windows 18 Home > Setup > Google Earth screen and pop-up windows 18-20 Home > Project Collection screen 21 Home > Project Collection > Collection Details 22 Home > Project Collection > Select Category 23 Home > Photos, Videos, and Audio screen 24 By Martha Roden November 14, 2013 = new or changed mockups

Upload: others

Post on 16-Aug-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

1

Media Mapper Mobile

Iteration #10 – updated mockups

Topic Page

Quick Overview 2

What Does MMM Do? (diagram) 3

Startup and Home Screens 4

Home > GPS Details & Point of Interest screen 5

Home > GPS Details & Point of Interest > buttons 6

Home > Setup > GPS screen and pop-up windows 7-12

Home > Setup > Proj screen 13

Home > Setup > Log screen 14

Home > Setup > Camera screen and pop-up windows 15-17

Home > Setup > Intervalometry and pop-up windows 18

Home > Setup > Google Earth screen and pop-up windows 18-20

Home > Project Collection screen 21

Home > Project Collection > Collection Details 22

Home > Project Collection > Select Category 23

Home > Photos, Videos, and Audio screen 24

By Martha RodenNovember 14, 2013

= new or changed mockups

Page 2: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

2

1. After viewing the screens, I recommend the following – which I have implemented in the mockups:

a. Use a layout different from than large rectangular buttons (“main menu items”) for a fresher, more modern appearance.

b. Use icons for main menu items to call attention to them and make them look clickable.

c. Develop a color scheme for dialogs that “brands” the application as a Red Hen app – red, gray, black, white.

d. Left-align labels, align all text entry fields, and align pull-down menus for a less cluttered look.

e. Improve task flow where possible so users can perform their tasks faster.

f. Improve menu items names where necessary.

g. If possible, group tasks into categories and display as many of those categories as possible on the Home screen to help user grasp the wide range of tasks available to them and access them more quickly.

h. Provide pop-up Help screens when there is not room for explanatory text in a readable font.

My initial UI evaluation examined the home screen and all screens accessed by the large buttons on that screen (and by large buttons on the Task screen), as well as screens accessed from the expanded menu produced by the ellipses at the bottom of the screen.

2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

Home screen

GPS Details & Point of Interest screen

Setup screen with all its various tabs

Project collection screens

3. The mockups also give you an idea how we might group tasks associated with photos and videos.

Quick Overview

Page 3: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

3

Media Mapper Mobile(MMM)

Capture

Transfer

Share

Re

ceiv

e

Point of Interest

Audio Notes Photos Field Forms Sensor Data

Web Browser

Laser Range Finder

Google Earth PC

Email

Files

Bluetooth

Bluetooth

Upload photos, videos, audio notes

Upload KMZ files and GPS track logs

Upload photos

Transfer files via USB

3G/4G WiFi Send emails

3G/4G WiFi

Connect to MMMand download files to PC

Videos

Co

ntro

l

DSLR CameraBlue2CAN

Download photosvia USB OTG

MediaMapper Server

What Does MediaMapper Mobile Do?

Internal GPS

GPS Track Logs

Social Media and Others

3G/4G WiFi

3G/4G WiFiExternal GPS

Page 4: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

4

Experts in Geo-Tagged Multimedia

Media Mapper Mobile

Turn on the mobile device and go the the Apps screen; click the Media Mapper Mobile icon.

The MMM Home page appears.1 2

APPS WIDGETS

Startup and Home screens

Media Mapper Mobile

GPS Details & Points of Interest

Setup

Track Logs

Photos, Videos, and Audio

Project Collection

Forms

External Camera Control

About

Help

Home

Page 5: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

5

GPS Details & Points of Interest

Home > GPS Details & Points of Interest

Media Mapper Mobile

UTC Time: 20:56:10 09/12/02013

Latitude: 34.428196683S

Longitude: 150.86232198E

Altitude: 20.1m

Click to log Point of Interest:

Satellite Signals Track Log

3 4

5

Satellite Details window appears (see page 6)

Track Log Details window appears (see page 6)

Loud beep is heard and point of interest is logged.

Collection Details

Record Audio

Day/Night Mode

POI

Page 6: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

6

Satellite Details

Device #1

Device #2

Device #3

Close

GPS Fix: 2D

Satellites in View: 09

Satellites in Use: 07

Accuracy:

Signal Strength:

H V10

0P

27 29

0014

2918 20 29 27

Track Log Details

Device #1

Device #2

Device #3

Cancel

User/Collector Initials:

Country Code:

Track Log ID:

File Name:

Folder:

OK

3 4

NOTE: The bottom of GPS Details & Points of Interest screen expands to display keyboard.

Home > GPS Details & Points of Interest > buttons

View All Track LogsView Track Logs window appears with list of track logs to choose from.

Page 7: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

7

Media Mapper Mobile

GPS, Bluetooth, and Services

Use External Bluetooth GPS

GPS Device:

Status:

Connect to Blue2Can

Status:

Connect to Bluetooth CAN

Status:

Connect to Laser Range Finder

LRF:

Status:

Connect to HTTP Web Server

Port Number:

Status:

Connect to MediaMapper Server

Set Up

Select Setup from Home screen.

Set Up screen appears with GPS tab in the foreground.

1

2

47474

Home > Setup > GPS

Media Mapper Mobile

GPS Details & Points of Interest

Set Up

Track Logs

Photos, Videos, and Audio

Project Collection

Forms

External Camera Control

About

Help

Home

Media Mapper Mobile

GPS Proj Log Camera Intervalometry Google Earth

Configure Server

3Select Devices window appears(see next page)

4

Configure MediaMapper Server window appears(see next page)

Page 8: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

8

3 4

Home > Setup > connection and configuration pop-up windows

Home > Setup > GPS > Configure Server

Add Bluetooth Device Manually

OK Cancel

Select Device

Add Manually

Cancel

GPS, Bluetooth, and Services

Connect to Bluetooth CAN

Status:

Connect to Laser Range Finder

LRF:

Status:

Connect to Server

Port Number:

Status:

Connect to MediaMapper Server

47474

Configure Server

OK

User Name:

Password:

Server:

Port Number:

Work Group:

Allow photos with duplicate GPS

Automatically upload photos to MMS

Prompt before uploading to MMS

Only use WIFI connection

Set image size for upload:

Configure MediaMapper Server

OK Cancel

Home > Setup > GPS > GPS DeviceHome > Setup > GPS > LRF

Available Devices

OK

Device #1

Device #2

Device #3

Enter 17-digit hexadecimal code for Bluetooth device:

(Separate digits by colons, for example, A1:B2:C3:D4:E5:F6)

Press the Help buttons to get more information. See Windows #5, #6, and #7 on the next page.

5Pair Devices

67

Page 9: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

9

3 4

Home > Setup > connection and configuration pop-up windows

Home > Setup > GPS > Configure Server

Add Bluetooth Device Manually

OK Cancel

Select Device

Add Manually

Cancel

GPS, Bluetooth, and Services

Connect to Bluetooth CAN

Status:

Connect to Laser Range Finder

LRF:

Status:

Connect to Server

Port Number:

Status:

Connect to MediaMapper Server

47474

Configure Server

OK

User Name:

Password:

Server:

Port Number:

Work Group:

Allow photos with duplicate GPS

Automatically upload photos to MMS

Prompt before uploading to MMS

Only use WIFI connection

Set image size for upload:

Configure MediaMapper Server

OK Cancel

Home > Setup > GPS > GPS DeviceHome > Setup > GPS > LRF

Available Devices

OK

Device #1

Device #2

Device #3

Enter 17-digit hexadecimal code for Bluetooth device:

(Separate digits by colons, for example, A1:B2:C3:D4:E5:F6)

Press the Help buttons to get more information. See Windows #5, #6, and #7 on the next page.

5Pair Devices

67

Page 10: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

10

Help screen: Pairing

More About Pairing

If you do not see the device you want to select, it may require pairing. Pairing is the process of identifying an external device to your Android device.

You typically have to pair the device only once, and from then on the Android operating system remembers the paired device.

To determine if pairing is required for use, check the documentation provided by the device manufacturer.

When pairing is required, you must enter a 4-digit pass-key (or PIN number) provided by the manufacturer (usually specified in the documentation).

5a

1. From your Android device (phone or tablet), click Apps.

2. From the Apps screen, select Settings.

a. From the Settings screen, look for the Wireless and Networks category.

b. Beneath that category, make sure that Bluetooth is ON.

3. Select Bluetooth to view the Bluetooth screen.

a. Power on the Bluetooth device and make sure it is located within a few meters of the Android device. Also make sure the Bluetooth and Android devices have charged batteries for extended use.

b. From the Bluetooth screen, press the Android device name until this message appears beneath it: Visible to all nearby Bluetooth Devices.

Close

Scroll down to see the rest(see next page)

Help Screen for “Pair” button.

Page 11: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

11

More About Pairing

Close

4. At the top-right corner of the Bluetooth screen, press Search for Devices.

a. Wait for the name of the Bluetooth device to appear in the list of Available Devices and select it..

b. When prompted, enter the 4-digit pass key for the Bluetooth device.

c. Once the pass key is accepted, the device name will appear in the Paired Devices list. The device is now ready to use with MediaMapper Mobile.

5. If you performed the pairing by originally clicking the Pair button in the Select Device screen, you will be automatically returned to MediaMapper Mobile. Otherwise, manually exit the Android Settings screen and return to MediaMapper Mobile.

6. Use the MediaMapper Mobile Settings screens to select and use the paired Bluetooth device as needed, such as for an external GPS Receiver or Laser Range Finder.

7. Power off the Bluetooth device when you finish using it. Make sure to stop access to the device by unchecking its option in the MediaMapper Mobile Setup screens. This ensures that MediaMapper Mobile does not continue trying to re-establish communication with the Bluetooth device, causes unnecessary battery depletion.

5b

Help screen Pairing (cont’d)

Note: It is possible to change the default name of Bluetooth devices when using the Android device; however, we recommend you leave the device name as is when using Media Mapper Mobile. In some cases this allows Media Mapper Mobile to recognize the type or model of the Bluetooth device with which it is communicating.

Page 12: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

12

Help screens: Add Manually and More About Devices

More About Adding Manually

Close

Some Bluetooth devices do not broadcast their name and address details, in which case you need to add the device address #Manually. This allows you to enter the hexadecimal code for the device.

6

More About Devices

Close

Selecting a device is only required if you want MediaMapper Mobile to communicate with an external GPS unit, Laser Range Finder, or other Android device. Note: Do NOT select a device if you want MediaMapper Mobile to communicate with Blue2Can devices or with a Bluetooth sensor, such as SensorTag..

If you do not see the device you want to select, you may need to add it #Manually or #Pair it.

7

Help Screen for “Add Manually” button.

Help Screen for “Add Devices” screen.

These links take the user to the Add Bluetooth Device Manually screen (this page) and the Android Bluetooth screens (pp. 9-10).

This link takes the user to the Add Bluetooth Device Manually screen (page 8) where the user can actually enter the hexadecimal code.

Page 13: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

13

Media Mapper Mobile

Project Collection

Default Project Collection Definitions

Prompt to save image

Set Up

1

foi_pipeline.xml

Media Mapper Mobile

Home > Setup > Proj

Select Default Project Collection

foi.xml

foi_pipeline.xml

foi_right-of-way.xml

OK Cancel

Press Setup from Home screen. Then press Proj tab

2Select the xml file containing the appropriate feature definitions for the type of data you will be collecting.

GPS Proj Log Camera Intervalometry Google Earth

Page 14: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

14

Media Mapper Mobile

Set Up

Press Setup from Home screen. Then press Log tab.1

Media Mapper Mobile

Home > Setup > Log

Data Logging

Enable GPS NMEA log

Enable GPX log

Enable .RHPROJ

Enable Sensor log

Sensor Frequency:

Sensor Log Frequency:(ms)

Re-create last .RHPROJRecreate last .RHPROJ

Re-create .RHPROJ for last project collection?

Yes NoNormal

999

Sensor Frequency

Fast

Normal

Slow

OK Cancel

Keyboard appears at bottom of screen

2

3

4

GPS Proj Log Camera Intervalometry Google Earth

Page 15: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

15

Media Mapper Mobile

Set Up

Press Setup from Home screen. Then press Camera tab for Camera Settings screen to appear.1

foi.xml

Media Mapper Mobile

Home > Setup > Camera

Camera Settings

Image Quality:(0 – 100)

Image Effects:

Image Size:

Flash Mode:

Focus Mode:

Image White Balance:

Zoom (0-28):

Image Comment:

Image Night Shot Mode

Slide Show Delay

Slide Show Transition

Log Debug Messages

Device Name:

95

None

1280 x 720

Auto

Auto

0

Auto

2

34

56

7

Numbered windows appear on the next page.

3

Lap Dissolve

False

27145659-3CFF-4655-3

8

109

11

GPS Proj Log Camera Intervalometry Google Earth

Page 16: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

16

Image White Balance

OK Cancel

Auto

Custom

Daylight

Incandescent

Fluorescent

Cloudy

Shade

Twilight

Keyboard appears at bottom of screen

Image Effects

OK Cancel

None

Mono

Negative

Aqua

Blackboard

Posterize

Sepia

Solarize

Whiteboard

Image Size

OK Cancel

320 x 240

480 x 480

640 x 480

800 x 600

1024 x 768

1280 x 720

1290 x 960

Flash Mode

OK Cancel

Auto

On

Off

Focus Mode

OK Cancel

Auto

Infinity

2

3

4

5

6

7

Home > Setup > Camera > pop-up windows

Grouped and alphabetized for ease of reading

Grouped and alphabetized for ease of reading

Grouped for ease of reading

Page 17: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

17

Keyboard appears at bottom of screen

Log Debug Messages?

OK Cancel

Yes

No

8

9

11

10

Home > Setup > Camera > pop-up windows (continued)

Keyboard appears at bottom of screen

Slide Show Transition

OK Cancel

Lap Dissolve

Zoom Dissolve

Page 18: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

18

Media Mapper Mobile

Set Up

Press Setup from Home screen.

Then press Sequence tab for Image Sequence Settings screen to appear.

1Media Mapper Mobile

Home > Setup > Intervalometry

Intervalometry Settings

Images can be captured at regular intervals based on time, distance, or speed intervals.

Intervalometry Mode:

Time Interval (sec):

Time to wait between the capture of successive images.

Specify positive, whole seconds only (0, 1, 2, 3, etc.).

Intervals less than 3 seconds will trigger as quickly as device is capable.

5

Time

Intervalometry Mode:

Distance Interval (m):

Distance to move (as measured by GPS) between the capture of successive images.

Specify positive whole meters only (0, 10, 20, 30, etc.).

If you specify an invalid value, a 100 meter interval will be used by default.

An interval less than 10 meters may cause the camera to trigger unreliably due to GPS jitter and inaccuracy.

100

Distance Intervalometry Mode:

Minimum Speed (kph):

Vehicle speed above which images will be captured.

Specify 0 to capture Photo Burst images regardless of speed.

Specify a value greater than 0 to record Photo Burst images only when the device is moving faster than the specified speed.

3

Photo Burst

2Sequence Mode

OK Cancel

Time

Distance

Photo Burst Speed

Based on the Sequence Mode you select, the rest of the Image Sequence Settings screen changes. (as indicated by RED rectangles)

GPS Proj Log Camera Intervalometry Google Earth

Page 19: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

19

Media Mapper Mobile

Set Up

Press Setup from Home screen. T hen press Google Earth tab.Press to get to Help windows (#2-#7). This simplifies the screen.

2

foi.xml

Media Mapper Mobile

Home > Setup > Google Earth

Google Earth Tour Settings

MediaMapper Mobile creates Google Earth Tour kml and kmz files with image sequences, audio, and GPS location details.

Camera Altitude (m):

Camera Tilt (deg):

Fly To Time (sec)

Photo Overlay Altitude: (m)

Photo Overlay Tilt (deg):

Photo Overlay Roll (deg):

Image Direction Method:

11

Keyboard appears at bottom of screen

90

-10

8

0

Bearing

Camera Altitude

Close

Height above the ground (meters) of the tour camera.

Camera Tilt

Close

Tilt angle (degrees) of the tour camera. 90 is look ahead and 0 is look down.

Fly To Time

Close

Time ( seconds) to fly between image sequence photos. Enter a negative value (i.e. -10) to use actual recorded elapsed time,

Photo Overlay Altitude

Close

Height above the ground (meters) of the image sequence photos

Photo Overlay Tilt

Close

Tilt angle ( degrees) of the image sequence photos. 90 is vertical and 0 is horizontal. Leave blank to use actual tilt angle recorded for each image.

Photo Overlay Roll

Close

Roll angle (degrees) of the image sequence photos. 0 is horizontal. Leave blank to use actual roll angle recorded for each image.

1

345

2

3

4

5

6

7

8

76

#8 window appears on next page.

GPS Proj Log Camera Intervalometry Google Earth

Page 20: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

20

Home > Setup > Google Earth > Image Direction Method

Image Direction Method

Close

You can use the GPS Bearing or the device Compass to determine the direction the image sequences photos are facing. Compass can be unreliable when affected by magnetic fields.

Bearing

Compass

8

Page 21: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

21

Select Project Collection.1

The Project Collection screen appears . Each Category Grouping is identified by bold text followed by a table with a white background. Each Category icon appears in a separate table cell.

2

Home > Project Collection screen

Media Mapper Mobile

GPS Details & Points of Interest

Setup

Track Logs

Photos, Videos, and Audio

Project Collection

Forms

External Camera Control

About

Help

Home

Media Mapper Mobile

Project Collection

Encroachments Type

Vegetation Management

Geotechnical & Natural Hazards

Right of Way

Above-Ground facilities

Bell Hole Inspection

Permitting Pics (Env. Conditions)

Construction Pics

Category grouping

Category title

Category icon

Menu options:

•Collection Details

•Start Collection

•Record Audio

•Re-create Last RHPROJ

I recommend using a table format and white background to get category icons and titled to line up better

Page 22: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

22

Collection Details

OK Cancel

User/Collector Initials:

Country Code:

Collection ID:

Collection Name:

Collections:

Prompt to record audio notes.

MER

US

007

Hazards

???

Home > Project Collection > Collection Details

Page 23: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

23

Home > Project Collection > Select Category

Media Mapper Mobile

Mass Movement/Seismic

Flooding

Wild Fire

Erosion

Leaking Product

Select Feature from Category:Geotechnical and Natural Hazards

The screen looks like this once you select a category icon – you see all the features associated with the selected category.

You can then press any of the features to take a photo.

If “Prompt to record audio notes” was earlier checked on the Collection Details screen, you will also be prompted to record an audio note.

Page 24: Media Mapper Mobile Iteration #10 –updated mockups · 2. The mockups in this slide set provide sample screens to demonstrate my ideas. As a starting point, they focus only on the:

24

Select Photos, Videos, and Audio.1

The Photos and Videos screen appears . Each item would have an icon to the left, and when clicked would behave as it does today).

2

Home > Photos, Videos, and Audio screen

Media Mapper Mobile

GPS Details & Points of Interest

Setup

Track Logs

Photos, Videos, and Audio

Project Collection

Forms

External Camera Control

About

Help

Home

Media Mapper Mobile

Photos, Videos, and Audio

Snap a Photo

Capture Photo Sequence

Capture Audio Note

Film Videos

View Photos

View Videos

View Map with Photos & Videos