Keynote & les visites virtuelles

Pour citer les plus connus Pleinpot

Keynote & les visites virtuelles

Messagepar eric_5dmk2 » 20 Mai 2011, 13:32 08

Petit problème rencontré: comment intégrer une visite virtuelle dans une présentation Keynote?
Si je dépose un fichier Quicktime, ce dernier est considéré comme un film, au mieux.

Image

éric
eric_5dmk2
 
Messages: 287
Inscription: 3 Jan 2010, 0:16 31

Re: Keynote & les visites virtuelles

Messagepar ignacio » 20 Mai 2011, 13:39 46

eric_5dmk2 a écrit:Petit problème rencontré: comment intégrer une visite virtuelle dans une présentation Keynote?
Si je dépose un fichier Quicktime, ce dernier est considéré comme un film, au mieux.

Image

éric


On ne peut pas... c'est marrant que Apple (qui a invente le QTVR) n'a pas intégré ça dans Keynote... la seule solution est de avoir tes panos en CubicNavigator et passer d'un application a l'autre


++
-------

Ignacio Ferrando
Avatar de l’utilisateur
ignacio
 
Messages: 447
Inscription: 10 Juil 2008, 22:29 38

Re: Keynote & les visites virtuelles

Messagepar eric_5dmk2 » 20 Mai 2011, 14:49 42

ignacio a écrit:
On ne peut pas... c'est marrant que Apple (qui a invente le QTVR) n'a pas intégré ça dans Keynote... la seule solution est de avoir tes panos en CubicNavigator et passer d'un application a l'autre


++


merci pour ta réponse; pas cool tout ça...
eric_5dmk2
 
Messages: 287
Inscription: 3 Jan 2010, 0:16 31

Re: Keynote & les visites virtuelles

Messagepar vincen » 20 Mai 2011, 15:34 45

ignacio a écrit:On ne peut pas... c'est marrant que Apple (qui a invente le QTVR) n'a pas intégré ça dans Keynote... la seule solution est de avoir tes panos en CubicNavigator et passer d'un application a l'autre

Logique :( Le QTVR est un format obsolète et plus supporté par Apple depuis la sortie de Snow Leopard, cela fait quasi 2 ans maintenant !

Vince
Pas de messages privés pour des questions sur la photo ou le panoramique, le forum est fait pour ça !
Blog: http://www.skivr.com
Revendeur Matos photo panoramique: http://magasin.skivr.com
Nikon D800 + Nikkor 14/24 + 10.5 + GPS JJC
Pentax 645D + 55mm f/2.8 + GPS Pentax
Nodal Ninja 4 R-D16 + Ultimate M2
RawTherapee + Autopano Giga/Panotour Pro sur MacPro Quad-Xeon Ubuntu
Avatar de l’utilisateur
vincen
 
Messages: 4203
Inscription: 13 Déc 2007, 8:20 29
Localisation: Grenoble, France

Re: Keynote & les visites virtuelles

Messagepar Phil » 20 Jan 2012, 0:02 17

Je profite de ce sujet pour savoir si quelqu'un a déjà réussi à encapsuler un pano ou un VR objet en html5 dans un widget via Dashcode (sur mac…) ?
EDIT : "soluce" trouvée ::d
Avatar de l’utilisateur
Phil
 
Messages: 458
Inscription: 23 Avr 2008, 21:11 18
Localisation: Bouches-du-Rhône

Re: Keynote & les visites virtuelles

Messagepar scenicview » 20 Jan 2012, 20:52 49

Mmmmh, j'imagine que tu as plongé dans iBooks Author… Je me suis posé la même question hier soir après l'annonce d'Apple. Serais-tu d'accord de partager la soluce ?
Avatar de l’utilisateur
scenicview
 
Messages: 86
Inscription: 21 Nov 2010, 20:37 43
Localisation: Lutry – Suisse

Re: Keynote & les visites virtuelles

Messagepar Phil » 20 Jan 2012, 22:12 03

scenicview a écrit:Mmmmh, j'imagine que tu as plongé dans iBooks Author… Je me suis posé la même question hier soir après l'annonce d'Apple. Serais-tu d'accord de partager la soluce ?

Gagné ! ;)
Pas de problème pour le partage :) même si mon problème peut être assez différent du tien et assez spécifique, à savoir un soucis d'intégration de fichier xml pour une séquence VR objet générée par Object2vr. Je viens à peine de découvrir Dashcode ( alors que j'avais déjà installé xcode… :rouge: ) et la "soluce", c'est ce petit tuto qui m'a bien aidé pour un début.
Il ne me reste plus qu'à apprendre et faire des tests…
Avatar de l’utilisateur
Phil
 
