How to create camera mask in C# for UWP - c#

I have searched the net but can't find an answer and need some help. I am creating a mobile HR program and need to provide a profile mask to the camera so that the user knows what distance to be at to take a picture of the person and to ensure all photos look the same.
What I would like to do is when the user clicks a button show the camera and have an area blacked out so that only the transparent section shows the focus of the camera in the desired shape.
If anyone knows where sample code is or a good tutorial on this subject is I would appreciate it.

For your requirement, you could use MediaCapture class to display the camera preview. And cover CaptureElement with human shape image just like the following.
MainPage.xaml
<Grid>
<CaptureElement Name="PreviewControl" Stretch="Uniform" Height="400" Width="400" >
</CaptureElement>
<Image Source="head.png" Height="400" Width="400" />
</Grid>

Related

UWP disable rotate a specific control

In my Project I have two buttons:
<Grid>
<Button x:Name="FirstButton"
Content="First"/>
<Button x:Name="SecondButton"
Content="Second"/>
</Grid/>
I would like to know if there's any way when I change the orientation of the device only the FirstButton change his orientation, and SecondButton don't change his orientation.
Already grateful for any help!

How can i convert a 22bpp gif image to a 32bpp gif image in C#?

I am using picturebox control in WPF to show a Gif image. Since i am using AllowTransperency="True", picturebox control is not getting displayed. As per this stackoverflow article i have to convert my 22bpp image to 32bppimage. How can i do that? Kindly advice.
<Window Loaded="Window_Loaded" VeritcalAlignment="Center" AllowTransperency="True" Background="Transparent">
<border Background="Transpernt" BorderThickness="0">
<Grid>
<wfi:WindowsFormsHost Grid.Row="4" HorizontalAlignment="Center" VerticalAlignment="Center">
<winForms:PictureBox x:Name="myImage"></winForms:PictureBox> </wfi:WindowsFormsHost>
Code Behind
myImage.Image = #"C:\MyImage.Gif";
Please help. Thanks a lot for your help and time in advance.
Take a look at GifBitmapEncoder. One solution would be iterate over each frame and convert each bitmap.
Also, take a look at NGif, an open source library. It may suit you needs more.

How to display SkeletonStream on a DepthStream or ColorStream Kinect Wpf

I would like to know how to overlay two Image objects in Wpf. I've made two streams which output a video, one for bones and another just a normal video. Now I would like to add them together, so the skeleton would be displayed on the color video.
A part of my XAML code is
<Grid Name="layoutGrid">
<Grid Name="VideoGrid" ClipToBounds="True" Background="AliceBlue">
<Image Name="ColorImage" Width="640" Height="480"/>
<Image Name="SkeletalImage" Width="640" Height="480"/>
<Canvas Background="Transparent"/>
</Grid>
<StatusBar VerticalAlignment="Bottom" HorizontalAlignment="Center">
<Button Name="Button1" Content="Skeleton Only" Width="120"/>
</StatusBar>
</Grid>
When I do this, only the Skeletal image is displayed and if I switch the both Images then the color image is shown. It seems like Canvas background doesn't do the trick (to make the black part of skeletal image transparent)
I thought the problem was in my XAML code but it was actually at drawing the transparent background to set the render size. The background for skeleton image was black
dc.DrawRectangle(Brushes.Black, null,
new Rect(0.0, 0.0, RenderWidth, RenderHeight));
instead of transparent
dc.DrawRectangle(Brushes.Transparent, null,
new Rect(0.0, 0.0, RenderWidth, RenderHeight));
that fixed my problem.
Thanks though
I've tried overlaying Skeletal onto color or depth on a canvas, but it never worked out. Instead, when I looked at the Kinect Explorer sample application in the SDK 1.6.0, they overlay using a grid. Unfortunately, I have not learned that much yet, but they used a grid for the color and depth, and a canvas for the skeletal tracking. I can post a snippet if it helps. Good luck!
You are asking basically two different questions: 1) How to display SkeletonStream on a DepthStream, which is very easy, 2) How to display SkeletonStream on a ColorStream, which is still easy but a little more complicated.
Answer to Question 1) The XYZ Vectors of the joints in the skeletal streams are in the same coordinate system as the Depth Stream. So if you plot the Deapth Stream as a quadratic mesh using the focal length of the depth camera from the Kinect SDK, you can plot the skeleton as a line plot in the same coordinate system. The source code that implements exactly what you want to do in OpenGL is available here that will give you an idea how to implement this in wpf.
Answer to Question 2) The video camera has a different field of view from the depth camera. To display the skeleton stream to the ColorStream you need first to map the XYZ vectors of the joints in the skeletal streams to the coordinate system of the depth stream and then draw first the video frame in the background and the skeleton as a line plot on the front.
You can easily do the mapping using the U-V texture coordinates given by the Kinect SDK. See how you can get the UV here.

Manipulating Images in Windows Surface 2.0 (rotation)

I am using c# wpf for windows surface 2.0.
I have been working with a set of images that i import in the xmpl file.
I found some examples for text, but for the images they used GDI+ to manipulate images and animate them, but I do not want that.
The main thing that I want to do now is to rotate(transform rotate) an image and show that it is rotating.
Here is how I am addressing the images:
Canvas.SetTop(image1, 0);
Canvas.SetLeft(image1, 200);
Any help would be much appreciated.
Thank you.
If you want to rotate your image automatically and without user interaction, check Clemens' answer. However if you want to rotate with touch manipulations, I find it easy to put the image in a ScatterViewItem like so:
<s:ScatterView>
<s:ScatterViewItem CanMove="False" CanScale="False">
<s:ScatterViewItem.Background>
<ImageBrush ImageSource="yourImage.png" Stretch="UniformToFill"/>
</s:ScatterViewItem.Background>
</s:ScatterViewItem>
</s:ScatterView>
Of course, you have the overhead of having to put in a ScatterView and its content
Your question is not very specific and there are a lot of ways to animate the rotation of an image.
A simple approach would be to assign a RotateTransform to the RenderTransform of your Image controls and then animate the Angle property of these RotateTransforms.
<Image x:Name="image" Source="..."
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<RotateTransform/>
</Image.RenderTransform>
</Image>
Start the animation in code like this:
var transform = (RotateTransform)image.RenderTransform;
var animation = new DoubleAnimation(360, TimeSpan.FromSeconds(5));
transform.BeginAnimation(RotateTransform.AngleProperty, animation);
You may start reading about animations in WPF in the Animation Overview article on MSDN. The Transforms Overview article may also be helpful.

how to merge Image and videoBrush in one image in windows phone 7?

how to merge Image and videoBrush in one image in windows phone 7?
For example there is the code:
<Canvas x:Name="viewfinderCanvas" Width="640" Height="480"
HorizontalAlignment="Left" >
<Canvas.Background>
<VideoBrush x:Name="viewfinderBrush" />
</Canvas.Background>
<Image source="myImage.png"/>
</Canvas>
If for example I add a picture in the Image - Logo with transparent background, and I want to when you click the "Make a photo" logo remained on the photo.
Image from the camera to take with the help of:
PhotoCamera cam = new Microsoft.Devices.PhotoCamera(CameraType.Primary);
How to make it so that when you save a photo on it was applied to a picture of the Image (my logo)?
Microsoft have a full flexed example of how to do overlays on a VideoBrush, see MSDN: How to: Work with Grayscale in a Camera Application for Windows Phone.
To merge two images, use the Blit method from the WriteBitmapEx project.

Categories

Resources