May.07

S-Light : un système Ambilight à base de .NET Gadgeteer

Logo SlightRéalisé début Avril, je suis fier de vous présenter le premier prototype de "S-light", ma solution "Ambilight" artisanale !

Il s’agit ici du 1er prototype, deux autres versions déjà en cours de développement paraitront dans les semaines/mois à venir 😉

Cette première version fonctionne avec une application .NET/WPF sur votre PC pour calculer les couleurs de votre écran et piloter des bandes de LED RGB collées derrière votre écran via la "Slight Box", une petite boite refermant des modules .NET Gadgeteer basés sur le .NET Micro-framework.

Plutôt que de rédiger de longues phrases, voici une démonstration en image :

Pour connaître tous les détails techniques ainsi que les secrets de fabrication, je vous donne rendez-vous le mois prochain dans le magazine Programmez! pour un article complet sur le sujet. En attendant voici quelques images :

Demo Slight

SlightBox V1

Rendez-vous le mois prochain dans le magazine Programmez! disponible dans vos kiosques préférés 🙂

Un grand merci à Pierre-Marie Cronier (Creative director & Co-founder Studio Josette) pour le logo, les photos et la vidéo de présentation de Slight.

UPDATE1 : le projet S-light se nomme maintenant SlightBox et pré-ouverture du site www.slightbox.net (ouverture prévue en Septembre 2013)
UPDATE2 : Création de la page fan sur Facebook ! Suivez l’actualité de SlightBox sur : https://www.facebook.com/slightbox
UPDATE3 : Un article sur la SlightBox Gadgeteer est paru dans magazine Programmez de Juillet-Aout, disponible dans vos kiosques préférés :

Magazine Programmez! été 2013

Perso,Dev,HighTech,.NET,SlightBox

Jan.08

[WPF] PlayAnimations ou comment jouer plusieurs animations les unes après les autres

Lors du développement de SmartCooking (notre projet Imagine Cup) en Mai 2008, j’ ai été confronté à quelques détails techniques avec WPF. Parmi eux : les animations !

Notre application se découpe en plusieurs écrans (menu principal, visualisation du stock, ajout de produits, etc…) tous liés entre eux par de petites animations pour y jouer des transitions entre chaque écran.

image image image image

Plus globalement, si j’ ai trois écrans A, B et C, je crée quelques animations (storyboards) que je nomme ‘StoryboardOpenScreenA’, ‘StoryboardCloseScreenA’, ‘StoryboardOpenScreenB’, etc… Avec donc, à chaque fois, une animation de fermeture et une autre pour l’ ouverture de mon écran !

Il me suffit donc, dans mon code ou par l’ intermédiaire de Triggers, qu’ a jouer ces animations pour réaliser les transitions d’ un écran à l’ autre. Oui mais voila, si je place un trigger jouant plusieurs animations, du type :

… ou directement dans le code, par appel de la fonction BeginStoryboard, mes deux animations se joueront en même temps !! Et croyez-moi, cela n’ est pas très joli surtout quand il y a plus de deux animations en même temps !

Dev,.NET,WPF

Oct.21

[WPF] S’amuser avec le MediaElement sous WPF

Le contrôle MediaElement que j’ai decouvert au cours de cette semaine a revolutionné ma petite vie de developpeur 🙂 Ce contrôle permet de contenir des images, sons ou videos.
Pour charger un media, rien de plus simple :

Sachant que mon Uri peut pointer sur un fichier local (c:\….) ou distant (http://…..) que se soit une video, une image ou un son….

Le media sera joué immédiatement. Bien que vous disposez des methodes Play(), Stop() et Pause() pour contrôler le media, utilisez plutot la proprieté LoadedBehavior qui permet de definir et/ou obtenir l’etat du media :

A ce sujet, pour pouvoir jouer une video (ou son) en boucle, la seule doc que j’avais trouvé sur le msdn2 était de mettre un MediaTimeline. Chose un peu tordu dans le code alors qu’il y a une solution toute simple :
1) Abonnez-vous à l’evenement MediaEnded (fin du media) :

2) Remettez la position du media à zero (debut) et relancez le media :

Ce qui est quand même beaucoup plus simple 🙂

C’est bien beau tout ca, mais la vous n’avez aucun apercu à l’ecran ce qui est quand meme un peu dommage ^^ Mais là où ca devient fort bien interressant, c’est qu’un VisualBrush peut prendre en parametre un MediaElement pour pouvoir remplir un rectangle par exemple :

Et hop la, votre video (par exemple) sera joué dans ce rectangle. Enfin pour rajouter votre rectangle à un canvas que vous aurez au préalable placé dans votre code XAML :

A partir de la on peut vraiement s’amuser et aller plus loin dans la démarche.. Par exemple, les rectangles ont une proprieté Clip qui va nous permettre de clipper notre media, OpacityMask pour appliquer un masque d’opacité, et bien d’autre chose pour appliquer differents effets a notre rectangle/video, … Et encore je ne parle que des rectangles, a partir du moment où votre controle pourra etre remplit par un VisualBrush on pourra tout y mettre 🙂
Je ne vais pas vous devoiler sur ce quoi je travaille en ce moment, mais il faut bien se rendre compte de tout ce qu’on peut faire avec car c’est carrement dément…

Dev,WPF

Oct.12

[WPF] Z-Index dans WPF

Tout comme en CSS, on retrouve une notion de ZIndex en WPF, qui permet de spécifier l’empilement des différents calques.

Sous WPF, les ZIndex s’appliquent uniquement sur des objets ‘conteneurs’ comme les Panels, Grid, StackPanels et Canvas.

En XAML, la syntaxe est :

Ici, l’image 1 se trouvera au dessus de l’image 2. On remarque l’ attribut Canvas.ZIndex placé dans la balise Image.

Dans le code, ici en C#, cela se déclare de cette manière :

Vous avez aussi la possibilité de récupérer la proprièté ZIndex d’un element par :

WPF