教學課程:在 Azure IoT Central 中自定義儀錶板和管理裝置

在本教學課程中,您將瞭解如何在 Azure IoT Central 店內分析應用程式中自定義儀錶板。 應用程式操作員可以使用自定義的儀錶板來執行應用程式及管理連結的裝置。

在本教學課程中,您會了解如何:

  • 自定義儀錶板上的影像磚
  • 排列磚以修改版面配置
  • 新增遙測磚以顯示條件
  • 新增屬性磚以顯示裝置詳細數據
  • 新增命令磚以執行命令

必要條件

開始之前,請先完成 在 Azure IoT Central 中建立店內分析應用程式教學課程。

變更儀錶板名稱

建立條件監視應用程式之後,您可以編輯其默認儀錶板。 您也可以建立更多儀錶板。

自訂應用程式儀表板的第一個步驟是變更名稱:

  1. 移至 [Azure IoT Central 我的應用程式] 頁面。

  2. 開啟您所建立的條件監視應用程式。

  3. 選取 [儀錶板設定],輸入儀錶板的名稱,然後選取 [ 儲存]。

店內分析應用程式儀錶板的螢幕快照。

自定義儀錶板上的影像磚

Azure IoT Central 應用程式儀錶板包含一或多個圖格。 磚是矩形容器,用於在儀錶板上顯示內容。 您可以將不同類型的內容與磚產生關聯,而且您可以拖放和調整磚大小,以自定義儀錶板配置。

有數種類型的磚可用來顯示內容:

  • 影像 磚包含影像,您可以新增 URL,讓您選取影像。
  • 標籤磚會顯示純文字。
  • Markdown 圖格包含格式化的內容,並可讓您設定影像、URL、標題和 Markdown 程式代碼,以 HTML 呈現。
  • 遙測、屬性或命令 磚會顯示裝置特定數據。

在本節中,您會在儀錶板上自定義影像磚。

若要自定義儀錶板上顯示品牌影像的影像磚:

  1. 選取 儀錶板工具列上的 [編輯 ]。

  2. 顯示 Northwind Traders 品牌影像的影像圖格上選取 [編輯 ]。

  3. 變更標題。 當您將滑鼠停留在影像上方時,標題隨即出現。

  4. 選取圖像。 隨即開啟視窗,您可以在其中上傳自定義影像,或者選擇性地指定影像的URL。

  5. 選取更新

    顯示店內分析應用程式儀錶板品牌影像磚的螢幕快照。

  6. 或者,在 [ ] 圖格上,選取 [ 設定],然後指定連結以支持內容的 URL。

若要自訂影像圖格,以顯示存放區中感測器區域的地圖:

  1. 在顯示預設存放區地圖的影像圖格上,選取 [ 設定]。

  2. 選取 [ 影像],然後上傳商店區域地圖的自定義影像。

  3. 選取更新

顯示店內分析應用程式儀錶板地圖磚的螢幕快照。

Contoso 商店地圖範例顯示四個區域:兩個結帳區域、一個服裝和個人護理區域,以及一個雜貨和 deli 的區域。

在本教學課程中,您會將感測器與這些區域產生關聯,以提供遙測。

排列磚以修改版面配置

自定義儀錶板的關鍵步驟是重新排列磚,以建立有用的檢視。 應用程式操作員會使用儀錶板將裝置遙測、管理裝置,以及監視存放區中的條件可視化。

Azure IoT Central 可簡化建立儀錶板的應用程式建立器工作。 藉由使用儀錶板編輯模式,您可以快速新增、移動、重設大小及刪除磚。

店內 分析 - 結帳 應用程式範本也會簡化建立儀錶板的工作。 此範本提供可運作的儀錶板版面配置,並連接感測器,以及顯示結帳明細計數和環境條件的磚。

在本節中,您會重新排列店內分析 - 結帳應用程式範本中的儀錶板磚,以建立自定義版面配置。

若要移除您不打算在應用程式中使用的磚:

  1. 選取 儀錶板工具列上的 [編輯 ]。

  2. 針對下列每個磚,Contoso 市集儀錶板不會使用,請選取省略號 (...),然後選取 [ 刪除]:

    • 回到所有區域
    • 流覽商店儀錶板
    • 熱身結帳區域
    • 冷卻結帳區域
    • 佔用率感測器設定
    • 控溫器設定
    • 等候時間
    • 環境條件
    • 簽出 3:與其相關聯的三個磚
  3. 選取 [儲存]。 拿掉未使用的磚可釋出編輯頁面上的空間,並簡化操作員的儀錶板檢視。