Messages: 458
Inscription: 23 Avr 2008, 21:11 18
Localisation: Bouches-du-Rhône

Re: Keynote & les visites virtuelles

Messagepar scenicview » 21 Jan 2012, 0:26 49

@ phil
Merci beaucoup pour le tuto !!

J'ai creusé de mon côté une autre solution qui fonctionne bien, sans même passer par Dashboard. Voici la démarche pour ceux qui sont intéressés par la publication de panoramas dans les nouveaux livres électroniques dédiés à l'iPad, réalisés avec iBook Author.

---

Je repose rapidement le contexte…

Apple a annoncé hier, 19 janvier 2012, une application gratuite permettant à quiconque de créer et de publier des livres électroniques interactifs sur l'iPad ; si l'application se destine principalement au marché de l'éducation, rien n'interdit évidemment de créer d'autres types d'ouvrages.

L'application iBook Author est fournie avec un certain nombre de composants au travers desquels l'auteur peut ajouter des éléments d'interaction aux pages : galeries photo, vidéos, etc… Il existe aussi un composant générique qui permet d'accueillir des composants personnalisés codés en HTML, comme des panoramas interactifs.

Pour ces composants personnalisés, Apple demande que le code HTML soit encapsulé dans un «widget», un objet initialement conçu pour fabriquer des micro-applications pour Mac OS X (c'est assez schématique, mais l'esprit y est…). Structurellement, un widget n'est autre qu'un répertoire avec l'extension '.wdgt', dans lequel figurent toutes les ressources nécessaires au fonctionnement de la micro-application (javascript, html, images) et un fichier XML de description nommé 'Info.plist'.

En d'autres termes, pour fabriquer un widget 'iBook', il suffit de :

  • créer un nouveau répertoire ;
  • y placer un panorama au format HTML5 (index.html, javascript et faces du cube) ;
  • modifier le fichier Info.plist pour qu'il reflète les caractéristiques du panorama ;
  • ajouter un fichier Default.png qui correspond à la vue par défaut dans le widget ;
  • renommer le répertoire 'pano.wdgt' (ou selon votre bon plaisir, mais avec cette extension spécifique).

Une fois ces opérations effectuées, le widget peut être déposé dans un composant «widget HTML» placé dans une page du livre électronique (et à ma grande surprise, parce qu'en principe ce n'est jamais comme ça, tout a fonctionné du premier coup).




TUTORIEL PAS A PAS

Téléchargement du widget d'exemple

Le widget d'exemple peut être téléchargé avec le lien ci-dessous.
Vous pouvez librement l'utiliser pour vos essais et explorations. Pour des projets commerciaux, merci de respecter les efforts des développeurs et d'acheter impérativement une licence Pano2VR.
Télécharger le widget d'exemple




Etape 1.

