photo et video 360 sur page web

Venez poser vos questions, répondre aux interrogations des autres ou simplement vous renseigner.
Jeune Pingouin
Message(s) : 22
Inscription : 23 Jan 2016 19:44

photo et video 360 sur page web

Message par sechanbask » 24 Mai 2017 23:44

Bonjour,

J'ai acheter une camera 360 (samsung gear 360 v1). Après quelques test, j'ai trouvé comment faire un panoramique utilisable sur une page web avec pannellum http://srf.atenbet.fr/pointclouds/test.html.


Maintenant je cherche à faire une page avec l'ensemble de mes photos (une centaine environ) visualisable avec une fenêtre pannellum. J'ai trouvé un bout de script ajax (https://github.com/ultramango/gear360pa ... aster/html) mais pour une autre interface pas forcement pratique ni estéhique. Du coup j'aimerais bien mixer les 2.

Déjà 1 est-ce que c'est faisable et si oui comment commencer ?

Très vieux Pingouin
Message(s) : 265
Inscription : 23 Juil 2015 13:56

Re: photo et video 360 sur page web

Message par frem » 25 Mai 2017 02:36

sechanbask a écrit :[…] j'ai trouvé comment faire un panoramique utilisable sur une page web avec pannellum

Watcha, la projection qui ne respecte pas les verticales, donne un peu la nausée lorsqu’on navigue dans l’image…

sechanbask a écrit :Maintenant je cherche à faire une page avec l'ensemble de mes photos (une centaine environ) visualisable avec une fenêtre pannellum. J'ai trouvé un bout de script ajax (https://github.com/ultramango/gear360pa ... aster/html) mais pour une autre interface pas forcement pratique ni estéhique. Du coup j'aimerais bien mixer les 2.

Oui, c’est faisable, sauf que je ne sais pas pour toi, mais de mon côté le bout de script ne fonctionne pas : il ne créé pas la liste des fichiers passée en paramètre.
Et même s’il fonctionnait, ça n’est vraiment pas le top au niveau apparence puisque tu n’auras qu’une liste basique à gauche et un lecteur à droite. Tu ne préférerais pas un truc un peu plus joli ? (genre une galerie photo avec une tuile par image et un clic sur la tuile affiche l’image en plein écran…)

Au niveau fonctionnalités, quels sont tes griefs vis-à-vis de Valiant 360 (le visualiseur de panoramique utilisé par gear360pano), par rapport à pannellum ?
D’après ce que j’ai rapidement pu tester, ils font le même job.

Donc si le script marche chez toi, il suffit de remplacer les appels à Valiant 360 par les appels à pannellum, dans le script embarqué, pour que ça fonctionne.

Autre solution : Piwigo est une très bonne galerie photo et il existe une extension pour les panoramas… (je ne l’ai pas testée). Si tu veux tester sans rien avoir à installer, tu prends un compte chez eux, les prix sont tout à fait honnêtes (voir carrément pas cher pour les premiers prix).

Jeune Pingouin
Message(s) : 22
Inscription : 23 Jan 2016 19:44

Re: photo et video 360 sur page web

Message par sechanbask » 25 Mai 2017 15:55

pour que la galerie fonctionnne, il faut faire
Code : Tout sélectionner
ls -1 *.mp4 *.jpg > filelist.txt


j'ai pas forcément d'un truc joli, c'est surtout pour avoir un visuel rapide et éventuellement pouvoir faire une visite guidée avec plusieurs pano dans la même image, et enfin les contrôle de vaillant ne sont pas vraiment contrôlables.

J'avais déjà testé piwigo pour autre chose, mais c'est un tank pour écraser une mouche et l'extension n'est pas mise à jour depuis 2014. Installer tout ça pour avoir un truc vraiment pas maintenable, c'est un problème.

Pour moi le javascript, c'est du chinois ça c'est code de la galerie vaillant

Code : Tout sélectionner
<!--
Valiant360
Copyright (c) 2014 Charlie Hoey
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Some modifications to suite poorman's gallery for Gear360
Bit hacky to ommit some problems + crappy JS code
-->

<!DOCTYPE HTML>
<html>
   <head>
      <title>Gear360 Gallery</title>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="css/valiant360.css" />
    <style type="text/css">
      #wrap {
         width: 1224px;
         margin: 0 auto;
      }
      #left {
         float: left;
         width: 200px;
      }
      #right {
         float: right;
         width: 1024px;
      }
      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      #clickme {
        cursor: pointer; cursor: hand;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="left">
        File list:
        <ul id="objList"></ul>
      </div>

      <div id="right">
        <div class="valiantContainer" data-video-src="testvideo_pano.mp4" style="width: 1024px; height: 512px;"></div>
      </div>
    </div>

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/three.min.js"></script>
    <script type="text/javascript" src="js/jquery.valiant360.min.js"></script>

    <script type="text/javascript">
      var exists = false; // Flag to trace our object
      $.ajax({
        url: 'filelist.txt',
        type: 'GET',
        dataType: 'text',
        success: function(data) {
          $.each(data.split(/[\n\r]+/), function(index, filename) {
            if(filename) {
              var obj = $('<li>').text(filename).appendTo('#objList');
              obj.attr('id', 'clickme'); // Change cursor to hand
              // Check if our object already exists...
              if(exists) {
                $('.').Valiant360('destroy');
              }
              // Detect file type...
              var ext = filename.split('.').pop().toLowerCase();
              if(ext == 'mp4') {
                obj.click(function() {
                  // Hacky bit here...
                  $('.valiantContainer').removeAttr('data-photo-src');
                  $('.valiantContainer').attr('data-video-src', filename);
                  $('.valiantContainer').Valiant360();
                  exists = true;
                  console.log("OK Video");
                });
              } else if(ext == "jpg" || ext == "jpeg" || ext == "png") {
                obj.click(function() {
                  // Hacky bit here...
                  $('.valiantContainer').removeAttr('data-video-src');
                  $('.valiantContainer').attr('data-photo-src', filename);
                  $('.valiantContainer').Valiant360();
                  exists = true;
                  console.log("OK Photo");
                });
              }
            }
          });
        }
      });
    </script>
  </body>
