--- title: 在VoTT新增service來執行vott_tracker.exe與exe製作方法 disqus: hackmd --- 在VoTT新增service來執行vott_tracker.exe(單一追蹤)與exe製作方法 === [TOC] ## 文件版本說明 ::: info 注意此版本只解說追蹤一人時的情況,若有多人追蹤請參閱另一份文件 ::: v0.1: 20201019: 完成初始板本 v0.2: 20201021: 使用setInterval() 取代 while(1) 更新6.(4) 6.(5) 若要參考請參考12.歷次修改 20201021修改內容 v0.3: 20201022: 直接使用setInterval() 移除worker thread 更新6.(1) 6.(3) 6.(4) 6.(5) 若要參考請參考12.歷次修改 20201022修改內容 並更新6.的標題index ## 1. 在label後新增執行exe會失敗原因 在version:v0.0.1中,增加了tag object會產生log 讓python使用 ![](https://i.imgur.com/5fa8i7V.png) 動作如下圖所示 ![](https://i.imgur.com/G8B5y58.png) 在上圖的基礎上進行測試,新增execFile來使用vott_tracker(exe檔,由python產生) ![](https://i.imgur.com/MtJuoj3.png) 使用時卻會獲得以下錯誤 TypeError: exec is not a function ![](https://i.imgur.com/6TW3Tc8.png) 找到了幾個討論大致說明原因為execFile方式不能在browser下執行 目前找不到官方確切說明 [網友說明1](https://github.com/matheuss/google-translate-api/issues/107) ![](https://i.imgur.com/JboVy37.png) ## 2. VoTT 使用的exec範例和增加測試execFile 由 npm start 我們知道會去下方執行script ```gherkin= ~/HD1/hd/VoTT/VoTT_NTUT/UBU18/package.json ``` ![](https://i.imgur.com/58Os19X.png) 依循路徑找到start.js,內部有使用exec(),也增加了執行hello.exe,而且是能執行的並不會有錯誤,合理推斷exec()、execFile()真的不能使用在browser上 ```gherkin= $ vim VoTT/VoTT_NTUT/UBU18/src/electron/start.js 新增後重跑vott $ npm start ``` ![](https://i.imgur.com/VHAsA2h.png) 確實有執行hello ![](https://i.imgur.com/fgfzlAw.png) 下面的訊息知道不論在本地或是網路端都是執行在browser 這也是我們在*.ts 裡面的consloe.log都不會出現在這個terminal的原因 ![](https://i.imgur.com/Snnw3aY.png) ## 3. 承接2,將hello改成module並呼叫(練習用) 將原先的hello處改成執行NTUT_version.exe ![](https://i.imgur.com/WWGMSh2.png) 將hello做成modlue並由start.js呼叫 ![](https://i.imgur.com/u3a0FsT.png) 開啟vott可看到版本訊息 ![](https://i.imgur.com/DkC4Sf6.png) ## 4. vott_tracker.exe 製作方法 :::warning 注意若要vott自動執行vott_tracker.exe一定要確保下列位置存在vott_tracker.exe VoTT_NTUT/UBU18/NTUT/exe/ 因為此exe檔案太大以至於無法上傳到github,所以只能在本地端產生! ::: 至下列位置執行指令以製作 vott_tracker.exe !!注意以下的操作必須在是以repo形式下載專案這樣的路徑才會正確!! ```gherkin= $ cd VoTT/CVTRK/UBU18 $ ./build_exe.sh 此指令會自動將exe複製到 VoTT_NTUT/UBU18/NTUT/exe/vott_tracker.exe ``` ![](https://i.imgur.com/25uxJwC.png) ## 5. 注意npm版本,才能使用Worker Threads ```gherkin= $ nodejs -v v12.19.0 ``` 更新 nodejs 請此參考[此連結](https://hackmd.io/@NTUTVOTT/rymTpoVUD) 之2. 安裝相關套件第(2)項目說明 ## 6. 使用Worker Threads等待使用者使用tag工具進而執行vott_tracker.exe ### (1) 架構圖 將python製作成exe,好處是不需要相關的python套件或python開發環境即可執行 注意執行build_exe.sh是update vott_tracker.py的版本才要執行 ![](https://i.imgur.com/gYo8VMq.png) ### (2) 更新for_python_path.log 內容,增加檔案時間 可利用此檔案時間檢查是否為使用者新標注了追蹤物件 在(4) detect_tag_run_exe.js 的檢查與追蹤 會使用在檢查使用者是否已標注會使用到檔案時間 ```gherkin= $ vim VoTT_NTUT/UBU18/src/services/assetService.ts + let date: Date = new Date(); + console.error(date.getTime()); + await this.storageProvider.writeText('../for_python_path.log', metadata.asset.path + ',' + fileName + ',' + date.getTime()); ``` ![](https://i.imgur.com/3EOOGiF.png) ~~### (3) new Worker Thread~~ ### (3) 新增使用 detect_tag_run_exe.js 模組 在執行starts.js時執行detect_tag_service ```gherkin= 將detect_tag_service模組加入使用 $ vim VoTT_NTUT/UBU18/src/electron/start.js ``` ![](https://i.imgur.com/LLJxtSn.png) ### (4) detect_tag_run_exe.js 的檢查與追蹤 使用在檢查使用者是否已標注,自動執行 vott_tracker.exe ```gherkin= path: VoTT_NTUT/UBU18/NTUT/services/detect_tag_run_exe.js ``` ![](https://i.imgur.com/qwTWJjV.png) ### (5) 重新開啟vott 重新開啟vott後可看到service執行 ```gherkin= $ npm start ``` ![](https://i.imgur.com/U5K0fJ0.png) ### (6) 執行標注時的提醒 ```gherkin= $ vim VoTT_NTUT/UBU18/src/services/assetService.ts + alert("waiting for vott_tracker,if tracker finished please pressing ok"); ``` ![](https://i.imgur.com/cjlOYYW.png) 等到vott_tracker.exe執行完後即可將此提醒關閉 ![](https://i.imgur.com/C96Wlku.png) ### (7). vott_tracker.exe 已經完成執行之提醒 ![](https://i.imgur.com/LwsfLjr.png) 提醒已經完成執行vott_tracker.exe ![](https://i.imgur.com/0pklOch.png) ## 7. python 修改部份 ### (1) 彈出視窗 用於提醒追蹤完成 ```gherkin= $ vim CVTRK/UBU18/vott_tracker.py 加在追蹤結束 +from tkinter import messagebox +messagebox.showinfo("vott tracker", "track object successfully!!") ``` ![](https://i.imgur.com/PtRBfk6.png) ![](https://i.imgur.com/1NBFvc9.jpg) ### (2) 修改儲存log.txt位置 由於使用vott_tracker.exe 所以log訊息不會顯示在terminal, 但會存在下方位置 ```gherkin= path: VoTT_NTUT/UBU18/NTUT/log/log.txt ``` ![](https://i.imgur.com/xg4j48o.png) ### (3) 修改讀取for_python_path.log 由於多了一項時間但在 vott_tracker.py 裡面用不到須拿掉 ```gherkin= 範例內容,最後一個逗號後為檔案產生的時間,此處舉例最後一項的time為代號 file:/home/ivan/HD1/hd/VoTT/Drone_Project/Drone_Source/001/Drone_001.mp4#t=305.533333,76a8e999e2d9232d8e26253551acb4b3-asset.json,time ``` ![](https://i.imgur.com/LS54fBi.png) ## 8. 增加vott_tracker.exe 之使用開關 ```gherkin= 由於還有其他測試,所以先將此功能暫時關閉 $ vim /VoTT/VoTT_NTUT/UBU18/src/electron/start.js 若要執行此功能請在改變detect_tag_switch = true; ``` ![](https://i.imgur.com/KVd7FyJ.png) ## 9. 相關commit (1) VoTT/VoTT_NTUT/UBU18/ ```gherkin= 關於使用 vott_tracker.exe $ tig or $ tig 7b7d8adb597767ddc662935dea900352d3330ac2 commit id: 7b7d8adb597767ddc662935dea900352d3330ac2 commit name: (NTUT)(SERVICE) added a service to detect and execute vott_tracker.exe automatically ``` ```gherkin= 關於增加vott_tracker.exe之使用開關,default:off $ tig or $ tig 68ed3cd2760e65393d8982f5d05b37ea7397b097 commit id: 68ed3cd2760e65393d8982f5d05b37ea7397b097 commit name: (NTUT)(SERVICE) added a switch to turn on or turn off servcie that could run vott_tracker.exe ``` ```gherkin= using setInterval() to relpace while(1) in the service,default:off $ tig or $ tig ed4b08910586eadd687647dae58a4ac08ea50a7a commit id: ed4b08910586eadd687647dae58a4ac08ea50a7a commit name: (NTUT)(SERVICE) using setInterval() to relpace while(1) in the service ``` ```gherkin= 移除worker thread $ tig or $ tig a5e6a9288c3f2016f87279d57b71e6ee9983376c commit id: a5e6a9288c3f2016f87279d57b71e6ee9983376c commit name: (NTUT)(SERVICE) remove worker thread ``` (2) VoTT/CVTRK/UBU18 ```gherkin= 關於製造 vott_tracker.exe $ tig or $ tig adaf112c0524081bef8fdf1ad70f03261f0f8246 commit id: adaf112c0524081bef8fdf1ad70f03261f0f8246 commit name: (NTUT)(EXE) build an vott_tracker.exe for vott to track object ``` ## 10. nodejs 參考網站 **file system:** [file system 參考網站1](https://www.geeksforgeeks.org/node-js-fs-opensync-method/) [file system 參考網站2](https://nodejs.org/dist./v0.8.2/docs/api/fs.html#fs_fs_exists_path_callback) **Worker Threads:** [Worker Threads 參考網站](https://blog.logrocket.com/node-js-multithreading-what-are-worker-threads-and-why-do-they-matter-48ab102f8b10/) **child_process and execFile:** [execFile 參考網站1](https://ourcodeworld.com/articles/read/154/how-to-execute-an-exe-file-system-application-using-electron-framework) [execFile 參考網站2](https://https://nodejs.org/docs/latest-v10.x/api/all.html#child_process_child_process_execfile_file_args_options_callback) [execFile 參考網站3](https://www.digitalocean.com/community/tutorials/how-to-launch-child-processes-in-node-js) [execFile 參考網站4](https://www.npmjs.com/package/ts-process-promises) [Node 子行程 child_process](https://ithelp.ithome.com.tw/articles/10232335) **heap out of memory issue:** https://medium.com/@evgeni.leonti/detect-heap-overflow-on-node-js-javascript-heap-out-of-memory-41cb649c6b33 **typescript time:** [typescript time 參考網站](https://www.javatpoint.com/typescript-date-object) **Electron:** [Electron 創建應用程式](https://medium.com/@happyjayxin/electron-%E5%89%B5%E5%BB%BA%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F-%E7%AD%86%E8%A8%981-c50b93612b0e) [Electron - 新手入門 - 做一個鬧鐘吧](https://dotblogs.com.tw/explooosion/2018/03/25/181604) [Node.js 101 — 單執行緒、非同步、非阻塞 I/O 與事件迴圈](https://medium.com/wenchin-rolls-around/node-js-101-%E5%96%AE%E5%9F%B7%E8%A1%8C%E7%B7%92-%E9%9D%9E%E5%90%8C%E6%AD%A5-%E9%9D%9E%E9%98%BB%E5%A1%9E-i-o-%E8%88%87%E4%BA%8B%E4%BB%B6%E8%BF%B4%E5%9C%88-ef94f8359eee) [簡單理解 JavaScript Async 和 Await](https://www.oxxostudio.tw/articles/201908/js-async-await.html) ## 11. python 參考網站 [彈出視窗與使用者輸入欄位](https://ithelp.ithome.com.tw/articles/10227807) ## 12. 歷次修改 ### 20201021 使用interval 取代 while(1) v0.1 6.(4) Worker Threads 使用在檢查使用者是否已標注,自動執行 vott_tracker.exe 新增的/run_exe.js模組 new work thread後,開始檢查使用者是否標注目標,若有就執行vott_tracker.exe :::warning !!!這邊要特別注意在Node.js裡面使用無限迴圈若是去執行function()容易造成 Node.js heap out of memory 的錯誤!!! 所以以下的code全部撰寫在while(1)內,不使用function ::: ```gherkin= path: VoTT_NTUT/UBU18/NTUT/services/run_exe.js ``` ![](https://i.imgur.com/rZiwdwh.png) v0.1 6.(5) 編譯參數 編譯檔案須增加編譯worker thread和增加記憶體參數 ```gherkin= $ vim VoTT_NTUT/UBU18/package.json 編譯worker thread: --experimental-worker 增加使用記憶體大小: --max_old_space_size=4096 ``` ![](https://i.imgur.com/pWTbQqd.png) ### 20201022 ### (1) 架構圖 ![](https://i.imgur.com/iZO4CU4.png) ### (3) new Worker Thread 在執行starts.js時new一個thread ```gherkin= 將detect_tag_thread模組加入使用 $ vim VoTT_NTUT/UBU18/src/electron/start.js + const detect_tag_thread = require('../../NTUT/services/detect_tag.js'); + detect_tag_thread.run().catch(err => console.error(err)); ``` ![](https://i.imgur.com/EkaKdU0.png) 新增的detect_tag_thread.js模組 ```gherkin= path: VoTT_NTUT/UBU18/NTUT/services/detect_tag.js ``` ![](https://i.imgur.com/OMlzEJh.png) ### (4) Worker Threads 使用在檢查使用者是否已標注,自動執行 vott_tracker.exe 新增的/run_exe.js模組 new work thread後,開始檢查使用者是否標注目標,若有就執行vott_tracker.exe ```gherkin= path: VoTT_NTUT/UBU18/NTUT/services/run_exe.js ``` ![](https://i.imgur.com/oosGxFe.png) ### (5) 編譯參數 編譯檔案須增加編譯worker thread參數 ```gherkin= $ vim VoTT_NTUT/UBU18/package.json 編譯worker thread: --experimental-worker ``` ![](https://i.imgur.com/qBvzQgx.png) ###### tags: `study`, `VoTT`