Video Display in a Custom User Interface

Open Script

This example shows how to display multiple video streams in a custom graphical user interface (GUI).

Overview

当工作在一个项目涉及视频工艺ng, we are often faced with creating a custom user interface. It may be needed for the purpose of visualizing and/or demonstrating the effects of our algorithms on the input video stream. This example illustrates how to create a figure window with two axes to display two video streams. It also shows how to set up buttons and their corresponding callbacks.

The example is written as a function with the main body at the top and helper routines in the form of nested functions.

functionVideoInCustomGUIExample()

Initialize the video reader.

videoSrc = vision.VideoFileReader('vipmen.avi','ImageColorSpace','Intensity');

Create a figure window and two axes to display the input video and the processed video.

[hFig, hAxes] = createFigureAndAxes();

Add buttons to control video playback.

insertButtons(hFig, hAxes, videoSrc);

Interact with the New User Interface

Now that the GUI is constructed, we can press the play button to trigger the main video processing loop defined in thegetAndProcessFramefunction listed below.

% Initialize the display with the first frame of the videoframe = getAndProcessFrame(videoSrc, 0);% Display input video frame on axisshowFrameOnAxis(hAxes.axis1, frame); showFrameOnAxis(hAxes.axis2, zeros(size(frame)+60,'uint8'));

Note that each video frame is centered in the axis box. If the axis size is bigger than the frame size, video frame borders are padded with background color. If axis size is smaller than the frame size scroll bars are added.

Create Figure, Axes, Titles

Create a figure window and two axes with titles to display two videos.

function[hFig, hAxes] = createFigureAndAxes()% Close figure opened by last runfigTag ='CVST_VideoOnAxis_9804532'; close(findobj('tag',figTag));% Create new figurehFig = figure('numbertitle','off',...'name','Video In Custom GUI',...'menubar','none',...'toolbar','none',...'resize','on',...'tag',figTag,...'renderer','painters',...'position',[680 678 480 240],...'HandleVisibility','callback');% hide the handle to prevent unintended modifications of our custom UI% Create axes and titleshAxes.axis1 = createPanelAxisTitle(hFig,[0.1 0.2 0.36 0.6],'Original Video');% [X Y W H]hAxes.axis2 = createPanelAxisTitle(hFig,[0.5 0.2 0.36 0.6],'Rotated Video');end

Create Axis and Title

Axis is created on uipanel container object. This allows more control over the layout of the GUI. Video title is created using uicontrol.

functionhAxis = createPanelAxisTitle(hFig, pos, axisTitle)% Create panelhPanel = uipanel('parent',hFig,'Position',pos,'Units','Normalized');% Create axishAxis = axes('position',[0 0 1 1],'Parent',hPanel); hAxis.XTick = []; hAxis.YTick = []; hAxis.XColor = [1 1 1]; hAxis.YColor = [1 1 1];% Set video title using uicontrol. uicontrol is used so that text% can be positioned in the context of the figure, not the axis.titlePos = [pos(1)+0.02 pos(2)+pos(3)+0.3 0.3 0.07]; uicontrol('style','text',...'String', axisTitle,...'Units','Normalized',...'Parent',hFig,'Position', titlePos,...'BackgroundColor',hFig.Color);end

Insert Buttons

Insert buttons to play, pause the videos.

functioninsertButtons(hFig,hAxes,videoSrc)% Play button with text Start/Pause/Continueuicontrol(hFig,'unit','pixel','style','pushbutton','string','Start',...'position',[10 10 75 25],'tag','PBButton123','callback',...{@playCallback,videoSrc,hAxes});% Exit button with text Exituicontrol(hFig,'unit','pixel','style','pushbutton','string','Exit',...'position',[100 10 50 25],'callback',...{@exitCallback,videoSrc,hFig});end

Play Button Callback

This callback function rotates input video frame and displays original input video frame and rotated frame on axes. The functionshowFrameOnAxisis responsible for displaying a frame of the video on user-defined axis. This function is defined in the fileshowFrameOnAxis.m

functionplayCallback(hObject,~,videoSrc,hAxes)try% Check the status of play buttonisTextStart = strcmp(hObject.String,'Start'); isTextCont = strcmp(hObject.String,'Continue');ifisTextStart% Two cases: (1) starting first time, or (2) restarting% Start from first frameifisDone(videoSrc) reset(videoSrc);endendif(isTextStart || isTextCont) hObject.String ='Pause';elsehObject.String ='Continue';end% Rotate input video frame and display original and rotated% frames on figureangle = 0;whilestrcmp(hObject.String,'Pause') && ~isDone(videoSrc)% Get input video frame and rotated frame[frame,rotatedImg,angle] = getAndProcessFrame(videoSrc,angle);% Display input video frame on axisshowFrameOnAxis(hAxes.axis1, frame);%显示视频帧轴旋转showFrameOnAxis(hAxes.axis2, rotatedImg);end% When video reaches the end of file, display "Start" on the% play button.ifisDone(videoSrc) hObject.String ='Start';endcatchME% Re-throw error message if it is not related to invalid handleif~strcmp(ME.identifier,'MATLAB:class:InvalidHandle') rethrow(ME);endendend

Video Processing Algorithm

This function defines the main algorithm that is invoked when play button is activated.

function[frame,rotatedImg,angle] = getAndProcessFrame(videoSrc,angle)% Read input video frameframe = step(videoSrc);% Pad and rotate input video framepaddedFrame = padarray(frame, [30 30], 0,'both'); rotatedImg = imrotate(paddedFrame, angle,'bilinear','crop'); angle = angle + 1;end

Exit Button Callback

This callback function releases system objects and closes figure window.

functionexitCallback(~,~,videoSrc,hFig)% Close the video filerelease(videoSrc);% Close the figure windowclose(hFig);end

end