APPLICATION NOTE. Application Note: 4D-AN-P4007. ViSi-Genie Play Video. Document Date: November 15 th, Document Revision: 1.

Transcription

1 APPLICATION NOTE Application Note: ViSi-Genie Play Video Document Date: November 15 th, 2012 Document Revision: 1.0

2 Description This Application Note explores the possibilities provided by ViSi-Genie for the Movie object: Play Pause Stop Change volume This application note requires: Workshop 4 has been installed according to the document Workshop 4 Installation; The user is familiar with the Workshop 4 environment and with the fundamentals of ViSi-Genie, as described in Workshop 4 User Guide and ViSi-Genie User Guide; The user has completed a first project like the project described in 4D-AN-P4001 Getting Started First Project with ViSi-Genie. Additionally, please refer to the 4D-AN-P4004 ViSi-Genie - Advanced Buttons for reference on adding a Button object and setting a simple Button object. Three ViSi-Genie projects are provided as examples to help you along this application note. Content Description... 2 Content... 2 Application Overview... 3 Setup Procedure... 4 Launch ViSi-Genie... 4 Load the Example... 4 Create a New Project... 6 The Video Object Add a Video Object Move the Video Resize the Video Edit the Video Change the Video Crop the Input Video Select a Sequence from the Video Resize the Output Image Define the Frame Delay of the Video Confirm or Discard the Changes Define the Sequence to Be Played Control the Video Object Add the Timer Object Prepare the Buttons Play the Video Stop the Video Resume After Stop Show First Frame Show Previous Frame D Systems Page 2 of 36

3 Show Next Frame Select the Frame Display the Frame Number Build and Upload the Project Summary Proprietary Information Disclaimer of Warranties & Limitation of Liability Application Overview Adding video to a graphical user interface increases the user experience dramatically. 4D Systems screens feature video playing. The application discussed in this application note is a fully featured music player: ViSi-Genie makes building such an application as simple as click-and-drop elements on the screen. This application note describes how to add a Video object and how to customise it D Systems Page 3 of 36

4 Setup Procedure Launch ViSi-Genie There is an alias for 4D Workshop on the desktop: Load the Example You can load the ViSi-Genie project example Example: AN8 Play Video 2 or follow the procedures described in the next section. Workshop 4 opens and displays the Recent page: Launch 4D Workshop by double-clicking on the icon: D Systems Page 4 of 36

5 To load the existing project, click on the left-most icon Open select it and click on to load it. Now, check the type of the screen module: select the Project menu the type and orientation of the screen are displayed: a standard Open window asks for a ViSi-Genie project If the screen module you use is different, click on the button D Systems Page 5 of 36

6 to display the Change Display window: Create a New Project 4D Workshop opens and displays the Recent page: Select the screen on the drop-down list and define the orientation. To create a new program, there are multiple options: Click on the top left-most icon New and confirm by D Systems Page 6 of 36

7 Click on the icon close to Create a New Project on top or, if the settings have been already defined, click on the icon close to Create a New Project on bottom: All those options update the main window with the selection of the screen: Select the screen, here the LCD-32PT: D Systems Page 7 of 36

8 The selected screen is displayed: To set it to landscape, just click on the image of the screen to rotate it: Orientation is portrait by default. Press Next to proceed: D Systems Page 8 of 36

9 The main window now asks for the kind of project: To select ViSi Genie, just click on the blue arrow: D Systems Page 9 of 36

10 The development environment is now displayed: The Video Object You can load the example Example: AN8 Play Video 2 or follow the procedures described hereafter. Select the Home menu to display the objects: The Video object is located on the System/Media pane: You are ready to start. Add a Video Object Click first on the video icon and click on the WYSIWYG screen to place it D Systems Page 10 of 36

11 The standard Windows Open file appears and asks for a video: Select the folder, here French Alps, and the picture, here MVI_0471 with a quiet creek in the Alps...and press Open to load the video: D Systems Page 11 of 36

12 The WYSIWYG screen now displays the video: The Object Inspector displays the properties of the video object: The video object contains one single video. Note that the video is in a square in the middle of the screen and that the proportions are not consistent with the original ones D Systems Page 12 of 36

