CS3240 Human-Computer Interaction Lab Sheet Lab Session 4 Media, Ink, & Deep Zoom

Size: px

Start display at page:

Download "CS3240 Human-Computer Interaction Lab Sheet Lab Session 4 Media, Ink, & Deep Zoom"

Shanon Williamson
5 years ago
Views:

1 CS3240 Human-Computer Interaction Lab Sheet Lab Session 4 Media, Ink, & Deep Zoom CS3240 Lab SEM /2010 Page 1

2 Overview In this lab, you will get familiarized with interactive media elements such as the MediaElement control, which is useful when manipulating video objects being embedded on the Silverlight application, and MultiScaleImage control, which is useful when displaying large image files which require a long time to download in order to display. Displaying video on the browser using MediaElement Control The MediaElement control is a very useful and easy to pick up control which can be really powerful if you make good use of it. It has many advanced features. Let s get started: 1. Open Microsoft Expression Blend 3, create a new Silverlight 3 Application + Website project as usual, and save it to a folder called tutorial4_media Set the [UserControl] and LayoutRoot layer s property width and height to 640px and 360px respectively. 2. Now, place a video file into the tutorial4_media\ tutorial4_media folder. Name the video file as samplevid (See figure 1) Figure 1: Place the samplevid file into the folder shown above For my case, my video file is a Windows Media Video file, so the extension is.wmv thus I will be referring to it as samplevid.wmv you should know your own video s file type. CS3240 Lab SEM /2010 Page 2

The following shows the list of video file types which can be supported by the MediaElement control: WMV1: Windows Media Video 7 WMV2: Windows Media Video 8 WMV3: Windows Media Video 9 WMVA:

Right click on the tutorial4_media which is located under the Project panel, under Solution tutorial4_media > select Add Existing Item (See figure 2) Figure 2: Select to add an existing item

3 The following shows the list of video file types which can be supported by the MediaElement control: WMV1: Windows Media Video 7 WMV2: Windows Media Video 8 WMV3: Windows Media Video 9 WMVA: Windows Media Video Advanced Profile, non VC 1 WMVC1: Windows Media Video Advanced Profile, VC 1 3. Right click on the tutorial4_media which is located under the Project panel, under Solution tutorial4_media > select Add Existing Item (See figure 2) Figure 2: Select to add an existing item to the project 4. Browse to the folder directory where you store the samplevid file and select it. After selection, you will see it appearing on your project panel (See figure 3) Figure 3: After selection, the video file will be shown on the Project panel CS3240 Lab SEM /2010 Page 3

5. Go to the Assets panel to drag a MediaElement control and drop it on the design surface. Name it as vid.

360px respectively. (See figure 4) Figure 4: Set the width and height to 640 and 360 respectively 6.

samplevid video file that you have added just now.

4 5. Go to the Assets panel to drag a MediaElement control and drop it on the design surface. Name it as vid. Click on it on the Object and Timeline panel, go to Properties panel and change its width and height to 640px and 360px respectively. (See figure 4) Figure 4: Set the width and height to 640 and 360 respectively 6. Now select the MediaElement and go to the Properties panel, under the Media section, select the Source to be the samplevid video file that you have added just now. (See figure 5) Figure 5: Select the Source to be the samplevid video file 7. Now press F5 to view the video on the browser (See figure 6) Figure 6: Viewing the video from the browser CS3240 Lab SEM /2010 Page 4

5 Creating basic video controls using MediaElement Control The basic controls for video are Play, Stop, and Pause. When you set the AutoPlay property of the MediaElement to false, these controls are necessary to start playing the video. Well, even if the AutoPlay property is set to true and the video starts playing automatically once user enter the page, the Stop and Pause control is still useful. 1. Continuing from the previous step, now use the Rectangle tool to create a rectangle of width 640px and height 35px, place it at the bottom of the MediaElement control. (See figure 7) Figure 7: See that the rectangle is placed at the bottom of the MediaElement control. 2. Now, create a TextBlock with width 91px and height 15px. Duplicate it so that there are three copies of it on the design surface; align them to have around 91px gap in between each other. Rename the TextBlock to Play, Stop, and Pause respectively, and set the Cursor value to Hand (See figure 8) Figure 8: Align the TextBlock & rename them accordingly to the figure shown above CS3240 Lab SEM /2010 Page 5

