JsConsole.Net– Console javascript déportée pour le déboggage

J’ai développé cette petite application Windows pour me permettre lors du débogage d’applications web, de visualiser la console JavaScript de manière déportée. Sur certains devices, comme la plupart des consoles de jeux, il n’est pas possible d’accéder à cette console de débogage.

L’application a été développée en C# et WPF  pour l’interface utilisateur et utilise le pattern MVVM indispensable au découpage fonctionnel du code.
Concernant les fonctionnalités un serveur web Owin permet l’auto hébergement des applications web au sein du répertoire « /Web » qui se trouve a la racine de l’application. Par contre, Owin nécessite une élévation de privilège pour ouvrir des sockets réseaux au niveau d’une IP externe, l’application lors de l’exécution vous demandera donc une autorisation plus élevée lors du lancement.
Il est possible aussi d’écrire des bouts de codes « snippet » en créant des fichiers avec l’extension js dans le répertoire « /snippet » ceux-ci pourront être directement inséré dans la console d’exécution des scripts.
Le but de cette application était aussi  pour moi, de mettre en pratique certains frameworks comme l’association entre AngularJs et SignalR.
Par la suite, j’ai inclus une fonctionnalité d’intelliSence lorsque l’on tape du code JavaScript, ce qui m’a semblé bien pratique pour un développeur. Pour cela, la bibliothèque la plus aboutie est AvalonEdit, malheureusement celle-ci n’est pas compatible avec MVVM. Il faut donc faire un peu de code dans la partie code behind, je n’aime pas trop, mais je pense que dans une prochaine version j’essayerai de la rendre compatible MVVM, soit en créant une classe qui hérite des classes d’avalonEdit ou un behavior ou encore avec une attached propertie.

Ce projet a été développé avec les librairies suivantes
–    AvalonEdit
–    MahApps
–    Owin
–    Mvvm Light Toolkit
–    AngularJS
–    SignalR
–    Bootstrap

Voiçi une vidéo, pour comprendre l’utilisation de l’application :

Le code est disponible ici : https://github.com/auriou/JsConsole.Net

Publicités

, , ,

Poster un commentaire

VideoCast : Extension Chrome pour la Chromecast et VLC

Je viens de publier sur le store de Chrome, une nouvelle extension qui vous permet de diffuser les vidéos trouvez sur le web soit sur la Chromecast ou VLC ou encore le player intégré. Cette extension va capturer et historiser les vidéos que vous lancerez sur chrome.

Extensions vidéos prises en charge :
  -Player intégré et chromecast : mp4, webm
  -VLC : mp4, webm, flv

https://chrome.google.com/webstore/detail/videocast/gclhodkofgoighinmongpkpncdpalejb

videocast-screen-market

, , , , ,

3 Commentaires

Extension Chrome permettant de visualiser les vidéos web sur VLC

https://chrome.google.com/webstore/detail/vlc-capture/goppbgmjnldonmjemebdmcjfefbgoloh

Voici une extension que j’ai développée permettant de visualiser sur VLC les vidéos ouvertes dans le navigateur Chrome.

Il suffit de lancer une vidéo dans un onglet pour que celle-ci soit jouée sur VLC.

Un historique des consultations est conservé et accessible en cliquant sur l’icône de l’extension.

Pour que la vidéo soit jouée directement il faut que VLC soit lancé et configuré au préalable l’interface Web dans VLC.

Menu VLC > Outils > Préférences > Choisir l’interface avancée (en bas, à gauche cocher l’option “Tous”) > Interfaces principales > Cocher “Web”

preference-vlc

 

La capture des vidéos peut être arrêtée en ouvrant le menu en cliquant sur l’icône VLC puis en décochant la capture vidéo.

vlc-capture-ext

J’ai développé cette extension, car les développeurs de VLC sont en train d’ajouter la possibilité de caster les flux vidéos sur la Google Chromecast et comme j’en possède une, cela m’intéresse de voir n’importe quelle vidéo sur ma télévision au travers de VLC et de la Chromecast.

Extension >> https://chrome.google.com/webstore/detail/vlc-capture/goppbgmjnldonmjemebdmcjfefbgoloh

, , , ,

3 Commentaires

FIGlet.Net – Génération et OCR de Textes Art ASCII

