Webkit

Webkit est le moteur de rendu web le plus performant et le plus largement utilisé à ce jour. Il est à la base du navigateur Google Chrome. Utiliser Webkit pour créer des hologrammes, c'est bénéficier des dernières technologies du web pour créer rapidement des animations fluides.

Une version particulière du navigateur chrome : "Electron" (Anciennement Atom core) est installée sur nos produits. Elle permet un accès immédiat aux ressources qui vous permettront de faciliter votre développement.

Ces applications tirent parti de toute la puissance des navigateurs modernes. Vous n'êtes pas à l'aise avec leur fonctionnement? Votre technologie n'est pas compatible? Pas de panique, Electron propose un environnement qu'il est possible de l'utiliser en autonomie complète.

Introduction

Un lecteur de pages HTML est intégré à tous les produits holusion à partir de la version 1.0.0. La page peut intégrer toutes sortes de ressources javascript ou CSS, intégrées directement au fichier HTML, ou fournies sous forme d’archive.

Pour faciliter le développement, Holusion fournit des “layouts” pour chaque produit. Ils donnent une indication de positionnement et de taille pour créer dynamiquement du contenu adapté.

Ce tutoriel permettra donc de réaliser un exemple portable sur tous les produits de la gamme holusion.

Hello world

Nous allons d’abord créer l’exemple le plus simple :

<html>
<head>
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var Layout = require("layout");
      var layout = new Layout(document.getElementById("viewport"));
      layout.render('Hello World');
    });
  </script>
</head>
<body>
  <div id="viewport"></div>
</body>
</html>

Transférez le fichier hello.html sur un produit holusion. Vous devriez voir un texte statique “hello world” s’afficher sur chaque face.

live Tweet

En utilisant l’API twitter, on peut par exemple créer un live-tweet :

Créer un fichier twitter.html :

<html>
<head>
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var Layout = require("layout");
      var layout = new Layout(document.getElementById("viewport"),"file:///etc/layouts/layouts-enabled/style.css");
      layout.render('<a class="twitter-timeline" href="https://twitter.com/holusion" data-widget-id="657189153893916672"  data-chrome="transparent nofooter noborders noscrollbar">Tweets by @holusion</a>').then(function(){
        var apiCall = document.createElement("script");
        document.body.appendChild(apiCall);
        apiCall.text = '!function(d,s,id){\
          var js,fjs=d.getElementsByTagName(s)[0]  , p=/^http:/.test(d.location)?\'http\':\'https\';if(!d.getElementById(id)){\
              js=d.createElement(s);\
              js.id=id;js.src=p+"://platform.twitter.com/widgets.js";\
              fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");'
      })
    });
  </script>
</head>
<body>
  <div id="viewport"></div>
</body>
</html>

En utilisant les widgets twitter, cette page très simple affiche les dernières actualités twitter pour le compte Holusion.

Avec cette base, il est possible de construire toutes sortes d’applications.

Aller plus loin.

Mise en forme manuelle

Le module layout fourni permet une mise en forme rapide et efficace pour débuter. Si il ne remplit pas sa fonction, il est possible de mettre en forme manuellement le contenu. Pour cela, créer des <div> positionnées de façon absolue dans le document, suivant le format de votre produit.

Applications complexes

Nous conseillons d’utiliser un bundler comme webpack pour présenter votre application finale sous la forme d’un seul fichier .html contenant toutes vos ressources.

Si votre application ne peut pas se packager sous cette forme, par exemple si elle inclus des médias lourds (vidéos, etc…) reportez-vous au guide de packaging d’applications pour en faire une archive Zip compatible.

Support ESNext, CSS3, HTML5

Le navigateur utilisé repose sur electron. Votre application a donc accès à tous les modules standard de nodejs, ainsi qu’aux modules spécifiques d’electron V0.34.0.

Le support ES2015,CSS3 et HTML5 est tiré de la version de Chrome incluse. Actuellement Chrome 51. On peut trouver leur statut dans la documentation du projet, ou un résumé ici.

Pour vérifier la version de chrome utilisée, on peut utiliser la propriété navigator.userAgent. Vous obtiendrez un texte de type :

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Electron/1.2.2 Safari/537.36

Duquel on déduit que nous utilisons la version 51.0.2704.84 de chrome, pour Electron 1.2.2. Si votre système est plus ancien, il se peut qu’il utilise encore la version 49 de Chrome.