esp32-cam-webserver/index_other.h

/*
 * simpleviewer and streamviewer
 */

const uint8_t index_simple_html[] = R"=====(<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title id="title">ESP32-CAM Simplified View</title>
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="stylesheet" type="text/css" href="/style.css">
    <style>
      @media (min-width: 800px) and (orientation:landscape) {
        #content {
          display:flex;
          flex-wrap: nowrap;
          flex-direction: column;
          align-items: flex-start;
        }
      }
    </style>
  </head>

  <body>
    <section class="main">
      <div id="logo">
        <label for="nav-toggle-cb" id="nav-toggle" style="float:left;" title="Settings">&#9776;&nbsp;</label>
        <button id="swap-viewer" style="float:left;" title="Swap to full feature viewer">Full</button>
        <button id="get-still" style="float:left;">Get Still</button>
        <button id="toggle-stream" style="float:left;" class="hidden">Start Stream</button>
        <div id="wait-settings" style="float:left;" class="loader" title="Waiting for camera settings to load"></div>
      </div>
      <div id="content">
        <div class="hidden" id="sidebar">
          <input type="checkbox" id="nav-toggle-cb">
            <nav id="menu" style="width:24em;">
              <div class="input-group hidden" id="lamp-group" title="Flashlight LED.&#013;&#013;Warning:&#013;Built-In lamps can be Very Bright! Avoid looking directly at LED&#013;Can draw a lot of power and may cause visual artifacts, affect WiFi or even brownout the camera on high settings">
                <label for="lamp">Light</label>
                <div class="range-min">Off</div>
                <input type="range" id="lamp" min="0" max="100" value="0" class="action-setting">
                <div class="range-max">Full&#9888;</div>
              </div>
              <div class="input-group" id="framesize-group">
                <label for="framesize">Resolution</label>
                <select id="framesize" class="action-setting">
                  <option value="13">UXGA (1600x1200)</option>
                  <option value="12">SXGA (1280x1024)</option>
                  <option value="11">HD (1280x720)</option>
                  <option value="10">XGA (1024x768)</option>
                  <option value="9">SVGA (800x600)</option>
                  <option value="8">VGA (640x480)</option>
                  <option value="7">HVGA (480x320)</option>
                  <option value="6">CIF (400x296)</option>
                  <option value="5">QVGA (320x240)</option>
                  <option value="3">HQVGA (240x176)</option>
                  <option value="1">QQVGA (160x120)</option>
                  <option value="0">THUMB (96x96)</option>
                </select>
              </div>
              <!-- Hide the next entries, they are present in the body so that we
                  can pass settings to/from them for use in the scripting, not for user setting -->
              <div id="rotate" class="action-setting hidden"></div>
              <div id="cam_name" class="action-setting hidden"></div>
              <div id="stream_url" class="action-setting hidden"></div>
            </nav>
        </div>
        <figure>
          <div id="stream-container" class="image-container hidden">
            <div class="close close-rot-none" id="close-stream">×</div>
            <img id="stream" src="">
          </div>
        </figure>
      </div>
    </section>
  </body>

  <script>
  document.addEventListener('DOMContentLoaded', function (event) {
    var baseHost = document.location.origin;
    var streamURL = 'Undefined';

    const settings = document.getElementById('sidebar')
    const waitSettings = document.getElementById('wait-settings')
    const lampGroup = document.getElementById('lamp-group')
    const rotate = document.getElementById('rotate')
    const view = document.getElementById('stream')
    const viewContainer = document.getElementById('stream-container')
    const stillButton = document.getElementById('get-still')
    const streamButton = document.getElementById('toggle-stream')
    const closeButton = document.getElementById('close-stream')
    const swapButton = document.getElementById('swap-viewer')

    const hide = el => {
      el.classList.add('hidden')
    }
    const show = el => {
      el.classList.remove('hidden')
    }

    const disable = el => {
      el.classList.add('disabled')
      el.disabled = true
    }

    const enable = el => {
      el.classList.remove('disabled')
      el.disabled = false
    }

    const updateValue = (el, value, updateRemote) => {
      updateRemote = updateRemote == null ? true : updateRemote
      let initialValue
      if (el.type === 'checkbox') {
        initialValue = el.checked
        value = !!value
        el.checked = value
      } else {
        initialValue = el.value
        el.value = value
      }

      if (updateRemote && initialValue !== value) {
        updateConfig(el);
      } else if(!updateRemote){
        if(el.id === "lamp"){
          if (value == -1) {
            hide(lampGroup)
          } else {
            show(lampGroup)
          }
        } else if(el.id === "cam_name"){
          window.document.title = value;
          console.log('Name set to: ' + value);
        } else if(el.id === "code_ver"){
          console.log('Firmware Build: ' + value);
        } else if(el.id === "rotate"){
          rotate.value = value;
          applyRotation();
        } else if(el.id === "stream_url"){
          streamURL = value;
          streamButton.setAttribute("title", `Start the stream :: {streamURL}`);
          console.log('Stream URL set to:' + value);
        }
      }
    }

    var rangeUpdateScheduled = false
    var latestRangeConfig

    function updateRangeConfig (el) {
      latestRangeConfig = el
      if (!rangeUpdateScheduled) {
        rangeUpdateScheduled = true;
        setTimeout(function(){
          rangeUpdateScheduled = false
          updateConfig(latestRangeConfig)
        }, 150);
      }
    }

    function updateConfig (el) {
      let value
      switch (el.type) {
        case 'checkbox':
          value = el.checked ? 1 : 0
          break
        case 'range':
        case 'select-one':
          value = el.value
          break
        case 'button':
        case 'submit':
          value = '1'
          break
        default:
          return
      }

      const query = `${baseHost}/control?var=${el.id}&val=${value}`

      fetch(query)
        .then(response => {
          console.log(`request to ${query} finished, status: ${response.status}`)
        })
    }

    document
      .querySelectorAll('.close')
      .forEach(el => {
        el.onclick = () => {
          hide(el.parentNode)
        }
      })

    // read initial values
    fetch(`${baseHost}/status`)
      .then(function (response) {
        return response.json()
      })
      .then(function (state) {
        document
          .querySelectorAll('.action-setting')
          .forEach(el => {
            updateValue(el, state[el.id], false)
          })
        hide(waitSettings);
        show(settings);
        show(streamButton);
        startStream();
      })

    // Put some helpful text on the 'Still' button
    stillButton.setAttribute("title", `Capture a still image :: ${baseHost}/capture`);

    const stopStream = () => {
      window.stop();
      streamButton.innerHTML = 'Start Stream';
          streamButton.setAttribute("title", `Start the stream :: ${streamURL}`);
      hide(viewContainer);
    }

    const startStream = () => {
      view.src = streamURL;
      view.scrollIntoView(false);
      streamButton.innerHTML = 'Stop Stream';
      streamButton.setAttribute("title", `Stop the stream`);
      show(viewContainer);
    }

    const applyRotation = () => {
      rot = rotate.value;
      if (rot == -90) {
        viewContainer.style.transform = `rotate(-90deg)  translate(-100%)`;
        closeButton.classList.remove('close-rot-none');
        closeButton.classList.remove('close-rot-right');
        closeButton.classList.add('close-rot-left');
      } else if (rot == 90) {
        viewContainer.style.transform = `rotate(90deg) translate(0, -100%)`;
        closeButton.classList.remove('close-rot-left');
        closeButton.classList.remove('close-rot-none');
        closeButton.classList.add('close-rot-right');
      } else {
        viewContainer.style.transform = `rotate(0deg)`;
        closeButton.classList.remove('close-rot-left');
        closeButton.classList.remove('close-rot-right');
        closeButton.classList.add('close-rot-none');
      }
       console.log('Rotation ' + rot + ' applied');
   }

    // Attach actions to controls

    stillButton.onclick = () => {
      stopStream();
      view.src = `${baseHost}/capture?_cb=${Date.now()}`;
      view.scrollIntoView(false);
      show(viewContainer);
    }

    closeButton.onclick = () => {
      stopStream();
      hide(viewContainer);
    }

    streamButton.onclick = () => {
      const streamEnabled = streamButton.innerHTML === 'Stop Stream'
      if (streamEnabled) {
        stopStream();
      } else {
        startStream();
      }
    }

    // Attach default on change action
    document
      .querySelectorAll('.action-setting')
      .forEach(el => {
        el.onchange = () => updateConfig(el)
      })

    // Update range sliders as they are being moved
    document
      .querySelectorAll('input[type="range"]')
      .forEach(el => {
        el.oninput = () => updateRangeConfig(el)
      })

    // Custom actions
    // Detection and framesize
    rotate.onchange = () => {
      applyRotation();
      updateConfig(rotate);
    }

    framesize.onchange = () => {
      updateConfig(framesize)
    }

    swapButton.onclick = () => {
      window.open('/?view=full','_self');
    }

  })
  </script>
