TPDesign4 觸控面板 UI 設計教程

Paladin 发布于 2026-4-23 09:49 阅读：8 oTher

1. 軟體取得方式

AMX 官網下載（推薦）

瀏覽器開啟：https://www.amx.com
搜尋「TPDesign4」
選擇 Windows 版本下載

2. 軟體安裝

系統需求

項目	最低需求
作業系統	Windows 10/11（64-bit）
記憶體	4 GB RAM
硬碟空間	2 GB 可用空間
顯示解析度	1280×720 以上
.NET Framework	4.7.2 以上

3. TPDesign4 介面認識

┌─────────────────────────────────────────────────────────────────┐
│  選單列：File  Edit  View  Page  Tools  Help                      │
├──────────┬────────────────────────────────────────┬───────────────┤
│          │                                        │               │
│  頁面    │         頁面編輯區                     │   屬性面板     │
│  面板    │      (1024×768 觸控面板)               │               │
│          │                                        │  - 大小/位置   │
│  Main   │    ┌──────────────────────┐            │  - 顏色/字體   │
│  VCS    │    │                      │            │  - 圖片       │
│  Light  │    │    [按鈕] [按鈕]     │            │  - 行為設定    │
│  Mode   │    │                      │            │               │
│  ...    │    │    [滑桿] [狀態圖]   │            │               │
│          │    │                      │            │               │
│          │    └──────────────────────┘            │               │
├──────────┴────────────────────────────────────────┴───────────────┤
│  工具列：[選取] [按鈕] [滑桿] [文字] [圖片] [頁面跳轉] [系統控制]      │
└─────────────────────────────────────────────────────────────────┘

主要面板說明

面板	位置	功能
頁面面板	左側	顯示所有頁面，點擊切換編輯
編輯區	中央	頁面預覽與編輯，比例可調整
屬性面板	右側	選中元件的詳細設定
工具列	下方/上方	新增元件：按鈕、滑桿、文字、圖片等

4. 開啟與管理專案

開啟現有專案

1. 啟動 TPDesign4
2. File → Open Project（或 Ctrl+O）
3. 瀏覽至檔案位置：
   D:\UserData\User\Desktop\TUC_ZhongShan_2F_V3\
4. 選擇 TUC_ZhongShan_2F_V3.TP4
5. 點擊「開啟」
6. 如果提示輸入密碼，輸入設備商提供的密碼

⚠️ 注意： 如果設備商提供的 .TP4 檔案有加密，可能需要解密後才能編輯。請聯繫設備商取得未加密版本或解密密碼。

專案結構

TUC_ZhongShan_2F_V3/
├── 頁面清單
│   ├── Main（主頁）
│   ├── Welcome（歡迎頁）
│   ├── VCS（視訊會議）★ 即將修改
│   ├── Light（燈光控制）
│   ├── Mode（模式選擇）
│   ├── Product（產品展示）
│   ├── Camera（攝影機）
│   ├── CMS Connecting（CMS連線）
│   └── 鍵盤頁（Keyboard 3/4/5）
│
├── 全域圖片資源
│   └── 所有頁面共用的圖示
│
└── 系統設定
    ├── 面板解析度：1024×768
    ├── 頁面切換動畫
    └── 通訊設定（NetLinx 程式碼）

備份重要原則

⚠️ 修改前必讀！

修改前：一定要備份原始 .TP4 檔案

建議將備份命名為：TUC_ZhongShan_2F_V3_backup_YYYYMMDD.tp4

建議將整個資料夾複製一份備份

5. 頁面導航架構

您的專案頁面導航關係如下：

                    ┌─────────────┐
                    │   Welcome   │ ← 開機歡迎頁
                    │  (歡迎頁)    │
                    └──────┬──────┘
                           │ 按鈕點擊
                           ▼
                    ┌─────────────┐
                    │    Main     │ ← 主控制頁
                    │  (主頁)     │
                    └──┬──┬──┬──┬─┘
                       │  │  │  │
           ┌───────────┐│  │  │  │  ┌────────────┐
           │  Light    ││  │  │  │  │  Product   │
           │  (燈光)   ││  │  │  │  │  (產品展示) │
           └───────────┘│  │  │  │  └────────────┘
                       │  │  │
              ┌────────┐│ ┌┴──┴──┐
              │ Mode   ││ │  VCS  │ ← 要刪除的頁面
              │(模式選擇)│ │(視訊會議)│
              └────────┘│ └───────┘
                        │
                 ┌──────┴──────┐
                 │ Camera     │
                 │(攝影機控制) │
                 └─────────────┘

