esp32camweb


<!DOCTYPE html>
<html lang="en">

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      body { text-align: center; }
      .vert { margin-bottom: 10%;}
      .hori { margin-bottom: 0%; }
      .slider { width: 300px; }
    </style>
  </head>

  <body>
    <div>
      <img src="/pic" id="picimg" width="70%">
    </div>
    <div>
      <p>
        <button id="reloadBtn" onclick="location.reload();">Aktualisieren</button>
        <button id="srcBtn" onclick="location.href='?show=video';">Video-Ansicht</button>
        <button id="flashlightBtn" onclick="toggleFlashlight()">Blitzlicht anschalten</button>
        <input type="range" min="180" max="0" value="90" class="slider" id="servoSlider" onchange="SetServoPos(this.value)" />
      </p>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>

        var slider    = document.getElementById("servoSlider");
        var picimg    = document.getElementById("picimg");
        var reloadBtn = document.getElementById("reloadBtn");
        var srcBtn    = document.getElementById("srcBtn");
        var flashlightBtn = document.getElementById("flashlightBtn");
        var flashlightState = 'aus';

        $.ajaxSetup({
          timeout: 1000
        });

        function ajaxErrorHandler(err) {
          // TODO: implement some error handling
        }

        function GetServoPos(){
          $.get('/get?item=servopos')
            .done(function(data) {
              slider.value = data;
            })
            .fail(ajaxErrorHandler);
        }

        function GetFlashlightState(){
          $.get('/get?item=flashlight')
            .done(function(data) {
              flashlightState = data;
              flashlightBtn.innerText = "Blitzlicht " + (data === 'an' ? 'ausschalten' : 'anschalten');
            })
            .fail(ajaxErrorHandler);
        }

        function toggleFlashlight() {
          $.post('/set', 'flashlight=' + (flashlightState === 'an' ? '0' : '1'))
           .fail(ajaxErrorHandler);
        }

        slider.oninput = function() {
          slider.value = this.value;
        }

        function SetServoPos(pos) {
          $.post("/set","servopos=" + pos)
            .fail(ajaxErrorHandler);
        }

        GetServoPos();
        GetFlashlightState();

        var queryStr = window.location.search;
        console.log(queryStr);
        if (queryStr === "?show=video") {
          reloadBtn.style.display = "none";
          // Warum mit FQDN und nicht einfach "/vid" ?
          picimg.src              = "http://"+window.location.hostname+":81/vid";
          srcBtn.innerHTML        = "Bild-Ansicht";
          srcBtn.setAttribute("onClick", "location.href='?show=picture';");
        }

        if (queryStr === "?show=picture") {
          reloadBtn.style.display = "inline";
          picimg.src              = "/pic";
          srcBtn.innerHTML        = "Video-Ansicht";
          srcBtn.setAttribute("onClick", "location.href='?show=video';");
        }

    </script>
  </body>

</html>