Commit

rapport/userstudy.tex

@@ -193,7 +193,5 @@ comme pour le suivi des recommandations lors d'une expérience.
 \section{Déploiement}
 Pour l'instant, cette étude a été faite par des collègues (étudiants,
 chercheurs...), mais nous pensons ensuite le déployer vers une plateforme de
-crowd-sourcing (MicroWokers) afin d'avoir plus de résultats à analyser.
+crowd-sourcing (MicroWokers) où nous paierons les utilisateurs afin d'avoir
-
+plus de résultats à analyser.
-\subsection{Analyse des résultats}
-% TODO analyser les résultats

slides/main.tex

@@ -1,12 +1,14 @@
 % 16:9 version
 % \documentclass[aspectratio=169]{beamer}
-% \newcommand{\bigscale}{0.16}
+\newcommand{\bigscale}{0.16}
-% \newcommand{\smallscale}{0.16}
+\newcommand{\smallscale}{0.16}
 
 % 4:3 version
 \documentclass{beamer}
-\newcommand{\bigscale}{0.175}
+% \newcommand{\bigscale}{0.175}
-\newcommand{\smallscale}{0.125}
+% \newcommand{\smallscale}{0.125}
+
+\RequirePackage{ifthen}
 
 \usepackage[utf8]{inputenc}
 \usepackage[frenchb]{babel}
@@ -17,13 +19,18 @@
 \usepackage{vwcol}
 \usepackage{pgfpages}
 \usepackage{hyperref}
-% \usepackage{animate}
+\usepackage{animate2}
 \usepackage{tikz}
+\usepackage{multimedia}
+\usepackage{media9}
+\usepackage{appendixnumberbeamer}
+
+\newboolean{sectiontoc}
+\setboolean{sectiontoc}{true}
 
 \setbeameroption{show notes}
 \setbeameroption{show notes on second screen=right}
 
-%\setbeameroption{show notes on second screen=right}
 \usetheme{JuanLesPins}      % or try Darmstadt, Madrid, Warsaw, ...
 \setbeamertemplate{navigation symbols}{}
 
@@ -34,8 +41,7 @@
 
 \graphicspath{{../img/}}
 
-%\setbeamertemplate{headline}{}
+\title[Navigation 3D et recommandations]{Systèmes de navigation 3D et mécanismes de recommandation}
-\title{Interface en 3D et mécanisme de recommandation}
 \author{Thomas Forgione}
 \date{\today}
 \defbeamertemplate*{footline}{shadow theme}
@@ -46,7 +52,7 @@
             \
         \end{beamercolorbox}%
         \begin{beamercolorbox}[wd=.5\paperwidth,ht=2.5ex,dp=1.125ex,leftskip=.3cm,rightskip=.3cm plus1fil]{title in head/foot}%
-            \usebeamerfont{title in head/foot}\insertshorttitle\hfill\insertframenumber\,/\,\inserttotalframenumber%
+            \usebeamerfont{title in head/foot}IRIT --- VORTEX\hfill\insertframenumber\,/\,\inserttotalframenumber%
     \end{beamercolorbox}}%
     \vskip0pt%
 }
@@ -58,61 +64,91 @@
 
 \AtBeginSection[] % Do nothing for \section*
 {
+    \ifthenelse{\boolean{sectiontoc}}{
         \begin{frame}<beamer>
             \tableofcontents[currentsection]
         \end{frame}
     }
+}
 
 \begin{document}
 \begin{frame}
   \titlepage
 \end{frame}
 
-\section{Introduction}
 \begin{frame}
-    \frametitle{Contexte}
+    \centering
+    \includegraphics[scale=0.2]{icons/IRIT.jpg}\\[0.5cm]
+    \includegraphics[scale=0.2]{icons/vortex.png}\\[0.5cm]
+    \includegraphics[scale=0.3]{icons/nus.jpg}
+\end{frame}
+
+\begin{frame}
+    \begin{figure}
+        \includegraphics[scale=0.2]{new/bureau.jpg}
+        \caption{Le bureau}
+    \end{figure}
+\end{frame}
+
+
+\begin{frame}<beamer>
+    \tableofcontents
+\end{frame}
+
+\section{Introduction}
+\subsection{Contexte}
+\begin{frame}
+    \begin{figure}
+        \includegraphics[scale=0.25]{new/youtube.png}
+        \caption{Une vidéo sur Youtube}
+    \end{figure}
+\end{frame}
+
+\begin{frame}
     \begin{figure}
         \includegraphics[scale=0.5]{new/interface2.png}