查看頁面之間的連結

在左側頁面面板，對著頁面按右鍵
選擇 「Find References」 或 「Page Navigation」
即可看到哪些按鈕連結到該頁面

6. 編輯現有頁面

6.1 選取與移動元件

選取：點擊元件即可選取（出現藍色邊框）
移動：拖曳選中的元件
調整大小：拖曳四角的控制點
複製：Ctrl+C / Ctrl+V
刪除：Delete 鍵

6.2 修改按鈕屬性

點擊按鈕選取
在右側屬性面板修改：

屬性	說明	範例
`Text`	按鈕顯示文字	「開燈」、「模式選擇」
`Image`	按鈕背景圖片	選擇已匯入的圖片
`Page To`	點擊後跳轉的頁面	選擇目標頁面
`Channel`	發送的 NetLinx 頻道	數字如 101, 102
`Color`	按鈕顏色/狀態	可設定按下/釋放不同顏色
`Size`	按鈕寬×高	Width: 150, Height: 80

6.3 修改文字屬性

雙擊文字元件可直接編輯文字內容，或在屬性面板調整：

字體大小（Font Size）
顏色（Text Color）
對齊方式（Align）

7. 按鈕與控制項

TPDesign4 提供多種控制項，以下是常用類型：

按鈕（Button）

用途：觸發動作、跳轉頁面、發送控制訊號
設定：Text + PageTo + Channel

滑桿（Slider / Channel Slider）

用途：音量控制、亮度調整、溫度設定
設定：Min Value + Max Value + Default + Channel Output

圖片按鈕（Image Button / Multi-State Button）

用途：狀態顯示按鈕（開/關兩種狀態切換）
設定：選擇不同狀態的圖片（On/Off）

頁面跳轉按鈕

用途：一鍵跳轉到指定頁面
設定：在屬性中設定 PageTo 為目標頁面名稱

多狀態按鈕（Multi-State Button）

用途：顯示設備狀態（如燈光開/關、空調模式等）
設定：設定狀態數量（StateCount）和每個狀態的圖片

8. 新增音量滑桿控制

8.1 需求說明

在主頁（Main）新增一個音量滑桿，用於控制會議室的：

喇叭音量
或麥克風音量

8.2 新增步驟

Step 1：選擇主頁

1. 在左側頁面面板，點擊「Main」頁面
2. 進入主頁編輯模式

Step 2：新增音量滑桿

1. 在下方工具列，找到「Slider」或「Channel Slider」圖示（滑桿符號）
   （也可能標示為「Analog Channel」或「Level Slider」）
2. 點擊該工具
3. 在主頁編輯區，點擊要放置滑桿的位置，拖曳出滑桿大小
4. 建議尺寸：寬 200-300 pixels × 高 50-80 pixels

Step 3：設定滑桿屬性

在右側屬性面板設定：

General（一般屬性）：
  Name（名稱）: Volume_Slider
  Text（標籤）: 音量控制

Channel Settings（頻道設定）：
  Channel（頻道）: 1          ← 請根據實際設備設定
  Level（級別）: 1            ← 音量級別通道

Range（範圍）：
  Min: 0
  Max: 100
  Default: 50

Slider Style（滑桿樣式）：
  Orientation: Horizontal     ← 橫向滑桿
  Track Color: #333333        ← 軌道顏色（灰色）
  Thumb Color: #2196F3        ← 滑塊顏色（藍色）

Step 4：新增音量圖示

1. 在工具列選擇「Text」工具
2. 在滑桿上方放置一個文字標籤
3. 輸入「🔊 音量」
4. 設定字體大小 14-18pt

Step 5：新增音量狀態文字

1. 在滑桿旁新增一個文字框
2. 綁定 Channel Feedback（頻道回饋）:
   當頻道收到回饋時，自動更新顯示目前音量值
3. 文字內容設定為 [LEVEL|1] 或類似的動態文字

8.3 設定 NetLinx 動作

音量滑桿需要 NetLinx 程式碼支援。TP4 檔案中的 NetLinx 程式碼需要：

1. 雙擊滑桿元件
2. 找到「Events」或「Programming」頁面
3. 設定 On Change 事件：
   CHANNEL_OR_LEVEL[x] -> SEND_LEVEL(z,x,v)

4. 或者在 NetLinx Code Editor 中輸入：
   DEFINE_DEVICE
   DV_VOLUME = 5001:1:0   ← 音量處理設備（需根據實際設備ID設定）

   DEFINE_LEVEL_EVENT
   LEVEL [DV_VOLUME,1]
   {
       SEND_LEVEL(nVTC,1,LEVEL.VALUE)
       ! 將音量值發送至視訊會議設備
   }

