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.

  • @bluebearM
    link
    English
    11 year ago

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

    • @[email protected]OP
      link
      fedilink
      English
      31 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>