-        \caption{Une interface avec recommandations}
+        \caption{Un lecteur vidéo avec recommandations}
     \end{figure}
     \note{Travaux de Vincent \textsc{Charvillat} et Axel \textsc{Carlier}}
     \note[item]{Interface avec recommandations}
     \note[item]{Biaiser l'interaction de l'utilisateur pour le rendre prévisible}
     \note[item]{Préchargement}
+    \note[item]{Mettre la première video navigation}
 \end{frame}
 
 \section{Technologies utilisées}
-\subsection{Côté serveur}
+% \begin{frame}
+%     NodeJs et certains \emph{packages}
+%     \begin{itemize}
+%         \item \texttt{express}
+%         \item \texttt{jade}
+%         \item \texttt{pg}
+%         \item \texttt{body-parser}
+%         \item \texttt{cookie-parser} et \texttt{cookie-session}
+%         \item \texttt{socket.io}
+%     \end{itemize}
+%
+%     \note[item]{express : framework web pour avoir un MVC}
+%     \note[item]{jade : moteur de template pour gérer les vues de manière sympathiques}
+%     \note[item]{pg : connection à la base de données}
+%     \note[item]{body-parser : gérer les paramètres envoyés dans les requêtes}
+%     \note[item]{cookie-parser et cookie-session : pour avoir une session gérée avec des cookies}
+%     \note[item]{socket.io : gérer les sockets (et WebSockets facilement)}
+%
+% \end{frame}
+
 \begin{frame}
