Posts Tagged ‘Microsoft’
Waaaah guys, today I received another request for continuing the tutorial I’ve began last year. 15 requests are enough to me to decide to continue it. (The code is at the end)
First, it might not be the same, since I’ve lost the code, so I just tried to do approximately the same.
As you might guess our animation should run on GPU and so we have to create an effect. This effect morphs our window. The morphing algorithm is done with Beziér curbs, and the concept is pretty simple.
We need to get some handle and blend them and all pixels around, like in the figure I want to push L2 and L3 handles down and all others should stretch consequently.
Our algorithm subdivide a texture into 16 handles (Left [1,2,3,4], Upper[1,2,3,4], Right[1,2,3,4], Down[1,2,3,4]).
Since we want to act at window level we can first get a trick, to understand what’s going on and then get real window part and move them. Pass into the effect the Window view as texture.
Here goes the HLSL effect used (the zip at the end )
sampler2D implicitInput : register(s0);
float lp0 : register(c0);
float lp1 : register(c1);
float lp2 : register(c2);
float lp3 : register(c3);
float rp0 : register(c4);
float rp1 : register(c5);
float rp2 : register(c6);
float rp3 : register(c7);
//up-down coordinates
float up0 : register(c8);
float up1 : register(c9);
float up2 : register(c10);
float up3 : register(c11);
float dp0 : register(c12);
float dp1 : register(c13);
float dp2 : register(c14);
float dp3 : register(c15);
float BezierInterpolate(float x0, float x1, float x2, float x3, float t)
{
float b0 = pow(1-t, 3);
float b1 = 3*t*pow(1-t,2);
float b2 = 3*t*t*(1-t);
float b3 = pow(t, 3);
return b0*x0 + b1*x1 + b2*x2 + b3*x3;
}
float4 main(float2 uv : TEXCOORD) : COLOR
{
float left = BezierInterpolate(lp0, lp1, lp2, lp3, uv.y);
float right = BezierInterpolate(rp0, rp1, rp2, rp3, uv.y);
float up = BezierInterpolate(up0, up1, up2, up3, uv.x);
float down = BezierInterpolate(dp0, dp1, dp2, dp3, uv.x);
//apply the warp effect to texture color
if (uv.x >= left && uv.x <= right && uv.y >=up && uv.y <= down)
{
float tx = lerp(0, 1, (uv.x-left)/(right-left));
float ty = lerp(0, 1, (uv.y-up)/(down-up));
float2 pos = float2(tx, ty);
return tex2D(implicitInput, pos);
}
//leave the background transparent
else return float4(0,0,0,0);
}
And we have to map into a C# class with the respective dependency properties, and I’m not going to list here the class since is pretty dumb, and attached into the zip.
Now we need to use this effect.
- Create a storyboard that controls the handles
- Put the window as texture of the effect
- Make window transparent and re-arrange open/minimize/close buttons
- Listen and intercept when window is closing
Lets try.
1. Create a Storyboard similar to this one to open and close the window.
<Storyboard x:Key="L1Point" AutoReverse="False" Completed="CloseAnim_Completed" > <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="fx" Storyboard.TargetProperty="(L3)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0.8" /> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="fx" Storyboard.TargetProperty="(L4)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" /> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0.75" /> </DoubleAnimationUsingKeyFrames>
Where “fx” refers to our effect and (L3) to the handler of our texture.
2.Put the window as texture of the effect.
This one is simple. Create a Border to wrap the main Grid and add an effect to this Border.
<Border x:Name="myBorder"> <Border.Effect> <warp3D:WarpEffect Input="{Binding ElementName=win}" x:Name="fx"/> </Border.Effect> <Grid x:Name="LayoutRoot" Background="OrangeRed"> <!-- ... code ... --> </Grid> </Border>
and as you can see the Input parameter of the effect refers to “win” which is the name given to the window
<Window x:Class="WPFGeenieWindow.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:warp3D="clr-namespace:WarpShaderLibrary;assembly=WarpEffectLibrary3D" Title="Warp WPF Window " x:Name="win" > <!-- ... code ... --> </Window>
3. Make window transparent and re-arrange open/minimize/close buttons
This is a bit tricky. We are going to replace the top control bar with a custom one. So split the main grid into 2 rows, the first 30 px height and the rest to the app. Do not forget to manage the handle to drag around the window.
<Border x:Name="myBorder"> <Border.Effect> <warp3D:WarpEffect Input="{Binding ElementName=win}" x:Name="fx"/> </Border.Effect> <Grid x:Name="LayoutRoot" Background="OrangeRed"> <Grid.RowDefinitions> <RowDefinition Height="30"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!--close windo buttons--> <Grid Grid.Row="0" Background="#7825AA78" MouseLeftButtonDown="Grid_MouseLeftButtonDown"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" > <Button x:Name="MinimizeButton" Width="25" Height="25" Click="MinimizeButton_Click" FontSize="18" Content="-"/> <Button x:Name="ExitButton" Width="25" Height="25" Click="ExitButton_Click" FontFamily="Wingdings 2" FontSize="18" Content="V"/> </StackPanel> </Grid> </Grid>
and the fun parts:
a) handle the drag
private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { this.DragMove(); }
b) intercept the closing event
protected override void OnClosing(System.ComponentModel.CancelEventArgs e) { //allows shutdown if(!state.Equals("close")) e.Cancel = true; base.OnClosing(e); }
where state is a custom variable changed to be able to determine when closing and when minimizing. If not closing, cancel the action.
Here the wonderful app
and here the animation:
Here goes the full source code, as promessed. Hopefully lots comments 
will come, tell me your solutions/experiences.
Next time I’ll going to show another solution, more efficient for sure 
, based on this one.
Enjoy
-dave
Hello guys! This year CodeZero team decided to participate to Imagine Cup, the largest technology competition for students in the Hearth, organized by Microsoft.
Let me spend two words on Imagine Cup, before to dig into what we’ve done.
To participate to Imagine Cup students have to create a team and submit for one of the offered categories, which may vary each year. Main categories are:
- Software Design
- Embedded development
- Game Design
- Windows Phone 7
- ….
We all have a common theme, which can vary each year, but last two years was to reach one of 8 Millennium Goals.
The competition starts on August 1st and ends on April, but this is decided by each Country. In fact Students first participate to National finals and the first team on Software Design goes to World Finals.
This year in Italy we were 250 competitors, and each year the number is growing, which means, better competitors, and better softwares!
As CodeZero we developed a software called Flexy, and we placed 2nd for Software Design! It’s been a wonderful experience.
Flexy is a software that let you have a better way to Work. Our slogan is BETTER WORK, BETTER WORLD. It does not follow directly the 8 Millennium Goals, but what we thought is that, if we can have less dirty money floating around, let people find work more easily, a good way to organize the work, we can also export this good organization and have money to build schools, reduce the ignorance, do advertising campaign, to reach Millennium Goals.
Now, people said to us, “ok, but you can get money from everywhere, even buying an ice cream and give money to Millennium Goals”. True, but is not an organized massive way to do it, and does not teach something to the community.
But anyway we didn’t directly followed the Millennium Goals, even thought that our work was HUGE, and well organized and presented.
We were amazed how difficult for the jury was to decide among 6 complex softwares (finalists).
Another aspect of the competition was to meet companies that look for talents. We meet them and we’re really satisfied how things turned out well for us. We’ll see and we’ll update as soon as possible. So just for now we won’t open to everybody our secrets as we usually do, but we’ll share the advertising video for Flexy.
For people who speaks enough italian to read some articles we are proud to point out some good articles that talks about this competition and about us (plus all other guys and teams)
Links
Another good source is facebook with our own page, official Imagine Cup italian page, and the official italian blog (designed by Code Zero 
).
Comments are always appreciated!
-dave & roby
Heeeeeyyyy guys, I’m doing my best to keep on with courses, there goes the full source code I’m showing @ Uni in my Town:
Fist of all I want to show the full license, along with all files:
Microsoft Permissive License (Ms-PL)
This license governs use of the accompanying software. If you use the software, you accept this license. If you do not accept the license, do not use the software.
1. Definitions
The terms “reproduce,” “reproduction,” “derivative works,” and “distribution” have the same meaning here as under U.S. copyright law.
A “contribution” is the original software, or any additions or changes to the software.
A “contributor” is any person that distributes its contribution under this license.
“Licensed patents” are a contributor’s patent claims that read directly on its contribution.
2. Grant of Rights
(A) Copyright Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, each contributor grants you a non-exclusive, worldwide, royalty-free copyright license to reproduce its contribution, prepare derivative works of its contribution, and distribute its contribution or any derivative works that you create.
(B) Patent Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, each contributor grants you a non-exclusive, worldwide, royalty-free license under its licensed patents to make, have made, use, sell, offer for sale, import, and/or otherwise dispose of its contribution in the software or derivative works of the contribution in the software.
3. Conditions and Limitations
(A) No Trademark License- This license does not grant you rights to use any contributors’ name, logo, or trademarks.
(B) If you bring a patent claim against any contributor over patents that you claim are infringed by the software, your patent license from such contributor to the software ends automatically.
(C) If you distribute any portion of the software, you must retain all copyright, patent, trademark, and attribution notices that are present in the software.
(D) If you distribute any portion of the software in source code form, you may do so only under this license by including a complete copy of this license with your distribution. If you distribute any portion of the software in compiled or object code form, you may only do so under a license that complies with this license.
(E) The software is licensed “as-is.” You bear the risk of using it. The contributors give no express warranties, guarantees or conditions. You may have additional consumer rights under your local laws which this license cannot change. To the extent permitted under your local laws, the contributors exclude the implied warranties of merchantability, fitness for a particular purpose and non-infringement.