alois dg

I write about everything. You will find nothing outside of this scope. Je n'écris qu'à propos de tout. Vous ne trouverez rien qui sorte de ce sujet.

[aloisdg]

Small list of Github static blog engine

Two years ago, I opened this blog on Tumblr. I choose Tumblr over other solutions because I wanted something working without any line of code or installation from me. It works great. Tumblr is an excellent solution. Well what's next?

Today, I am using a lot Github and I am looking to remove unneeded tool. Can I switch from this blog to another hosted on Github? I think so. Here a small list of alternative :

Hexo

Hubpress

Pelican

Octopress

Jekyll Bootstrap

Which is your favorite and why?

[aloisdg]

Small list of WPF’s tutorials

In the last edX Module, we had to use WPF. During a discussion, I promised that I will build a small list of WPF’s tutorials. Here we go :

MSDN documentation

WPF official documentation by Microsoft

Quick start with WPF by Microsoft

Getting Started (WPF) by Microsoft

Complete tutorial

WPF Tutorial by Christian Moser

WPF Tutorial by net-tutorials.com

WPF a Guided Tour by Josh Smith

WPF: A Beginner's Guide by Sacha Barber

Bonus

Absolute Beginner's Guide to WPF Application With Examples by shabbir

Old StackOverflow thread

Can someone point me to some guides for WPF

WPF quickstart documentation

What are the BEST resources for learning WPF & .NET?

[aloisdg]

Use and record Gource on Windows

We want to use Gource so we need to install it. You can find the last release on GitHub. Take the last .exe and when you get it, run it. Next, Next, Next, well you know how to do it.

Now you can run Gource. Open a console in you repository folder and write :

gource -1280x720 -s 2 -r 60 -o output.ppm

We want to record the output of Gource. We can use any screen recorder (fraps, etc.). Here we are going to use FFmpeg. You can download it in their official website. Unarchive the 7z file and run the .bat.

Now we are going to run FFmpeg.

ffmpeg -y -r 60 -f image2pipe -vcodec ppm -i output.ppm -vcodec libx264 -preset ultrafast -crf 1 -threads 0 -bf 0 -qscale gource.x264.avi

And we are done !

Click on the gif to watch the full video

Source :

Gource documentation

FFmpeg documentation

Read also :

Gource on Windows (SO thread)

Visualize Git logs using Gource

[aloisdg]

Method Hiding by example

Can anyone give me an example code for method hiding? I can find a lot of information but not a clear code example. I am missing something, I can't understand it 100%, I think I understood about 70% and it is not enough for me to code it. A sample code would really help. A sample code with a shop or a car or something else, could be helpful. Thank you in advance for your time!*

Ok lets try. You program for some reasons a c# code to get car's name from an id. You build a Dictionary<int, string>.

static Dictionary<int, string> Cars = new Dictionary<int, string> { { 8, "Flying Ford Anglia" }, { 16, "313" }, { 32, "K2000" }, { 64, "DeLorean" } };

For some others reasons, you want to print "Hello I am" and the name of your car each time you add one new car to your dictionary. Lets use inheritance and build a custom Dictionary and override the method Add(). Something like this :

class CustomDictionary<TKey, TValue> : Dictionary<TKey, TValue> { public override void Add(TKey key, TValue value) { Console.WriteLine("Hello I am {0}", value); base.Add(key, value); } }

But it will not work. You cannot override the Add() method of a Dictionary because she is not virtual. What can you do? One answer is to hide the Add() method with your own.

class CustomDictionary<TKey, TValue> : Dictionary<TKey, TValue> { public new void Add(TKey key, TValue value) { Console.WriteLine("Hello I am {0}", value); base.Add(key, value); }

}

Yeah it works ! Now lets sell some cars.

If you want to try the code, here we go.

* I rewrote the question of an edX classmate. This is not the original question.

[charlax-deactivated20240123]

[aloisdg]

