New article for theming terminal

5 files changed, 273 insertions, 0 deletions

diff --git a/content/Informatique/colors.rst b/content/Informatique/colors.rst
new file mode 100644
index 0000000..c1e4929
--- /dev/null
+++ b/content/Informatique/colors.rst
@@ -0,0 +1,217 @@
+.. -*- mode: rst -*-
+.. -*-  coding: utf-8 -*-
+
+==============================================
+Se créer un thème de couleur dans son terminal
+==============================================
+
+:date: 2014-05-18
+:tags: libre, DIY
+:logo: /images/palette_75.jpg
+:summary:
+    Quand on utilise un terminal tous les jours, on a envie de l'adapter en
+    fonction de ses goûts. Il existe beaucoup de thèmes disponibles sur le net
+    qui permettent de le configurer à sa guise, mais rien qui n'explique
+    comment en créer un nouveau.
+
+.. figure:: {filename}/images/palette_150.jpg
+    :figwidth: 150
+    :figclass: floatleft
+    :alt: Palette
+
+    Image : `Hafsa Nabeel`_ (creativecommons_)
+
+.. _Hafsa Nabeel: https://www.flickr.com/photos/hafsacreations/3241957057/
+.. _creativecommons: http://creativecommons.org/licenses/by-nc-nd/2.0/
+
+Il est assez facile de se créer un thème de couleur pour son terminal. La
+plupart du temps on trouve des thèmes à copier qui contiennent la liste des
+couleurs à utiliser, mais il est rarement expliqué comment faire pour en créer
+un nouveau. C'est pourtant assez simple une fois que l'on a compris les bases.
+
+Les bases
+=========
+
+La plupart des terminaux peuvent afficher 256 couleurs ou plus, mais le shell
+n'a besoin que de six couleurs de base (auxquelles viennent s'ajouter le blanc
+et le noir que je ne traite pas ici). Il s'agit des trois couleurs primaires,
+et les trois couleurs secondaires, que l'on peut représenter la palette sous
+forme de tableau (dans l'ordre d'index utilisé dans un terminal) :
+
+.. raw:: html
+
+    <table cellspacing="2" cellpadding="3" border="1">
+      <tbody>
+      <tr>
+        <th scope="row">Couleur</th>
+        <td width="15%">Rouge</td>
+        <td width="15%">Vert</td>
+        <td width="15%">Jaune</td>
+        <td width="15%">Bleu</td>
+        <td width="15%">Magenta</td>
+        <td width="15%">Cyan</td>
+      </tr>
+      <tr>
+        <th scope="row">Clair</th>
+        <td bgcolor="Red"></td>
+        <td bgcolor=#00FF00></td>
+        <td bgcolor="Yellow"></td>
+        <td bgcolor="Blue"></td>
+        <td bgcolor="Fuchsia"></td>
+        <td bgcolor="Aqua"></td>
+      </tr>
+      <tr>
+        <th scope="row">Sombre</th>
+        <td bgcolor=#800000></td>
+        <td bgcolor=#008000></td>
+        <td bgcolor=#808000></td>
+        <td bgcolor=#000080></td>
+        <td bgcolor=#800080></td>
+        <td bgcolor=#008080></td>
+      </tr>
+    </tbody></table>
+
+Cette représentation sous forme de tableau présente l'avantage de montrer deux
+caractéristiques : le nombre de couleurs de base est limité, et la variante
+sombre ou claire consiste juste à changer la luminosité.
+
+Construire le thème
+===================
+
+Nous allons créer deux thèmes : un clair et un sombre.
+
+
+Pour faire un thème homogène, il va falloir respecter deux règles :
+
+- Chaque couleur devra avoir la même luminosité que les autres couleurs
+  du thème : il ne faut pas qu'une couleur éclate davantage que les autres.
+- Chaque couleur devra occuper le même espace [#]_ dans le cercle
+  colorimétrique : il ne faut pas que deux couleurs semblent proches au point
+  de les confondre.
+
+Pour respecter ces deux contraintes, nous allons être obligé de construire
+notre thème via une application, qui sera plus à même que nous de respecter ces
+deux contraintes.
+
+La représentation des couleurs
+==============================
+
+Il existe plusieurs manières de représenter les couleurs en informatique, la
+plus connue est la `représentation RGB`_, mais celle-ci n'est pas très pratique
+dans notre cas d'utilisation : en effet il n'est pas possible en utilisant
+cette représentation de passer facilement de la teinte claire à sombre. Nous
+allons nous intéresser ici à la représentation `Teinte/Saturation/Valeur`_ qui
+présente l'avantage de séparer la teinte d'une couleur de sa luminosité.
+
+Selon la codification TSL, chaque teinte de couleur est séparée de 60°. Il
+faudra donc conserver cet écart dans notre thème final. Par contre nous avons
+la possibilité d'appliquer une rotation du cercle pour faire varier la teinte
+des couleurs, c'est ce qui donnera les couleurs de notre thème. Il ne nous
+reste plus qu'à définir les valeurs de saturation/valeur pour le thème clair et
+le thème sombre.
+
+Après tout le reste n'est que conversion d'un système de représentation à un
+autre, ce qui peut se faire tout seul avec un petit script.
+
+
+Le résultat
+===========
+
+Le script est écrit en python et peut être `téléchargé ici`_, il reçoit 5
+paramètres, et écrit sur la sortie la configuration pouvant être utilisée avec
+`rxvt` et `xterm`, deux émulateurs de terminaux permettant un bon niveau de
+configuration.
+
+
+.. _téléchargé ici: {filename}/resources/colors.py
+
+.. list-table::
+    :header-rows: 1
+
+    * - décalage
+      - saturation claire
+      - saturation sombre
+      - valeur claire
+      - valeur sombre
+    * - 30
+      - 60
+      - 50
+      - 90
+      - 70
+
+Ce qui donnera l'exécution suivante :
+
+.. code-block:: bash
+
+    $ python colors.py 30 60 50 90 70
+
+Il est possible de modifier les couleurs sans enregistrer le paramétrage
+définitivement en passant la sortie du script à `xrdb` avant d'ouvrir un
+nouveau terminal :
+
+.. code-block:: bash
+
+    $ python colors.py 30 60 50 90 70  | xrdb -override
+
+Si vous voulez appliquer ce paramétrage définitement, il faut l'enregistrer
+dans le fichier `~/.Xdefaults`
+
+Le résulat des couleurs générées avec les valeurs définies ci-dessus :
+
+.. raw:: html
+
+    <table cellspacing="2" cellpadding="3" border="1">
+      <tbody>
+      <tr>
+        <th scope="row">Couleur</th>
+        <td width="15%">Rouge</td>
+        <td width="15%">Vert</td>
+        <td width="15%">Jaune</td>
+        <td width="15%">Bleu</td>
+        <td width="15%">Magenta</td>
+        <td width="15%">Cyan</td>
+      </tr>
+      <tr>
+        <th scope="row">Clair</th>
+        <td bgcolor=#e6175c></td>
+        <td bgcolor=#a1e65c></td>
+        <td bgcolor=#e6a15c></td>
+        <td bgcolor=#5ca1e6></td>
+        <td bgcolor=#a15ce6></td>
+        <td bgcolor=#5ce6a1></td>
+      </tr>
+      <tr>
+        <th scope="row">Sombre</th>
+        <td bgcolor=#b32c59></td>
+        <td bgcolor=#86b359></td>
+        <td bgcolor=#b38659></td>
+        <td bgcolor=#5986b3></td>
+        <td bgcolor=#8659b3></td>
+        <td bgcolor=#59b386></td>
+      </tr>
+    </tbody></table>
+
+Et voilà ce que ça donne en réeel : des couleurs plutôt douces et claires qui
+n'agressent pas les yeux ^^
+
+.. image:: {filename}/images/Capture-terminal.png
+    :class: center
+    :alt: caputre d'écran
+
+Vous pouvez à votre tour essayer d'autres combinaisons pour vous créer votre
+propre palette à utiliser dans votre terminal.
+
+
+.. _représentation RGB: https://fr.wikipedia.org/wiki/Rouge_vert_bleu
+.. _Teinte/Saturation/Valeur: https://fr.wikipedia.org/wiki/Teinte_Saturation_Valeur
+
+.. [#]
+
+    On peut concevoir l'ensembre des couleurs comme un système, c'est-à-dire un
+    ensemble d'éléments interdépendants les uns des autres : l'espace occupé
+    par un élément correspond à l'espace qui n'est pas pris par l'ensemble des
+    autres éléments.
+
+    Comme les six couleurs de base sont uniformément réparties dans le cercle
+    colorimétrique, il faut que notre thème final conserve cette répartition.
+
diff --git a/content/images/Capture-terminal.png b/content/images/Capture-terminal.png
new file mode 100644
index 0000000..b66dcc0
--- /dev/null
+++ b/content/images/Capture-terminal.png
diff --git a/content/images/palette_150.jpg b/content/images/palette_150.jpg
new file mode 100644
index 0000000..90b4151
--- /dev/null
+++ b/content/images/palette_150.jpg
diff --git a/content/images/palette_75.jpg b/content/images/palette_75.jpg
new file mode 100644
index 0000000..0abda80
--- /dev/null
+++ b/content/images/palette_75.jpg
diff --git a/content/resources/colors.py b/content/resources/colors.py
new file mode 100644
index 0000000..25ade58
--- /dev/null
+++ b/content/resources/colors.py
@@ -0,0 +1,56 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+import sys
+import colorsys
+
+def define(saturation, value):
+
+    def showColor(hue):
+        return colorsys.hsv_to_rgb(hue, saturation, value)
+
+    return showColor
+
+def showColor(theme, hue):
+
+    r, g, b = theme(hue / 360.)
+    return "#%02x%02x%02x" % (int(r*256), int(g*256), int(b*256))
+
+if __name__ == "__main__":
+
+    if len(sys.argv) < 5:
+        print "Usage :"
+        print "color.py SHIFT LIGHT_SATURATION DARK_SATURATION LIGHT_VALUE DARK_VALUE"
+        sys.exit(1)
+
+    shift = int(sys.argv[1])
+    light_s = int(sys.argv[2])/100.
+    dark_s =  int(sys.argv[3])/100.
+    light_v = int(sys.argv[4])/100.
+    dark_v =  int(sys.argv[5])/100.
+
+    colors = {
+
+        1 : 0,    # red
+        3 : 60,   # yellow
+        2 : 120,   # green
+        6 : 180,  # cyan
+        4 : 240,  # blue
+        5 : 300,  # magenta
+
+    }
+
+    dark_theme = define(dark_s, dark_v)
+    light_theme = define(light_s, light_v)
+    for (name, value) in colors.iteritems():
+
+        dark  = showColor(dark_theme, value - shift)
+        light = showColor(light_theme, value - shift)
+
+        print "urxvt.color%d : %s" % (name, dark)
+        print "urxvt.color%d : %s" % (name+8, light)
+
+        print "XTerm*color%d : %s" % (name, dark)
+        print "XTerm*color%d : %s" % (name+8, light)
+
+