Archive

Archive for novembre 2009

[WPF4] : Présentation de l’architecture interne

Comme vous le savez tous WPF 4 et Silverlight 4 ont été les stars de la derniere représentation de Microsoft à savoir la PDC09.

L’une d’entre elles parlait du coeur de WPF 4 que je vous recommande plus particulièrement !

image

WPF4 Plumbing and Internals

Un must see pour ceux qui ne comprennent pas pourquoi leurs applications WPF (et il en est de meme pour SL4) sont lentes et gourmandes. Et par la même occasion découvrir les bases de l’optimisation de cette superbe technologie 🙂

Publicités
Catégories :WPF, WPF4

[SL3] : Victoria’s Secret

Un nouveau site silverlight vient de voir le jour et il n’est pas le plus déplaisant à regarder !

image image

Plus d’informations sur le site officiel ici

Catégories :Silverlight, Silverlight 3

[WPF] : Facebook client Fishbowl

image

image

image

Microsoft vient de mettre en ligne une toute nouvelle application WPF 3.5 SP1 ClientProfile et ClickOnce !, permettant d’acceder à son profil Facebook.

image image

Celle-ci est présentée comme une application de référence utilisant au mieux les fonctionnalités proposés par la plateforme WPF et Windows 7.

Par ailleurs Microsoft à utilisé le Toolkit FaceBook disponible ici

Le code source intégral de l’application est disponible ici

Catégories :WPF

[SL3] : JPG thumbnail d’une image JPG ou PNG en Silverlight 3

Update 22.11.2009 : Avec cette technique vous pouvez aussi réaliser une miniature de fichiers PNG mais la sortie sera un fichier jpg.  Modifiez la ligne par : ofd.Filter = « Fichiers image|*.jpg;*.jpeg;*.png »;

La version actuelle de silverlight ne propose pas (nativement) de composants permettant l’encodage d’images comme on pourrait le faire en WPF. Cela dit certains projets permettent à présent de réaliser cela mais la tache n’est pas forcement aisée. Cette technique peut être utilisé afin de compresser et retailler une image avant de l’envoyer au serveur (via un service WCF par exemple), les gains sont multiples : 

  • utilisation de la bande passante réduite au minimum
  • réactivité de l’application
  • meilleur disponibilité de la plateforme de service et donc des serveurs

Ayant été confronté à ce problème récemment, je vous propose mon retour sur expérience dans le domaine ! 

Pré requis

Librairie FJCore (permettant d’encoder des fichiers en JPG) que vous pourrez trouver ici 

La classe ImageHelpers !

Voici ma classe utilitaire permettant de compresser et retailler facilement une image provenant d’un stream (exemple d’un OpenFileDialog). Il est question ici d’une classe qui a fait son apparition dans Silverlight 3 (connue en WPF) : WritableBitmap. La clé de la réussite résulte dans le rendu du controle image dans un WritableBitmap et de convertir celui-ci via la librairie FJCore afin d’obtenir des données encodées au format JPG. 

		/// <summary>
		/// Compresse et réduit une image JPG
		/// </summary>
		/// <param name="stream">Stream de l'image à compresser</param>
		/// <param name="maxSize">Taille maximun de l'image compressée</param>
		/// <param name="quality">Qualité de compression JGP (0 - 100)</param>
		/// <returns>Tableau de byte contenant l'image compressée</returns>
		public static byte[] CompressImage(Stream stream, Int32 maxSize, Int32 quality)
		{
			BitmapImage imageSource = null;
			Int32 width = 1;
			Int32 height = 1;

			//Création d'un BitmapImage depuis le Stream
			imageSource = new BitmapImage();
			imageSource.CreateOptions = BitmapCreateOptions.DelayCreation;
			imageSource.SetSource(stream);

			//Calcul de la largeur et de la hauteur
			if (imageSource.PixelWidth > imageSource.PixelHeight)
			{
				width = imageSource.PixelWidth * maxSize / imageSource.PixelHeight;
				height = maxSize;
			}
			else
			{
				width = maxSize;
				height = imageSource.PixelHeight * maxSize / imageSource.PixelWidth;
			}

			//Création du WritableBitmap de sortir
			WriteableBitmap w = new WriteableBitmap(width, height);

			//image qui va nous servir générer le thumbnail
			Image i = new Image();
			i.Stretch = Stretch.Uniform;
			i.Source = imageSource;
			i.Height = height;
			i.Width = width;

			//on effectue un rendu de l'image dans le WritableBitmap ! et on obtient l'image miniature !
			w.Render(i, null);
			w.Invalidate();

			//on convertie le WritableBitmap
			return ConvertToBytes(w, quality);
		}

