Accueil du site > Outils de publication > FreepapeR > Le plugin SPIP FreepapeR v0.7.0

Le plugin SPIP FreepapeR v0.7.0

Visualiser les fichiers PDF dans les pages WEB

samedi 29 novembre 2008, par Franck Ruzzin

FreepapeR permet la visualisation en ligne de fichiers PDF. Il s’installe sur un serveur web et nécessite uniquement l’utilisation de php.




I - Pourquoi FreepapeR


Pagegangster, Motion Paper, scribd.com, myplick.com..... tous ces sites proposent la publication en ligne de vos documents PDF. Il faut pour cela au préalable uploader ses documents sur les serveurs du prestataire choisi, un peu à la manière des YouTube ou Flickr.

Cela ne pose pas de problème dans la majorité des cas. Cependant, on ne souhaite parfois pas que ses documents deviennent publics, qu’ils soient analysés par des robots ou encore que de la publicité y soit inséré.

FreepapeR aussi permet la visualisation en ligne de fichiers PDF, mais il s’installe sur son propre serveur et les documents que l’on affiche ne quittent jamais le domaine, ne sont jamais altérés, sont toujours disponibles...

Le principe est le suivant :

- Le document à visualiser est déjà situé sur le serveur
- Il est converti grâce à la boite à outil (GPL) swftools .Ainsi, on obtient un nouveau fichier, qui est la version SWF du fichier PDF original
- On utilise un programme SWF pour naviguer dans le fichier généré

Remarque : Cette méthode de présentation d’information ne permet pas, à la différence de l’écriture textuelle le référencement par les moteurs de recherche, le document étant « caché » au monde par le lecteur SWF. Il y a toujours moyen de trouver des artifices tels qu’insérer dans la page du contenu textuel caché, mais cela est néanmoins à déconseiller.

Bien entendu, il faut idéalement pouvoir exécuter des routines de la boite à outils swftools sur le serveur, ce qui est sans doute le point le plus délicat. Mais nous verrons par la suite des méthodes alternatives permettant de contourner ce point, notamment dans le cas des hébergements mutualisés sans accès SSH.

II- Implantation du plugin


Extraire le contenu de l’archive freepaper-spip.0.7.0.zip, dans le dossier plugins de votre installation SPIP.

L’activer via l’administration des plugins. (Consulter la documentation officielle pour plus de détails.)

Dans ce plugin, on utilise l’utilitaire javascript d’installation d’objet Flash swfobject 2.0, disponible à l’adresse suivante : http://code.google.com/p/swfobject/

En conséquence, il conviendra d’intégrer ce fichier dans la partie < head> des pages qui doivent utiliser le plugin :

<script type="text/javascript" src="#CHEMIN{javascript/swfobject.js}"></script>
par exemple, si la librairie swfobject est dans le répertoire « /javascript » de votre installation SPIP.

III- La balise #FREEPAPER


Lorsque le plugin est activé, on dispose de la balise #FREEPAPER qui liste tous les documents « pdf » joints à l’article et intègre pour chacun d’eux un lecteur FreepapeR dans la page, avec les valeurs par défaut.

Les paramètres suivant permettent de modifier le comportement par défaut :

#FREEPAPER{xmlData=nomFichierXml} nom du fichier xml de configuration (situé dans le sous-répertoire xml du plugin, nom par défaut : freepaper.xml
#FREEPAPER{largeur=nbPixels} largeur de la page FreepapeR. Défaut : 600
#FREEPAPER{hauteur=nbPixels} hauteur de la page FreepapeR. Défaut : 800
#FREEPAPER{trace="true" ou "false"} activation du mode verbeux. Défaut : false

Ainsi

#FREEPAPER{largeur=300}{hauteur=400}{trace=true}
implante un lecteur FreepapeR de largeur 300px, de hauteur 400px avec le mode trace activé (utile en phase de création des squelettes pour déceler les problèmes éventuels). Si le fichier xml/freepaper.xml existe, alors les paramètres qu’il définit sont utilisés pour modifier l’aspect/le comportement du lecteur.
#FREEPAPER{xmlData=freepaperSample.xml}{largeur=300}{hauteur=400}{trace=true}
implante le même lecteur que précédemment mais en utilisant les définitions du fichier de configuration xml/freepaperSample.xml


IV - Le modèle contentfreepaper


Lorsque le plugin est activé, il permet l’utilisation du modèle contentfreepaper dans le corps des articles.

La syntaxe complète est :

<contentfreepaperxxx            ou xxx est l'id du document PDF à visualiser
|xmlData=nomFichierXml    -> par défaut freepaper.xml
|hauteur=nbPixels               -> par défaut 600
|largeur=nbPixels               -> par défaut 800
|trace=true ou false              -> par défaut false
>

Remarque : Dans l’espace d’administration, les lecteurs FreepapeR implantés par modèle sont représentés par l’image « Get FLASH PLAYER ». Cela est normal. On visualise ainsi qu’il y a à cet endroit de l’article un objet implanté, mais voir son contenu n’a pas d’intérêt ici.

On obtient dans la page publique du site un lecteur FreepapeR avec le document à visualiser chargé :

 

Enfin presque !
Pour que tout se déroule comme précédemment décrit, il faut encore installer la boîte à outils SWFTOOLS qui va prendre en charge la conversion du fichier PDF en SWF. L’installation est décrite en V, des solutions alternatives sont décrites en VI.


V - Installer la boîte à outils swftools


Se rendre sur le site http://www.swftools.org/download.html et récupérer l’archive :

swftools-yyyy-mm-dd-vvvv.rar pour un système windows
swftools-yyyy-mm-dd-vvvv.tar.gz pour un système linux

1. Windows
Extraire les fichiers de l’archive, puis placer l’exécutable pdf2swf.exe sur le serveur, à la racine du dossier du plugin FreepapeR.

2. Linux
Extraire les fichiers de l’archive, et les placer sur le serveur dans un dossier temporaire.
Se connecter par SSH au serveur (cela suppose d’avoir un accès SSH), se rendre dans le dossier temporaire ou l’on a extrait les fichiers, puis lancer les commandes :

./configure (ayant auparavant réglé le bit d’exécution de ce fichier à 1)

Lorsque le traitement est terminé, lancer

make

On peut s’arrêter là, puis copier le binaire pdf2swf depuis le dossier ’src’ pour le placer à la racine du dossier du plugin FreepapeR. Bien penser à s’accorder les droits de lecture et d’exécution sur ce fichier.

3. Puis dans les deux cas
Ouvrir le fichier php/pdf2swf.php et vérifier le contenu de la variable pdftoolsPath pour qu’elle indique le chemin vers l’exécutable pdf2swf, par exemple :
$this->pdftoolsPath='../';        //linux
ou
$this->pdftoolsPath='..\\';        //windows

Dans le dossier qui contient un PDF à visualiser, le système doit pouvoir créer un fichier avec l’extension pdf.swf : il faut donc avoir les droits en lecture et en écriture dans ce dossier.


VI - Je ne peux pas installer swftools sur mon serveur


Sans accès SSH, point de salut, on ne peut fabriquer le binaire pdf2swf.

Il y a des pistes alternatives :

- J’ai trouvé un binaire pour ma distribution Linux
Dans ce cas, il suffit de placer ce binaire à la racine du dossier du plugin FreepapeR, puis de régler la variable $this->pdftoolsPath, comme décrit en 5-3.

- Je télécharge le binaire en local, je converti les PDF en local, puis je place les fichiers sur le serveur qui héberge mon site SPIP.
On procède comme décrit en 5-1 puis 5-2, mais en installant pdf2swf en local.

Il faut ensuite convertir en local les fichiers PDF à visualiser. La ligne de commande pour produire le fichier swf est la suivante :

pdf2swf -t -o documentAVisualiser.pdf.swf documentAVisualiser.pdf

si le fichier PDF à convertir s’appelle documentAVisualiser.pdf par exemple.

Pour terminer, il faut joindre le fichier pdf à l’article requis, mais aussi placer sur le serveur le fichier converti pdf.swf (et dans cet ordre !).

Pour cela, il y a 2 possibilités :

- Soit on upload par ftp dans le dossier IMG/pdf le fichier converti *.pdf.swf correspondant au fichier pdf joint à l’article (donc de même préfixe).
- Soit on joint le document pdf.swf à l’article grâce à l’outil "Ajouter un document" de SPIP.

En effet, Lorsque le plugin SPIP FreepapeR s’initialise et cherche à restituer un fichier PDF joint à l’article :
s’il existe un fichier « pdf.swf » situé dans le dossier IMG/pdf et qui est plus récent que le fichier « pdf », alors le comportement habituel est d’afficher ce document « pdf.swf ».
Cependant, si le binaire pdf2swf n’est pas installé sur le serveur, alors le document « pdf.swf » est aussi recherché dans le dossier IMG/swf.


VII- Erreur rencontrées lors de la conversion