6 3. Now change the color of the rectangle to Black and under the Appearance panel, set its opacity to 50% ; and set the color of all the 3 TextBlocks to White. 4. Press F5 to view on browser. The design of the basic video controls is done, but it doesn t work yet because there is no event handler to handle the codes yet. Save the file. 5. Open the tutorial4_media solution in Microsoft Visual Studio 2008 now and open to edit the MainPage.xaml file. 6. Add in the following underlined codes to make use of the event handler to handle the Play, Stop, and Pause options provided for the video. <TextBlock MouseLeftButtonDown="doPlay" Text="Play" Height="15" HorizontalAlignment="Left" Margin="91,0,0,8" VerticalAlignment="Bottom" Width="91" TextAlignment="Center" TextWrapping="Wrap" Foreground="White" FontWeight="Bold" Cursor="Hand"/> <TextBlock MouseLeftButtonDown="doStop" Text="Stop" Height="15" Margin="273,0,276,8" VerticalAlignment="Bottom" TextAlignment="Center" TextWrapping="Wrap" FontWeight="Bold" Foreground="White" Cursor="Hand"/> <TextBlock MouseLeftButtonDown="doPause" Text="Pause" Height="15" HorizontalAlignment="Right" Margin="0,0,91,8" VerticalAlignment="Bottom" Width="91" TextAlignment="Center" TextWrapping="Wrap" FontWeight="Bold" Foreground="White" Cursor="Hand"/> 7. Now that you have the doplay, dostop, and dopause event being set in the MouseLeftButtonDown event of the 3 TextBlocks, right click on each of them and select Navigate to Event Handler The following codes should be generated in the MainPage.xaml.cs file after you selected all 3 and go to their event handler: private void doplay(object sender, MouseButtonEventArgs e) private void dostop(object sender, MouseButtonEventArgs e) private void dopause(object sender, MouseButtonEventArgs e) CS3240 Lab SEM /2010 Page 6

7 8. Now let s code the event handler, it is very simple. Just edit the codes according to the following codes: private void doplay(object sender, MouseButtonEventArgs e) vid.play(); private void dostop(object sender, MouseButtonEventArgs e) vid.stop(); private void dopause(object sender, MouseButtonEventArgs e) vid.pause(); 9. Now press F5 and go to the browser to test out the controls that you have created. (See figure 9) Figure 9: The basic video controls are working fine on the browser CS3240 Lab SEM /2010 Page 7

8 Introduction to MultiScaleImage Control Deep Zoom provides to the users a new and unique way to manage images in their applications. It is implemented in XAML by the MultiScaleImage element with which, as its name suggest; it enables the user to control the scale and zoom of your images. With Deep Zoom, users are able to provide super high resolution images on their applications without requiring the application users to download the full image before being able to display it. Creating Metadata using Deep Zoom Composer To create a basic application in which you zoom in and out of images, simply use the MultiScaleImage control and point it at the file that contains metadata about the images. To create the metadata file, use the Deep Zoom Composer, which you can download from the Microsoft Download Center. Let s get started: 1. Go to Start menu > Microsoft Expression > Deep Zoom Composer and open it. (See figure 10) Figure 10: Open the Deep Zoom Composer 2. Select to create a new project, Name it deepzoom_images and store it in the tutorial folder (where you stored all your tutorials so far) CS3240 Lab SEM /2010 Page 8

3. Now that you are in the Import tab, click on the Add image.. button on the right side of the Deep Zoom Composer window (See figure 11) Figure 11: Click on the Add image button 4.

9 3. Now that you are in the Import tab, click on the Add image.. button on the right side of the Deep Zoom Composer window (See figure 11) Figure 11: Click on the Add image button 4. Add three images into it. I have added 3 of the sample images which are there in windows by default (See figure 12) Figure 12: Add 3 images into the Deep Zoom Composer 5. Now, click on the Compose tab. CS3240 Lab SEM /2010 Page 9

Then, for the third image, do the same thing to zoom in and place the image inside the second image.

