Votre 1ère application pour e Holographer - nsobczak/e-Holographer GitHub Wiki

Nous allons créer notre 1ère application pour e-holographer. Il s'agit d'une simple application Androïd avec des boutons permettant de lire des images/vidéos.

Pour notre exemple, nous allons lancer des vidéos. Les vidéos 3D donnent, en effet, une meilleure impression d'hologramme que les images.

Il faut tout d'abord sélectionner les vidéos que l'on souhaite diffuser.

On peut facilement trouver des vidéos pour pyramide à hologramme sur internet. Il suffit alors de les ajuster au format de votre écran.

Il est également possible de créer ses propres vidéos à partir de n'importe quelle vidéo existante. Pour cela on peut par exemple utiliser un logiciel de montage de vidéo capable de superposer 4 pistes vidéo à la fois. Nous avons utilisé la version d'essai de CyberLink PowerDirector 14 Ultra tournant sous Windows. Il suffit alors de sélectionner notre vidéo, de la copier 4 fois, de la tourner selon le sens voulu et de placer les 4 copies sur la même vidéo. En image cela donne à peu près cela :

Notre package va simplement choisir de lancer une vidéo ou une autre.

Pour lire nos vidéos nous utilisons le logiciel vlc. Il est aussi possible d'utiliser Windows Média Player.

Nous définissons une 1ère fonction pour lancer une vidéo.

# Fonction permettant d'afficher une vidéo sous windows
def callVideoWindows(instruction,  logiciel, chemin):

    os.system('CALL '+logiciel+' '+chemin)

Notre message callback prend un entier en paramètre correspondant à un des numéros que nous allons attribuer aux vidéos.

@Constellation.MessageCallback()
def CallVideo(data):
    if int(data) == 1:
        callVideo('CALL', '"C:\\Program Files (x86)\\VideoLAN\\VLC\\vlc"', '"D:\\Autre\\Demo.mp4"')

        Constellation.WriteInfo(data)
    if int(data) == 2 : 
        callVideo('CALL', '<Chemin vers la 2eme video que l'on veut lancer>)

        Constellation.WriteInfo(data)

Notre message callback apparait bien dans notre Console Constellation.

Ici nous rentrons directement le chemin de nos vidéos en dur dans le code. Cette première application se veut être simple. Sur notre github vous pourrez trouver une version plus aboutie de cette application.

Notre application de contrôle est une simple application web. Nous la transformerons ensuite en une application pour smartphone/tablette avec Cordova.

Nous créons d'abord une page html avec un titre. Afin de connecter notre application à Constellation, nous incluons les scripts de Constellation dans notre code :

<script type="text/javascript" src="scripts/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="scripts/jquery.signalR-2.2.0.min.js"></script>
<script type="text/javascript" src="scripts/Constellation-1.8.0.js"></script>

Nous ajoutons une ligne pour indiquer l'état de la connexion à Constellation. Nous l'ajoutons juste après le titre.

<p> <b>Etat :</b> <span id="state">Non connecte</span> a <i>Constellation</i> </p>

Il faut maintenant lier cette ligne à Constellation. Nous créons donc une partie javascript que nous plaçons dans le body de notre page.

<!--====== Javascript ======-->
<script type="text/javascript">

    // Constellation
    var constellation = $.signalR.createConstellationConsumer("<URI du serveur constellation>", "<clé d'accès au serveur Constellation>", "<Friendly name>");	// A remplacer pas les infos correspondant au serveur Constellation
    

    constellation.connection.stateChanged(function (change) {
        if (change.newState === $.signalR.connectionState.connected) {
            $("#state").text("Connecte");
            constellation.server.sendMessage({ Scope: 'Package', Args: ['HolographerPythonPackage'] },
                'InfosConnection', '');
        }
        else {
            $("#state").text("Non connecte");
        }
    });

    constellation.connection.start();

</script>

Ce code permet de se connecter à constellation et de lier notre ligne qui nous informe sur l'état de la connexion.

Nous allons maintenant ajouter à notre page 2 boutons permettant de lancer des vidéos :

<button id="demoPushVideo1" style="background-color: aquamarine">Vidéo 1</button>
<button id="demoPushVideo2" style="background-color: aquamarine">Vidéo 2</button>

Nous lions ces 2 boutons dans notre javascript. Il s'agit simplement d'appeler le message callback de notre package :

$("#demoPushVideo1").click(function () {
    console.log('video1');
    constellation.server.sendMessage({ Scope: 'Package', Args: ['HolographerPythonPackage'] }, 'CallVideo', 1);
});
$("#demoPushVideo2").click(function () {
    console.log('video1');
    constellation.server.sendMessage({ Scope: 'Package', Args: ['HolographerPythonPackage'] }, 'CallVideo', 2);
});

Nous obtenons alors le résultat suivant :

Vous pouvez retrouver notre application dans la partie "code" de notre github.

Nous avons une application web qui fonctionne et nous pourrions nous arrêter là. Mais nous souhaitons pouvoir contrôler le lancement de nos hologrammes depuis un smartphone ou une tablette. Afin de convertir notre application, nous utilisons Cordova. Nous pouvons transformer notre application web en une application Androïd, IOS, Blackberry 10 OS... Nous choisissons Androïd.

Nous devons inclure notre html dans celui généré par Cordova. Nous pouvons également remplacer le logo de l'application proposé par défaut par Cordova. Nous avons justement prévu un logo pour cette application :

Nous compilons et installons notre application. Il ne nous reste alors plus qu'à démarrer notre serveur, lancer notre application, appuyer sur un bouton et la magie opère !

Pour afficher des images le principe est exactement le même que pour les vidéos. A la place d'utiliser le logiciel vlc, nous utilisons un afficheur d'images. Il s'agit d'Eye of GNOME pour linux.

Il nous est maintenant possible de lire n'importe quelle image ou vidéo. Vous n'avez pas pu assister au dernier concert de votre groupe de rock préféré car toutes les places étaient vendues en 5 minutes suivant l'ouverture de la billetterie ? Qu'à cela ne tienne, pour peu que vous ayez récupéré une vidéo de ce concert vous pouvez maintenant le regarder sous forme d'hologramme comme si vous y étiez !