</html>



et ça c'est le code du viewer pannellum :

Code : Tout sélectionner
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A simple example</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>
    <style>
    #panorama {
        width: 600px;
        height: 400px;
    }
    </style>
</head>
<body>

<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
        "panorama": "http://srf.atenbet.fr/pointclouds/360_0001_pano0.jpg"
});
</script>

</body>
</html>


Je vois pas bien ce que je dois modifier. La syntaxe n'est pas semblable entre

Code : Tout sélectionner
('.valiantContainer').Valiant360();

et
Code : Tout sélectionner
pannellum.viewer('panorama', {
        "panorama": "http://srf.atenbet.fr/pointclouds/360_0001_pano0.jpg"
});

Pingouin
Message(s) : 98
Inscription : 03 Nov 2016 19:20

Re: photo et video 360 sur page web

Message par humangeek » 27 Mai 2017 14:43

Salut,

Je ne connais pas ton niveau en programmation donc je pars de la "base".
Ne pas voir dans mon post du mépris. (le texte ne fait pas )
Pour bien comprendre le code il te faut :

Comprendre la notion d’objet (Conception/Programation Orienté Objet), pile, liste, etc.
Pour la partie webgl être habitué aux notions d’informatique «graphique»

https://pannellum.org/documentation/api/
https://api.jquery.com/category/depreca ... cated-1.7/
https://www.javascript.com/learn/javascript/strings
https://threejs.org/docs/index.html#man ... ng-a-scene
https://github.com/flimshaw/Valiant360


Quelques remarques :
- pas de css/javascript dans du code html tant que faire ce peut (ne vaut que si tu as paste les sources depuis ton éditeur et pas depuis le navigateur). utilise les "include"
- Pas de cdn c’est une mauvaise pratique, tout en local.
- Pour ton code js (dans des fichiers.js) prendre l’habitude de les minimiser (.min.js)
- J'aime bien conserver les numéros de version des librairies dans la documentation du projet (readme ou autre). Il faut essayer d’harmoniser ses
pratiques de dev, voir les normes de codage pour plus d’informations.
- Attention à l’utilisation des bibliothèques dépréciées (à exclure avec les nouveaux projets, à mettre à jour sur les anciens projets (pas toujours facile))
- Il existe des variables en css, elles seraient parfaites pour les dimensions de ton div.
- Il n'est pas recommandé d’utiliser les extensions de fichier pour tester leurs formats (en fait c’est à proscrire).

J’imagine que j’en ai oublié mais ça reste un bon début.

Retour vers Entraide Linux