1
0

camera.html 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>{{ title }}</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- 新 Bootstrap4 核心 CSS 文件 -->
  8. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  9. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  10. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  11. <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  12. <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  13. <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  14. <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  15. <!--可用來建立使用者小圖示-->
  16. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  17. <style>
  18. body {
  19. margin: 0;
  20. }
  21. .navbar-dark .navbar-nav .nav-link {
  22. color: white;
  23. cursor: pointer;
  24. text-decoration: none;
  25. width: 110px;
  26. height: 46px;
  27. }
  28. .nav-top {
  29. line-height: 40px;
  30. background-color: #C4C4C4;
  31. }
  32. .website_title {
  33. font-family: Roboto;
  34. font-style: normal;
  35. font-weight: normal;
  36. font-size: 30px;
  37. color: #000000;
  38. }
  39. .navbar-nav>li {
  40. float: none;
  41. display: inline-block;
  42. width: 100px;
  43. margin: 0 auto;
  44. text-align: center;
  45. }
  46. .navbar-nav>li a {
  47. font-size: 20px;
  48. }
  49. .main-page {
  50. margin-top: 200px;
  51. }
  52. .page-title {
  53. font-family: Roboto;
  54. font-style: normal;
  55. font-weight: bold;
  56. font-size: 36px;
  57. }
  58. .flex {
  59. display: flex;
  60. flex-direction: row;
  61. flex-wrap: wrap;
  62. justify-content: center;
  63. }
  64. .set-link {
  65. display: inline-block;
  66. width: 350px;
  67. height: 100px;
  68. line-height: 100px;
  69. background: #008CBA;
  70. border: 1px solid #CFCFCF;
  71. box-sizing: border-box;
  72. color: #FFFFFF;
  73. border-radius: 10px;
  74. font-size: 36px;
  75. }
  76. .cmn-toggle {
  77. position: absolute;
  78. margin-left: 0px;
  79. visibility: hidden;
  80. }
  81. .cmn-toggle+label {
  82. display: block;
  83. position: relative;
  84. cursor: pointer;
  85. outline: none;
  86. user-select: none;
  87. }
  88. input.cmn-toggle-round-flat+label {
  89. padding: 2px;
  90. width: 60px;
  91. height: 30px;
  92. background-color: #C0C0C0;
  93. border-radius: 60px;
  94. transition: background 0.4s;
  95. }
  96. input.cmn-toggle-round-flat+label:before,
  97. input.cmn-toggle-round-flat+label:after {
  98. display: block;
  99. position: absolute;
  100. content: "";
  101. }
  102. input.cmn-toggle-round-flat+label:before {
  103. top: 2px;
  104. left: 2px;
  105. bottom: 2px;
  106. right: 2px;
  107. background-color: #fff;
  108. border-radius: 60px;
  109. transition: background 0.4s;
  110. }
  111. input.cmn-toggle-round-flat+label:after {
  112. top: 4px;
  113. left: 4px;
  114. bottom: 4px;
  115. width: 24px;
  116. background-color: #dddddd;
  117. border-radius: 52px;
  118. transition: margin 0.4s, background 0.4s;
  119. }
  120. input.cmn-toggle-round-flat:checked+label {
  121. background-color: #C0C0C0;
  122. }
  123. input.cmn-toggle-round-flat:checked+label:after {
  124. margin-left: 27px;
  125. background-color: #008CBA;
  126. }
  127. @media(max-width:373px) {
  128. .card {
  129. margin-right: 0px;
  130. }
  131. .set-link {
  132. width: 250px;
  133. }
  134. }
  135. @media(max-width:577px) {}
  136. @media(min-width:576px) {}
  137. @media(min-width:768px) {
  138. .navbar-nav>li {
  139. margin-left: 0px;
  140. }
  141. .navbar-nav .li-block {
  142. display: none;
  143. }
  144. }
  145. @media(min-width:991px) {
  146. .navbar-nav>li {
  147. margin-left: 20px;
  148. }
  149. .navbar-nav .li-block {
  150. display: none;
  151. }
  152. }
  153. @media(min-width:1200px) {
  154. .navbar-nav>li {
  155. margin-left: 50px;
  156. }
  157. .navbar-nav .li-block {
  158. display: inline-block;
  159. width: 100px;
  160. }
  161. }
  162. @media(min-width:1400px) {
  163. .navbar-nav .li-block {
  164. display: inline-block;
  165. width: 200px;
  166. }
  167. }
  168. @media(min-width:1689px) {
  169. .navbar-nav>li {
  170. margin-left: 50px;
  171. }
  172. .navbar-nav .li-block {
  173. display: inline-block;
  174. width: 500px;
  175. }
  176. }
  177. </style>
  178. <script language="JavaScript">
  179. var tid = '{{tid}}';
  180. var WS_URL = '{{WS_URL}}';
  181. var camera_title = '{{camera_title}}';
  182. console.log('tid:' + tid)
  183. console.log('camera_title: ' + camera_title)
  184. $(document).ready(function (){
  185. $("#camera_dry_title").text("M5 攝影機_" + camera_title + " " + tid);
  186. $("#coffee_title_pc").text(tid + " " + camera_title + "攝影機畫面");
  187. $("#coffee_title_phone").text("攝影機_" + camera_title + " " + tid);
  188. /*
  189. if (camera_title == '乾燥出料儲豆槽' | camera_title == '乾燥入料儲豆槽' | camera_title == '乾燥槽' |
  190. camera_title == '乾燥貨櫃內部' | camera_title == '乾燥貨櫃外部') {
  191. $("#PreviousPage").attr('href','/dry');
  192. $("#PreviousPage").text('返回乾燥貨櫃');
  193. $("#NextPage").attr('href','/camera_dry');
  194. $("#NextPage").text('前往乾燥貨櫃總攝影機畫面');
  195. } else if (camera_title == '發酵出料儲豆槽' | camera_title == '發酵入料儲豆槽' | camera_title == '發酵槽' |
  196. camera_title == '發酵貨櫃內部' | camera_title == '發酵貨櫃外部') {
  197. $("#PreviousPage").attr('href','/ferment');
  198. $("#PreviousPage").text('返回發酵貨櫃');
  199. $("#NextPage").attr('href','/camera_ferment');
  200. $("#NextPage").text('前往發酵貨櫃總攝影機畫面');
  201. } else if (camera_title == '清洗浮選出料儲豆槽' | camera_title == '清洗浮選槽' | camera_title == '色選機出料儲豆槽' |
  202. camera_title == '色選機' | camera_title == '脫皮機出料儲豆槽' | camera_title == '脫皮機' |
  203. camera_title == '清洗貨櫃內部' | camera_title == '清洗貨櫃外部') {
  204. $("#PreviousPage").attr('href','/clean');
  205. $("#PreviousPage").text('返回清洗貨櫃');
  206. $("#NextPage").attr('href','/camera_clean');
  207. $("#NextPage").text('前往清洗貨櫃總攝影機畫面');
  208. }
  209. */
  210. });
  211. </script>
  212. </head>
  213. <body>
  214. <div id="wrapper">
  215. <div id="coffee_header">
  216. {% include 'header.html' %}
  217. </div>
  218. <!--
  219. <div style="text-align: left;">
  220. <a id="PreviousPage" href="" style="float: left;">________________</a>
  221. </div>
  222. <div style="text-align: right;">
  223. <a id="NextPage" href="" style="float: right;">________________</a>
  224. </div>
  225. <div id="camera_dry_title" style="text-align: center; margin-top: 30px; font-size: 24px;">
  226. M5 攝影機
  227. </div>
  228. -->
  229. <div class="container-fluid">
  230. <div class="row" style="margin-top:50px;">
  231. <div class="col flex">
  232. <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">
  233. <div class="col-md-12 row flex">
  234. <img src="" id="four" width="90%" height="90%">
  235. </div>
  236. </div>
  237. <script>
  238. // M5 攝影機
  239. //const img = document.querySelector('#one');
  240. const img3 = document.querySelector('#four');
  241. //const WS_URL3 = 'ws:///60.250.156.230:0000';
  242. const WS_URL3 = WS_URL;
  243. const ws3 = new WebSocket(WS_URL3);
  244. let urlObject3;
  245. ws3.onopen = () => console.log(`Connected to ${WS_URL3}`);
  246. ws3.onmessage = message3 => {
  247. const arrayBuffer3 = message3.data;
  248. if (urlObject3) {
  249. URL.revokeObjectURL(urlObject3);
  250. }
  251. urlObject3 = URL.createObjectURL(new Blob([arrayBuffer3]));
  252. img3.src = urlObject3;
  253. }
  254. </script>
  255. </div>
  256. </div>
  257. </div>
  258. <div id="coffee_footer">
  259. {% include 'footer.html' %}
  260. </div>
  261. </div>
  262. </body>
  263. </html>