10 In this tab, it allows users to place and arrange images on the design surface, and then zoom in and out while placing other images. New images are placed at their default resolution at the zoom level 6. Place the first image on the design surface. Zoom in as much as you want and place the second image. Then, for the third image, do the same thing to zoom in and place the image inside the second image. (See figure 13 and 14) Figure 13: The 2nd image is placed inside the 1st image (circled), notice how deep I zoomed into Figure 14: Similarly, the 3rd image is placed inside the 2nd image (circled) 7. After the images are properly arranged, now is the time to move on to the Export tab. Simply make sure that the Custom tab is selected and select the Silverlight Deep Zoom project. Name it as tut4_dz and set the templates option to Blend 3 Behaviors + Source and leave it to be saved at its default location. (See figure 15) CS3240 Lab SEM /2010 Page 10

Figure 15: Set the Export options as according to above Note that if your Export button is grayed out, it means that the total number of pixels that existed in your Deep Zoom image output has

11 Figure 15: Set the Export options as according to above Note that if your Export button is grayed out, it means that the total number of pixels that existed in your Deep Zoom image output has exceeded the maximum of 4 billion pixels, to solve it, simply shrink your image size and import it into the composer again. 8. Click on the Export button and close the window when the exporting is done. CS3240 Lab SEM /2010 Page 11

12 Building a Deep Zoom Project 1. Open Microsoft Visual Studio and create a new project as usual, name the file tutorial4_deepzoom and store it in the same folder as the other tutorials. Click OK when prompted to host the Silverlight application in a new web site. Leave the settings as default. 2. Next, we need to add our exported images from DeepZoom Composer to the web project. Add a new folder under the ClientBin folder on the Web Project and call it GeneratedImages. The ClientBin folder is where the compiled.xap file from your Silverlight will live so this is the easiest place to put our exported files. Now go to the folder where you had stored your exported files from Deep Zoom Composer. Go inside the DeepZoomProjectSite\ClientBin\ folder and open up the GeneratedImages folder and you will see the following files (excluding scene.xml): dzc_output_files folder dzc_output_images folder dzc_output.xml Metadata.xml SparseImageSceneGraph.xml Drag and drop these files into the new GeneratedImages folder which you created in Visual Studio (figure 16 and figure 17). Figure 16: Drag the files from the folder directory CS3240 Lab SEM /2010 Page 12

13 Figure 17: Drop the files directly into the GeneratedImages folder in Visual Studio Your Solution Explorer should look something like the following figure 18: CS3240 Lab SEM /2010 Page 13

14 Figure 18: Solution Explorer should look something like the above 3. On the MainPage.xaml file, add the following one line of code inside the Grid layout container: <Grid x:name="layoutroot"> <MultiScaleImage x:name="msi" Source="/GeneratedImages/dzc_output.xml"/> </Grid> 4. Press F5 to run and you will realize that the mouse controls on panning and zooming on the image are all gone; reason being that the MultiScaleImage object doesn t have those effects being built on the MultiScaleImage. However, the DeepZoomProject solution that you generated from the Deep Zoom Composer previously does have these codes being generated for you. CS3240 Lab SEM /2010 Page 14

$5. Go to File > Open > Project/Solution and browse to the deepzoom_images\exported Data\tut4_dz subfolder inside the folder where you always store your tutorial files.$

15 5. Go to File > Open > Project/Solution and browse to the deepzoom_images\exported Data\tut4_dz subfolder inside the folder where you always store your tutorial files. (See figure 19) Figure 19: Open the DeepZoomProject generated by the Deep Zoom Composer 6. Press F5 to run the Deep Zoom application (See figure 20) Figure 20: Run the DeepZoomProject Silverlight application to experience deep zoom and all the mouse panning and zooming features CS3240 Lab SEM /2010 Page 15

As mentioned before, the mouse effects including zooming and panning and dragging and etc, all these codes are being generated by Deep Zoom Composer, simply explore the C# files

16 As mentioned before, the mouse effects including zooming and panning and dragging and etc, all these codes are being generated by Deep Zoom Composer, simply explore the C# files to learn more on how it actually works. The Solution Explorer should show the following figure 21: Figure 21: Solution Explorer of DeepZoomProject CS3240 Lab SEM /2010 Page 16

