aim.html 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
  1. <!-- 主操作頁面(im3.php)的外觀設定 -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Welcome to SkyAI</title>
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <!--<meta http-equiv="refresh" content="3">-->
  9. <meta http-equiv="pragma" content="no-cache">
  10. <meta http-equiv="Cache-Control" CONTENT="no-cache, must-revalidate">
  11. <meta http-equiv="expires" content="365 days">
  12. <script src="../static/js/jquery.min.js"></script>
  13. <link rel="stylesheet" href="../static/css/bootstrap.min.css">
  14. <script src="../static/js/bootstrap.min.js"></script>
  15. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.1/bootstrap-slider.min.js"></script>
  16. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.1/css/bootstrap-slider.min.css">
  17. <link rel="stylesheet" href="../static/css/generalstyle.css?<?php echo rand(0,512);?>">
  18. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  19. <meta name="viewport" content="width=device-width, initial-scale=1">
  20. <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
  21. <style>
  22. .slider-selection {
  23. background: #BABABA;
  24. }
  25. .slider.slider-horizontal{
  26. width: 90%;
  27. }
  28. #setlight>div>div{
  29. display:inline-block;
  30. vertical-align:middle;
  31. }
  32. img {
  33. display: block;
  34. margin-left: auto;
  35. margin-right: auto;
  36. }
  37. .img1 {
  38. display: block;
  39. margin-left: auto;
  40. margin-right: auto;
  41. margin: auto;
  42. }
  43. .detail{
  44. font-family: Microsoft JhengHei;
  45. border-radius: 100px;
  46. background-color: #008CBA;
  47. border: none;
  48. color: white;
  49. padding: 5px 12px;
  50. text-align: center;
  51. text-decoration: none;
  52. display: inline-block;
  53. font-size: 1.4em;
  54. margin: 4px 2px;
  55. cursor: pointer;
  56. transition-duration: 0.4s;
  57. border: 3px solid white;
  58. }
  59. .detail:hover {
  60. background-color: white;
  61. color: black;
  62. border: 3px solid black;
  63. }
  64. .title{
  65. font-family: Microsoft JhengHei;
  66. border-radius: 100px;
  67. background-color: #f2f2f2;
  68. border: none;
  69. color: black;
  70. padding: 10px 32px;
  71. font-size: 2em;
  72. }
  73. .font {
  74. color: white;
  75. font-size: 1.4em;
  76. }
  77. .font:hover {
  78. color: black;
  79. font-size: 1.5em;
  80. }
  81. .sw_number {
  82. background-color: white;
  83. width:40px;font-size:1.5em;border:1px;border-radius: 100px;
  84. border: 3px solid lightgray;
  85. color: #337ab7;
  86. }
  87. .disabled {
  88. width:40px;font-size:1.5em;border:1px;border-radius: 100px;
  89. border: 3px solid lightgray;
  90. background-color:#e0e0e0;
  91. }
  92. .sw_number:hover {
  93. width:40px;
  94. font-size:1.5em;
  95. border:1px;
  96. border-radius: 100px;
  97. border: 3px solid lightgreen;
  98. background-color: white;
  99. }
  100. .disabled:hover {
  101. width:40px;
  102. font-size:1.5em;
  103. border:1px;
  104. border-radius: 100px;
  105. border: 3px solid lightgray;
  106. background-color: #e0e0e0;
  107. }
  108. .choosed {
  109. width:40px;
  110. font-size:1.5em;
  111. border:1px;
  112. border-radius: 100px;
  113. border: 3px solid red;
  114. background-color: white;
  115. }
  116. .choose_nr {
  117. font-family: Microsoft JhengHei;
  118. color: #333333;
  119. font-size: 1.7em;
  120. /*text-shadow: 1px 2px black;*/
  121. }
  122. button {
  123. background-color: white;
  124. border-radius:10px;
  125. border: 3px solid lightgray;
  126. }
  127. .stn{font-size:20px;background-color: white;border-radius:10px;border: 3px solid lightgray;background-color:white;}
  128. .atn{font-size:20px;background-color:#25AD87;border-radius:10px;}
  129. .stl{background-color:#DDDDDD;}
  130. .atl{background-color:white;}
  131. }
  132. </style>
  133. <!--js 特效樣式設定-->
  134. <script>
  135. var zoom_now = 0;
  136. var node_id = {{params.tid}};
  137. if(node_id < 10){
  138. node_id = 'GTW00900200' + node_id;
  139. }else{
  140. node_id = 'GTW0090020' + node_id;
  141. };
  142. var imgPath = "../static/img/PV.jpg";
  143. //控制拍攝預覽照開關
  144. var setSwh = 0;
  145. var panelSwh = 0;
  146. //從後端讀取資料,顯示已設定的方位
  147. $(function(){
  148. {% if params.mode %}
  149. {% for j in params.mode %}
  150. if({{j}} != 1){
  151. $("input[name=ori" + {{j}} + "]").toggleClass('disabled');
  152. };
  153. {% endfor %}
  154. {% endif %}
  155. //顯示小兵現在位置以及最新照片
  156. $(".zoom").text('{{params.begin_zoom}}');
  157. $(".pan-angle").text('{{params.begin_pan_angle}}');
  158. $(".tilt-angle").text('{{params.begin_tilt_angle}}');
  159. imgPath = '{{params.begin_imgPath}}';
  160. $("#img3").attr('src','{{params.begin_imgPath}}');
  161. });
  162. //倍率函數
  163. function Zoom(evt){
  164. var name = evt.getAttribute('name');
  165. var zoom = $(".zoom");
  166. var zoom_num = 0;
  167. var tilt = $(".tilt-angle");
  168. var pan = $(".pan-angle");
  169. var tilt_history = $(".tilt-angle-history");
  170. var pan_history = $(".pan-angle-history");
  171. var zoom_history = $(".zoom-history");
  172. if(name == 'zoom0'){
  173. zoom.text('0');
  174. zoom_num = 0;
  175. var zoom_diff = (0 - zoom_now).toString();
  176. zoom_now = 0;
  177. var command = {"node_id":node_id, "command":"a016", "Zoom":zoom_diff};
  178. $.get('/mqtt/' + node_id, command, function(resText){
  179. }, 'text');
  180. }else if(name == 'zoom1'){
  181. zoom.text('1');
  182. zoom_num = 1;
  183. var zoom_diff = (1 - zoom_now).toString();
  184. zoom_now = 1;
  185. var command = {"node_id":node_id, "command":"a016", "Zoom":zoom_diff};
  186. $.get('/mqtt/' + node_id, command, function(resText){
  187. }, 'text');
  188. }else if(name == 'zoom2'){
  189. zoom.text('2');
  190. zoom_num = 2;
  191. var zoom_diff = (2 - zoom_now).toString();
  192. zoom_now = 2;
  193. var command = {"node_id":node_id, "command":"a016", "Zoom":zoom_diff};
  194. $.get('/mqtt/' + node_id, command, function(resText){
  195. }, 'text');
  196. }else if(name == 'zoom3'){
  197. zoom.text('3');
  198. zoom_num = 3;
  199. var zoom_diff = (3 - zoom_now).toString();
  200. zoom_now = 3;
  201. var command = {"node_id":node_id, "command":"a016", "Zoom":zoom_diff};
  202. $.get('/mqtt/' + node_id, command, function(resText){
  203. }, 'text');
  204. }else if(name == 'zoom4'){
  205. zoom.text('4');
  206. zoom_num = 4;
  207. var zoom_diff = (4 - zoom_now).toString();
  208. zoom_now = 4;
  209. var command = {"node_id":node_id, "command":"a016", "Zoom":zoom_diff};
  210. $.get('/mqtt/' + node_id, command, function(resText){
  211. }, 'text');
  212. }else{
  213. zoom.text('5');
  214. zoom_num = 5;
  215. var zoom_diff = (5 - zoom_now).toString();
  216. zoom_now = 5;
  217. var command = {"node_id":node_id, "command":"a016", "Zoom":zoom_diff};
  218. $.get('/mqtt/' + node_id, command, function(resText){
  219. }, 'text');
  220. };
  221. $("input[name=zoom]").val(zoom_num);
  222. var pan_num = pan.text();
  223. var tilt_num = tilt.text();
  224. var zoom_num = zoom.text();
  225. console.log(zoom_num);
  226. tilt_history.text(tilt_num);
  227. pan_history.text(pan_num);
  228. zoom_history.text(zoom_num);
  229. panelSwh = 1;
  230. };
  231. //角度函數
  232. function Angle(evt){
  233. var name = evt.getAttribute('name');
  234. var tilt = $(".tilt-angle");
  235. var pan = $(".pan-angle");
  236. var zoom = $(".zoom");
  237. var tilt_history = $(".tilt-angle-history");
  238. var pan_history = $(".pan-angle-history");
  239. var zoom_history = $(".zoom-history");
  240. if(name == 'up'){
  241. var num = Number(tilt.text()) + 5;
  242. if(num > 90){
  243. num = 90;
  244. };
  245. num = num.toString();
  246. tilt.text(num);
  247. var command = {"node_id":node_id, "command":"a014", "Tilt":tilt.text()};
  248. $.get('/mqtt/' + node_id, command, function(resText){
  249. }, 'text');
  250. }else if(name == 'down'){
  251. var num = Number(tilt.text()) - 5;
  252. if(num < -25){
  253. num = -25;
  254. };
  255. num = num.toString();
  256. tilt.text(num);
  257. var command = {"node_id":node_id, "command":"a014", "Tilt":tilt.text()};
  258. $.get('/mqtt/' + node_id, command, function(resText){
  259. }, 'text');
  260. }else if(name == 'left'){
  261. var num = Number(pan.text()) - 5;
  262. if(num == -5){
  263. num = 355;
  264. };
  265. num = num.toString();
  266. pan.text(num);
  267. var command = {"node_id":node_id, "command":"a012", "Pan":pan.text()};
  268. $.get('/mqtt/' + node_id, command, function(resText){
  269. }, 'text');
  270. }else if(name == 'right'){
  271. var num = Number(pan.text()) + 5;
  272. if(num == 360){
  273. num = 0;
  274. };
  275. num = num.toString();
  276. pan.text(num);
  277. var command = {"node_id":node_id, "command":"a012", "Pan":pan.text()};
  278. $.get('/mqtt/' + node_id, command, function(resText){
  279. }, 'text');
  280. }else{
  281. tilt.text("0");
  282. pan.text("0");
  283. zoom.text("0");
  284. var command = {"node_id":node_id, "command":"a052"};
  285. $.get('/mqtt/' + node_id, command, function(resText){
  286. }, 'text');
  287. };
  288. $("input[name=tilt-angle]").val(tilt.text());
  289. $("input[name=pan-angle]").val(pan.text());
  290. var pan_num = pan.text();
  291. var tilt_num = tilt.text();
  292. var zoom_num = zoom.text();
  293. tilt_history.text(tilt_num);
  294. pan_history.text(pan_num);
  295. zoom_history.text(zoom_num);
  296. panelSwh = 1;
  297. };
  298. //手動拍攝函數
  299. function Photo() {
  300. var date = new Date();
  301. var year = (date.getFullYear()).toString();
  302. var month = date.getMonth() + 1;
  303. var day = (date.getDate()).toString();
  304. var hour = date.getHours();
  305. var min = (date.getMinutes()).toString();
  306. if(month < 10){
  307. month = "0" + month;
  308. };
  309. if(day < 10){
  310. day = "0" + day;
  311. };
  312. if(hour < 10){
  313. hour = "0" + hour;
  314. };
  315. if(min < 10){
  316. min = "0" + min;
  317. };
  318. var filename = year + "-" + month + "-" + day + "_" + hour + "." + min;
  319. var command = {"node_id":node_id, "command": "a051", "position":"0", "time":"1", "filename":filename};
  320. $.get('/mqtt/' + node_id, command, function(resText){
  321. }, 'text');
  322. };
  323. //從後端讀資料,顯示方位的設定
  324. function Orientation(evt){
  325. var val = evt.getAttribute('value');
  326. var set = $(".set-span");
  327. set.text(val);
  328. var nr = {{params.tid}};
  329. nr = nr.toString();
  330. var mode = $(".set-span").text();
  331. var json = {"nr":nr, "mode":mode};
  332. $.get('/ashoot_setting/' + nr, json, function(resText){
  333. $("input[name=ori_name]").val(resText.name);
  334. $(".tilt-angle-history").text(resText.tilt_angle);
  335. $(".pan-angle-history").text(resText.pan_angle);
  336. $(".zoom-history").text(resText.zoom);
  337. $("input[name=m_s1]").val(resText.time1.substring(0,2));
  338. $("input[name=d_s1]").val(resText.time1.substring(2,4));
  339. $("input[name=h_s1]").val(resText.time1.substring(4,6));
  340. $("input[name=min_s1]").val(resText.time1.substring(6,8));
  341. $("input[name=m_s2]").val(resText.time2.substring(0,2));
  342. $("input[name=d_s2]").val(resText.time2.substring(2,4));
  343. $("input[name=h_s2]").val(resText.time2.substring(4,6));
  344. $("input[name=min_s2]").val(resText.time2.substring(6,8));
  345. $("input[name=m_s3]").val(resText.time3.substring(0,2));
  346. $("input[name=d_s3]").val(resText.time3.substring(2,4));
  347. $("input[name=h_s3]").val(resText.time3.substring(4,6));
  348. $("input[name=min_s3]").val(resText.time3.substring(6,8));
  349. $("input[name=m_s4]").val(resText.time4.substring(0,2));
  350. $("input[name=d_s4]").val(resText.time4.substring(2,4));
  351. $("input[name=h_s4]").val(resText.time4.substring(4,6));
  352. $("input[name=min_s4]").val(resText.time4.substring(6,8));
  353. $("input[name=m_s5]").val(resText.time5.substring(0,2));
  354. $("input[name=d_s5]").val(resText.time5.substring(2,4));
  355. $("input[name=h_s5]").val(resText.time5.substring(4,6));
  356. $("input[name=min_s5]").val(resText.time5.substring(6,8));
  357. $("input[name=m_s6]").val(resText.time6.substring(0,2));
  358. $("input[name=d_s6]").val(resText.time6.substring(2,4));
  359. $("input[name=h_s6]").val(resText.time6.substring(4,6));
  360. $("input[name=min_s6]").val(resText.time6.substring(6,8));
  361. $("input[name=m_s7]").val(resText.time7.substring(0,2));
  362. $("input[name=d_s7]").val(resText.time7.substring(2,4));
  363. $("input[name=h_s7]").val(resText.time7.substring(4,6));
  364. $("input[name=min_s7]").val(resText.time7.substring(6,8));
  365. $("input[name=m_s8]").val(resText.time8.substring(0,2));
  366. $("input[name=d_s8]").val(resText.time8.substring(2,4));
  367. $("input[name=h_s8]").val(resText.time8.substring(4,6));
  368. $("input[name=min_s8]").val(resText.time8.substring(6,8));
  369. }, 'json');
  370. };
  371. //開啟設定
  372. function Bts(){
  373. document.getElementById("time_set").style.display = 'block';
  374. setSwh = 1;
  375. };
  376. //可見光
  377. function Btn() {
  378. document.getElementById("img3").src = imgPath;
  379. $.post('/video_feed', 'close', function(resText){
  380. }, 'text');
  381. var command = {"node_id":node_id, "command": "a054"};
  382. $.get('/mqtt/' + node_id, command, function(resText){
  383. }, 'text');
  384. $("#control_panel").css('display', 'none');
  385. };
  386. //影像串流
  387. function Btx() {
  388. var nr = {{params.tid}};
  389. nr = nr.toString();
  390. var json = {"nr":nr};
  391. document.getElementById("img3").src = "{{url_for('main.video_feed_views')}}";
  392. var command = {"node_id":node_id, "command": "a053"};
  393. $.get('/mqtt/' + node_id, command, function(resText){
  394. }, 'text');
  395. $("#control_panel").css('display', 'block');
  396. };
  397. //儲存方位
  398. function Btsv(){
  399. if($("input[name=ori_name]").val() == ''){
  400. alert("請輸入方位名稱");
  401. }else{
  402. var nr = {{params.tid}};
  403. nr = nr.toString();
  404. var ori_name = $("input[name=ori_name]").val();
  405. var mode = $(".set-span").text();
  406. var tilt_angle = $(".tilt-angle-history").text();
  407. var pan_angle = $(".pan-angle-history").text();
  408. var zoom = $(".zoom-history").text();
  409. var time1 = $("input[name=m_s1]").val() + $("input[name=d_s1]").val() + $("input[name=h_s1]").val() + $("input[name=min_s1]").val();
  410. var time2 = $("input[name=m_s2]").val() + $("input[name=d_s2]").val() + $("input[name=h_s2]").val() + $("input[name=min_s2]").val();
  411. var time3 = $("input[name=m_s3]").val() + $("input[name=d_s3]").val() + $("input[name=h_s3]").val() + $("input[name=min_s3]").val();
  412. var time4 = $("input[name=m_s4]").val() + $("input[name=d_s4]").val() + $("input[name=h_s4]").val() + $("input[name=min_s4]").val();
  413. var time5 = $("input[name=m_s5]").val() + $("input[name=d_s5]").val() + $("input[name=h_s5]").val() + $("input[name=min_s5]").val();
  414. var time6 = $("input[name=m_s6]").val() + $("input[name=d_s6]").val() + $("input[name=h_s6]").val() + $("input[name=min_s6]").val();
  415. var time7 = $("input[name=m_s7]").val() + $("input[name=d_s7]").val() + $("input[name=h_s7]").val() + $("input[name=min_s7]").val();
  416. var time8 = $("input[name=m_s8]").val() + $("input[name=d_s8]").val() + $("input[name=h_s8]").val() + $("input[name=min_s8]").val();
  417. var json = {"nr":nr, "ori_name":ori_name, "mode":mode, "tilt_angle":tilt_angle, "pan_angle":pan_angle, "zoom":zoom, "time1":time1, "time2":time2,
  418. "time3":time3, "time4":time4, "time5":time5, "time6":time6, "time7":time7, "time8":time8};
  419. $.post('/ashoot_setting/' + nr, json, function(resText){}, 'json');
  420. if(panelSwh == 1 && setSwh == 1){
  421. //預覽照命令
  422. var command = {"node_id":node_id, "command":"a018", "position":mode};
  423. $.get('/mqtt/' + node_id, command, function(resText){
  424. }, 'text');
  425. panelSwh = 0;
  426. setSwh = 0;
  427. };
  428. document.getElementById("time_set").style.display = "none";
  429. if($("input[name=ori" + mode + "]").attr('class') == 'sw_number disabled'){
  430. $("input[name=ori" + mode + "]").toggleClass('disabled');
  431. };
  432. };
  433. };
  434. //刪除方位
  435. function Btd(){
  436. var nr = {{params.tid}};
  437. nr = nr.toString();
  438. var mode = $(".set-span").text();
  439. var json = {"nr":nr, "mode":mode, "delete":"ok"};
  440. $.get('/ashoot_setting/' + nr, json, function(resText){}, 'json');
  441. if($("input[name=ori" + mode + "]").attr('class') == 'sw_number'){
  442. $("input[name=ori" + mode + "]").toggleClass('disabled');
  443. };
  444. document.getElementById("time_set").style.display = "none";
  445. setSwh = 0;
  446. };
  447. //關閉設定
  448. function Btq(){
  449. document.getElementById("time_set").style.display = "none";
  450. setSwh = 0;
  451. };
  452. //跳轉頁面關閉影像串流
  453. function CloseImage(){
  454. var command = {"node_id":node_id, "command":"a054"};
  455. $.get('/mqtt/' + node_id, command, function(resText){
  456. }, 'text');
  457. };
  458. //關閉視窗關閉影像串流
  459. var isClose = false;
  460. function close(){
  461. var command = {"node_id":node_id, "command":"a054"};
  462. $.get('/mqtt/' + node_id, command, function(resText){
  463. }, 'text');
  464. //將server的socket關掉
  465. $.post('/video_feed', 'close', function(resText){
  466. }, 'text');
  467. };
  468. window.onbeforeunload = function() {
  469. };
  470. window.onunload = function() {
  471. if(!isClose){
  472. close();
  473. };
  474. };
  475. </script>
  476. </head>
  477. <!-- 進入HTML -->
  478. <body>
  479. <!-- 介面主選單 -->
  480. <div class="container">
  481. <div id="header" class="row" style="background-color:#ffffff;">
  482. <div class="col-md-12 col-md-12" style="text-align:center;margin:auto;">
  483. <div class="col-md-4 col-sm-12" style="">
  484. <img src="../static/img/logo_new.png" width="60%" height="7%">
  485. </div>
  486. <div class="col-md-6 col-sm-12 text-left" style="">
  487. <a href="/aindex"><button class="btn btn-danger btn-lg" style="">地形圖</button></a>
  488. <a href="/ashoot_setting/1"><button class="btn btn-primary btn-lg" style="">拍攝設定</button></a>
  489. <a href="/aimg_history/{{params.tid}}"><button class="btn btn-danger btn-lg" style="">歷史資料</button></a>
  490. </div>
  491. <div class="col-md-1 col-sm-12" style="">
  492. <a href="/logout"><button class="btn btn-primary btn-lg" style="">登出</button></a>
  493. </div>
  494. </div>
  495. </div>
  496. <div class="col-md-12" style="background-color:red;width:100%;height:5px;margin-top:5px;margin-bottom: 20px;">
  497. </div>
  498. <!-- 設定參數外觀 -->
  499. <div class="col-sm-12" style="text-align:center;background-color:#f2f2f2;padding:15px;border:1px;border-radius: 35px;">
  500. <center>
  501. <h1>{{params.tid}} 號 拍攝設定</h1>
  502. <br><br>
  503. <a href="/ashoot_setting/1"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">1</button></a>
  504. <a href="/ashoot_setting/2"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">2</button></a>
  505. <a href="/ashoot_setting/3"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">3</button></a>
  506. <a href="/ashoot_setting/4"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">4</button></a>
  507. <a href="/ashoot_setting/5"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">5</button></a>
  508. <a href="/ashoot_setting/6"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">6</button></a>
  509. <a href="/ashoot_setting/7"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">7</button></a>
  510. <a href="/ashoot_setting/8"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">8</button></a>
  511. <a href="/ashoot_setting/9"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">9</button></a>
  512. <a href="/ashoot_setting/10"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">10</button></a>
  513. <a href="/ashoot_setting/11"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">11</button></a>
  514. <a href="/ashoot_setting/12"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">12</button></a>
  515. <a href="/ashoot_setting/13"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">13</button></a>
  516. <a href="/ashoot_setting/14"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">14</button></a>
  517. <a href="/ashoot_setting/15"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">15</button></a>
  518. <a href="/ashoot_setting/16"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">16</button></a>
  519. <a href="/ashoot_setting/17"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">17</button></a>
  520. <a href="/ashoot_setting/18"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">18</button></a>
  521. <a href="/ashoot_setting/19"><button class="btn btn-primary btn-lg" style="margin-top:5px;margin-bottom:5px" onclick="CloseImage();">19</button></a>
  522. <!-- 預覽畫面設定 -->
  523. <div class="row">
  524. <!-- 按鈕顯示圖片切換功能 -->
  525. <div class="col-md-12" style="text-align:center;margin-top:5px;">
  526. <img id="img3" src="../static/img/PV.jpg" style="max-width:100%;height:auto;">
  527. </div>
  528. <div class="col-md-12" style="text-align:center;margin-top:5px;">
  529. <div class="col-md-6" style="text-align:center;margin-top:5px;">
  530. <button id="btn" style="font-size:20px" onclick="Btn()">可見光</button>
  531. </div>
  532. <div class="col-md-6" style="text-align:center;margin-top:5px;">
  533. <button id="btx" style="font-size:20px" onclick="Btx()">影像串流</button>
  534. </div>
  535. </div>
  536. </div>
  537. &nbsp;
  538. &nbsp; <form action="/ashoot_setting" method="post">
  539. <div id="control_panel" style="display: none;">
  540. <div class="col-md-12">
  541. <!-- 空白的實線 -->
  542. <div style="background-color:#FFFFFF;width:100%;height:5px;margin-top:5px;"></div>
  543. <!-- 拍攝控制板外觀 -->
  544. <div class="col-md-3" style="text-align:center;margin-top:5px;">
  545. <p style="text-align:center;font-weight:bold;font-size: 1.7em;">鏡頭方位</p>
  546. <div class="col-md-12" style="text-align:center;margin-top:5px;">
  547. <button type="button" name="up" class="sub_1" onclick="Angle(up);" style="width:49px;height:49px;font-size:20px;border-radius:10px;">▲</button>
  548. </div>
  549. <div class="col-md-12" style="text-align:center;margin-top:5px;margin-bottom:5px;">
  550. <div class="col-md-4" style="text-align:center;margin-top:5px;padding:0px">
  551. <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>
  552. </div>
  553. <div class="col-md-4" style="text-align:center;margin-top:5px;padding:0px">
  554. <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>
  555. </div>
  556. <div class="col-md-4" style="text-align:center;margin-top:5px;padding:0px">
  557. <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>
  558. </div>
  559. </div>
  560. <div class="col-md-12" style="text-align:center;margin-top:5px;">
  561. <button type="button" name="down" class="sub_2" onclick="Angle(down);" style="width:49px;height:49px;font-size:20px;border-radius:10px;">▼</button>
  562. </div>
  563. <input type="hidden" name="tilt-angle">
  564. <input type="hidden" name="pan-angle">
  565. </div>
  566. <div class="col-md-3" style="text-align:center;margin-top:5px;">
  567. <p style="text-align:center;font-weight:bold;font-size: 1.7em;">拍攝倍率</p>
  568. <div class="col-md-12" style="text-align:center;margin-top:5px;">
  569. <div class="col-md-12" style="text-align:center;margin-top:5px;">
  570. <button type="button" name="zoom0" class="sub_5" onclick="Zoom(zoom0);" style="width:60px;height:49px;font-size:20px;border-radius:10px;">0倍</button>
  571. <button type="button" name="zoom1" class="sub_6" onclick="Zoom(zoom1);" style="width:60px;height:49px;font-size:20px;border-radius:10px;">1倍</button>
  572. </div>
  573. <div class="col-md-12" style="text-align:center;margin-top:5px;">
  574. <button type="button" name="zoom2" class="sub_6" onclick="Zoom(zoom2);" style="width:60px;height:49px;font-size:20px;border-radius:10px;">2倍</button>
  575. <button type="button" name="zoom3" class="sub_6" onclick="Zoom(zoom3);" style="width:60px;height:49px;font-size:20px;border-radius:10px;">3倍</button>
  576. </div>
  577. <div class="col-md-12" style="text-align:center;margin-top:5px;">
  578. <button type="button" name="zoom4" class="sub_6" onclick="Zoom(zoom4);" style="width:60px;height:49px;font-size:20px;border-radius:10px;">4倍</button>
  579. <button type="button" name="zoom5" class="sub_6" onclick="Zoom(zoom5);" style="width:60px;height:49px;font-size:20px;border-radius:10px;">5倍</button>
  580. </div>
  581. <input type="hidden" name="zoom">
  582. </div>
  583. </div>
  584. <div class="col-md-3" style="text-align:center;margin-top:5px;">
  585. <p style="text-align:center;font-weight:bold;font-size: 1.7em;">拍攝</p>
  586. <!-- <form id="form" name="form" method="POST" action="" target="blankFrame">-->
  587. <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>
  588. <!-- </form>-->
  589. </div>
  590. <div class="col-md-3" style="text-align:center;margin-top:5px;">
  591. <p style="text-align:center;font-weight:bold;font-size: 1.7em;">定程方位</p>
  592. <div class="col-md-12" style="text-align:center;margin-top:5px;">
  593. <input type='button' class='sw_number' name='ori1' value='1' onclick="Orientation(ori1);" style='font-size:20px;border-radius:10px;'>
  594. <input type='button' name='ori2' class='sw_number disabled' value='2' onclick="Orientation(ori2);" style='font-size:20px;border-radius:10px;'>
  595. <input type='button' name='ori3' class='sw_number disabled' value='3' onclick="Orientation(ori3);" style='font-size:20px;border-radius:10px;'>
  596. <input type='button' name='ori4' class='sw_number disabled' value='4' onclick="Orientation(ori4);" style='font-size:20px;border-radius:10px;'>
  597. </div>
  598. <div class="col-md-12" style="text-align:center;margin-top:5px;">
  599. <input type='button' name='ori5' class='sw_number disabled' value='5' onclick="Orientation(ori5);" style='font-size:20px;border-radius:10px;'>
  600. <input type='button' name='ori6' class='sw_number disabled' value='6' onclick="Orientation(ori6);" style='font-size:20px;border-radius:10px;'>
  601. <input type='button' name='ori7' class='sw_number disabled' value='7' onclick="Orientation(ori7);" style='font-size:20px;border-radius:10px;'>
  602. <input type='button' name="ori8" class='sw_number disabled' value='8' onclick="Orientation(ori8);" style='font-size:20px;border-radius:10px;'>
  603. </div>
  604. <div class="col-md-12" style="text-align:center;margin-top:5px;">
  605. <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>
  606. </div>
  607. </div>
  608. </div>
  609. <p style='text-align:center;font-weight:bold;font-size: 1.7em;'>
  610. 定程方位 垂直:<span class="tilt-angle">0</span> 度 水平:<span class="pan-angle">0</span> 度 倍率:<span class="zoom">0</span> 倍
  611. </p>
  612. </div>
  613. <div class="col-md-12" style="text-align:center;margin-top:5px;"></div>
  614. <div id = "time_set" class="col-md-12" style="display: none;">
  615. <div style="background-color:#FFFFFF;width:100%;height:5px;margin-top:5px;"></div><br>
  616. <p style="text-align:center;font-weight:bold;font-size: 1.7em;">定程方位設定:</p><br>
  617. <p style="text-align:center;font-weight:bold;font-size: 1.7em;">
  618. 方位名稱 : <input type="text" name="ori_name" placeholder="請輸入方位名稱" style="width:200px;">
  619. </p><br>
  620. <p style="text-align:center;font-weight:bold;font-size: 1.7em;"><span class="set-span">0</span>號 方位設定:</p><br>
  621. <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>
  622. <p style='text-align:center;font-weight:bold;font-size: 1.7em;'>拍攝時間:</p><br>
  623. <p style='text-align:center;font-weight:bold;font-size: 1.7em;'></p>
  624. <div class="col-md-6" style="text-align:center;margin-top:5px;">
  625. <p style='text-align:center;font-weight:bold;font-size: 1.7em;'>
  626. 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>
  627. 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>
  628. 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>
  629. 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>
  630. </p>
  631. </div>
  632. <div class="col-md-6" style="text-align:center;margin-top:5px;">
  633. <p style='text-align:center;font-weight:bold;font-size: 1.7em;'>
  634. 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>
  635. 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>
  636. 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>
  637. 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>
  638. </p>
  639. </div>
  640. <div class="col-md-12" style="text-align:center;margin-top:5px;">
  641. <div class="col-md-4" style="text-align:center;margin-top:5px;">
  642. <input type='button' class="btn btn-primary btn-lg" name='submits' onclick="Btsv()" style='font-weight:bold;font-size:20px' value='儲存'>
  643. </div>
  644. <div class="col-md-4" style="text-align:center;margin-top:5px;">
  645. <input type='button' class="btn btn-primary btn-lg" name='delete' onclick="Btd()" style='font-weight:bold;font-size:20px' value='刪除'>
  646. </div>
  647. <div class="col-md-4" style="text-align:center;margin-top:5px;">
  648. <input type='button' id="btq" class="btn btn-primary btn-lg" onclick="Btq()" style='font-weight:bold;font-size:20px' value='關閉'>
  649. </div>
  650. </div>
  651. </div>
  652. </form>
  653. </center>
  654. </div>
  655. </div>
  656. </body>
  657. </html>