Graphic Stream : Silverlight

Le WriteableBitmap avec Silverlight 3

valentin — Fri, 28 Aug 2009 13:15:00 GMT

Le WriteableBitmap est l'une des évolutions majeure de Silverlight 3.

Il permet de repousser les limites d'affichage de Silverlight, cantonné jusque là au vectoriel, en donnant au développeur la possibilité de travail au niveau du Pixel. Avant Silverlight 3.0 la génération à la volée d'images n'était pas possible nativement. Il fallait soit télécharger l'image générée depuis un serveur soit créer son propre générateur/encodeur. Avec WriteableBitmap (qui hérite de BitmapSource) la génération d'images à partir d'algorithmes, de contrôles ou d'instruction est réellement un jeu d'enfant.

Génération à partir d'un contrôle

Quelques règles à prendre en compte :

Le contrôle doit avoir une taille supérieure à new Size(0,0) evidemment.
Le contrôle doit appartenir à l'arborescence visuelle.
Le contrôle doit être visible.

Le constructeur de la classe WriteableBitmap permet de charger un contrôle sous la forme d'une image en une instruction :

Image image = new Image();//le controle chager
BitmapImage source = new BitmapImage();
source.UriSource = new Uri("./Images/tunnelstonetex.png", UriKind.Relative);
image.Source = source;
this.LayoutRoot.Children.Add(image);
this.texture = new WriteableBitmap(image, null);//on charge le rendu de la texture dans la WriteableBitmap

Le second paramètre du contructeur WriteableBitmap permet de spécifier une transformation à appliquer au rendu de l'objet avant sa "rasterisation" en image. WriteableBitmap possède une méthode nommée Render qui réalise le même travail. Il est en effet possible de créer aussi une image vide en spécifiant simplement la largeur et la hauteur de l'image à créer afin de réaliser un rendu ultérieurement :

this.generatedTexture = new WriteableBitmap(400, 300);

Modification dynamique

Pour montrer la puissance de cette classe nous allons réaliser un rendu visuel dynamique basé sur l'effet du tunnel si cher à Vandevenne. Le but sera, au travers d'un dispatcher de modifier le contenu d'une texture à la volée à partir de valeur extraites d'un algorithme. Cette texture sera alors appliquée au background de notre contrôle root à l'aide d'un brush.

Lorsque la WritableBitmap est créée, l'accès aux pixels de l'image se fait simplement au travers du membre Pixels (array de type int). Attention à bien noter que l'encodage des pixels de l'image se fait en BGRA. L'accès aux différentes composantes d'une couleur ainsi codée se fait simplement au travers de ce type d'instructions :

byte B = (byte)(pixel & 0xFF); pixel >>= 8;
byte G = (byte)(pixel & 0xFF); pixel >>= 8;
byte R = (byte)(pixel & 0xFF); pixel >>= 8;
byte A = (byte)(pixel);

Les membres PixelWidth et PixelHeight donnent respectivement la largeur et la hauteur de la WriteableBitmap. En gros l'array Pixel est de taille PixelWidth*PixelHeight. Mais attention à ne surtout pas utiliser ces membres dans une phase de génération de texture, c'est à dire une phase où les performances doivent être optimales. L'accès à l'accesseur de ces deux propriétés est extremement lent (DepepdencyProperty et instructions itératives ne font pas bon ménage). On ciblera un pixel particulier sur l'image à générer de cette manière :

this.generatedTexture.Pixels[x + y * generatedTextureWidth] = color;

Dans cette instruction x et y représentent les "coordonnées" du pixel à cibler dans la texture. Pixels était un array à une dimension nous multiplions y par la largeur de la texture (le Stride). La valeur color est un entier qui représente la couleur à appliquer en (x,y).

Voilà c'est à peu près tout ce qu'il y'a à savoir su WriteableBitmap. Peut on imaginer plus simple ? Cet article s'accompagne d'un sample téléchargeable ici. Si vous le lancez vous obtenez la sortie suivante :

Utilisation

Les contextes d'utilisation de la WriteableBitmap sont multiples. Pour les jeux vidéos elle offre l'opportunité de pouvoir travailler comme nous l'avons dit au niveau du pixel a la manière de shaders :

Oui, je suis un grand fan de Might and Magic :)

Pour des outils professionnels elle offre de nombreuses possibilités comme par exemple une zoombox :

