---
# System prepended metadata

title: (Win10)VoTT 如何在label目標後產生.json檔案與資料格式解說
tags: [VoTT, study]

---

---
title: '(Win10)VoTT 如何在label目標後產生.json檔案與資料格式解說'
disqus: hackmd
---

VoTT 如何在label目標後產生.json檔案與資料格式解說(Win10)
===
:::info
注意!!在讀此文件之前,必須了解如何"***開啟專案***"與"***資料夾位置設定***",
可參考如下連結

[VoTT 安裝流程與建立專案(Ubuntu 18.04](https://hackmd.io/@NTUTVOTT/rymTpoVUD))
:::
文件版本.：v0.0.1
[TOC]

## 1. 使用 Draw Rectangle 工具
### (1) 使用工具標出目標物

在標出動作之前,首先觀察target資料夾內容(以新專案來解說）
可以知道,在尚未標圖前,只有如下圖的檔案內容

![](https://i.imgur.com/zul61n8.png)



使用 Draw Rectangle
![](https://i.imgur.com/MlLH3Fv.png)

標出動作
![](https://i.imgur.com/VTea85s.png)

### (2) json檔案的產生與程式區段
若是標圖動作完成,會在NTUT_Drone.vott此檔案同一層資料夾中產生 *.json檔案

![](https://i.imgur.com/UzbzCeG.png)



使用編輯器編輯下列檔案(下圖使用VS code觀察)
VoTT_NTUT/UBU18/src/services/assetService.ts
由於追蹤code後知道Draw Rectangle會使用class AssetService裡面的save

![](https://i.imgur.com/RsxW4HO.png)

底下的黃色框,是說如果有點選tag,進入if後會將資訊寫入filename.json
![](https://i.imgur.com/Nyiff53.png)


### (3) 使用 console.error 觀察 filename
在此段 code 加上 console.error(filename)
![](https://i.imgur.com/lbHaCOB.png)

```gherkin=
驗證執行後是否有產生debug message
到 VoTT_NTUT/UBU18/底下
$ npm start
```
開啟Toggle Developer Tools
![](https://i.imgur.com/hnkCU30.png)

測試標圖,的確如追code所示,會顯示出log
![](https://i.imgur.com/qpDcK3Q.png)


所以我們知道這一串組合是代表json file的名稱
另外-asset.json之前的那一串組合是代表id的意思,
我們必須要知道此id是如何產生的以及資料格式,
如此才能在python裡面自動創立追蹤檔案
![](https://i.imgur.com/rACh4rf.png)


### (4) 查詢 id 的來源
繼續追code可得知,在使用播放或是點選影片片段,會去執行如下函式
createAssetFromFilePath()
VoTT_NTUT/UBU18/src/services/assetService.ts
![](https://i.imgur.com/DubUBY3.png)

![](https://i.imgur.com/EIj2vgB.png)



關於底下的綠色線條,會在 "(5) 時間戳記" 討論
![](https://i.imgur.com/UBlO7zY.png)



### (5) 時間戳記解說
預設來源為15fps
![](https://i.imgur.com/fWeE6CA.png)


使用 a（pervious frame) 和 d(next frame) 按鍵來數frames number
,會得到 15 張,若是每一幀都標注可得到下列15個檔案

![](https://i.imgur.com/Z6o84pp.png)


![](https://i.imgur.com/HFY9jBL.png)


觀察一json檔案和時間戳記計算
04:46 = 4*60 + 46 = 286s 

![](https://i.imgur.com/ULqVLZ0.png)

時間間隔計算
timestamp interval = 1/15(0.066667 seconds)

列出15個檔案時間戳記

```gherkin=
"timestamp": 286
"timestamp": 286.066667
"timestamp": 286.133333
"timestamp": 286.2
"timestamp": 286.266667
"timestamp": 286.333333
"timestamp": 286.4
"timestamp": 286.466667
"timestamp": 286.533333
"timestamp": 286.6
"timestamp": 286.666667
"timestamp": 286.733333
"timestamp": 286.8
"timestamp": 286.866667
"timestamp": 286.933333    
```
### (6) *.json檔案裡面的 id + timestamp
現在有id 和timestamp等資訊即可完成json的asset部份,
我們就可以在python自動產生這些檔案

![](https://i.imgur.com/uZ04AS6.png)

關於如何產生json檔名
![](https://i.imgur.com/OIrQjtC.png)


### (7) regions id區段解說
只需要找到regions id 怎麼來的?其他boundingbox和points可由opencv tracker來計算
![](https://i.imgur.com/p2U0rg0.png)

追code可查到如下位置,測試增加condle.error(id)
VoTT_NTUT/UBU18/src/react/components/pages/editorPage/canvas.tsx

![](https://i.imgur.com/x8TRI2L.png)

![](https://i.imgur.com/46fIaQw.png)

檢驗是否是此段程式會產生regions id
![](https://i.imgur.com/NDRfPyH.png)


所以我們也可以利用python來產生不重複的id
![](https://i.imgur.com/ed78AUS.png)

[shortid庫](https://www.npmjs.com/package/shortid)

到目前為止,*.json 檔案內容已經可以自己創造



## 2. 驗證手動複製json檔案是否在VoTT有效

兩個步驟
```gherkin=
手動複製*.json檔案並修改內容
確認VoTT是否可以認別這個json檔案,如果可以,會自動產生bounding box
```

### 步驟1: 複製和修改json檔案 
* 1-1  標圖
![](https://i.imgur.com/d49sMbQ.png)


* 1-2 先複製一份並修改,假設要修改為下一幀,時間戳記等於846.066667
![](https://i.imgur.com/N4dKH7D.png)



* 1-3 複製新的路徑,經由MD5轉換
[MD5線上工具](https://coding.tools/tw/md5)
![](https://i.imgur.com/xzzDznz.png)

* 1-4 使用經過MD5轉換的id進行更名和修改文件內容(asset部份)
59efb5ddbb53467cb24dde7836985e50
![](https://i.imgur.com/xELgftq.png)

![](https://i.imgur.com/bbTHSx3.png)

* 1-6 修改文件內容(regions部份)
x部份減去40,並將tag改為jump

![](https://i.imgur.com/aZnNl8V.png)


### 步驟2: 檢驗是否在VoTT有產生bounding box

按下d(next frame)按鍵,的確會產生bounding box
* 前提是必須先在 TAGS新增一個tag為jump不然她會不知道"jump"這個tag
![](https://i.imgur.com/ajEeZmR.png)


![](https://i.imgur.com/2L67wLO.png)

###### tags: `study`, `VoTT`