</html>)=====";

size_t index_simple_html_len = sizeof(index_simple_html)-1;

/* Stream Viewer */

const uint8_t streamviewer_html[] = R"=====(<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title id="title">ESP32-CAM StreamViewer</title>
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <style>
      /* No stylesheet, define all style elements here */
      body {
        font-family: Arial,Helvetica,sans-serif;
        background: #181818;
        color: #EFEFEF;
        font-size: 16px;
        margin: 0px;
        overflow:hidden;
      }

      img {
        object-fit: contain;
        display: block;
        margin: 0px;
        padding: 0px;
        width: 100vw;
        height: 100vh;
      }

      .loader {
        border: 0.5em solid #f3f3f3;
        border-top: 0.5em solid #000000;
        border-radius: 50%;
        width: 1em;
        height: 1em;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
      }

      @-webkit-keyframes spin {   /* Safari */
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    </style>
  </head>

  <body>
    <section class="main">
      <div id="wait-settings" style="float:left;" class="loader" title="Waiting for stream settings to load"></div>
      <div style="display: none;">
        <!-- Hide the next entries, they are present in the body so that we
             can pass settings to/from them for use in the scripting -->
        <div id="rotate" class="action-setting hidden">0</div>
        <div id="cam_name" class="action-setting hidden"></div>
        <div id="stream_url" class="action-setting hidden"></div>
      </div>
      <img id="stream" src="">
    </section>
  </body>

  <script>
  document.addEventListener('DOMContentLoaded', function (event) {
    var baseHost = document.location.origin;
    var streamURL = 'Undefined';

    const rotate = document.getElementById('rotate')
    const stream = document.getElementById('stream')
    const spinner = document.getElementById('wait-settings')

    const updateValue = (el, value, updateRemote) => {
      updateRemote = updateRemote == null ? true : updateRemote
      let initialValue
      if (el.type === 'checkbox') {
        initialValue = el.checked
        value = !!value
        el.checked = value
      } else {
        initialValue = el.value
        el.value = value
      }

      if (updateRemote && initialValue !== value) {
        updateConfig(el);
      } else if(!updateRemote){
        if(el.id === "cam_name"){
          window.document.title = value;
          stream.setAttribute("title", value + "\n(doubleclick for fullscreen)");
          console.log('Name set to: ' + value);
        } else if(el.id === "rotate"){
          rotate.value = value;
          console.log('Rotate recieved: ' + rotate.value);
        } else if(el.id === "stream_url"){
          streamURL = value;
          console.log('Stream URL set to:' + value);
        }
      }
    }

    // read initial values
    fetch(`${baseHost}/info`)
      .then(function (response) {
        return response.json()
      })
      .then(function (state) {
        document
          .querySelectorAll('.action-setting')
          .forEach(el => {
            updateValue(el, state[el.id], false)
          })
        spinner.style.display = `none`;
        applyRotation();
        startStream();
      })

    const startStream = () => {
      stream.src = streamURL;
      stream.style.display = `block`;
    }

    const applyRotation = () => {
      rot = rotate.value;
      if (rot == -90) {
        stream.style.transform = `rotate(-90deg)`;
      } else if (rot == 90) {
        stream.style.transform = `rotate(90deg)`;
      }
      console.log('Rotation ' + rot + ' applied');
    }

    stream.ondblclick = () => {
      if (stream.requestFullscreen) {
        stream.requestFullscreen();
      } else if (stream.mozRequestFullScreen) { /* Firefox */
        stream.mozRequestFullScreen();
      } else if (stream.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        stream.webkitRequestFullscreen();
      } else if (stream.msRequestFullscreen) { /* IE/Edge */
        stream.msRequestFullscreen();
      }
    }
  })
  </script>
</html>)=====";

