Bonjour à tous !
Un premier tutoriel pour les possesseurs de PirateBox qui souhaitent rendre la navigation sur leur box plus jolie. Ne vous attendez pas à des miracles, car n’étant pas (plus ?) programmeur, je n’ai pas pris le temps de me plonger énormément dans les rouages de Python mais pour ce que nous cherchons à faire ici, cela suffira amplement.
Première note, en examinant le HTML généré par la PirateBox, on peut bondir de voir des incohérences dans le code HTML pondu par Droopy et SimpleHTTPServer. Alors je vous le dis tout net : mes modifications ne rendront pas le code HTML valide W3C à 100% ! Il ne l’est déjà pas à la base 
Ensuite, je vous avertis d’emblée : les modifications que j’ai faites ici ont de grandes chances d’être effacées par une mise à jour du package piratebox ! Cet article permettra de garder une trace des choses à faire.
D’abord, premier point : pour des raisons pratique, j’ai créé un répertoire src dans le dossier Shared de la clé USB. Dans ce dossier figureront la feuille de style et les images nécessaires à la personnalisation du listing.
Avant de commencer, je vous suggère de chercher trois images. Une qui représente le fond d’écran que vous voulez donner à votre listing (non obligatoire, cela peut être une couleur unie), et deux icônes pour représenter les fichiers et les dossiers. Ici par exemple.
Pour ma PirateBox j’ai pris des icônes de 32 px de côté.
Directory Listing par défaut.
Première chose à faire : se connecter en wi-fi à son réseau PirateBox. Puis, dans un terminal, exécuter :
ssh root@192.168.1.1
L’IP de votre PirateBox peut être différente donc modifiez la en conséquence.
Le mot de passe root saisi, nous allons pouvoir commencer.
Le premier fichier que nous allons modifier est le fichier SimpleHTTPServer.py, donc nous allons le copier pour le sauvegarder et l’éditer avec vi :
cd /mnt/ext/usr/lib/python2.7/ cp SimpleHTTPServer.py SimpleHTTPServer.py.bak vi SimpleHTTPServer.py
Utilisez les flèches de direction du clavier pour défiler jusqu’à la ligne 115 (le numéro de ligne est indiqué en bas du terminal). Vous pouvez voir
f.write('<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">')
f.write("<html>\n<title>Directory listing for %s</title>\n" % displaypath)
f.write("<body>\n<h2>Directory listing for %s</h2>\n" % displaypath)
f.write("<hr>\n<ul>\n")
On peut y voir la structure de base du document HTML proposée par le serveur HTTP. Pour le rendre plus joli, c’est ici qu’il est nécessaire d’agir, en ajoutant un lien à une feuille de style qui nous permettra de modifier à loisir le look’n'feel de notre page, sans avoir à redémarrer le serveur.
J’ai modifié ces lignes de la manière suivante (il faut placer le curseur où vous souhaitez modifier le fichier puis appuyer sur la touche i de votre clavier pour entrer en mode d’édition) :
f.write('<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">')
f.write("<html>\n<head><title>Liste de fichiers du répertoire %s</title>\n" % displaypath)
f.write('<link rel="stylesheet" href="/src/styles.css" type="text/css" />\n</head>\n')
f.write('<body>\n<h2><a href="http://piratebox.lan">Retour au menu</a> - Liste de fichiers du répertoire %s</h2>\n' % displaypath)
f.write("\n<ul>\n")
Explications :
l. 116 : J’ai traduit le "Directory Listing" en français. Prenez bien soin de mettre les lettres accentuées à l’aide de leur code HTML (é = é … )
l.117 : J’ai inséré cette ligne qui contient les informations sur la feuille de style que je compte utiliser. Ici je mentionne bien qu’elle se situe dans /src/styles.css, nous la créerons plus tard. J’en profite pour fermer la balise head.
l. 118 : J’ai encore traduit le titre, mais j’y ai rajouté un lien "Retour au menu" pointant sur l’URL piratebox.lan définie par défaut. En effet, j’ai toujours trouvé que la solution du fichier HTML de redirection faisait très bricolage. Ce lien est donc affiché à côté du titre de la page.
l. 119 : j’ai enlevé le hr (ligne horizontale) qui ne servira plus à rien.
Une fois ceci fait, j’ai encore une modification à vous proposer : attribuer une icône différente à chaque lien de la liste en fonction de sa nature : fichier ou dossier. Ne maitrisant pas vraiment Python, j’ai limité les modifications de peur de tout casser.
Toujours dans le même fichier, ligne 120 :
for name in list:
fullname = os.path.join(path, name)
displayname = linkname = name
# Append / for directories or @ for symbolic links
if os.path.isdir(fullname):
displayname = name + "/"
linkname = name + "/"
if os.path.islink(fullname):
displayname = name + "@"
# Note: a link to a directory displays with @ and links with /
f.write('<li><a href="%s">%s</a>\n'
Alors là, ATTENTION ! J’ai appris que Python accorde beaucoup d’importance à l’indentation du code, qui lui permet de savoir où commence et où s’arrête un bloc conditionnel ou une boucle. Donc prudence lorsque vous coller le code, vérifiez bien que les indentations sont respectées.
for name in list:
if (name != "src"): #This is to avoid seeing the images and styles folder in the directory listing.
fullname = os.path.join(path, name)
displayname = linkname = name
# Append / for directories or @ for symbolic links
if os.path.isdir(fullname):
displayname = name + "/"
linkname = name + "/"
f.write('<li class="rep"><a href="%s">%s</a>\n'
% (urllib.quote(linkname), cgi.escape(displayname)))
elif os.path.islink(fullname):
displayname = name + "@"
# Note: a link to a directory displays with @ and links with /
else:
f.write('<li><a href="%s">%s</a>\n'
% (urllib.quote(linkname), cgi.escape(displayname)))
f.write('</ul>\n<hr />\n<span class="footer">Suivez @pbox_alsace sur Twitter pour connaître la position de la box !</span></body>\n</html>\n')
Explications :
l. 121 : J’initie ici un bloc if pour ne pas afficher le répertoire src dans la liste des répertoires, étant donné qu’il n’a pas pour vocation d’être partagé. Ce bloc if inclut tout le contenu de la boucle for, il faut donc indenter tout le reste du bloc en conséquence.
l. 128 : Ici ce bloc if permet de détecter les répertoires. J’ai décidé donc de leur attribuer une classe rep qui me permettra de les styler différemment des autres fichier. Il s’agit de liste non ordonnée (ul) très faciles à styler.
l. 130 : un bloc elif ne concernant que les liens symboliques qui en fait ne servira pas sur ma piratebox (d’ailleurs je me rends compte à l’écriture du tuto qu’il n’y a d’ailleurs plus l’instruction d’écriture f.write(...) ). On pourrait très bien imaginer une classe différente (à la manière de celle utilisée pour les répertoires) que l’on pourrait styler.
l. 133 : le dernier cas : le fichier n’est ni un lien, ni un dossier, donc un fichier "normal", je ne lui attribue aucune classe, ce qui n’empêchera pas de le styler.
l. 136 : j’ai ajouté un pied de page contenant une invitation à aller sur Twitter pour suivre la PirateBox Alsace.
On pourrait aller beaucoup plus loin avec du temps et de bonnes compétences graphiques. Ici j’ouvre simplement la voie aux possibilités qui s’offrent aux designers en tout genre sachant coder un minimum
Suite à des demandes, je vous joins ici un lien vers un pastebin contenant mon fichier SimpleHTTPServer.py tel qu’il est à l’heure actuelle : http://ld.lc/3
Une fois toutes ces modifications faites : appuyez sur la touche Echap pour sortir du mode d’édition, puis tappez :wq puis Entrée pour sauvegarder le fichier et quitter vi.
Maintenant, il est temps de s’occuper de notre feuille de style. Pour cela, restez dans votre terminal, toujours connecté en root à votre piratebox et entrez :
cd /mnt/usb/PirateBox/src/ vi styles.css
On accède au dossier src dont je parlais plus haut, dans lequel devrait se trouver les trois images nécessaires : un fond et deux types d’icônes (un pour les dossiers, un pour les fichiers). La dernière commande lance vi pour éditer styles.css notre feuille de style !
Premier élément que l’on peut styler : le body du document HTML (l’élément qui contient tout ce qui s’affiche dans la page).
Voici le mien :
body { background-color:#CCC;
background-image:url('/src/piratebox.png');
background-repeat : no-repeat;
background-position: center bottom;
background-attachment: fixed;
font-family: Helvetica,Arial,sans-serif;
font-size: 1em;
margin: 0px;
}
Rien de sorcier. Une image de fond choisie avec background-image, on la laisse fixe et située au bas de la page. J’ai défini une police sans serif et une marge intérieure à 0px.
Ensuite les liens :
a, a:visited {
color: #3358A2;
text-decoration : none;
}
Je défini des liens bleus sans soulignement.
Passons maintenant au styling de la liste ul utilisée pour afficher la liste des fichiers :
ul{
liste-style-type: none;
padding: 0 0 0 5;
margin: 0px;
}
li{
background-image: url('/src/li.png');
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 50px;
line-height: 2em;
}
li.rep {
background-image: url('/src/li2.png');
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 50px;
line-height: 2em;
}
On voit clairement que l’élément de liste qui se verra attribué de la classe rep utilisera une image différente en tant que puce de liste. Mes fichiers s’appellent li.png et li2.png mais libre à vous de les nommer comme vous le souhaitez. Restez juste cohérent en changeant également le nom dans les style ci-dessus.
J’ai ensuite stylé la balise H2, utilisée pour écrire le titre de la page :
h2 {
display: block;
background-color: #EEE;
padding: 0.3em;
}
Cela donne un effet de "bloc" d’en-tête auquel j’attribue une couleur différente et une marge interne pour espacer le contenu des bords.
Enfin, je n’oublie pas de styler le pied de page :
.footer {
font-size: 1.2 em;
color: #C00;
font-weight: bold;
padding-left: 0.3em;
}
Et voilà !
Maintenant tapez Echap et :wq pour sortir de vi et sauvegarder le fichier styles.css.
Il faut maintenant redémarrer la PirateBox :
cd / /etc/init.d/piratebox stop /etc/init.d/piratebox start
Parfois je me suis retrouvé confronté à un message du type "unable to unmount /mnt/ext/ : device is busy" et dans ce cas là, la seule solution que j’ai trouvé est de redémarrer la PirateBox en coupant l’alimentation et en la remettant.
Une fois redémarrée, lancez votre navigateur préféré pour aller sur la page d’accueil de votre PirateBox (http://piratebox.lan par défaut mais n’importe quelle adresse internet devrait vous y mener).
Vous devriez voir ceci :
Voici la liste des fichiers une fois les styles appliqués.
Ayant écrit ce tutoriel le lendemain d’une soirée passée à tâtonner, j’espère que je n’ai rien oublié. N’hésitez pas à me faire part d’éventuelles erreurs ou améliorations !
Prochaine étape : la page d’accueil !
Commentaires sur: "[TUTO] Personnalisez le Directory Listing de votre PirateBox !" (20)
[...] background-position: 50% 0px ; background-color:#222222; background-repeat : no-repeat; } pboxalsace.wordpress.com – Today, 5:37 [...]
Great job! Par contre, toujours pas de choix de dossier d’upload pour l’utilisateur?! Je suis une bille en Python, dommage que l’on ne puisse pas scripter en PHP!
Pour le dossier d’upload c’est TRÈS simple ! Il suffit d’éditer le fichier /opt/piratebox/conf/piratebox.conf avec VI à la ligne 91 et 92 !
J’ai remplacé par :
UPLOADFOLDER="$FOLDER/Upload"
# UPLOADFOLDER=$FOLDER
Penser à redémarrer la piratebox après la modification.
[...] background-position: 50% 0px ; background-color:#222222; background-repeat : no-repeat; } pboxalsace.wordpress.com – Today, 2:07 [...]
On pourrait aussi ajouter du javascript! Du genre ajouter un qui chercherait le nom d’un fichier par exemple… Ca nous laisserait faire plein de choses sympa
À fond ! Si tu as un fichier à proposer (ce serait vachement plus facile à proposer en fichier lié), je suis preneur !
Cela dit, le but de la piratebox étant de partager des trucs… que les gens ne connaissent probablement pas déjà, le champs de recherche pourrait être "inutile", mais qui peut le plus peut le moins, je suis pour !!
Une autre idée serait un drag and drop pour mettre les fichiers (ca permettrait aussi de mettre plusieurs fichiers à la fois, mais il faudrait déja trouver comment eux ils ont fait… Je sais que c’est possible: http://www.html5rocks.com/en/tutorials/file/dndfiles/)
On pourrait classer par type de fichier, ajouter des petites fonctions par-ci par-là…
Si quelqu’un a de meilleures idées, mettez-les, je compte regarder un peu ce qui est possible dans les prochains jours
Bonne idée également ! Bon par contre, pour modifier tout ça dans la PirateBox à l’heure actuelle, je ne sais pas si c’est la peine de se lancer dans les chantiers tout de suite. Il semble qu’une partie du staff (Matthias ?) soit en train de bosser sur l’intégration d’un remplaçant à SimpleHTTPServer.py pour des raisons de performances. Il faudra peut-être se lancer dans une normalisation HTML5 à ce moment là
Le Drag’n'drop fonctionne superbement bien dans l’app web de Dropbox !
Merci pour ce tutoriel bien pratique (car je ne connais pas plus python que toi !)
Il manquait, pour moi, l’indication de la taille des fichiers. J’ai donc complété le fichier SimpleHTTPServer.py pour cela (j’ai mis en place un tableau et j’ai donc supprimé les balises et ). Les modifications suivent les commentaires en MAJUSCULE :
f.write('\n<a href="http://piratebox.lan/" rel="nofollow">Retour au menu</a> - Liste du répertoire %s\n' % displaypath) # OUVERTURE DE LA BALISE f.write('\n') # EN CAS DE SOUS-REPERTOIRE IL FAUT POUVOIR REMONTER if displaypath != "/": f.write(' <a href=".." rel="nofollow">Vers le répertoire supérieur</a>\n') for name in list: fullname = os.path.join(path, name) displayname = linkname = name # Append / for directories or @ for symbolic links if os.path.isdir(fullname): displayname = name + "/" linkname = name + "/" # AFFICHAGE D'UN REPERTOIRE f.write(' <a href="%s" rel="nofollow">%s</a>\n' % (urllib.quote(linkname), cgi.escape(displayname))) elif os.path.islink(fullname): displayname = name + "@" # Note: a link to a directory displays with @ and links with / # AFFICHAGE D'UN LIEN (inexistant de manière normale) f.write(' <a href="%s" rel="nofollow">%s</a>\n' % (urllib.quote(linkname), cgi.escape(displayname))) else: # RECUPERATION DE LA TAILLE DU FICHIER filesize = os.path.getsize(fullname) # MISE EN FORME DE LA TAILLE SOUS UNE FORME LISIBLE for x in [' o',' Kio',' Mio',' Gio',' Tio']: if filesize < 1024.0: if x == ' o': tailleFichier = "%d %s" % (filesize, x) else: tailleFichier = "%3.1f %s" % (filesize, x) break filesize /= 1024.0 # AFFICHAGE D'UN FICHIER f.write('%s<a href="%s" rel="nofollow">%s</a>\n' % (tailleFichier, urllib.quote(linkname), cgi.escape(displayname))) # FERMETURE DE LA BALISE f.write("\n\n\n\n") length = f.tell()Désolé, l’écriture du commentaire supprime l’indentation, fondamentale sous Python !
Vous pouvez récupérer ma version de fichier à l’url : http://www.seies.net/documents/public/SimpleHTTPServer.py
J’ai rajouté le BB code pour l’affichage de code source. Pour info c’est [sourcecode language="python"][/sourcecode]
Merci pour cette amélioration ! Je vais l’adapter si tu veux bien. J’avoue que je ne suis pas super fan d’une présentation en tableau en utilisant des images.. je suis vraiment pour ne pouvoir modifier l’aspect que depuis la feuille de style ^^; Je vais donc l’adapter dès que possible.
Là en ce moment je vois que Matthias du forum officiel va bientôt lancer la version avec lighttpd comme serveur web. Je pense qu’il faudra sûrement refaire ce travail de customisation une fois cette mise à jour installée
En relisant le code, il manque une indentation à la ligne 40
Corrigé !
La structure de tableau n’est là que pour permettre de réaliser l’alignement vertical des images, puisque l’information de la taille est d’une longueur variable. Sans doute qu’on peut arriver au même résultat avec seulement du CSS, je suis allé au plus simple… À chacun d’adapter le travail des autres à ses propres besoins, c’est ça la liberté !
Pour l’instant, ça ne fonctionne pas chez moi, même après 2 tentatives. Suis je le seul ?
Quel fichier source avez-vous utilisé ? Le fichier que je propose à l’url http://www.seies.net/documents/public/SimpleHTTPServer.py fonctionne avec le routeur TP-link MR3020. Il utilise une feuille de style proche de celle présentée dans ce tuto et 2 images (folder.png et file.png) pour représenter un répertoire et un fichier. Par rapport à PirateBox-Alsace, je n’ai pas utilisé de répertoire src pour mettre tous ces fichiers, il s sont dans la racine web du serveur (car j’utilise un répertoire "partage" pour stocker les fichiers chargés sur la pirateBox).
L’inconvénient avec le serveur web actuel c’est que si il y a une erreur, aucune indication n’est donnée pour la trouver… Fournissez ici votre propre code (avec les balises BB pour le python,
) et l’erreur pourra peut-être être détectée.
Salut Dash !
Comme Jean le suggère, tu peux, le cas échéant, reprendre son code au complet en suivant son lien. Le mien est également à disposition ici : http://ld.lc/3
L’erreur que tu as doit juste être un problème de connexion j’imagine ? As-tu bien redémarré la PirateBox électriquement (dernier recours en général) ? Le code n’est pourtant pas modifié en profondeur, donc les quelques ajouts que nous faisons ne devraient pas poser de problème, sauf si l’indentation du code (les espaces et tabulations avant les instructions) ne sont pas respectés scrupuleusement. En fait c’est pour ça que j’explique pas mal ce que je fais, pour que tout un chacun puisse comprendre ce qu’il fait et modifier en fonction de ses connaissances.
Tiens moi au courant !
il semble que le lien soit off ?
Merci à vous 2. En faisant une copie (commande cp -i) du .py proposé par PB Alsace, ça fonctionne. Ca devait être une erreur d’indentation.
Tout d’abord super tuto pour le directory listing.
Je suis totalement débutant dans ce domaine et cela fait quelques jours que je galère pour customiser la page d’accueil de ma Pbox et en particulier en ce qui concerne l’intégration de mon propre logo. La customisation de la page d’accueil passe t-elle également via l’édition du style css et l’intégration du logo perso dans un dossier src sur la clé usb?
Bref je suis impatient de découvrir le tuto sur la custo de la page d’accueil ^^