瀏覽器編輯器

畫布與元件操作

編輯器分成五個區域：頂欄（儲存、部署）、工具列（對齊、圖層）、左側的元件庫與圖層清單、右側的屬性面板，以及底部的輸出、操作紀錄、搜尋與監看器面板。畫布支援左鍵拖曳、框選、中鍵平移、滾輪縮放與右鍵選單。

• 快捷鍵齊全：Ctrl+S 儲存、Ctrl+Z／Ctrl+Y 復原重做、Ctrl+A 全選、空白鍵旋轉 90 度、方向鍵微調（1px，Shift 為 10px），Ctrl+F 可跨所有畫面搜尋元件與文字。
• 對齊與分佈：水平／垂直對齊、置中於畫布、均分、翻轉；網格顯示與吸附，間距 4～200px 可調。
• 多選屬性共編：同類型元件一次改完全部屬性，數值顯示、儀表、指示燈等十種元件還能批次指定資料來源。
• 元件群組：Ctrl+G 把常一起搬動的元件綁成一組，雙擊進入隔離編輯；群組不影響圖層順序與 Runtime。
• 批量複製：設定橫向與縱向數量、間隙與填充順序，綁陣列變數時索引自動遞增，一排同款設備幾秒鋪完。

頁面與圖層

新頁面預設 1920×1080，可雙擊改名、拖曳排序。每一頁可引用最多三個圖層頁（底、中、上），把共用的標題列、導覽列、底圖做成圖層頁，所有頁面一起更新。

• 移動或交換畫面編號時，所有跳頁按鈕、彈窗、底圖、警報導航與主畫面設定自動跟著改。
• 視圖預覽、觸控區域顯示、自適應視窗，以及深色與淺色主題。
• 頁面截圖可逐頁輸出 PNG 並打包 zip，方便做驗收文件。

圖片與貼上即用

系統內建一百多張工業向量圖（風扇、泵浦、閥件、管件、感測器等），在選圖視窗依分類瀏覽或以中英文名稱搜尋，不需要隨專案搬運圖檔。

• Ctrl+V 直接貼入 PNG／JPG／SVG 圖片，自動上傳到專案圖片庫。
• 從 Excel 或 Google 試算表複製儲存格，貼上即轉成表格元件（上限 50 列 × 20 欄）。
• 元件可跨瀏覽器視窗、跨專案複製貼上，用到的圖片自動一起搬過去。

部署與運轉中編輯

按下部署後，底部面板會逐步顯示資料庫切換、停止舊腳本、PLC 通訊、攝影機串流、腳本引擎、背景任務、趨勢記錄、警報監控等十四個步驟的進度，直到部署完成。

「運轉中編輯」模式讓工程師在自己的電腦上連線現場設備：畫面上看到的是真實的即時值與通訊狀態，設計則存在本機。「部署到設備」時會逐區段比對兩邊的差異，只有含通訊或專案設定的同步才會重啟設備，其餘區段只重載對應的子系統，通訊不中斷。多國語字典、背景任務、警報規則等區段在運轉中儲存後立即生效，不需要重新部署。

畫面

操作流程

1. 1以 Engineer 以上的帳號登入，在專案中心開啟專案進入編輯器。
2. 2在左側新增頁面，必要時在畫布屬性設定背景與底、中、上三個圖層頁。
3. 3從元件庫把元件拖到畫布，在右側屬性面板綁定 Tag、設定外觀，用內建圖庫或上傳圖片換圖。
4. 4多選同類元件批次改屬性，用對齊、均分與網格整理版面，Ctrl+G 把常一起搬動的元件成組。
5. 5Ctrl+S 儲存，用視圖預覽、觸控區域與語言下拉檢查版面。
6. 6按「部署」等待十四步完成；或在運轉中編輯模式按「部署到設備」做分區同步。