13 Move the Video To place the video on the top-right corner of the screen, first select the video object by clicking on it; red dots appear around the video: Or use the mouse, click-and-drag the video on the top-left corner of the screen: Then, two options: Either use the keyboard and edit two properties on the Object Inspector, Left and Top : o Select the Left line, enter 0 and press Enter o Select the Top line, enter 0 and press Enter D Systems Page 13 of 36

14 The WYSIWYG screen shows the new location of the video: Resize the Video To resize the video, first select the video object by clicking on it; red dots appear around the video: Then, two options: Either use the keyboard and edit two properties on the Object Inspector, Height and Width : o Select the Height line, enter 0 and press Enter o Select the Width line, enter 0 and press Enter D Systems Page 14 of 36

15 Or use the mouse, click on the bottom-left red dots and resize the video to the desired dimension: The WYSIWYG screen shows the new size of the video: D Systems Page 15 of 36

16 The video can also be full-sized: Edit the Video To edit the video, click on the video line in the Object Inspector: A symbol appears. Click on it. A new window Image Video Converter appears and provides all the parameters for the video: Because the screen used for this application note is 320 x 240, maximal height is 240 pixels and maximal width is 320 pixels. Those values may change depending on your specific screen. Please refer to the specification sheet of your screen. On the left side, the input video; on the right, the output video D Systems Page 16 of 36

17 Change the Video You can load the example Example: AN8 Play Video 3 or follow the procedures described hereafter. To load a new video, click on The Image Video Converter shows the new video: The standard Windows Open file appears and asks for a video: Note that all the settings have been changed. This new video shows a toy car rolling from left to right. Select the video, here MVI_0706a and click Open: D Systems Page 17 of 36

18 Crop the Input Video The left side provides all the information about the input video: Cropping part the input image is possible by Entering new values for Left, Top, Width and Height under Selection Window in Input: Clicking on the up or down arrows for the concerned value: Focusing on the car gives the following result: D Systems Page 18 of 36

19 Only the image on the right is updated: Select a Sequence from the Video Below the input video, there is a slider to select the frame: Here, frame 160 is selected and shown: Cropping the input image can also be done by changing the Height, Left, Top and Width properties under Source on the Object Inspector: Any format is possible, here an unusual square. On the example, the interested sequence on the video starts at frame 100 and ends at frame 220. There s no need to call for an external editor: just note the numbers of the first and last frames D Systems Page 19 of 36

20 The image on the right is updated accordingly: Resize the Output Image Similarly, the right side displays the output video: The slider provides a convenient way to review the input video for selecting the sequence. Keep the numbers of the first and last frames of the sequence for later use. Because the screen used for this application note is 320 x 240, maximal height is 240 pixels and maximal width is 320 pixels. Those values may change depending on your specific screen. Please refer to the specification sheet of your screen D Systems Page 20 of 36

21 Changing the size of the output image is possible by: Resizing the video moving the red dotted rectangle, Entering new values for Width and Height under Image Actual Size Output: The output image is resized with an estimated size: Clicking on the up or down arrows for the concerned value: Note it is not possible to move the output image on the screen. The top-left position of the video is defined by the Top and Left properties on the Object Inspector. Please refer to the Move the Video section. It is important to keep the ratio of the output video consistent with the input. The ratio corresponds to width / height. Is this example, input and output share the same width and height, at D Systems Page 21 of 36

22 The resulting screen would be: Here, the example is updated with a standard 3/2-based screen: However, most usual ratios are: 3/2, 4/3, 16/9. Define the Frame Delay of the Video Last parameter, the frame delay defines how fast the frames are displayed. Normal speeds are between 25 and 30 images per second. A speed of 25 images per second corresponds to a frame delay of 40 ms. A speed of 30 images per second corresponds to a frame delay of 30 1/3 ms. The higher the speed, the smaller the delay. The frame delay has a direct impact on the size of the file: the shorter the delay, the bigger the file because more frames are required. It may also have an impact on the quality of the rendering, as more frames require more power, especially in full screen mode. The screen used for D Systems Page 22 of 36

