歡迎使用 BRICKS ,此教學涵蓋基礎應用介面操作的第二步 : 學習建立應用程式,只要完成此章四小節內容,即可輕鬆學會 BRICKS 雲端智慧顯示基本應用介面操作。
🕐 此篇教學操作預計花費時間:3~5分鐘
步驟一『在 APPLICATION 頁籤新增應用程式』
登入 BRICKS Controller 後進入上一小節創建的工作區
步驟二『命名應用程式』
在創建應用程式視窗中,可以自行給予之後好管理的命名及詳細描述,取好名後即可按下 [ Save ] 確定創建應用程式。
*注意請勿先變更 Layout Width & Height,可先閱讀下方說明,理解後再變更
*額外說明:Layout Width 及Layout Height 是用來定義應用程式分割比例大小的屬性,和顯示螢幕解析度無關,應用程式可以同時在不同大小尺寸或解析度的設備上進行播放,為了在不同設備間可以輕易的轉換使用,我們採用分割比例的方式在進行基礎設定。 (可在 APPLICATION 頁的 Bind Device 中設定顯示設備的長寬),在之後教學拼接多個螢幕時會詳細說明。
步驟三『選擇編輯應用程式』
創建好應用程式後,可直接選擇右方 Configuration 區塊 [ Edit '你取的應用程式名稱' ] 進入應用程式編輯介面 。
進入應用程式編輯介面後,可以發現畫面分為三個區塊,以下針對三個區塊做說明。
左方的區塊是應用程式結構,包含 Canvas 畫布、Animation 動態設定、Generator 功能處理器、Property Bank 變數庫、Property Calculation 變數運算設定,詳細在後面教學說明,此小節將教學如何在Main Canvas 中新增Brick。
中間的白框範圍就是編輯顯示畫面的區塊,下方有縮放比例及播放畫面等功能操作控制鈕。
右方的區塊則是選擇左方區塊後顯示的屬性參數,不同結構的項目皆對應不同的屬性參數。
步驟四『新增 Brick 元件』
請至左方的 Canvas 1 (Root) 區塊點擊 [ + ] 新增 Brick 元件。
於 Template 中選擇想要新增的元件類型,這裡先選擇預設的 Rect 方塊來學習放置第一個元件,選擇後按下 [ New ] 按鈕確定新增。
*注意:第一個選項 Link exists 是用來連結其他 Canvas 畫布上的元件或用來連結 Subspace 的功能,請不要選擇其中的 Brick 選項!
鼠標移動到 Brick 中間可以拖放顯示位置
右方屬性參數尋找 Background Color 可設定 Brick 的背景顏色
步驟六『查詢 Brick 屬性參數說明』
在右方上方的屬性參數中都有 [ ? ] 按鈕供屬性參數的定義查詢。若在嘗試編輯時有不確定的屬性參數,都可以隨時點擊查詢說明。
點擊後即會在右方開啟各屬性參數的說明,也可隨時點擊 [ X ] 關閉說明。
步驟七『新增文字 Brick 』
新增完 Brick 並設定好屬性參數後,再來我們就要新增 HelloWorld 的文字 Brick,請同樣到 Canvas 1 (Root) 按 [ + ] 新增 Brick,並選擇 [ Text ]。
步驟八『設定文字 Brick 的屬性參數』
在上一步驟成功新增後,一樣到右方屬性參數去做文字 Brick 的設定,首先找到Width 的參數,點擊欄位右方的按鈕,即可獲得和應用程式等寬的文字元件,也可以自行設定數值或鼠標拖拉決定長寛。
同樣也可以透過參數設定元件的位置,或是直接以鼠標拖拉
還記得我們新增的是文字元件嗎?記得到 Text 的參數去設定文字內容,不然在下一小節的預覽教學時,可是什麼都看不到喔!
還記得你的方塊設定什麼顏色嗎?記得文字要設定成不同顏色才會看的到!
恭喜學會了應用程式介面的基本操作概念
下一小節將帶您認識如何預覽應用程式畫面
若需要任何幫助,歡迎點擊右下角的對話圖示詢問,我們會盡快回覆您的問題