|
@@ -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>
|