Camcorder, Advanced: Record video clips, rename and delete labels, change aspect ratio

[Scott Ferguson]

In the Camcorder, Level 2 exercise project, we introduced the ability to save links to the recorded video clips.

In this tutorial, we will add some advanced techniques to allow the app to rename the remembered video clips and to delete those entries as well.

We also add some UI (user interface) features such as buttons with images, flashing a buttons when they are touched and feedback in status messages.

The technique for allowing renaming of the video clips is based on the one we used for the Listpicker: Colorpicker example.

Due to it's complexity, we will examine the finished project step-by-step in order to understand how it works.

Open the lrn_ccd_level3_v2 project.

Screen Designer:

Copy the attached png files to the Media list for the button images and screen background.

We want the video player window and background image canvas to display centered horizontally below a toolbar.

Set AlignHorizontal of Screen1 to Center.

Set BackgroundColor to Dark Gray.

Set Title to Welcome! Touch [+] to record a video clip.

Set VersionCode to 2 and VersionName to 2.0.

There are 2 groups of buttons on the toolbar, The outer group contains the buttons that are always visible.

The inner group contains 'editing buttons' that are visible only if there are saved video clips.

This makes the app less confusing when there are no video clips since you cannot edit a video clip's name if it doesn't exist yet.

Alternatively, you could 'dim' buttons that are not available rather than hiding them.

These are example applications of the concept of Context-sensitive user interface.

To contain all of the buttons, a horizontal screen arrangement named toolbar_hsa is created.

It's Width is set to Fill parent.

The leftmost button is the aspect_ratio_btn, 

It is used to select the shape of the video layout.

It opens a listpicker containing display options.

Set it's Image to format.png.

Set it's Width and Height to 50px.

aspect_ratio_lpk is a ListPicker opened when the user presses the aspect_ratio_btn.

It contains three elements which can set the shape of the video layout.

Set ElementsFromString to 16:9,3:2,4:3.

Set Selection to 16:9.   (the default value)

Set Visible to hidden.

The record_btn Button opens an built-in app that records the video clip.

While the video clip is being recorded, the AI app is suspended.

Once the video clip is recorded, the internal app returns a link to the saved video clip to the AI app.

Set the Image to plus.png.

Set Width and Height to 50px.

editing_buttons_hsa is a HorizontalArrangement ScreenArrangement containing the editing buttons and a textbox.

Set it's Width to Fill parent.

delete_btn Button is used to remove the current item from list of video clip names.

Set It's Image to minus.png.

Set Width and Height to 50px.

clip_names_btn opens the clip_names_lpk listpicker to let the user pick a video clip by name.

Set it's Image to open.png.

Set it's Width and Height to 50px.

clip_names_lpk ListPicker contains either the links to video clips as their names or more meaningful names entered by the user.

Set Visible to hidden.

For the following we have temporarily set Screen1 Orientation to Landscape from it's default of Unspecified to better show the components...

left_spacer_lbl separates the left side of a textbox from the button before it for a neater appearance.

Set it's Width to 2px.

clip_name_tbx will let the user enter meaningful names for the video clips.

Set it's Hint property to name cannot be blank!.

Set it's Width to Fill parent.

right_spacer_lbl puts a space between the right side of the textbox and the button following it.

Set it's Width to 2px.

The name_save_btn is used to submit a changed name to the video clip names list (clip_names_lpk).

Set it's Image to save.png.

Set it's Width and Height to 50px.

The video_player_vdp component has it's Visibility set to hidden.

background_cnv will display an image placeholder for the video player when there are no video clips loaded in the player.

Set BackgroundImage to background.png.

camcorder_cmc is a 'Non-visible' component that can access the device's internal video clip recorder app.

clips_tdb is used to store settings and the list of video clip names and links between sessions.

flash_button_clk is used to flash a button when it is pressed for visual feedback to the user.

(Some devices may also make a clicking sound when a button is touched.)

Uncheck the TimerAlwaysFires and TimerEnabled checkboxes.

Set TimerInterval to 250ms.

The button will be hidden for 250ms after the user releases it, then will reappear.

Blocks Editor:

Unlike previous exercises which were directed at the beginner level developer,

this tutorial assumes that you have some knowledge of more advanced techniques,

so explanations will focus upon describing in some detail how the event and procedure blocks function.

Global Variables:

clip_links_lst - contains the list of saved video clip links; default value: make a list

this_component - holds the component value for the last button pressed; default value: empty text block

this_image - holds the image file name for the last button pressed: default value: empty text block

aspect_ratio - holds the value corresponding to the last picked aspect ratio; ex. for an aspect ratio of 3:2 (3 / 2 = 1.5); default value: 0

