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.

  • seemebreakthis@lemm.eeOP
    link
    fedilink
    English
    arrow-up
    2
    ·
    1 year ago

    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>