步驟一：創(chuàng)建Web應(yīng)用

在項目下創(chuàng)建待開發(fā)的Web應(yīng)用。詳細(xì)說明，請參見創(chuàng)建Web應(yīng)用。

步驟二：配置頁面

1. 設(shè)置分辨率和背景。

   本案例以自定義分辨率375（W）*667（H）和上傳背景圖片（您可自定義圖片）為例，如下圖所示。詳細(xì)說明，請參見頁面。

   
2. 添加文字組件，作為頁面標(biāo)題。
   從左側(cè)組件列表中，拖拽一個文字組件到畫布上。

   設(shè)置文字內(nèi)容（例如：小丸子的家）和樣式，如下圖所示。詳細(xì)說明，請參見文字。

   
3. 添加時鐘組件，展示頁面當(dāng)前時間。

   拖拽一個時鐘組件到畫布上，設(shè)置時鐘組件的展示格式（例如：日期時間）和樣式，如下圖所示。詳細(xì)說明，請參見時鐘。

   

步驟三：配置開關(guān)控制組件

1. 設(shè)置一個燈開關(guān)的控制組件。
   
   1. 從左側(cè)組件列表中，拖拽一個矩形、一個開關(guān)和一個文字組件到畫布上，設(shè)置標(biāo)題和樣式。
      • 矩形組件作為背景，設(shè)置填充顏色為#FFFFFF，詳細(xì)說明請參見矩形。
      • 文字組件作為開關(guān)標(biāo)題（例如：設(shè)置文字內(nèi)容為主臥燈），詳細(xì)說明請參見文字。
      • 開關(guān)組件作為燈開關(guān)狀態(tài)的顯示，分別為ON和OFF狀態(tài)上傳對應(yīng)圖片（您可自定義）。詳細(xì)說明請參見開關(guān)。
   2. 配置開關(guān)組件數(shù)據(jù)源。
      參數(shù)配置說明如下，詳細(xì)配置指導(dǎo)，請參見開關(guān)。

      參數(shù)	說明
      選擇數(shù)據(jù)源	選中設(shè)備。
      產(chǎn)品	選擇該開關(guān)組件對應(yīng)的設(shè)備所屬產(chǎn)品，本案例選擇：開關(guān)遙控器。
      設(shè)備	選擇該組件的數(shù)據(jù)源設(shè)備。本案例選擇指定設(shè)備：switch_control_device。
      數(shù)據(jù)項	作為組件數(shù)據(jù)源的數(shù)據(jù)項。默認(rèn)為設(shè)備屬性。
      屬性	選擇該開關(guān)組件對應(yīng)的屬性：主臥燈開關(guān)。

2. 可選：設(shè)置多個相同樣式的開關(guān)組件。
   
   1. 選中已配置好的主臥燈開關(guān)組件（矩形、文字、開關(guān)），單擊鼠標(biāo)右鍵，選擇成組。
   2. 復(fù)制粘貼5個相同配置的組件組到頁面上，進(jìn)行2行3列排列。
   3. 分別選中復(fù)制的組件組，單擊鼠標(biāo)右鍵，選擇解散組。
   4. 分別選中文字組件，更改文字內(nèi)容為次臥燈、客廳燈、主臥窗簾、次臥窗簾、客廳窗簾。
   5. 根據(jù)各組件對應(yīng)的功能定義，分別選中開關(guān)組件，修改綁定的設(shè)備屬性為：次臥燈開關(guān)、客廳燈開關(guān)、主臥窗簾開關(guān)、次臥窗簾開關(guān)、客廳窗簾開關(guān)。
   6. 為窗簾開關(guān)組件替換對應(yīng)狀態(tài)的圖片。
3. 單擊編輯器上方保存按鈕，保存設(shè)置。
4. 鼠標(biāo)指針移動到編輯器左上角的圖標(biāo)上，展開項目概覽框，單擊Web可視化開發(fā)。
5. 在新打開的項目詳情頁，單擊左側(cè)導(dǎo)航欄設(shè)備，找到switch_control_device，單擊操作欄查看，單擊物模型數(shù)據(jù)頁簽，查看調(diào)試虛擬設(shè)備上報的屬性值。
   
6. 回到Web應(yīng)用編輯器，單擊右上方預(yù)覽按鈕，預(yù)覽應(yīng)用，可看到應(yīng)用中組件展示狀態(tài)與設(shè)備運(yùn)行狀態(tài)數(shù)據(jù)一致。
   

   您可單擊關(guān)閉的次臥燈和次臥窗簾開關(guān)，控制對應(yīng)開關(guān)開啟。在設(shè)備詳情的物模型數(shù)據(jù)頁簽，可查看到設(shè)備對應(yīng)開關(guān)開啟。