|  | @@ -0,0 +1,717 @@
 | 
	
		
			
				|  |  | +<!-- 主操作頁面(im3.php)的外觀設定 -->
 | 
	
		
			
				|  |  | +<!DOCTYPE html>
 | 
	
		
			
				|  |  | +<html>
 | 
	
		
			
				|  |  | +	<head>
 | 
	
		
			
				|  |  | +		<title>Welcome to SkyAI</title>
 | 
	
		
			
				|  |  | +		<meta charset="utf-8">
 | 
	
		
			
				|  |  | +		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
	
		
			
				|  |  | +		<!--<meta http-equiv="refresh" content="3">-->
 | 
	
		
			
				|  |  | +		<meta http-equiv="pragma" content="no-cache">
 | 
	
		
			
				|  |  | +		<meta http-equiv="Cache-Control" CONTENT="no-cache, must-revalidate"> 
 | 
	
		
			
				|  |  | +		<meta http-equiv="expires" content="365 days">
 | 
	
		
			
				|  |  | +		<script src="../static/js/jquery.min.js"></script>
 | 
	
		
			
				|  |  | +		<link rel="stylesheet" href="../static/css/bootstrap.min.css">
 | 
	
		
			
				|  |  | +		<script src="../static/js/bootstrap.min.js"></script>
 | 
	
		
			
				|  |  | +		<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.1/bootstrap-slider.min.js"></script>
 | 
	
		
			
				|  |  | +		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.1/css/bootstrap-slider.min.css">
 | 
	
		
			
				|  |  | +		<link rel="stylesheet" href="../static/css/generalstyle.css?<?php echo rand(0,512);?>">
 | 
	
		
			
				|  |  | +		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 | 
	
		
			
				|  |  | +		<meta name="viewport" content="width=device-width, initial-scale=1">
 | 
	
		
			
				|  |  | +		<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		<style>
 | 
	
		
			
				|  |  | +			
 | 
	
		
			
				|  |  | +			.slider-selection {
 | 
	
		
			
				|  |  | +				background: #BABABA;
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +			.slider.slider-horizontal{
 | 
	
		
			
				|  |  | +				width: 90%;
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +			#setlight>div>div{
 | 
	
		
			
				|  |  | +				display:inline-block;
 | 
	
		
			
				|  |  | +				vertical-align:middle;
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +			
 | 
	
		
			
				|  |  | +			img {
 | 
	
		
			
				|  |  | +			display: block;
 | 
	
		
			
				|  |  | +			margin-left: auto;
 | 
	
		
			
				|  |  | +			margin-right: auto;
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +			.img1 {
 | 
	
		
			
				|  |  | +			display: block;
 | 
	
		
			
				|  |  | +			margin-left: auto;
 | 
	
		
			
				|  |  | +			margin-right: auto;
 | 
	
		
			
				|  |  | +			margin: auto;
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			.detail{
 | 
	
		
			
				|  |  | +			font-family: Microsoft JhengHei;
 | 
	
		
			
				|  |  | +			border-radius: 100px;
 | 
	
		
			
				|  |  | +			background-color: #008CBA;
 | 
	
		
			
				|  |  | +			border: none;
 | 
	
		
			
				|  |  | +			color: white;
 | 
	
		
			
				|  |  | +			padding: 5px 12px;
 | 
	
		
			
				|  |  | +			text-align: center;
 | 
	
		
			
				|  |  | +			text-decoration: none;
 | 
	
		
			
				|  |  | +			display: inline-block;
 | 
	
		
			
				|  |  | +			font-size: 1.4em;
 | 
	
		
			
				|  |  | +			margin: 4px 2px;
 | 
	
		
			
				|  |  | +			cursor: pointer;
 | 
	
		
			
				|  |  | +			transition-duration: 0.4s;
 | 
	
		
			
				|  |  | +			border: 3px solid white;
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.detail:hover {
 | 
	
		
			
				|  |  | +			background-color: white; 
 | 
	
		
			
				|  |  | +			color: black; 
 | 
	
		
			
				|  |  | +			border: 3px solid black;
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.title{
 | 
	
		
			
				|  |  | +			font-family: Microsoft JhengHei;
 | 
	
		
			
				|  |  | +			border-radius: 100px;
 | 
	
		
			
				|  |  | +			background-color: #f2f2f2;
 | 
	
		
			
				|  |  | +			border: none;
 | 
	
		
			
				|  |  | +			color: black;
 | 
	
		
			
				|  |  | +			padding: 10px 32px;
 | 
	
		
			
				|  |  | +			font-size: 2em;
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.font {
 | 
	
		
			
				|  |  | +			color: white;
 | 
	
		
			
				|  |  | +			font-size: 1.4em;
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.font:hover {
 | 
	
		
			
				|  |  | +			color: black;
 | 
	
		
			
				|  |  | +			font-size: 1.5em;
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.sw_number {
 | 
	
		
			
				|  |  | +			background-color: white;
 | 
	
		
			
				|  |  | +			width:40px;font-size:1.5em;border:1px;border-radius: 100px;
 | 
	
		
			
				|  |  | +			border: 3px solid lightgray;
 | 
	
		
			
				|  |  | +			color: #337ab7;
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.disabled {
 | 
	
		
			
				|  |  | +			width:40px;font-size:1.5em;border:1px;border-radius: 100px;
 | 
	
		
			
				|  |  | +			border: 3px solid lightgray;
 | 
	
		
			
				|  |  | +			background-color:#e0e0e0;
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.sw_number:hover {
 | 
	
		
			
				|  |  | +			width:40px;
 | 
	
		
			
				|  |  | +			font-size:1.5em;
 | 
	
		
			
				|  |  | +			border:1px;
 | 
	
		
			
				|  |  | +			border-radius: 100px;
 | 
	
		
			
				|  |  | +			border: 3px solid lightgreen;
 | 
	
		
			
				|  |  | +			background-color: white;
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.disabled:hover {
 | 
	
		
			
				|  |  | +			width:40px;
 | 
	
		
			
				|  |  | +			font-size:1.5em;
 | 
	
		
			
				|  |  | +			border:1px;
 | 
	
		
			
				|  |  | +			border-radius: 100px;
 | 
	
		
			
				|  |  | +			border: 3px solid lightgray;
 | 
	
		
			
				|  |  | +			background-color: #e0e0e0;
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.choosed {
 | 
	
		
			
				|  |  | +			width:40px;
 | 
	
		
			
				|  |  | +			font-size:1.5em;
 | 
	
		
			
				|  |  | +			border:1px;
 | 
	
		
			
				|  |  | +			border-radius: 100px;
 | 
	
		
			
				|  |  | +			border: 3px solid red;
 | 
	
		
			
				|  |  | +			background-color: white; 
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		.choose_nr {
 | 
	
		
			
				|  |  | +			font-family: Microsoft JhengHei;
 | 
	
		
			
				|  |  | +			color: #333333;
 | 
	
		
			
				|  |  | +			font-size: 1.7em;
 | 
	
		
			
				|  |  | +			/*text-shadow: 1px 2px black;*/
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		button {
 | 
	
		
			
				|  |  | +			background-color: white;
 | 
	
		
			
				|  |  | +			border-radius:10px;
 | 
	
		
			
				|  |  | +			border: 3px solid lightgray;
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +		
 | 
	
		
			
				|  |  | +		.stn{font-size:20px;background-color: white;border-radius:10px;border: 3px solid lightgray;background-color:white;}
 | 
	
		
			
				|  |  | +		.atn{font-size:20px;background-color:#25AD87;border-radius:10px;}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		.stl{background-color:#DDDDDD;}
 | 
	
		
			
				|  |  | +		.atl{background-color:white;}	
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		}		
 | 
	
		
			
				|  |  | +		</style>
 | 
	
		
			
				|  |  | +		<!--js 特效樣式設定-->
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		<script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            var zoom_now = 0;
 | 
	
		
			
				|  |  | +            var node_id = {{params.tid}};
 | 
	
		
			
				|  |  | +            if(node_id < 10){
 | 
	
		
			
				|  |  | +               	node_id = 'GTW00900200' + node_id;
 | 
	
		
			
				|  |  | +            }else{
 | 
	
		
			
				|  |  | +				node_id = 'GTW0090020' + node_id;
 | 
	
		
			
				|  |  | +            };
 | 
	
		
			
				|  |  | +            var imgPath = "../static/img/PV.jpg";
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            //控制拍攝預覽照開關
 | 
	
		
			
				|  |  | +            var setSwh = 0;
 | 
	
		
			
				|  |  | +            var panelSwh = 0;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            //從後端讀取資料,顯示已設定的方位
 | 
	
		
			
				|  |  | +			$(function(){
 | 
	
		
			
				|  |  | +				{% if params.mode %}
 | 
	
		
			
				|  |  | +					{% for j in params.mode %}
 | 
	
		
			
				|  |  | +						if({{j}} != 1){
 | 
	
		
			
				|  |  | +						    $("input[name=ori" + {{j}} + "]").toggleClass('disabled');
 | 
	
		
			
				|  |  | +						};
 | 
	
		
			
				|  |  | +					{% endfor %}
 | 
	
		
			
				|  |  | +				{% endif %}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				//顯示小兵現在位置以及最新照片
 | 
	
		
			
				|  |  | +                $(".zoom").text('{{params.begin_zoom}}');
 | 
	
		
			
				|  |  | +                $(".pan-angle").text('{{params.begin_pan_angle}}');
 | 
	
		
			
				|  |  | +				$(".tilt-angle").text('{{params.begin_tilt_angle}}');
 | 
	
		
			
				|  |  | +				imgPath = '{{params.begin_imgPath}}';
 | 
	
		
			
				|  |  | +				$("#img3").attr('src','{{params.begin_imgPath}}');
 | 
	
		
			
				|  |  | +			});
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            //倍率函數
 | 
	
		
			
				|  |  | +			function Zoom(evt){
 | 
	
		
			
				|  |  | +				var name = evt.getAttribute('name');
 | 
	
		
			
				|  |  | +				var zoom = $(".zoom");
 | 
	
		
			
				|  |  | +				var zoom_num = 0;
 | 
	
		
			
				|  |  | +				var tilt = $(".tilt-angle");
 | 
	
		
			
				|  |  | +				var pan = $(".pan-angle");
 | 
	
		
			
				|  |  | +				var tilt_history = $(".tilt-angle-history");
 | 
	
		
			
				|  |  | +				var pan_history = $(".pan-angle-history");
 | 
	
		
			
				|  |  | +				var zoom_history = $(".zoom-history");
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				if(name == 'zoom0'){
 | 
	
		
			
				|  |  | +					zoom.text('0');
 | 
	
		
			
				|  |  | +					zoom_num = 0;
 | 
	
		
			
				|  |  | +                    var zoom_diff = (0 - zoom_now).toString();
 | 
	
		
			
				|  |  | +                    zoom_now = 0;
 | 
	
		
			
				|  |  | +					var command = {"node_id":node_id, "command":"a016", "Zoom":zoom_diff};
 | 
	
		
			
				|  |  | +					$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +					}, 'text');
 | 
	
		
			
				|  |  | +				}else if(name == 'zoom1'){
 | 
	
		
			
				|  |  | +					zoom.text('1');
 | 
	
		
			
				|  |  | +					zoom_num = 1;
 | 
	
		
			
				|  |  | +					var zoom_diff = (1 - zoom_now).toString();
 | 
	
		
			
				|  |  | +					zoom_now = 1;
 | 
	
		
			
				|  |  | +					var command = {"node_id":node_id, "command":"a016", "Zoom":zoom_diff};
 | 
	
		
			
				|  |  | +					$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +					}, 'text');
 | 
	
		
			
				|  |  | +				}else if(name == 'zoom2'){
 | 
	
		
			
				|  |  | +					zoom.text('2');
 | 
	
		
			
				|  |  | +					zoom_num = 2;
 | 
	
		
			
				|  |  | +					var zoom_diff = (2 - zoom_now).toString();
 | 
	
		
			
				|  |  | +					zoom_now = 2;
 | 
	
		
			
				|  |  | +					var command = {"node_id":node_id, "command":"a016", "Zoom":zoom_diff};
 | 
	
		
			
				|  |  | +					$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +					}, 'text');
 | 
	
		
			
				|  |  | +				}else if(name == 'zoom3'){
 | 
	
		
			
				|  |  | +					zoom.text('3');
 | 
	
		
			
				|  |  | +					zoom_num = 3;
 | 
	
		
			
				|  |  | +					var zoom_diff = (3 - zoom_now).toString();
 | 
	
		
			
				|  |  | +					zoom_now = 3;
 | 
	
		
			
				|  |  | +					var command = {"node_id":node_id, "command":"a016", "Zoom":zoom_diff};
 | 
	
		
			
				|  |  | +					$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +					}, 'text');
 | 
	
		
			
				|  |  | +				}else if(name == 'zoom4'){
 | 
	
		
			
				|  |  | +					zoom.text('4');
 | 
	
		
			
				|  |  | +					zoom_num = 4;
 | 
	
		
			
				|  |  | +					var zoom_diff = (4 - zoom_now).toString();
 | 
	
		
			
				|  |  | +					zoom_now = 4;
 | 
	
		
			
				|  |  | +					var command = {"node_id":node_id, "command":"a016", "Zoom":zoom_diff};
 | 
	
		
			
				|  |  | +					$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +					}, 'text');
 | 
	
		
			
				|  |  | +				}else{
 | 
	
		
			
				|  |  | +					zoom.text('5');
 | 
	
		
			
				|  |  | +					zoom_num = 5;
 | 
	
		
			
				|  |  | +					var zoom_diff = (5 - zoom_now).toString();
 | 
	
		
			
				|  |  | +					zoom_now = 5;
 | 
	
		
			
				|  |  | +					var command = {"node_id":node_id, "command":"a016", "Zoom":zoom_diff};
 | 
	
		
			
				|  |  | +					$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +					}, 'text');
 | 
	
		
			
				|  |  | +				};
 | 
	
		
			
				|  |  | +				$("input[name=zoom]").val(zoom_num);
 | 
	
		
			
				|  |  | +				var pan_num = pan.text();
 | 
	
		
			
				|  |  | +				var tilt_num = tilt.text();
 | 
	
		
			
				|  |  | +				var zoom_num = zoom.text();
 | 
	
		
			
				|  |  | +				console.log(zoom_num);
 | 
	
		
			
				|  |  | +				tilt_history.text(tilt_num);
 | 
	
		
			
				|  |  | +				pan_history.text(pan_num);
 | 
	
		
			
				|  |  | +				zoom_history.text(zoom_num);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				panelSwh = 1;
 | 
	
		
			
				|  |  | +			};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			//角度函數
 | 
	
		
			
				|  |  | +			function Angle(evt){
 | 
	
		
			
				|  |  | +				var name = evt.getAttribute('name');
 | 
	
		
			
				|  |  | +				var tilt = $(".tilt-angle");
 | 
	
		
			
				|  |  | +				var pan = $(".pan-angle");
 | 
	
		
			
				|  |  | +				var zoom = $(".zoom");
 | 
	
		
			
				|  |  | +				var tilt_history = $(".tilt-angle-history");
 | 
	
		
			
				|  |  | +				var pan_history = $(".pan-angle-history");
 | 
	
		
			
				|  |  | +				var zoom_history = $(".zoom-history");
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				if(name == 'up'){
 | 
	
		
			
				|  |  | +					var num = Number(tilt.text()) + 5;
 | 
	
		
			
				|  |  | +					if(num > 90){
 | 
	
		
			
				|  |  | +						num = 90;
 | 
	
		
			
				|  |  | +					};
 | 
	
		
			
				|  |  | +					num = num.toString();
 | 
	
		
			
				|  |  | +					tilt.text(num);
 | 
	
		
			
				|  |  | +					var command = {"node_id":node_id, "command":"a014", "Tilt":tilt.text()};
 | 
	
		
			
				|  |  | +					$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +					}, 'text');
 | 
	
		
			
				|  |  | +				}else if(name == 'down'){
 | 
	
		
			
				|  |  | +					var num = Number(tilt.text()) - 5;
 | 
	
		
			
				|  |  | +					if(num < -25){
 | 
	
		
			
				|  |  | +						num = -25;
 | 
	
		
			
				|  |  | +					};
 | 
	
		
			
				|  |  | +					num = num.toString();
 | 
	
		
			
				|  |  | +					tilt.text(num);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					var command = {"node_id":node_id, "command":"a014", "Tilt":tilt.text()};
 | 
	
		
			
				|  |  | +					$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +					}, 'text');
 | 
	
		
			
				|  |  | +				}else if(name == 'left'){
 | 
	
		
			
				|  |  | +					var num = Number(pan.text()) - 5;
 | 
	
		
			
				|  |  | +					if(num == -5){
 | 
	
		
			
				|  |  | +						num = 355;
 | 
	
		
			
				|  |  | +					};
 | 
	
		
			
				|  |  | +					num = num.toString();
 | 
	
		
			
				|  |  | +					pan.text(num);
 | 
	
		
			
				|  |  | +					var command = {"node_id":node_id, "command":"a012", "Pan":pan.text()};
 | 
	
		
			
				|  |  | +					$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +					}, 'text');
 | 
	
		
			
				|  |  | +				}else if(name == 'right'){
 | 
	
		
			
				|  |  | +					var num = Number(pan.text()) + 5;
 | 
	
		
			
				|  |  | +					if(num == 360){
 | 
	
		
			
				|  |  | +						num = 0;
 | 
	
		
			
				|  |  | +					};
 | 
	
		
			
				|  |  | +					num = num.toString();
 | 
	
		
			
				|  |  | +					pan.text(num);
 | 
	
		
			
				|  |  | +					var command = {"node_id":node_id, "command":"a012", "Pan":pan.text()};
 | 
	
		
			
				|  |  | +					$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +					}, 'text');
 | 
	
		
			
				|  |  | +				}else{
 | 
	
		
			
				|  |  | +					tilt.text("0");
 | 
	
		
			
				|  |  | +					pan.text("0");
 | 
	
		
			
				|  |  | +					zoom.text("0");
 | 
	
		
			
				|  |  | +					var command = {"node_id":node_id, "command":"a052"};
 | 
	
		
			
				|  |  | +					$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +					}, 'text');
 | 
	
		
			
				|  |  | +				};
 | 
	
		
			
				|  |  | +				$("input[name=tilt-angle]").val(tilt.text());
 | 
	
		
			
				|  |  | +				$("input[name=pan-angle]").val(pan.text());
 | 
	
		
			
				|  |  | +				var pan_num = pan.text();
 | 
	
		
			
				|  |  | +				var tilt_num = tilt.text();
 | 
	
		
			
				|  |  | +				var zoom_num = zoom.text();
 | 
	
		
			
				|  |  | +				tilt_history.text(tilt_num);
 | 
	
		
			
				|  |  | +				pan_history.text(pan_num);
 | 
	
		
			
				|  |  | +				zoom_history.text(zoom_num);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				panelSwh = 1;
 | 
	
		
			
				|  |  | +			};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			//手動拍攝函數
 | 
	
		
			
				|  |  | +			function Photo() {
 | 
	
		
			
				|  |  | +			    var date = new Date();
 | 
	
		
			
				|  |  | +			    var year = (date.getFullYear()).toString();
 | 
	
		
			
				|  |  | +			    var month = date.getMonth() + 1;
 | 
	
		
			
				|  |  | +			    var day = (date.getDate()).toString();
 | 
	
		
			
				|  |  | +			    var hour = date.getHours();
 | 
	
		
			
				|  |  | +			    var min = (date.getMinutes()).toString();
 | 
	
		
			
				|  |  | +			    if(month < 10){
 | 
	
		
			
				|  |  | +			        month = "0" + month;
 | 
	
		
			
				|  |  | +                };
 | 
	
		
			
				|  |  | +                if(day < 10){
 | 
	
		
			
				|  |  | +			        day = "0" + day;
 | 
	
		
			
				|  |  | +                };
 | 
	
		
			
				|  |  | +			    if(hour < 10){
 | 
	
		
			
				|  |  | +			      hour = "0" + hour;
 | 
	
		
			
				|  |  | +                };
 | 
	
		
			
				|  |  | +                if(min < 10){
 | 
	
		
			
				|  |  | +			      min = "0" + min;
 | 
	
		
			
				|  |  | +                };
 | 
	
		
			
				|  |  | +                var filename = year + "-" + month + "-" + day + "_" + hour + "." + min;
 | 
	
		
			
				|  |  | +                var command = {"node_id":node_id, "command": "a051", "position":"0", "time":"1", "filename":filename};
 | 
	
		
			
				|  |  | +                $.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +                }, 'text');
 | 
	
		
			
				|  |  | +            };
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			//從後端讀資料,顯示方位的設定
 | 
	
		
			
				|  |  | +			function Orientation(evt){
 | 
	
		
			
				|  |  | +				var val = evt.getAttribute('value');
 | 
	
		
			
				|  |  | +				var set = $(".set-span");
 | 
	
		
			
				|  |  | +				set.text(val);
 | 
	
		
			
				|  |  | +				var nr = {{params.tid}};
 | 
	
		
			
				|  |  | +				nr = nr.toString();
 | 
	
		
			
				|  |  | +				var mode = $(".set-span").text();
 | 
	
		
			
				|  |  | +				var json = {"nr":nr, "mode":mode};
 | 
	
		
			
				|  |  | +				$.get('/ashoot_setting/' + nr, json, function(resText){
 | 
	
		
			
				|  |  | +					$("input[name=ori_name]").val(resText.name);
 | 
	
		
			
				|  |  | +					$(".tilt-angle-history").text(resText.tilt_angle);
 | 
	
		
			
				|  |  | +					$(".pan-angle-history").text(resText.pan_angle);
 | 
	
		
			
				|  |  | +					$(".zoom-history").text(resText.zoom);
 | 
	
		
			
				|  |  | +					$("input[name=m_s1]").val(resText.time1.substring(0,2));
 | 
	
		
			
				|  |  | +					$("input[name=d_s1]").val(resText.time1.substring(2,4));
 | 
	
		
			
				|  |  | +					$("input[name=h_s1]").val(resText.time1.substring(4,6));
 | 
	
		
			
				|  |  | +					$("input[name=min_s1]").val(resText.time1.substring(6,8));
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					$("input[name=m_s2]").val(resText.time2.substring(0,2));
 | 
	
		
			
				|  |  | +					$("input[name=d_s2]").val(resText.time2.substring(2,4));
 | 
	
		
			
				|  |  | +					$("input[name=h_s2]").val(resText.time2.substring(4,6));
 | 
	
		
			
				|  |  | +					$("input[name=min_s2]").val(resText.time2.substring(6,8));
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					$("input[name=m_s3]").val(resText.time3.substring(0,2));
 | 
	
		
			
				|  |  | +					$("input[name=d_s3]").val(resText.time3.substring(2,4));
 | 
	
		
			
				|  |  | +					$("input[name=h_s3]").val(resText.time3.substring(4,6));
 | 
	
		
			
				|  |  | +					$("input[name=min_s3]").val(resText.time3.substring(6,8));
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					$("input[name=m_s4]").val(resText.time4.substring(0,2));
 | 
	
		
			
				|  |  | +					$("input[name=d_s4]").val(resText.time4.substring(2,4));
 | 
	
		
			
				|  |  | +					$("input[name=h_s4]").val(resText.time4.substring(4,6));
 | 
	
		
			
				|  |  | +					$("input[name=min_s4]").val(resText.time4.substring(6,8));
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					$("input[name=m_s5]").val(resText.time5.substring(0,2));
 | 
	
		
			
				|  |  | +					$("input[name=d_s5]").val(resText.time5.substring(2,4));
 | 
	
		
			
				|  |  | +					$("input[name=h_s5]").val(resText.time5.substring(4,6));
 | 
	
		
			
				|  |  | +					$("input[name=min_s5]").val(resText.time5.substring(6,8));
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					$("input[name=m_s6]").val(resText.time6.substring(0,2));
 | 
	
		
			
				|  |  | +					$("input[name=d_s6]").val(resText.time6.substring(2,4));
 | 
	
		
			
				|  |  | +					$("input[name=h_s6]").val(resText.time6.substring(4,6));
 | 
	
		
			
				|  |  | +					$("input[name=min_s6]").val(resText.time6.substring(6,8));
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					$("input[name=m_s7]").val(resText.time7.substring(0,2));
 | 
	
		
			
				|  |  | +					$("input[name=d_s7]").val(resText.time7.substring(2,4));
 | 
	
		
			
				|  |  | +					$("input[name=h_s7]").val(resText.time7.substring(4,6));
 | 
	
		
			
				|  |  | +					$("input[name=min_s7]").val(resText.time7.substring(6,8));
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					$("input[name=m_s8]").val(resText.time8.substring(0,2));
 | 
	
		
			
				|  |  | +					$("input[name=d_s8]").val(resText.time8.substring(2,4));
 | 
	
		
			
				|  |  | +					$("input[name=h_s8]").val(resText.time8.substring(4,6));
 | 
	
		
			
				|  |  | +					$("input[name=min_s8]").val(resText.time8.substring(6,8));
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				}, 'json');
 | 
	
		
			
				|  |  | +			};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			//開啟設定
 | 
	
		
			
				|  |  | +			function Bts(){
 | 
	
		
			
				|  |  | +				document.getElementById("time_set").style.display = 'block';
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				setSwh = 1;
 | 
	
		
			
				|  |  | +			};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			//可見光
 | 
	
		
			
				|  |  | +		    function Btn() {
 | 
	
		
			
				|  |  | +				document.getElementById("img3").src = imgPath;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				$.post('/video_feed', 'close', function(resText){
 | 
	
		
			
				|  |  | +				}, 'text');
 | 
	
		
			
				|  |  | +				var command = {"node_id":node_id, "command": "a054"};
 | 
	
		
			
				|  |  | +                $.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +                	}, 'text');
 | 
	
		
			
				|  |  | +				$("#control_panel").css('display', 'none');
 | 
	
		
			
				|  |  | +            };
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			//影像串流
 | 
	
		
			
				|  |  | +            function Btx() {
 | 
	
		
			
				|  |  | +            	var nr = {{params.tid}};
 | 
	
		
			
				|  |  | +				nr = nr.toString();
 | 
	
		
			
				|  |  | +				var json = {"nr":nr};
 | 
	
		
			
				|  |  | +            	document.getElementById("img3").src = "{{url_for('main.video_feed_views')}}";
 | 
	
		
			
				|  |  | +                var command = {"node_id":node_id, "command": "a053"};
 | 
	
		
			
				|  |  | +                $.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +                	}, 'text');
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                $("#control_panel").css('display', 'block');
 | 
	
		
			
				|  |  | +            };
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			//儲存方位
 | 
	
		
			
				|  |  | +			function Btsv(){
 | 
	
		
			
				|  |  | +				if($("input[name=ori_name]").val() == ''){
 | 
	
		
			
				|  |  | +					alert("請輸入方位名稱");
 | 
	
		
			
				|  |  | +				}else{
 | 
	
		
			
				|  |  | +					var nr = {{params.tid}};
 | 
	
		
			
				|  |  | +					nr = nr.toString();
 | 
	
		
			
				|  |  | +					var ori_name = $("input[name=ori_name]").val();
 | 
	
		
			
				|  |  | +					var mode = $(".set-span").text();
 | 
	
		
			
				|  |  | +					var tilt_angle = $(".tilt-angle-history").text();
 | 
	
		
			
				|  |  | +					var pan_angle = $(".pan-angle-history").text();
 | 
	
		
			
				|  |  | +					var zoom = $(".zoom-history").text();
 | 
	
		
			
				|  |  | +					var time1 = $("input[name=m_s1]").val() + $("input[name=d_s1]").val() + $("input[name=h_s1]").val() + $("input[name=min_s1]").val();
 | 
	
		
			
				|  |  | +					var time2 = $("input[name=m_s2]").val() + $("input[name=d_s2]").val() + $("input[name=h_s2]").val() + $("input[name=min_s2]").val();
 | 
	
		
			
				|  |  | +					var time3 = $("input[name=m_s3]").val() + $("input[name=d_s3]").val() + $("input[name=h_s3]").val() + $("input[name=min_s3]").val();
 | 
	
		
			
				|  |  | +					var time4 = $("input[name=m_s4]").val() + $("input[name=d_s4]").val() + $("input[name=h_s4]").val() + $("input[name=min_s4]").val();
 | 
	
		
			
				|  |  | +					var time5 = $("input[name=m_s5]").val() + $("input[name=d_s5]").val() + $("input[name=h_s5]").val() + $("input[name=min_s5]").val();
 | 
	
		
			
				|  |  | +					var time6 = $("input[name=m_s6]").val() + $("input[name=d_s6]").val() + $("input[name=h_s6]").val() + $("input[name=min_s6]").val();
 | 
	
		
			
				|  |  | +					var time7 = $("input[name=m_s7]").val() + $("input[name=d_s7]").val() + $("input[name=h_s7]").val() + $("input[name=min_s7]").val();
 | 
	
		
			
				|  |  | +					var time8 = $("input[name=m_s8]").val() + $("input[name=d_s8]").val() + $("input[name=h_s8]").val() + $("input[name=min_s8]").val();
 | 
	
		
			
				|  |  | +					var json = {"nr":nr, "ori_name":ori_name, "mode":mode, "tilt_angle":tilt_angle, "pan_angle":pan_angle, "zoom":zoom, "time1":time1, "time2":time2,
 | 
	
		
			
				|  |  | +								"time3":time3, "time4":time4, "time5":time5, "time6":time6, "time7":time7, "time8":time8};
 | 
	
		
			
				|  |  | +					$.post('/ashoot_setting/' + nr, json, function(resText){}, 'json');
 | 
	
		
			
				|  |  | +					if(panelSwh == 1 && setSwh == 1){
 | 
	
		
			
				|  |  | +						//預覽照命令
 | 
	
		
			
				|  |  | +						var command = {"node_id":node_id, "command":"a018", "position":mode};
 | 
	
		
			
				|  |  | +						$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +						}, 'text');
 | 
	
		
			
				|  |  | +						panelSwh = 0;
 | 
	
		
			
				|  |  | +						setSwh = 0;
 | 
	
		
			
				|  |  | +					};
 | 
	
		
			
				|  |  | +					document.getElementById("time_set").style.display = "none";
 | 
	
		
			
				|  |  | +					if($("input[name=ori" + mode + "]").attr('class') == 'sw_number disabled'){
 | 
	
		
			
				|  |  | +						$("input[name=ori" + mode + "]").toggleClass('disabled');
 | 
	
		
			
				|  |  | +					};
 | 
	
		
			
				|  |  | +				};
 | 
	
		
			
				|  |  | +			};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			//刪除方位
 | 
	
		
			
				|  |  | +			function Btd(){
 | 
	
		
			
				|  |  | +				var nr = {{params.tid}};
 | 
	
		
			
				|  |  | +				nr = nr.toString();
 | 
	
		
			
				|  |  | +				var mode = $(".set-span").text();
 | 
	
		
			
				|  |  | +				var json = {"nr":nr, "mode":mode, "delete":"ok"};
 | 
	
		
			
				|  |  | +				$.get('/ashoot_setting/' + nr, json, function(resText){}, 'json');
 | 
	
		
			
				|  |  | +				if($("input[name=ori" + mode + "]").attr('class') == 'sw_number'){
 | 
	
		
			
				|  |  | +					$("input[name=ori" + mode + "]").toggleClass('disabled');
 | 
	
		
			
				|  |  | +				};
 | 
	
		
			
				|  |  | +				document.getElementById("time_set").style.display = "none";
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				setSwh = 0;
 | 
	
		
			
				|  |  | +			};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			//關閉設定
 | 
	
		
			
				|  |  | +			function Btq(){
 | 
	
		
			
				|  |  | +				document.getElementById("time_set").style.display = "none";
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				setSwh = 0;
 | 
	
		
			
				|  |  | +			};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			//跳轉頁面關閉影像串流
 | 
	
		
			
				|  |  | +			function CloseImage(){
 | 
	
		
			
				|  |  | +				var command = {"node_id":node_id, "command":"a054"};
 | 
	
		
			
				|  |  | +				$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +                }, 'text');
 | 
	
		
			
				|  |  | +			};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			//關閉視窗關閉影像串流
 | 
	
		
			
				|  |  | +			var isClose = false;
 | 
	
		
			
				|  |  | +        	function close(){
 | 
	
		
			
				|  |  | +				var command = {"node_id":node_id, "command":"a054"};
 | 
	
		
			
				|  |  | +				$.get('/mqtt/' + node_id, command, function(resText){
 | 
	
		
			
				|  |  | +                }, 'text');
 | 
	
		
			
				|  |  | +                //將server的socket關掉
 | 
	
		
			
				|  |  | +                $.post('/video_feed', 'close', function(resText){
 | 
	
		
			
				|  |  | +				}, 'text');
 | 
	
		
			
				|  |  | +        	};
 | 
	
		
			
				|  |  | +        	window.onbeforeunload = function() {
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        	};
 | 
	
		
			
				|  |  | +        	window.onunload = function() {
 | 
	
		
			
				|  |  | +            	if(!isClose){
 | 
	
		
			
				|  |  | +                	close();
 | 
	
		
			
				|  |  | +            	};
 | 
	
		
			
				|  |  | +        	};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		</script>
 | 
	
		
			
				|  |  | +		
 | 
	
		
			
				|  |  | +	</head>
 | 
	
		
			
				|  |  | +	<!-- 進入HTML -->
 | 
	
		
			
				|  |  | +	<body>
 | 
	
		
			
				|  |  | +		<!-- 介面主選單 -->
 | 
	
		
			
				|  |  | +		<div class="container">
 | 
	
		
			
				|  |  | +			<div id="header" class="row" style="background-color:#ffffff;">
 | 
	
		
			
				|  |  | +	            <div class="col-md-12 col-md-12" style="text-align:center;margin:auto;">
 | 
	
		
			
				|  |  | +		             <div class="col-md-4 col-sm-12" style="">
 | 
	
		
			
				|  |  | +			              <img src="../static/img/logo_new.png" width="60%" height="7%">
 | 
	
		
			
				|  |  | +					 </div>
 | 
	
		
			
				|  |  | +					<div class="col-md-6 col-sm-12 text-left" style="">
 | 
	
		
			
				|  |  | +		             	<a href="/aindex"><button class="btn btn-danger btn-lg" style="">地形圖</button></a>
 | 
	
		
			
				|  |  | +		             	<a href="/ashoot_setting/1"><button class="btn btn-primary btn-lg" style="">拍攝設定</button></a>
 | 
	
		
			
				|  |  | +		             	<a href="/aimg_history/{{params.tid}}"><button class="btn btn-danger btn-lg" style="">歷史資料</button></a>
 | 
	
		
			
				|  |  | +					</div>
 | 
	
		
			
				|  |  | +					<div class="col-md-1 col-sm-12" style="">
 | 
	
		
			
				|  |  | +						<a href="/logout"><button class="btn btn-primary btn-lg" style="">登出</button></a>
 | 
	
		
			
				|  |  | +					</div>
 | 
	
		
			
				|  |  | +	            </div>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <div class="col-md-12" style="background-color:red;width:100%;height:5px;margin-top:5px;margin-bottom: 20px;">
 | 
	
		
			
				|  |  | +	        </div>
 | 
	
		
			
				|  |  | +			<!-- 設定參數外觀 -->
 | 
	
		
			
				|  |  | +			<div class="col-sm-12" style="text-align:center;background-color:#f2f2f2;padding:15px;border:1px;border-radius: 35px;">
 | 
	
		
			
				|  |  | +				<center>
 | 
	
		
			
				|  |  | +					<h1>{{params.tid}} 號 拍攝設定</h1>
 | 
	
		
			
				|  |  | +					<br><br>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/1"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">1</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/2"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">2</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/3"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">3</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/4"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">4</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/5"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">5</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/6"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">6</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/7"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">7</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/8"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">8</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/9"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">9</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/10"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">10</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/11"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">11</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/12"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">12</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/13"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">13</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/14"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">14</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/15"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">15</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/16"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">16</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/17"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">17</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/18"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">18</button></a>
 | 
	
		
			
				|  |  | +					<a href="/ashoot_setting/19"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">19</button></a>
 | 
	
		
			
				|  |  | +					<!-- 預覽畫面設定 -->
 | 
	
		
			
				|  |  | +					<div  class="row">
 | 
	
		
			
				|  |  | +					<!-- 按鈕顯示圖片切換功能 -->
 | 
	
		
			
				|  |  | +						<div class="col-md-12" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +							<img id="img3" src="../static/img/PV.jpg" style="max-width:100%;height:auto;">
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +						<div class="col-md-12" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +							<div class="col-md-6" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +								<button id="btn" style="font-size:20px" onclick="Btn()">可見光</button>
 | 
	
		
			
				|  |  | +							</div>
 | 
	
		
			
				|  |  | +							<div class="col-md-6" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +								<button id="btx" style="font-size:20px" onclick="Btx()">影像串流</button>
 | 
	
		
			
				|  |  | +							</div>
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +					</div>
 | 
	
		
			
				|  |  | +					
 | 
	
		
			
				|  |  | +				 
 | 
	
		
			
				|  |  | +				 	<form action="/ashoot_setting" method="post">
 | 
	
		
			
				|  |  | +					<div id="control_panel" style="display: none;">
 | 
	
		
			
				|  |  | +						<div class="col-md-12">
 | 
	
		
			
				|  |  | +			    			<!-- 空白的實線 -->
 | 
	
		
			
				|  |  | +			    			<div style="background-color:#FFFFFF;width:100%;height:5px;margin-top:5px;"></div>
 | 
	
		
			
				|  |  | +			    			<!-- 拍攝控制板外觀 -->
 | 
	
		
			
				|  |  | +	            	 		<div class="col-md-3" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +	            	   			<p style="text-align:center;font-weight:bold;font-size: 1.7em;">鏡頭方位</p>
 | 
	
		
			
				|  |  | +	            	   			<div class="col-md-12" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +	            	   	    		<button type="button" name="up" class="sub_1" onclick="Angle(up);" style="width:49px;height:49px;font-size:20px;border-radius:10px;">▲</button>
 | 
	
		
			
				|  |  | +	            	   			</div>
 | 
	
		
			
				|  |  | +								<div class="col-md-12" style="text-align:center;margin-top:5px;margin-bottom:5px;">
 | 
	
		
			
				|  |  | +	            	  				<div class="col-md-4" style="text-align:center;margin-top:5px;padding:0px">
 | 
	
		
			
				|  |  | +	            	   	      			<button type="button" name="left" class="sub_3" onclick="Angle(left);" style="width:49px;height:49px;font-size:20px;border-radius:10px;padding:0px">◄</button>
 | 
	
		
			
				|  |  | +	            	   	  			</div>
 | 
	
		
			
				|  |  | +	            	   	  			<div class="col-md-4" style="text-align:center;margin-top:5px;padding:0px">
 | 
	
		
			
				|  |  | +	            	   	  				<button type="button" name="original" class="sub_3" onclick="Angle(original);" style="width:49px;height:49px;font-size:20px;border-radius:10px;padding:0px;font-weight:bold;font-size: 1.7em;">0</button>
 | 
	
		
			
				|  |  | +	            	   	  			</div>
 | 
	
		
			
				|  |  | +	            	   	  			<div class="col-md-4" style="text-align:center;margin-top:5px;padding:0px">
 | 
	
		
			
				|  |  | +	            	   	      			<button type="button" name="right" class="sub_4" onclick="Angle(right);" style="width:49px;height:49px;font-size:20px;border-radius:10px;padding:0px">►</button>
 | 
	
		
			
				|  |  | +	            	   	  			</div>
 | 
	
		
			
				|  |  | +								</div>
 | 
	
		
			
				|  |  | +	            	   			<div class="col-md-12" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +	            	   	       		<button type="button" name="down" class="sub_2" onclick="Angle(down);" style="width:49px;height:49px;font-size:20px;border-radius:10px;">▼</button>
 | 
	
		
			
				|  |  | +	            	   			</div>
 | 
	
		
			
				|  |  | +								<input type="hidden" name="tilt-angle">
 | 
	
		
			
				|  |  | +								<input type="hidden" name="pan-angle">
 | 
	
		
			
				|  |  | +							</div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +							<div class="col-md-3" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +	            	   			<p style="text-align:center;font-weight:bold;font-size: 1.7em;">拍攝倍率</p>
 | 
	
		
			
				|  |  | +	            	   			<div class="col-md-12" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +	            	   	 			<div class="col-md-12" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +	            	   					<button type="button" name="zoom0" class="sub_5" onclick="Zoom(zoom0);" style="width:60px;height:49px;font-size:20px;border-radius:10px;">0倍</button>
 | 
	
		
			
				|  |  | +	            	   					<button type="button" name="zoom1" class="sub_6" onclick="Zoom(zoom1);" style="width:60px;height:49px;font-size:20px;border-radius:10px;">1倍</button>
 | 
	
		
			
				|  |  | +	            	   				</div>
 | 
	
		
			
				|  |  | +	            	   				<div class="col-md-12" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +	            	   					<button type="button" name="zoom2" class="sub_6" onclick="Zoom(zoom2);" style="width:60px;height:49px;font-size:20px;border-radius:10px;">2倍</button>
 | 
	
		
			
				|  |  | +	            	   					<button type="button" name="zoom3" class="sub_6" onclick="Zoom(zoom3);" style="width:60px;height:49px;font-size:20px;border-radius:10px;">3倍</button>
 | 
	
		
			
				|  |  | +	            	   				</div>
 | 
	
		
			
				|  |  | +	            	   				<div class="col-md-12" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +	            	   					<button type="button" name="zoom4" class="sub_6" onclick="Zoom(zoom4);" style="width:60px;height:49px;font-size:20px;border-radius:10px;">4倍</button>
 | 
	
		
			
				|  |  | +	            	   					<button type="button" name="zoom5" class="sub_6" onclick="Zoom(zoom5);" style="width:60px;height:49px;font-size:20px;border-radius:10px;">5倍</button>
 | 
	
		
			
				|  |  | +	            	   				</div>
 | 
	
		
			
				|  |  | +									<input type="hidden" name="zoom">
 | 
	
		
			
				|  |  | +	            	   			</div>
 | 
	
		
			
				|  |  | +	               			 </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +							<div class="col-md-3" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +	            	 			<p style="text-align:center;font-weight:bold;font-size: 1.7em;">拍攝</p>
 | 
	
		
			
				|  |  | +<!--					  			<form id="form" name="form" method="POST" action="" target="blankFrame">-->
 | 
	
		
			
				|  |  | +									<button type="button" name="zoom_in" value="1" class="sub_6" onclick="Photo();" style="width:120px;height:80px;font-size:20px;border-radius:10px"><img src="../static/img/camera.png" style="width:50%;height:70%"></button>
 | 
	
		
			
				|  |  | +<!--					  			</form>-->
 | 
	
		
			
				|  |  | +	                		</div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +							<div class="col-md-3" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +						 		<p style="text-align:center;font-weight:bold;font-size: 1.7em;">定程方位</p>
 | 
	
		
			
				|  |  | +	                 	 		<div class="col-md-12" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +									<input type='button' class='sw_number' name='ori1' value='1' onclick="Orientation(ori1);" style='font-size:20px;border-radius:10px;'>
 | 
	
		
			
				|  |  | +									<input type='button' name='ori2' class='sw_number disabled' value='2' onclick="Orientation(ori2);" style='font-size:20px;border-radius:10px;'>
 | 
	
		
			
				|  |  | +									<input type='button' name='ori3' class='sw_number disabled' value='3' onclick="Orientation(ori3);" style='font-size:20px;border-radius:10px;'>
 | 
	
		
			
				|  |  | +									<input type='button' name='ori4' class='sw_number disabled' value='4' onclick="Orientation(ori4);" style='font-size:20px;border-radius:10px;'>
 | 
	
		
			
				|  |  | +								</div>
 | 
	
		
			
				|  |  | +						 		<div class="col-md-12" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +									<input type='button' name='ori5' class='sw_number disabled' value='5' onclick="Orientation(ori5);" style='font-size:20px;border-radius:10px;'>
 | 
	
		
			
				|  |  | +									<input type='button' name='ori6' class='sw_number disabled' value='6' onclick="Orientation(ori6);" style='font-size:20px;border-radius:10px;'>
 | 
	
		
			
				|  |  | +									<input type='button' name='ori7' class='sw_number disabled' value='7' onclick="Orientation(ori7);" style='font-size:20px;border-radius:10px;'>
 | 
	
		
			
				|  |  | +									<input type='button' name="ori8" class='sw_number disabled' value='8' onclick="Orientation(ori8);" style='font-size:20px;border-radius:10px;'>
 | 
	
		
			
				|  |  | +								</div>
 | 
	
		
			
				|  |  | +								<div class="col-md-12" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +								 	<button type="button" id="bts" onclick="Bts()" style="width:100px;height:50px;font-size:20px;border-radius:10px;font-weight:bold;font-size: 1.7em;">設定</button>
 | 
	
		
			
				|  |  | +							 	</div>
 | 
	
		
			
				|  |  | +	                 	 	</div>
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +						<p style='text-align:center;font-weight:bold;font-size: 1.7em;'>
 | 
	
		
			
				|  |  | +							定程方位 垂直:<span class="tilt-angle">0</span> 度 水平:<span class="pan-angle">0</span> 度 倍率:<span class="zoom">0</span> 倍
 | 
	
		
			
				|  |  | +						</p>
 | 
	
		
			
				|  |  | +					</div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					<div class="col-md-12" style="text-align:center;margin-top:5px;"></div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +	            	<div id = "time_set" class="col-md-12" style="display: none;">
 | 
	
		
			
				|  |  | +	            		<div style="background-color:#FFFFFF;width:100%;height:5px;margin-top:5px;"></div><br>
 | 
	
		
			
				|  |  | +	            		<p style="text-align:center;font-weight:bold;font-size: 1.7em;">定程方位設定:</p><br>
 | 
	
		
			
				|  |  | +						<p style="text-align:center;font-weight:bold;font-size: 1.7em;">
 | 
	
		
			
				|  |  | +							方位名稱 : <input type="text" name="ori_name" placeholder="請輸入方位名稱" style="width:200px;">
 | 
	
		
			
				|  |  | +						</p><br>
 | 
	
		
			
				|  |  | +	            		<p style="text-align:center;font-weight:bold;font-size: 1.7em;"><span class="set-span">0</span>號 方位設定:</p><br>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +	            	
 | 
	
		
			
				|  |  | +						<p style='text-align:center;font-weight:bold;font-size: 1.7em;'>定程方位 垂直:<span class="tilt-angle-history">0</span> 度 水平:<span class="pan-angle-history">0</span> 度 倍率:<span class="zoom-history">0</span> 倍</p>
 | 
	
		
			
				|  |  | +						<p style='text-align:center;font-weight:bold;font-size: 1.7em;'>拍攝時間:</p><br>
 | 
	
		
			
				|  |  | +						<p style='text-align:center;font-weight:bold;font-size: 1.7em;'></p>
 | 
	
		
			
				|  |  | +						<div class="col-md-6" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +							<p style='text-align:center;font-weight:bold;font-size: 1.7em;'>
 | 
	
		
			
				|  |  | +								1.<input type='text' name='m_s1' value='00' style='width:50px;' maxlength="2">月<input type='text' name='d_s1' value='00' style='width:50px;' maxlength="2">日<input type='text' name='h_s1' value='00' style='width:50px;' maxlength="2">時<input type='text' name='min_s1' value='00' style='width:50px;' maxlength="2">分<br><br>
 | 
	
		
			
				|  |  | +								3.<input type='text' name='m_s3' value='00' style='width:50px;' maxlength="2">月<input type='text' name='d_s3' value='00' style='width:50px;' maxlength="2">日<input type='text' name='h_s3' value='00' style='width:50px;' maxlength="2">時<input type='text' name='min_s3' value='00' style='width:50px;' maxlength="2">分<br><br>
 | 
	
		
			
				|  |  | +								5.<input type='text' name='m_s5' value='00' style='width:50px;' maxlength="2">月<input type='text' name='d_s5' value='00' style='width:50px;' maxlength="2">日<input type='text' name='h_s5' value='00' style='width:50px;' maxlength="2">時<input type='text' name='min_s5' value='00' style='width:50px;' maxlength="2">分<br><br>
 | 
	
		
			
				|  |  | +								7.<input type='text' name='m_s7' value='00' style='width:50px;' maxlength="2">月<input type='text' name='d_s7' value='00' style='width:50px;' maxlength="2">日<input type='text' name='h_s7' value='00' style='width:50px;' maxlength="2">時<input type='text' name='min_s7' value='00' style='width:50px;' maxlength="2">分<br><br>
 | 
	
		
			
				|  |  | +							</p>
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +						<div class="col-md-6" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +							<p style='text-align:center;font-weight:bold;font-size: 1.7em;'>
 | 
	
		
			
				|  |  | +								2.<input type='text' name='m_s2' value='00' style='width:50px;' maxlength="2">月<input type='text' name='d_s2' value='00' style='width:50px;' maxlength="2">日<input type='text' name='h_s2' value='00' style='width:50px;' maxlength="2">時<input type='text' name='min_s2' value='00' style='width:50px;' maxlength="2">分<br><br>
 | 
	
		
			
				|  |  | +								4.<input type='text' name='m_s4' value='00' style='width:50px;' maxlength="2">月<input type='text' name='d_s4' value='00' style='width:50px;' maxlength="2">日<input type='text' name='h_s4' value='00' style='width:50px;' maxlength="2">時<input type='text' name='min_s4' value='00' style='width:50px;' maxlength="2">分<br><br>
 | 
	
		
			
				|  |  | +								6.<input type='text' name='m_s6' value='00' style='width:50px;' maxlength="2">月<input type='text' name='d_s6' value='00' style='width:50px;' maxlength="2">日<input type='text' name='h_s6' value='00' style='width:50px;' maxlength="2">時<input type='text' name='min_s6' value='00' style='width:50px;' maxlength="2">分<br><br>
 | 
	
		
			
				|  |  | +								8.<input type='text' name='m_s8' value='00' style='width:50px;' maxlength="2">月<input type='text' name='d_s8' value='00' style='width:50px;' maxlength="2">日<input type='text' name='h_s8' value='00' style='width:50px;' maxlength="2">時<input type='text' name='min_s8' value='00' style='width:50px;' maxlength="2">分<br><br>
 | 
	
		
			
				|  |  | +							</p>
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +						<div class="col-md-12" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +							<div class="col-md-4" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +								<input type='button' class="btn btn-primary btn-lg" name='submits' onclick="Btsv()" style='font-weight:bold;font-size:20px' value='儲存'>
 | 
	
		
			
				|  |  | +							</div>
 | 
	
		
			
				|  |  | +							<div class="col-md-4" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +								<input type='button' class="btn btn-primary btn-lg" name='delete' onclick="Btd()" style='font-weight:bold;font-size:20px' value='刪除'>
 | 
	
		
			
				|  |  | +							</div>
 | 
	
		
			
				|  |  | +							<div class="col-md-4" style="text-align:center;margin-top:5px;">
 | 
	
		
			
				|  |  | +								<input type='button' id="btq" class="btn btn-primary btn-lg" onclick="Btq()" style='font-weight:bold;font-size:20px' value='關閉'>
 | 
	
		
			
				|  |  | +							</div>
 | 
	
		
			
				|  |  | +						</div>
 | 
	
		
			
				|  |  | +					</div>
 | 
	
		
			
				|  |  | +				</form>
 | 
	
		
			
				|  |  | +				</center>
 | 
	
		
			
				|  |  | +			</div>
 | 
	
		
			
				|  |  | +		</div>
 | 
	
		
			
				|  |  | +	</body>
 | 
	
		
			
				|  |  | +</html>
 |