Insta360 Action Camera Community @lemmy.world seemebreakthis @lemm.ee 1y ago

If you have web hosting service (or have a server yourself and do self hosting), sharing your 360 photos is a breeze

Inspired by this post https://lemmy.world/post/1320183 (too bad the fediverse doesn't yet offer a good way to link posts but stay in your own instance) plus a need to share my 360 pictures to a only a specific group of people, I went to ChatGPT for help and very quickly ended up with a working website that can show a pre-defined set of 360 pictures.

So basically a static web page with one single purpose of showing a number of 360 pictures.

Dunno if anyone else is interested, so if there is at least one comment here with a request, I will post the .html code here to save you time.

2 comments

Yeah, I'd love to see the code, or even if you have it up in a repo

The .html is so short. I will just post it here below.

And you also need two .js files to be in the same folder. Download panolens.min.js here - click on Documentation then the 2nd link under 'getting started'. Download three.min.js here - you need to pick version "105" and download that one.

Put your pictures in the same folder. Take a look at the code, and change the lines to reflect the picture filenames, and also the initial picture to load. (or improve the code to look for appropriate files in a specific folder then create the dropdown list accordingly...)

Here is the code:

<!DOCTYPE html>
<html>
<head>
  <title>Pictures Viewer</title>
  <script src="three.min.js"></script>
  <script src="panolens.min.js"></script>
  <style>
    #container {
      width: 90%;
      margin: 0 auto; /* Center the container div horizontally */
    }

    #panorama {
      width: 100%;
      height: calc(100vw * 9 / 16); /* Set the height based on a 16:9 aspect ratio */
      margin-bottom: 1em; /* Add a margin of one line between the picture frame and the dropdown */
    }

    #loading-message {
      display: none;
      margin-top: 1em; /* Add a margin between the loading message and the title */
      margin-bottom: 1em; /* Add a margin at the bottom */
      font-size: 2em; /* Set the font size to 2em */
      color: green; /* Set the font color to green */
      animation: blink 0.5s infinite; /* Add the blinking animation with a duration of 0.5 seconds */
    }

    @keyframes blink {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
    }

  </style>
</head>
<body>
  <h1>Pictures Viewer</h1>
  
  <div id="container">
    <div id="loading-message">Image being rendered, please wait...</div>
    <div id="panorama"></div>

    <label for="picture-select">Select Picture:</label>
    <select id="picture-select">
      <option value="picture1.jpg">Picture 1</option>
      <option value="picture2.jpg">Picture 2</option>
      <option value="picture3.jpg">Picture 3</option>
      <option value="picture4.jpg">Picture 4</option>
      <option value="picture5.jpg">Picture 5</option>
      <option value="picture6.jpg">Picture 6</option>
    </select>
  </div>

  <script>
    const panoramaElement = document.getElementById('panorama');
    const viewer = new PANOLENS.Viewer({ container: panoramaElement });
    let panorama = new PANOLENS.ImagePanorama("picture1.jpg");
    
    viewer.add(panorama);

    const pictureSelect = document.getElementById('picture-select');
    const loadingMessage = document.getElementById('loading-message');

    const showLoadingMessage = function() {
      loadingMessage.style.display = 'block'; // Show the loading message
    };

    const hideLoadingMessage = function() {
      loadingMessage.style.display = 'none'; // Hide the loading message
    };

    panorama.addEventListener('progress', showLoadingMessage);
    panorama.addEventListener('enter-fade-start', hideLoadingMessage);

    pictureSelect.addEventListener('change', function() {
      const selectedPicture = pictureSelect.value;
      loadingMessage.style.display = 'block'; // Show the loading message
      viewer.remove(panorama); // Remove the existing panorama from the viewer
      panorama = new PANOLENS.ImagePanorama(selectedPicture);
      viewer.add(panorama); // Add the new panorama to the viewer
      viewer.setPanorama(panorama);
      panorama.addEventListener('enter-fade-start', function() {
        loadingMessage.style.display = 'none'; // Hide the loading message when the new panorama finishes rendering
      });
    });
  </script>
</body>
</html>