Crumb

seemebreakthis

u/seemebreakthis@lemm.ee
28 posts · 94 comments

Recent posts

Recent comments

on What are your must-try foods from HK? · c/hongkong · 2 pts · 2y

Hot pot with a bunch of friends - beer is a must - maybe not so much for the food itself, but good vibes

Any type of food at 北角東寶 pretty much for the same reason... their "drinking Guinness out of a bowl" is quite an experience, also soy bean sauteed clam 豉椒炒蜆 is very mouth watering.

on Moving away from Surfshark · c/vpn · 3 pts · 3y

One vote for Mullvad. Like you I moved from Surfshark but that was a year ago. Never looked back.

There is a server list page on Mullvad to let you see the bandwidth of each server they have in each country. Take a look and pick the faster ones if necessary (they have all been ok for me fast or slow when I stream).

Note however I don't have Netflix account etc. I stream from a "members only" IPTV service.

on Understanding how to create a sentence · c/cantonese · 2 pts · 3y

Honestly there is no set rules for a lot of stuff in Cantonese, just convention. If you are really yearning for fluent Cantonese, just find someone to learn from. Someone who is patient enough to correct you whenever you say something that sounds awkward.

I am sure a lot of people will be willing to be your Cantonese partner if you are willing to teach them native spoken English in return !

on Firefox 115.0.3 released · c/firefox · 9 pts · 3y

On my Firefox Android I have "installed" Lemmy (specifically lemm.ee) as a web app. When I quit this app everytime Firefox crashes. Anyone else have the same issue?

on If you have web hosting service (or have a server yourself and do self hosting), sharing your 360 photos is a breeze · c/insta360 · 3 pts · 3y

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>