<html>
<head>
<meta http-equiv="Cache-control" content-"public">
  <style>
    html, body {
      margin: 0;
      height: 100%;
      background-color: #000000;
    }
    .imgcontainer {
      width: 100%;
      height: 100%;
    }
    .display {
      width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  </style>
  <script>
    var port = "9001" ;

    function setNewImage(url) {
      console.log("url: " + url);
      img = document.getElementById("display");
      img.src = url;
    }

    async function connectToPhotoServer() {
      while (true) {
        console.log("Starting fetch");
        await fetch("http://localhost:" + port + "/status")
          .then(function(response) {
                  return response.text();
                })
          .then(function(data) {
                  console.log("New URL: " + data);
                  setNewImage(data);
                });
      }
    }
  </script>
</head>
<body onload="connectToPhotoServer();">
<div class="imgcontainer">
  <img class="display" id="display" src="https://com-leafe-images.nyc3.cdn.digitaloceanspaces.com/photoviewer/P3300010.jpg" />
</div>
</body>
</html>

<!--
      if (response.ok) {
        let data = response.text();
        console.log("DATA: " + data);
      } else {
        alert("Problem with fetch! " + response.status);
      }
    img {
      top: 0;
      left: 0;
      min-width: 100%;
      min-height: 100%;
      height: auto;
      width: 100%;
      object-fit: contain;
    }

        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://localhost:" + port + "/status");
        debugger;
        xhr.callback = setNewImage;
        xhr.onload = function (e) {
          if ( xhr.readyState === 4 ) {
            if ( xhr.status === 200 ) {
              console.log(xhr.responseText);
            } else {
              console.error(xhr.statusText);
            }
          }
        };
        console.log("sending xhr");
        xhr.send() ;

      fetch("http://localhost:" + port + "/status")
        .then(response => response.responseText)
        .then(data => console.log("DATA: " + response));
      console.log("Ended fetch");
-->

Add the HTML file for the web display
Add the HTML file for the web display