to/call procedure blocks:

set_visibility - toggles visibility between the canvas background image and the video player window and the editing buttons;

set_aspect_ratio - 

1. accepts one of three text values: 16:9, 3:2, 4:3, then assigns the decimal value of that ratio to aspect_ratio
2. aspect_ratio is used to set the Width and Height of the image canvas and video player window using the available area and adjusting for screen orientation
   
3. the width x height is shown as a status message on the title bar

status - accepts a value then displays it on the screen title bar

enable_playback - 

1. accepts an index to a video clip
2. displays the video clip name in the clip_name_tbx TextBox
3. loads the picked video clip into the video_player_vdp VideoPlayer
4. shows the edit buttons and VideoPlayer window

flash_button -

1. accepts the current button component's value
2. toggles the flash_button_clk Timer enabled/disabled (enabled when button pressed, disabled when called from inside timer event block)
3. then-do: if the button was just pressed, saves the button's component and image values so the Timer event block can use them to restore the button state
4. removes the button image (image is removed for 250ms or 1/4 second)
5. else-do: if flash_button is executing inside the Timer event block, then restore it's Image  

Event blocks:

aspect_ratio_lpk.AfterPicking -

Once user has picked an aspect ratio for displaying their video clip, the item is saved in the database under the aspect_ratio_last_picked tag and will be used to set the default aspect ratio the next time the app is used.

set_aspect_ratio is then called to update the layout for the canvas image and videoplayer windows based on the new selection.

flash_button_clk.Timer -

This event block executes if a button has been pressed, which starts the timer.

The flash_button procedure block uses the last button pressed's component value in this_component and resets the button's image after a delay of 250ms. 

record_btn.Click - flashes the record button then opens the device's built-in video clip recorder

delete_btn.Click -

1.  displays the name or link of the video clip that is about to be deleted
   
2. deletes the name and link to the video clip
3. if the names list is not empty then-do: database is updated with the new lists and the current video clip is set to the last one in the names list; enable_playback is called to update the name textbox, load the video clip into the player, and make the player and edit buttons visible
4. else-do: clear the databases of data and call set_visibility to hide the edit buttons and VideoPlayer window and show the canvas image 

Screen1.Initialize - 

1. restore the user's last selected aspect ratio for the VideoPlayer window or set to the default of 16:9
2. if there are saved video clips, load them into the names list and select the last picked video clip for playback otherwise call set_visibilty to hide the edit buttons and VideoPlayer window and show the canvas image
   

Screen1.ScreenOrientationChanged - Call set_aspect_ratio to adjust the layout for the VideoPlayer if the names list is not empty or for the canvas image otherwise and show the W x H setting on the Title bar.

camcorder_cmc.AfterRecording - 

This event block will be triggered if the user did not cancel either recording or saving a recorded clip in the built-in video clip recording app.

The link to the saved video will be passed to the procedure through the clip_link argument.

The video clip link with be added to the end of the names and links lists, then stored in the database.

The status message displays the link.

clip_names_btn.Click - The clip names button is flashed, then the names listpicker is opened for the user to pick a video clip to either watch and/or change it's name

aspect_ratio_btn.Click - the aspect ratio button is flashed, then the aspect ratio listpicker is opened for the user to pick an aspect ratio layout for video playback

clip_names_lpk.AfterPicking - the selected video clip is loaded into the VideoPlayer and the video clip's name or link is displayed on the screen Title bar 

name_save_btn.Click -

1. the name save button is flashed
2. if the text in the name textbox doesn't match the one in the names list and is more than just space characters, then
3. then-do: replace the item in the names list with the new name from the name textbox, save the updated names list in the database and display a status message showing that the update was done
4. else-do: restore the textbox to the contents of the names list for the current item as the item cannot be empty or just contain spaces

END.

Package and test the app. When you have touched the record [+] button and your device switches to the built-in video clip recording app, observe the settings for the video.

On the ASUS Eee Transformer TF-101, there are two cameras and three video modes available: HD (16:9), SD (3:2) and CIF (4:3).

After recording a video clip, set the aspect ratio to the one which looks the least stretched or squeezed. If the ones available in this app do not meet your needs, then add a new option or substitute yours for one of the existing ones.

Challenge: The VideoPlayer component has a GetDuration block. Display the duration of the video clip when it has been selected for playback. 

Examples:

16:9 video clip, 16:9 aspect ratio selected for output

16:9 video clip, 4:3 aspect ratio selected for output - note how video is squeezed

4:3 video clip, 4:3 aspect ratio selected for output

3:2 video clip, 3:2 aspect ratio selected for output