Vous trouverez ici diverses réalisations développées en C/C++, Visual Basic et PHP.
Mugshot est un module Drupal qui permet aux utilisateurs de ce prendre en photo directement depuis une page web. Les photos sont ensuite présentées dans une galerie ou sur un bloc.
Le module peut ce lier au formulaire de commentaire du site, ainsi, les utilisateurs peuvent laisser une photo dans leur commentaire.
La galerie des photos met à disposition un flux RSS pour notifier l'arrivée de nouvelles photos.
Mugshot dispose de 2 blocs, un pour remonter la dernière photo prise, et un pour remonter une photo aléatoire de la galerie.
Pour que le module fonctionne correctement, l'utilisateur doit disposer du plugin flash (version 8 minimum) sur son navigateur et autoriser l'accès à sa webcam.
Démonstration :
Voici quelques captures d'écran pour présenter le module en image :
Page du projet sur le site Drupal :
Pour télécharger la dernière version du module ou pour soumettre un bug, rendez-vous sur la page du projet sur le site Drupal.org.
Voici une nouvelle version du module mugshot qui sera prochainement publiée sur Drupal et que vous pouvez tester en avant-première.
Celle-ci permet maintenant de prendre des photos avec une résolution de 640x480 pixels. Et petit bonus, vous pouvez derformer l'image à l'aide de votre souris avant de la soumettre.
Pour essayer le module mugshot, cliquez ici, j'attends vos images et commentaires !
Voila à quoi ça peut ressembler :

Au passage, j'ai corrigé quelques bugs notifiés ici.
La version finale sera disponible d'ici quelques jours.
Voici une réédition du script mugshot standalone que j'ai publié il y a quelque temps.
Celui-ci permet de prendre des photos depuis votre webcam avec une résolution de 320x240 au lieu de 160x120 pour l'ancienne version.
Le serveur met un peu plus de temps pour recevoir l'image car il y a 4 fois plus de données qu'avant. J'en profite pour pauser la question aux flasheurs professionnels, connaissez-vous une méthode de compression du texte depuis flash et est il facile de modifier mon script pour pousser les captures sur des résolutions plus élevées ?
Une démo en ligne est disponible ici et le code source est lié à cette page.
| Fichier attaché | Taille |
|---|---|
| mugshot_standalone-320x240.zip | 76.52 Ko |
Voici enfin à la demande générale une version épurée du module mugshot.
Cette version 'ready-to-botch' contient :
Il y a un 'minimum' de documentation dans le code. Je répondrais aux questions si necessaire.
Pour voir une démonstration en ligne de ce script : mugshot standalone.
| Fichier attaché | Taille |
|---|---|
| mugshot_standalone.zip | 73.72 Ko |


Et voilà la dernière bidouille : Mugshot est un module Drupal que je suis en train de finaliser. Il permet aux visiteurs de laisser rapidement une photo à l'aide de leur webcam sur le site. Les photos sont ensuite disposée sur une galerie ou sur un bloc.
Le module sera bientôt en téléchargement, le temps de le tester, d'ajouter quelques features et de corriger les bugs. Alors si vous avez une webcam, donnez-moi un petit coup de pouce en testant le module et donnez votre avis ou vos idées en laissant un commentaire sur ce billet. D'avance merci.
Toutes mes excuses pour la publication tardive de cette version standalone de l'application mugshot. C'est pourtant prêt depuis décembre dernier...
Pour rappel voici les fonctionnalités de cette version :
La version intégrée à Drupal a déja fait pas mal de chemin, plus de 650 mugshots sur bonvga.net mais le record reste pour diariopopular avec plus de 19000 mugshots !
Vous pouvez tester la version standalone ici ou télécharger le fichier attaché ci-dessous pour l'installer sur votre serveur web.
| Fichier attaché | Taille |
|---|---|
| mugshot2_goo_640x480.zip | 39.48 Ko |
Après avoir passé un peu de temps à installer et bidouiller drupal, j'ai jeté un oeil à la documentation de la bête. C'est d'ailleurs drôlement bien foutu !
Bref, histoire de me plonger dans la communauté drupal, voici mon tout premier module. Il utilise la table des log d'accès des visiteurs (accesslog) pour construire un fichier Google Earth (.kml).
Ce module permet donc de représenter les visiteurs d'un site drupal sur une carte Google Earth . Pour voir les visiteurs de bonvga.net sur Google Earth, cliquez ici pour télécharger le fichier.
Sinon voici quelques captures en exemple :



