Archive for the 'Composants' Category


Yet another Lite 3D Engine to release

Aucun commentaire

Je mettrai en ligne courant de l'été une première release de la librairie Tweened. Celle-ci contient notamment, des composants, des behaviors, un wrapper de tween (facilitant la conception d'animation par code) ainsi qu'un mini moteur 3D très simple d'utilisation. En voici un exemple concret téléchargeable ici :

Install Microsoft Silverlight

J'ai fais ce moteur avant tout pour des besoins personnels et afin de me remémorer les mathématiques projectives. Réinventer la poudre ne fais quelques fois pas de mal. L'idée est surtout de fournir une dll de moins de 40ko qui permet de faire de la 3D. Celle-ci sera utilisable pour les designers à travers Blend ou dans Visual Studio via C#.  Elle concentrera très vite toutes les fonctionnalités de base réellement utiles et que nous n'avons pas  actuellement via Blend : Caméra 3D, Container 3D, Scène 3D, détection des normales et z sorting intelligent (plus malin et performant que celui actuellement proposé dans Blend). J'y ajoute une classe utilitaire facilitant l'utilisation de mathématiques projectives.

Voilà ces composants :

  1. Un conteneur de type Scene3D (hérite de Panel).
    Tous les objets placés en sont sein voient leur propriétés Projection native lockée. Ceux-ci peuvent utilisées les propriétés attachées suivantes :

    • Scene3D.LocalOffsetX
    • Scene3D.LocalOffsetY
    • Scene3D.LocalOffsetZ
    • Scene3D.GlobalOffsetX
    • Scene3D.GlobalOffsetY
    • Scene3D.GlobalOffsetZ
    • Scene3D.RotationX
    • Scene3D.RotationY
    • Scene3D.RotationZ

    Ils sont associés à une instance de type Element3D. Celle-ci est récupérable (lorsque l'événement StartUp de la scène 3d est diffusé) via une méthode d'extension ajoutées pour les instances d'UIElement (GetElement3D).

  2. Une caméra associée au conteneur Scene3D. Celle-ci offre les propriétés suivantes :
    • FieldOfView
    • Plan de clipping proche : NearPlane
    • Plan de clipping éloigné : FarPlane
    • Point de fuite (XVanishingPoint, YVanishingPoint)
    • Déplacement (OffsetXCamera, OffsetYCamera, OffsetZCamera)
    • Rotation (RotateXCamera, RotateYCamera, RotateZCamera)

Détection du changement de direction de la normale (Backface culling) et du produit scalaire via les événements NormalDirectionChanged et DotProductChanged. Ces événements sont diffusés par les instances de type Element3D.

Je suis en cours de finition d'un algorithme de tri des profondeurs. Ce moteur devrait être assez optimisé car son rendu ne repose pas sur un DispatcherTimer. Deplus, le pipeline de rendu est assez optimisé car il n'est pas récursif par défaut. Lorsqu'un seul objet est modifié, ce dernier invoque en interne une méthode RenderElement. A contrario, lorsque la scène ou la caméra sont modifiées, il devient récursif et met à jour l'ensemble des objets de la scène... A bientôt donc pour la release finale de la librairie Tweened...

Silverlight Smooth Streaming plugin for WordPress

Aucun commentaire
Get Microsoft Silverlight

Je mets en ligne un nouveau plugin wordpress produit par Regart.net. Il s'agit d'un lecteur vidéo smooth streaming également capable de lire une vidéo standard au format wmv, ou mov, mp4 (lorsque la vidéo est encodée en H264). Il vous faudra tout de même héberger la vidéo sur un serveur IIS si vous souhaitez bénéficier du smooth streaming. Le configurer est relativement simple puisque nous fournissons une fenêtre d'administration côté WordPress. Celle-ci possède un aperçu du lecteur, la possibilité de modifier la couleur, l'url de la vidéo, la lecture automatique, les dimensions ainsi que la couleur de fond du player. Celui-ci vous avertit, lorsque la vidéo n'est pas hébergée sur votre serveur, des contrainte de sécurité que vous pourriez rencontrer (crossdomain.xml ou clientaccesspolicy.xml nécessaire et configuré).

J'ai réalisé la conception côté Silverlight mais je n'ai pas utilisé pour cela le player fourni par Microsoft. J'ai préféré utiliser la librairie SLExtensions conçues par la société Ucaya spécialisée dans la conception de ce type de lecteur. Par le passé, Ucaya a réalisé les players du "Tour de France", "Rolland Garros", "France Télévision" et j'en passe. Quels sont les avantages me direz-vous ? C'est tout simple. Tout d'abord les fonctionnalités apportée par la librairie sont ultra complètes. De plus, celle-ci offre la possibilité de faire du Full MVVM, Du coup l'interface est entièrement Designable (bien mieux que skinnable). Pour finir, sa conception est assez fine car elle permet d'instancier un MediaElement ou l'équivalent pour le smooth streaming selon le type d'url que vous fournissez : ism et isml pour le smooth streaming et wmv, mov, mp4 (H264) pour les vidéos standards. Il est donc possible de faire un player à la carte et d'éviter l'arsenal fourni par la librairie SMF de Microsoft.

Si vous souhaitez faire la différence entre les différents modes de diffusion existant, vous pouvez consulter les schémas ci-dessous.

Get Microsoft Silverlight

Ceux-ci sont directement issus de mon livre Pratique de Silverlight aux éditions Pearson. Vous pouvez consulter de nombreux schémas présent dans le livre sur le blog dédié.

Galerie WordPress en Silverlight

1 commentaire

J'ai récemment participé au développement d'un plugin pour wordpress au côté de Boris Forconi. Celui-ci est basé en partie sur celui de Tim Heuer. L'idée était de créer une galerie Silverlight en utilisant l'API wordpress mais en développant la galerie elle-même en Silverlight. Boris s'est occupé de toute la partie PHP et de l'intégration à Wordpress. Pour ma part, j'ai développé la partie Silverlight. L'objectif est de fournir un moyen simple de mettre des images en ligne pour Wordpress comme montré ci-dessous :

Get Microsoft Silverlight

Il suffit d'écrire une balise de type : [sl-gallery: ...]

Vous pouvez définir les paramètres comme indiqué dans l'exemple ci-dessous :

  • width=400
    //définit la largeur de la galerie à 400 pixels
  • height=400
    //définit la hauteur de la galerie à 400 pixels
  • leftArrow=true
    //affiche ou cache la flèche de gauche
  • rightArrow=true
    //affiche ou cache la flèche de droite
  • pageNumbers=true
    //affiche ou cache la pagination
  • thumbnails=true
    //affiche ou cache les vignettes
  • fill=uniform
    //permet d'indiquer un mode de remplissage vous avez le choix entre :
    //   uniform (remplissage homothétique partiel selon possibilité)
    //   uniformtofill (remplissage avec homothétie)
    //   fill(remplissage avec déformation les dimensions)
    //   none (préserve les dimensions originales)
  • bgcolor
    //couleur d'arrière plan
  • bgmode
    //sans arrière plan ou avec arrière plan windowless

La première bonne nouvelle, c'est qu'il est possible d'utiliser un menu pour paramétrer tout ça en 2 secondes. Il s'ajoute à l'administration des articles Wordpress. Une petite fenêtre apparaît lorsque vous cliquez sur le bouton (voir ci-dessous).


La seconde bonne nouvelle, c'est que nous mettrons rapidement les sources à disposition sur wordpress.com. De cette manière vous pourrez modifier entièrement le visuel de la galerie côté Silverlight. Dans tous les cas, celle-ci récupère dynamiquement les images de la galerie Wordpress. Vous pouvez en télécharger une première version ici.

Free ColorPicker and ColorChooser custom controls

13 commentaires

Je mets en ligne deux nouveaux composants exposés ci-dessous :

Install Microsoft Silverlight


Vous pouvez  télécharger la librairie tweenedcontrols ici.

ColorChooser
Depuis sa version beta, ce contrôle a été largement améliorée. Il est désormais possible de cliquer directement sur la surface des deux nuanciers pour sélectionner une couleur. La propriété SelectedColor est cette fois de type Color. Tous les tests d'écriture d'une couleur sont directement accomplis par cette classe. Cela simplifie beaucoup le code et évite l'utilisation d'une classe de conversion.

ColorPicker
Ce composant a pour but de faire apparaitre un ColorChooser via l'utilisation interne d'une instance de Popup. Toute la problématique consiste à placer le ColorChooser à côté du ColorPicker. À cette fin, j'ai créé une méthode d'extension pour la classe Popup. Il est également possible d'accéder au style et template du ColorChooser directement par l'intermédiaire des menus Edit Template=> Edit Aditional Template comme montré ci-dessous.


ColorPicker possède la propriété de dépendance IsOpen couplée aux événements Opened et Closed.
Mis à part cette astuce ce contrôle se contente d'exposer, les propriétés et événements du ColorChooser.

PieProgressBar custom control

Aucun commentaire

Pour les besoins d'une production récente, j'ai du concevoir un contrôle de progression circulaire nommé PieProgressBar. Ce dernier hérite de la classe RangeBase et bénéficie à ce titre de toutes les capacités inhérentes à ce type de contrôle. Il se comporte au final comme n'importe quel contrôle de type ProgressBar avec quelques petites choses en plus. La petite difficulté fut de créer dynamiquement le camembert de progression via C#. Contrairement à WPF, Silverlight ne permet pas de surcharger de méthode permettant de créer de nouveaux genres de Shape. Autrement dit, même si Shape est une classe abstraite, il ne sert à rien d'en hériter car la méthode de conception du tracé ne peut être surchargée.
L'autre technique consiste à utiliser le "Path mini language" qui permet de créer des figures géométriques en XAML. J'ai du utiliser 3 segments dont un ArcSegment afin de réaliser ce contrôle. comme je ne pouvais pas créer de primitive Pie pour le graphiste sous Blend, il a fallu ruser... La technique consiste a créer dynamiquement le camembert lors de l'assignation d'une partie de contrôle (ControlPart). En interne, les propriétés de remplissage du tracé généré, sont liées aux propriétés du contrôle via une simple liaison de données créées cote C#.
Vous pouvez en voir des exemplaires ci-dessous et télécharger la librairie tweenedcontrols ici.

Install Microsoft Silverlight

Une fois la dll référencée, vous pouvez instancier des contrôle PieProgressBar dans Blend via le panneau Assets comme montré ci-dessous :

Ce composant va être sans doute inclu comme d'autres dans le projet CodePlex SLExtensions que Thierry Bouquain met à jour en ce moment et que je salue au passage :)

CustomControl ColorChooser and ColorPicker

Aucun commentaire

J'ai récemment eu besoin de contrôles personnalisables de type ColorPicker et ColorChooser, n'en trouvant pas, je les ai conçu from scratch, voici une démo.

Install Microsoft Silverlight

Ceux-ci sont en version bêta mais je pense fournir une version finale d'ici le 15 novembre. En attendant, si vous souhaitez tester ces contrôles et télécharger la dll pour test dans SL3, c'est ici.

Ps : le plugin Silverlight pour WordPress fourni par Tim Heuer est vraiment performant et très utile, merci à lui, je n'utiliserai plus que cette solution :)

Silverlight 2 Toolkit

Aucun commentaire
    La technologie et les outils de développement Silverlight s'adaptent au marché et c'est une bonne nouvelle :) .     

         On pouvait en effet penser qu'après la sortie de la version 2 finale , une légère pose viendrait stopper le rythme tonitruant des releases en tout genre autour de Silverlight. C'était sans compter Microsoft qui répond d'emblée à certaines critiques que l'on pouvait faire concernant le manque de contrôles accessibles au sein des projets Silverlight. La réponse à la fois souple et pratique  à mettre en place consiste à fournir une boîte à outils facile à installer et à mettre à jour gratuite.

    Controls Example

         Le "Silverlight Toolkit" contient notamment un jeu de composants inédits et totallement gratuits dont certains proviennent de WPF et d'autres sont simplement nouveaux. Le toolkit n'étant pas figé dans le temps celui-ci s'étoffera de nouveaux autres composants dans l'avenir. Ceux-ci sont donc classés en 4 catégories indiquant leur maturité : Experimental, Preview, Stable, Mature. On imagine facilement à quoi ils correspondent, si vous souhaitez des précisions c'est ici :) . Voici le liste des composants par phase :

    • Preview
      • AutoCompleteBox
      • ButtonSpinner
      • Charting
      • Expander
      • ImplicitStyleManager
      • NumericUpDown
      • Spinner
      • UpDownBase
      • Viewbox
    • Stable
      • DockPanel
      • HeaderedContentControl
      • HeaderedItemsControl
      • Label
      • TreeView
      • WrapPanel

         La bonne nouvelle concerne notamment les "Charts Components" qui donne à la technologie Silverlight 2 la possibilité de réellement s'orienter vers la création d'applications interactive riche. 

         Mais ce ce n'est pas tout, le Toolkit permet également l'utilisation de styles implicit comme on peut le faire à la main dans WPF via des thèmes. Certains sont déjà fournis comme ci-dessous mais vous pourrez les créer vous-mêmes via l'utilisation des Dictionnaires de Ressources qui centralisent les styles :) . Les graphistes apprécieront également la ViewBox.

    Themes Quick Reference

    Expression Dark Thumbnail Expression

    Dark

    Expression Light Thumbnail Expression

    Light

    Rainier Orange Thumbnail Rainier

    Orange

    Rainier Purple Thumbnail Rainier

    Purple

    Shiny Red Thumbnail Shiny

    Red

    Shiny Blue Thumbnail Shiny

    Blue   

     

     

         Les dictionnaires de ressources pointent donc leur nez et on imagine facilement ce qu'on aura prochainement dans Blend. Ce qui est plutôt pas mal c'est que changer le "look and feel" d'une application sera possible à l'exécution, les utilisateurs pourront donc personnaliser leur interface applicative directement. Je mettrai en ligne plusieurs exemple en attendant voici un lien vers les tutoriaux US, et me dites pas que Justin Angel n'est pas un jeu de mot ou un nom de super héros...