Surface project - part 23(Rich Media Map - Enhancement)

Spent a day on the enhancement of my rich media map, first version has come out.

1. move import buttons, add image, text, video into pop up panel.

when user click plus button, an additional panel will gracely move from right to left

2. move edit, delete, rearrange button into top operation panel.

3. add color picker to select push pin color

4. add confirmation panel when user click delete item

5. disable text scroll, so the entire length of document will equal to the height of text element

Surface project - part 22(Rich Media Map - Enhancement)

After showing my major demo application to the supervisors, they want more functionalities and more concise user interface. Thus I need to make a lot of enhancement on the existing one.

1. Automatically save push pin, so user does not need to click save button.
2. Automatically save drawing, text, when user tab out.
3. Remove Main tag functionality.
4. Add author information on each pin.
5. Allow user to select push pin color.
6. Remove scroll ability on text element. So the entire length document will shown in each text element
7. Move "add drawing", "add video recorder", "add text", "import file" into a pop up panel, so there will be more space on the operation panel.
8. Move "edit", "delete" button into an individual operation panel on each element.
9. Move "rearrange" button onto the operation panel of each element.
10. Fix any collapsible bugs.

Surface project - part 21(Major Demo - Rich Media Map - The Demo - Part 4)

• Introduction
• Import Media
• Create Media
• Edit Media
• Layout Mode
• Tagging System
• Searching System
• Deleting Mode

Layout Mode

This application also allows user to remove any media from the push pin, and rearrange the media index as well.

When user go into the layout mode, the appearance of the operation bar will be changed

User can start the rearrange action by put two fingers on the element, which they want to drag.

In the layout mode, a deleting mark will appears on the top right corner in every media element.

Tagging System

Tagging system is fully integrated with search system, so that user can search the push pin after they assign one or more tags onto individual push pin. user can click the button indicated below to open the integrated tag browser.

In the tag mode, user can select one main tag and 5 predefined tags.

After changing the main tag, the appearance of the push pin will be changed correspondingly.

Searching System

With the help of tagging system, the application become searching enabled.

Deleting Mode

The last feature of this application is the deleting mode.

Surface project - part 20 (Major Demo - Rich Media Map - The Demo - Part 3)

Introduction

Import Media

Create Media

Edit Media

Layout Mode

Tagging System

Searching System

Deleting Mode

Create Media

As being required by supervisors that they want to let user create drawing, text, video inside the application. Thus, I have implemented these functions and make the media inside the push pin in-place editable.

To creating a drawing, user can click the button indicated below.

A new drawing panel will be added into the push pin, the integrated drawing panel supports several features, including, color picker, stroke thickness slider, eraser and saving.

To creating a video from web camera, user can click the button indicated below

An integrated video recorder will be added into the push pin. After making the video, the video will be automatically imported into the push pin.

To creating a text media, user can click the button indicated below

A simple text box will be added into the push pin.

Edit Media

To make the application as elegant as possible, I implement the function to edit the media inside the push pin. For image and text media, a in-place editor has been implemented.

Surface project - part 19 (Major Demo - Rich Media Map - The Demo - Part 2)

Introduction

Import Media

Create Media

Edit Media

Layout Mode

Tagging System

Searching System

Deleting Mode

Import Media

For user who plays with the interactive map, he would need to import some media through the local file system. The button, which arounded with a red border shows below, will let user import file through integrated file browser.

The integrated file browser support several features. It can let user preview image, recognise video extension as well as text file.

Let's see the effect of image preview.

User can select any supported image file from the file browser, and the browser will automatically import the media into the push pin.

With the same procedure, user can import video media.

With the same procedure, user can import text media.

Surface project - part 18 (Major Demo - Rich Media Map - The Demo - Part 1)

Ok, finally, I have accomplished the major demo application. And fulfil all the functionalities and user interface requirements. As the features of the application are rich, thus I have to separate this post into several parts.

• Introduction
• Import Media
• Create Media
• Edit Media
• Layout Mode
• Tagging System
• Searching System
• Deleting Mode

Introduction

When users open the application, they will find a map with Groote Island at the centre. There is a operation bar near the bottom area.

Each button are the operation bar has its meaning. For left to right, the first button is to clear the screen, when users open too many push pin then they can close all the push pin panel instead of doing it one by one.

The second button is to save the push pins into a XML file, which persists all the information I need to recreate all the push pin when the application runs again.

The third button is to go to deleting mode, which disable all the other operation and allow users to remove push pin from the map ( we will see this action in later stage)

The 4 buttons besides the deleting mode button is for searching purpose. user can search push pin based on 4 predefined tags, which can be assigned to individual push pin (we will see this action in later stage)

User can long press any point on the map to put a pus pin onto the map.

After putting a new push pin, user can click the push pin, and the push pin panel will be displayed. For a push pin contains no media, the only visible part is the push pin operation bar. For detailed description for the push pin operation bar, I will do it from next post.

Surface project - part 17 (Major Demo - Rich Media Map - Animation)

It will be interesting to see some animation inside the demo. I have found one place to demonstrate it. When user searches the push pin based on tag information, an animating ellipse will be displayed around matched push pins. WPF provide three animation class, DoubleAnimation, ColorAnimation and PointAnimation.

To implement the animation on the ellipse is not quite straightforward, as if you attach the color animation on the ellipse to change color of the stroke, then you will receive exception says that color cannot apply to brush.

The solution is to attach the color animation on the stroke of the ellipse.

Following code shows how to attach color animation on ellipse's stroke.

ColorAnimation cAnimation = new ColorAnimation();
            cAnimation.From = Colors.Red;
            cAnimation.To = Colors.Green;
            cAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
 
            cAnimation.AutoReverse = true;
            cAnimation.RepeatBehavior = RepeatBehavior.Forever;
            string name = GetUniqueName();
            Mediator.TheWindow.RegisterName(name, ellipseborder);
            myStoryboard.Children.Add(cAnimation);
            Storyboard.SetTargetName(cAnimation, name);
            Storyboard.SetTargetProperty(cAnimation, new PropertyPath(SolidColorBrush.ColorProperty));

Following snaps show the effect of the ellipse around the push pin.

The color of the stroke of the ellipse is changing from red to green.