Code should be:• Correct: does the code do what it’s supposed to? Does it handle edge cases? Is it adequately tested to make sure that it stays correct even when other engineers modify it? Is it...

[aloisdg]

Get content from a webpage or "How to Scrape the Sky"

Sometimes you may want something on a webpage or a lot things. If you can get it on a browser, you can get it everywhere. We call it web scraping. When you scrape, you just take the stuff you want. Basically, we are building your own API. If you source expose an API, use it. We are reading a page, if the page change we have to change too. An API is the direct source to the content. Safe drinking water starts at the source.

Well, imagine there is no Tumblr API and you want every title of this blog's front page. So you can't use /api/read nor /rss, what could you do ? Let's see.

We want to access to the webpage. A webpage is a content wrapping in a strange, gloomy, odd language called HTML. To parse it, there is a lot of solution. One is to use a strangest, gloomiest, oddest language called Regex. Let's do it. No, I am joking. By the way, you should read this thread from StackOverflow when you will finish to read this article. To get our content from the page we will use XPath and the HtmlAgilityPack.

XPath

XPath allow us to navigate around our webpage. We aim our content with it. Every modern browser get XPath as a built-in feature. I use a Chrome extension called XPath Helper to enhance this feature. You can download XPath Helper on the Chrome WebStore. If you are looking for a vanilla solution you can write $x("query") on the debug console and get the query from the Inspect Element tool.

If you are asking yourself how to use "XPath Helper", just follow instructions form the extension :

Open a new tab and navigate to your favorite webpage.

Hit Ctrl-Shift-X to open the XPath Helper console.

Hold down Shift as you mouse over elements on the page. The query box will continuously update to show the full XPath query for the element below the mouse pointer. The results box to its right will show the evaluated results for the query.

If desired, edit the XPath query directly in the console. The results box will immediately reflect any changes.

Hit Ctrl-Shift-X again to close the console.

I recommand you to play with the query in the console of XPath helper. You can learn more about the XPath Syntax on the MSDN, on Genius or with the RFC.

For example :

/html/body/div[@id='main']/div[@id='post'][2]/a/div[@class='title']

could be write

//div[@id='post'][2]/a/div[@class='title']

or like this to get each post's title of the page

//div[@id='post'][*]/a/div[@class='title']

Now, we have an XPath query. What to do with? We should ask to HtmlAgilityPack.

HtmlAgilityPack

So what is the HtmlAgilityPack (HAP) ? They present themself like this :

It is a .NET code library that allows you to parse "out of the web" HTML files.

And I have nothing to add. We are going to load a HTML page and parse the content we are looking for with our XPath query. To use HAP, we just have to install it from nuget.

There is a lot of example around the web about "how to use HAP?", here is mine :

