S’emparer de tout l’écran!
Dans une majorité de projets d’interactivité tangible utilisant une sortie vidéo, il est souhaitable d’avoir un contrôle intégral de ce qui est affiché à l’écran. Dans un environnement web, cela veut dire basculer en plein écran de façon à ce que les éléments d’interface-usager du fureteur et du système soient complètement masqués. Comment peut-on faire cela ?
La réalisation de projets d’interactivité tangible n’était pas à l’ordre du jour lorsque la plateforme web a été conçue. Ceci dit, cette plateforme s’est tellement élargie qu’elle est devenue un excellent choix pour ce genre de projets. Il ne reste que quelques petits obstacles à surmonter. Une de ces contrariétés est que, par défaut, une page web ne s’affiche pas en plein écran.
Pour un projet de JavaScript tangible plus costaud, mon conseil serait d’utiliser NW.js (alias node-webkit). En plus de régler simplement ce problème, NW.js offre aussi une tonne d’autres fonctionalités intéressantes. Mais bon… supposons que l’utilisation de la plateforme web dans un projet d’interactivité tangible soit quelque chose de nouveau pour vous et que vous vouliez faire un démarrage en douceur. Dans ce cas, est-ce possible de rendre une page en plein écran sans trop de soucis ?
La réponse est oui.
Le W3c fut le premier à proposer une spécification pour l’affichage plein écran dans le fureteur. Cette proposition est devenue un norme vivante auprès de l’organisme WHATWG. Elle porte le nom de « Fullscreen API ». Cette norme peut être utilisée dans les fureteurs suivants:
- Firefox 10+
- Chrome 15+
- Internet Explorer 11+
- Opera 12.1+
- Safari 5.1+
Cependant, comme vous l’aurez peut-être deviné, la norme a été implantée de façon différente d’un fureteur à l’autre. Ces différences rendent son usage inutilement difficile (voyez les détails sur l’article correspondant du MDN). C’est pourquoi j’ai créé une petite bibliothèque pour atténuer ces différences et faciliter l’utilisation du mode plein écran. La bibliothèque s’appelle FullScreenManager.
Elle est très facile à utiliser. Tout d’abord, il faut lier le fichier de la bibliothèque en utilisant la bonne vieille balise <script> dans la page HTML:
|
1 |
<script src="FullScreenManager.js"></script> |
Cela créera automatiquement une instance de l’objet et le rendra disponible sous window.FullScreenManager. Par contre, si vous utilisez RequireJS, rien ne sera déclaré sous l’objet window . Vous devrez plutôt importer la bibliothèque comme il est coutume de le faire:
|
1 2 3 |
define(function (require) { var FullScreenManager = require('FullScreenManager'); }); |
Pour des raisons de sécurité, les fureteurs exigent que le mode plein écran soit déclenché par l’usager. Donc, il faut utiliser une fonction écouteur sur un événement de clavier ou de souris. Par exemple, ce code se déclenchera dès que l’usager cliquera quelque part sur le document et basculera entre le mode normal et le mode plein écran:
|
1 2 3 |
document.documentElement.onclick = function() { FullScreenManager.toggle(); } |
Il est possible de préciser quel élément doit être affiché en plein écran. Pour ce faire, il suffit de passer en paramètre l’élément (ou son id) à la fonction request() ou toggle():
|
1 |
FullScreenManager.request("monElement"); |
Il est aussi possible de surveiller certains événements. Par exemple, pour déclencher une fonction une fois le mode plein écran activé, il suffit de faire ceci:
|
1 2 3 4 5 6 |
FullScreenManager.on('activation', surActivation); function surActivation(e) { console.log("Nous sommes maintenant en plein écran!"); } |
Le mode plein écran fonctionne avec n’importe quel DOMElement que ce soit la page au completou une balise spécifique comme canvas, video, img, etc. Pour plus de détails sur le fonctionnement de la bibliothèque, vous pouvez consulter la documentation complète de l’API.
Et voilà! Vous pouvez maintenant utilisez toute la surface de l’écran sans vous préoccupez de tous ces agaçants éléments d’interface.
La pièce visible dans l’image d’entête est de Mikael Hvidtfeldt Christensen. L’œuvre dans l’image au sein du texte est de Franz Schuier. Les deux sont utilisées selon les termes de la licence Creative Commons Attribution 2.0 Générique.