Commit

rapport/rapport.tex

@@ -45,6 +45,13 @@
 \newcommand{\hsc}[1]{{\Large\MakeUppercase{#1}}}
 \newcommand{\hscs}[1]{{\footnotesize\MakeUppercase{#1}}}
 
+\newcommand{\namedparagraph}[1]{\paragraph{#1}\mbox{}\\}
+
+\newcommand{\tikzvline}[2]{
+    \draw (#1,-6) -- (#1,-5.5);
+    \draw (#1,-6) node[below]{#2};
+}
+
 \begin{document}
 
 \begin{titlepage}
@@ -87,6 +94,7 @@
 \end{titlepage}
 
 \normalsize
+\newpage
 \tableofcontents
 \newpage
 
@@ -147,8 +155,45 @@ est libre et qui a largement fait ses preuves). OpenShift propose d'héberger
 lui-même la base de données, mais la version gratuite ne proposant qu'1 Go
 d'espace de stockage, nous avons préféré l'héberger nous-même.
 
-\newpage
+
-\section{Une première interface}
+\subsection{Développement, debug et déploiement}
+\paragraph{}
+Pour éviter d'avoir des fichiers trop longs, nous avons choisi de séparer les
+sources dans de nombreux fichiers de taille plus petite, et de les fusionner
+automatiquement. Pour le développement, ils seront simplement concaténés grâce
+à un script développé spécialement pour cela, qui mime les paramètres de
+Closure Compiler qui sera utilisé pour la fusion au moment du le déploiement
+(ce dernier permet non seulement la fusion des fichiers mais aussi la
+minification\footnote{la minification sert notamment à réduire la taille du
+script : n'oublions pas que nous parlons de serveur web, et il est donc
+intéressant de réduire la taille des programmes de sorte à les charger plus
+rapidement} (effacement des commentaires et des retours à la ligne,
+simplifications des noms de variables et plus \footnote{en JavaScript, il est
+plus rapide d'écrire \texttt{!0} pour \texttt{true} par exemple.}). Pour le
+développement, on a utilisé \href{https://github.com/remy/nodemon}{nodemon} et
+inotify, qui permettent de relancer le serveur local lorsqu'une modification
+est détectée (la fusion des fichiers est donc réeffectuée).
+
+\paragraph{}
+En ce qui concerne le versionnage des fichiers, nous avons utilisé Git avec
+deux \emph{repositories} :
+\begin{itemize}
+    \item le premier, hébergé sur
+        \href{https://github.com/tforgione/3dinterface}{Github}, sert au
+        développement, et contient les fichiers fractionnés ainsi que les
+        outils permettant la génération des fichiers fusionnés.
+    \item le deuxième, hebergé chez OpenShift, qui contient la version finale
+        du programme, permet de déployer le code du serveur quand les
+        \emph{commits} sont \emph{pushés}.
+\end{itemize}
+
+\paragraph{}
+Pour nous aider au debug, nous avons utilisé \href{http://jshint.com/}{JSHint}
+qui nous aide à détecter les erreurs potentielles liées aux subtilités du
+langage.
+
+\section{L'interface}
+\subsection{Interactions élémentaires}
 \paragraph{}
 La première interface a été pensée pour être la plus simple possible.
 L'utilisateur contrôle une caméra qui se déplace librement dans un modèle 3D.
@@ -169,14 +214,14 @@ On peut pivoter la caméra de plusieurs manières :
         de tir
 \end{itemize}
 
-\newpage
+
-\section{Les recommandations}
+\subsection{Les recommandations}
 \paragraph{}
 Les recommandations sont là pour suggérer des points de vue à l'utilisateur.
 Elles permettent d'aider la navigation. Elles sont affichées sous forme
 d'objets 3D ajoutés à la scène. Deux affichages ont été testés.
 
-\subsection{Les \emph{viewports}}
+\subsubsection{Les \emph{viewports}}
 \paragraph{}
 Les \emph{viewports} sont les affichages les plus simples : ils représentent
 une caméra, avec son centre optique et son plan image.
@@ -191,8 +236,8 @@ beaucoup masquer le reste des modèles et suggère assez bien l'idée d'un
 cause de la perspective (dans cette image, il peut être difficile de savoir si
 le point de vue et vers le modèle ou vers nous).
 
-\newpage
+
-\subsection{Les flèches}
+\subsubsection{Les flèches}
 \paragraph{}
 Les flèches sont supposées être plus intuitives pour un utilisateur qui n'a pas
 l'habitude des \emph{viewports} précédemment utilisés. Plutôt que de suggérer
@@ -203,27 +248,24 @@ un point de vue, elles suggèrent le mouvemement qui va mener à ce point de vue
     \caption{Des recommandations flèches}
 \end{figure}
 
-\paragraph{}
+\subsubsection{Les interactions}
-
+\namedparagraph{Au survol}
-\subsection{Les interactions}
+\indent Cette fonctionnalité est inspirée des récents lecteurs video sur le
-\subsubsection{Au survol}
+web.  Lorsque l'on regarde une video, on a la barre de \emph{seeking} en bas et
-\paragraph{}
-Cette fonctionnalité est inspirée des récents lecteurs video sur le web.
-Lorsque l'on regarde une video, on a la barre de \emph{seeking} en bas et
 passer le curseur sur cette barre affiche l'image de la vidéo à l'instant visé.
 Nous avons simplement adapté cette techniques à nos recommandations : lorsque
 le curseur survole une recommandation, une prévisualisation est affichée dans
 une petite boite au voisinage du curseur.
-\begin{figure}[H]
+
-    \centering
+\begin{figure}[H] \centering
     \includegraphics[scale=0.275]{img/new/03.png}
     \caption{Une prévisualisation}
 \end{figure}
 
-\subsubsection{Au click}
+\namedparagraph{Au clic}
-Lors d'un click sur une recommandation, la caméra suit un mouvement fluide
+\indent Lors d'un clic sur une recommandation, la caméra suit un mouvement
-jusqu'au point de vue recommandé. La trajectoire est définié par un polynôme
+fluide jusqu'au point de vue recommandé. La trajectoire est définié par un
-interpolant tel que :
+polynôme interpolant tel que :
 \begin{itemize}
     \item la position initiale est la position de la caméra
     \item la position finale est la position de la recommandation
@@ -237,11 +279,61 @@ Ce mouvement fluide est là pour ne pas perturber l'utilisateur qui pourrait
 
 \paragraph{}
 De plus, les recommandations se comportent comme des liens hypertextes : elles
-sont bleues si elles n'ont jamais été clickées, et deviennent violettes si
+sont bleues si elles n'ont jamais été clicées, et deviennent violettes si
 l'utilisateur les a déjà consommées. Ceci est fait pour qu'un utilisateur
 puisse savoir par où il est passé, et ce qui lui reste encore à visiter.
 
-\newpage
+\subsection{Autres éléments de navigation}
+\paragraph{}
+Pour faciliter la navigation, quelques autres éléments de navigation sont
+présents.
+
+\begin{figure}[H]
+    \centering
+    \begin{tikzpicture}[]
+        \node (myfirstpic) at (0,0) {\includegraphics[scale=0.35]{img/new/buttons.png}};
+        \tikzvline{-7}{1}
+        \tikzvline{-5.8}{2}
+        \tikzvline{-5.2}{3}
+        \tikzvline{-4}{4}
+        \tikzvline{-1.5}{5}
+
+        \draw (8,5) -- (7,5);
+        \draw (8,5) node[right]{6};
+
+        \draw (-8,5) -- (-7,5);
+        \draw (-8,5) node[left]{7};
+    \end{tikzpicture}
+    \caption{Les différents éléments de l'interface}
+\end{figure}
+
+
+\paragraph{}
+\begin{enumerate}
+
+    \item \emph{Reset camera} : pour chaque scène, une position initiale est
+        définie. Cliquer sur ce bouton ramène la caméra à sa position initiale.
+
+    \item \emph{Previous} : à chaque clic sur une recommandation, les positions
+        intiales et finales sont sauvegardées. Cliquer sur ce bouton ramène à
+        la position précédente.
+
+    \item \emph{Next} : cliquer sur ce bouton ramène à la position suivante.
+
+    \item \emph{Pointer lock} : permet de passer du mode \emph{pointer-lock} au
+        mode \emph{drag-n-drop} et vice-versa.
+
+    \item \emph{Music} : un lecteur qui contrôle une petite musique qui permet
+        de se mettre dans l'ambiance de la scène.
+
+    \item \emph{Coin gauge} : une jauge qui représente l'avancement de la
+        récupération des pièces.
+
+    \item \emph{FPS counter} : indique la période de rafraîchissement du rendu.
+
+\end{enumerate}
+
+
 \section{L'étude utilisateur}
 \paragraph{}
 Pour tester le comportement des utilisateurs face aux recommandations, nous
@@ -261,10 +353,10 @@ pièces rouges a été fait.
 
 \paragraph{}
 
-\newpage
+
 \section{Streaming de modèle 3D}
 
-\newpage
+
 \section*{Conclusion}
 
 \label{end}\end{document}