---
# System prepended metadata

title: 在VoTT新增service來執行vott_tracker.exe與exe製作方法
tags: [VoTT, study]

---

---
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`