123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717 |
- <!-- 主操作頁面(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>
|