benson
/
EdamameProject


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708
							<!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 room_now = 0;
			var node_id = {{params.tid}};
            node_id = 'GTW00900100' + 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 %}


                <!--var json = {"nr": node_id};-->
                <!--$.get('/orientation/' + node_id, json, function (resText) {-->
                    <!--zoom_now = resText.zoom;-->
                    <!--$(".zoom").text(zoom_now);-->

                    <!--var pan = resText.pan_angle;-->
                    <!--$(".pan-angle").text(pan);-->

					<!--var tilt = resText.tilt_angle;-->
                    <!--$(".tilt-angle").text(tilt);-->

                    <!--imgPath = resText.img;-->
                    <!--$("#img3").attr('src',imgPath);-->

                    <!--}, 'json');-->

                //顯示小兵現在位置以及最新照片
                $(".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();
				tilt_history.text(tilt_num);
				pan_history.text(pan_num);
				zoom_history.text(zoom_num);
				console.log("test");

				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();
			    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('/cshoot_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';
			};


			//可見光
		    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('/cshoot_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('/cshoot_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(){
				console.log('test');
				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="/cindex/{{params.tid}}"><button class="btn btn-danger btn-lg" style="">地形圖</button></a>
		             	<a href="/cshoot_setting/1"><button class="btn btn-primary btn-lg" style="">拍攝設定</button></a>
		             	<a href="/cimg_history/{{params.tid}}"><button class="btn btn-danger btn-lg" style="">歷史資料</button></a>
					</div>
					<div class="col-md-1 col-sm-12 text-left" 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="/cshoot_setting/1"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">1</button></a>
					<a href="/cshoot_setting/2"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">2</button></a>
					<a href="/cshoot_setting/3"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">3</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>

				&nbsp;
				&nbsp;

					<form action="" 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>