2.2 建立應用程式

說明 APPLICATION 介面架構及實作 HelloWorld 文字顯示

BRICKS TOOLS avatar
作者:BRICKS TOOLS
一週前已更新

歡迎使用 BRICKS ,此教學涵蓋基礎應用介面操作的第二步 : 學習建立應用程式,只要完成此章四小節內容,即可輕鬆學會 BRICKS 雲端智慧顯示基本應用介面操作。


🕐 此篇教學操作預計花費時間:3~5分鐘

  • 步驟一『在 APPLICATION 頁籤新增應用程式』

    登入 BRICKS Controller 後進入上一小節創建的工作區

    1. 進入工作區後切換至 APPLICATION 頁籤

    2. 點擊下方 [ New Application ] 創建一個新的應用程式。

      BRICKS Controller Application page

  • 步驟二『命名應用程式』

    在創建應用程式視窗中,可以自行給予之後好管理的命名及詳細描述,取好名後即可按下 [ Save ] 確定創建應用程式。

    *注意請勿先變更 Layout Width & Height,可先閱讀下方說明,理解後再變更


    *額外說明:Layout Width 及Layout Height 是用來定義應用程式分割比例大小的屬性,和顯示螢幕解析度無關,應用程式可以同時在不同大小尺寸或解析度的設備上進行播放,為了在不同設備間可以輕易的轉換使用,我們採用分割比例的方式在進行基礎設定。 (可在 APPLICATION 頁的 Bind Device 中設定顯示設備的長寬),在之後教學拼接多個螢幕時會詳細說明。

    Create new application

  • 步驟三『選擇編輯應用程式』

    創建好應用程式後,可直接選擇右方 Configuration 區塊 [ Edit '你取的應用程式名稱' ] 進入應用程式編輯介面 。

    Application Information page

    進入應用程式編輯介面後,可以發現畫面分為三個區塊,以下針對三個區塊做說明。

    1. 左方的區塊是應用程式結構,包含 Canvas 畫布、Animation 動態設定、Generator 功能處理器、Property Bank 變數庫、Property Calculation 變數運算設定,詳細在後面教學說明,此小節將教學如何在Main Canvas 中新增Brick。

    2. 中間的白框範圍就是編輯顯示畫面的區塊,下方有縮放比例及播放畫面等功能操作控制鈕。

    3. 右方的區塊則是選擇左方區塊後顯示的屬性參數,不同結構的項目皆對應不同的屬性參數。

    Application Intro

  • 步驟四『新增 Brick 元件』

    請至左方的 Canvas 1 (Root) 區塊點擊 [ + ] 新增 Brick 元件。

    BRICKS Application Editing Interface

    於 Template 中選擇想要新增的元件類型,這裡先選擇預設的 Rect 方塊來學習放置第一個元件,選擇後按下 [ New ] 按鈕確定新增。

    *注意:第一個選項 Link exists 是用來連結其他 Canvas 畫布上的元件或用來連結 Subspace 的功能,請不要選擇其中的 Brick 選項!

    Create new Brick interface

  • 步驟五『設定 Rect Brick 的屬性參數』

    新增出來的方塊可隨時在編輯畫面中以所見即所得的方式拖拉大小及移動位置。

    鼠標移動到元件邊緣即可拖拉縮放元件磚大小

    Setting brick property

drag to scale brick size

鼠標移動到 Brick 中間可以拖放顯示位置

drag to move brick position

右方屬性參數尋找 Background Color 可設定 Brick 的背景顏色

Change brick background color

  • 步驟六『查詢 Brick 屬性參數說明』

    在右方上方的屬性參數中都有 [ ? ] 按鈕供屬性參數的定義查詢。若在嘗試編輯時有不確定的屬性參數,都可以隨時點擊查詢說明。

    Lookup brick property information

    點擊後即會在右方開啟各屬性參數的說明,也可隨時點擊 [ X ] 關閉說明。

    brick property information tutorial

  • 步驟七『新增文字 Brick 』

    新增完 Brick 並設定好屬性參數後,再來我們就要新增 HelloWorld 的文字 Brick,請同樣到 Canvas 1 (Root) 按 [ + ] 新增 Brick,並選擇 [ Text ]

    brick template type list

  • 步驟八『設定文字 Brick 的屬性參數』

    在上一步驟成功新增後,一樣到右方屬性參數去做文字 Brick 的設定,首先找到Width 的參數,點擊欄位右方的按鈕,即可獲得和應用程式等寬的文字元件,也可以自行設定數值或鼠標拖拉決定長寛。

    brick property width setting

    同樣也可以透過參數設定元件的位置,或是直接以鼠標拖拉

    brick property Y position setting

    還記得我們新增的是文字元件嗎?記得到 Text 的參數去設定文字內容,不然在下一小節的預覽教學時,可是什麼都看不到喔!

    Text brick Text setting

    還記得你的方塊設定什麼顏色嗎?記得文字要設定成不同顏色才會看的到!

    Text brick color setting

  • 恭喜學會了應用程式介面的基本操作概念


    下一小節將帶您認識如何預覽應用程式畫面

若需要任何幫助,歡迎點擊右下角的對話圖示詢問,我們會盡快回覆您的問題

是否回答了您的問題?