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

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

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

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

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


使用 Draw Rectangle

標出動作

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


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


底下的黃色框,是說如果有點選tag,進入if後會將資訊寫入filename.json

### (3) 使用 console.error 觀察 filename
在此段 code 加上 console.error(filename)

驗證執行後是否有產生debug message
到 VoTT_NTUT/UBU18/底下
$ npm start

開啟Toggle Developer Tools

測試標圖,的確如追code所示,會顯示出log

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

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


關於底下的綠色線條,會在 "(5) 時間戳記" 討論

框圖後與上圖黃框做比較

產生的id-asset.json

### (5) 時間戳記解說
預設來源為15fps

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



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


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

列出15個檔案時間戳記

"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自動產生這些檔案


關於如何產生json檔名

### (7) regions id區段解說
只需要找到regions id 怎麼來的?其他boundingbox和points可由opencv tracker來計算

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



檢驗是否是此段程式會產生regions id


所以我們也可以利用python來產生不重複的id

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

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

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

兩個步驟

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

### 步驟1: 複製和修改json檔案
* 1-1 標圖

* 1-2 複製並修改,假設要修改為下一幀,時間戳記等於846.066667

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

* 1-4 使用經過MD5轉換的id進行更名和修改文件內容(asset部份)
59efb5ddbb53467cb24dde7836985e50


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


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

按下d(next frame)按鍵,的確會產生bounding box


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