⚠️ 頻道 ID 確認： NetLinx 程式碼中的頻道 ID（Channel/Level）需要與實際控制的設備匹配。建議聯繫設備商確認正確的設備 ID，或請設備商提供修改過的 NetLinx 程式碼。

8.4 音量滑桿放置位置建議

建議將音量滑桿放在主頁的右側或下方區域（遠離主要功能按鈕），具體位置可參考：

┌────────────────────────────────────────┐
│            Main（主頁）                 │
│                                        │
│  [照明] [簡報] [模式]     [音量 🔊 ----] │
│  [空調和] [窗簾]         0━━━━━━━100 │
│                                        │
│  [會議室狀態]          [返回 Welcome]    │
└────────────────────────────────────────┘

9. 刪除視訊會議頁面

9.1 刪除前的準備

⚠️ 重要： 刪除 VCS 頁面之前，必須先移除所有連結到該頁面的按鈕，否則會造成按鈕失效（點擊後無反應）。

9.2 步驟一：找出連結到 VCS 頁面的按鈕

方法一：搜尋按鈕
1. 進入 Main 頁面
2. 按 Ctrl+F（或 Edit → Find）
3. 搜尋「PageTo」=「VCS」或「n-01-VCS」
4. 系統會列出所有連結到 VCS 頁面的按鈕

方法二：逐一檢查
1. 點擊每個按鈕，檢查屬性面板的「Page To」欄位
2. 找到值為「n-01-VCS」或「VCS」的按鈕

您的專案中，預期連結到 VCS 頁面的按鈕：

頁面	按鈕位置	預期行為
Main	主頁	點擊進入 VCS 頁面
Mode	模式頁	選擇視訊會議模式
快捷列	各頁底部	快速進入 VCS

9.3 步驟二：修改連結按鈕

對於要保留的按鈕（仍需要有視訊功能），可以：

選項 A：修改連結目標
  → 將連結改為其他頁面（如 Mode 頁面）

選項 B：改為直接控制
  → 移除 PageTo 連結，改為發送 Channel 訊號直接控制視訊設備

9.4 步驟三：刪除 VCS 頁面

1. 在左側頁面面板，找到「n-01-VCS」頁面
2. 按右鍵 → 選擇「Delete Page」
3. 系統會彈出警告：「此頁面有 X 個連結，是否繼續刪除？」
4. 點擊「Delete」確認刪除
5. 頁面從面板中消失

9.5 步驟四：刪除相關子頁面（可選）

視訊會議系統的相關頁面可能包括：

頁面名稱	是否刪除	說明
n-01-VCS	✅ 刪除	主視訊頁面
n-012-cam	⚠️ 考慮刪除	攝影機控制
n-013-connected	⚠️ 考慮刪除	連線狀態頁
n-091-VC Mode Start	⚠️ 考慮刪除	視訊開始頁
n-011-cms connecting	⚠️ 考慮刪除	CMS 連線頁

💡 建議： 先只刪除 n-01-VCS 主頁，其他相關頁面可視需要決定是否刪除。

10. 圖片資源管理

10.1 圖片資源面板

Tools → Resource Manager
或
View → Image Library

10.2 匯入新圖片

1. 開啟圖片資源管理器
2. 點擊「Import」或「+」按鈕
3. 選擇圖片檔案（支援 PNG, JPG, GIF）
4. 建議解析度：符合面板解析度（1024×768）的 2 倍（Retina 效果）
5. 圖片自動加入資源庫

10.3 圖片命名建議

為新圖片使用有意義的命名：

音量控制圖片：
  - volume_icon.png        （音量圖示）
  - volume_slider_track.png（滑桿軌道）
  - volume_slider_thumb.png（滑桿把手）
  - volume_0.png            （靜音圖示）
  - volume_50.png           （中等音量圖示）
  - volume_100.png          （最大音量圖示）

10.4 從本專案已提取的圖片

以下圖片已從 TUC_ZhongShan_2F_V3.TP4 中提取，可參考使用：

D:\UserData\User\Desktop\TUC_ZhongShan_2F_V3\extracted\images\
  - amx-icons_volume-level.png      （音量圖示）
  - amx-icons_audio-mixer.png       （音訊混音器）
  - level-volume-on-vertical.png    （音量開）
  - level-volume-off-vertical.png   （音量關）
  - Progressbar430.png              （進度條）

11. 編譯與部署

11.1 編譯（Build）