Ce module drupal nécessite 2 pré-requis indispensables :
Pour télécharger le module, rendez-vous sur la page du projet.
J'ai enfin réadapté le code du module google_earth. La seule modification etait au niveau du panneau de configuration. En effet, les API pour gérer les élèments de formulaire sont nettement différentes entre les deux versions de Drupal. La nouvelle API est d'ailleurs beaucoup plus claire et plus maniable.
La nouvelle version du module est attachées à ce billet.
| Fichier attaché | Taille |
|---|---|
| google_earth-1.3.tar.gz | 24.3 Ko |
Une petite feature en plus sur le module google_earth : il affiche maintenant la position géographique de celui qui télécharge le fichier KML. La nouvelle version (1.2) est disponible sur cette page.
J'en profite également pour faire remarquer la mise à jour des cartes Google Earth sur Paris notamment, celles-ci offre une qualité incomparable aux précédentes.
Le module google_earth pour Drupal est maintenant disponible sur le CVS de Drupal à cette adresse : http://cvs.drupal.org/viewcvs/drupal/contributions/modules/google_earth/
J'annonce la sortie du module Google Earth pour Drupal 5.1.
Pour rappel, le module Google Earth pour Drupal permet d'afficher les visiteurs d'un site sur Google Earth.
Pour une petite démonstration, voici la carte des visiteurs de bonvga.net.
Ce module permet d'ajouter aux champs de recherche d'un site Drupal la fonctionnalité d'autocomplétion. En cours de frappe, le champ va s'étendre et proposer une liste de résultats avant de lancer la recherche.
Voici une démonstration du module :

Vous pouvez aussi tester le fonctionnement du module en essayant une recherche avec le formulaire en haut à droite.
Voici un aperçu du panneau de configuration du module :
Depuis ce panneau de configuration on peut :
Pour télécharger ce module ou soumettre un bug, rendez-vous sur la page du projet sur le site Drupal.org.

Avant de commencer : Cette page explique comment ajouter un champ de recherche autocompleté sur Drupal 4.6 en utilisant la librairie scriptaculous. Pour les nouvelles version de Drupal, j'ai développé un module Search autocomplete.
Voici une méthode pour 'ajaxifier' rapidement et simplement le moteur de recherche intégré à un site drupal. Ci dessous un exemple en image :

Commencez par télécharger scriptaculous puis décompactez l'archive dans le répertoire 'misc/' de votre installation de drupal.
Ensuite, sur le template themes/bluemarine_smarty/page.tpl (thème bluemarine_smarty), remplacez les portions de code suivantes :
{* remplacez cela *}
{$head}
{$styles}
{* --------------------- *}
{* par ceci *}
{$head}
<script src="misc/scriptaculous-js-1.6.0/lib/prototype.js" type="text/javascript"></script>
<script src="misc/scriptaculous-js-1.6.0/src/effects.js" type="text/javascript"></script>
<script src="misc/scriptaculous-js-1.6.0/src/controls.js" type="text/javascript"></script>
{$styles}et aussi
{* remplacez cela *}
<div id="search">
<input class="form-text" type="text" size="15" value="" name="edit[keys]" alt="{$search_description}" />
<input class="form-submit" type="submit" value="{$search_button_text}" />
</div>
{* --------------------- *}
{* par ceci *}
<div id="search">
<input autocomplete="off" class="form-text" type="text" size="15" value="" id="search_field" name="edit[keys]" alt="{$search_description}" />
<style type="text/css"><!--{literal}
div.auto_complete {
width: 250px;
background: #fff;
text-align: left;
}
div.auto_complete ul {
border:1px solid #ccc;
margin:0;
padding:0;
width:100%;
list-style-type:none;
}
div.auto_complete ul li {
margin:0;
padding:3px;
}
div.auto_complete ul li.selected {
background-color: #ccc;
}
div.auto_complete ul strong.highlight {
color: #ccc;
margin:0;
padding:0;
}{/literal}
--></style>
<div class="auto_complete" id="search_auto_complete"></div>
<script type="text/javascript">new Ajax.Autocompleter('search_field', 'search_auto_complete', 'ajax_search.php', {ldelim}{rdelim})</script>
<input class="form-submit" type="submit" value="{$search_button_text}" />
</div>La modification du template est quasi similaire selon les thèmes utilisés et le moteur de template utilisé.
Créer un fichier nommé ajax_search.php sur la racine du site.
<?php
include_once 'includes/bootstrap.inc';
include_once 'includes/common.inc' ;
list($q) = explode(" ",trim($_POST["edit"]["keys"]));
if (strlen($q)>1) {
$result = db_query('SELECT DISTINCT word FROM {search_total} WHERE word LIKE \'%s\' ORDER BY word ASC, count DESC LIMIT 30', $q.'%');
echo "<ul>";
while($line = db_fetch_object($result)) {
echo "<li>".$line->word."</li>";
}
echo "</ul>";
}
?>Et voila, il n'y a plus qu'à tester !
fblike est un thème pour Drupal et est inspiré du site Facebook.
Le thème possède un header avec gestion des liens primaires, une barre pour les titres et les onglets primaires et secondaires, une colonne à gauche pour les blocks, une zone de contenu et un footer.
Voici une capture d'écran qui présente ces différents éléments :

Ce thème possède des options de configuration supplémentaires optionnelles accèssibles si vous installez au préalable le module Theme Settings API. Dans ce cas, vous pourrez contrôler le générateur d'images pour le logo, le slogan et les titres de page en choisissant la police de caractère à utiliser.
Vous pouvez voir ci-dessous quelques exemples de personnalisation :

Pour télécharger ce thème, rendez-vous sur la page du projet sur Drupal.org.
NB : Le thème disponible sur le site Drupal.org n'inclus pas la génération dynamique du logo, du slogan et des titres. Pour installer cette fonctionnalité lisez cet article.
Ce soir j'ai terminé la dernière version du thème de ce site, j'ai nommé fblike. Celle-ci intègre de nouvelles options de personnalisation autour du logo et du slogan du site ainsi que les titres des pages.
Il est maintenant possible de choisir les polices de caractère à utiliser pour construire les images.
Voici quelques exemples de style à la volée :
Rendez-vous sur cette page pour télécharger le thème.
Avant de lire la suite : La fonctionnalité picto-title à été intégrée à la version HEAD le 16/11/07.
Sur ce site vous pouvez voir que le logo, le slogan et les titres sont sous forme d'images. Ceci à l'aide d'un script nommé picto-title.php qui ce charge de la génération de ces images.
Ce script n'est pas disponible avec la release du thème sur le site Drupal.org suite à quelques problèmes.
A l'aide de ce script, le site a un meilleur rendu mais il arrive dans certains cas que le script ne fonctionne pas. La raison est encore inconnue ; absence du support GD, freetype, PNG ou des polices de caractères TTF ?
Si vous souhaitez quand même essayer cette version, rendez-vous sur ma sandbox.
Voici les modes d'appels du script :
PHP version : 5.2.4-0.dotdeb.1
Zend version : 2.2.0
GD support is available
function gd_info : OK
GD version : bundled (2.0.34 compatible) (with freetype)
FreeType Support : Enable
PNG Support : Enable
function imagettfbbox : OK
function imagecreatetruecolor : OK
function imagecolorallocate : OK
function imagefilledrectangle : OK
function imagettftext : OK
function imagepng : OK
function imagedestroy : OK
Cache directory : OKVoici un rapide script pour remonter les graphiques des sondes de Munin sur une page Drupal. Pour donner un exemple, ça donne qui ce trouve sur cette page.
Donc pour commencer, il faut avoir une installation de Drupal et de Munin. Il faut ensuite faire un bon vieux lien symbolique du répertoire ou sont générés les fichiers de munin vers un répertoire visible du web, par exemple de le répertoire 'misc' de Drupal.
@ /var/www/munin/ln -s bonvga.net /var/www/bonvga_v71/misc/munin_dedibox/bonvga.netIl faut alors créer une nouvelle page sur Drupal avec un format d'entrée de type 'PHP Code' et y copier le suivant :
<?php
// configuration
$path = "/var/www/bonvga_v7/misc/munin_dedibox/bonvga.net/";
$www_path_munin = "http://www.bonvga.net/sites/www.bonvga.net/files/munin_dedibox/bonvga.net/";
$www_path_drupal = "http://www.bonvga.net/sites/www.bonvga.net/files/munin_dedibox/bonvga.net/";
$frequency = "day";
$extention = "png";
// aquisition des fichiers
$munin_list = array();
$munin_list_index = array();
if (is_dir($path))
{
if ($dh = opendir($path))
{
while (($file = readdir($dh)) !== false)
{
if (ereg("-".$frequency.".".$extention."$",$file))
{
$line = array();
$line["file"] = $file;
$tmp = explode("-",$file);
$line["name"] = $tmp[1];
$line["display_name"] = ucfirst(strtolower(str_replace("_"," ",$line["name"])));
$line["www_file"] = $www_path_drupal.$file;
$line["html"] = str_replace(array($extention,"-".$frequency),array("html",""),$file);
$line["www_html"] = $www_path_drupal.$line["html"];
$munin_list[] = $line;
$munin_list_index[$line["name"]] = count($munin_list)-1;
}
}
closedir($dh);
}
}
if (count($munin_list)>0)
{
// classement alphabetique
ksort($munin_list_index);
$munin_list_index_keys = array_keys($munin_list_index);
echo '<div align="right"><a href="http://munin.sourceforge.net/">';
echo '<img src="http://www.bonvga.net/sites/www.bonvga.net/files/munin/logo.png" /></a></div>';
echo '<p>Liste des graphiques disponibles :</p>';
// construction de l'index
echo '<a id="munin_top" />';
echo '<ul>';
for ($i=0;$i<count($munin_list_index_keys);$i++)
{
echo '<li>';
echo '<a href="'.$_SERVER["REQUEST_URI"].'#'.$munin_list[$munin_list_index[$munin_list_index_keys[$i]]]["name"].'">';
echo $munin_list[$munin_list_index[$munin_list_index_keys[$i]]]["display_name"];
echo '</a>';
echo '</li>';
}
echo '</ul>';
// construction de la liste d'image
for ($i=0;$i<count($munin_list_index_keys);$i++)
{
echo '<div>';
echo '<a id="'.$munin_list[$munin_list_index[$munin_list_index_keys[$i]]]["name"].'" />';
echo '<h1>'.$munin_list[$munin_list_index[$munin_list_index_keys[$i]]]["display_name"].'</h1>';
echo '<a href="'.$munin_list[$munin_list_index[$munin_list_index_keys[$i]]]["www_html"].'" target="munin">';
echo '<img src="'.$munin_list[$munin_list_index[$munin_list_index_keys[$i]]]["www_file"].'" />';
echo '</a>';
echo '<br />';
echo '<em>'.$munin_list[$munin_list_index[$munin_list_index_keys[$i]]]["display_name"].'</em>';
echo ' | <a href="'.$_SERVER["REQUEST_URI"].'#munin_top">Top</a>';
echo '</div>';
echo '<br />';
}
}
else
{
echo '<p>Pas de statistique pour le moment...</p>';
}
?>Il ne reste plus qu'a paramètrer les variables de chemin :
<?php
// chemin absolu vers le contenu de Munin
$path = "/var/www/bonvga_v7/misc/munin_dedibox/bonvga.net/";
// url absolue vers le contenu de Munin (depuis Munin ou Drupal)
$www_path_munin = "http://www.bonvga.net/sites/www.bonvga.net/files/munin_dedibox/bonvga.net/";
// url absolue vers le contenu de Munin (depuis Drupal)
$www_path_drupal = "http://www.bonvga.net/sites/www.bonvga.net/files/munin_dedibox/bonvga.net/";
// type de graphique à remonter (day, week, month ou year)
$frequency = "day";
// extention des images (voir dans la configuration de Munin)
$extention = "png";
?>Pour terminer, il suffit de sauver la page.
Pour voir une démonstration : cliquez ici.
Une modification du module Gallery pour Drupal qui permet d'afficher le résultat de la recherche à travers Gallery avec des miniatures :

Encore une modification de porki 
Dans le fichier gallery.module à la ligne 250 remplacez :
{* remplacez cela *}
$link = str_replace('&', '&', $urlGenerator->generateUrl(array('itemId' => $result['itemId'])));
$find[] = array('title' => $result['fields'][0]['value'],
'link' => $link,
'type' => $module['name'],
'snippet' => implode('<br />', $excerpt));
{* --------------------- *}
{* par ceci *}
$link = str_replace('&', '&', $urlGenerator->generateUrl(array('itemId' => $result['itemId'])));
$params['itemId'] = $result['itemId'];
$params['blocks'] = 'specificItem';
$params['show'] = 'none';
list($ret, $content) = GalleryEmbed::getImageBlock($params);
$excerpt[] = $content;
$find[] = array('title' => $result['fields'][0]['value'],
'link' => $link,
'type' => $module['name'],
'snippet' => implode('<br />', $excerpt));Et voila !
SmartyX est une classe dérivée de Smarty. Cette classe permet de nommer et d’adresser les templates via une notation pointée à la façon ModeliXe.
SmartyX héritant de toutes les fonctionnalités de Smarty, reste très souple et performant.
La gestion des caches est conservée et est sélective par template pointé.
La console de debug de Smarty est patchée pour prendre en compte la notation pointée et les caches assignés par templates.
SmartyX est développée pour PHP4 mais fonctionne parfaitement avec PHP5.
Un exemple de rendu par l'imbrication de plusieurs templates.

La console de debug Smarty est légèrement modifiée pour prendre en compte l'imbrication des templates ainsi que les caches par templates.

Une petite démo en ligne ? : C'est par ici !
Plus d'informations sur Smarty :
Plus d'informations sur ModeliXe :
Qui utilise SmartyX :
| Fichier attaché | Taille |
|---|---|
| smartyx_classe.zip | 4.83 Ko |
| smartyx_full_package.zip | 99.21 Ko |
| smartyx_with_demo.zip | 113.02 Ko |
Simplex CMS est une application développée en PHP 4 et permet de construire un site web, de l’animer et de présenter des contenus. Ce site (bonvga.net), utilise Simplex CMS. L’intérêt majeur de ce CMS (Content Manager System) et de limiter au maximum le temps d’exécution des scripts coté serveur pour les petites configurations (ce qui est mon cas). L’utilisation des caches permet en effet de ce rapprocher le plus possible de temps de traitement de pages statiques.
Dépendances système :
Outils utilisés :
Simplex CMS intègre un moteur de template robuste est flexible (Smarty) ce qui permet de modifier rapidement et facilement l’apparence du site sans modifier le code PHP de Simplex CMS.
Le backoffice (zone d’administration) de l’application permet de configurer les pages du site selon une série de paramètres comme la durée de vie du cache, l’apparence, le contenu et l’interactivité que propose la page (système de commentaires).
L’édition des pages dans le backoffice est réalisée à l’aide d’HtmlArea et propose une interface WYSIWYG.
Le système de cache de Smarty est désactivable dans la configuration. Si le cache est activé, seules certaines actions des surfeurs permettent de recontruire les caches d’une page. Il est possible d’administrer ces caches depuis le backoffice.
A la base Simplex CMS intègre :
Simplex CMS est évolutif, il est possible d’y ajouter des plugins. Une dizaine de plugins ont étés développés à ce jour pour les besoins du site, mais ceux-ci ne sont pas tous livrés avec Simplex CMS.
Liste des plugins Simplex CMS :
Liste des plugins non-fournis avec Simplex CMS :
Certains de ces plugins seront bientôt téléchargeable sur cette page.
Pour toutes les questions concernant Simplex CMS, utilisez le gestionnaire de commentaire en bas de page.
Quelques captures d'écran :
| Fichier attaché | Taille |
|---|---|
| simplex.zip | 444 Ko |







Cette librairie (objet) permet de gérer vos tables de votre base de donnée en utilisant des objets. Dans un objet héritant de sqllight, vous allez définir chaque champs de la table. Il est aussi possible de définir des filtres d'entrée/sortie pour chaque champ. Les filtres sont des méthodes de l'objet, par exemple une sérialisation et désérialisation d'une colonne.
Cette gestion des tables par des objets permet également de créer des jointures simplement en passant l'objet à joindre dans une méthode "join"
Possibilité de changer de système de base de donnée rapidement et sans modifier vos scripts. Tout du moins c'est prévu, mais il faut redévelopper le sqllight pour l'adapter au SGDB (mysql vers oracle par exemple).
Le sqllight ne gère pas encore le typage des données. C'est sont principal point faible. Il ne gère pas non plus les clause de type max, min, sum... Seul le COUNT(*) est implémenté (bizarrement). Il faudra attendre une prochaine version avant d'avoir quelques chose de plus stable et générique.
SQL implémenté :
Intérets :
Présentation rapide des méthodes (cf source) :
Cet objet est encore bien bugué et surtout incomplet. Mais ce projet me tiens à coeur c'est pourquoi il est sous licence LGPL. Vous avez donc la liberté d'apporter votre contribution à ce projet. Merci d'avance !
| Fichier attaché | Taille |
|---|---|
| sqllight.zip | 5.02 Ko |
| sqllight_demo.zip | 7.37 Ko |
L'ascii art, c koi ? Pour commencer, quelques exemples de ce qui se trouve sur le net chris.com ou alors une simple recherche sur google.
Cliquez ici pour tester le script en ligne.
Bon, bref, (en gros) comment ça marche ? Simple ! On utilise la table de caratères disponible pour construire un dessin ou une image avec. En général on utilise une police de caractères "de taille fixe" comme la police "system" sous une commande ms-dos ou la police "courier". En l'occurence on utilisera la police "courier".
Principe de base, prenons 4 caractères différents (au pif quoi), et regardons les à la loupe ! voila le résultat :

Magnifique culture de pixel ! Bon, a première vue, on observe que le caractère "B" est plus foncé que le "c" (non c pas un effet d'optique à la con à cause des couleurs !). Pour le prouver comptez les pixels représentant le caractère "B" et le caractère "c" (les pixels noirs en fait).... alors ? .... 26 pour le "B" et 12 pour le "c". Bon ! On en déduit alors que "plus ya de pixels, plus c sombre, moins ya de pixel plus c clair !" (c clair ?). Dans ce cas on peut représenter les contrastes d'une image uniquement avec des caractères ! C'est le principe de base de l'ascii art ! Facile non ?
Généralement, (et je dis bien généralement) on trouve sur le net des fichiers ascii art et mode texte lisibles sous bloc-note ou autre éditeur. Bref du monochrome. L'outil présenté ici, permet également de travailler en couleur sur des pages html en utilisant des balises "font" pour définir la couleur.
Passons à la technique, vous avez certainement testé l'appli donc je passe à la suite. On entre paramètre : une image, un mapping (série de caractères ascii) et un niveau de qualité.
Le script PHP prend l'image et la passe dans un outil nommé "convert". Ce magnifique outil de la série ImageMagick permet de convertir une image de format x vers un format y, je vous passe les détails, allez donc voir sur le site. Cette image envoyée par vous même est redimensionnée dans une résolution de 100 pixels par 100 (car c'est suffisant) puis convertie au format RGB. Une fois ce traitement effectué, le script charge l'image RGB et effectue une moyenne des 3 composantes de couleurs pour obtenir une image en niveaux de gris. Les niveaux de gris vont être calqué sur le mapping ascii pour obtenir les contrastes ensuite le caractère ascii ainsi déduit sera coloré selon la valeur les composantes RGB. Pour optimiser le résultat final, le script effectue un décalage bit à bit sur chaque composante RGB et diminue ainsi le nombre de couleurs.

Simple non ? Si vous avez des questions, n'hésitez pas à déposer un commentaire dans le formulaire en bas de page.
| Fichier attaché | Taille |
|---|---|
| asciiomatic.zip | 6.54 Ko |
En guise de présentation, je vais simplement donner un lien vers une excellente page (http://gjoly.free.fr/fractales/). Son contenu explique très simplement le fonctionnement des fractales et livre quelques algorythmes, notament celui de "l'ensemble de Mandelbrot".

Le script construit un tableau HTML dont les cellules sont plus ou moins grisées pour représenter la fractale. La construction est relativement longue et prend en moyenne 5 secondes. Ce script n'a bien
entendu aucune utilité, mais a pour but de montrer la construction de la fractale.
Pour ajouté un peu de piquant à l'affaire, il est possible de zoomer chaque cellule infiniment.
Pour voir la démonstration, cliquez ici
| Fichier attaché | Taille |
|---|---|
| mandelbrot.zip | 1.38 Ko |