Paulson George wrote:
I'm still in the design phase of the project, so I'll go for WPF then. Could you please provide some reference if you are familiar with adding overlays to video in WPF apps?
Sure. First, some introduction:
In the past, I saw my colleague making some primitive frame to show some metadata in from of video in
System.Windows.Forms, to show some metadata, name coordinates, etc. If you do it with usual graphics, the video underneath "wipes" graphics. This person dug into DirectX, managed to utilize "DirectX Overlay Manager", rendered that stupid frame with text in that manager, succeeded. Forms use GDI+ which itself does no work well with DirectX. DirectX and GDI try to ignore each other.
WPF is itself based on DirectX, so, when it became available, years ago, I tried to experiment with that first, expecting that I can just put some UI elements in front of video, without any efforts, and see both video and those element. Naturally, this is what happened.
I needed some time to think how to show it on a simplest possible example. So, look at this WPF window:
<Window x:Class="OverVideo.Ui.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="300" Width="300">
<Grid>
<MediaElement Source="test.avi"/>
<Canvas Opacity="0.6">
<Rectangle Canvas.Left="20" Canvas.Top="15"
Width="80" Height="140" Fill="Red" Stroke="Black"/>
</Canvas>
</Grid>
</Window>
Just for demonstration, I put two UI elements one on top of another, in one of the simplest possible way: I put an instance of
Grid on the window's logical tree top, with two children:
MediaElement and
Grid. This is just one possible ways to superimpose two or more elements: by default, these two children of
Grid instance has the same values of dependency property
Canvas.Row and
Canvas.Column and, hence, take the same position. Another way would be putting some elements on the instance of
Canvas.
So, why
Canvas? Because this is element allows free positioning of elements on it. In other words, this is something which is usually used for vector graphics. This is not typical for WPF, where all elements are automatically aligned according its position in
logical tree and all those margin and padding settings. For demonstration purpose, I put just one element on the canvas: a semi-transparent
Rectangle (see
Opacity attribute). Consider this rectangle as a prototype for your chart element. :-)
Note that the
Opacity of the
Canvas instance itself is default (1, full opacity), but you can still see through it, where there is not children. Should you set
Opacity for
Canvas, it would be applied to all its elements, so you would have some combined opacity.
And yes, I just copied some video file "test.avi" to the output directory, just for simplicity. So, when I start the application, video starts to play immediately, and you can see the portion of video behind the semi-transparent rectangle.
Viola!
Now, as all the children of the
Canvas instance are now on top of the logical tree, you can add any mouse and keyboard event handlers immediately to them, so you can move them around, transform, and so on. I think this is all you need to achieve your goals.
You can use different approaches for putting UI elements on top of video. You can use
Grid as I just demonstrated, you can put video on the
Canvas, too, with some other elements on top, and you can consider using such thing as
adorners:
http://msdn.microsoft.com/en-us/library/ms743737%28v=vs.110%29.aspx[
^].
Please see:
http://msdn.microsoft.com/en-us/library/system.windows.controls.mediaelement%28VS.95%29.aspx[
^],
http://msdn.microsoft.com/en-us/library/system.windows.controls.canvas%28v=vs.110%29.aspx[
^].
My little problem was to give you the idea with video and at least some introduction to WPF, but this was not so easy, in part, because this is not the most typical use of WPF. So don't take my introduction serious, learn it yourself.
See also:
http://msdn.microsoft.com/en-us/library/ms754130%28v=vs.110%29.aspx[
^],
http://msdn.microsoft.com/en-us/library/ms750441%28v=vs.110%29.aspx[
^],
http://msdn.microsoft.com/en-us/library/ms752914%28v=vs.110%29.aspx[
^],
http://msdn.microsoft.com/en-us/library/ms753391%28v=vs.110%29.aspx[
^],
http://msdn.microsoft.com/en-us/library/ms745058%28v=vs.110%29.aspx[
^],
http://wpftutorial.net/LayoutProperties.html[
^].
For charting, you can use, for example, Microsoft Charts controls for your version of .NET.
Some links on charting:
http://www.c-sharpcorner.com/uploadfile/mahesh/charting-in-wpf[
^],
https://code.msdn.microsoft.com/windowsapps/Chart-Control-in-WPF-c9727c28[
^],
http://wpf.codeplex.com/releases/view/40535[
^].
This CodeProject article can also be useful:
WPF Toolkit Charting Controls (Line, Bar, Area, Pie, Column Series) Demo[
^].
—SA
Submit an article or tip