跳轉到主要內容

Documentation Index

Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt

Use this file to discover all available pages before exploring further.

Config Editor 是 BRICKS Controller 中的視覺化編輯器，可直接在瀏覽器中建立及編輯應用程式或模組設定。開啟任何應用程式或模組並點擊 Config Editor 即可開始編輯。

​
BRICKS 應用程式的運作方式

BRICKS 應用程式執行於 JSON 設定之上，該設定定義了 UI、資料、邏輯與互動。BRICKS Foundation 運行時讀取此設定並在螢幕上渲染應用程式。 建立設定有兩種方式：
方式工具適合對象
視覺化BRICKS Controller 中的 Config Editor快速編輯、非開發人員、視覺版面配置工作
程式碼優先bricks-ctor（TypeScript SDK）版本控制、AI 輔助開發、CI/CD 管線
兩者皆產生相同的 JSON 設定。您可以先從 Config Editor 開始，之後透過 Generate Project 切換至程式碼優先工作流程—或從程式碼部署後繼續在 Config Editor 中編輯。

​
應用程式結構

BRICKS 應用程式是可組合實體的樹狀結構： 
Application
└── Subspace（功能/螢幕容器）
    ├── Canvas（視圖/場景版面配置）
    │   └── Items（已定位的 Brick 或 Subspace 參照）
    ├── Brick（UI 元件）
    ├── Generator（資料/IO 提供者）
    ├── Data（狀態儲存）
    ├── Animation（視覺效果）
    └── Data Calculation（資料轉換）
Config Editor 提供管理上述每個實體的結構化介面。

​
Subspace

Subspace 是獨立的功能單元—可將其視為一個螢幕或功能模組。每個 Subspace 擁有自己的 Brick、Generator、Data、Canvas 及 Animation。應用程式以根 Subspace 作為進入點。 使用 Subspace 將應用程式組織成邏輯區段。您可以透過在一個 Subspace 的 Canvas 中參照另一個 Subspace 來進行巢狀巢狀。

​
Canvas

Canvas 定義檢視版面配置。它使用框架座標（x、y、寬度、高度）在格線上定位項目（Brick 或 Subspace 參照）。 Canvas 支援：
  • 生命週期事件 — firstEnter、enter 及 exit 事件，在 Canvas 變為作用中或非作用中時觸發動作
  • Canvas 切換 —在多螢幕流程的 Canvas 之間導覽
  • 項目定位 —在特定座標與尺寸放置 Brick 和 Subspace 參照

​
Brick

Brick 是視覺建構元件—顯示內容並處理互動的 UI 元件。
Brick用途
Text顯示帶有樣式的文字
TextInput可編輯的文字欄位
RichText支援 HTML 內容、多種字型與內嵌圖片的 Rich Text
Image顯示圖片
Video影片播放
VideoStreamingRTSP / RTMP 即時影像串流
WebrtcStreamWebRTC 影音串流
GenerativeMedia由 AI 生成的圖片與影片
WebView嵌入式網頁內容
Lottie.json 與 .dotlottie 動畫，支援速度、循環與影格範圍控制
Rive.riv 動畫，支援狀態機輸入、文字取代與 artboard 切換
SvgSVG 向量圖形
Chart資料視覺化
IconFontAwesome 6 Pro 圖示
QrCodeQR Code 顯示
Camera即時攝影機畫面
Maps地圖顯示
Rect帶有背景、框線、陰影的容器
Items以陣列資料驅動的列表或網格
Slideshow具轉場效果的自動切換幻燈片
Brick 可套用樣式、製作動畫、回應按壓事件，並將其屬性動態繫結至資料。

​
Generator

Generator 處理所有外部 I/O 與資料處理。它們將應用程式連線至 API、資料庫、硬體、AI 模型等。每個 Generator 具有將資料輸出至資料節點的輸出通道（outlets），以及觸發動作的事件（events）。
類別範例
AI & LLMAssistant、LLM（GGML/OpenAI/Anthropic/ONNX）、Vector Store、Reranker
語音Text-to-Speech、Speech-to-Text、VAD、Realtime Transcription
網路HTTP、WebSocket、GraphQL、MQTT、TCP、UDP、HTTP Server
儲存File、SQLite、Data Bank、Media Flow
硬體Bluetooth LE、Serial Port、Camera、Keyboard
控制流程Tick（計時器）、Alarm Clock、Step、Iterator、Watchdog
其他WebRTC、Web Crawler、MCP、Thermal Printer

​
Data

Data 節點儲存應用程式狀態。它們具有型別（字串、數字、布林值、陣列、物件），並可連結至 Brick 或 Generator 屬性以進行響應式更新。當 Generator 輸出通道發出值時，連結的資料會更新，並且任何綁定至該資料的 Brick 都會自動重新渲染。

​
Data Calculation

Data Calculation 是轉換資料的 JavaScript 函式。它們在沙盒環境中執行，內建 25 個以上的函式庫（lodash、moment、crypto 等）。用於格式化、解析或計算衍生值。

​
Animation

為 Brick 定義視覺效果與轉場。Animation 可由事件觸發，並套用至位置、透明度、縮放和旋轉等屬性。

​
動作與事件

動作是由事件觸發的指令。Brick 和 Generator 會發出事件（按壓、回應、錯誤、計時器滴答），您可以將它們連線至以下動作：
  • 變更 Canvas
  • 更新資料
  • 觸發 Generator
  • 執行 Animation
  • 在 Subspace 之間導覽

​
快速編輯

使用 Short Edit 在不建立完整發行版本的情況下快速修改屬性。Short Edit 允許您透過參照修改個別 Brick 或 Generator 屬性，非常適合快速迭代及調整生產裝置。 您也可以使用 BRICKS CLI 以程式方式套用快速編輯： 
# 列出可用的屬性參照
bricks app short-refs <app-id>

# 套用快速編輯
bricks app short-edit <app-id> -l '<json>'

​
驗證設定

Config Editor 在您編輯時會根據 BRICKS 結構描述驗證設定。您也可以從 CLI 驗證設定檔： 
bricks app check-config config.json

​
儲存與發行

1

儲存變更

在 Config Editor 中點擊 Save 以保存變更。這會更新應用程式的工作設定，並自動將變更部署至已綁定的裝置。
2

發行版本（可選）

前往應用程式詳細資訊頁面並建立發行版本，將目前設定快照為版本化發行版本，以便部署至其他裝置。
在 Config Editor 中儲存會自動將變更部署至已綁定的裝置。當您希望將某個版本快照以部署至其他裝置時，請建立發行版本。

​
核心參考

有關每個 Brick、Generator、資料型別及設定選項的詳細屬性文件，請參閱核心參考。

核心參考

所有 BRICKS 平台實體與屬性的完整文件。