Yet another blog about WPF, Surface, SL, MVVM, NUI....






How to create an hand writing to text control (ink recognizer)

25 October 2010

When building a (multi)touch application you may need one nice feature : translate hand-written text to real words. This open a whole new world full of possibilities like starting some actions when keywords are recognized or simply allow the users to write some text for later use. 

In this post we'll see all the step to create an hand writing to text control and how to tune it.

Continue reading...


Tips: increase performances when using D3DImage in WPF

17 September 2009


Often when you read articles explaining how to use a D3DImage in your WPF application you use code which directly handle the CompositorTarget.Rendering event by updating the 3D world... This can lead to performance problems.

For example in my application, WPF refresh the display with a FPS of 160 : the handler which recreate the 3D image is then call 160 times a second. No need to refresh this often.

The solution I used is to create a Timer which will do it at the FPS I want. Let's say 30FPS for example :

public void createTheRenderingWithCorrectFPS(int whichFPS){
   DispatcherTimer _timer = new DispatcherTimer();
   _timer.Interval = new TimeSpan(1000 /whichFPS);
   _timer.Tick += new EventHandler(_timer_Tick);
void _timer_Tick(object sender, EventArgs e)
   //Refresh the 3D scene

This enables your application to be really more reactive especially that you need to be on the main thread to update the 3D scene...

Do you know a better way ?

kick it on Shout it


Create your VideoPlayer with JavaFX, part two.

14 December 2008

Let's continue pur story about creating our own media player

What will we do in our second part ? :

  1. Display the meta-information of our video.
  2. Create animation and triggers to show it in a non-disturbing way.
  3. Add some triggers to our video : play/pause on click.
  4. Double-clic to resume the video
  5. Enjoy ourselves!

Display the meta-informations in a non-disturbing way

We already have all the informations to display because we gived them to our component.
Now we will display them in an header: Videoplayer's metainformation header

First we create the gray rectangle which is behind the meta-information and the two differents text. We will add them to a group to ease the use of trigger to show/hide them.

/** ###########################################
    * The Top Rectangle of description
     *   ########################################### */
    var topRDescription : Rectangle = Rectangle{
        height: 40
    var titleText: Text =  Text{
        x:topRDescription.x + 10
        y: topRDescription.y + 25
        textOrigin: TextOrigin.BOTTOM
        content: bind vidTitle
        font: Font.font("Verdana", FontWeight.EXTRA_BOLD, 18)
    var descriptionText: Text =  Text{
        x:topRDescription.x + 10
        y: topRDescription.y + 35
        content: bind vidDescription
        font: Font.font("Verdana", FontWeight.MEDIUM, 10)
    var groupVidMETA : Group = Group{
        content: [topRDescription,titleText,descriptionText]
        cursor: Cursor.DEFAULT
        opacity: 0.0
        visible: bind showInfoBar

Don't forget to add it in the returned Group of our component:

return Group{
            content: [mediaView,groupVidMETA]

You can see that the visibility of our meta-information's bar is bind to a var showInfoBar. This is on this var that we will act to show/hide the bar. Sets this var to true and the informations will be displayed all the time... this is cool but quite boring when you want watch the movie which is behind. We will so add some animations to display it in a non disturbing way.

Create animation and triggers to show it in a non-disturbing way.

We will now display the bar only when the mouse is hover the video or when the video is paused.
To do this we will use the opacity of the bar and add animation in the MediaView's node triggers. Remember the MediaView is the node in which the media is displayed.
Resume of the things to do :

  • Add the onMouseEntered trigger to the MediaView,
  • Creates and play an animation in it which will set the groupVidMETA'opacity from it's current state to 1 in 500ms.
  • Add the onMouseExited trigger to the MediaView and add an animation to hide the meta's info only if the video is not paused.

The resulting mediaView var is then :

//The node displaying the video   
    var mediaView : MediaView = MediaView{
        mediaPlayer: bind mediaPlayer
          //Show the informations in an animation.
        onMouseEntered: function(me: MouseEvent){
            Timeline {
                keyFrames: [
               at(0s) {
                    groupVidMETA.opacity =>    groupVidMETA.opacity tween Interpolator.LINEAR;
                    groupControlBar.opacity => groupControlBar.opacity  tween Interpolator.LINEAR;
                  at(500ms) {
                    groupVidMETA.opacity => 1.0 tween Interpolator.LINEAR;
                    groupControlBar.opacity => 1.0 tween Interpolator.LINEAR;
        //Hide the informations in an animation if the video is not paused.
        onMouseExited: function(me: MouseEvent){
            if(mediaPlayer.status != MediaPlayer.PAUSED){
                Timeline {
                    keyFrames: [
               at(0s) {
                        groupVidMETA.opacity => groupVidMETA.opacity  tween Interpolator.LINEAR;
                  at(500ms) {
                        groupVidMETA.opacity => 0.0 tween Interpolator.LINEAR;

We are abble to know if the video is paused by accessing the mediaPlayer's status and comparing it to it's PAUSED def.
Now that informations are displayed, we will add triggers to play or pause the video.

Add some triggers to our video : play/pause on click.

This is done by adding a onMouseClicked trigger to our mediaView Component. We will also check that it's the left button that is clicked to perform the play/pause and reserve the right button to maybe future functionnality.
Also we will set the cursor to the HAND def: tell our watcher that they can do something by clicking the video.
This is what we add to our mediaView component:

        onMouseClicked: function(me: MouseEvent){
            //Only a left click play/pause the video
            if(me.button == MouseButton.PRIMARY ) {
                if(mediaPlayer.status == mediaPlayer.PAUSED){
                }else {

Enjoy ourselfs

You can find our component source in this post and view a demo on this page: demo of the videoPlayer - part 2.
It can be long to load... My server fault ...