Surface project - part 13 (Major Demo - Rich Media Map - Introduction)

A major demo application has been required by the supervisor. As the supervisor is on a two-week trip, thus I will have two weeks to accomplish it. The major demo requires to integrate the demos I built previously for an interactive map, and this time they need a more impressive look and feel. Before he left, we briefly discussed the user case for the application and the user interface as well. Below is the picture scripted by the supervisor.

As this time, the scale of the application is large, and the requirements are challenged, thus a detailed application specification and a few backbone applications are necessary to build. This post will record the user case and user interface specification.

Major Demo - Rich Media Map - User case

• user can place a push pin on to the map
• user can view the content inside the push pin by click the pin
• user can import image files into the push pin
• user can import video files into the push pin
• user can import text files into the push pin
• user can add drawing on to the image, which is imported into the push pin
• user can modify the text information, which is imported into the push pin
• user can create a drawing and the drawing should be imported into the push pin automatically after finishing drawing.
• user can create a text information and the text information should be imported into the push pin automatically after finishing typing.
• user can create a video from web camera and the video should be imported into the push pin automatically after finishing recording.
• user can remove any media from the push pin.
• user can assign 5 tags for the push pin, including culture, education, environment, health and other.
• user can set a main tag for the push pin from culture, education, environment, health and other, the appearance of the push pin will be changed.
• user can search the push pins by choosing one of the 4 tags (culture, education, environment, health).
• user can save the push pin as XML file, thus the push pin will be persisted and reusable for other applications.
• user can delete push pins from the map.

Major Demo - Rich Media Map - User interface

• a main panel should displayed when user opens a push pin.
• there should be a sub panel, which contains all the operation buttons, at the bottom of the main panel.
• a file browser should be displayed when user chooses to import a media file.
• the media elements inside the push pin should be layouted as a list.
• user can rearrange the index of any media element by drag and drop the media inside the main panel.
• The switch between view and import mode for the push pin should be an in-place switch.
• The switch between view and drawing mode for the image media should be an in-place switch.
• The switch between view and typing mode for the text media should be an in-place switch.
• The switch between view and recording mode for the video media should be an in-place switch.

Major Demo - Rich Media Map - File browser functionality

• user can go into a directory.
• user can go up to parent directory.
• when user choose to import a media file to the push pin, he can select a media file from the browser.
• file browser is integrated into the push pin panel.

Major Demo - Rich Media Map - Image component functionality

• user can change the view mode into drawing mode.
• in drawing mode, user can select the color of the brush.
• in drawing mode, user can select the thickness of the brush.
• in drawing mode, user can draw on to a canvas by moving fingers.
• in drawing mode, user can erase the drawing.
• in drawing mode, user can save the drawing.

Major Demo - Rich Media Map - Text component functionality

• user can change the view mode into editing mode.
• in editing mode, user can modify the content of the text.
• in editing mode, user can save the modification.

Major Demo - Rich Media Map - Video component functionality

• user can play the video.
• user can pause the video.

Major Demo - Rich Media Map - Video recorder component functionality

• user can preview the video stream from the camera.
• user can start recording the live video.
• user can finish recording the live video.

Additional user interface compromise and solution

compromise: As there is no existing solution to resize the WPF scatter view item in only vertical direction (the default behaviour is scale in both vertically and horizonly), user cannot change the size of the push pin panel.

solution: To achieve an elegant layout, the height of the push pin panel will be controlled programmatically. There will be a fixed width and a maximum height, so that no empty area will be show when the push pin panel only contains small number of media. A scroll bar will appear when the total height of the content exceeds the panel's maximum height.