Un controle que je vendais en indépendant et que j'ai pu refaire à la sauce Silvelight grâce à WriteableBitmap

Ou encore de pouvoir simplement et efficacement réaliser des effets graphiques comme le montre le sample de cet article.

A bientôt sur ce Blog !

Valentin Billotte

Installation Silverlight 3.0 : The hash value is not correct.

valentin — Tue, 31 Mar 2009 07:42:00 GMT

Juste la honte pour Microsoft puisque c'est un bug connu déjà sous la 2.0 et qui n'est pas corrigé...

Si votre connection au réseau Internet n'est pas "directe" (genre derrière un proxy) vous pouvez vous recevoir en pleine figure un "The hash value is not correct." lors de l'installation de Silverlight 3.0.

L'astuce pour contourner cette erreur est relativement simple.

Faites tout d'abord une extraction de l'executable "Silverlight3_Tools.exe" à l'aide de la commande "Silverlight3_Tools.exe /x". Genre dans un répertoire situé dans "c:\prout".
Téléchargez le developper runtime pour la 3.0 ici Silverlight.3.0_Developer.exe
Placez cet executable dans le répertoire c:\prout qui contient déjà le contenu du "Silverlight3_Tools.exe" précédemment extrait.
Lancez SPInstaller.exe situé dans le répertoire c:\prout

L'installation devrait cette fois ci se terminer normalement.

EDIT : je viens de voir un site qui donne une réponse à tout un tas d'erreurs d'installation (il faut dire qu'avec l'équipe MS qui s'occupe des setup Silverlight, y'a du business à se faire ...) :

http://blogs.msdn.com/amyd/archive/2009/03/19/silverlight-tools-installation-error-codes.aspx

Ombre en Silverlight

valentin — Wed, 18 Mar 2009 03:13:00 GMT

Aujourd'hui pour faire une ombre sous un contrôle en Silverlight il n'y a pas beaucoup de possibilités.

Le faire en vectoriel s'avère difficile et on a l'habitude de passer par une image PNG, ce qui n'est pas forcement le plus optimisé.

Voici un simple code qui permet de corriger cela, et en vectoriel. Vivement l'ajout d'effet en Silverlight pour eviter de passer par ce genre de tips...

<UserControl x:Class="SmartInterface.TravelingPanel"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignWidth="640" d:DesignHeight="480"

Width="340" Height="340"

RenderTransformOrigin="0.5,0.5">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Border Name="ExternalBorder"

CornerRadius="10,10,10,10"

Background="#FF92B825"

BorderBrush="#FF6D8A17" BorderThickness="1"

RenderTransformOrigin="0.5,0.5">

<Border Name="InternalBorder"

CornerRadius="10,10,10,10"

Background="#FF92B825"

BorderBrush="#FFB7D265" BorderThickness="1">

<Rectangle.Fill>

<RadialGradientBrush.RelativeTransform>

</TransformGroup>

</RadialGradientBrush.RelativeTransform>

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

</Border>

</Grid>

</UserControl>

Les deux Border d'affilés provoquent cet effet d'ombrage réalisé relativement facilement et sutout très rapide à afficher pour le moteur graphique de votre plugin préféré. Le resultat est le suivant :

J'utilise un Border dans la mesure où le contrôle sur lequel j'applique un ombrage possède des cotés arrondis. Sur les contrôles carrés ou rectangulaires, l'utilisation du shape Line sera un meilleur choix. Enfin, il suffit de jouer sur la taille de la bordure (Thickness) pour affiner l'ombrage ainsi que le nombre de couche pour améliorer le rendu (ici de 0,60d à 0,10d).

A bientôt sur ce Blog !

Incompatibilité entre Silverlight 2b2 et Ado.Net Data Services avec le framework 3.5 SP1

valentin — Sun, 24 Aug 2008 15:12:00 GMT

L'installation du SP1 (VS 2008 SP1 et/ou framework 3.5 sp1) empêche les développements Software + Services entre Silverlight et ADO.Net Data services (Astoria). Deux bugs apparaissent :

Dans le cas où le Xap Silverlight se trouve sur le même domaine que les services Astoria vous optenez l'erreur suivante :

"Aucun constructeur sans paramètre défini pour cet objet."

