62 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			62 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!DOCTYPE html>
 | 
						|
<head>
 | 
						|
   <title>RPi Web Server</title>
 | 
						|
   <!-- Latest compiled and minified CSS -->
 | 
						|
   <link rel="stylesheet" href="/static/css/bootstrap.min.css">
 | 
						|
   <!-- Latest compiled and minified JavaScript -->
 | 
						|
   <script src="/static/js/jquery-3.6.0.min.js"></script>
 | 
						|
   <script src="/static/js/bootstrap.min.js"></script>
 | 
						|
   <script type="text/javascript">
 | 
						|
      $(function() {
 | 
						|
        $('#KameraEichen').on('click', function(e) {
 | 
						|
          e.preventDefault()
 | 
						|
          $.getJSON('/eichen',
 | 
						|
              function(data) {
 | 
						|
            console.log(data);
 | 
						|
          });
 | 
						|
          return false;
 | 
						|
        });
 | 
						|
      });
 | 
						|
   </script>
 | 
						|
</head>
 | 
						|
 | 
						|
<body>
 | 
						|
   <h1>RPi Web Server</h1>
 | 
						|
   {% for pin in pins %}
 | 
						|
   <h2>{{ pins[pin].name }}
 | 
						|
   {% if pins[pin].state == 0 %}
 | 
						|
      ist gerade <strong>an</strong></h2><div class="row"><div class="col-md-2">
 | 
						|
      <a href="/{{pin}}/off" class="btn btn-block btn-lg btn-default" role="button">Turn off</a></div></div>
 | 
						|
   {% else %}
 | 
						|
      ist gerade <strong>aus</strong></h2><div class="row"><div class="col-md-2">
 | 
						|
      <a href="/{{pin}}/on" class="btn btn-block btn-lg btn-primary" role="button">Turn on</a></div></div>
 | 
						|
   {% endif %}
 | 
						|
   {% endfor %}
 | 
						|
   {% for pin in pins_in %}
 | 
						|
    <h3>{{ pins_in[pin].name }}
 | 
						|
    {% if pins_in[pin].state == 0 %}
 | 
						|
        ist gerade <strong>an</strong></h3>
 | 
						|
    {% else %}
 | 
						|
        ist gerade <strong>aus</strong></h3>
 | 
						|
    {% endif %}
 | 
						|
   {% endfor %}
 | 
						|
   <div class="row">
 | 
						|
      <div class="col-md-2">
 | 
						|
         <button id="KameraEichen" class="btn btn-block btn-lg btn-default">Kamera Eichen</button>
 | 
						|
      </div>
 | 
						|
   </div>
 | 
						|
   <div class="row">
 | 
						|
      <div class="col-md-2">
 | 
						|
         <div>Position, Motor1: {{ pos_1 }}</div>
 | 
						|
      </div>
 | 
						|
      <div class="col-md-2">
 | 
						|
         <div>Position, Motor2: {{ pos_2 }}</div>
 | 
						|
      </div>
 | 
						|
      <div class="col-md-2">
 | 
						|
         <div>Position, Motor3: {{ pos_3 }}</div>
 | 
						|
      </div>
 | 
						|
   </div>
 | 
						|
 | 
						|
</body>
 | 
						|
</html>
 |