May.05

S-Sound : la solution audio multi-room connectée dans la Constellation

La diffusion de l’audio dans une maison dite intelligente ou connectée est une étape quasi-indispensable. Elle doit permettre aux utilisateurs de diffuser tout type de média ou flux audio dans n’importe quelle pièce de l’habitat et de manière intuitive. Mais c’est aussi un moyen pour la maison elle-même de communiquer avec ses utilisateurs.

Bien qu’il existe différentes solutions sur le marché, je n’ai pas su trouver une solution qui remplissait tous mes critères. Dans cet article vous découvriez comment nous pouvons, avec un budget raisonnable, développer une solution audio multi-room, qui basée sur la plateforme Constellation, permettra de diffuser de l’audio depuis votre serveur de fichier, votre système domotique, votre PC, votre Smartphone, votre tablette ou n’importe quel système ou objet connecté !

ssound

Quand la maison prend la parole….

HighTech,Domotique,Constellation

Mar.24

S-Energy : la solution de monitoring des ressources énergétiques de la maison – Geek Is In Da House 2015 – quand la maison vous fera sortir de votre douche, de gré ou de force !

Microsoft TechDays 2015Suite à la mythique “Geek Is In Da House” des Microsoft Techdays 2015 que j’ai pu animer aux côtés de David Catuhe, Stanislas Quastana et Laurent Ellerbach , retour en détail sur mon projet “S-Energy” !

(Passage dédié à S-Energy à 31’30).

L’idée du projet fait suite à un problème de chaudière qui est intervenu en Septembre 2014. En effet lors de l’entretien annuel nous avons constaté que la vanne de sécurité du ballon d’eau chaude était défaillante laissant ainsi partir dans les canalisations des litres et des litres d’eau en continue !

Après investigation, ce problème est apparu environ 4 mois plus tôt, soit une perte sèche de plus de 450m3, l’équivalent de 3750 litres par jour (environ 25 bains tous les jours !).

Vanne de sécurité défaillante sur la chaudière

Alors forcément côté portefeuille c’est dur et côté orgueil, pour un “geek” avec une maison ultra connectée, ne pas détecter une perte de près de 4.000L/jour pendant plus de 4 mois, c’est tout simplement honteux Sourire

Logo S-Energy

Dès lors, je me mis en tête de concevoir “S-Energy”, une solution de monitoring intelligente des ressources énergétiques de la maison : eau, gaz et électricité.

Intelligente car une simple solution de monitoring qui ne produit que des graphiques de la consommation n’a pour moi que peu d’intérêt ! C’est bien sûr indispensable d’avoir un historique très précis sur sa consommation mais ça ne suffit pas !

L’intelligence réside dans le fait que la maison “prend conscience” de cette consommation en temps réel et dans la durée et est capable d’agir en fonction ! Vous avertir en cas de consommation anormale, vous incitez à consommer moins, etc…

Dans cet article vous découvrirez comment j’ai pu monitorer mes anciens compteurs qui n’ont pourtant pas d’interface pour permettre de faire des “auto-relevés” (impulsions, télé info, etc..) mais aussi comment je me sers des données produites grâce à la plateforme d’interconnexion des objets connectés “Constellation” pour créer de l’intelligence autour des ressources énergiques de la maison.

Domotique,TechDays 2015,Constellation

Dec.30

Choisir, installer et domotiser son système alarme: l’alarme du geek connectée au poignet et dans les nuages – 2ème partie

Après avoir installé et configuré le système Paradox et découvert le protocole de communication de la EVO192 dans la 1ère partie de cet article, nous allons maintenant découvrir quelles sont les possibilités qui s’offrent à nous en mariant alarme et domotique.

paradox

Intégration de l’alarme dans la Constellation

Pour ceux qui suivent ce blog, vous avez sans doute déjà entendu parler de ma plateforme “Constellation” qui me permet d’interconnecter tous les objets de la maison. Du miroir à Slight, en passant par l’alarme comme nous allons le voir, la domotique Z-Wave avec Vera Lite, le thermostat Nest, et j’en passe; cette plateforme est au centre de tout mon système “domotique” au sens large.

Je communiquerai prochainement sur cette plateforme mais voyons dès maintenant comment intégrer le système de sécurité Paradox dans la Constellation.

Domotique,Alarme,Constellation

Jan.21

Visual WebGUI

Comme inscrit sur la homepage du site officiel :

Visual WebGui is an AJAX development framework that simplifies development of enterprise IT web applications to the simplest.

