---
# System prepended metadata

title: 軟體總架構與概念

---

# 軟體概述介紹

## Github專案

使用git clone下載專案
如果只是要體驗可以直接下載zip 
https://github.com/ck7-32/WEGO_lightdance

## 軟體架構圖:
![image](https://hackmd.io/_uploads/H1uTBh5uC.png)
我們的軟體主要分為兩部分
第一部分是**光效編輯器**
第二部分是**主控板程式**

# 光效編輯器-Editor.py
這個檔案就是我們整個編輯器的靈魂
大部分時間都是開這個來編輯光效
使用pyqt來構建介面 用Qwebchannel來串接html網頁來渲染模擬畫面
並且讀寫json格式的data來編輯光效資料
詳細操作可以參考[編輯器操作](/0aCiybSfStyNsGH1wYQeTg)



# data
首先我們應該最重要的就是要決定舞者的**顏色**以及變色的**時間**
所以我們使用JSON檔案格式來儲存所有的**顏色對應時間**的資料

以下是資料格式

#### setting.json(一定要知道的事前設定)
```
{
  "audio": "audio.mp3",
  "dancersname": ["dancer0"],
  "dancers": {
    "dancer0": {
      "LED": [
        [2, 2, 2, 2, 1, 1],
        [8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
        [7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
        [0, 0, 0, 0, 0, 6, 4, 4, 6],
        [0, 0, 0, 0, 5, 3, 3, 5],
        [10, 12, 12, 10, 12, 12, 12],
        [9, 11, 11, 9, 11, 11, 11]
      ],
      "LEDannotation": ["帽子+貓耳", "左手套", "右手套", "左半身", "右半身", "左褲子", "右褲子"],
      "parts": ["衣服", "貓耳", "帽子", "左手環", "右手環", "左手臂", "右手臂", "左手套", "右手套", "左短褲", "右短褲", "左長褲", "右長褲"]
    }
  }
```
- `audio` 是音檔名稱。
- `dancersname` 是舞者的名稱列表。
- `dancers` 包含每個舞者的 LED 配置、描述和部位名稱，用`dancersname`內的值作為key。
> `LED`：定義接在主機板上的八條實體燈條的配置，利用部位的index來做配置
`LEDannotation`：定義接在主機板上的八條實體燈條的配置的說明
`parts`：定義在模擬器中可以控制的部位數量，作為`LED`index配置的依據。


-----
###

#### data.json/dancer.json

|檔案名稱|意義|
|--------|-------|
| data.json | 儲存**所有舞者**的**部位**在每個**時間**對應的燈光**顏色**資料 |
| dancer.json|舞者動作之骨架資料|
|pos.json|舞者在對應時間的位置資料
|preset.json|保存特定關鍵幀舞者顏色或者整個所有舞者的顏色|

詳細可以參考 [資料結構](https://hackmd.io/1-Vl3LxaQhCD5IsgK7G5XA)

# Simulator

在使用Python建構的編輯器介面內部
需要有html+js的網頁來協助渲染模擬的畫面


### index.html
網頁的主幹架構，和一些初始化的東西

### main.js
主要的程式和動畫渲染的邏輯 跟 python的editor做溝通 檔案讀取更新等動作

### dancer.js
定義dancer物件，白話來說就是編輯舞者的外觀

### dancer(withanimation).js
跟dacer.js的作用重疊。但是這個寫法可以讓模擬器調用dancer.js的資料，渲染出舞步(那個人偶真的會跳舞)，但同時也會複雜很多
目前的使用方法是把它改名成"dancer.js"覆蓋掉原本的檔案就可以了


### qwebchannel.js
讓html網頁跟python構建的editor溝通所需要的套件檔案(可以不用理他)

# UI
### UI.ui 
這個檔案是qt designer的檔案格式
可以很方便的構建以及編輯GUI介面

### UI_to_py.bat
裡面的``python -m PyQt6.uic.pyuic UI.ui -o UI.py``
是將.ui檔案轉檔為.py檔案
只要在UI資料夾內打開終端機並輸入這個指令即可

### UI.py

由Ui.ui檔案轉譯而來，提供編輯器的介面
決定了所有按鈕布局選單等等
但還不包含內部的功能邏輯
之後會被主程式Editor.py引入作為基底使用

# Tools

### translate.py
將data.json檔案依據不同的舞者分割，生成出不同的