-    NodeJs et certains \emph{packages}
+    \begin{figure}
-    \begin{itemize}
+        \includegraphics[scale=0.1]{icons/html5.png}~
-        \item \texttt{express}
+        \includegraphics[scale=0.125]{icons/css3.png}~~~
-        \item \texttt{jade}
+        \includegraphics[scale=0.05]{icons/javascript.png}~
-        \item \texttt{pg}
+        \includegraphics[scale=0.25]{icons/bootstrap.png}\\[0.7cm]
-        \item \texttt{body-parser}
+        \includegraphics[scale=0.25]{icons/webgl.png}~
-        \item \texttt{cookie-parser} et \texttt{cookie-session}
+        \includegraphics[scale=0.3]{icons/threejs.png}\\[0.5cm]
-        \item \texttt{socket.io}
+        \includegraphics[scale=0.25]{icons/nodejs.png}\quad\quad\quad\quad\quad
-    \end{itemize}
+        \includegraphics[scale=0.25]{icons/socketio.png}~
-
+    \end{figure}
-    \note[item]{express : framework web pour avoir un MVC}
+    \note[item]{Contrainte web pour les tests}
-    \note[item]{jade : moteur de template pour gérer les vues de manière sympathiques}
-    \note[item]{pg : connection à la base de données}
-    \note[item]{body-parser : gérer les paramètres envoyés dans les requêtes}
-    \note[item]{cookie-parser et cookie-session : pour avoir une session gérée avec des cookies}
-    \note[item]{socket.io : gérer les sockets (et WebSockets facilement)}
-
-\end{frame}
-
-\subsection{Côté client}
-\begin{frame}
-    \begin{itemize}
-        \item HTML5
-        \item CSS3
-        \item JavaScript
-        \item Boostrap
-        \item WebGL
-        \item Three.js
-    \end{itemize}
 \end{frame}
 
 \section{L'interface}
@@ -128,6 +164,10 @@
                 \item Clavier pour la translation
                 \item \emph{drag-n-drop} ou \emph{pointer-lock} pour la rotation
             \end{itemize}
+
+            \note[item]{Faire une démo}
+            \note[item]{Beaucoup de degré de liberté}
+            \note[item]{Difficile}
         \end{frame}
 
 
@@ -144,6 +184,7 @@
             \frametitle{\emph{Arrow}}
             \begin{figure}
                 \includegraphics[scale=0.2]{new/02.png}
+                % \animategraphics[autoplay,loop,scale=0.2, controls]{45}{../img/arrowclick/arrowclick}{1}{45}
                 \caption{Une recommandation \emph{arrow}}
             \end{figure}
         \end{frame}
@@ -224,6 +265,8 @@
         \item Pièces récupérées
         \item Boutons de l'interface (précédente, suivante, reset...)
     \end{itemize}
+
+    \note[item]{Exp différentes : scènes différentes, et styles de reco différents}
 \end{frame}
 
 \subsection{Tirage des expériences}
@@ -235,18 +278,34 @@
             \item Minimiser les paramètres variables pour faire des comparaisons
         \end{itemize}
     \end{block}
-
+    \begin{columns}
-    ~\\[0.5cm]
+        \begin{column}{0.5\textwidth}
             Parmi les paramètres, on a :
             \begin{itemize}
                 \item Niveau de l'utilisateur
                 \item Scène et combinaison de pièces
                 \item Type de recommandations
             \end{itemize}
+        \end{column}
+        \begin{column}{0.4\textwidth}
+            \begin{figure}
+                \includegraphics[scale=0.1]{new/allcoins.png}
+                \caption{Pièces possibles}
+            \end{figure}
+        \end{column}
+    \end{columns}
+    \note[item]{Etude utilisateur va bientot etre deployée sur micro workers}
 \end{frame}
 
+\setboolean{sectiontoc}{false}
 \section{Streaming}
 \subsection{Protocole}
+\setboolean{sectiontoc}{true}
+
+\begin{frame}
+    \tableofcontents[currentsection]
+    \note[item]{Montrer la démo sans bouger la caméra}
+\end{frame}
 
 \begin{frame}
     \begin{itemize}
@@ -276,11 +335,11 @@
             \draw[<-] (0,-3) -- (5, -2);
 
             \pause
-            \draw (2.5,-3.3) node[rotate=-12] {Caméra / \emph{frustum}};
+            \draw[dashed, ->] (-0.1,-3) -- (-0.1,-4);
-            \draw[->] (0,-3) -- (5, -4);
 
             \pause
-            \draw[dashed, ->] (-0.1,-3) -- (-0.1,-4);
+            \draw (2.5,-3.3) node[rotate=-12] {Caméra / \emph{frustum}};
+            \draw[->] (0,-3) -- (5, -4);
 
             \pause
             \draw (2.5,-4.3) node[rotate=12] {Des éléments};
@@ -307,5 +366,37 @@
     \scalebox{.8}{\parbox{1.25\linewidth}{\centering\input{../common/build/frustum}}}
     \caption{Le frustum de la camera et différents objets\label{frustum-draw}}
     \end{figure}
+    \note[item]{Faire la démo en stream progressif (bouge la cam)}
 \end{frame}
+
+\setboolean{sectiontoc}{false}
+\section*{Conclusion}
+\begin{frame}
+\end{frame}
+
+\appendix
+\begin{frame}
+    \frametitle{Courbure des flèches}
+    \begin{block}{Equation des flèches}
+        $
+        \begin{array}{lcccl}
+            P & : & [0,1] & \rightarrow & \mathbb{R}^3 \\
+              && t & \mapsto & (x,y,z)
+        \end{array}$ un polynôme de degré 3 tel que :
+        $$
+        \left\{\begin{array}{lcl}
+                P(0) & = & C -e_z + \lambda R'\\
+                P(1) & = & R \\
+                P'(1) & = & \lambda R'
+        \end{array}\right.\text{ avec } \lambda \in \mathbb{R}^{+}$$
+    \end{block}
+
+    \begin{itemize}
+        \item $C$ : centre de la caméra
+        \item $R$ : centre de la recommandation
+        \item $R'$ : direction de la recommandation
+    \end{itemize}
+\end{frame}
+
+
 \end{document}