size_t streamviewer_html_len = sizeof(streamviewer_html)-1;

/* Captive Portal page
   we replace the <> delimited strings with correct values as it is served */

const std::string portal_html = R"=====(<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title id="title"><CAMNAME> - portal</title>
    <link rel="icon" type="image/png" sizes="32x32" href="<APPURL>favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<APPURL>favicon-16x16.png">
    <link rel="stylesheet" type="text/css" href="<APPURL>style.css">
  </head>
  <body style="text-align: center;">
    <img src="<APPURL>logo.svg" style="position: relative; float: right;">
    <h1><CAMNAME> - access portal</h1>
    <div class="input-group" style="margin: auto; width: max-content;">
      <a href="<APPURL>?view=simple" title="Click here for a simple view with minimum control" style="text-decoration: none;" target="_blank">
      <button>Simple Viewer</button></a>
      <a href="<APPURL>?view=full" title="Click here for the main camera page with full controls" style="text-decoration: none;" target="_blank">
      <button>Full Viewer</button></a>
      <a href="<STREAMURL>view" title="Click here for the dedicated stream viewer" style="text-decoration: none;" target="_blank">
      <button>Stream Viewer</button></a>
    </div>
    <hr>
    <a href="<APPURL>dump" title="Information dump page" target="_blank">Camera Details</a><br>
  </body>
</html>)=====";

/* Error page
   we replace the <> delimited strings with correct values as it is served */

const std::string error_html = R"=====(<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title id="title"><CAMNAME> - Error</title>
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="ico\" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="stylesheet" type="text/css" href="<APPURL>style.css">
  </head>
  <body style="text-align: center;">
    <img src="<APPURL>logo.svg" style="position: relative; float: right;">
    <h1><CAMNAME></h1>
    <ERRORTEXT>
  </body>
  <script>
    setTimeout(function(){
      location.replace(document.URL);
    }, 60000);
  </script>