En fait pour être plus précis, le framework Visual WebGui propose un modèle de développement Winform, avec un designer Winform où l’on crée nos Forms, Dialogs ou UserControls avec des contrôles de type Winform (Label, Textbox, DateTimePiker, Listbox, combobox, etc…).

En gros on développe une application Winform MAIS au lieu de compiler un EXE, nous obtenons une application Web assez jolie avec AJAX inside pour gérer les contrôles.

Bien sur il ne faut pas trop regarder le HTML/Javascript produit surtout pour les amoureux des standards (et du beau code), et même si ce produit a encore pas mal de chose à revoir, je pense qu’il a un bon avenir dans le monde du développement d’application Web enfin Web 2.0 🙂

J’avais commencé la semaine dernière a créer un petit projet de test, une application de gestion de taches (gestion projets/milestones/taches). La rapidité de développement est assez impressionnante. Après avoir créé ma base SQL et DAL, il m’a fallu peu de temps pour placer mes contrôles (un tabControl, quelques listbox, textbox et button), un peu de code et créer une belle petite application Web.

A défaut d’avoir déployée l’application sur mon serveur de prod, une petite vidéo de présentation :

Bref, produit assez sympa, qui me rappelle Xamlon qui passé du Winform au Flash 🙂

Info,HighTech,.NET

Nov.30

FormAuthentication, Session et UpdatePanel : PageRequestManagerParserErrorException

Je me suis retrouvé lors d’un dev d’une application Web dans une petite galère avec l’ASP.NET AJAX Extention !

La situation est simple, j’ai une page ASPX contenant une gridview dans un UpdatePanel qui est protégée par un formulaire d’authentification (authentication mode= »Forms » dans mon Web.Config), bref cas des plus classiques !

Seul problème, au bout d’un certain temps d’inactivité, votre session expire (timeout paramétrable dans la balise froms du Web.config). Avec un postback classique, le serveur détecte que vous n’êtes plus authentifié et donc vous renvoie vers la page de login (paramétré lui aussi dans la balise froms du Web.config).
Mais avec un UpdatePanel, vous recevrez un beau message d’erreur :

Après analyse, cela est tout à fait normal car coté client, on ne sait pas que la session a expirée ! L’appel Javascript de la librairie Atlas, qui est sensé recevoir les données sous forme XML pour mettre à jour votre UpdatePanel, va tomber sur la page de login (classique, c’est ce qu’il se passe côté serveur lorsque que vous tentez accéder à une page protégé !).

On peut vérifier cela très facilement en supprimant le « DocType » au début de votre page de login. Vous verrez que l’erreur change et maintenant n’arrive pas a parser la ligne <head runat= »server »> ce qui nous prouve que c’est bien la page login 😉

C’est en lisant le blog de Cyril qui relayé un post de Luis Abreu que j’ai découvert comment gérer facilement les erreurs avec Atlas pour pouvoir écrire ce petit script et résoudre le problème :

Avec ce bout petit de Javascript, on vient abonner notre fonction EndRequestHandler à l’évènement déclenché de la réponse du serveur. Notre fonction quand à elle, vient checker la présence d’une erreur dans la reponse du serveur, si oui regarde si les 51 premières caractères sont Sys.WebForms.PageRequestManagerParserErrorException. Dans ce cas on vient juste recharger la page par un window.location.reload() (postback classique) qui nous redirigera vers la page de login !

Et le tour est joué…. 🙂

Dev,Atlas

Oct.22

[Atlas] UpdatePanelAnimation : la galere des animations OnUpdating/ed

Est-ce un bug, un oublie ou juste moi qui me prend la tête pour rien ? Les UpdatePanelAnimation sont des extendeurs du controle UpdatePanel nous permettant de jouer une animation au rafraichissement d’un UP.

Je mets donc un ScriptManager, 2 UpdatePanel en mode Conditional et 2 UpdatePanelAnimationExtender mappés sur les UP respectifs (TargetControlID= »…. »). Je remplis en suite une animation sur le OnUpdating pour faire un FadeOut de l’UP et sur le OnUpdated un FadeIn.

Wahou c’est beau… La page disparait en fondu, se met à jour et hop reapparait 🙂

OUI, mais voila, le problème est que ces animations sont joués à chaque AsyncPostBack pour tous les UpdatePanels.
Dans mon cas les animations s’executés sur les deux UpdatePanels alors qu’un seul d’entre eux etaient mis a jour ! 🙁