Lors d’un challenge informatique qui avait pour but de répondre à un robot sur un canal IRC, j’ai dû développer un programme qui devait reconnaitre des textes aléatoires écrits en Art ASCII en moins d’une seconde et il dévait renvoyer le résultat sur le canal IRC. Cette technique d’écriture de texte était très répandue par le passé sur les mainframes, les BBS, puis sur beaucoup d’applications en mode texte ce qui est encore le cas pour les serveurs IRC.

Une librairie permettant d’écrire ces textes développée en C, existe pour les systèmes Unix . Elle définit un format de fichier de police de caractère. Ce programme est FIGlet et les fichiers de polices ont pour extension .flf .

Mon langage de prédilections étant le C#, j’ai donc développé une version FIGlet.Net et comme j’avais besoin pour ce challenge de lire ce type de texte, j’ai créé une fonction de reconnaissance de caractères des textes Art-ASCII.

Voici un exemple :

artascii

Et le code client, pour utiliser la librairie :

namespace FIGlet.Net
{
    public class SampleClient
    {
        public static void TestUsage()
        {
            var fig = new Figlet(); //font par défaut
            //Chargement d'une font spécifique au format Figlet
            //fig.LoadFont(@"D:\FIGLET\FONTS\standard.flf");

            //Génération et affichage du texte  Art ASCII
            var asciiart = fig.ToAsciiArt("Microsoft.Net");
            Console.WriteLine(asciiart);

            //Préparation d'un alphabet pour la reconnaissance de l'image Art ASCII
            fig.PrepareAlphabet("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.");
            //Reconnaissance de l'image et affichage du texte trouvé
            var reconize = fig.ReconizeAsciiArt(asciiart);
            Console.WriteLine("Résultat OCR-ArtASCII: {0}",reconize);
            Console.ReadLine();
        }
    }
}

J’ai publié le code de ma librairie FIGlet.Net sur GitHub si vous etes intéressé c’est ici :  https://github.com/auriou/FIGlet

, ,

Poster un commentaire

WPF : HighlightConverter (IMultiValueConverter)

Lorsque l’on met en place une zone de recherche, il est intéressant de mettre en surbrillance les zones qui correspondent dans le résultat de votre recherche.

Voiçi une interface que j’ai réalisée pour un projet :

HighlightConverter[1]

Mon treeView est bindé à une collection spécialisée “class TreeList<T> : ObservableCollection<TreeNode<T>>, INotifyPropertyChanged ” dans laquelle je manipule les propriétes pour ouvrir / fermer / cacher / afficher les noeuds de la treeview. Le binding est le  suivant.

<Style x:Key="TreeViewItemStyle" TargetType="{x:Type TreeViewItem}">
  <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
  <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
  <Setter Property="Visibility" Value="{Binding IsHidden, Converter={StaticResource ResourceKey=InverseBoolToVisibilityConverter}}" />

Le résultat d’une recherche sera un textBlock comprenant un champ de type Run avec un style différent pour identifier le texte trouvé.

Il sera donc nécessaire d’avoir 3 objets Run :     

– Start  :  début du résultat qui peut être vide,

– Find  :  partie du résulat comprenand le terme de la recherche, identifié en rouge,

– End   :  fin du résultat qui peut etre vide 

Comme il y à 2 binding pour déterminer le résultat à renvoyer, il faudra donc un converter Multi-valué

 

        <TextBlock>
          <TextBlock.Inlines>
            <Run>
              <Run.Text>
                <MultiBinding Converter="{StaticResource HighlightConverter}" ConverterParameter="Start">
                  <Binding Mode="OneWay" Path="DisplayText" />
                  <Binding ElementName="SearchBox"
                           Mode="OneWay"
                           Path="DataContext.SearchCompteGeneral" />
                </MultiBinding>
              </Run.Text>
            </Run>
            <Run Style="{DynamicResource HighlightStyle}">
              <Run.Text>
                <MultiBinding Converter="{StaticResource HighlightConverter}" ConverterParameter="Find">
                  <Binding Mode="OneWay" Path="DisplayText" />
                  <Binding ElementName="SearchBox"
                           Mode="OneWay"
                           Path="DataContext.SearchCompteGeneral" />
                </MultiBinding>
              </Run.Text>
            </Run>
            <Run>
              <Run.Text>
                <MultiBinding Converter="{StaticResource HighlightConverter}" ConverterParameter="End">
                  <Binding Mode="OneWay" Path="DisplayText" />
                  <Binding ElementName="SearchBox"
                           Mode="OneWay"
                           Path="DataContext.SearchCompteGeneral" />
                </MultiBinding>
              </Run.Text>
            </Run>
          </TextBlock.Inlines>
        </TextBlock>

 