EXEC RETURN VALUE : 0 -> tout s’est bien déroulé
EXEC RETURN VALUE : 1 -> le fichier pdf2swf n’a pas été trouvé
EXEC RETURN VALUE : 6 -> fichier PDF non lisible
EXEC RETURN VALUE : 11 -> erreur de segmentation (pdf2swf invalide)
EXEC RETURN VALUE : 126 -> pdf2swf a été trouvé mais n’est pas exécutable
EXEC RETURN VALUE : 127 -> le fichier pdf2swf n’a pas été trouvé


VIII- Fenêtre d’information

Lorsque l’on clique sur le logo « Freepaper » située en haut et à gauche de la barre de commande, on fait apparaître une fenêtre d’informations sur le document affiché :

Cette fenêtre disparaît dès que l’utilisateur clique sur l’image « Back to FreepapeR ».

IX- Surcharge par un fichier de configuration


Dans le répertoire du plugin FreepapeR, il existe un sous-répertoire « xml » dans lequel se situe un fichier nommé « freepaper.xml ». Ce fichier de configuration est lu et les valeurs qu’il défini viennent surcharger les valeurs par défaut de comportement. Il est aussi possible de spécifier un fichier de configuration ayant un nom différent. Il suffit pour cela de passer l’information (variable xmlData des balises ou paramètre xmlData du modèle) lors de l’implantation.

par exemple,
<contentfreepaper85|xmlData=freepaperSample.xml|largeur=740|hauteur=800> (pour le modèle)
[(#FREEPAPER{xmlData=freepaperSample.xml}{largeur=600}{hauteur=300})] (pour la balise)

indique au système d’aller chercher le fichier de configuration « freepaperSample.xml » dans le dossier « xml ».

Le fichier de configuration xml est constitué comme suit :

<?xml version="1.0" encoding="UTF-8"?>
<freepaper backgroundColor="0xd2f7c9" borderColor="0x5c954b" borderWidth="4" initialDisplay="H" >
        <commandBar leftImg="plugins/freepaper/images/commandBar/left.png" rightImg="plugins/freepaper/images/commandBar/right.png" currentImg="plugins/freepaper/images/commandBar/current.png" horizAxis="38" />
        <buttons>
                <fitToPage upImg="plugins/freepaper/images/buttons/fit_up_btn.png" downImg="plugins/freepaper/images/buttons/fit_down_btn.png" overImg="plugins/freepaper/images/buttons/fit_over_btn.png" />
                <nextPage upImg="plugins/freepaper/images/buttons/next_up_btn.png" downImg="plugins/freepaper/images/buttons/next_down_btn.png" overImg="plugins/freepaper/images/buttons/next_over_btn.png" />
                <prevPage upImg="plugins/freepaper/images/buttons/prev_up_btn.png" downImg="plugins/freepaper/images/buttons/prev_down_btn.png" overImg="plugins/freepaper/images/buttons/prev_over_btn.png" />
                <zoomPlus upImg="plugins/freepaper/images/buttons/zoomplus_up_btn.png" downImg="plugins/freepaper/images/buttons/zoomplus_down_btn.png" overImg="plugins/freepaper/images/buttons/zoomplus_over_btn.png" />
                <zoomMinus upImg="plugins/freepaper/images/buttons/zoomminus_up_btn.png" downImg="plugins/freepaper/images/buttons/zoomminus_down_btn.png" overImg="plugins/freepaper/images/buttons/zoomminus_over_btn.png" />
        </buttons>
</freepaper>

Pour ne pas modifier la valeur par défaut d’un des attributs, il suffit de l’omettre ou de régler sa valeur à "".
ASTUCE !

Pour surcharger les images qui définissent un bouton, il faut au moins définir l’attribut upImg. En effet, il est utilisé pour définir la zone de clic du bouton. De plus, seules ses zones opaques sont considérées comme actives. Toutes les images du bouton dont l’attribut n’est pas défini dans le fichier XML seront dessinées avec l’image définie pour l’attribut upImg. Si upImg n’est pas défini, alors les images du bouton par défaut seront utilisées. Pour « cacher » un bouton, il suffit de définir uniquement l’attribut upImg et de lui donner une valeur d’image inexistante, par exemple " " (caractère espace).


X- L’exemple contenu dans l’archive

Avec les éléments fournis dans le fichier freepaper.0.7.0.zip, on obtient l’interface suivante :


Au démarrage, le document est affiché pour occuper toute la hauteur, la couleur du fond est d2f7c9, la couleur du contour est 5c954b, l’épaisseur du contour est de 4 pixels.


XI- Les nouveautés de la version 0.7.0

- Ouverture du document selon un des 4 modes suivants :

- ajusté à la page, ajusté à la hauteur du lecteur, ajusté à la largeur du lecteur, valeur de zoom (%)

- Ajout d’une fenêtre d’informations sur le document
- Lors d’un changement de page, le haut de la page est re-positionné juste sous la barre de commande
- Personnalisation possible par fichier XML :
- de la couleur du fond du lecteur
- de la couleur du contour du lecteur
- de l’épaisseur du contour du lecteur
- des 3 images qui composent la barre de commande
- de la position de l’axe d’alignement vertical des éléments de la barre de commande
- des 5 boutons (3 images possibles pour chaque) de la barre de commande
- du mode d’ouverture document


XII- Les nouveautés de la version 0.6.0

- La fonction Zoom a été améliorée : le zoom est maintenant effectué par rapport au point situé au centre de la visionneuse
- Ajout de la fonctionnalité de visualisation « pleine page » (la visionneuse occupe tout l ’espace disponible dans le navigateur)


XIII- pdf2swf pour les serveurs 1&1


Ce binaire fonctionne pour les hébergements du fournisseur d’accès 1&1
GZ - 1.2 Mo
pdf2swf pour les serveurs 1&1

 

 

Creative Commons License Le plugin SPIP FreepapeR est mis à disposition selon les termes de la licence Creative Commons Paternité-Partage des Conditions Initiales à l’Identique 2.0 France.

10 Messages de forum

  • Le plugin SPIP FreepapeR v0.7.0 Le 9 décembre 2008 à 02:44 , par Franck

    Notes à propos de la version FreepapeR v 0.7.0 du 07 décembre 2008.



    Dans l’entête du fichier "javascript/freepaper_spip-min.js", il est possible de modifier les valeurs des variables suivantes :



    - m_freepaper_swfUrl="plugins/freepaper/swf/freepaper.0.7.0.swf" ; (URL du fichier swf "freepaper.x.x.x.swf")
    - m_freepaper_phpURL="plugins/freepaper/php/freepaper_spip.php" ; (URL du script PHP freepaper_spip.php)
    - m_freepaper_ExtractFromDOM=false ;(Boolean : Si vrai, alors le noeud FreepapeR est isolé du DOM pour être affiché en pleine page, puis les noeuds de la page sont restaurés dans leurs configurations initiales pour l’affichage en mode normal)
    - m_freepaper_OpenInNewWindow=false ; (Boolean : Si vrai, le lecteur Freepaper est ouvert dans une nouvelle fenêtre lors de la visualisation pleine page)


    On indique dans la documentation du lecteur FreepapeR le rôle des variables "m_freepaper_swfUrl" et "m_freepaper_phpURL", on ne reviendra donc pas dessus.



    Les 2 variables restantes ("m_freepaper_ExtractFromDOM" et "m_freepaper_OpenInNewWindow") ont une incidence sur le comportement du lecteur lorsque l’on choisi de visualiser un document en mode plein écran.




    METHODE 1 : "m_freepaper_ExtractFromDOM=false" et "m_freepaper_OpenInNewWindow=false"



    C’est le comportement par défaut, le plus élégant et le plus rapide : pour le passage en mode plein écran, les éléments constituant la page HTML sont retravaillés. Pour cela, on intervient sur les styles (marges, dimensions,...).

    Tout se passe coté client, il n’y a pas rechargement d’actif externes. Si de multiples lecteurs FreepapeR sont présents dans la page HTML, chacun d’eux conserve son zoom, sa page affichée,..., lorsque qu’un des document est affiché en plein écran puis minimisé.



    Cependant, dans certains cas (par exemple si le lecteur FreepapeR est imbriqué dans une cascade de

    ) et pour certains navigateurs (si ce n’est pour dire tous sauf Firefox), ce calcul résulte en un affichage "au bon emplacement, mais invisible". En effet, le lecteur FreepapeR est positionné au bon endroit (donc plein écran) mais les
    englobant laissent eux une fenêtre de vision située en dehors de l’écran. On a donc comme résultat un écran vide.




    METHODE 2 : "m_freepaper_ExtractFromDOM=true" et "m_freepaper_OpenInNewWindow=false"



    Avec cette méthode, le noeud DOM correspondant au lecteur à afficher en mode plein écran est cloné, la page entièrement vidée de son contenu, puis le noeud précédemment cloné est inséré seul dans la page et maximisé.

    Lorsque l’on revient en mode d’affichage normal, la page est reconstruite dans son état initial.

    On intervient ici sur le DOM en supprimant, clonant, insérant des noeuds.

    Cette manière de procéder permet de totalement s’affranchir des problèmes rencontrés par la méthode 1, mais a un inconvénient : à chaque fois qu’un noeud FreepapeR est inséré (au passage en mode plein écran mais aussi au retour en affichage normal), le document à afficher est rechargé et donc on perd tous les réglages qui avaient été choisis avant/après le changement de dimension (zoom, n° page, ...). En ce qui concerne la bande passante, il n’y a pas d’accroissement de trafic les documents étant rechargés depuis le cache. Si de multiples lecteurs sont présents dans la page, lors du retour en affichage normal tous les réglages de tous les lecteurs sont perdus car tous se rechargent.



    Rem : c’est le comportement par défaut attribué au navigateur Opera (pour qui le cas 1 n’existe donc jamais).




    METHODE 3 : "m_freepaper_ExtractFromDOM=" et "m_freepaper_OpenInNewWindow=true"



    Cette méthode est une alternative à la méthode 2. Le lecteur choisi pour le plein écran est affiché dans une nouvelle fenêtre. On peut ainsi visualiser simultanément plusieurs documents de la page. Il n’y a pas de manipulation de la page originale et en conséquence aucune information n’est perdue lors du retour en affichage normal sur les lecteurs présents dans la page.

    Le seul inconvénient de cette méthode est qu’elle ouvre le document dans une nouvelle fenêtre, ce que l’on peut ne pas souhaiter.



    Lors de l’utilisation de la méthode 3 avec un fichier de configuration XML (personnalisation de l’interface) il faut bien s’assurer d’indiquer dans le fichier XML des chemins absolus (et non relatifs) pour les images. Dans le cas contraire, les images ne seraient pas retrouvées lors de l’affichage plein écran.


    Les tests ont été effectués avec :

    Firefox 2, Firefox 3, IE6, IE7, Safari 3.1.1, Opéra 9.27, Google chrome 0.4.154.29 (sous windows)

    Firefox 2, Firefox 3 (sous ubuntu)

    Répondre à ce message

  • Le plugin SPIP FreepapeR v0.7.0 Le 7 janvier 2009 à 11:31 , par Erine

    Comment faire pour uploader ses documents, je n’y arrive pas ?
    Merci de votre aide.

    Répondre à ce message

    • Le plugin SPIP FreepapeR v0.7.0 Le 9 janvier 2009 à 02:41 , par Franck

      Bonjour,

      Pour uploader des documents, il faut utiliser un logiciel permettant une communication avec le serveur qui héberge le site (via le protocole FTP). Pour ma part, j’utilise Filezilla, logiciel open source.

      L’interface de Filezilla fait apparaitre une fenêtre dans la partie gauche qui permet de visualiser le disque de l’ordinateur local et une fenêtre dans la partie droite qui permet de visualiser l’espace disque sur le serveur.

      Une fois la connexion paramétrée, uploader des fichiers se fait par simple "glisser-déposer".

      Répondre à ce message

  • Le plugin SPIP FreepapeR v0.7.0 Le 17 mars 2009 à 16:50 , par Myrzhin21

    Petit soucis lors de l’installation du plugin
    Celui-ci fonctionne très bien sur firefox
    par contre sous ie6 et ie7
    pas de visualisation ni de l’image "getflashplayer" ni de visualisation du pdf

    as tu deja eu le cas ?

    Répondre à ce message

    • Le plugin SPIP FreepapeR v0.7.0 Le 19 mars 2009 à 09:38 , par Franck

      Bonjour,

      Non, je n’ai jamais eu le cas de non fonctionnement sous IE 7 ni IE 6.

      As tu plus d’information ?

      Franck

      Répondre à ce message

    • Le plugin SPIP FreepapeR v0.7.0 Le 19 mars 2009 à 09:59 , par Franck

      En fait je crois avoir décelé le problème. Il s’agit d’une mauvaise explication dans la documentation :
      pour utiliser le modèle contentfreepaper, il faut taper :

           <contentfreepaperxxx       ou xxx est l'id du document PDF à visualiser
           |xmlData=nomFichierXml    -> par défaut freepaper.xml
           |hauteur=nbPixels             -> par défaut 600
           |largeur=nbPixels             -> par défaut 800
           |trace=true ou false          -> par défaut false
           >

      et pas

           <contentfreepaperxxx       ou xxx est l'id du document PDF à visualiser
           |xmlData=(nomFichierXml)    -> par défaut freepaper.xml
           |hauteur=(nbPixels)             -> par défaut 600
           |largeur=(nbPixels)             -> par défaut 800
           |trace=(true ou false)          -> par défaut false
           >

      Il faut retirer les parenthèses autour des valeurs. Cela ne gène par FF mais devient incompréhensible pour IE.

      Mea Culpa,
      Franck

      Répondre à ce message

Répondre à cet article