diff --git a/rapport/userstudy.tex b/rapport/userstudy.tex index c7765f1..03faca8 100644 --- a/rapport/userstudy.tex +++ b/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. - -\subsection{Analyse des résultats} -% TODO analyser les résultats +crowd-sourcing (MicroWokers) où nous paierons les utilisateurs afin d'avoir +plus de résultats à analyser. diff --git a/slides/main.tex b/slides/main.tex index b3b4154..46e5a23 100644 --- a/slides/main.tex +++ b/slides/main.tex @@ -1,12 +1,14 @@ % 16:9 version % \documentclass[aspectratio=169]{beamer} -% \newcommand{\bigscale}{0.16} -% \newcommand{\smallscale}{0.16} +\newcommand{\bigscale}{0.16} +\newcommand{\smallscale}{0.16} % 4:3 version \documentclass{beamer} -\newcommand{\bigscale}{0.175} -\newcommand{\smallscale}{0.125} +% \newcommand{\bigscale}{0.175} +% \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{Interface en 3D et mécanisme de recommandation} +\title[Navigation 3D et recommandations]{Systèmes de navigation 3D et mécanismes 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,9 +64,11 @@ \AtBeginSection[] % Do nothing for \section* { - \begin{frame} - \tableofcontents[currentsection] - \end{frame} + \ifthenelse{\boolean{sectiontoc}}{ + \begin{frame} + \tableofcontents[currentsection] + \end{frame} + } } \begin{document} @@ -68,51 +76,79 @@ \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} + \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{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} - -\subsection{Côté client} -\begin{frame} - \begin{itemize} - \item HTML5 - \item CSS3 - \item JavaScript - \item Boostrap - \item WebGL - \item Three.js - \end{itemize} + \begin{figure} + \includegraphics[scale=0.1]{icons/html5.png}~ + \includegraphics[scale=0.125]{icons/css3.png}~~~ + \includegraphics[scale=0.05]{icons/javascript.png}~ + \includegraphics[scale=0.25]{icons/bootstrap.png}\\[0.7cm] + \includegraphics[scale=0.25]{icons/webgl.png}~ + \includegraphics[scale=0.3]{icons/threejs.png}\\[0.5cm] + \includegraphics[scale=0.25]{icons/nodejs.png}\quad\quad\quad\quad\quad + \includegraphics[scale=0.25]{icons/socketio.png}~ + \end{figure} + \note[item]{Contrainte web pour les tests} \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} - - ~\\[0.5cm] - 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} + \begin{columns} + \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[->] (0,-3) -- (5, -4); + \draw[dashed, ->] (-0.1,-3) -- (-0.1,-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}