Publier un panorama au format HTML 5, par exemple avec Pano2VR. Nettoyer le code HTML pour ne garder que l'essentiel (pas besoin des fall-back, des erreurs, et tout le toutim). Dans le DIV correspondant, indiquer comme d'habitude la largeur et la hauteur du pano (taille max sur l'iPad : 1024 x 768). Pour ma part, j'ai choisi une taille inférieure de 960 x 540 px.

Code: Tout sélectionner
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <style type="text/css" title="Default">
         body {
            margin:0;
            padding:0
            background : #ffffff;
         }
      </style>
   </head>
   <body>
      <script type="text/javascript" src="pano2vr_player.js">
      </script>
      <div id="container" style="width:960px;height:540px;"></div>
      <script type="text/javascript">
         // create the panorama player with the container
         pano=new pano2vrPlayer("container");
         pano.readConfigUrl("pano.xml");
      </script>
   </body>
</html>


A ce stade, vous devez avoir 10 éléments dans votre dossier :
  • élément 1 : index.html (ou équivalent)
  • élément 2 : pano2vr_player.js (ou équivalent)
  • élément 3 : pano.xml (le fichier XML pointé dans le HTML)
  • élément 4 : répertoires des faces du cube
  • éléments 5 - 10 : les faces du cube

Etape 2.

Créer avec BBEdit ou TextEdit un fichier texte vide, puis le sauver dans le répertoire avec le nom 'Info.plist' (attention à la majuscule initiale).

Coller dans le fichier texte le code suivant :

Code: Tout sélectionner
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<plist version="1.0">
<dict>

   <key>CFBundleIdentifier</key>
   <string>com.apple.widget.pano</string>
   
   <key>CFBundleName</key>
   <string>pano</string>
   
   <key>MainHTML</key>
   <string>index.html</string>
   
   <key>Height</key>
   <integer>540</integer>
   
   <key>Width</key>
   <integer>960</integer>
   
</dict>
</plist>



Modifiez les clés-valeurs selon les indications ci-dessous et sauvez le fichier.

  • CFBundleIdentifier : l'ID du widget, selon la norme de développement Apple, usuellement une forme d'URL inversée ( com.apple dans le code ci-dessus devrait être remplacé par votre nom de domaine personnel). Par exemple, si vous souhaitez que votre widget s'intitule pano et que votre nom de domaine est 360etplus.fr, vous écrirez fr.360etplus.widget.pano
  • CFBundleName : le nom de votre widget. Pour reprendre l'exemple de la ligne précédente, cette valeur serait pano
  • MainHTML : le nom du fichier HTML principal du panorama, généré par Pano2VR ou le programme de visualisation utilisé (dans mon cas, j'ai renommé index.html le fichier de sortie de Pano2VR). C'est la clé la plus importante, puisqu'elle indique au widget la page html qu'il doit afficher lors de son lancement. C'est la porte d'entrée vers votre panorama, en somme.
  • Width : la largeur de votre widget (en principe la même que le pano)
  • Height : même logique…

Etape 3.

Placez dans le dossier une image de prévisualisation du pano nommée 'Default.png' (équirectangulaire ou vue de détail).

Edit – 24.01.2012 :La taille de l'image de prévisualisation détermine le format maximum du widget dans le livre. Ainsi, pour obtenir un pano plein écran, il est indispensable de créer une image de prévisualisation de 1024 px x 768 px.

Etape 4.

Vérifiez que tous les éléments requis sont présents. Vous devez maintenant avoir une structure qui correspond à l'image ci-dessous, avec 12 éléments:

Image

Etape 5.

Renommez votre répertoire selon le nom donné à la clé CFBundleName (voir étape 2), suivi de l'extension .wdgt

Exemple : si votre clé est pano, le répertoire sera nommé pano.wdgt

Dès l'extension ajoutée, le dossier se transformera en widget (astuce : pour retrouver les éléments à l'intérieur du widget, faites un clic-droit et choisissez l'option 'Afficher le contenu du paquet'.

Image

Etape 6.

Dans le livre électronique, placez un composant 'HTML Widget' dans une page, puis glissez votre composant personnalisé à l'intérieur.

Etape 7.

Générez un aperçu de votre livre et savourez votre pano tout chaud tout beau sur votre iPad.

Image
Avatar de l’utilisateur
scenicview
 
Messages: 86
Inscription: 21 Nov 2010, 20:37 43
Localisation: Lutry – Suisse

Re: Keynote & les visites virtuelles

Messagepar Phil » 21 Jan 2012, 1:16 41

@scenicview

Chapeau bas !! C'est plutôt malin comme méthode :) !
Merci beaucoup ! :super: :super:

Malheureusement pour moi, je veux interfacer le widget avec une base de données et ça sera plus simple pour moi avec Dashcode… ;)
Avatar de l’utilisateur
Phil
 
Messages: 458
Inscription: 23 Avr 2008, 21:11 18
Localisation: Bouches-du-Rhône

Re: Keynote & les visites virtuelles

Messagepar vincen » 22 Jan 2012, 11:18 58

scenicview a écrit:J'ai creusé de mon côté une autre solution qui fonctionne bien, sans même passer par Dashboard. Voici la démarche pour ceux qui sont intéressés par la publication de panoramas dans les nouveaux livres électroniques dédiés à l'iPad, réalisés avec iBook Author.

Bon je sais on parle français ici mais je ne sais pas si vous avez remarqué le post a été repris sur facebook et génère beaucoup d'intérêt ! Je pensais le traduire en anglais ici dans ce même fil si son auteur est ok ?

Vince
Pas de messages privés pour des questions sur la photo ou le panoramique, le forum est fait pour ça !
Blog: http://www.skivr.com
Revendeur Matos photo panoramique: http://magasin.skivr.com
Nikon D800 + Nikkor 14/24 + 10.5 + GPS JJC
Pentax 645D + 55mm f/2.8 + GPS Pentax
Nodal Ninja 4 R-D16 + Ultimate M2
RawTherapee + Autopano Giga/Panotour Pro sur MacPro Quad-Xeon Ubuntu
Avatar de l’utilisateur
vincen
 
Messages: 4203
Inscription: 13 Déc 2007, 8:20 29
Localisation: Grenoble, France

Re: Keynote & les visites virtuelles

Messagepar scenicview » 22 Jan 2012, 12:07 47

Ah ben non, rien vu… Pas de problème Vince, tu peux traduire… Peut-être qu'il faut ouvrir un nouveau thread ?

Tu me files les liens sur FB ?
Avatar de l’utilisateur
scenicview
 
Messages: 86
Inscription: 21 Nov 2010, 20:37 43
Localisation: Lutry – Suisse

Re: Keynote & les visites virtuelles

Messagepar vincen » 22 Jan 2012, 12:25 59

scenicview a écrit:Ah ben non, rien vu… Pas de problème Vince, tu peux traduire… Peut-être qu'il faut ouvrir un nouveau thread ?
plus simple de rester dans le même thread je pense ;)