On peux tester cela très facilement en rajoutant un Button sur la page qu’on enregistre à son chargement comme controle AsyncPostBack (ScriptManager1.RegisterAsyncPostBackControl(monButton)).
Sur le code du bouton on change le contenu d’un labelA d’un UpdatePanelA et met à ajout un UpdatePanelB (UpdatePanelB.Update()).
On constatera que le labelA n’a pas changé (vu que le UpdatePanelA n’a pas été Update()) mais l’animation sur celui ci c’est quand même executé.

Alors là, expliquez moi l’interet de jouer les animations qui portent le nom: OnUpdating et OnUpdated sur un UpdatePanel qui ne s’est pas Updating/Updated ?!?!?%% J’utilise la beta 1 fraichement téléchargé de vendredi, avait-on ce probleme avant ?

Enfin soit, ma petite astuce pour pouvoir me sortir de cette galere et controler l’execution des animations à été de poser une condition dans la sequence des animations:

Et dans ma page un petit script JS :

Enfin j’ajoute l’attribut OnClick sur les triggers de mon UpdatePanel A et B pour appeler la fonction setUPtoPlay :

De tel maniere chaque controle émettant un ASyncPostBack appele la fonction setUPtoPlay() qui stoque coté client le nom de l‘UpdatePanel qui est mis à jour et doit jouer l’animation.

Pour revenir sur ce que je disais au debut : Est-ce un bug, un oublie ou juste moi qui me prend la tête pour rien ??? 🙂

Dev,Atlas

Oct.18

[JS] Le scrolling : Plein de scrollers prêt à l’emploi

Bon je ne vais pas revenir sur ce qu’est le scrolling ou un scroller mais rapidement c’est qu’il vous permez de faire défiler du contenu (texte, image, etc…) à l’ecran 🙂
Certe votre navigateur préféré vous offrent de belles barres grises pour pouvoir faire défiler les pages mais dans certains sitse, pour mieux intégrer le design, l’on developpe notre propre systeme de scrolling… C’est ce que je fais nottament avec un site d’un client où je propose de belles petites fleches (qui ne sont ni plus ni moins que des images) pour pouvoir faire defiler le contenu (en fait je deplace juste un div).

J’avais déjà developpé un petit systeme de scrolling pour mon projet SUPINFO DotNet l’an dernier, mais devant souvent reprendre le code pour l’integrer dans mes developpements en cours j’ai décidé de faire un script complet et générique pour pouvoir l’intégrer dans n’importe quel site.

Je vous met donc ici à disposition mon code (vive l’open source 🙂 ). Bon biensur, merci vous faire connaitre si vous l’utilisez dans vos developpements ^_^

Mon script contient (entre autre) :

  • RegisterScroller(name,parentSize,initial_position,reload_postback). Le 1er parametre est le nom (id) du DIV a scroller, le parentSize est un objet Point qui definit la taille du parent (partie visible), initial_position est aussi un Point qui définit les coordonnées initiales du DIV et reload_postback est un booléan qui défini si le DIV doit etre remplacé à sa derniere position lors de l’appel de la fonction refixPosition (que nous verrons ci-après)
  • refixPosition() : permet de repositionner les scrollers marqués de reload_postback à True. (Utile dans le cas d’une utilisation avec Atlas. cf ce post)
  • resetPosition(sender) : où sender est l’id du DIV/Scroller à remettre à sa position d’origine (initial_position)
  • startScroll(sender, direction) : sender etant l’ID du DIV/Scroller et direction peut etre UP, DN, GT, LT. La fonction permet donc de demarrer le scrolling (à placer sur le click de la fleche)
  • stopScroll(sender) : permet d’arreter le scroll (à placer sur le mouseout de la fleche)
  • scroll(sender, direction) : fonction qui vient scroller le sender en fonction de sa direction. (à placer sur le mouseover de la fleche).

Exemple dans mon load de ma page je retrouve :

Qui me permet d’enregistrer le sroller sur le DIV pellicule_content qui sera visible dans un rectangle de 275x65px, qui démarre à 13px du bord gauche et qui est repositionné à sa derniere postion lors de l’appel de la fonction refixPostion()
Puis dans mon code HTML je retrouve quelque chose du type :

Bon biensur à vous de vous débrouillez avec le CSS et les ZIndex pour faire quelque chose potable 🙂

Donc vous voila parrez pour faire pleins de scrollers dans vos sites, en haut/bas, gauche/droite. Elles est pas belle la vie ? ^_^

Télécharger mon script Scroll.js

Tous commentaires sont les bienvenues 🙂

Perso,Dev