var url = "http://aloisdg.tumblr.com/"; var query = "//div[@id='post'][.]/a/div[@class='title']"; HtmlDocument htmlDocument = new HtmlWeb().Load(url); foreach (var node in htmlDocument.DocumentNode.SelectNodes(query)) { // do something with node.InnerHtml Console.WriteLine(node.InnerHtml); }

The output is :

Exporter un visuel XAML en PNG Compiler du C# en ligne de commande sous Linux Générer une doc et un UML avec Doxygen et Graphviz Segoe UI alternatives Faire un Slider XAML complet en 5 petites étapes

You may want to decode this ~~ugly~~ html code. No need to code anything because .NET give you the method WebUtility.HtmlDecode().

The output with WebUtility.HtmlDecode() is :

Exporter un visuel XAML en PNG Compiler du C# en ligne de commande sous Linux Générer une doc et un UML avec Doxygen et Graphviz Segoe UI alternatives Faire un Slider XAML complet en 5 petites étapes

better isn't ?

Next stuff is up to you. Happy scraping.

PS : If you are looking for a solution without any code, you can check kimono or import.io. Another solution is to use Selenium.

[aloisdg]

Exporter un visuel XAML en PNG

Bonjour à tous, Chaque année, je fais une carte de voeux pour ma famille. Maîtrisant davantage XAML que PhotoShop, j'avais fait le choix l'année dernière de la réaliser avec mon langage déclaratif favoris. Cette année je recommence :

Basiquement, vous avez sous vos yeux des Grid et des TextBlock. Il n'existe pas de moyen direct pour exporter un visuel XAML en PNG. Une petite fonction peut faire ça pour nous. La voici :

void ExportXamlAsPng(Visual visual, int width, int height, string name = "image") { if (String.IsNullOrWhiteSpace(name)) throw new ArgumentNullException(name); // The Visual to use as the source of the RenderTargetBitmap. var drawingVisual = new DrawingVisual(); using (var drawingContext = drawingVisual.RenderOpen()) { drawingContext.DrawRectangle(new VisualBrush(visual), null, new Rect(new Point(), new Size(width, height))); } // The BitmapSource that is rendered with a Visual. // Windows operating system has set the default display "DPI" to 96 PPI var render = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Pbgra32); render.Render(drawingVisual); // Encoding the RenderBitmapTarget as a PNG file. var png = new PngBitmapEncoder(); png.Frames.Add(BitmapFrame.Create(render)); using (var stream = new FileStream(String.Format(@"{0}\{1}.png", Environment.GetFolderPath(Environment.SpecialFolder.MyPictures), name), FileMode.Create)) { png.Save(stream); } }

Vous trouverez des dizaines de logique pour cela sur votre moteur de recherche. Maintenant je sais où trouver ma version et vous aussi. Salutations.

[aloisdg]

Compiler du C# en ligne de commande sous Linux

Il existe mille raisons de ne pas faire du C# sur l'OS de Torvalds. Là n'est pas la question. Si vous voulez faire du C# sous Linux, ce qui suit peut vous intéresser.

Avant tout chose, il vous faut Mono. Mono est l'implémentation Open Source de la plateforme .NET. Vous pouvez le télécharger ici. Ecrivons un petit programme Test.cs que nous exécuterons.

using System; public class Program { public static void Main () { Console.WriteLine ("Hello World !"); } }

Compilons le avec mcs :

$> mcs Test.cs -out:test

Exécutons avec mono :

$> mono ./test

Nous obtiendrons sur la sortie standard :

Hello World !

Parfait. Bonus pour avoir lu mon article jusqu'à la fin : un petit Makefile pour tout ça :

NAME = test SRCS = Program.cs CSFLAGS = -out:$(NAME) CC = mcs RM = rm -f all : $(NAME) $(NAME) : $(CC) $(SRCS) $(CSFLAGS) clean : $(RM) $(NAME) re : clean all .PHONY : all clean re

[aloisdg]

Générer une doc et un UML avec Doxygen et Graphviz

Ne générez pas votre documentation et votre UML. Le résultat ne sera jamais aussi bon que si vous l'aviez réaliser vous même. Vous pouvez trouver des templates, des how to et plus pour vous aidez. Si jamais vous deviez tout de même avoir une base correcte sous la main. Laissez moi vous présentez le combo Doxygen/Graphviz. Doxygen est un générateur de documentaion. Graphviz est un générateur de graphique.

Installation

Rien d'extraordinaire, il vous suffit de suivre les étapes concernant votre OS. Download:

Doxygen

Graphviz

Etant actuellement sous Xubuntu, une simple ligne m'a suffit :

apt-get install doxygen graphviz

Initialisation

Doxygen encapsule déjà Graphviz. Placez-vous dans le dossier où se trouve votre projet. Pour initialiser la base de notre documentation, une seule commande est nécessaire:

doxygen -g nomDeVotreDoc

Utilisation

Un fichier texte du magnifique nom : nomDeVotreDoc se trouve à présent dans votre répertoire. Ouvrez le avec votre éditeur de texte favoris. Chaque commande est précédée par un commentaire explicatif. N'hésitez pas à vous attarder sur ceux liés aux commandes que je vous conseille de changer.

EXTRACT_ALL = YES HAVE_DOT = YES UML_LOOK = YES EXTRACT_PRIVATE = YES EXTRACT_STATIC = YES TEMPLATE_RELATIONS = YES UML_LIMIT_NUM_FIELDS = 0 INTERACTIVE_SVG = YES DOT_GRAPH_MAX_NODES = 100 GENERATE_LATEX = NO

A présent, générez votre doc avec la commande :

doxygen nomDeVotreDoc

Ouvrez la page index.html du dossier html pour observer le résultat. Libre à vous de modifier le rendu avec un peu de css ou via le script. source

[aloisdg]

Segoe UI alternatives

"If you remember the shape of your spoon at lunch, it has to be the wrong shape. The spoon and the letter are tools ; one to take food from the bowl, the other to take information off the page... When it is a good design, the reader has to feel comfortable because the letter is both banal and beautiful."

Adrian Frutiger

Je pense que la collection de police Segoe UI est une réussite. Les designers de Microsoft ont effectué un travail sublime. Cette police et ses dérivés se glissent partout. Invisible, on la remarque quand elle n'est pas présente.

Je cherche une police qui serait capable de dégager les mêmes traits que Segoe. Je cherche une font qui se confond partout et qui, contrairement à Segoe, est libre de droit. Je souhaite pouvoir l'utiliser librement et légalement à chaque endroit où je souhaite l'y trouver.

Actuellement, j'utilise deux principales alternatives :

Muli

Noto Sans

J'apprécie particulièrement Noto Sans. C'est celle que j'utilise le plus couramment.

Dans les choix que l'on retrouve souvent, il y a Open Sans et DéjaVu Sans. Si c'est deux polices sont aussi sympathiques que pratiques, je les trouve trop présentes. D'une certaine manière, gagnant en reconnaissance, elles perdent en identité.

[aloisdg]

Faire un Slider XAML complet en 5 petites étapes

Si vous êtes à l'aise avec le XAML, passez directement à l'etape 4.

Introduction

Le slider est un control XAML des plus basique. Il est très simple à mettre en place. Cependant, je lui reproche son manque de personnalisation. Si il est aisé de changer sa couleur de fond ou sa largeur, nous sommes vite limités. Naturellement, si nous souhaitons augmenter la hauteur de notre Slider, nous pensons à augmenter la valeur de l’attribut Height. Essayons.

Le premier Slider a la Height par défaut. Le second possède une Height à 200.

Décevant n'est-ce pas ? Nous avons agrandi la taille du control mais le slider en lui-même n'a pas bougé.

Habituellement pour toute personnalisation d'un Slider, il est de rigueur d'en éditer le template.

Je vais vous proposer une autre solution. Nous remarquons un léger problème. Si nous glissons le doigt le long du bas du control, nous prennons la main sur le slider sans vraiment le toucher. C'est grâce à cette feature que l'astuce que je vais vous présenter fonctionne.

N'hésitez pas à tester chaque snippet tout au long de l'article.

1ère Etape

Dans un StackPanel, nous allons placer une Grid et un Slider. Nous nommons le StackPanel "ContainerSlider", la Grid "FakeSlider1" et le Slider "Slider1". Ensuite, bindons l'attribut Maximum à l'ActualWidth de ContainerSlider1 et bindons la Width de la Grid à la Value de Slider1

<StackPanel x:Name="ContainerSlider1"> <Grid x:Name="FakeSlider1" HorizontalAlignment="Left" Background="Orange" Height="24" Width="{Binding ElementName=Slider1, Path=Value }" /> <Slider x:Name="Slider1" Minimum="0" Maximum="{Binding ActualWidth, ElementName=ContainerSlider1}" Value="50" /> </StackPanel>

2e Etape

Dans notre code, remplaçons le StackPanel par une Grid. Ajoutons à ContainerSlider1 un Background BlueViolet. Ce qui nous intéresse ici, c'est la superposition propre à l'élément Grid. ContainerSlider1 prend la taille de Slider1. Slider1 qui est le dernier élément de ContainerSlider1 se trouve au premier plan.

<Grid x:Name="ContainerSlider1" Background="BlueViolet"> <Grid x:Name="FakeSlider1" Background="Orange" HorizontalAlignment="Left" Width="{Binding Value, ElementName=Slider1}"></Grid> <Slider x:Name="Slider1" Height="100" Minimum="0" Maximum="{Binding ActualWidth, ElementName=ContainerSlider1}" Value="50" /> </Grid>

3e Etape

A présent nous allons régler l'opacité de Slider1 à 0 et changer les couleurs de nos Grid. Je trouve qu'à ce stade nous avons déjà un rendu plutôt intéressant. Qu'en pensez-vous ?

<Grid x:Name="ContainerSlider1" Background="{StaticResource PhoneChromeBrush}"> <Grid x:Name="FakeSlider1" Background="{StaticResource PhoneAccentBrush}" HorizontalAlignment="Left" Width="{Binding Value, ElementName=Slider1}"></Grid> <Slider x:Name="Slider3" Opacity="0" Height="100" Minimum="0" Maximum="{Binding ActualWidth, ElementName=ContainerSlider1}" Value="50" /> </Grid>

4e Etape

Nous allons créer un curseur. Insérons une nouvelle Grid entre Slider1 et FakeSlider1. Nous nommons cette Grid "Cursor1". Sa largeur est de 20. Afin que notre curseur soit toujours à droite de FakeSlider, nous allons les placer dans un StackPanel horizontale. Pour centrer le curseur, il suffit de lui ajouter une marge négative à gauche équivalente à la moitié de sa largeur. Avec une largeur de 20, nous obtenons une marge de -10.

<Grid x:Name="ContainerSlider1" Background="{StaticResource PhoneChromeBrush}"> <StackPanel Orientation="Horizontal"> <Grid x:Name="FakeSlider1" Background="{StaticResource PhoneAccentBrush}" Width="{Binding Value, ElementName=Slider1}"></Grid> <Grid x:Name="Cursor1" Width="20" Margin="-10,0,0,0" Background="{StaticResource PhoneForegroundBrush}"/> </StackPanel> <Slider x:Name="Slider1" Opacity="0" Height="100" Minimum="0" Maximum="{Binding ActualWidth, ElementName=ContainerSlider1}" Value="50" /> </Grid>

5e Etape

Cette étape sert à rendre le comportement du curseur plus réaliste. En fonction de la localisation du curseur, nous modifierons la valeur de la marge.

private void Slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) { if (Slider1 != null) Cursor1.Margin = SetCursorMargin(ContainerSlider1.ActualWidth, Cursor1.Width, e.NewValue); } private Thickness SetCursorMargin(double containerWidth, double thumbWidth, double sliderValue) { Thickness marginCursor = new Thickness(); double cursorWidthHalf = thumbWidth / 2; if (sliderValue < cursorWidthHalf) marginCursor.Left = -sliderValue; else if (sliderValue > containerWidth - cursorWidthHalf) marginCursor.Left = -(thumbWidth + sliderValue - containerWidth); else marginCursor.Left = -thumbWidth / 2; return marginCursor; }

J'ai fait en sorte de rendre le code ci-dessus le plus compréhensible possible, quitte à mettre de côté des questions de performance. Il n'en est pas sujet ici.

Aller plus loin

Ce slider n'est rien d'autre qu'un ensemble de Grid. On peut mettre absolument tout et n'importe quoi dedans. Vous pouvez parfaitement remplacer le curseur par une image, du texte, une vidéo, un calendrier, etc.

tl;dr

Il est possible de créer un slider facilement manipulable et modifiable avec deux Binding et un slider classique. Il suffit de rendre le slider invisible et de compter sur sa large zone tactile.

Retrouvez l'ensemble des sources de cet article sur mon GitHub