scenicview a écrit:Tu me files les liens sur FB ?
Joergen a posté le lien dans le forum Panoramique sur FB: https://www.facebook.com/groups/panoramicphotographers/

Vince
Pas de messages privés pour des questions sur la photo ou le panoramique, le forum est fait pour ça !
Blog: http://www.skivr.com
Revendeur Matos photo panoramique: http://magasin.skivr.com
Nikon D800 + Nikkor 14/24 + 10.5 + GPS JJC
Pentax 645D + 55mm f/2.8 + GPS Pentax
Nodal Ninja 4 R-D16 + Ultimate M2
RawTherapee + Autopano Giga/Panotour Pro sur MacPro Quad-Xeon Ubuntu
Avatar de l’utilisateur
vincen
 
Messages: 4203
Inscription: 13 Déc 2007, 8:20 29
Localisation: Grenoble, France

Re: Keynote & les visites virtuelles

Messagepar scenicview » 22 Jan 2012, 12:27 23

Merci…
Avatar de l’utilisateur
scenicview
 
Messages: 86
Inscription: 21 Nov 2010, 20:37 43
Localisation: Lutry – Suisse

Re: Keynote & les visites virtuelles

Messagepar vincen » 22 Jan 2012, 14:20 53

Je vous propose une traduction en anglais pour ceux qui ne maitrisent pas bien le français, avec l'accord de Scenicview :)

Just short reminder of context…

Apple released on January 19th 2012, free software granting everyone capability to create and publish electronic interactive books on iPad: unless software is mainly targeted for education market, it can be used for any type of books.