</html>)=====";
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								/*
-												Change how we serve full and simple indexes, add portal page and logo to that (#68)

* Implement one URI for index pages, takes a parameter, ?view=full|simple|etc
* Add an access portal page, add a logo to that and the dump page.
* Fix default myconfig
* fix a stoopid, possibly disruptive bug that I introduced when unpacking html in my 1st commit
											
										
										
											2020-10-07 08:08:18 +08:00
+								 * simpleviewer and streamviewer
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								 */
-												Portal page with hardcoded IP addresses (#69)


											
										
										
											2020-10-07 18:19:19 +08:00
+								const uint8_t index_simple_html[] = R"=====(<!doctype html>
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								<html>
 								  <head>
 								    <meta charset="utf-8">
 								    <meta name="viewport" content="width=device-width,initial-scale=1">
-												Change how we serve full and simple indexes, add portal page and logo to that (#68)

* Implement one URI for index pages, takes a parameter, ?view=full|simple|etc
* Add an access portal page, add a logo to that and the dump page.
* Fix default myconfig
* fix a stoopid, possibly disruptive bug that I introduced when unpacking html in my 1st commit
											
										
										
											2020-10-07 08:08:18 +08:00
+								    <title id="title">ESP32-CAM Simplified View</title>
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 								    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
+								    <link rel="stylesheet" type="text/css" href="/style.css">
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    <style>
-												Fix rotate -90 degree bug (#169)

Adding a style with flex-direction: column; and align-items: flex-start; does the job 😀
											
										
										
											2021-10-11 18:44:58 +08:00
+								      @media (min-width: 800px) and (orientation:landscape) {
 								        #content {
 								          display:flex;
 								          flex-wrap: nowrap;
 								          flex-direction: column;
 								          align-items: flex-start;
 								        }
 								      }
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    </style>
 								  </head>
 								  <body>
 								    <section class="main">
 								      <div id="logo">
 								        <label for="nav-toggle-cb" id="nav-toggle" style="float:left;" title="Settings">&#9776;&nbsp;</label>
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
+								        <button id="swap-viewer" style="float:left;" title="Swap to full feature viewer">Full</button>
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								        <button id="get-still" style="float:left;">Get Still</button>
 								        <button id="toggle-stream" style="float:left;" class="hidden">Start Stream</button>
 								        <div id="wait-settings" style="float:left;" class="loader" title="Waiting for camera settings to load"></div>
 								      </div>
 								      <div id="content">
 								        <div class="hidden" id="sidebar">
 								          <input type="checkbox" id="nav-toggle-cb">
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
+								            <nav id="menu" style="width:24em;">
-												mdns name and tooltips

											
										
										
											2022-03-10 21:44:26 +08:00
+								              <div class="input-group hidden" id="lamp-group" title="Flashlight LED.&#013;&#013;Warning:&#013;Built-In lamps can be Very Bright! Avoid looking directly at LED&#013;Can draw a lot of power and may cause visual artifacts, affect WiFi or even brownout the camera on high settings">
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								                <label for="lamp">Light</label>
 								                <div class="range-min">Off</div>
 								                <input type="range" id="lamp" min="0" max="100" value="0" class="action-setting">
-												Lamp Warning symbol and tooltip (#148)


											
										
										
											2022-03-09 18:58:54 +08:00
+								                <div class="range-max">Full&#9888;</div>
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
+								              </div>
 								              <div class="input-group" id="framesize-group">
 								                <label for="framesize">Resolution</label>
 								                <select id="framesize" class="action-setting">
-												Fix the framesize list for latest ESP IDE (#102)

* #98 : Fix the framesize list for latest ESP IDE
* Add framesize info to API doc
* Dont use ESP-IDE HEAD for travis, use target version instead (currently 1.0.6)
											
										
										
											2021-05-03 16:35:12 +08:00
+								                  <option value="13">UXGA (1600x1200)</option>
 								                  <option value="12">SXGA (1280x1024)</option>
 								                  <option value="11">HD (1280x720)</option>
 								                  <option value="10">XGA (1024x768)</option>
 								                  <option value="9">SVGA (800x600)</option>
 								                  <option value="8">VGA (640x480)</option>
 								                  <option value="7">HVGA (480x320)</option>
 								                  <option value="6">CIF (400x296)</option>
 								                  <option value="5">QVGA (320x240)</option>
 								                  <option value="3">HQVGA (240x176)</option>
 								                  <option value="1">QQVGA (160x120)</option>
 								                  <option value="0">THUMB (96x96)</option>
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
+								                </select>
 								              </div>
 								              <!-- Hide the next entries, they are present in the body so that we
 								                  can pass settings to/from them for use in the scripting, not for user setting -->
 								              <div id="rotate" class="action-setting hidden"></div>
 								              <div id="cam_name" class="action-setting hidden"></div>
 								              <div id="stream_url" class="action-setting hidden"></div>
 								            </nav>
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								        </div>
 								        <figure>
 								          <div id="stream-container" class="image-container hidden">
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
+								            <div class="close close-rot-none" id="close-stream">×</div>
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								            <img id="stream" src="">
 								          </div>
 								        </figure>
 								      </div>
 								    </section>
 								  </body>
 								  <script>
 								  document.addEventListener('DOMContentLoaded', function (event) {
 								    var baseHost = document.location.origin;
 								    var streamURL = 'Undefined';
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    const settings = document.getElementById('sidebar')
 								    const waitSettings = document.getElementById('wait-settings')
 								    const lampGroup = document.getElementById('lamp-group')
 								    const rotate = document.getElementById('rotate')
 								    const view = document.getElementById('stream')
 								    const viewContainer = document.getElementById('stream-container')
 								    const stillButton = document.getElementById('get-still')
 								    const streamButton = document.getElementById('toggle-stream')
 								    const closeButton = document.getElementById('close-stream')
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
+								    const swapButton = document.getElementById('swap-viewer')
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    const hide = el => {
 								      el.classList.add('hidden')
 								    }
 								    const show = el => {
 								      el.classList.remove('hidden')
 								    }
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    const disable = el => {
 								      el.classList.add('disabled')
 								      el.disabled = true
 								    }
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    const enable = el => {
 								      el.classList.remove('disabled')
 								      el.disabled = false
 								    }
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    const updateValue = (el, value, updateRemote) => {
 								      updateRemote = updateRemote == null ? true : updateRemote
 								      let initialValue
 								      if (el.type === 'checkbox') {
 								        initialValue = el.checked
 								        value = !!value
 								        el.checked = value
 								      } else {
 								        initialValue = el.value
 								        el.value = value
 								      }
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								      if (updateRemote && initialValue !== value) {
 								        updateConfig(el);
 								      } else if(!updateRemote){
 								        if(el.id === "lamp"){
-												Strip trailing whitespace everywhere

											
										
										
											2022-03-09 15:40:00 +08:00
+								          if (value == -1) {
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								            hide(lampGroup)
 								          } else {
 								            show(lampGroup)
 								          }
 								        } else if(el.id === "cam_name"){
 								          window.document.title = value;
 								          console.log('Name set to: ' + value);
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
+								        } else if(el.id === "code_ver"){
 								          console.log('Firmware Build: ' + value);
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								        } else if(el.id === "rotate"){
 								          rotate.value = value;
 								          applyRotation();
 								        } else if(el.id === "stream_url"){
 								          streamURL = value;
-												Allow setting hostname and auto-led (#75)

Implement automatic Lamp illumination only while camera is active. (#72 thanks @TodWulff )
Allow Hostname setting (#74 thanks @mrmessy )
A couple of small fixes and some unnecessary debug output removed too.
											
										
										
											2020-10-26 07:04:21 +08:00
+								          streamButton.setAttribute("title", `Start the stream :: {streamURL}`);
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								          console.log('Stream URL set to:' + value);
-												Strip trailing whitespace everywhere

											
										
										
											2022-03-09 15:40:00 +08:00
+								        }
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								      }
 								    }
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Interactive slider improvements (#166)

Send slider (range input) updates immediately so that slider become more responsive.
Rate limit sending the slider updates since rapid moves could overwhelm the connection
Co-authored-by: Eric Fontaine <ericfontainejazz@gmail.com>
											
										
										
											2021-09-26 09:00:15 +08:00
+								    var rangeUpdateScheduled = false
 								    var latestRangeConfig
 								    function updateRangeConfig (el) {
 								      latestRangeConfig = el
 								      if (!rangeUpdateScheduled) {
 								        rangeUpdateScheduled = true;
 								        setTimeout(function(){
 								          rangeUpdateScheduled = false
 								          updateConfig(latestRangeConfig)
 								        }, 150);
 								      }
 								    }
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    function updateConfig (el) {
 								      let value
 								      switch (el.type) {
 								        case 'checkbox':
 								          value = el.checked ? 1 : 0
 								          break
 								        case 'range':
 								        case 'select-one':
 								          value = el.value
 								          break
 								        case 'button':
 								        case 'submit':
 								          value = '1'
 								          break
 								        default:
 								          return
 								      }
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								      const query = `${baseHost}/control?var=${el.id}&val=${value}`
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								      fetch(query)
 								        .then(response => {
 								          console.log(`request to ${query} finished, status: ${response.status}`)
 								        })
 								    }
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    document
 								      .querySelectorAll('.close')
 								      .forEach(el => {
 								        el.onclick = () => {
 								          hide(el.parentNode)
 								        }
 								      })
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    // read initial values
 								    fetch(`${baseHost}/status`)
 								      .then(function (response) {
 								        return response.json()
 								      })
 								      .then(function (state) {
 								        document
 								          .querySelectorAll('.action-setting')
 								          .forEach(el => {
 								            updateValue(el, state[el.id], false)
 								          })
 								        hide(waitSettings);
 								        show(settings);
 								        show(streamButton);
 								        startStream();
 								      })
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    // Put some helpful text on the 'Still' button
-												Allow setting hostname and auto-led (#75)

Implement automatic Lamp illumination only while camera is active. (#72 thanks @TodWulff )
Allow Hostname setting (#74 thanks @mrmessy )
A couple of small fixes and some unnecessary debug output removed too.
											
										
										
											2020-10-26 07:04:21 +08:00
+								    stillButton.setAttribute("title", `Capture a still image :: ${baseHost}/capture`);
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    const stopStream = () => {
 								      window.stop();
 								      streamButton.innerHTML = 'Start Stream';
-												Allow setting hostname and auto-led (#75)

Implement automatic Lamp illumination only while camera is active. (#72 thanks @TodWulff )
Allow Hostname setting (#74 thanks @mrmessy )
A couple of small fixes and some unnecessary debug output removed too.
											
										
										
											2020-10-26 07:04:21 +08:00
+								          streamButton.setAttribute("title", `Start the stream :: ${streamURL}`);
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								      hide(viewContainer);
 								    }
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    const startStream = () => {
 								      view.src = streamURL;
 								      view.scrollIntoView(false);
 								      streamButton.innerHTML = 'Stop Stream';
-												Allow setting hostname and auto-led (#75)

Implement automatic Lamp illumination only while camera is active. (#72 thanks @TodWulff )
Allow Hostname setting (#74 thanks @mrmessy )
A couple of small fixes and some unnecessary debug output removed too.
											
										
										
											2020-10-26 07:04:21 +08:00
+								      streamButton.setAttribute("title", `Stop the stream`);
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								      show(viewContainer);
 								    }
 								    const applyRotation = () => {
 								      rot = rotate.value;
 								      if (rot == -90) {
 								        viewContainer.style.transform = `rotate(-90deg)  translate(-100%)`;
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
+								        closeButton.classList.remove('close-rot-none');
 								        closeButton.classList.remove('close-rot-right');
 								        closeButton.classList.add('close-rot-left');
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								      } else if (rot == 90) {
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
+								        viewContainer.style.transform = `rotate(90deg) translate(0, -100%)`;
 								        closeButton.classList.remove('close-rot-left');
 								        closeButton.classList.remove('close-rot-none');
 								        closeButton.classList.add('close-rot-right');
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								      } else {
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
+								        viewContainer.style.transform = `rotate(0deg)`;
 								        closeButton.classList.remove('close-rot-left');
 								        closeButton.classList.remove('close-rot-right');
 								        closeButton.classList.add('close-rot-none');
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								      }
 								       console.log('Rotation ' + rot + ' applied');
 								   }
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    // Attach actions to controls
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    stillButton.onclick = () => {
 								      stopStream();
 								      view.src = `${baseHost}/capture?_cb=${Date.now()}`;
 								      view.scrollIntoView(false);
 								      show(viewContainer);
 								    }
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    closeButton.onclick = () => {
 								      stopStream();
 								      hide(viewContainer);
 								    }
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    streamButton.onclick = () => {
 								      const streamEnabled = streamButton.innerHTML === 'Stop Stream'
 								      if (streamEnabled) {
 								        stopStream();
 								      } else {
 								        startStream();
 								      }
 								    }
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    // Attach default on change action
 								    document
 								      .querySelectorAll('.action-setting')
 								      .forEach(el => {
 								        el.onchange = () => updateConfig(el)
 								      })
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Interactive slider improvements (#166)

Send slider (range input) updates immediately so that slider become more responsive.
Rate limit sending the slider updates since rapid moves could overwhelm the connection
Co-authored-by: Eric Fontaine <ericfontainejazz@gmail.com>
											
										
										
											2021-09-26 09:00:15 +08:00
+								    // Update range sliders as they are being moved
 								    document
 								      .querySelectorAll('input[type="range"]')
 								      .forEach(el => {
 								        el.oninput = () => updateRangeConfig(el)
 								      })
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								    // Custom actions
 								    // Detection and framesize
 								    rotate.onchange = () => {
 								      applyRotation();
 								      updateConfig(rotate);
 								    }
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
 								    framesize.onchange = () => {
 								      updateConfig(framesize)
 								    }
 								    swapButton.onclick = () => {
-												Change how we serve full and simple indexes, add portal page and logo to that (#68)

* Implement one URI for index pages, takes a parameter, ?view=full|simple|etc
* Add an access portal page, add a logo to that and the dump page.
* Fix default myconfig
* fix a stoopid, possibly disruptive bug that I introduced when unpacking html in my 1st commit
											
										
										
											2020-10-07 08:08:18 +08:00
+								      window.open('/?view=full','_self');
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
+								    }
 								  })
-												Mini viewer (#34)

fixes #25 
											
										
										
											2020-09-11 01:54:00 +08:00
+								  </script>
-												Change how we serve full and simple indexes, add portal page and logo to that (#68)

* Implement one URI for index pages, takes a parameter, ?view=full|simple|etc
* Add an access portal page, add a logo to that and the dump page.
* Fix default myconfig
* fix a stoopid, possibly disruptive bug that I introduced when unpacking html in my 1st commit
											
										
										
											2020-10-07 08:08:18 +08:00
+								</html>)=====";
-												move css into include file, and reduce whitespace in hosted site. (#36)

* Move all CSS into a include file, reduce whitespace count on primary html
* loading spinner, script tweaks, css fixes for image position/flow
* move camera index pages
* close button location needs to move as it rotates
											
										
										
											2020-09-13 21:28:38 +08:00
-												Change how we serve full and simple indexes, add portal page and logo to that (#68)

* Implement one URI for index pages, takes a parameter, ?view=full|simple|etc
* Add an access portal page, add a logo to that and the dump page.
* Fix default myconfig
* fix a stoopid, possibly disruptive bug that I introduced when unpacking html in my 1st commit
											
										
										
											2020-10-07 08:08:18 +08:00
+								size_t index_simple_html_len = sizeof(index_simple_html)-1;
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
 								/* Stream Viewer */
-												Portal page with hardcoded IP addresses (#69)


											
										
										
											2020-10-07 18:19:19 +08:00
+								const uint8_t streamviewer_html[] = R"=====(<!doctype html>
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								<html>
 								  <head>
 								    <meta charset="utf-8">
 								    <meta name="viewport" content="width=device-width,initial-scale=1">
 								    <title id="title">ESP32-CAM StreamViewer</title>
 								    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 								    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 								    <style>
 								      /* No stylesheet, define all style elements here */
 								      body {
 								        font-family: Arial,Helvetica,sans-serif;
 								        background: #181818;
 								        color: #EFEFEF;
 								        font-size: 16px;
 								        margin: 0px;
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								        overflow:hidden;
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								      }
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								      img {
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								        object-fit: contain;
 								        display: block;
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								        margin: 0px;
 								        padding: 0px;
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								        width: 100vw;
 								        height: 100vh;
 								      }
 								      .loader {
 								        border: 0.5em solid #f3f3f3;
 								        border-top: 0.5em solid #000000;
 								        border-radius: 50%;
 								        width: 1em;
 								        height: 1em;
 								        -webkit-animation: spin 2s linear infinite; /* Safari */
 								        animation: spin 2s linear infinite;
 								      }
 								      @-webkit-keyframes spin {   /* Safari */
 % { -webkit-transform: rotate(0deg); }
 % { -webkit-transform: rotate(360deg); }
 								      }
 								      @keyframes spin {
 % { transform: rotate(0deg); }
 % { transform: rotate(360deg); }
 								      }
 								    </style>
 								  </head>
 								  <body>
 								    <section class="main">
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								      <div id="wait-settings" style="float:left;" class="loader" title="Waiting for stream settings to load"></div>
 								      <div style="display: none;">
 								        <!-- Hide the next entries, they are present in the body so that we
 								             can pass settings to/from them for use in the scripting -->
 								        <div id="rotate" class="action-setting hidden">0</div>
 								        <div id="cam_name" class="action-setting hidden"></div>
 								        <div id="stream_url" class="action-setting hidden"></div>
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								      </div>
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								      <img id="stream" src="">
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								    </section>
 								  </body>
 								  <script>
 								  document.addEventListener('DOMContentLoaded', function (event) {
 								    var baseHost = document.location.origin;
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								    var streamURL = 'Undefined';
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
 								    const rotate = document.getElementById('rotate')
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								    const stream = document.getElementById('stream')
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								    const spinner = document.getElementById('wait-settings')
 								    const updateValue = (el, value, updateRemote) => {
 								      updateRemote = updateRemote == null ? true : updateRemote
 								      let initialValue
 								      if (el.type === 'checkbox') {
 								        initialValue = el.checked
 								        value = !!value
 								        el.checked = value
 								      } else {
 								        initialValue = el.value
 								        el.value = value
 								      }
 								      if (updateRemote && initialValue !== value) {
 								        updateConfig(el);
 								      } else if(!updateRemote){
 								        if(el.id === "cam_name"){
 								          window.document.title = value;
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								          stream.setAttribute("title", value + "\n(doubleclick for fullscreen)");
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								          console.log('Name set to: ' + value);
 								        } else if(el.id === "rotate"){
 								          rotate.value = value;
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								          console.log('Rotate recieved: ' + rotate.value);
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								        } else if(el.id === "stream_url"){
 								          streamURL = value;
 								          console.log('Stream URL set to:' + value);
-												Strip trailing whitespace everywhere

											
										
										
											2022-03-09 15:40:00 +08:00
+								        }
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								      }
 								    }
 								    // read initial values
 								    fetch(`${baseHost}/info`)
 								      .then(function (response) {
 								        return response.json()
 								      })
 								      .then(function (state) {
 								        document
 								          .querySelectorAll('.action-setting')
 								          .forEach(el => {
 								            updateValue(el, state[el.id], false)
 								          })
 								        spinner.style.display = `none`;
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								        applyRotation();
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								        startStream();
 								      })
 								    const startStream = () => {
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								      stream.src = streamURL;
 								      stream.style.display = `block`;
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								    }
 								    const applyRotation = () => {
 								      rot = rotate.value;
 								      if (rot == -90) {
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								        stream.style.transform = `rotate(-90deg)`;
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								      } else if (rot == 90) {
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								        stream.style.transform = `rotate(90deg)`;
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								      }
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								      console.log('Rotation ' + rot + ' applied');
 								    }
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
-												Stream view fix, Status dump (#63)

* Better treatment of rotated stream in stream viewer,
still not perfect but ok for now.
* Info Page: fix #56 
											
										
										
											2020-10-04 01:49:08 +08:00
+								    stream.ondblclick = () => {
 								      if (stream.requestFullscreen) {
 								        stream.requestFullscreen();
 								      } else if (stream.mozRequestFullScreen) { /* Firefox */
 								        stream.mozRequestFullScreen();
 								      } else if (stream.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
 								        stream.webkitRequestFullscreen();
 								      } else if (stream.msRequestFullscreen) { /* IE/Edge */
 								        stream.msRequestFullscreen();
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
+								      }
 								    }
 								  })
 								  </script>
-												Change how we serve full and simple indexes, add portal page and logo to that (#68)

* Implement one URI for index pages, takes a parameter, ?view=full|simple|etc
* Add an access portal page, add a logo to that and the dump page.
* Fix default myconfig
* fix a stoopid, possibly disruptive bug that I introduced when unpacking html in my 1st commit
											
										
										
											2020-10-07 08:08:18 +08:00
+								</html>)=====";
-												Streamviewer (#39)

* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
											
										
										
											2020-09-15 06:04:45 +08:00
-												Change how we serve full and simple indexes, add portal page and logo to that (#68)

* Implement one URI for index pages, takes a parameter, ?view=full|simple|etc
* Add an access portal page, add a logo to that and the dump page.
* Fix default myconfig
* fix a stoopid, possibly disruptive bug that I introduced when unpacking html in my 1st commit
											
										
										
											2020-10-07 08:08:18 +08:00
+								size_t streamviewer_html_len = sizeof(streamviewer_html)-1;
-												Strip trailing whitespace everywhere

											
										
										
											2022-03-09 15:40:00 +08:00
+								/* Captive Portal page
-												Portal page with hardcoded IP addresses (#69)


											
										
										
											2020-10-07 18:19:19 +08:00
+								   we replace the <> delimited strings with correct values as it is served */
-												Change how we serve full and simple indexes, add portal page and logo to that (#68)

* Implement one URI for index pages, takes a parameter, ?view=full|simple|etc
* Add an access portal page, add a logo to that and the dump page.
* Fix default myconfig
* fix a stoopid, possibly disruptive bug that I introduced when unpacking html in my 1st commit
											
										
										
											2020-10-07 08:08:18 +08:00
-												Portal page with hardcoded IP addresses (#69)


											
										
										
											2020-10-07 18:19:19 +08:00
+								const std::string portal_html = R"=====(<!doctype html>
 								<html>
 								  <head>
-												Change how we serve full and simple indexes, add portal page and logo to that (#68)

* Implement one URI for index pages, takes a parameter, ?view=full|simple|etc
* Add an access portal page, add a logo to that and the dump page.
* Fix default myconfig
* fix a stoopid, possibly disruptive bug that I introduced when unpacking html in my 1st commit
											
										
										
											2020-10-07 08:08:18 +08:00
+								    <meta charset="utf-8">
 								    <meta name="viewport" content="width=device-width,initial-scale=1">
-												Portal page with hardcoded IP addresses (#69)


											
										
										
											2020-10-07 18:19:19 +08:00
+								    <title id="title"><CAMNAME> - portal</title>
 								    <link rel="icon" type="image/png" sizes="32x32" href="<APPURL>favicon-32x32.png">
 								    <link rel="icon" type="image/png" sizes="16x16" href="<APPURL>favicon-16x16.png">
 								    <link rel="stylesheet" type="text/css" href="<APPURL>style.css">
 								  </head>
 								  <body style="text-align: center;">
 								    <img src="<APPURL>logo.svg" style="position: relative; float: right;">
 								    <h1><CAMNAME> - access portal</h1>
 								    <div class="input-group" style="margin: auto; width: max-content;">
 								      <a href="<APPURL>?view=simple" title="Click here for a simple view with minimum control" style="text-decoration: none;" target="_blank">
 								      <button>Simple Viewer</button></a>
 								      <a href="<APPURL>?view=full" title="Click here for the main camera page with full controls" style="text-decoration: none;" target="_blank">
 								      <button>Full Viewer</button></a>
 								      <a href="<STREAMURL>view" title="Click here for the dedicated stream viewer" style="text-decoration: none;" target="_blank">
 								      <button>Stream Viewer</button></a>
-												Change how we serve full and simple indexes, add portal page and logo to that (#68)

* Implement one URI for index pages, takes a parameter, ?view=full|simple|etc
* Add an access portal page, add a logo to that and the dump page.
* Fix default myconfig
* fix a stoopid, possibly disruptive bug that I introduced when unpacking html in my 1st commit
											
										
										
											2020-10-07 08:08:18 +08:00
+								    </div>
 								    <hr>
-												Portal page with hardcoded IP addresses (#69)


											
										
										
											2020-10-07 18:19:19 +08:00
+								    <a href="<APPURL>dump" title="Information dump page" target="_blank">Camera Details</a><br>
 								  </body>
 								</html>)=====";
-												Ui timers (#78)

Adds a 1-minute auto-refresh to the dump page
When a reboot is triggered from the UI better feedback is given and a timer started to refresh the page after 30s
The reboot is now done by a watchdog timer to ensure a hard reboot.
Error page:
- Reboots seem to occasionally leave the camera hardware in a bad state (I2C comms failed, it's a common problem with no real solutions yet)
- I now catch these errors and still start the web server; giving an error page that advises a hard restart (power off/on). But the esp module will also reboot once every minute since these errors also tend to spontaneously clear after a while.
											
										
										
											2020-11-21 00:05:00 +08:00
-												Strip trailing whitespace everywhere

											
										
										
											2022-03-09 15:40:00 +08:00
+								/* Error page
-												Ui timers (#78)

Adds a 1-minute auto-refresh to the dump page
When a reboot is triggered from the UI better feedback is given and a timer started to refresh the page after 30s
The reboot is now done by a watchdog timer to ensure a hard reboot.
Error page:
- Reboots seem to occasionally leave the camera hardware in a bad state (I2C comms failed, it's a common problem with no real solutions yet)
- I now catch these errors and still start the web server; giving an error page that advises a hard restart (power off/on). But the esp module will also reboot once every minute since these errors also tend to spontaneously clear after a while.
											
										
										
											2020-11-21 00:05:00 +08:00
+								   we replace the <> delimited strings with correct values as it is served */
 								const std::string error_html = R"=====(<!doctype html>
 								<html>
 								  <head>
 								    <meta charset="utf-8">
 								    <meta name="viewport" content="width=device-width,initial-scale=1">
 								    <title id="title"><CAMNAME> - Error</title>
 								    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 								    <link rel="ico\" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 								    <link rel="stylesheet" type="text/css" href="<APPURL>style.css">
 								  </head>
 								  <body style="text-align: center;">
 								    <img src="<APPURL>logo.svg" style="position: relative; float: right;">
 								    <h1><CAMNAME></h1>
 								    <ERRORTEXT>
 								  </body>
 								  <script>
 								    setTimeout(function(){
 								      location.replace(document.URL);
 								    }, 60000);
 								  </script>
 								</html>)=====";