Maintenant le code du converter multi-valué :

 

public class HighlightConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        var value = System.Convert.ToString(values[0]);
        var terms = System.Convert.ToString(values[1]);
        var param = System.Convert.ToString(parameter);

        if (!string.IsNullOrEmpty(value) && !string.IsNullOrEmpty(terms))
        {
            if (value.ToLower().Contains(terms.ToLower()))
            {
                var findIndex = value.ToLower().IndexOf(terms.ToLower(), System.StringComparison.Ordinal);
                switch (param)
                {
                    case "Start":
                        return value.Substring(0, findIndex);
                    case "Find":
                        return value.Substring(findIndex, terms.Length);
                    case "End":
                        return value.Substring(findIndex + terms.Length);
                }
            }
        }
        if (param == "Start")
        {
            return value;
        }
        return "";
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return null;
    }
}

 

Le code Xaml avec la treeVIew:

<Grid x:Name="GridSearchCompte" Grid.Row="1">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <TextBox Name="SearchBox"
           Margin="5,2"
           HorizontalAlignment="Stretch"
           VerticalAlignment="Stretch"
           Text="{Binding Path=SearchCompteGeneral,
                            Delay=700,
                            Mode=TwoWay,
                            UpdateSourceTrigger=PropertyChanged}"
           controls:TextboxHelper.ClearTextButton="True"
           controls:TextboxHelper.Watermark="Recherche rubrique">
    <TextBox.Style>
      <Style BasedOn="{StaticResource SearchMetroTextBox}" TargetType="{x:Type TextBox}">
        <Style.Triggers>
          <Trigger Property="controls:TextboxHelper.HasText" Value="True">
            <Setter Property="controls:TextboxHelper.ButtonTemplate" Value="{DynamicResource ChromelessButtonTemplate}" />
          </Trigger>
        </Style.Triggers>
      </Style>
    </TextBox.Style>
  </TextBox>
  <TextBlock Grid.Row="1"
             Margin="5,0"
             HorizontalAlignment="Right"
             FontSize="12"
             Foreground="{DynamicResource ColorBleu}"
             Text="{Binding TreeRubriques.SelectedItem}" />
  <TreeView Name="TreeViewGeneral"
            Grid.Row="2"
            ItemContainerStyle="{DynamicResource TreeViewItemStyle}"
            ItemsSource="{Binding Path=TreeRubriques}">
    <TreeView.ItemTemplate>
      <HierarchicalDataTemplate ItemsSource="{Binding Children}">
        <TextBlock>
          <TextBlock.Inlines>
            <Run>
              <Run.Text>
                <MultiBinding Converter="{StaticResource HighlightConverter}" ConverterParameter="Start">
                  <Binding Mode="OneWay" Path="DisplayText" />
                  <Binding ElementName="SearchBox"
                           Mode="OneWay"
                           Path="DataContext.SearchCompteGeneral" />
                </MultiBinding>
              </Run.Text>
            </Run>
            <Run Style="{DynamicResource HighlightStyle}">
              <Run.Text>
                <MultiBinding Converter="{StaticResource HighlightConverter}" ConverterParameter="Find">
                  <Binding Mode="OneWay" Path="DisplayText" />
                  <Binding ElementName="SearchBox"
                           Mode="OneWay"
                           Path="DataContext.SearchCompteGeneral" />
                </MultiBinding>
              </Run.Text>
            </Run>
            <Run>
              <Run.Text>
                <MultiBinding Converter="{StaticResource HighlightConverter}" ConverterParameter="End">
                  <Binding Mode="OneWay" Path="DisplayText" />
                  <Binding ElementName="SearchBox"
                           Mode="OneWay"
                           Path="DataContext.SearchCompteGeneral" />
                </MultiBinding>
              </Run.Text>
            </Run>
          </TextBlock.Inlines>
        </TextBlock>
      </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
  </TreeView>
</Grid>

,

Poster un commentaire

Convertir du Json et XML en classes C# fortement typées