23 this application note is 320 x 240, maximal height is 240 pixels and maximal width is 320 pixels, or a total of pixels. Those values may change depending on your specific screen. Please refer to the specification sheet of your screen. An example of a full screen video is provided with Example: AN8 Play Video 1 Full Screen It is important that both the timer and the video have the same value: Interval for the timer to accept or to discard the changes. Click on OK to accept the new image and settings. The WYSIWYG screen now shows the car: And Frame Delay for the video: Confirm or Discard the Changes When cropping, resizing are finished, click Define the Sequence to Be Played Using the slider on the Image Video Converter window, the interested sequence on the video starts at frame 100 and ends at frame D Systems Page 23 of 36

24 To define the sequence, select the Frames on the Object Inspector Control the Video Object Building and uploading the project as it is now carry a surprise: the video doesn t play! display the details and update First and Last: Add the Timer Object Actually, another object is needed to play video: the Timer object located on the System/Media pane The video is now ready. The Timer object raises an event at a given pace, for example every 1000 ms: D Systems Page 24 of 36

25 The Interval can be changed easily, by editing the corresponding line, here with 40 ms: It is important that both the timer and the video have the same value: Interval for the timer Every 40 ms, Timer0 raises the event called OnTimer. Now, the OnTimer event is defined to send the Video0NextFrame command to the Video0 object: And Frame Delay for the video: The command Video0NextFrame stands for Tell the Video0 object to show the next frame of the video. Every 40 ms, Timer0 raises OnTimer event sends Video0NextFrame command to Video0 to show the video. So every 40 ms, a new frame is going to be displayed. As a video is a succession of still images, changing the images quickly enough creates the impression of a movie D Systems Page 25 of 36

26 Prepare the Buttons Add five Button, a TrackBar, a Label and a CustomDigits objects to the form, customise their appearance properties as you like, in order to obtain the following screen: sends the command Timer0Play to Timer0: The command Timer0Play stands for Tell the Timer0 object to start the timer and raise an event every defined delay. The Timer0 timer sends the Video0NextFrame to the Video0 object: Each objet, among the buttons and the track-bar, when it is pressed and released, sends a specific command, directly or indirectly, to control the Video object. Play the Video To start playing the video, the WinButton1 button The command Video0NextFrame stands for Tell the Video0 object to show the next frame of the video D Systems Page 26 of 36

27 Summarising this indirect Play command gives: And Frame Delay for the video: Otherwise, the video may not played at normal speed! When Play is pressed, WinButton1 raises OnChanged event sends Timer0Play command to Timer0 to start to play. Stop the Video To stop or pause playing the track, the WinButton2 button sends the command Timer0Stop to Timer0: Every 40 ms, Timer0 raises OnTimer event sends Video0NextFrame command to Video0 to show the video. It is important that both the timer and the video have the same value: Interval for the timer The command Timer0Stop stands for Tell the Timer0 object to stop the timer and no longer raise events. So the Timer0 timer stops and does nothing. No more Video0NextFrame command is sent to the Video0 object, so the video stops D Systems Page 27 of 36

28 Summarising this indirect Stop command gives: When Play is pressed, Winbutton2 raises OnChanged event sends Timer0Stop command to Timer0 to stop to play. Timer0 stops and does nothing Video0 stops playing. Resume After Stop To resume after Stop, just press Play again: The video resumes playing D Systems Page 28 of 36

29 Show First Frame To show the first frame, the Winbutton0 button Show Previous Frame To show the previous frame, the Winbutton3 button sends the command Video0First to Video0: sends the command Video0Previous to Video0: The command Video0Previous stands for Tell the Video0 object to show the previous frame of the video. Summarising this direct First command gives: The command Video0Previous stands for Tell the Video0 object to show the previous frame of the video. Summarising this direct Previous command gives: When First is pressed, Winbutton0 raises OnChanged event sends Video0First command to Video0 to show the first frame of the video. When First is pressed, Winbutton3 raises OnChanged event sends Video0Previous command to Video0 to show the previous frame of the video D Systems Page 29 of 36

30 Show Next Frame To show the next frame, the Winbutton4 button Select the Frame To select a specific frame, just move the slider on track-bar, the TrackBar0 object sends the command Video0Next to Video0: raises the event OnChanging and sends the command Video0Set to Video0: The command Video0Next stands for Tell the Video0 object to show the next frame of the video. Summarising this direct Next command gives: The command Video0Set stands for Tell the Video0 object to display the frame which number specified by the value. When First is pressed, Winbutton5 raises OnChanged event sends Video0Next command to Video0 to show the next frame of the video D Systems Page 30 of 36