{System.MissingMethodException: Aucun constructeur sans paramètre défini pour cet objet.
   à System.RuntimeTypeHandle.CreateInstance(RuntimeType type, Boolean publicOnly, Boolean noCheck, Boolean& canBeCached, RuntimeMethodHandle& ctor, Boolean& bNeedSecurityCheck)
   à System.RuntimeType.CreateInstanceSlow(Boolean publicOnly, Boolean fillCache)
   à System.RuntimeType.CreateInstanceImpl(Boolean publicOnly, Boolean skipVisibilityChecks, Boolean fillCache)
...

Dans le cas où Silverlight se trouve sur un autre domaine une autre erreur apparait sur l'appel à EndExecute après une requête Linq to Data services. :

System.InvalidOperationException occurred
Message="Failed to Invoke: callOpen."
StackTrace:
       at System.Windows.Browser.ScriptObject.Invoke(String name, Object[] args)
       at System.Data.Services.Http.ScriptObjectUtility.CallOpen(ScriptObject request, String method, String uri)
       at System.Data.Services.Http.HttpWebRequest.ScriptXmlHttpRequest.Open(Boolean async, String url, String method, Action OnReadyStateChange)
       at System.Data.Services.Http.HttpWebRequest.InvokeRequest(Boolean async)

La réponse de Pablo Castro à ce soucis est sans équivoque :

"Unfortunately, due to work arounds required for other aspects of Data Services functionality, cross-domain access is not supported in the Data Services client included in Silverlight Beta 2. We're working to sort out the issue for the RTM release."

En gros il faudra attendre la sortie de la rtm de Silverlight pour voir ces deux problèmes corrigés (prévu pour la fin de l'été, soit ... bientôt). D'ici là les équipes travaillant sur ces produits se contenteront d'un développement MVC en ne travaillant que sur la vue coté software et que sur les fonctionnalités métier coté services... en attendant de pouvoir relier le tout.

Plus d'infos sur :

http://blogs.msdn.com/astoriateam/archive/2008/08/12/compat-note-silverlight-beta-2-client-net-framework-3-5-sp1-server-components.aspx

(c'est quand même fou de voir de tels oublis/lacunes sur deux produits aussi liés ...)

Pourquoi je m'oriente vers Silverlight

valentin — Thu, 21 Aug 2008 03:14:00 GMT

Depuis mes débuts en développement j'ai toujours fait du lourd. Entendez par là du client Lourd. A savoir du Winform principalement, de l'API Win 32 et du Xna. J'ai commencé à aborder WPF il y'a deux ans. J'ai rapidement abandonné cette technologie estimant qu'elle n'avait pas un bel avenir devant elle. Je trouve qu'elle est extraordinaire et parfaitement bien conçue, mais elle ne répond pas au futur des besoins que demanderons les applicatifs dans les mois à venir.

Avant SIlverlight 2.0 bx, le plugin de Microsoft etait plus un jouet qu'un outil professionnel. Il montrait avec force ce qu'allait être Silverilght et ce que nous allions pouvoir en faire. Il manquait encore un grand nombre de fonctionnalités, les fonctionnalités existantes n'étaient pas pérennes et les outils de développements associés n'était pas forcement stables...

L'arrive des 2.0 bx change la donne. Il s'agit d'un version reconnue par Microsoft comme étant Go Live. Microsoft s'engage donc a fournir un support et donc à ce qu'une société puisse répondre à ses exigences métier et graphique via cette technologie. C'est le point important à avoir en tête. Bien entendu Silverlight est un sous ensemble de WPF. Je suis tout à fait conscient qu'un développement graphique avec WPF ne sera pas forcement plus rapide mais utilisera des technologies Built in que nous n'auront pas coté Silverlight. Le développeur aura ainsi à travailler coté code .net là où avec WPF il aurait opéré coté Xaml. Je ne pense pas que ce soit réellement handicapant.

Ce qui me pousse vers Silverlight c'est d'imaginer l'avenir proche. Les applications lourdes vont progressivement péricliter sans toutefois disparaitre. La plupart des utilisateurs seront connectés à Internet à souhait depuis leur téléphone portable (chez orange Internet illimité c'est 6 euros par mois, les principaux opérateurs lancent même des mini pc uniquement dédiés à Internet). Ce qui sera important sur un ordinateur ce n'est plus son système d'exploitation mais son browser. Sa capacité à profiter d'internet et surtout les plugins qu'il peut recevoir. Il fut un temps où Microsoft n'avait pas peur d'offrir des API non multi plateforme obligeant les applicatifs à ne tourner que sous un Windows xXx. Face à ce changement majeur de mentalité, des technologies comme l'API Win 32, WinForm, et même WPF prennent un gout amer. On entend toujours parler d'une bataille entre le monde Windows et le monde Unix. Mais pour la plupart des Internautes ce combat est complètement inintéressant et dépassés ; Ce qu’ils recherchent avant tout c'est comment lancer le navigateur pour accéder aux sites de communautés, pour accéder aux mails, aux sites de recherche, etc. Si bien que ces derniers temps, on parlait plus de la bataille entre Internet Explorer 8 et le dernier Mozilla. Les deux sociétés derrière ces navigateurs rivalisent d'ingéniosité pour offrir plus de services aux utilisateurs. C'est seulement le browser qui donnera une chance pour l'internaute lambda de rester sur un système d'exploitation. Windows a encore de beaux jours devant lui grâce à la politique Marketing de Microsoft et parce que, en entreprise, le parc d'applications lourdes tournant sous son système est important. Ajoutons à cela que les outils de développement qu'elle offre sont les plus efficaces. Mais cet aspect des choses n’aura aucun intérêt pour les milliards d'internautes à venir qui utiliseront le réseau des réseaux.

Utiliser Internet se fait depuis n'importe quel système d'exploitation, depuis n'importe quel mobile, depuis n'importe quelle borne d'accès de n'importe quelle galerie commerciale. Plus une société offrira un moyen d'exploiter Internet de manière intelligente plus son avenir est assuré. Les IPhones de Mac, le futur portable de Google. Microsoft toujours numéro en terme de système d'exploitation mobile avec Windows Mobile va rapidement placer Silverlight sur ce créneau là pour suivre le mouvement. Ce que Microsoft anticipe aussi c'est le besoin d’applications riches composées d'une couche vue et d'une couche controleur sans aucune spécification d'accès aux données. Il estime aussi un autre besoin important : internet en tant que plateforme de service et non plate forme réseau. Une infinité de services sur Internet auxquels les applicatifs riches vont le connecter pour remplir leur interface. Un tel système applicatif suivra toujours la même procédure : l'utilisateur télécharge l'application depuis le browser (pour Silverilght un Xap) de manière transparente. Le browser lance l'application, l'application s'initialise, charge son interface et se connecte à différents agrégats de services (ou mashups) pour remplir son contenu. L'interaction avec les services se fait via cette interface réglementée et offerte par le fournisseur. Google place son modèle économique là dessus. Nombre de ses services sont gratuits... mais limités. Chacun d'eux amène sur un autre service ... limité. Le tout entrecoupé de publicités. L'accès à des services plus complet sera bien évidemment payant. Microsoft ne peut plus se baser uniquement sur son modèle économique à base de Windows et D'Office mais doit suivre ce modèle.

On ne doit pas limiter un applicatif et l'accès à des services à une configuration de machine on doit la rendre accessible sans limites (je n'inclus pas ici les aspects commerciaux dans le "sans limites"). WPF peut être très utile dans le cadre de besoins bien précis. Là ou le besoin de technologies que le browser et ses plugins ne peuvent pas offrir. Je pense à la 3D, je pense au mode offline (bien que le terme offline risque de devenir rapidement désuet avec Live Mesh) ou bien encore des outils de développement. Je verrais plus ce type d'applicatifs "ponctuels" en WPF qu'en Silverlight.

La conclusion de tout cela c'est que pour faire connaitre une application et pour toucher un maximum de personne ce n'est plus au développement Windows qu'il faut penser mais au développement RIAs. Dans ce domaine, Silverlight avec la technologie .Net les environnements de développement Microsoft et Windows Mobile a une réelle carte à jouer. Ajoutons qu’avec Live Mesh (plateforme de stockage en lien avec un support de synchronisation), SQL Server Data Service (base de données en ligne) et ADO.NET Data services, Microsoft avance à grand pas sur sa stratégie Software + Services (autre manière de parler du SaaS - Software As A Service).

Il s’agit de faire du réseau un fournisseur de services et plus seulement un moyen physique de faire transiter des données. Tout cela contribue à orienter le système d'information vers une architecture de services où les clients riches tissent des liens sur le réseau vers des services de données hétéroclites, formatent les données puisées de manière à répondre au besoin spécifique du client : c’est ça l’informatique à la demande.

Aujourd'hui mes technologies de prediclections passent par Silverlight, le Framework Entity, ADO.NET Data Services et Xna (for ever :) )