iBook Author software is delivered with additional components which allow author to add interactive elements in pages: photo galleries, videos, etc… One generic component exists to include personalised stuffs in HTML, such as interactive panoramas.

To use these personalised components, Apple requests that HTML code be encapsulated in «widget», object first designed to build micro-applications in Mac OS X (it's little shortcut but you get the idea…). Structure of a widget is basically directory named with extension '.wdgt', that includes all ressources needed to get the micro-application working (javascript, html, pictures) and one XML file named 'Info.plist'.

So, to build an 'iBook' widget, you need:

  • create a new directory ;
  • put in it panorama in HTML5 format (index.html, javascript and cube faces) ;
  • edit Info.plist file to include properties of panorama;
  • add Default.png file that is default display of widget;
  • rename directory as 'pano.wdgt' (or at your wish so long you keep same extension).

When you have completed all these steps, widget can be dropped in «HTML widget» component placed in page of electronic book (and as a big surprise, because usually it's never the case, it worked at first try).

STEP BY STEP

Step 1.

Publish one panorama in HTML 5 format, for example with Pano2VR. Clean HTML code to keep only the basics (no need of fall-back, errors and all these additional stuffs). In adequate DIV section, fill as usually width and height of pano (max size on iPad: 1024 x 768). I prefer to select smaller size at 960 x 540 px.

Code: Tout sélectionner
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <style type="text/css" title="Default">
         body {
            margin:0;
            padding:0
            background : #ffffff;
         }
      </style>
   </head>
   <body">
      <script type="text/javascript" src="pano2vr_player.js">
      </script>
      <div id="container" style="width:960px;height:540px;"></div>
      <script type="text/javascript">
         // create the panorama player with the container
         pano=new pano2vrPlayer("container");
         pano.readConfigUrl("pano.xml");
      </script>
   </body>
</html>


At that step, you should get 10 elements in your folder:
  • element 1 : index.html (or similar)
  • element 2 : pano2vr_player.js (or similar)
  • element 3 : pano.xml (XML file linked in HTML)
  • element 4 : directory with cube faces
  • elements 5 - 10 : cube faces

Step 2.

Create with BBEdit or TextEdit an empty text file, and save it in directory with name 'Info.plist' (be careful about case on letters).

Paste in text file this code:

Code: Tout sélectionner
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<plist version="1.0">
<dict>

   <key>CFBundleIdentifier</key>
   <string>com.apple.widget.pano</string>
   
   <key>CFBundleName</key>
   <string>pano</string>
   
   <key>MainHTML</key>
   <string>index.html</string>
   
   <key>Height</key>
   <integer>540</integer>
   
   <key>Width</key>
   <integer>960</integer>
   
</dict>
</plist>



Modify keys according to explanations below and save file.

  • CFBundleIdentifier : widget's ID, according to developer rules from Apple, usually similar to URL in reverse direction ( 'com.apple' in code should be replaced by your own domain name)
  • CFBundleName : widget's name
  • MainHTML : name of HTML file
  • Width : widget's width (should be same as pano)
  • Height : same logic...

Step 3.

Save in directory preview picture of your pano named 'Default.png' (equirectangular or zoom view of panol). For me, I selected size 960px x 540px, to get big preview, similar to panorama.

Step 4.

Check all required elements are there. You should now get structure similar to picture below, with 12 elements:

Image

Step 5.

Rename your directory according with name given at key CFBundleName (check step 2), with extension .wdgt.

Example : if key is 'pano', directory should be named 'pano.wdgt'

As soon as extension is added, directory will transform as widget (hint: to display content of widget, right-click on it and select 'Display content of package'.

Image

Step 6.

In electronic book, include one 'HTML Widget' in a page, then drop your widget in it.

Step 7.

Gerenate a preview of your book and enjoy your panorama displayed on your iPad.

Image

You can get the whole widget for help on this link: http://scenicview.ch/panophoto/ibookauthor/pano.wdgt.zip
Pas de messages privés pour des questions sur la photo ou le panoramique, le forum est fait pour ça !
Blog: http://www.skivr.com
Revendeur Matos photo panoramique: http://magasin.skivr.com
Nikon D800 + Nikkor 14/24 + 10.5 + GPS JJC
Pentax 645D + 55mm f/2.8 + GPS Pentax
Nodal Ninja 4 R-D16 + Ultimate M2
RawTherapee + Autopano Giga/Panotour Pro sur MacPro Quad-Xeon Ubuntu
Avatar de l’utilisateur
vincen
 
Messages: 4203
Inscription: 13 Déc 2007, 8:20 29
Localisation: Grenoble, France

Re: Keynote & les visites virtuelles

Messagepar Pg29 » 23 Jan 2012, 20:59 57

Bonjour d'un petit nouveau,
Excellente découverte et merci d'en faire profiter les autres.
Petit bémol pour moi, plantage lors du preview :
Pour Info je suis en IPad 1, ceux pour qui cela fonctionne sont ils en iPad 2 ?
Merci pour vos retours
Pg29
 
Messages: 3
Inscription: 23 Jan 2012, 19:26 10

Re: Keynote & les visites virtuelles

Messagepar scenicview » 24 Jan 2012, 8:35 54

Oui, il semblerait que les iPad 1 aient des problèmes avec certains textbooks – pas tous, principalement ceux gourmands en mémoire (panos, vidéos…). Ceci explique sûrement cela…
Avatar de l’utilisateur
scenicview
 
Messages: 86
Inscription: 21 Nov 2010, 20:37 43
Localisation: Lutry – Suisse

Re: Keynote & les visites virtuelles

Messagepar Pg29 » 24 Jan 2012, 15:40 43

J'ai pu en effet tester mon ibook avec un panorama et tout fonctionne parfaitement sur un ipad 2
Pg29
 
Messages: 3
Inscription: 23 Jan 2012, 19:26 10

Re: Keynote & les visites virtuelles

Messagepar pano » 24 Jan 2012, 16:39 04

Je découvre cet excellent tuto. Félicitations et merci

Faut il obligatoirement passer en Vers Mac os X 10.7 (Lion) et ibooks author puis appliquer ce tuto, afin de pouvoir jouer un pano 360 dans un fichier epub? Ou bien y a t'il une solution pour 10.6.8?
Avatar de l’utilisateur
pano
 
Messages: 2119
Inscription: 15 Déc 2008, 13:39 14
Localisation: Paris

Re: Keynote & les visites virtuelles

Messagepar scenicview » 24 Jan 2012, 17:33 29

A priori, iBook Author est «Lion Only». Mais des petits malins ont déjà trouvé comment le faire tourner en Snow Leopard.

Tuto en anglais :

http://www.digitaltweaker.com/mac/mac-t ... w-leopard/
Avatar de l’utilisateur
scenicview
 
Messages: 86
Inscription: 21 Nov 2010, 20:37 43
Localisation: Lutry – Suisse

Re: Keynote & les visites virtuelles

Messagepar Phil » 24 Jan 2012, 19:12 26

scenicview a écrit:A priori, iBook Author est «Lion Only». Mais des petits malins ont déjà trouvé comment le faire tourner en Snow Leopard.

Tuto en anglais :

http://www.digitaltweaker.com/mac/mac-t ... w-leopard/


et en version française pour faire plaisir aux non-anglophones ;)



pano a écrit:Je découvre cet excellent tuto. Félicitations et merci

Faut il obligatoirement passer en Vers Mac os X 10.7 (Lion) et ibooks author puis appliquer ce tuto, afin de pouvoir jouer un pano 360 dans un fichier epub? Ou bien y a t'il une solution pour 10.6.8?


Ibook author n'exporte pas véritablement au format epub… mais il est possible d'un peu bidouiller un fichier IBA ! ;)
Grosse bagarre de standard en perpective ! :)
Avatar de l’utilisateur
Phil
 
Messages: 458
Inscription: 23 Avr 2008, 21:11 18
Localisation: Bouches-du-Rhône

Suivante

Retourner vers Autres logiciels de publication et d'affichage

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron