La démo c'est par ici.
Avant de commencer, faites une copie de sauvegarde de votre dossier LibraryBox de votre clef USB, sinon, travaillez en local avant de recopier vers la clef. >> lire mon article sur Wamp.
Et n'oubliez pas, l'informatique, c'est comme la cuisine, si on respecte la recette et les techniques, on finit par se régaler !
Bon je déteste cuisiner, mais j'aime bien la bidouille informatique.
Calibre permet de gérer un catalogue de livres tombé dans le domaine public.
Ici je vous propose la même chose avec des Vidéos en utilisant Ant Movie Catalog.
Ant Movie Catalog ne permet pas de créer tout une arborescence de fichiers HTML comme Calibre, mais il permet au moins de créer une page avec toutes les vidéos. De toute façon la clef USB nous limite très vite.
Ci-dessous les étapes à suivre pour créer un catalogue de vidéos tombées dans le domaine public pour la LibraryBox.
Mon idée, contrairement aux pages Calibre, c'était de garder le menu en haut et le pied de page de la LibraryBox.
Dommage que la LibraryBox n'apprécie php...
Voici mon exemple :
Je crée le catalogue depuis Ant Movie Catalog
J'utilise Bootply pour que ma page soit adaptative à toutes tailles d'écran (Responsive Web)
Avertissement ! la liste des films s'afficheront dans une seule page, les uns derrière les autres, c'est à améliorer évidemment.
ETAPE 1 : installation de Ant Movie Catalog
On télécharge AntMovieCatalog et on l'installe :
Ant Movie Catalog : http://www.antp.be/software/moviecatalog/fr
Version 4.2.0.2 -Programme complet avec installation (recommandé)
J'évite la version portable.
ETAPE 2 : Prise en main de Ant Movie Catalog
Je ne vais pas faire un cours la-dessus, il y a un très bon blog pour cela, merci à l'auteur : http://lapensinemutine.eklablog.com/ok-computer-c23405117/1
ETAPE 3 : Exporter le catalogue video
Ant movie Catalog est fourni avec des modèles HTML pour REMPLIR votre catalogue.
Il y a aussi des modèles d'exportation, ce sont eux qui nous intéressent, plus particulièrement celui que je mettrai à votre disposition plus loin.
Donc si tout va bien vous avez appris à remplir des champs, ajouter des jacquettes, et donc créer votre premier catalogue.
Passons à l'étape suivante : exporter un fichier html pour la LibraryBox.
Utiliser le bouton Exporter (CTRL+E) pour utiliser le bouton vert d'importation de la barre des menus :
Puis sélectionnez HTML dans la fenêtre qui vient de s'ouvrir. Vous obetnez le fichier par défaut. C'est lui que j'ai modifié à l'aide de Bootply pour obtenir une page adaptative à toutes tailles d'écran (responsive web) : smartphone, tablette, pc bureau.
Je détaillerai dans l'étape 4, ce dont a besoin mon modèle.
Puis nous exporterons notre catalogue que j'ai nommé catalog_video.html dans la clef usb de la LibraryBox dans LibraryBox\Content\Shared\video
ETAPE 4 : Mon modèle mod_cat_video.html
Suivez scrupulesement mes instructions et tout devrait bien se passer. Respectez la casse des mots...
J'ai d'abord listé les informations que je souhaitai afficher, puis j'ai paramétré mon formulaire Ant Movie Catalog avec de nouveaux champs personalisés
Pour ajouter des champs personalisés dans le logiciel AMC (voir le blog de La pensine mutine : http://lapensinemutine.eklablog.com/ok-computer-c23405117/1)
Si vous souhaitez obtenir mon catalogue, je vous invite à créer les mêmes champs personnalisés, puis à l'étape 5, récupérer mes fichiers.
Respectez bien les noms des étiquetttes, car ce sont eux qu'iront chercher les fichiers de paramétrages.
Mes champs ajoutés sont :
Couleur : Ant Movie Catalog ne me proposait pas quelque chose de satisfaisant, d'autant plus que Ant Movie Catalog est fait pour des colections de DVD.
Je souhaitais un champ libre pour y mettre par exemple Noir & blanc...
Acteur 1, Acteur2; Acteur3 : nom qui s'affiche sous la photo des acteurs. J'ai choisi de mettre les 3 premiers acteurs avec leur photo. J'ai ainsi créé 3 champs Acteur.
+ Acteur2 +Acteur3
Image Acteur : chemin des photos des acteurs
Idem je créée 3 champs.
+ ImgActeur2 + ImgActeur3
Par choix, mes photos d'acteurs et jacquettes sont placées dans le dossier de la clef USB LibraryBox\Content\Shared\video.
Tout comme les fichiers .mp4 d'ailleurs.
Une durée, car le champ proposé par Ant ne me plaît pas, Ant ne proposant qu'un nombre de minutes.
Un producteur
La Société de production
Quand vous aurez fini de tout paramétrer, rien ne vous empêchera d'ajouter vos propres champs personalisés et de les intégrer dans votre modèle HTML,depuis le menu "Insérer une balise spéciale/Champs personalisés" de Ant Movie Catalog.
ETAPE 6 : création de votre propre modèle
J'ai pas mal potassé Bootstrap et utilisé Bootply pour créer mon modèle, mais, par de simples copier-collers de l'en-tête et pied de page de Librarybox\content\index.html que j'ai collé dans mon modele.
Puis sur Bootply j'ai créé mon contenu, j'ai encore copier coller des bouts de code, pour appeler les scripts notamment.
Ensuite avec Ant Movie Catalog, j'ai ajouté mes champs, j'avais déjà une bonne idée (sur papier) de ce à quoi devrait ressembler ma page !
J'ai documenté mon modèle de "commentaires" pour que vous puissiez comprendre ce que j'ai pris d'un fichier ou d'un autre.
Je ne peux pas faire de démo, ça fera l'objet d'un autre article.
ETAPE 7 : Simplifiez-vous la vie en utilisant mon modèle
Prés-requis : maîtrise de Ant Movie Catalog(facile), d'un outil de décompression de fichier,
et connaître les principes de l'explorateur de fichier, du copier-coller.
Je vous propose d'installer les fichiers ci-dessous directement, à vous ensuite d'y ajouter votre touche personnelle (couleur par exemple, champs personnalisés...) :
Les vidéos que j'ai utlisée dans mon exemple sont à copier sur votre clef USB dans LibraryBox\Content\Shared\video, vous pouvez les récupérer sur https://archive.org :
- lien pour "Making a living" CC_1914_02_02_MakingALiving_512kb.mp4
- autre film Charlie Chaplin Festival
J'ai utilisé quelques images *.ico *.jpg à copier dans LibraryBox\Content\img
Enregistrez le fichier d'images zippé et décompressez-le sur votre clef USB dans LibraryBox\Content\img
Le second zip contient les jacquettes et photos d'acteurs à décompresser dans LibraryBox\Content\Shared\video de votre clef USB
Bootply fait appel à un tas de scripts qu'il met directement dans la page HTML, mais cela ralentit la page. Du coup j'ai tout exporté dans des fichiers js.
mon 3ème fichiers de scripts et à décompresserer dans LibraryBox\Content\js
Mon catalogue : mon_catalog_video.xml est à placer où vous le souhaitez sur votre PC, puis dans Ant movie Catalog, faites fichier/ouvrir et allez chercher ce fichier. (attention il est compressé).
mon_catalog_video.zip (modèle avec le bouton "visionner le film")
mon_catalog_video.zip (modèle avec le film qui apparaît directement à l'écran avec play-pause...
Mon modèle d'exportation mod_catalog_video.html :
A décompresser où vous voulez, mais il faudra indiquer son chemin dans les préférences/fichier de Ant.
mod_cat_video.zip (n'hésitez pas à double cliquez dessus une fois install", vous comprendrai à quoi ça ressemble)
Voilà c'est presque fini !
Ouvrez Ant Movie Catalog, ouvrez le fichier mon_catalogue_video.xml. Il se peut que Ant Movie catalog ne trouve pas les jaquettes, il suffit de lui indiquer le chemin en allant chercher les jaquettes dans la clef usb.
Cliquer sur le bouton Exporter (CTRL+E), puis cliquez sur le bouton Html dans la fenêtre qui vient de s'ouvrir. Si votre fichier "modèle" (mod_cat_video.html) n'apparaît pas, il faut utiliser le bouton "parcourir" pour aller le chercher (simplifiez-vous la vie en enregistrant son chemin dans les préférences/fichiers de Ant.
Cliquez enfin sur Exporter en bas à droite et indiquer lui le chemin LibraryBox\Content\ et le nom du fichier catalog_video.htm, SURTOUT PAS INDEX.HTML, sinon, vous allez écraser la page d'accueil de la LibraryBox
Modifiez votre chemin Video dans le fichier LibraryBox\Content\index.html pour qu'il pointe vers catalog_video.html.
Enfin, ouvrez votre page http://LibraryBox.lan
Alors alors ??? ça a marché ???
Si oui tant mieux, sinon, je peux essayer de vous aider ! @apallois
(j'attends vos remarques sur ma doc, il y a sûrement des choses qui ne marcheront pas, c'est de l'informatique, ne l'oublions pas)