1
0

board_loader-1.html 101 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876
  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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  9. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  10. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  12. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  13. <!--可用來建立使用者小圖示-->
  14. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  15. <script language="JavaScript">
  16. $(function(){
  17. $("#coffee_title_pc").text("板子燒錄程式");
  18. $("#coffee_title_phone").text("板子燒錄程式");
  19. getValue();
  20. $('.select-input').prop('disabled', false);
  21. });
  22. var Z;
  23. var X;
  24. var Y;
  25. var TT = {}; // 將總條件句/附加條件句/物件動作句存入 字典, 後續傳給 dry_block_format 再組合
  26. // DRY_CONTAINER_STATUS 讓 do_act / dry_object 判斷用
  27. const DRY_CONTAINER_STATUS = {'空桶等待':'D_Waiting',
  28. '入豆中':'D_InputtingBean',
  29. '入豆暫停':'D_InputtingBean_Pause',
  30. '入豆完成':'D_InputtingBean_Finish',
  31. '夾層入水':'D_InputtingWater',
  32. '乾燥':'D_Drying',
  33. '可出豆':'D_OutputtingBean'}
  34. </script>
  35. <style>
  36. .boardpic_position {
  37. position: absolute;
  38. /* top: 80px; */
  39. left: 25px;
  40. }
  41. .r5_position {
  42. position: absolute;
  43. top: 160px;
  44. left: 310px;
  45. width: 40px;
  46. height: 150px;
  47. border-style: solid;
  48. border-color: aqua;
  49. }
  50. .div_relay_css {
  51. position: absolute;
  52. border-style: solid;
  53. border-color: aqua;
  54. text-align: center;
  55. font-size: 12px;
  56. }
  57. /* header */
  58. /* 文字輸入框 */
  59. .input-text {
  60. height: 25px;
  61. width: 40px;
  62. text-align: center;
  63. margin-left: 2px;
  64. margin-right: 5px;
  65. }
  66. /* 致動器狀態表格置中 */
  67. .label_ActuatorStatus {
  68. margin: auto;
  69. }
  70. /* 致動器 ON 樣式 */
  71. .input-button-on {
  72. color: #008CBA;
  73. border: 2px rgb(182, 181, 181) solid;
  74. background-color: whitesmoke;
  75. padding: 1px 3px;
  76. width: 45px;
  77. }
  78. /* 致動器 OFF 樣式 */
  79. .input-button-off {
  80. color: #707070;
  81. border: 2px rgb(192, 192, 192) solid;
  82. background-color: whitesmoke;
  83. padding: 1px 3px;
  84. width: 45px;
  85. }
  86. /* 輸入按鈕 */
  87. .input-button {
  88. font-size: 14px;
  89. color: #008CBA;
  90. border: 2px rgb(182, 181, 181) solid;
  91. background-color: whitesmoke;
  92. padding: 1px 3px;
  93. }
  94. /* 大表格樣式 */
  95. .table-all {
  96. font-size:18px;
  97. border:2px #cccccc solid;
  98. margin-left: 10px;
  99. margin-right: 10px;
  100. width: 98%;
  101. }
  102. /* footer */
  103. .footer{
  104. height: 40px;
  105. box-sizing: border-box;
  106. /* 設定footer絕對位置在底部 */
  107. position: absolute;
  108. bottom: 0px;
  109. width: 100%;
  110. background-color: #eee;
  111. text-align: center;
  112. }
  113. html, body {
  114. height: 100%;
  115. /* margin: 0; */
  116. position: relative;
  117. }
  118. #wrapper {
  119. /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
  120. min-height: 100%;
  121. /* 位置設為relative, 作為footer區塊位置的參考 */
  122. position: relative;
  123. }
  124. </style>
  125. </head>
  126. <body style="font-size: 18px;">
  127. <div id="wrapper" style="height: 1500px;">
  128. <div id="coffee_header">
  129. <!-- 匯入共同使用的 header.html 內容 -->
  130. {% include 'header.html' %}
  131. </div>
  132. <!-- 底圖 板子 -->
  133. <div id="board_pic" class="boardpic_position">
  134. <!-- 無標示版本 -->
  135. <!-- <img src="../static/img/0103_board_coffee1.0.png" width="905px" style="margin: auto;"> -->
  136. <!-- 有標示版本 -->
  137. <img src="../static/img/0103_board_coffee1.0_tag.png" width="900px" style="margin: auto;">
  138. </div>
  139. <!-- relay1 顯示框 -->
  140. <div id="relay1" tabindex="0" role="button" class="div_relay_css"
  141. style="top: 122px; left: 42px; width: 28px; height: 110px;">
  142. </div>
  143. <!-- relay2 顯示框 -->
  144. <div id="relay2" tabindex="0" role="button" class="div_relay_css"
  145. style="top: 122px; left: 85px; width: 28px; height: 110px;">
  146. </div>
  147. <!-- relay3 顯示框 -->
  148. <div id="relay3" tabindex="0" role="button" class="div_relay_css"
  149. style="top: 122px; left: 130px; width: 28px; height: 110px;">
  150. </div>
  151. <!-- relay4 顯示框 -->
  152. <div id="relay4" tabindex="0" role="button" class="div_relay_css"
  153. style="top: 122px; left: 170px; width: 28px; height: 110px;">
  154. </div>
  155. <!-- relay5 顯示框 -->
  156. <div id="relay5" tabindex="0" role="button" class="div_relay_css"
  157. style="top: 122px; left: 210px; width: 28px; height: 110px;">
  158. </div>
  159. <!-- relay6 顯示框 -->
  160. <div id="relay6" tabindex="0" role="button" class="div_relay_css"
  161. style="top: 122px; left: 250px; width: 28px; height: 110px;">
  162. </div>
  163. <!-- relay7 顯示框 -->
  164. <div id="relay7" tabindex="0" role="button" class="div_relay_css"
  165. style="top: 122px; left: 290px; width: 28px; height: 110px;">
  166. </div>
  167. <!-- relay8 顯示框 -->
  168. <div id="relay8" tabindex="0" role="button" class="div_relay_css"
  169. style="top: 122px; left: 335px; width: 28px; height: 110px;">
  170. </div>
  171. <!-- relay9 顯示框 -->
  172. <div id="relay9" tabindex="0" role="button" class="div_relay_css"
  173. style="top: 122px; left: 380px; width: 28px; height: 110px;">
  174. </div>
  175. <!-- relay10 顯示框 -->
  176. <div id="relay10" tabindex="0" role="button" class="div_relay_css"
  177. style="top: 122px; left: 420px; width: 28px; height: 110px;">
  178. </div>
  179. <!-- relay11 顯示框 -->
  180. <div id="relay11" tabindex="0" role="button" class="div_relay_css"
  181. style="top: 122px; left: 460px; width: 28px; height: 110px;">
  182. </div>
  183. <!-- relay12 顯示框 -->
  184. <div id="relay12" tabindex="0" role="button" class="div_relay_css"
  185. style="top: 122px; left: 504px; width: 28px; height: 110px;">
  186. </div>
  187. <!-- relay13 顯示框 -->
  188. <div id="relay13" tabindex="0" role="button" class="div_relay_css"
  189. style="top: 122px; left: 545px; width: 28px; height: 110px;">
  190. </div>
  191. <!-- relay14 顯示框 -->
  192. <div id="relay14" tabindex="0" role="button" class="div_relay_css"
  193. style="top: 122px; left: 585px; width: 28px; height: 110px;">
  194. </div>
  195. <!-- relay15 顯示框 -->
  196. <div id="relay15" tabindex="0" role="button" class="div_relay_css"
  197. style="top: 122px; left: 630px; width: 28px; height: 110px;">
  198. </div>
  199. <!-- relay16 顯示框 -->
  200. <div id="relay16" tabindex="0" role="button" class="div_relay_css"
  201. style="top: 122px; left: 670px; width: 28px; height: 110px;">
  202. </div>
  203. <!-- relay17 顯示框 -->
  204. <div id="relay17" tabindex="0" role="button" class="div_relay_css"
  205. style="top: 122px; left: 713px; width: 28px; height: 110px;">
  206. </div>
  207. <!-- relay18 顯示框 -->
  208. <div id="relay18" tabindex="0" role="button" class="div_relay_css"
  209. style="top: 122px; left: 755px; width: 28px; height: 110px;">
  210. </div>
  211. <!-- relay19 顯示框 -->
  212. <div id="relay19" tabindex="0" role="button" class="div_relay_css"
  213. style="top: 122px; left: 795px; width: 28px; height: 110px;">
  214. </div>
  215. <!-- relay20 顯示框 -->
  216. <div id="relay20" tabindex="0" role="button" class="div_relay_css"
  217. style="top: 122px; left: 840px; width: 28px; height: 110px;">
  218. </div>
  219. <!-- 類比 sensor_M4 顯示框 -->
  220. <div id="sensor_M4" tabindex="0" role="button" class="div_relay_css"
  221. style="top: 360px; left: 28px; width: 37px; height: 20px;">
  222. </div>
  223. <!-- 類比 sensor_M5 顯示框 -->
  224. <div id="sensor_M5" tabindex="0" role="button" class="div_relay_css"
  225. style="top: 390px; left: 28px; width: 37px; height: 20px;">
  226. </div>
  227. <!-- 類比 sensor_M7 顯示框 -->
  228. <div id="sensor_M7" tabindex="0" role="button" class="div_relay_css"
  229. style="top: 420px; left: 28px; width: 37px; height: 20px;">
  230. </div>
  231. <!-- PWM sensor_M10 顯示框 -->
  232. <div id="sensor_M10" tabindex="0" role="button" class="div_relay_css"
  233. style="top: 360px; left: 70px; width: 45px; height: 20px;">
  234. </div>
  235. <!-- PWM sensor_M2 顯示框 -->
  236. <div id="sensor_M2" tabindex="0" role="button" class="div_relay_css"
  237. style="top: 390px; left: 70px; width: 45px; height: 20px;">
  238. </div>
  239. <!-- PWM sensor_M3 顯示框 -->
  240. <div id="sensor_M3" tabindex="0" role="button" class="div_relay_css"
  241. style="top: 420px; left: 70px; width: 45px; height: 20px;">
  242. </div>
  243. <!-- 數位 sensor_M9 顯示框 -->
  244. <div id="sensor_M9" tabindex="0" role="button" class="div_relay_css"
  245. style="top: 450px; left: 28px; width: 37px; height: 20px;">
  246. </div>
  247. <!-- 數位 sensor_M12 顯示框 -->
  248. <div id="sensor_M12" tabindex="0" role="button" class="div_relay_css"
  249. style="top: 480px; left: 28px; width: 37px; height: 20px;">
  250. </div>
  251. <!-- 數位 sensor_M19 顯示框 -->
  252. <div id="sensor_M19" tabindex="0" role="button" class="div_relay_css"
  253. style="top: 505px; left: 28px; width: 37px; height: 20px;">
  254. </div>
  255. <!-- 數位 sensor_M14 顯示框 -->
  256. <div id="sensor_M14" tabindex="0" role="button" class="div_relay_css"
  257. style="top: 450px; left: 75px; width: 33px; height: 20px;">
  258. </div>
  259. <!-- 數位 sensor_M11 顯示框 -->
  260. <div id="sensor_M11" tabindex="0" role="button" class="div_relay_css"
  261. style="top: 480px; left: 75px; width: 33px; height: 20px;">
  262. </div>
  263. <!-- UART sensor_M16 顯示框 -->
  264. <div id="sensor_M16" tabindex="0" role="button" class="div_relay_css"
  265. style="top: 360px; left: 120px; width: 32px; height: 20px;">
  266. </div>
  267. <!-- UART sensor_M17 顯示框 -->
  268. <div id="sensor_M17" tabindex="0" role="button" class="div_relay_css"
  269. style="top: 390px; left: 120px; width: 32px; height: 20px;">
  270. </div>
  271. <!-- UART sensor_M18 顯示框 -->
  272. <div id="sensor_M18" tabindex="0" role="button" class="div_relay_css"
  273. style="top: 420px; left: 120px; width: 32px; height: 20px;">
  274. </div>
  275. <!-- i2c sensor_M15 顯示框 -->
  276. <div id="sensor_M15" tabindex="0" role="button" class="div_relay_css"
  277. style="top: 450px; left: 115px; width: 42px; height: 20px;">
  278. </div>
  279. <!-- 485 sensor_M8 顯示框 -->
  280. <div id="sensor_M8" tabindex="0" role="button" class="div_relay_css"
  281. style="top: 480px; left: 115px; width: 42px; height: 20px;">
  282. </div>
  283. <!-- ppa sensor_M6 顯示框 -->
  284. <div id="sensor_M6" tabindex="0" role="button" class="div_relay_css"
  285. style="top: 420px; left: 165px; width: 42px; height: 20px;">
  286. </div>
  287. <!-- ppa sensor_M13 顯示框 -->
  288. <div id="sensor_M13" tabindex="0" role="button" class="div_relay_css"
  289. style="top: 450px; left: 165px; width: 42px; height: 20px;">
  290. </div>
  291. <!-- ppa3 sensor_M1 顯示框 -->
  292. <div id="sensor_M1" tabindex="0" role="button" class="div_relay_css"
  293. style="top: 480px; left: 165px; width: 42px; height: 20px;">
  294. </div>
  295. <script>
  296. // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - relay
  297. function select_relay(id) {
  298. var select_relay_text = $("#select_relay_" + id).find(':selected').text()
  299. // console.log("select_relay_text: " + select_relay_text)
  300. if (select_relay_text == '') {
  301. $("#relay" + id).text('');
  302. document.getElementById("relay" + id).style.backgroundColor = 'transparent';
  303. } else {
  304. $("#relay" + id).text(select_relay_text);
  305. document.getElementById("relay" + id).style.backgroundColor = 'lightblue';
  306. document.getElementById("relay" + id).style.color = 'black';
  307. document.getElementById("relay" + id).style.fontWeight = '600';
  308. }
  309. }
  310. var sensorlist = ['', '分壓類比', 'PWM', 'PWM', '類比', '類比', '分壓類比', '類比', '485', '數位',
  311. 'PWM', '數位', '數位', '分壓類比', '數位', 'I2C', 'UART', 'UART', 'UART', '數位']
  312. // selectSensor
  313. function selectSensor(PinNum) {
  314. var Pin_sensor = $("#selectSensor_" + PinNum).find(':selected').text();
  315. // console.log("Pin_sensor: " + Pin_sensor)
  316. if (Pin_sensor == '') {
  317. $("#sensor_" + PinNum).text('');
  318. document.getElementById("sensor_" + PinNum).style.backgroundColor = 'transparent';
  319. } else {
  320. $("#sensor_" + PinNum).text(Pin_sensor);
  321. // alert("sensorlist[PinNum]]\n" + sensorlist[PinNum.substring(1)])
  322. if (sensorlist[PinNum.substring(1)] == '類比') {
  323. document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lightgreen';
  324. } else if (sensorlist[PinNum.substring(1)] == 'PWM') {
  325. document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lightcyan';
  326. } else if (sensorlist[PinNum.substring(1)] == '數位') {
  327. document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lightgoldenrodyellow';
  328. } else if (sensorlist[PinNum.substring(1)] == 'UART') {
  329. document.getElementById("sensor_" + PinNum).style.backgroundColor = 'linen';
  330. } else if (sensorlist[PinNum.substring(1)] == '分壓類比') {
  331. document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lavender';
  332. } else if (sensorlist[PinNum.substring(1)] == 'I2C' || sensorlist[PinNum.substring(1)] == '485') {
  333. document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lightpink';
  334. }
  335. document.getElementById("sensor_" + PinNum).style.color = 'black';
  336. document.getElementById("sensor_" + PinNum).style.fontWeight = '600';
  337. }
  338. }
  339. // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - 類比
  340. function select_analog(id) {
  341. var select_analog_text = $("#select_analog_" + id).find(':selected').text()
  342. console.log("select_analog_: " + select_analog_text)
  343. if (select_analog_text == ' ') {
  344. $("#analog" + id).text('');
  345. document.getElementById("analog" + id).style.backgroundColor = 'transparent';
  346. } else {
  347. $("#analog" + id).text(select_analog_text);
  348. document.getElementById("analog" + id).style.backgroundColor = 'lightgreen';
  349. document.getElementById("analog" + id).style.color = 'black';
  350. document.getElementById("analog" + id).style.fontWeight = '600';
  351. }
  352. }
  353. // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - PWM
  354. function select_pwm(id) {
  355. var select_pwm_text = $("#select_pwm_" + id).find(':selected').text()
  356. console.log("select_pwm_: " + select_pwm_text)
  357. if (select_pwm_text == ' ') {
  358. $("#pwm" + id).text('');
  359. document.getElementById("pwm" + id).style.backgroundColor = 'transparent';
  360. } else {
  361. $("#pwm" + id).text(select_pwm_text);
  362. document.getElementById("pwm" + id).style.backgroundColor = 'lightcyan';
  363. document.getElementById("pwm" + id).style.color = 'black';
  364. document.getElementById("pwm" + id).style.fontWeight = '600';
  365. }
  366. }
  367. // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - 數位
  368. function select_digital(id) {
  369. var select_digital_text = $("#select_digital_" + id).find(':selected').text()
  370. console.log("select_digital_: " + select_digital_text)
  371. if (select_digital_text == ' ') {
  372. $("#digital" + id).text('');
  373. document.getElementById("digital" + id).style.backgroundColor = 'transparent';
  374. } else {
  375. $("#digital" + id).text(select_digital_text.slice(0,2));
  376. document.getElementById("digital" + id).style.backgroundColor = 'lightgoldenrodyellow';
  377. document.getElementById("digital" + id).style.color = 'black';
  378. document.getElementById("digital" + id).style.fontWeight = '600';
  379. }
  380. }
  381. // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - UART
  382. function select_uart(id) {
  383. var select_uart_text = $("#select_uart_" + id).find(':selected').text()
  384. console.log("select_uart_: " + select_uart_text)
  385. if (select_uart_text == ' ') {
  386. $("#uart" + id).text('');
  387. document.getElementById("uart" + id).style.backgroundColor = 'transparent';
  388. } else {
  389. $("#uart" + id).text(select_uart_text);
  390. document.getElementById("uart" + id).style.backgroundColor = 'linen';
  391. document.getElementById("uart" + id).style.color = 'black';
  392. document.getElementById("uart" + id).style.fontWeight = '600';
  393. }
  394. }
  395. // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - I2C
  396. function select_i2c(id) {
  397. var select_i2c_text = $("#select_i2c_" + id).find(':selected').text()
  398. console.log("select_i2c_: " + select_i2c_text)
  399. if (select_i2c_text == ' ') {
  400. $("#i2c" + id).text('');
  401. document.getElementById("i2c" + id).style.backgroundColor = 'transparent';
  402. } else {
  403. $("#i2c" + id).text(select_i2c_text.slice(0,3));
  404. document.getElementById("i2c" + id).style.backgroundColor = 'lightpink';
  405. document.getElementById("i2c" + id).style.color = 'black';
  406. document.getElementById("i2c" + id).style.fontWeight = '600';
  407. document.getElementById("i2c" + id).style.fontSize = '10px';
  408. }
  409. }
  410. // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - 485
  411. function select_485(id) {
  412. var select_485_text = $("#select_485_" + id).find(':selected').text()
  413. console.log("select_485_: " + select_485_text)
  414. if (select_485_text == ' ') {
  415. $("#485" + id).text('');
  416. document.getElementById("485" + id).style.backgroundColor = 'transparent';
  417. } else {
  418. $("#485" + id).text(select_485_text);
  419. document.getElementById("485" + id).style.backgroundColor = 'lightpink';
  420. document.getElementById("485" + id).style.color = 'black';
  421. document.getElementById("485" + id).style.fontWeight = '600';
  422. document.getElementById("485" + id).style.fontSize = '10px';
  423. }
  424. }
  425. // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - 分壓類比
  426. function select_ppa(id) {
  427. var select_ppa_text = $("#select_ppa_" + id).find(':selected').text()
  428. console.log("select_ppa_: " + select_ppa_text)
  429. if (select_ppa_text == ' ') {
  430. $("#ppa" + id).text('');
  431. document.getElementById("ppa" + id).style.backgroundColor = 'transparent';
  432. } else {
  433. $("#ppa" + id).text(select_ppa_text);
  434. document.getElementById("ppa" + id).style.backgroundColor = 'lavender';
  435. document.getElementById("ppa" + id).style.color = 'black';
  436. document.getElementById("ppa" + id).style.fontWeight = '600';
  437. document.getElementById("ppa" + id).style.fontSize = '10px';
  438. }
  439. }
  440. </script>
  441. <div style="position: absolute; left: 953px;">
  442. <table border="5" style="border: 3px white solid;">
  443. <tr>
  444. <td>
  445. ethernet :
  446. <select id="select_ethernet_1" onchange="" class="select-input">
  447. <option>OFF</option>
  448. <option selected>ON</option>
  449. </select>
  450. <br>
  451. wifi :
  452. <select id="select_wifi_1" onchange="" class="select-input">
  453. <option>OFF</option>
  454. <option selected>ON</option>
  455. </select>
  456. <br>
  457. zigbee :
  458. <select id="select_zigbee_1" onchange="" class="select-input">
  459. <option>OFF</option>
  460. <option selected>ON</option>
  461. </select>
  462. <br>
  463. </td>
  464. </tr>
  465. <tr>
  466. <!-- Relay 1-10 -->
  467. <td style="background-color: lightblue;">
  468. Relay 1 :
  469. <select id="select_relay_1" onchange="select_relay('1')" class="select-input">
  470. <option></option>
  471. <option value="vacuum" selected>真空吸料機</option>
  472. <option value="solenoidvalve">電磁閥</option>
  473. <option value="diskvalve">蝴蝶閥</option>
  474. <option value="warninglight">警示燈</option>
  475. <option value="camera">攝影機</option>
  476. <option value="heater">電熱管</option>
  477. <option value="pump">雙核泵</option>
  478. </select>
  479. <br>
  480. Relay 2 :
  481. <select id="select_relay_2" onchange="select_relay('2')" class="select-input">
  482. <option></option>
  483. <option value="vacuum">真空吸料機</option>
  484. <option value="solenoidvalve" selected>電磁閥</option>
  485. <option value="diskvalve">蝴蝶閥</option>
  486. <option value="warninglight">警示燈</option>
  487. <option value="camera">攝影機</option>
  488. <option value="heater">電熱管</option>
  489. <option value="pump">雙核泵</option>
  490. </select>
  491. <br>
  492. Relay 3 :
  493. <select id="select_relay_3" onchange="select_relay('3')" class="select-input">
  494. <option></option>
  495. <option value="vacuum">真空吸料機</option>
  496. <option value="solenoidvalve">電磁閥</option>
  497. <option value="diskvalve" selected>蝴蝶閥</option>
  498. <option value="warninglight">警示燈</option>
  499. <option value="camera">攝影機</option>
  500. <option value="heater">電熱管</option>
  501. <option value="pump">雙核泵</option>
  502. </select>
  503. <br>
  504. Relay 4 :
  505. <select id="select_relay_4" onchange="select_relay('4')" class="select-input">
  506. <option></option>
  507. <option value="vacuum">真空吸料機</option>
  508. <option value="solenoidvalve">電磁閥</option>
  509. <option value="diskvalve">蝴蝶閥</option>
  510. <option value="warninglight" selected>警示燈</option>
  511. <option value="camera">攝影機</option>
  512. <option value="heater">電熱管</option>
  513. <option value="pump">雙核泵</option>
  514. </select>
  515. <br>
  516. Relay 5 :
  517. <select id="select_relay_5" onchange="select_relay('5')" class="select-input">
  518. <option></option>
  519. <option value="vacuum">真空吸料機</option>
  520. <option value="solenoidvalve">電磁閥</option>
  521. <option value="diskvalve">蝴蝶閥</option>
  522. <option value="warninglight">警示燈</option>
  523. <option value="camera" selected>攝影機</option>
  524. <option value="heater">電熱管</option>
  525. <option value="pump">雙核泵</option>
  526. </select>
  527. <br>
  528. Relay 6 :
  529. <select id="select_relay_6" onchange="select_relay('6')" class="select-input">
  530. <option></option>
  531. <option value="vacuum">真空吸料機</option>
  532. <option value="solenoidvalve">電磁閥</option>
  533. <option value="diskvalve">蝴蝶閥</option>
  534. <option value="warninglight">警示燈</option>
  535. <option value="camera">攝影機</option>
  536. <option value="heater" selected>電熱管</option>
  537. <option value="pump">雙核泵</option>
  538. </select>
  539. <br>
  540. Relay 7 :
  541. <select id="select_relay_7" onchange="select_relay('7')" class="select-input">
  542. <option></option>
  543. <option value="vacuum">真空吸料機</option>
  544. <option value="solenoidvalve">電磁閥</option>
  545. <option value="diskvalve">蝴蝶閥</option>
  546. <option value="warninglight">警示燈</option>
  547. <option value="camera">攝影機</option>
  548. <option value="heater">電熱管</option>
  549. <option value="pump" selected>雙核泵</option>
  550. </select>
  551. <br>
  552. Relay 8 :
  553. <select id="select_relay_8" onchange="select_relay('8')" class="select-input">
  554. <option></option>
  555. <option value="vacuum">真空吸料機</option>
  556. <option value="solenoidvalve">電磁閥</option>
  557. <option value="diskvalve">蝴蝶閥</option>
  558. <option value="warninglight">警示燈</option>
  559. <option value="camera">攝影機</option>
  560. <option value="heater">電熱管</option>
  561. <option value="pump">雙核泵</option>
  562. </select>
  563. <br>
  564. Relay 9 :
  565. <select id="select_relay_9" onchange="select_relay('9')" class="select-input">
  566. <option></option>
  567. <option value="vacuum">真空吸料機</option>
  568. <option value="solenoidvalve">電磁閥</option>
  569. <option value="diskvalve">蝴蝶閥</option>
  570. <option value="warninglight">警示燈</option>
  571. <option value="camera">攝影機</option>
  572. <option value="heater">電熱管</option>
  573. <option value="pump">雙核泵</option>
  574. </select>
  575. <br>
  576. Relay 10 :
  577. <select id="select_relay_10" onchange="select_relay('10')" class="select-input">
  578. <option></option>
  579. <option value="vacuum">真空吸料機</option>
  580. <option value="solenoidvalve">電磁閥</option>
  581. <option value="diskvalve">蝴蝶閥</option>
  582. <option value="warninglight">警示燈</option>
  583. <option value="camera">攝影機</option>
  584. <option value="heater">電熱管</option>
  585. <option value="pump">雙核泵</option>
  586. </select>
  587. </td>
  588. <td></td>
  589. <!-- Relay 11-20 -->
  590. <td style="background-color: lightblue;">
  591. Relay 11 :
  592. <select id="select_relay_11" onchange="select_relay('11')" class="select-input">
  593. <option></option>
  594. <option value="vacuum">真空吸料機</option>
  595. <option value="solenoidvalve">電磁閥</option>
  596. <option value="diskvalve">蝴蝶閥</option>
  597. <option value="warninglight">警示燈</option>
  598. <option value="camera">攝影機</option>
  599. <option value="heater">電熱管</option>
  600. <option value="pump">雙核泵</option>
  601. </select>
  602. <br>
  603. Relay 12 :
  604. <select id="select_relay_12" onchange="select_relay('12')" class="select-input">
  605. <option></option>
  606. <option value="vacuum">真空吸料機</option>
  607. <option value="solenoidvalve">電磁閥</option>
  608. <option value="diskvalve">蝴蝶閥</option>
  609. <option value="warninglight">警示燈</option>
  610. <option value="camera">攝影機</option>
  611. <option value="heater">電熱管</option>
  612. <option value="pump">雙核泵</option>
  613. </select>
  614. <br>
  615. Relay 13 :
  616. <select id="select_relay_13" onchange="select_relay('13')" class="select-input">
  617. <option></option>
  618. <option value="vacuum">真空吸料機</option>
  619. <option value="solenoidvalve">電磁閥</option>
  620. <option value="diskvalve">蝴蝶閥</option>
  621. <option value="warninglight">警示燈</option>
  622. <option value="camera">攝影機</option>
  623. <option value="heater">電熱管</option>
  624. <option value="pump">雙核泵</option>
  625. </select>
  626. <br>
  627. Relay 14 :
  628. <select id="select_relay_14" onchange="select_relay('14')" class="select-input">
  629. <option></option>
  630. <option value="vacuum">真空吸料機</option>
  631. <option value="solenoidvalve">電磁閥</option>
  632. <option value="diskvalve">蝴蝶閥</option>
  633. <option value="warninglight">警示燈</option>
  634. <option value="camera">攝影機</option>
  635. <option value="heater">電熱管</option>
  636. <option value="pump">雙核泵</option>
  637. </select>
  638. <br>
  639. Relay 15 :
  640. <select id="select_relay_15" onchange="select_relay('15')" class="select-input">
  641. <option></option>
  642. <option value="vacuum">真空吸料機</option>
  643. <option value="solenoidvalve">電磁閥</option>
  644. <option value="diskvalve">蝴蝶閥</option>
  645. <option value="warninglight">警示燈</option>
  646. <option value="camera">攝影機</option>
  647. <option value="heater">電熱管</option>
  648. <option value="pump">雙核泵</option>
  649. </select>
  650. <br>
  651. Relay 16 :
  652. <select id="select_relay_16" onchange="select_relay('16')" class="select-input">
  653. <option></option>
  654. <option value="vacuum">真空吸料機</option>
  655. <option value="solenoidvalve">電磁閥</option>
  656. <option value="diskvalve">蝴蝶閥</option>
  657. <option value="warninglight">警示燈</option>
  658. <option value="camera">攝影機</option>
  659. <option value="heater">電熱管</option>
  660. <option value="pump">雙核泵</option>
  661. </select>
  662. <br>
  663. Relay 17 :
  664. <select id="select_relay_17" onchange="select_relay('17')" class="select-input">
  665. <option></option>
  666. <option value="vacuum">真空吸料機</option>
  667. <option value="solenoidvalve">電磁閥</option>
  668. <option value="diskvalve">蝴蝶閥</option>
  669. <option value="warninglight">警示燈</option>
  670. <option value="camera">攝影機</option>
  671. <option value="heater">電熱管</option>
  672. <option value="pump">雙核泵</option>
  673. </select>
  674. <br>
  675. Relay 18 :
  676. <select id="select_relay_18" onchange="select_relay('18')" class="select-input">
  677. <option></option>
  678. <option value="vacuum">真空吸料機</option>
  679. <option value="solenoidvalve">電磁閥</option>
  680. <option value="diskvalve">蝴蝶閥</option>
  681. <option value="warninglight">警示燈</option>
  682. <option value="camera">攝影機</option>
  683. <option value="heater">電熱管</option>
  684. <option value="pump">雙核泵</option>
  685. </select>
  686. <br>
  687. Relay 19 :
  688. <select id="select_relay_19" onchange="select_relay('19')" class="select-input">
  689. <option></option>
  690. <option value="vacuum">真空吸料機</option>
  691. <option value="solenoidvalve">電磁閥</option>
  692. <option value="diskvalve">蝴蝶閥</option>
  693. <option value="warninglight">警示燈</option>
  694. <option value="camera">攝影機</option>
  695. <option value="heater">電熱管</option>
  696. <option value="pump">雙核泵</option>
  697. </select>
  698. <br>
  699. Relay 20 :
  700. <select id="select_relay_20" onchange="select_relay('20')" class="select-input">
  701. <option></option>
  702. <option value="vacuum" selected>真空吸料機</option>
  703. <option value="solenoidvalve">電磁閥</option>
  704. <option value="diskvalve">蝴蝶閥</option>
  705. <option value="warninglight">警示燈</option>
  706. <option value="camera">攝影機</option>
  707. <option value="heater">電熱管</option>
  708. <option value="pump">雙核泵</option>
  709. </select>
  710. <br>
  711. </td>
  712. </tr>
  713. <tr>
  714. <td> </td>
  715. </tr>
  716. <tr>
  717. <!-- 類比 -->
  718. <td style="background-color: lightgreen;">
  719. 類比 M4 :
  720. <select id="selectSensor_M4" onchange="selectSensor('M4')" class="select-input">
  721. <option></option>
  722. <option selected>PH</option>
  723. <option>DO</option>
  724. <option>ORP</option>
  725. </select>
  726. <br>
  727. 類比 M5 :
  728. <select id="selectSensor_M5" onchange="selectSensor('M5')" class="select-input">
  729. <option></option>
  730. <option>PH</option>
  731. <option selected>DO</option>
  732. <option>ORP</option>
  733. </select>
  734. <br>
  735. 類比 M7 :
  736. <select id="selectSensor_M7" onchange="selectSensor('M7')" class="select-input">
  737. <option></option>
  738. <option>PH</option>
  739. <option>DO</option>
  740. <option selected>ORP</option>
  741. </select>
  742. <br>
  743. </td>
  744. <td></td>
  745. <!-- PWM -->
  746. <td style="background-color: lightcyan;">
  747. PWM M10 :
  748. <select id="selectSensor_M10" onchange="selectSensor('M10')" class="select-input">
  749. <option></option>
  750. <option selected>Motor</option>
  751. </select>
  752. <br>
  753. PWM M2 :
  754. <select id="selectSensor_M2" onchange="selectSensor('M2')" class="select-input">
  755. <option></option>
  756. <option selected>Servo</option>
  757. </select>
  758. <br>
  759. PWM M3 :
  760. <select id="selectSensor_M3" onchange="selectSensor('M3')" class="select-input">
  761. <option></option>
  762. <option selected>Servo</option>
  763. </select>
  764. <br>
  765. </td>
  766. </tr>
  767. <tr>
  768. <td></td>
  769. </tr>
  770. <tr>
  771. <!-- 數位 1-3 -->
  772. <td style="background-color: lightgoldenrodyellow;">
  773. 數位 M9 :
  774. <select id="selectSensor_M9" onchange="selectSensor('M9')" class="select-input">
  775. <option></option>
  776. <option selected>SHT11</option>
  777. <option>WATERLEVEL</option>
  778. <option>feedback</option>
  779. </select>
  780. <br>
  781. 數位 M12 :
  782. <select id="selectSensor_M12" onchange="selectSensor('M12')" class="select-input">
  783. <option></option>
  784. <option>SHT11</option>
  785. <option selected>WATERLEVEL</option>
  786. <option>feedback</option>
  787. </select>
  788. <br>
  789. 數位 M19 :
  790. <select id="selectSensor_M19" onchange="selectSensor('M19')" class="select-input">
  791. <option></option>
  792. <option>SHT11</option>
  793. <option>WATERLEVEL</option>
  794. <option selected>feedback</option>
  795. </select>
  796. <br>
  797. </td>
  798. <td></td>
  799. <!-- 數位 4-5 -->
  800. <td style="background-color: lightgoldenrodyellow;">
  801. 數位 M14 :
  802. <select id="selectSensor_M14" onchange="selectSensor('M14')" class="select-input">
  803. <option></option>
  804. <option selected>SHT11</option>
  805. <option>WATERLEVEL</option>
  806. <option>feedback</option>
  807. </select>
  808. <br>
  809. 數位 M11 :
  810. <select id="selectSensor_M11" onchange="selectSensor('M11')" class="select-input">
  811. <option></option>
  812. <option selected>SHT11</option>
  813. <option>WATERLEVEL</option>
  814. <option>feedback</option>
  815. </select>
  816. <br>
  817. <br>
  818. </td>
  819. </tr>
  820. <tr>
  821. <td> </td>
  822. </tr>
  823. <tr>
  824. <!-- UART -->
  825. <td style="background-color: linen;">
  826. UART M16 :
  827. <select id="selectSensor_M16" onchange="selectSensor('M16')" class="select-input">
  828. <option></option>
  829. <option selected>EC</option>
  830. </select>
  831. <br>
  832. UART M17 :
  833. <select id="selectSensor_M17" onchange="selectSensor('M17')" class="select-input">
  834. <option></option>
  835. </select>
  836. <br>
  837. UART M18 :
  838. <select id="selectSensor_M18" onchange="selectSensor('M18')" class="select-input">
  839. <option></option>
  840. </select>
  841. <br>
  842. </td>
  843. <td></td>
  844. <!-- 分壓類比 1 -->
  845. <td style="background-color:lavender;">
  846. <br>
  847. <br>
  848. 分壓類比 M6:
  849. <select id="selectSensor_M6" onchange="selectSensor('M6')" class="select-input">
  850. <option></option>
  851. <option selected>SEN0189</option>
  852. </select>
  853. <br>
  854. </td>
  855. </tr>
  856. <tr>
  857. <!-- I2C -->
  858. <!-- 485 -->
  859. <td style="background-color: lightpink;">
  860. I2C M15:
  861. <select id="selectSensor_M15" onchange="selectSensor('M15')" class="select-input">
  862. <option></option>
  863. <option selected>BMP280</option>
  864. </select>
  865. <br>
  866. 485 M8:
  867. <select id="selectSensor_M8" onchange="selectSensor('M8')" class="select-input">
  868. <option></option>
  869. <option selected>Soil</option>
  870. </select>
  871. <br>
  872. </td>
  873. <td></td>
  874. <!-- 分壓類比 2-3 -->
  875. <td style="background-color:lavender;">
  876. 分壓類比 M13:
  877. <select id="selectSensor_M13" onchange="selectSensor('M13')" class="select-input">
  878. <option></option>
  879. <option selected>SEN0189</option>
  880. </select>
  881. <br>
  882. 分壓類比 M1:
  883. <select id="selectSensor_M1" onchange="selectSensor('M1')" class="select-input">
  884. <option></option>
  885. <option selected>SonicESMUS07</option>
  886. </select>
  887. <br>
  888. </td>
  889. </tr>
  890. <tr>
  891. <td> </td>
  892. </tr>
  893. <tr>
  894. <td>
  895. <input type="button" id="board_getValue" value="制動器感測器項目取值" onclick="getValue()"><br>
  896. <br>
  897. <br>
  898. <input type="button" id="test" value="積木取值" onclick="test();">
  899. <input type="button" id="test" value="積木MQTT" onclick="MQTTtest();"><br>
  900. </td>
  901. </tr>
  902. </table>
  903. </div>
  904. <!-- 積木程式 start -->
  905. <div id="box" style="position: absolute; top: 740px;">
  906. <div id="newcondition_1" class="newcondition_css">
  907. <!-- 總 條件 -->
  908. <div id="condition1">
  909. <!-- 子條件 1_1-->
  910. <div id="condition1_1">
  911. 條件
  912. <select id="cond_z1_1">
  913. <option value="if">if</option>
  914. <option value="elif">elif</option>
  915. <option value="else">else</option>
  916. </select>
  917. <select id="cond_tank1_1">
  918. <option value="D1">乾燥桶 D1</option>
  919. <option value="D2">乾燥桶 D2</option>
  920. <option value="D3">乾燥桶 D3</option>
  921. <option value="D4">乾燥桶 D4</option>
  922. <option value="D5">乾燥桶 D5</option>
  923. <option value="D6">乾燥桶 D6</option>
  924. <option value="D7">乾燥桶 D7</option>
  925. <option value="D8">乾燥桶 D8</option>
  926. <option value="D9">乾燥桶 D9</option>
  927. <option value="D10">乾燥桶 D10</option>
  928. <option value="D11">乾燥桶 D11</option>
  929. <option value="D12">乾燥桶 D12</option>
  930. </select>
  931. <select id="cond_a1_1">
  932. <option value="">制動器 / 感測器</option>
  933. <optgroup label="制動器狀態">
  934. </optgroup>
  935. <optgroup label="感測器數值">
  936. </optgroup>
  937. </select>
  938. <select id="cond_b1_1">
  939. <!-- <option value="equal">==</option>
  940. <option value="morethan">&gt;=</option>
  941. <option value="lessthan">&lt;=</option> -->
  942. <option value="MoreThan">&gt;</option>
  943. <option value="MoreThanEqualTo">&gt;=</option>
  944. <option value="Equal" selected>==</option>
  945. <option value="LessThanEqualTo">&lt;=</option>
  946. <option value="LessThan">&lt;</option>
  947. </select>
  948. <input list="cond_list_c1_1" id="cond_c1_1">
  949. <datalist id="cond_list_c1_1">
  950. <option value="on">
  951. <option value="off">
  952. <option value="(或請自行輸入數值)">
  953. </datalist>
  954. <input type="button" class="input-cond-add" id="cond_add1_1" value="條件++" onclick="cond_add(cond_add1_1);"><br>
  955. <script>
  956. var cond_add_child_i = 1 // 這是子條件
  957. function cond_add(evt) { // cond_add1_1 下一個是 cond_add1(條件)_2(子條件)
  958. evt.style.display = "none"; // 不顯示原按鈕
  959. var condadd_parent_num = String(evt.id).split('_')[1].slice(3, ) // 把第一個條件的編號記下
  960. // console.log("condadd_parent_num: " + condadd_parent_num)
  961. cond_add_child_i++
  962. var html = '';
  963. html +=
  964. '<div id="condition' + condadd_parent_num + '_' + cond_add_child_i + '">' +
  965. '<select id="cond_d' + condadd_parent_num + '_' + cond_add_child_i + '">' +
  966. '<option value="and">and</option>' +
  967. '<option value="or">or</option>' +
  968. '</select> ' +
  969. '<select id="cond_a' + condadd_parent_num + '_' + cond_add_child_i + '">' +
  970. '<option value="">制動器 / 感測器</option>' +
  971. '<optgroup label="制動器狀態">';
  972. // relay 取值
  973. relay_dict = {};
  974. for (let i = 1; i < 21; i++) {
  975. var relay_text = $("#select_relay_" + i).find(':selected').val();
  976. if (relay_text != '') {
  977. relay_dict["R" + i] = "R" + i + "_" + relay_text;
  978. }
  979. }
  980. for (let r in relay_dict) {
  981. html += '<option value="' + relay_dict[r] + '">' + relay_dict[r] + '</option>';
  982. }
  983. html +=
  984. '</optgroup>' +
  985. '<optgroup label="感測器數值">';
  986. // sensor 取值 dict
  987. sensor_dict = {};
  988. for (let i = 1; i < 20; i++) {
  989. var sensor_text = $("#selectSensor_M" + i).find(':selected').text();
  990. if (sensor_text != '') {
  991. sensor_dict["M" + i] = "M" + i + "_" + sensor_text;
  992. }
  993. }
  994. for (let s in sensor_dict) {
  995. html += '<option value="' + sensor_dict[s] + '">' + sensor_dict[s] + '</option>';
  996. }
  997. html +=
  998. '</optgroup>' +
  999. '</select> ' +
  1000. '<select id="cond_b' + condadd_parent_num + '_' + cond_add_child_i + '">' +
  1001. '<option value="MoreThan">&gt;</option>' +
  1002. '<option value="MoreThanEqualTo">&gt;=</option>' +
  1003. '<option value="Equal" selected>==</option>' +
  1004. '<option value="LessThanEqualTo">&lt;=</option>' +
  1005. '<option value="LessThan">&lt;</option>' +
  1006. '</select> ' +
  1007. '<input list="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '" id="cond_c' + condadd_parent_num + '_' + cond_add_child_i + '">' +
  1008. '<datalist id="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '">' +
  1009. '<option value="on">' +
  1010. '<option value="off">' +
  1011. '<option value="(或請自行輸入數值)">' +
  1012. '</datalist> ' +
  1013. '<input type="button" class="input-cond-delete" id="cond_del' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件--" onclick="cond_del(\'' + condadd_parent_num + '_' + cond_add_child_i + '\');">' +
  1014. '<input type="button" class="input-cond-add" id="cond_add' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件++" onclick="cond_add(cond_add' + condadd_parent_num + '_' + cond_add_child_i + ');"><br>' +
  1015. '</div>';
  1016. var divbox = document.getElementById('condition' + condadd_parent_num);
  1017. divbox.insertAdjacentHTML('beforeend', html);
  1018. }
  1019. function cond_del(evt) {
  1020. // console.log('evt: ' + evt)
  1021. var del_cond_child = document.getElementById('condition' + evt);
  1022. // console.log("del_cond_child: " + del_cond_child)
  1023. del_cond_child.innerHTML = ""
  1024. var parentObj = del_cond_child.parentNode; // 取得欲刪除 div 的父類別
  1025. parentObj.removeChild(del_cond_child) // 刪除 div
  1026. // 上一個按鈕要顯示出來
  1027. var del_cond_parent_num = String(evt).split('_')[0]
  1028. var del_cond_child_num = String(evt).split('_')[1]
  1029. // console.log('del_cond_parent_num: ' + del_cond_parent_num)
  1030. // console.log('del_cond_child_num: ' + del_cond_child_num)
  1031. var button_return_id = document.getElementById('cond_add' + del_cond_parent_num + '_' + String(parseInt(del_cond_child_num)-1));
  1032. // console.log("test: " + 'cond_add' + del_cond_parent_num + '_' + String(parseInt(del_cond_child_num)-1))
  1033. // console.log("button_return_id: " + button_return_id) // null
  1034. if (button_return_id == null) {
  1035. var button_return_id = document.getElementById('cond_add' + del_cond_parent_num + '_1');
  1036. }
  1037. button_return_id.style.display = "inline";
  1038. }
  1039. </script>
  1040. </div>
  1041. </div>
  1042. <div id="action1">
  1043. <div id="action1_1">
  1044. 物件
  1045. <select id="do_obj1_1" onChange="renew('1_1', this.selectedIndex);">
  1046. <option value="">制動器 / 暫停秒數 / 桶槽狀態</option>
  1047. </select>
  1048. 動作
  1049. <div id="do_action1_1" style="display: inline-block;">
  1050. </div>
  1051. <input type="button" class="input-act-add" id="act_add1_1" value="物件動作++" onclick="act_add(act_add1_1);"><br>
  1052. <script>
  1053. var act_add_child_i = 1
  1054. function act_add(evt) {
  1055. evt.style.display = "none";
  1056. var actadd_parent_num = String(evt.id).split('_')[1].slice(3, )
  1057. // console.log("actadd_parent_num: " + actadd_parent_num)
  1058. act_add_child_i++;
  1059. var html = '';
  1060. html +=
  1061. '<div id="action' + actadd_parent_num + '_' + act_add_child_i + '">' +
  1062. '物件 ' +
  1063. '<select id="do_obj' + actadd_parent_num + '_' + act_add_child_i + '" onChange="renew(\'' + actadd_parent_num + '_' + act_add_child_i + '\', this.selectedIndex);">' +
  1064. '<option value="">制動器 / 暫停秒數 / 桶槽狀態</option>' +
  1065. '<optgroup label="制動器狀態">';
  1066. // relay 取值
  1067. relay_dict = {};
  1068. for (let i = 1; i < 21; i++) {
  1069. var relay_text = $("#select_relay_" + i).find(':selected').val();
  1070. if (relay_text != '') {
  1071. relay_dict["R" + i] = "R" + i + "_" + relay_text;
  1072. }
  1073. }
  1074. for (let r in relay_dict) {
  1075. html += '<option value="' + relay_dict[r] + '">' + relay_dict[r] + '</option>';
  1076. }
  1077. html +=
  1078. '</optgroup>' +
  1079. '<option value="' + 'sleep' + '">' + 'sleep' + '</option>' +
  1080. '<option value="' + 'tankstatus' + '">' + 'tankstatus' + '</option>' +
  1081. '</select> ' +
  1082. '動作 ' +
  1083. '<div id="do_action' + actadd_parent_num + '_' + act_add_child_i + '" style="display: inline-block;">' +
  1084. '</div>' +
  1085. // '<select id="do_act' + actadd_parent_num + '_' + act_add_child_i + '">' +
  1086. // '<option value="">請由左方選取物件</option>' +
  1087. // '</select> ' +
  1088. '<input type="button" class="input-act-delete" id="act_del' + actadd_parent_num + '_' + act_add_child_i + '" value="物件動作--" onclick="act_del(\'' + actadd_parent_num + '_' + act_add_child_i + '\');">' +
  1089. '<input type="button" class="input-act-add" id="act_add' + actadd_parent_num + '_' + act_add_child_i + '" value="物件動作++" onclick="act_add(act_add' + actadd_parent_num + '_' + act_add_child_i + ');"><br>' +
  1090. '</div>';
  1091. var divbox = document.getElementById('action' + actadd_parent_num);
  1092. divbox.insertAdjacentHTML('beforeend', html);
  1093. }
  1094. function act_del(evt) {
  1095. var del_action = document.getElementById('action' + evt);
  1096. del_action.innerHTML = ""
  1097. var parentObj = del_action.parentNode; // 取得欲刪除 div 的父類別
  1098. parentObj.removeChild(del_action) // 刪除 div
  1099. var del_act_parent_num = String(evt).split('_')[0]
  1100. var del_act_child_num = String(evt).split('_')[1]
  1101. // console.log('del_act_parent_num: ' + del_act_parent_num)
  1102. // console.log('del_act_child_num: ' + del_act_child_num)
  1103. var button_return_id = document.getElementById('act_add' + del_act_parent_num + '_' + String(parseInt(del_act_child_num)-1));
  1104. // console.log("test: " + 'cond_add' + del_act_parent_num + '_' + String(parseInt(del_act_child_num)-1))
  1105. // console.log("button_return_id: " + button_return_id) // null
  1106. if (button_return_id == null) {
  1107. var button_return_id = document.getElementById('act_add' + del_act_parent_num + '_1');
  1108. }
  1109. button_return_id.style.display = "inline";
  1110. }
  1111. </script>
  1112. </div>
  1113. </div>
  1114. <input type="button" class="input-add" id="add1" value="條件物件動作++" onclick="Add(add1);">
  1115. <script>
  1116. var new_condition_i = 1
  1117. function Add(evt) { // 網頁初始按鈕 onclick="Add(add1);
  1118. evt.style.display = "none"; // 元素不顯示。將 add1 的 input-button 不顯示
  1119. new_condition_i++; // 設定編號用
  1120. // var div = document.createElement('div'); // 輸出 <div></div>。此時並不會顯示,
  1121. // 需透過 appendChild()、insertBefore() 或 replaceChild() 等方法將新元素加入至指定的位置之後才會顯示。
  1122. // var cond_number = String(evt).slice(3, ) // 目前的 condition 條件物件動作 數 (最外層)
  1123. // var cond_a = 'cond_a' + cond_number + '_' + new_condition_i; // [條件] 左方 : 制動器感測器
  1124. // var cond_b = 'cond_b' + cond_number + '_' + new_condition_i; // [條件] 中間 : > / = / <
  1125. // var cond_c = 'cond_c' + cond_number + '_' + new_condition_i; // [條件] 右方 : ON / OFF / 數值
  1126. // var cond_d = 'cond_d' + cond_number + '_' + new_condition_i; // 條件] 最左方條件連接 : and / or
  1127. // div.id = 'newcondition_' + new_condition_i; // 設定 div 的 id
  1128. // div.style.marginTop = "10px"; // 新增的 div 設定 marginTop 屬性值
  1129. var html = ''
  1130. // 新增的條件
  1131. html +=
  1132. '<div id="newcondition_' + new_condition_i + '" class="newcondition_css">' +
  1133. '<div id="condition' + new_condition_i + '">' +
  1134. '<div id="condition' + new_condition_i + '_1">' +
  1135. '條件 ' +
  1136. '<select id="cond_z' + new_condition_i + '_1">' +
  1137. '<option value="if">if</option>' +
  1138. '<option value="elif">elif</option>' +
  1139. '<option value="else">else</option>' +
  1140. '</select> ' +
  1141. '<select id="cond_tank' + new_condition_i + '_1">' +
  1142. '<option value="D1">乾燥桶 D1</option>' +
  1143. '<option value="D2">乾燥桶 D2</option>' +
  1144. '<option value="D3">乾燥桶 D3</option>' +
  1145. '<option value="D4">乾燥桶 D4</option>' +
  1146. '<option value="D5">乾燥桶 D5</option>' +
  1147. '<option value="D6">乾燥桶 D6</option>' +
  1148. '<option value="D7">乾燥桶 D7</option>' +
  1149. '<option value="D8">乾燥桶 D8</option>' +
  1150. '<option value="D9">乾燥桶 D9</option>' +
  1151. '<option value="D10">乾燥桶 D10</option>' +
  1152. '<option value="D11">乾燥桶 D11</option>' +
  1153. '<option value="D12">乾燥桶 D12</option>' +
  1154. '</select> ' +
  1155. '<select id="cond_a' + new_condition_i + '_1">' +
  1156. '<option value="">制動器 / 感測器</option>' +
  1157. '<optgroup label="制動器狀態">';
  1158. // relay 取值
  1159. relay_dict = {};
  1160. for (let i = 1; i < 21; i++) {
  1161. var relay_text = $("#select_relay_" + i).find(':selected').val();
  1162. if (relay_text != '') {
  1163. relay_dict["R" + i] = "R" + i + "_" + relay_text;
  1164. }
  1165. }
  1166. for (let r in relay_dict) {
  1167. html += '<option value="' + relay_dict[r] + '">' + relay_dict[r] + '</option>';
  1168. }
  1169. html +=
  1170. '</optgroup>' +
  1171. '<optgroup label="感測器數值">';
  1172. // sensor 取值 dict
  1173. sensor_dict = {};
  1174. for (let i = 1; i < 20; i++) {
  1175. var sensor_text = $("#selectSensor_M" + i).find(':selected').text();
  1176. if (sensor_text != '') {
  1177. sensor_dict["M" + i] = "M" + i + "_" + sensor_text;
  1178. }
  1179. }
  1180. for (let s in sensor_dict) {
  1181. html += '<option value="' + sensor_dict[s] + '">' + sensor_dict[s] + '</option>';
  1182. }
  1183. html +=
  1184. '</optgroup>' +
  1185. '</select> ' +
  1186. '<select id="cond_b' + new_condition_i + '_1">' +
  1187. // '<option value="equal">==</option>' +
  1188. // '<option value="morethan">&gt;=</option>' +
  1189. // '<option value="lessthan">&lt;=</option>' +
  1190. '<option value="MoreThan">&gt;</option>' +
  1191. '<option value="MoreThanEqualTo">&gt;=</option>' +
  1192. '<option value="Equal" selected>==</option>' +
  1193. '<option value="LessThanEqualTo">&lt;=</option>' +
  1194. '<option value="LessThan">&lt;</option>' +
  1195. '</select> ' +
  1196. '<input list="cond_list_c' + new_condition_i + '_1" id="cond_c' + new_condition_i + '_1">' +
  1197. '<datalist id="cond_list_c' + new_condition_i + '_1">' +
  1198. '<option value="on">' +
  1199. '<option value="off">' +
  1200. '<option value="(或請自行輸入數值)">' +
  1201. '</datalist> ' +
  1202. '<input type="button" class="input-cond-add" id="cond_add' + new_condition_i + '_1" value="條件++" onclick="cond_add(cond_add' + new_condition_i + '_1)"><br>' +
  1203. '</div></div>';
  1204. // 新增的物件動作
  1205. html +=
  1206. '<div id="action' + new_condition_i + '">' +
  1207. '<div id="action' + new_condition_i + '_1">' +
  1208. '物件 ' +
  1209. '<select id="do_obj' + new_condition_i + '_1" onChange="renew(\''+ new_condition_i + '_1\', this.selectedIndex);">' +
  1210. '<option value="">制動器 / 暫停秒數 / 桶槽狀態</option>' +
  1211. '<optgroup label="制動器狀態">';
  1212. // relay 取值
  1213. relay_dict = {};
  1214. for (let i = 1; i < 21; i++) {
  1215. var relay_text = $("#select_relay_" + i).find(':selected').val();
  1216. if (relay_text != '') {
  1217. relay_dict["R" + i] = "R" + i + "_" + relay_text;
  1218. }
  1219. }
  1220. for (let r in relay_dict) {
  1221. html += '<option value="' + relay_dict[r] + '">' + relay_dict[r] + '</option>';
  1222. }
  1223. html +=
  1224. '</optgroup>' +
  1225. '<option value="' + 'sleep' + '">' + 'sleep' + '</option>' +
  1226. '<option value="' + 'tankstatus' + '">' + 'tankstatus' + '</option>' +
  1227. '</select> ' +
  1228. ' 動作 ' +
  1229. '<div id="do_action' + new_condition_i + '_1" style="display: inline-block;">' +
  1230. '</div>' +
  1231. // '<select id="do_act' + new_condition_i + '_1">' +
  1232. // '<option value="">請由左方選取物件' +
  1233. // '</select> ' +
  1234. '<input type="button" class="input-act-add" id="act_add' + new_condition_i + '_1" value="物件動作++" onclick="act_add(act_add' + new_condition_i + '_1);"><br>' +
  1235. '</div>' +
  1236. '</div>' +
  1237. // 新增的 條件物件動作++ 條件物件動作-- 按鈕
  1238. '<input type="button" class="input-delete" id="del' + new_condition_i + '" value="條件物件動作--" onclick="Delete(' + new_condition_i + ');"><br>' +
  1239. '<input type="button" class="input-add" id="add' + new_condition_i + '" value="條件物件動作++" onclick="Add(add' + new_condition_i + ');">' +
  1240. '</div>' ;
  1241. var divbox = document.getElementById('box');
  1242. divbox.insertAdjacentHTML('beforeend', html);
  1243. };
  1244. function Delete(evt) {
  1245. var del_condition = document.getElementById('newcondition_' + evt);
  1246. del_condition.innerHTML = ""
  1247. var parentObj = del_condition.parentNode; // 取得欲刪除 div 的父類別
  1248. parentObj.removeChild(del_condition) // 刪除 div
  1249. // 上一個按鈕要顯示出來
  1250. var button_return_id = document.getElementById('add' + String(parseInt(evt)-1));
  1251. if (button_return_id == null) {
  1252. var button_return_id = document.getElementById('add1');
  1253. }
  1254. // console.log('button_return_id: ' + button_return_id)
  1255. button_return_id.style.display = "block"; // 元素顯示。顯示前一個 input-button
  1256. };
  1257. </script>
  1258. </div>
  1259. </div>
  1260. <!-- 積木程式 finish -->
  1261. <div style="position: absolute; top: 1200px;">
  1262. Value : <span id="show_Value"></span><br>
  1263. MySQL : <span id="show_MySQLcommand"></span><br>
  1264. MQTT : <span id="show_MQTTcommand"></span>
  1265. </div>
  1266. <script>
  1267. var relay_data = ''; // 積木程式 制動器選項
  1268. var sensor_data = ''; // 積木程式 感測器選項
  1269. var obj_data = ''; // 積木程式 物件選項:桶槽狀態 暫停秒數
  1270. function getValue() {
  1271. // ethernet、wifi、zigbee 取值測試
  1272. // var select_ethernet_text = $("#select_ethernet_1").find(':selected').text()
  1273. // var select_wifi_text = $("#select_wifi_1").find(':selected').text()
  1274. // var select_zigbee_text = $("#select_zigbee_1").find(':selected').text()
  1275. // console.log("select_ethernet_text: " + select_ethernet_text)
  1276. // console.log("select_wifi_text: " + select_wifi_text)
  1277. // console.log("select_zigbee_text: " + select_zigbee_text)
  1278. // 制動器感測器 下拉式選單 不可更改
  1279. $('.select-input').prop('disabled', true);
  1280. // relay 取值
  1281. relay_dict = {};
  1282. for (let i = 1; i < 21; i++) {
  1283. var relay_text = $("#select_relay_" + i).find(':selected').val();
  1284. if (relay_text != '') {
  1285. relay_dict["R" + i] = "R" + i + "_" + relay_text;
  1286. // console.log("R" + i + " : " + relay_text);
  1287. } else {
  1288. // relay_dict["R" + i] = "";
  1289. // console.log("R" + i + " : ");
  1290. }
  1291. }
  1292. relay_data = '<optgroup label="制動器狀態">';
  1293. for (let r in relay_dict) {
  1294. // console.log(r + " : " + relay_dict[r]);
  1295. relay_data += '<option value="' + relay_dict[r] + '">' + relay_dict[r] + '</option>';
  1296. }
  1297. relay_data += '</optgroup>'
  1298. // console.log("relay_data: " + relay_data)
  1299. // sensor 取值 dict
  1300. sensor_dict = {};
  1301. for (let i = 1; i < 20; i++) {
  1302. var sensor_text = $("#selectSensor_M" + i).find(':selected').text();
  1303. if (sensor_text != '') {
  1304. sensor_dict["M" + i] = "M" + i + "_" + sensor_text;
  1305. // console.log("selectSensor_M" + i);
  1306. // console.log("M" + i + "_" + sensor_text);
  1307. } else {
  1308. // sensor_dict["M" + i] = "";
  1309. // console.log("selectSensor_M" + i);
  1310. // console.log("");
  1311. }
  1312. }
  1313. sensor_data = '<optgroup label="感測器數值">';
  1314. for (let s in sensor_dict) {
  1315. // console.log(s + " : " + sensor_dict[s])
  1316. sensor_data += '<option value="' + sensor_dict[s] + '">' + sensor_dict[s] + '</option>';
  1317. }
  1318. sensor_data += '</optgroup>';
  1319. // console.log("sensor_data: " + sensor_data)
  1320. // 賦值條件 a
  1321. var sectorSelect = document.getElementById("cond_a1_1");
  1322. sectorSelect.innerHTML = '<option value="">制動器 / 感測器</option>' + relay_data + sensor_data;
  1323. obj_data = '<option value="' + 'sleep' + '">' + 'sleep' + '</option>' +
  1324. '<option value="' + 'tankstatus' + '">' + 'tankstatus' + '</option>';
  1325. // 賦值物件 a
  1326. var sectorSelect = document.getElementById("do_obj1_1");
  1327. sectorSelect.innerHTML = '<option value="">制動器 / 暫停秒數 / 桶槽狀態</option>' + relay_data + obj_data;
  1328. // ===== 下方傳值未測試 ====================================================
  1329. // var loader_data = {
  1330. // "ethernet_list":select_ethernet_text,
  1331. // "wifi_list":select_wifi_text,
  1332. // "zigbee_list":select_zigbee_text,
  1333. // "relay_list":String(relay_list),
  1334. // "pwm_list":String(pwm_list),
  1335. // "digital_list":String(digital_list),
  1336. // "uart_list":String(uart_list),
  1337. // "i2c_list":String(i2c_list),
  1338. // "s485_list":String(s485_list),
  1339. // "ppa_list":String(ppa_list)
  1340. // };
  1341. // $.ajax({
  1342. // type:"GET",
  1343. // url:"/loader",
  1344. // dataType:"JSON",
  1345. // data:loader_data,
  1346. // success:function (res) {
  1347. // alert("getValue loader: " + res.response)
  1348. // },
  1349. // error: function (thrownError) {
  1350. // alert(thrownError)
  1351. // }
  1352. // })
  1353. }
  1354. relay_obj2act = {'vacuum':['on', 'off'],
  1355. 'solenoidvalve':['on', 'off'],
  1356. 'diskvalve':['on', 'off'],
  1357. 'warninglight':['on', 'off'],
  1358. 'camera':['on', 'off'],
  1359. 'heater':['on', 'off'],
  1360. 'pump':['on', 'off'],
  1361. 'sleep':'',
  1362. 'tankstatus':['Waiting', 'InputtingBean', 'InputtingBean_Pause', 'InputtingBean_Finish',
  1363. 'Drying', 'OutputtingBean', 'Cleaning', 'Warning']
  1364. }
  1365. // <option value="vacuum">真空吸料機</option>
  1366. // <option value="solenoidvalve">電磁閥</option>
  1367. // <option value="diskvalve">蝴蝶閥</option>
  1368. // <option value="warninglight">警示燈</option>
  1369. // <option value="camera">攝影機</option>
  1370. // <option value="heater">電熱管</option>
  1371. // <option value="pump">雙核泵</option>
  1372. function renew(obj_num, index) {
  1373. var act_item_value = '';
  1374. var objSelect = document.getElementById("do_obj" + obj_num).value;
  1375. // console.log("objSelect: " + objSelect + " / " + typeof(objSelect));
  1376. var actuatorNameIndex = objSelect.indexOf('_') + 1;
  1377. // console.log("actuatorNameIndex: " + actuatorNameIndex)
  1378. // console.log("objSelect.substring(actuatorNameIndex): " + objSelect.substring(actuatorNameIndex))
  1379. // console.log("relay_obj2act[objSelect.substring(actuatorNameIndex)]: " + relay_obj2act[objSelect.substring(actuatorNameIndex)])
  1380. if (objSelect.substring(actuatorNameIndex) !== undefined) {
  1381. var act_item = relay_obj2act[objSelect.substring(actuatorNameIndex)]
  1382. console.log(act_item)
  1383. if (objSelect.substring(actuatorNameIndex) == 'sleep') {
  1384. console.log("act_item[i] == 'sleep'")
  1385. act_item_value += ' <input type="range" style="cursor: pointer;" id="do_act' + obj_num + '" min="5" max="60" step="5" value="10" oninput="showSleepValue(\'' + obj_num + '\', this.value)" onchange="showSleepValue(\'' + obj_num + '\', this.value)">' +
  1386. ' <span id="sleepValue_text' + obj_num + '">10s</span>';
  1387. } else {
  1388. // 建立 do_act 下拉式選單
  1389. act_item_value += '<select id="do_act' + obj_num + '">';
  1390. for (let i = 0; i < act_item.length; i++) {
  1391. act_item_value += '<option value="' + act_item[i] + '">' + act_item[i] + '</option>'
  1392. }
  1393. act_item_value += '</select>';
  1394. }
  1395. // 將 do_act 放到 do_action 區塊中
  1396. var sectorSelect = document.getElementById("do_action" + obj_num);
  1397. if (sectorSelect != null) {
  1398. sectorSelect.innerHTML = act_item_value;
  1399. }
  1400. } else {
  1401. console.log("=== undefined")
  1402. }
  1403. }
  1404. function showSleepValue(obj_num, value) {
  1405. document.getElementById("sleepValue_text" + obj_num).innerText = value + 's';
  1406. }
  1407. </script>
  1408. <script>
  1409. var cond_main = ''; // 主條件
  1410. var cond_add_list = []; // 附加條件 List
  1411. var cond_add_data = ''; // 欲加入附加條件的資料
  1412. var cond_com_list = []; // 動作 List
  1413. var cond_com_data = ''; // 欲加入動作的資料
  1414. var cond_item = []; // 主條件+附加條件+動作 List
  1415. function test(){
  1416. cond_item = [];
  1417. var command_test = '';
  1418. Z = 0;
  1419. TT = {}; // 將總條件句/附加條件句/物件動作句存入 字典, 後續傳給 dry_block_format 再組合
  1420. var set_key = []; // List 加入變數名稱, INSERT DB 用
  1421. var set_value = []; // List 加入值, INSERT DB 用
  1422. // 條件物件動作 取值
  1423. for (let z = 1; z <= new_condition_i; z++) {
  1424. // 初始清空
  1425. cond_main = '';
  1426. // if-while 取值
  1427. try {
  1428. var cond_z_value = document.getElementById("cond_z" + z + "_1").value;
  1429. if (cond_z_value == '') {
  1430. alert('if/while 欄位未輸入')
  1431. } else {
  1432. Z = Z + 1;
  1433. set_key.push('cond_z' + Z + '_1');
  1434. set_value.push(cond_z_value);
  1435. cond_main += cond_z_value + ' ';
  1436. }
  1437. } catch (error) {
  1438. if (error.name == 'TypeError') {
  1439. } else {
  1440. alert("cond_z" + z + "_1: " + error.name)
  1441. }
  1442. }
  1443. // 桶槽號碼 取值
  1444. try {
  1445. var cond_tank_value = document.getElementById("cond_tank" + z + "_1").value;
  1446. if (cond_tank_value == '') {
  1447. alert('桶槽 欄位未輸入')
  1448. } else {
  1449. set_key.push('cond_tank' + Z + '_1');
  1450. set_value.push(cond_tank_value);
  1451. cond_main += cond_tank_value + ' ';
  1452. }
  1453. } catch (error) {
  1454. if (error.name == 'TypeError') {
  1455. } else {
  1456. alert("cond_tank" + z + "_1: " + error.name)
  1457. }
  1458. }
  1459. // 子 條件 取值
  1460. X = 1;
  1461. cond_add_list = []; // 附加條件 List 清空
  1462. for (let x = 1; x <= cond_add_child_i; x++) {
  1463. cond_add_data = ''; // 附加條件資料 清空
  1464. if (x == 1) {
  1465. // 主條件
  1466. try {
  1467. var cond_a_value = document.getElementById("cond_a" + z + "_" + x).value;
  1468. if (cond_a_value == '') {
  1469. alert('主條件 感測器 欄位未輸入')
  1470. } else {
  1471. set_key.push('cond_a' + Z + '_' + X);
  1472. set_value.push(cond_a_value);
  1473. cond_main += cond_a_value + ' ';
  1474. }
  1475. } catch (error) {
  1476. if (error.name == 'TypeError') {
  1477. } else {
  1478. alert("cond_a" + z + "_" + x + ": " + error.name)
  1479. }
  1480. }
  1481. // 子條件取值 : 條件中 > = <
  1482. try {
  1483. var cond_b_value = document.getElementById("cond_b" + z + "_" + x).value;
  1484. if (cond_b_value == '') {
  1485. alert('主條件 比較運算子 欄位未輸入')
  1486. } else {
  1487. set_key.push('cond_b' + Z + '_' + X);
  1488. set_value.push(cond_b_value);
  1489. if (cond_b_value == 'MoreThan') { cond_main += '> '; }
  1490. else if (cond_b_value == 'MoreThanEqualTo') { cond_main += '>= '; }
  1491. else if (cond_b_value == 'Equal') { cond_main += '== '; }
  1492. else if (cond_b_value == 'LessThanEqualTo') { cond_main += '<= '; }
  1493. else if (cond_b_value == 'LessThan') { cond_main += '< '; }
  1494. }
  1495. } catch (error) {
  1496. if (error.name == 'TypeError') {
  1497. } else {
  1498. alert("cond_b" + z + "_" + x + ": " + error.name)
  1499. }
  1500. }
  1501. // 子條件取值 : 條件右 ON / OFF / 輸入數值
  1502. try {
  1503. var cond_c_value = document.getElementById("cond_c" + z + "_" + x).value;
  1504. if (cond_c_value == '') {
  1505. alert('主條件 數值 欄位未輸入')
  1506. } else {
  1507. set_key.push('cond_c' + Z + '_' + X);
  1508. set_value.push(cond_c_value);
  1509. cond_main += cond_c_value;
  1510. }
  1511. } catch (error) {
  1512. if (error.name == 'TypeError') {
  1513. } else {
  1514. alert("cond_c" + z + "_" + x + ": " + error.name)
  1515. }
  1516. }
  1517. } else {
  1518. // 附加條件 x > 1
  1519. // 子條件取值 : 條件連接 and or
  1520. try {
  1521. var cond_d_value = document.getElementById("cond_d" + z + "_" + x).value;
  1522. if (cond_d_value == '') {
  1523. alert('附加條件 and/or 欄位未輸入')
  1524. } else {
  1525. X = X + 1;
  1526. set_key.push('cond_d' + Z + '_' + X);
  1527. set_value.push(cond_d_value);
  1528. cond_add_data += cond_d_value + ' ';
  1529. }
  1530. } catch (error) {
  1531. if (error.name == 'TypeError') {
  1532. } else {
  1533. alert("cond_d" + z + "_" + x + ": " + error.name)
  1534. }
  1535. }
  1536. // 感測器取值 :
  1537. try {
  1538. var cond_a_value = document.getElementById("cond_a" + z + "_" + x).value;
  1539. if (cond_a_value == '') {
  1540. alert('附加條件 感測器 欄位未輸入')
  1541. } else {
  1542. set_key.push('cond_a' + Z + '_' + X);
  1543. set_value.push(cond_a_value);
  1544. cond_add_data += cond_a_value + ' ';
  1545. }
  1546. } catch (error) {
  1547. if (error.name == 'TypeError') {
  1548. } else {
  1549. alert("cond_a" + z + "_" + x + ": " + error.name)
  1550. }
  1551. }
  1552. // 子條件取值 : 條件中 > = <
  1553. try {
  1554. var cond_b_value = document.getElementById("cond_b" + z + "_" + x).value;
  1555. if (cond_b_value == '') {
  1556. alert('附加條件 比較運算子 欄位未輸入')
  1557. } else {
  1558. set_key.push('cond_b' + Z + '_' + X);
  1559. set_value.push(cond_b_value);
  1560. if (cond_b_value == 'MoreThan') { cond_add_data += '> '; }
  1561. else if (cond_b_value == 'MoreThanEqualTo') { cond_add_data += '>= '; }
  1562. else if (cond_b_value == 'Equal') { cond_add_data += '== '; }
  1563. else if (cond_b_value == 'LessThanEqualTo') { cond_add_data += '<= '; }
  1564. else if (cond_b_value == 'LessThan') { cond_add_data += '< '; }
  1565. }
  1566. } catch (error) {
  1567. if (error.name == 'TypeError') {
  1568. } else {
  1569. alert("cond_b" + z + "_" + x + ": " + error.name)
  1570. }
  1571. }
  1572. // 子條件取值 : 條件右 ON / OFF / 輸入數值
  1573. try {
  1574. var cond_c_value = document.getElementById("cond_c" + z + "_" + x).value;
  1575. if (cond_c_value == '') {
  1576. alert('附加條件 數值 欄位未輸入')
  1577. } else {
  1578. set_key.push('cond_c' + Z + '_' + X);
  1579. set_value.push(cond_c_value);
  1580. cond_add_data += cond_c_value;
  1581. }
  1582. } catch (error) {
  1583. if (error.name == 'TypeError') {
  1584. } else {
  1585. alert("cond_c" + z + "_" + x + ": " + error.name)
  1586. }
  1587. }
  1588. if (cond_add_data != '') {
  1589. console.log("cond_add_list: " + cond_add_list)
  1590. console.log("cond_add_data: " + cond_add_data)
  1591. cond_add_list.push(cond_add_data)
  1592. }
  1593. }
  1594. }
  1595. // 子 物件動作 取值
  1596. Y = 0;
  1597. cond_com_list = [];
  1598. for (let y = 1; y <= act_add_child_i; y++) {
  1599. cond_com_data = '';
  1600. // 子物件動作取值 : 物件 do_obj1_1
  1601. // try {
  1602. var do_obj_value = document.getElementById("do_obj" + z + "_" + y).value;
  1603. console.log("do_obj" + z + "_" + y + " : " + do_obj_value)
  1604. if (do_obj_value == '') {
  1605. alert('物件 欄位未輸入')
  1606. } else {
  1607. Y = Y + 1;
  1608. set_key.push('do_obj' + Z + '_' + Y);
  1609. set_value.push(do_obj_value);
  1610. cond_com_data += do_obj_value + ' ';
  1611. }
  1612. // } catch (error) {
  1613. // if (error.name == 'TypeError') {
  1614. // } else {
  1615. // alert("do_obj" + z + "_" + y + ": " + error.name)
  1616. // }
  1617. // }
  1618. // 子物件動作取值 : 動作 do_act1_1
  1619. // try {
  1620. var do_act_value = document.getElementById("do_act" + z + "_" + y).value;
  1621. console.log("do_act" + z + "_" + y + " : " + do_act_value)
  1622. if (do_act_value == '') {
  1623. alert('動作 欄位未輸入')
  1624. } else {
  1625. set_key.push('do_act' + Z + '_' + Y);
  1626. if (DRY_CONTAINER_STATUS[do_act_value] != undefined ) {
  1627. set_value.push(DRY_CONTAINER_STATUS[do_act_value]);
  1628. cond_com_data += DRY_CONTAINER_STATUS[do_act_value];
  1629. cond_com_list.push(cond_com_data);
  1630. } else {
  1631. set_value.push(do_act_value);
  1632. cond_com_data += do_act_value;
  1633. cond_com_list.push(cond_com_data);
  1634. }
  1635. }
  1636. // } catch (error) {
  1637. // if (error.name == 'TypeError') {
  1638. // } else {
  1639. // alert("do_act" + z + "_" + y + ": " + error.name)
  1640. // }
  1641. // }
  1642. }
  1643. // ===== 0324 測試 OK 勿刪 ===================================================
  1644. var A = 1;
  1645. var B = 1;
  1646. console.log("cond_add_list: " + cond_add_list);
  1647. console.log("cond_com_list: " + cond_com_list);
  1648. if (cond_main != '') {
  1649. TT['cond_main' + Z] = cond_main;
  1650. for (let a = 0; a < cond_add_list.length; a++) {
  1651. TT['cond_add'+ Z + '_' + A] = cond_add_list[a];
  1652. A = A + 1;
  1653. }
  1654. for (let b = 0; b < cond_com_list.length; b++) {
  1655. TT['cond_com'+ Z + '_' + B] = cond_com_list[b];
  1656. B = B + 1;
  1657. }
  1658. }
  1659. // ===== 0324 測試 OK 勿刪 ===================================================
  1660. cond_item.push(
  1661. "{'cond_main':'" + cond_main + "'}, " +
  1662. "{'cond_add':['" + cond_add_list.join("', '") + "']}, " +
  1663. "{'cond_com':['" + cond_com_list.join("', '") + "']}"
  1664. )
  1665. console.log("cond_item: [" + cond_item + "]")
  1666. document.getElementById('show_Value').innerText = "cond_item: [" + cond_item + "]";
  1667. }
  1668. // ===== 0324 測試 OK 勿刪 ===================================================
  1669. TT['mainLength'] = Z
  1670. TT['addLength'] = cond_add_list.length
  1671. TT['comLength'] = cond_com_list.length
  1672. // ===== 0324 測試 OK 勿刪 ===================================================
  1673. // 0321 測試 new
  1674. $('#value_test').text("[{" + cond_item.join('}, {') + "}]")
  1675. var SQL_insert = 'INSERT INTO `dry_block_waiting` (' +
  1676. '`datetime`, `' + set_key.join("`, `") + '`) VALUES (' +
  1677. 'current_timestamp(), "' + set_value.join('", "') + '")';
  1678. var sql_data = { "sql":SQL_insert };
  1679. document.getElementById('show_MySQLcommand').innerText = SQL_insert;
  1680. console.log("sql_data: ", sql_data)
  1681. $.get('/sql_get', sql_data, function (res) {
  1682. alert("OK")
  1683. }, 'json');
  1684. }
  1685. function MQTTtest() {
  1686. test();
  1687. // ===== 0324 測試 OK 勿刪 ===================================================
  1688. $.get('/dry_block_format', TT, function (res) {
  1689. // alert("MQTT OK")
  1690. document.getElementById('show_MQTTcommand').innerText = JSON.stringify(res.response);
  1691. }, 'json');
  1692. // ===== 0324 測試 OK 勿刪 ===================================================
  1693. }
  1694. </script>
  1695. <!-- 數位 -->
  1696. <!-- <div style="position: absolute; left: 935px; top: 300px; width: 220px;">
  1697. 數位 1 :
  1698. <select id="select_digital_1" onchange="select_digital('1')">
  1699. <option></option>
  1700. <option>溫溼度</option>
  1701. <option>水位計</option>
  1702. <option>蝶閥回饋訊號</option>
  1703. </select>
  1704. <br>
  1705. </div> -->
  1706. <!-- PWM -->
  1707. <!-- <div style="position: absolute; left: 935px; top: 300px; width: 220px;">
  1708. PWM 1 :
  1709. <select id="select_pwm_1" onchange="select_pwm('1')">
  1710. <option></option>
  1711. <option>馬達</option>
  1712. <option>舵機</option>
  1713. </select>
  1714. <br>
  1715. </div> -->
  1716. <!-- UART -->
  1717. <!-- <div style="position: absolute; left: 935px; top: 300px; width: 220px;">
  1718. UART 1 :
  1719. <select id="select_uart_1" onchange="select_uart('1')">
  1720. <option></option>
  1721. <option>EC</option>
  1722. </select>
  1723. <br>
  1724. </div> -->
  1725. <!-- I2C -->
  1726. <!-- <div style="position: absolute; left: 935px; top: 300px; width: 220px;">
  1727. I2C:
  1728. <select id="select_i2c_1" onchange="select_i2c('1')">
  1729. <option></option>
  1730. <option>大氣壓力</option>
  1731. </select>
  1732. <br>
  1733. </div> -->
  1734. <!-- 485 -->
  1735. <!-- <div style="position: absolute; left: 935px; top: 300px; width: 220px;">
  1736. 485:
  1737. <select id="select_485_1" onchange="select_485('1')">
  1738. <option></option>
  1739. <option>土壤三合一</option>
  1740. </select>
  1741. <br>
  1742. </div> -->
  1743. <!-- 分壓類比 -->
  1744. <!-- <div style="position: absolute; left: 935px; top: 300px; width: 220px;">
  1745. 分壓類比 1:
  1746. <select id="select_ppa_1" onchange="select_ppa('1')">
  1747. <option></option>
  1748. <option>濁度計</option>
  1749. <option>超音波</option>
  1750. </select>
  1751. <br>
  1752. </div> -->
  1753. <div id="coffee_footer">
  1754. <!-- 匯入共同使用的 footer.html 內容 -->
  1755. {% include 'footer.html' %}
  1756. <br>
  1757. <br>
  1758. </div>
  1759. </div>
  1760. </body>
  1761. </html>