Keynote & les visites virtuelles

eric_5dmk2 · Message par **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.

éric

ignacio · Message par **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.

é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

++

eric_5dmk2 · Message par **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...

vincen · Message par **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

Phil · Message par **Phil** » 20 janv. 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

scenicview · Message par **scenicview** » 20 janv. 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 ?

Phil · Message par **Phil** » 20 janv. 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…

) 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…

scenicview · Message par **scenicview** » 21 janv. 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:

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'.

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.

Phil · Message par **Phil** » 21 janv. 2012, 1:16 41

@scenicview

Chapeau bas !! C'est plutôt malin comme méthode

!
Merci beaucoup !

Malheureusement pour moi, je veux interfacer le widget avec une base de données et ça sera plus simple pour moi avec Dashcode…

vincen · Message par **vincen** » 22 janv. 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

scenicview · Message par **scenicview** » 22 janv. 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 ?

vincen · Message par **vincen** » 22 janv. 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

scenicview · Message par **scenicview** » 22 janv. 2012, 12:27 23

Merci…

vincen · Message par **vincen** » 22 janv. 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:

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'.

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.

You can get the whole widget for help on this link: http://scenicview.ch/panophoto/ibookaut ... o.wdgt.zip

Pg29 · Message par **Pg29** » 23 janv. 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

scenicview · Message par **scenicview** » 24 janv. 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…

Pg29 · Message par **Pg29** » 24 janv. 2012, 15:40 43

J'ai pu en effet tester mon ibook avec un panorama et tout fonctionne parfaitement sur un ipad 2

pano · Message par **pano** » 24 janv. 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?

scenicview · Message par **scenicview** » 24 janv. 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/

Phil · Message par **Phil** » 24 janv. 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 !

Panophoto.org

Keynote & les visites virtuelles

Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles

Re: Keynote & les visites virtuelles