Créer rapidement des bulles humoristiques

Il est parfois dans le cadre d’une présentation par exemple d’insérer un petit élément d’humour comme ceci

../_images/201512041452.png

Il est tout à fait possible d’implémenter un outil permet de faire rapidement et simplement ce genre de bulle.

Il s’agit d’un outil web qu’on peut retrouver sur https://framalab.org/gknd-creator/

Installation

Il vous faut un serveur web, comme apache

apt-get install apache

Je vous laisse voir les billets spécifiques pour la configuration d’un serveur web

Nous allons maintenant récuperer via le serveur git de framablog l’outil

cd /var/www
git clone https://github.com/framasoft/geektionnerd-generator.git
mv geektionnerd-generator geek

Et voilà vous pouvez utilisez l’outil sur l’url http://127.0.0.1/geek

Mise à jours

La version du soft présente sur le serveur git n’est pas identique à la version sur web.

Nous allons remédier à cela en téléchargeant les fichiers à mettre à jours

cd /var/www/geek
rm index.html
rm comicgen.js
rm ragaboom.min.js
wget https://framalab.org/gknd-creator/
wget https://framalab.org/gknd-creator/comicgen.js
wget https://framalab.org/gknd-creator/gege.css
wget https://framalab.org/gknd-creator/ragaboom.min.js
cd images
wget https://framalab.org/gknd-creator/images/banniere_gege.png
cd ../toons
wget https://framalab.org/gknd-creator/toons/fond1.png
wget https://framalab.org/gknd-creator/toons/fond2.png
wget https://framalab.org/gknd-creator/toons/fond3.png
wget https://framalab.org/gknd-creator/toons/fond4.png
wget https://framalab.org/gknd-creator/toons/toon13_mini.png
wget https://framalab.org/gknd-creator/toons/toon01_mini.png
wget https://framalab.org/gknd-creator/toons/toon02_mini.png
wget https://framalab.org/gknd-creator/toons/toon04_mini.png
wget https://framalab.org/gknd-creator/toons/toon05_mini.png
wget https://framalab.org/gknd-creator/toons/toon07_mini.png
wget https://framalab.org/gknd-creator/toons/toon08_mini.png
wget https://framalab.org/gknd-creator/toons/toon11_mini.png
wget https://framalab.org/gknd-creator/toons/toon09_mini.png
wget https://framalab.org/gknd-creator/toons/toon15_mini.png
wget https://framalab.org/gknd-creator/toons/toon06_mini.png
wget https://framalab.org/gknd-creator/toons/toon10_mini.png
wget https://framalab.org/gknd-creator/toons/toon03_mini.png
wget https://framalab.org/gknd-creator/toons/toon12_mini.png
wget https://framalab.org/gknd-creator/toons/toon14_mini.png
wget https://framalab.org/gknd-creator/toons/smiley01.png
wget https://framalab.org/gknd-creator/toons/smiley02.png
wget https://framalab.org/gknd-creator/toons/smiley03.png
wget https://framalab.org/gknd-creator/toons/ballon1_mini.png
wget https://framalab.org/gknd-creator/toons/ballon2_mini.png
wget https://framalab.org/gknd-creator/toons/ballon3_mini.png
wget https://framalab.org/gknd-creator/toons/ballon4_mini.png
wget https://framalab.org/gknd-creator/toons/ballon5_mini.png
wget https://framalab.org/gknd-creator/toons/ballon6_mini.png
wget https://framalab.org/gknd-creator/toons/affirmatif_mini.png
wget https://framalab.org/gknd-creator/toons/agace_mini.png
wget https://framalab.org/gknd-creator/toons/blagueur_bras_croises_mini.png
wget https://framalab.org/gknd-creator/toons/blagueur_bras_ecartes_mini.png
wget https://framalab.org/gknd-creator/toons/blagueur_doigt_leve_mini.png
wget https://framalab.org/gknd-creator/toons/blagueuse_mini.png
wget https://framalab.org/gknd-creator/toons/blase_mini.png
wget https://framalab.org/gknd-creator/toons/boude_mini.png
wget https://framalab.org/gknd-creator/toons/boudeur_mini.png
wget https://framalab.org/gknd-creator/toons/chasseur_mini.png
wget https://framalab.org/gknd-creator/toons/choque_mini.png
wget https://framalab.org/gknd-creator/toons/connard_mini.png
wget https://framalab.org/gknd-creator/toons/connard_avide_mini.png
wget https://framalab.org/gknd-creator/toons/connard_enoncant_mini.png
wget https://framalab.org/gknd-creator/toons/connard_menacant_mini.png
wget https://framalab.org/gknd-creator/toons/connard_pupitre_mini.png
wget https://framalab.org/gknd-creator/toons/depite_mini.png
wget https://framalab.org/gknd-creator/toons/desapointe_mini.png
wget https://framalab.org/gknd-creator/toons/desapointee_mini.png
wget https://framalab.org/gknd-creator/toons/effraye_mini.png
wget https://framalab.org/gknd-creator/toons/etonne_mini.png
wget https://framalab.org/gknd-creator/toons/facepalm_mini.png
wget https://framalab.org/gknd-creator/toons/facepalm2_mini.png
wget https://framalab.org/gknd-creator/toons/fache_mini.png
wget https://framalab.org/gknd-creator/toons/fbi_mini.png
wget https://framalab.org/gknd-creator/toons/festif_mini.png
wget https://framalab.org/gknd-creator/toons/guitare_mini.png
wget https://framalab.org/gknd-creator/toons/harpon_mini.png
wget https://framalab.org/gknd-creator/toons/heureux_mini.png
wget https://framalab.org/gknd-creator/toons/indigne_mini.png
wget https://framalab.org/gknd-creator/toons/inebranlable_mini.png
wget https://framalab.org/gknd-creator/toons/inebranlable2_mini.png
wget https://framalab.org/gknd-creator/toons/ironique_mini.png
wget https://framalab.org/gknd-creator/toons/journal_mini.png
wget https://framalab.org/gknd-creator/toons/journaliste_surpris_mini.png
wget https://framalab.org/gknd-creator/toons/joyeux_mini.png
wget https://framalab.org/gknd-creator/toons/lisant_mini.png
wget https://framalab.org/gknd-creator/toons/lisant_a_haute_voix_mini.png
wget https://framalab.org/gknd-creator/toons/la_mort_mini.png
wget https://framalab.org/gknd-creator/toons/marchant_mini.png
wget https://framalab.org/gknd-creator/toons/montre_du_doigt_mini.png
wget https://framalab.org/gknd-creator/toons/moqueur_mini.png
wget https://framalab.org/gknd-creator/toons/nauseeux_mini.png
wget https://framalab.org/gknd-creator/toons/negatif1_mini.png
wget https://framalab.org/gknd-creator/toons/negatif2_mini.png
wget https://framalab.org/gknd-creator/toons/negatif3_mini.png
wget https://framalab.org/gknd-creator/toons/negatif4_mini.png
wget https://framalab.org/gknd-creator/toons/negatif5_mini.png
wget https://framalab.org/gknd-creator/toons/non_mais_mini.png
wget https://framalab.org/gknd-creator/toons/paon_mini.png
wget https://framalab.org/gknd-creator/toons/pedant_mini.png
wget https://framalab.org/gknd-creator/toons/pensif_mini.png
wget https://framalab.org/gknd-creator/toons/pensive_mini.png
wget https://framalab.org/gknd-creator/toons/positif1_mini.png
wget https://framalab.org/gknd-creator/toons/positif2_mini.png
wget https://framalab.org/gknd-creator/toons/positif3_mini.png
wget https://framalab.org/gknd-creator/toons/positif4_mini.png
wget https://framalab.org/gknd-creator/toons/positif5_mini.png
wget https://framalab.org/gknd-creator/toons/psst_mini.png
wget https://framalab.org/gknd-creator/toons/sabre_laser_mini.png
wget https://framalab.org/gknd-creator/toons/scandalise_mini.png
wget https://framalab.org/gknd-creator/toons/se_cache_les_yeux_mini.png
wget https://framalab.org/gknd-creator/toons/souriante_mini.png
wget https://framalab.org/gknd-creator/toons/surarme_mini.png
wget https://framalab.org/gknd-creator/toons/surpris_mini.png
wget https://framalab.org/gknd-creator/toons/transpirant_mini.png
wget https://framalab.org/gknd-creator/toons/tsss_mini.png
wget https://framalab.org/gknd-creator/toons/vador_mini.png
wget https://framalab.org/gknd-creator/toons/vieille_dame_mini.png
wget https://framalab.org/gknd-creator/toons/voiture_mini.png
wget https://framalab.org/gknd-creator/toons/fond1.png
wget https://framalab.org/gknd-creator/toons/fond2.png
wget https://framalab.org/gknd-creator/toons/fond3.png
wget https://framalab.org/gknd-creator/toons/fond4.png
wget https://framalab.org/gknd-creator/toons/toon13.png
wget https://framalab.org/gknd-creator/toons/toon01.png
wget https://framalab.org/gknd-creator/toons/toon02.png
wget https://framalab.org/gknd-creator/toons/toon04.png
wget https://framalab.org/gknd-creator/toons/toon05.png
wget https://framalab.org/gknd-creator/toons/toon07.png
wget https://framalab.org/gknd-creator/toons/toon08.png
wget https://framalab.org/gknd-creator/toons/toon11.png
wget https://framalab.org/gknd-creator/toons/toon09.png
wget https://framalab.org/gknd-creator/toons/toon15.png
wget https://framalab.org/gknd-creator/toons/toon06.png
wget https://framalab.org/gknd-creator/toons/toon10.png
wget https://framalab.org/gknd-creator/toons/toon03.png
wget https://framalab.org/gknd-creator/toons/toon12.png
wget https://framalab.org/gknd-creator/toons/toon14.png
wget https://framalab.org/gknd-creator/toons/smiley01.png
wget https://framalab.org/gknd-creator/toons/smiley02.png
wget https://framalab.org/gknd-creator/toons/smiley03.png
wget https://framalab.org/gknd-creator/toons/ballon1.png
wget https://framalab.org/gknd-creator/toons/ballon2.png
wget https://framalab.org/gknd-creator/toons/ballon3.png
wget https://framalab.org/gknd-creator/toons/ballon4.png
wget https://framalab.org/gknd-creator/toons/ballon5.png
wget https://framalab.org/gknd-creator/toons/ballon6.png
wget https://framalab.org/gknd-creator/toons/affirmatif.png
wget https://framalab.org/gknd-creator/toons/agace.png
wget https://framalab.org/gknd-creator/toons/blagueur_bras_croises.png
wget https://framalab.org/gknd-creator/toons/blagueur_bras_ecartes.png
wget https://framalab.org/gknd-creator/toons/blagueur_doigt_leve.png
wget https://framalab.org/gknd-creator/toons/blagueuse.png
wget https://framalab.org/gknd-creator/toons/blase.png
wget https://framalab.org/gknd-creator/toons/boude.png
wget https://framalab.org/gknd-creator/toons/boudeur.png
wget https://framalab.org/gknd-creator/toons/chasseur.png
wget https://framalab.org/gknd-creator/toons/choque.png
wget https://framalab.org/gknd-creator/toons/connard.png
wget https://framalab.org/gknd-creator/toons/connard_avide.png
wget https://framalab.org/gknd-creator/toons/connard_ennoncant.png
wget https://framalab.org/gknd-creator/toons/connard_menacant.png
wget https://framalab.org/gknd-creator/toons/connard_pupitre.png
wget https://framalab.org/gknd-creator/toons/depite.png
wget https://framalab.org/gknd-creator/toons/desapointe.png
wget https://framalab.org/gknd-creator/toons/desapointee.png
wget https://framalab.org/gknd-creator/toons/effraye.png
wget https://framalab.org/gknd-creator/toons/etonne.png
wget https://framalab.org/gknd-creator/toons/facepalm.png
wget https://framalab.org/gknd-creator/toons/facepalm2.png
wget https://framalab.org/gknd-creator/toons/fache.png
wget https://framalab.org/gknd-creator/toons/fbi.png
wget https://framalab.org/gknd-creator/toons/festif.png
wget https://framalab.org/gknd-creator/toons/guitare.png
wget https://framalab.org/gknd-creator/toons/harpon.png
wget https://framalab.org/gknd-creator/toons/heureux.png
wget https://framalab.org/gknd-creator/toons/indigne.png
wget https://framalab.org/gknd-creator/toons/inebranlable.png
wget https://framalab.org/gknd-creator/toons/inebranlable2.png
wget https://framalab.org/gknd-creator/toons/ironique.png
wget https://framalab.org/gknd-creator/toons/journal.png
wget https://framalab.org/gknd-creator/toons/journaliste_surpris.png
wget https://framalab.org/gknd-creator/toons/joyeux.png
wget https://framalab.org/gknd-creator/toons/lisant.png
wget https://framalab.org/gknd-creator/toons/lisant_a_haute_voix.png
wget https://framalab.org/gknd-creator/toons/la_mort.png
wget https://framalab.org/gknd-creator/toons/marchant.png
wget https://framalab.org/gknd-creator/toons/montre_du_doigt.png
wget https://framalab.org/gknd-creator/toons/moqueur.png
wget https://framalab.org/gknd-creator/toons/nauseeux.png
wget https://framalab.org/gknd-creator/toons/negatif1.png
wget https://framalab.org/gknd-creator/toons/negatif2.png
wget https://framalab.org/gknd-creator/toons/negatif3.png
wget https://framalab.org/gknd-creator/toons/negatif4.png
wget https://framalab.org/gknd-creator/toons/negatif5.png
wget https://framalab.org/gknd-creator/toons/non_mais.png
wget https://framalab.org/gknd-creator/toons/paon.png
wget https://framalab.org/gknd-creator/toons/pedant.png
wget https://framalab.org/gknd-creator/toons/pensif.png
wget https://framalab.org/gknd-creator/toons/pensive.png
wget https://framalab.org/gknd-creator/toons/positif1.png
wget https://framalab.org/gknd-creator/toons/positif2.png
wget https://framalab.org/gknd-creator/toons/positif3.png
wget https://framalab.org/gknd-creator/toons/positif4.png
wget https://framalab.org/gknd-creator/toons/positif5.png
wget https://framalab.org/gknd-creator/toons/psst.png
wget https://framalab.org/gknd-creator/toons/sabre_laser.png
wget https://framalab.org/gknd-creator/toons/scandalise.png
wget https://framalab.org/gknd-creator/toons/se_cache_les_yeux.png
wget https://framalab.org/gknd-creator/toons/souriante.png
wget https://framalab.org/gknd-creator/toons/surarme.png
wget https://framalab.org/gknd-creator/toons/surpris.png
wget https://framalab.org/gknd-creator/toons/transpirant.png
wget https://framalab.org/gknd-creator/toons/tsss.png
wget https://framalab.org/gknd-creator/toons/vador.png
wget https://framalab.org/gknd-creator/toons/vieille_dame.png
wget https://framalab.org/gknd-creator/toons/voiture.png
cd ../font
ln -s  Domestic_Manners.ttf domestic_manners-webfont.ttf

Ajouter des éléments

L’ajout d’éléments est assez simple il suffit

  1. créer un fichier toons/myimage.png
  2. créer un fichier toons/myimage_mini.png avec une taille de 60x60 pixels
  3. modifier les variables miniUrls et toonsUrl du fichier comicgen.js

Note

Afin de rendre plus facile la création d’un site avec mes ajouts j’ai créé un dépot git contenant mes ajouts:

git clone https://github.com/fraoustin/geek.git