17 Experiencing inking feature using InkPresenter Inking is a very interesting feature that is available in Silverlight. You can create interesting Silverlight applications that you could use to perform the following: Draw ink strokes using a stylus or a mouse You can erase ink strokes Saving the ink and reloading them However, this tutorial is only going to touch on draw strokes using inking feature. For more information on the use of inks and sample code visit the site at: Let s get started with our sample application: 1. Open Microsoft Expression Blend 3 and create a new Silverlight 3 Application + Website project. Name is as tutorial4_inking and save it by pressing Ctrl+S. 2. Now go to the Assets panel and look for the InkPresenter control, drag and drop it to the design surface, name it as inkctrl and make both its width and height to be 300px. (See figure 22) Figure 22: Selecting the InkPresenter control 3. Select the LayoutRoot container and set its background color to Black. And also, set the background color of the InkPresenter to be Yellow (See figure 23) CS3240 Lab SEM /2010 Page 17

18 Figure 23: Setting the colors of the LayoutRoot container and the InkPresenter control Press F5 to run the application in the browser. You might try to scribble on the bright yellow surface of the InkPresenter but will notice that right now, you are not able to draw on the InkPresenter control. We need to write some simple code below to make that happen. The sample code for this application is shown below and has enough comments to make it self explanatory. Save the tutorial4_inking solution and open it in Microsoft Visual Studio Go to the MainPage.xaml.cs file, just type in the code as shown below: using System; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace tutorial4_inking public partial class MainPage : UserControl //Stroke object initialized to null Stroke thestroke = null; public MainPage() InitializeComponent(); //inkctrl: name for InkPresenter control //Subscribe to the mouse events //Event used to create a new stroke mouse/stylus inkctrl.mouseleftbuttondown += new MouseButtonEventHandler(onMouseDown); //Event used to continue drawing inkctrl.mousemove += new MouseEventHandler(onMouseMove); //Event used to release the mouse so drawing stops inkctrl.mouseleftbuttonup += new MouseButtonEventHandler(onMouseUp); CS3240 Lab SEM /2010 Page 18

19 void onmousemove(object sender, MouseEventArgs e) //Check if stroke object is created. //Stroke object is created when the frst mouse click happens //in the onmousedown event if (thestroke!= null) //As you move the mouse the movement is registered //and the points are added to inkctrl thestroke.styluspoints.add(e.stylusdevice.getstyluspoints(inkctrl)); void onmouseup(object sender, MouseButtonEventArgs e) //Make the stroke as null so it deletes the //stroke object from memory thestroke = null; //Release the mouse from the inkctrl to prevent //any further drawing inkctrl.releasemousecapture(); void onmousedown(object sender, MouseButtonEventArgs e) //Check if stroke object exists in memory. //Initially when the program starts it shouldn't //or after the onmouseup event has occured. if (thestroke == null) //Let inkctrl have the mouse/stylus attached to it inkctrl.capturemouse(); //Create a new stroke object in memory //this will be used to draw when the mouse moves thestroke = new Stroke(); //the color of the stroke is given as Black. //You can give any color you want. thestroke.drawingattributes.color = Colors.Black; //Stroke width and height will be 13pixels thestroke.drawingattributes.width = 13.0; thestroke.drawingattributes.height = 13.0; //Generate the initial stroke and add it to the //inkctrl thestroke.styluspoints.add(e.stylusdevice.getstyluspoints(inkctrl)); //Add the stroke to the collection of strokes. //This is useful if you want to loop through the //strokes and save the strokes s X,Y points in a text file. inkctrl.strokes.add(thestroke); CS3240 Lab SEM /2010 Page 19

20 Now press F5 to try out the inking feature in silverlight application. (See figure24) Figure 24: Try out the inking feature of the Silverlight application Summary In the lab we have seen three important features in Silverlight Media, Deep Zoom and Inking. All these three are very important when it comes to building Rich Media Applications for the web. CS3240 Lab SEM /2010 Page 20

CS3240 Human-Computer Interaction

CS3240 Human-Computer Interaction Lab Session 3 Supplement Creating a Picture Viewer Silverlight Application Page 1 Introduction This supplementary document is provided as a reference that showcases an