211 lines
6.7 KiB
TeX
211 lines
6.7 KiB
TeX
% 16:9 version
|
|
% \documentclass[aspectratio=169]{beamer}
|
|
% \newcommand{\bigscale}{0.16}
|
|
% \newcommand{\smallscale}{0.16}
|
|
|
|
% 4:3 version
|
|
\documentclass{beamer}
|
|
\newcommand{\bigscale}{0.175}
|
|
\newcommand{\smallscale}{0.125}
|
|
|
|
\usepackage[utf8]{inputenc}
|
|
\usepackage[frenchb]{babel}
|
|
\usepackage{hyperref}
|
|
\usepackage[T1]{fontenc}
|
|
\usepackage{multicol}
|
|
\usepackage{lmodern}
|
|
\usepackage{vwcol}
|
|
\usepackage{pgfpages}
|
|
\usepackage{animate}
|
|
\usepackage{tikz}
|
|
|
|
\setbeameroption{show notes}
|
|
\setbeameroption{show notes on second screen=right}
|
|
|
|
%\setbeameroption{show notes on second screen=right}
|
|
\usetheme{Warsaw} % or try Darmstadt, Madrid, Warsaw, ...
|
|
\setbeamertemplate{navigation symbols}{}
|
|
|
|
\newcommand{\tikzvline}[2]{
|
|
\draw (#1,-6) -- (#1,-5.5);
|
|
\draw (#1,-6) node[below]{#2};
|
|
}
|
|
|
|
\graphicspath{{../img/}}
|
|
|
|
%\setbeamertemplate{headline}{}
|
|
\title{Interface en 3D et mécanisme de recommandation}
|
|
\author{Thomas Forgione}
|
|
\date{\today}
|
|
\defbeamertemplate*{footline}{shadow theme}
|
|
{%
|
|
\leavevmode%
|
|
\hbox{\begin{beamercolorbox}[wd=.5\paperwidth,ht=2.5ex,dp=1.125ex,leftskip=.3cm plus1fil,rightskip=.3cm]{author in head/foot}%
|
|
\usebeamerfont{author in head/foot}\hfill\insertshortauthor
|
|
\
|
|
\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%
|
|
\end{beamercolorbox}}%
|
|
\vskip0pt%
|
|
}
|
|
|
|
\usepackage{nameref}
|
|
\makeatletter
|
|
\newcommand*{\currentname}{\@currentlabelname}
|
|
\makeatother
|
|
|
|
\AtBeginSection[] % Do nothing for \section*
|
|
{
|
|
\begin{frame}<beamer>
|
|
\tableofcontents[currentsection]
|
|
\end{frame}
|
|
}
|
|
|
|
\begin{document}
|
|
\begin{frame}
|
|
\titlepage
|
|
\note{Hello}
|
|
\end{frame}
|
|
|
|
\section{Introduction}
|
|
\begin{frame}
|
|
\frametitle{Contexte}
|
|
\begin{figure}
|
|
\includegraphics[scale=0.5]{new/interface2.png}
|
|
\caption{Une interface 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}
|
|
\end{frame}
|
|
|
|
\section{Technologies utilisées}
|
|
\begin{frame}
|
|
\frametitle{Côté serveur}
|
|
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}
|
|
\frametitle{Côté client}
|
|
\begin{itemize}
|
|
\item HTML5
|
|
\item CSS3
|
|
\item Boostrap
|
|
\item JavaScript
|
|
\item WebGL
|
|
\item Three.js
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\section{L'interface}
|
|
\subsection{Interface de base}
|
|
\begin{frame}
|
|
\begin{itemize}
|
|
\item Interaction de type jeux vidéo \newline
|
|
\begin{figure}
|
|
\centering
|
|
\includegraphics[scale=0.25]{wiki/spheric.png}
|
|
\caption{Paramètres du contrôleur}
|
|
\end{figure}
|
|
\item Clavier pour la translation
|
|
\item \emph{drag-n-drop} ou \emph{pointer-lock} pour la rotation
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
|
|
\subsection{Recommandations}
|
|
\begin{frame}
|
|
\frametitle{\emph{Viewport}}
|
|
\begin{figure}
|
|
\includegraphics[scale=0.2]{new/01.png}
|
|
\caption{Une recommandation \emph{viewport}}
|
|
\end{figure}
|
|
\end{frame}
|
|
|
|
\begin{frame}
|
|
\frametitle{\emph{Arrow}}
|
|
\begin{figure}
|
|
\includegraphics[scale=0.2]{new/02.png}
|
|
\caption{Une recommandation \emph{arrow}}
|
|
\end{figure}
|
|
\end{frame}
|
|
|
|
\subsection{Prévisualisation}
|
|
\begin{frame}
|
|
\begin{figure}[H]
|
|
\centering
|
|
\includegraphics[scale=0.3]{new/interface2.png}
|
|
~
|
|
\includegraphics[scale=0.13]{new/03.png}
|
|
\caption{Des prévisualisations sur différentes interfaces}
|
|
\end{figure}
|
|
\end{frame}
|
|
|
|
\subsection{Interface complète}
|
|
\begin{frame}
|
|
\begin{figure}[H]
|
|
\scalebox{.5}{\parbox{2\linewidth}{%
|
|
\centering
|
|
\begin{tikzpicture}[]
|
|
\node (myfirstpic) at (0,0) {\includegraphics[scale=0.35]{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}
|
|
|
|
\note[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.}
|
|
|
|
\note[item]{ \emph{Previous} : à chaque clic sur une recommandation, les positions
|
|
intiale et finale sont sauvegardées. Cliquer sur ce bouton ramène à
|
|
la position précédente.}
|
|
|
|
\note[item]{ \emph{Next} : cliquer sur ce bouton ramène à la position suivante.}
|
|
|
|
\note[item]{ \emph{Pointer lock} : permet de passer du mode \emph{pointer-lock} au
|
|
mode \emph{drag-n-drop} et vice-versa.}
|
|
|
|
\note[item]{ \emph{Music} : un lecteur qui contrôle une petite musique qui permet
|
|
de se mettre dans l'ambiance de la scène.}
|
|
|
|
\note[item]{ \emph{Coin gauge} : une jauge qui représente l'avancement de la
|
|
récupération des pièces.}
|
|
|
|
\note[item]{ \emph{FPS counter} : indique la période de rafraîchissement du rendu.}
|
|
|
|
\end{frame}
|
|
|
|
|
|
\section{Streaming}
|
|
|
|
\end{document}
|