Ensuite il faut convertir le WritableBitmap en raster et compresser celui-ci en flux JPG (entrent en scene la librairie FJCore) et ainsi récupérer les bytes de la miniature ! 


		/// <summary>
		/// Obtient les bytes correspondant à un WritableBitmap dans un format JPG
		/// </summary>
		/// <param name="bitmap">Le bitmap à traduire en bytes</param>
		/// <param name="quality">Qualité de compression JGP (0 - 100)</param>
		/// <returns>Tableau de byte contenant l'image compressée</returns>
		private static byte[] ConvertToBytes(WriteableBitmap bitmap, Int32 quality)
		{
			int width = bitmap.PixelWidth;
			int height = bitmap.PixelHeight;
			int bands = 3;
			byte[] jpgBinaryData = null;
			byte[][,] raster = new byte[bands][,];

			//Génération du raster de l'image
			for (int i = 0; i < bands; i++)
			{
				raster[i] = new byte[width, height];
			}

			for (int row = 0; row < height; row++)
			{
				for (int column = 0; column < width; column++)
				{
					int pixel = bitmap.Pixels[width * row + column];
					raster[0][column, row] = (byte)(pixel >> 16);
					raster[1][column, row] = (byte)(pixel >> 8);
					raster[2][column, row] = (byte)pixel;
				}
			}

			//Creation d'une image FJCore
			FluxJpeg.Core.ColorModel model = new FluxJpeg.Core.ColorModel
			{
				colorspace = FluxJpeg.Core.ColorSpace.RGB
			};

			FluxJpeg.Core.Image img = new FluxJpeg.Core.Image(model, raster);

			//encodage de l'image en JPG et compression de celle ci
			using (MemoryStream stream = new MemoryStream())
			{
				JpegEncoder encoder = new JpegEncoder(img, quality, stream);
				encoder.Encode();

				stream.Seek(0, SeekOrigin.Begin);
				jpgBinaryData = new Byte[stream.Length];
				stream.Read(jpgBinaryData, 0, (int)stream.Length);
			}

			//on renvoie les bytes de l'imgae compressée
			return jpgBinaryData;
		}

Voici le code source complet : 

using System;
using System.Windows.Controls;
using System.Windows.Media;
using System.IO;
using System.Windows.Media.Imaging;
using FluxJpeg.Core.Encoder;

namespace SilverlightThumbnails
{
	public class ImageHelpers
	{

		/// <summary>
		/// Compresse et réduit une image JPG
		/// </summary>
		/// <param name="stream">Stream de l'image à compresser</param>
		/// <param name="maxSize">Taille maximun de l'image compressée</param>
		/// <param name="quality">Qualité de compression JGP (0 - 100)</param>
		/// <returns>Tableau de byte contenant l'image compressée</returns>
		public static byte[] CompressImage(Stream stream, Int32 maxSize, Int32 quality)
		{
			BitmapImage imageSource = null;
			Int32 width = 1;
			Int32 height = 1;

			//Création d'un BitmapImage depuis le Stream
			imageSource = new BitmapImage();
			imageSource.CreateOptions = BitmapCreateOptions.DelayCreation;
			imageSource.SetSource(stream);

			//Calcul de la largeur et de la hauteur
			if (imageSource.PixelWidth > imageSource.PixelHeight)
			{
				width = imageSource.PixelWidth * maxSize / imageSource.PixelHeight;
				height = maxSize;
			}
			else
			{
				width = maxSize;
				height = imageSource.PixelHeight * maxSize / imageSource.PixelWidth;
			}

			//Création du WritableBitmap de sortir
			WriteableBitmap w = new WriteableBitmap(width, height);

			//image qui va nous servir générer le thumbnail
			Image i = new Image();
			i.Stretch = Stretch.Uniform;
			i.Source = imageSource;
			i.Height = height;
			i.Width = width;

			//on effectue un rendu de l'image dans le WritableBitmap ! et on obtient l'image miniature !
			w.Render(i, null);
			w.Invalidate();

			//on convertie le WritableBitmap
			return ConvertToBytes(w, quality);
		}

		/// <summary>
		/// Obtient les bytes correspondant à un WritableBitmap dans un format JPG
		/// </summary>
		/// <param name="bitmap">Le bitmap à traduire en bytes</param>
		/// <param name="quality">Qualité de compression JGP (0 - 100)</param>
		/// <returns>Tableau de byte contenant l'image compressée</returns>
		private static byte[] ConvertToBytes(WriteableBitmap bitmap, Int32 quality)
		{
			int width = bitmap.PixelWidth;
			int height = bitmap.PixelHeight;
			int bands = 3;
			byte[] jpgBinaryData = null;
			byte[][,] raster = new byte[bands][,];

			//Génération du raster de l'image
			for (int i = 0; i < bands; i++)
			{
				raster[i] = new byte[width, height];
			}

			for (int row = 0; row < height; row++)
			{
				for (int column = 0; column < width; column++)
				{
					int pixel = bitmap.Pixels[width * row + column];
					raster[0][column, row] = (byte)(pixel >> 16);
					raster[1][column, row] = (byte)(pixel >> 8);
					raster[2][column, row] = (byte)pixel;
				}
			}

			//Creation d'une image FJCore
			FluxJpeg.Core.ColorModel model = new FluxJpeg.Core.ColorModel
			{
				colorspace = FluxJpeg.Core.ColorSpace.RGB
			};

			FluxJpeg.Core.Image img = new FluxJpeg.Core.Image(model, raster);

			//encodage de l'image en JPG et compression de celle ci
			using (MemoryStream stream = new MemoryStream())
			{
				JpegEncoder encoder = new JpegEncoder(img, quality, stream);
				encoder.Encode();

				stream.Seek(0, SeekOrigin.Begin);
				jpgBinaryData = new Byte[stream.Length];
				stream.Read(jpgBinaryData, 0, (int)stream.Length);
			}

			//on renvoie les bytes de l'imgae compressée
			return jpgBinaryData;
		}

	}
}

Exemple d’utilisation

Code XAML

<UserControl x:Class="SilverlightThumbnails.MainPage"
			 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<Grid x:Name="LayoutRoot">
		<StackPanel HorizontalAlignment="Left"
					VerticalAlignment="Top">
			<Button x:Name="OpenButton"
					Content="Parcourir..."
					Click="OpenClick" />
			<Button x:Name="SaveButton"
					IsEnabled="False"
					Content="Sauvegarder..."
					Click="SaveClick" />
		</StackPanel>
	</Grid>
</UserControl>

Code behind


using System.Windows;
using System.Windows.Controls;
using System.IO;

namespace SilverlightThumbnails
{
	public partial class MainPage : UserControl
	{
		byte[] compressedImage = null;

		public MainPage()
		{
			InitializeComponent();
		}

		private void OpenClick(object sender, RoutedEventArgs e)
		{
			OpenFileDialog ofd = new OpenFileDialog();
			ofd.Filter = "Fichiers image|*.jpg;*.jpeg";
			ofd.ShowDialog();

			compressedImage = null;

			if (ofd.File != null)
			{
				using (Stream imageStream = ofd.File.OpenRead())
				{
					compressedImage = ImageHelpers.CompressImage(imageStream, 400, 90);
				}
			}

			if (compressedImage != null)
			{
				MessageBox.Show("Image compressée !");
				SaveButton.IsEnabled = true;
			}
		}

		private void SaveClick(object sender, RoutedEventArgs e)
		{
			if (compressedImage != null)
			{
				OpenButton.IsEnabled = false;

				SaveFileDialog sfd = new SaveFileDialog();
				sfd.Filter = "Fichiers image|*.jpg;*.jpeg";
				sfd.DefaultExt = ".jpg";

				sfd.ShowDialog();

				using (Stream fs = (Stream)sfd.OpenFile())
				{
					fs.Write(compressedImage, 0, compressedImage.Length);
				}

				SaveButton.IsEnabled = false;
				OpenButton.IsEnabled = true;

				MessageBox.Show("Image enregistrée !");
			}
		}
	}
}

Résultat

 Image originale  Image compressée  Code source complet du tutorial SilverlightThumbnails.zip 

 

Catégories :Silverlight, Silverlight 3

[SL4] : Silverlight 4 Beta !

Ca y est Miscrosoft à présenté sa nouvelle mouture de Silverlight au PDC09, comportant de nombreuses nouveautés très appréciables !

What’s New in Silverlight 4 Beta?

Silverlight 4 delivers a full suite of powerful capabilities to business application developers, bringing the best-of-breed .NET platform to browser-based experiences. Silverlight provides an ideal platform for developing and deploying modern business applications for both customer facing and staff-facing applications.

Business Application Development

Silverlight 4 consolidates its position as the natural choice for building business applications on the Web:

New Features for Application Developers

  • Comprehensive printing support enabling hardcopy reports and documents as well as a virtual print view, independent of screen content.
  • A full set of forms controls with over 60 customizable, styleable components. New controls include RichTextbox with hyperlinks, images and editing and Masked textbox for complex field validation. Enhanced controls include DataGrid with sortable/resizeable columns and copy/paste rows.
  • WCF RIA Services introduces enterprise class networking and data access for building n-tier applications including transactions, paging of data, WCF and HTTP enhancements.
  • Localization enhancements with Bi-Directional text, Right-to-Left support and complex scripts such as Arabic, Hebrew and Thai and 30 new languages.
  • The .NET Common Runtime (CLR) now enables the same compiled code to be run on the desktop and Silverlight without change.
  • Enhanced databinding support increases flexibility and productivity through data grouping/editing and string formatting within bindings.
  • Managed Extensibility Framework supports building large composite applications.
  • Exclusive tooling support for Silverlight, new in Visual Studio 2010. Including a full editable design surface, drag & drop data-binding, automatically bound controls, datasource selection, integration with Expression Blend styling resources, Silverlight project support and full IntelliSense.

Developer tools

  • Fully editable design surface for drawing out controls and layouts.
  • Rich property grid and new editors for values
  • Drag and drop support for databinding and automatically creating bound controls such as listbox, datagrid. New datasources window and picker.
  • Easy to pick styles and resources to make a good looking application based on designer resources built in Expression Blend.
  • Built in project support for Silverlight applications
  • Editor with full intellisense for XAML and C# and VB languages.

Empowering richer, more interactive experiences

Silverlight is already in use as a comprehensive platform for building rich experiences both for application and pure media scenarios including HD quality, interactive video through Smooth Streaming. Silverlight 4 introduces additional capabilities to enable creation of ever more rich, appealing high-performance interactive experiences and innovative media experiences:

  • Fluid interface enhancements advance application usability through animation effects.
  • Webcam and microphone to allow sharing of video and audio for instance for chat or customer service applications.
  • Audio and video local recording capabilities capture RAW video without requiring server interaction, enabling a wide range of end-user interaction and communication scenarios for example video conferencing.
  • Bring data in to your application with features such as copy and paste or drag and drop.
  • Long lists can now be scrolled effortlessly with the mouse wheel.
  • Support conventional desktop interaction models through new features such as right-click context menu.
  • Support for Google’s Chrome browser.
  • Performance optimizations mean Silverlight 4 applications start quicker and run 200% faster than the equivalent Silverlight 3 application.
  • Deep Zoom enhancements include hardware acceleration to support larger datasets and faster animation.
  • Multi-touch support enables a range of gestures and touch interactions to be integrated into user experiences.
  • Multicast networking, enabling Enterprises to lower the cost of streaming broadcast events such as company meetings and training, interoperating seamlessly with existing Windows Media Server streaming infrastructure.
  • Content protection for H.264 media through Silverlight DRM powered by PlayReady.
  • Output protection for audio/video streams allowing content owners or distributors to ensure protected content is only viewed through a secure video connection.

Move beyond the browser

Silverlight 3 pioneered the delivery of a new class of Rich Internet Applications to work on the desktop without additional code or runtimes. Silverlight 4 extends this capability:

For Sandboxed applications

  • Place HTML within your application enabling much tighter integration with content from web servers such as email, help and reports.
  • Provide support for ‘toast’ notification windows, allowing applications to communicate status or change information while the user is working on another application through a popup window on the taskbar.
  • Offline DRM, extending the existing Silverlight DRM powered by PlayReady technology to work offline. Protected content can be delivered with an embedded license so that users can go offline immediately and start enjoying their content.
  • Control over aspects of UI include window settings such as start position, size and chrome.

For Trusted applications

  • Read and write files to the user’s MyDocuments, MyMusic, MyPictures and MyVideos folder (or equivalent for non-windows platforms) for example storage of media files and taking local copies of reports.
  • Run other desktop programs such as Office, for example requesting Outlook to send an email, send a report to Word or data to Excel.
  • COM automation enables access to devices and other system capabilities by calling into application components; for instance to access a USB security card reader.
  • A new user interface for requesting application privileges access outside the standard Silverlight sandbox.
  • Group policy objects allow organizations to tailor which applications may have elevated trust.
  • Full keyboard support in fullscreen mode richer kiosk and media applications.
  • Enhancements to networking allow cross-domain access without a security policy file.
Catégories :Silverlight, Silverlight 4

[WPF] : Seesmic desktop

WPF n’est pas mort ! pour preuve voici une nouvelle application développée en WPF fonctionnant sur Windows XP, Vista et 7 (lequel disposant de fonctionnalités additionnelles) :

Cette application, se positionnant comme un client riche de la plateforme Tweeter, à fait l’objet d’une présentation au tout récent PDC09 et a été développée conjointement avec Microsoft dans les locaux de Seesmic

Blog de l’équipe de développement, ici !

Si vous souhaitez l’essayer, c’est par ici !

Catégories :Silverlight, Silverlight 3

[WPF – SL3] : Sobees client

Une nouvelle version de ce client WPF permettant de visionner les réseaux sociaux tels que MySpace, Tweeter ou Facebook à été mise en ligne ! Son nom : Sobees lite

Sachez qu’il existe une version OOB de ce client en Silverlight 3 ! vous pouvez le trouver ici.

Catégories :Silverlight, Silverlight 3, WPF