拿掉未使用的磚之後,請重新排列其餘磚以建立有組織的版面配置。 新的版面配置包含您稍後新增的磚空間。

若要重新排列其餘磚:

  1. 選取編輯

  2. [佔用韌體] 磚拖曳到 [佔用電池] 圖格右側

  3. 控溫器韌體磚拖曳到控溫器電池磚右側

  4. 選取 [儲存]。

  5. 檢視您的版面配置變更。

顯示店內分析應用程式儀錶板版面配置的螢幕快照。

新增遙測磚以顯示條件

自定義儀錶板配置之後,您就可以新增磚來顯示遙測。 若要建立遙測圖格,請選取裝置範本和裝置實例,然後選取要顯示在磚中的裝置特定遙測。 店內 分析 - 結帳 應用程式範本包含儀錶板上的數個遙測磚。 兩個結帳區域中的四個磚會顯示來自模擬佔用量感測器的遙測。 人員 流量圖格會顯示兩個結帳區域中的計數。

在本節中,您會新增兩個遙測磚,以顯示您在 Azure IoT Central 中建立店內分析應用程式中新增的 RuuviTag 感測器的環境遙測。

若要新增磚以顯示來自 RuuviTag 感測器的環境資料:

  1. 選取編輯

  2. 在 [ 裝置範本] 清單中,選取 [RuuviTag]。

  3. 選取兩個 RuuviTag 感測器之一的裝置實例 。 在 Contoso 存放區範例中,選取 [區域 1 Ruuvi ] 以建立區域 1 的遙測圖格。

  4. 在 [遙測] 清單中,選取 [相對濕度] 和 [溫度],此遙測專案會針對磚上的每個區域顯示。

  5. 選取 [ 新增磚]。 這個新的磚會顯示所選感測器的合併濕度和溫度遙測。

  6. 在 RuuviTag 感測器的新圖格上,選取 [ 設定]。

  7. 將標題變更為區域 1 環境

  8. 選取更新

  9. 重複步驟 1 到 8,為第二個感測器實例建立磚。 針對 [標題],輸入 區域 2 環境,然後選取 [ 更新組態]。

  10. 將標題為區域 2 環境的磚拖曳至 [控溫器韌體] 磚下方

  11. 將標題為 [區域 1] 環境的磚拖曳到 人員 流量圖格下方

  12. 選取 [儲存]。 儀錶板會在兩個新的磚中顯示區域遙測。

顯示市內分析應用程式儀錶板 RuuviTag 磚的螢幕快照。

若要編輯 人員 流量圖格,只顯示兩個結帳區域的遙測:

  1. 選取編輯

  2. [人員 流量] 圖格上,選取 [編輯]。

  3. 拿掉 count3 遙測。

  4. 選取更新

  5. 選取 [儲存]。 更新后的儀錶板只會顯示兩個結帳區域的計數,這些區域是以仿真的佔用量感測器為基礎。

顯示店內分析應用程式儀錶板 [人員 流量] 圖格的螢幕快照。

新增命令磚以執行命令

應用程式操作員也會使用儀錶板來執行命令來管理裝置。 您可以將命令磚新增至儀錶板,以在裝置上執行預先定義的命令。 在本節中,您會新增命令磚,讓操作員重新啟動 Rigado 閘道。

若要新增命令磚以重新啟動閘道:

  1. 選取編輯

  2. 在 [ 裝置範本 ] 清單中,選取 [C500]。 這是 Rigado C500 閘道的範本。

  3. 在 [裝置實例] 中 選取閘道實例

  4. 選取 [ 重新啟動] 命令。

  5. 選取 [ 新增磚]。

  6. 選取 [儲存]。

  7. 檢視您已完成的 Contoso 儀錶板。

    顯示已完成店內分析應用程式儀錶板的螢幕快照。

  8. 您可以選擇性地選取 [ 重新啟動 ] 圖格,以在閘道上執行重新啟動命令。

清除資源

如果您不打算完成任何進一步的 IoT Central 快速入門或教學課程,您可以刪除 IoT Central 應用程式:

  1. 在您的 IoT Central 應用程式中,流覽至 [應用程式 > 管理]。
  2. 選取 [ 刪除] ,然後確認您的動作。

後續步驟