31 The TrackBar0 object needs to be set with the correct parameters: MaxValue corresponds to the duration of the selected sequence, and is equal to the total number of frames selected, here last 220 first 100 = 120: Summarising this command gives: The MinValue and MaxValue of the TrackBar shall be defined as follow: MinValue is equal to 0 or the first frame to be displayed: When the track-bar is moved, TrackBar0 raises OnChanging event sends Video0Set command to Video0 to show the selected frame D Systems Page 31 of 36

32 Display the Frame Number When OnChanged is raised, the Video0 object sends the command CustomDigits0Set Build and Upload the Project To build and upload the project, first select the Comms menu and CustomDigits0 displays the value: and check that: Summarising this command gives: The communication port light is blue. When the video stops, Video0 raises OnChanged event sends CustomDigits0Set command to CustomDigits0 to show the number of the frame. The micro-sd card is plugged on a USB port or the micro-sd card to SD card converter inserted into the SD-card slot and the drive mounted D Systems Page 32 of 36

33 Then select the Project menu Copying the files on the micro-sd card may take a while as the video files are very large: and click on Flash as destination: The screen displays the video: Finally, select the Home menu and click on the Build button: D Systems Page 33 of 36

34 Summary Element ViSi-Genie Command Comment Timer Timer object sends Video0NextFrame command to Video object Play Resume Simple WinButton object sends the command Timer0Play to Timer object. Timer object is linked to Video object by Video0NextFrame command. Stop Simple WinButton object sends the command Timer0Stop to Timer object. Timer object is linked to Video object by Video0NextFrame command. First Simple WinButton object sends the command Video0First to Video object D Systems Page 34 of 36

35 Element ViSi-Genie Command Comment Previous Simple WinButton object sends the command Video0Previous to Video object Next Simple WinButton object sends the command Video0Next to Video object Select the frame TrackBar object sends the command Video0Set to Video object Display frame number Video object sends the command CustomDigits0Set to CustomDigits object D Systems Page 35 of 36

36 Proprietary Information The information contained in this document is the property of 4D Systems Pty. Ltd. and may be the subject of patents pending or granted, and must not be copied or disclosed without prior written permission. 4D Systems endeavours to ensure that the information in this document is correct and fairly stated but does not accept liability for any error or omission. The development of 4D Systems products and services is continuous and published information may not be up to date. It is important to check the current position with 4D Systems. All trademarks belong to their respective owners and are recognised and acknowledged. Disclaimer of Warranties & Limitation of Liability 4D Systems makes no warranty, either expresses or implied with respect to any product, and specifically disclaims all other warranties, including, without limitation, warranties for merchantability, non-infringement and fitness for any particular purpose. Information contained in this publication regarding device applications and the like is provided only for your convenience and may be superseded by updates. It is your responsibility to ensure that your application meets with your specifications. In no event shall 4D Systems be liable to the buyer or to any third party for any indirect, incidental, special, consequential, punitive or exemplary damages (including without limitation lost profits, lost savings, or loss of business opportunity) arising out of or relating to any product or service provided or to be provided by 4D Systems, or the use or inability to use the same, even if 4D Systems has been advised of the possibility of such damages. 4D Systems products are not fault tolerant nor designed, manufactured or intended for use or resale as on line control equipment in hazardous environments requiring fail safe performance, such as in the operation of nuclear facilities, aircraft navigation or communication systems, air traffic control, direct life support machines or weapons systems in which the failure of the product could lead directly to death, personal injury or severe physical or environmental damage ( High Risk Activities ). 4D Systems and its suppliers specifically disclaim any expressed or implied warranty of fitness for High Risk Activities. Use of 4D Systems products and devices in 'High Risk Activities' and in any other application is entirely at the buyer s risk, and the buyer agrees to defend, indemnify and hold harmless 4D Systems from any and all damages, claims, suits, or expenses resulting from such use. No licenses are conveyed, implicitly or otherwise, under any 4D Systems intellectual property rights D Systems Page 36 of 36