1. File → Build Project（或按 F7）
2. 系統檢查錯誤...
3. 如果有錯誤，會顯示在下方輸出面板
4. 成功後，產生 .tp4 檔案
5. 預設輸出位置：專案資料夾

11.2 常見編譯錯誤

錯誤訊息	原因	解決方法
「Page not found」	按鈕連結到不存在的頁面	檢查並修正 PageTo 設定
「Channel out of range」	頻道號碼超出範圍	確認設備支援的頻道範圍
「Image not found」	圖片未匯入資源庫	先匯入圖片再使用
「Memory overflow」	頁面太複雜	簡化頁面或刪除不需要的元件

11.3 部署到面板

方法一：透過 TPControl App

1. 開啟平板/手機上的 TPControl App
2. 連線到 AMX 主機
3. 在 TPDesign4 中：File → Export → TPControl Package
4. 將產生的 .tp4 檔案通過郵件、網路芳鄰等方式傳輸到平板
5. 在 TPControl App 中匯入新的 .tp4 檔案

方法二：透過 AMX NetLinx Master 主機

1. File → Upload to Device
2. 輸入主機 IP 位址（如：192.168.1.100）
3. 點擊 Upload
4. TPDesign4 自動將 .tp4 傳輸到主機
5. 主機自動分發到所有連線的觸控面板

方法三：透過 FTP 直接上傳

1. 將 .tp4 檔案上傳到 AMX 主機的 FTP 位置
2. SSH 到主機，執行：
   REBOOT SYSTEM
3. 面板自動重新載入新 UI

11.4 版本管理建議

每次修改後，建議：

1. 將新的 .tp4 檔案命名為版本號：
   TUC_ZhongShan_2F_V3_v2.tp4

2. 記錄修改日誌：
   TUC_ZhongShan_2F_修改日誌.md
   - 2026-04-23：移除 VCS 頁面，新增音量滑桿

3. 保留最後3個版本的備份

12. 常見問題

Q1：TPDesign4 支援哪些面板解析度？

A： TPDesign4 支援多種解析度：

800×480（常見 7" 面板）
1024×600（較新型號）
1024×768（您的面板）
1920×1080（全高清面板）
自定義解析度

Q2：可以同時編輯多個頁面嗎？

A：不能同時編輯。TPDesign4一次只顯示一個頁面。用左側頁面面板切換不同頁面。

Q3：修改後按鈕沒有反應怎麼辦？

A：檢查以下幾點：

NetLinx 程式碼是否正確設定 Channel/Level
面板與主機的網路連線是否正常
設備供應商是否需要更新主機上的程式碼

Q4：找不到 NetLinx Code Editor？

A：在 TPDesign4 中：

Tools → NetLinx Code Editor
或
View → NetLinx Programming

Q5：可以透過手機 App 修改 UI 嗎？

A： TPControl App 本身不支援編輯 UI，但可以：

直接載入修改後的 .tp4 檔案
在手機上預覽修改結果

Q6：忘記備份，覆蓋了原檔案怎麼辦？

A：如果設備商有原始檔案的備份，聯繫他們索取。建議立即請設備商提供一份原始未修改的檔案。

Q7：修改後需要重啟整個系統嗎？

A：通常不需要。只需要：

重新上傳 .tp4 到主機
或在面板上選擇「Reload UI」
不影響會議室其他設備的正常運作

附錄：快速參考卡片

您的專案關鍵資訊

面板解析度：1024 × 768 pixels
軟體版本：TPDesign4 / TPControl Studio
專案檔案：D:\UserData\z3526\Desktop\TUC_ZhongShan_2F_V3\TUC_ZhongShan_2F_V3.TP4
已提取圖片：D:\UserData\z3526\Desktop\TUC_ZhongShan_2F_V3\extracted\images\

頁面清單

頁面	檔案名	功能	修改計畫
Main	n-Main	主頁	新增音量滑桿
Welcome	n-Welcome	歡迎頁	不變
VCS	n-01-VCS	視訊會議	刪除
Light	n-016-Light	燈光控制	不變
Mode	n-014-mode	模式選擇	移除 VCS 連結
Product	n-015-product	產品展示	不變
Camera	n-012-cam	攝影機控制	視需要刪除
CMS	n-011-cms connecting	CMS 連線	視需要刪除

NetLinx 關鍵頻道參考（需向設備商確認）

功能	預期頻道	說明
音量控制	Level 1-10	取決於實際設備
燈光全開	Channel 10
燈光全關	Channel 11
VCS 開機	Channel 50	視訊設備供應商定義
VCS 關機	Channel 51

TPDesign4