Visual studio 2012, offre la possibilité de convertir des données XML ou Json en classe C# fortement typée. Quand l’on doit interagir avec des services REST comme les API de google, il est intéressant de pouvoir utiliser le nom des objets dans son code et ainsi éviter d’utiliser un parser XML ou Json.

Pour que cela fonctionne, il faut être dans un projet utilisant le framework .net 4.5

  1. Copier une source XML ou Json dans le presse-papier (Ctrl+A – Ctrl+C)
    1-convertxml
  2. Se placer dans un fichier de code
    2-convertxml
  3. Ouvrir le menu Edition > Collage spécial > Coller XML sous forme de classes
    3-convertxml
  4. Voilà la classe fortement typée créée
    4-convertxml
  5. Voici une classe d’extension pour simplifier la sérialisation des objets
    using Newtonsoft.Json;
    using System.IO;
    using System.Text;
    using System.Xml.Serialization;
    
    namespace SampleCopyObject
    {
        public static class Deserializer
        {
            //nécessite le package nuget : Json.Net http://james.newtonking.com/json
            public static T DeserializeJson<T>(this string strObject)
            {
                return JsonConvert.DeserializeObject<T>(strObject);
            }
            public static T DeserializeXml<T>(this string strObject)
            {
                var stream = strObject.ToStream();
                var serializer = new XmlSerializer(typeof(T));
                return (T)serializer.Deserialize(stream);
            }
            public static Stream ToStream(this string strObject)
            {
                var byteArray = Encoding.UTF8.GetBytes(strObject);
                return new MemoryStream(byteArray);
            }
        }
    }
  6. Solution de test
    using System.Net;
    using Microsoft.VisualStudio.TestTools.UnitTesting;
    using SampleCopyObject;
    
    namespace SampleCopyObject.Test
    {
        [TestClass]
        public class UnitTestDeserialiser
        {
            [TestMethod]
            public void TestXml()
            {
                const string xmlFile = "http://www.dreamincode.net/forums/xml.php?showuser=1253";
                var client = new WebClient();
                var strObject = client.DownloadString(xmlFile);
                var result = strObject.DeserializeXml<ipb>();
                Assert.IsNotNull(result);
                Assert.IsNotNull(result.profile);
            }
            [TestMethod]
            public void TestJson()
            {
                const string jsonFile = "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=test";
                var client = new WebClient();
                var strObject = client.DownloadString(jsonFile);
                var result = strObject.DeserializeJson<Rootobject>();
                Assert.IsNotNull(result);
                Assert.IsNotNull(result.responseData);
            }
        }
    }

Poster un commentaire

Grouper vos fichiers dans visual studio 2012

Dans un projet WPF, Silverlight ou Window Store (WinRT), si l’on utilise le patron de conception MVVM (Model / Vue / VueModel) nous regrouperons les vues dans un répertoire, le plus souvent nommé Views, elles mêmes composées d’un fichier XAML et d’un fichier CS pour le code behind. Pour chacune de ces vues correspond une classe manipulant le model métier, ces fichiers sont placés dans un autre répertoire appelé ViewModels.

Dans un gros projet, cela devient vite compliqué de jongler dans l’explorateur de solution entre la Vue Xaml et le ViewModel.

Il existe une autre possibilitée pour organiser son code, qui est utilisé dans les exemples du framework PRISM. Ce framework permet d’implémenter le pattern MVVM (Command/Message), simplifie le développement d’applications composites, et prend en charge la navigation. Dans les exemples fournis, le choix a été de placer les vues et les vues-modèles dans des répertoires communs par thème fonctionnel.

Je trouve cette pratique plus intuitive, étant donné que Vue et vues-modèles sont complètement liées. Pour aller plus loin dans ce raisonnement, il serait intéressant de regrouper le vue-modèl sous la vue comme c’est déjà le cas pour le code-behind du fichier XAML.

Une extension de visual studio permet de faire cela très simplement, il s’agit de  VSCommand

  • Résultat des regroupements sous chacune des vues

resultat

  1. Installer l’extension VSCommand
    Extension
  2. Sélectionner les fichiers à regrouper > menu contextuel > choisir le menu Group Items

    MenuGroup
  3. Valider la fenêtre suivante
    WindowSelect
  4. Voila les fichiers groupés sous la vue
    ResultatJoin

Poster un commentaire

%d blogueurs aiment cette page :