建立使用行動裝置感應器的應用程式

  • 發行項

感應器可讓您利用手機的功能，將更豐富的功能新增至應用程式中。 在本文中，您將瞭解如何在 Power Apps 中使用行動裝置上的感應器。

因此，您將會使用兩個畫面來製作範例應用程式。 第一個畫面將顯示目前羅盤方向、緯度、經度和高度，且可以掃描 NFC 標籤以取得文字資訊。 第二個畫面將展示如何顯示加速計資料，以沿 X 軸和 Y 軸產生裝置角度。

若要設定第一個畫面背後的場景，請想像您正在為 NFC 型尋寶遊戲組建應用程式。 每個參與者都會使用應用程式來掃描 NFC 標籤，此 NFC 標籤將為他們提供羅盤方向、緯度和經度，為他們指點下一個目的地。 在該目的地，參與者會掃描另一個標籤，並重複這個過程，直到他們抵達尋寶終點。

對於第二個畫面，想像我們需要工具來粗略衡量角度。 在第二個畫面上時，參與者可以把他們的裝置放置或保持在一個表面上，並取得裝置的 X 軸和 Y 軸角度，以查看這些角度的視覺化表示。

觀看此影片以瞭解如何建立使用行動裝置感應器的應用程式：

先決條件

  • 任何層級的 Power Apps 授權均可用於此應用程式，因為未使用任何資料連線。

  • 由於大多數電腦可能沒有必要的感應器，因此需要具有 GPS 和加速計功能的行動裝置，例如手機或平板電腦。

  • NFC 掃描功能需要支援 NFC 的裝置。 同時假設要掃描的 NFC 標籤已預先設定為以下列範例格式產生的文字值：

    "<b>Heading: </b> 80 degrees <br>
<b>Latitude: </b> 44.4604788 <br>
<b>Longitude: </b> -110.82813759"

    這將為應用程式提供 HTML 格式的文字。 安裝 NFC 標籤不在本文的討論範圍內，如有需要，可以忽略 NFC 元素；主要重點是在 Power Apps 中使用行動裝置感應器。

為裝置感應器輸出新增標題和 HTML 文字

標題標籤

在 Power Apps 中開啟應用程式進行編輯時，請從插入窗格拖放文字標籤，以將其新增至畫面。 將其放置於畫面的左上角，然後在 [屬性] 窗格中修改下列屬性：

屬性 數值
文字 「尋寶遊戲」
字型大小 24
字型粗細 FontWeight.Semibold
文字對齊 置中對齊
寬度 Parent.Width

然後在進階窗格中修改下列屬性：

屬性 數值
色彩 RGBA(255, 255, 255, 1)
填滿 RGBA(56, 96, 178, 1)

這將提供畫面的標題。

裝置感應器輸的 HTML 文字

接著新增 HTML 文字控制項。 這將用於在同一個地方顯示所有裝置感應器輸出。 在 HtmlText 屬性中使用此程式碼：

"<b><u>Current Location</u></b><br>  
<br>
<b>Compass Heading: </b>" & Round(Compass.Heading, 2) & Char(0176) &
"<br>
<br>
<b>Lat: </b>" & Location.Latitude & "<br>
<b>Long: </b>" & Location.Longitude & "<br>
<b>Alt: </b>" & Round(Location.Altitude, 2) & " m"

在 [進階] 窗格中變更下列屬性：

屬性 數值
大小 21
BorderStyle BorderStyle.Solid
BorderThickness 2
寬度 560
高度 576
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

如果您檢查 HtmlText 中的內容，您可能會發現有兩種感應器類型正在使用中。

第一個是羅盤感應器，其使用 Heading 屬性來提供裝置的羅盤方向。

第二是位置感應器，其提供緯度、經度和高度。 位置有兩個考量因素。 首先，如果不使用點運算子和屬性來使用 [位置]，您將取得包含緯度、經度和高度欄位的記錄。 其次，Altitude 屬性預設以公尺為單位。 若要將它轉換成英尺，請改用下列公式：

使用公尺：

Round(Location.Altitude, 2) & " m"

使用英尺：

Round(Location.Altitude \* 3.2808, 2) & " ft"

注意

如果您在 Power Apps Studio 中預覽應用程式，許多感應器屬性可能無法正常運作。 若要使用感應器屬性進行測試，最好改用手機。

現在，將 HTML 文字控制項放在畫面下半部。

為 NFC 掃描和 HTML 文字控制項新增按鈕

NFC 掃描按鈕

將按鈕新增至應用程式，放在您在上一步新增的 HTML 文字控制項下方，並在進階窗格中變更以下屬性：

屬性 數值
OnSelect ClearCollect(colNFCScan, ReadNFC())
文字 「掃描 NFC 標籤」

OnSelect 屬性中的程式碼使用 ReadNFC() 函數，這會啟動 NFC 讀取器。 然後它會將從 NFC 標籤讀取的內容儲存在名為 colNFCScan 的集合中。 此集合將有四個欄位：RTD、Text、TNF 和 URI。 雖然這些欄位的完整解釋不在本文討論的範圍內，但稍微解釋一下可能會很有幫助。 TNF 是指 類型名稱格式，用於定義記錄類型定義或 RTD 的結構，而 RTD 又定義了 文字 和/或 URI 欄位中所包含的記錄類型。 URI 是指統一資源識別項，實質上就是資源的位址。 對於此範例中使用的 NFC 標籤，除了包含本主題介紹中範例文字的文字欄位之外，還包含 1 的 TNF 值 ，T 的 RTD 值，和空白的 URI 值。

新增 HTML 文字控制項以顯示 NFC 掃描資訊

新增第二個 HTML 文字控制項，並在 HTMLText 屬性中使用以下公式：

"<b><u>Next Destination</u></b><br>
<br>" &
First(colNFCScan).Text

在 [進階] 窗格中變更下列屬性：

屬性 數值
大小 21
BorderStyle BorderStyle.Solid
BorderThickness 2
寬度 560
高度 248
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

如果沒有任何 NFC 資料，控制項將會顯示下一個目的地。 掃描 NFC 標籤時，它會顯示下一個目的地，然後是掃描所收集資料中文字欄位中的資料。

假設已根據簡介所述設定 NFC 標籤的資料，則在掃描其中一個標籤後，使用者將會看到下一個尋寶遊戲位置的下一個羅盤方向、緯度和經度值。

羅盤方向的緯度值和經度值

測試應用程式

儲存並發佈應用程式。 在具有必要感應器的行動裝置上，開啟應用程式並查看羅盤方向、緯度、經度和高度值。 試著一邊走一邊向各個方向轉動，以查看各種感應器讀數的變化。

試著一邊走一邊向各個方向轉彎

按掃描 NFC 標籤按鈕，觀察 NFC 讀取器控制項。 如果您有可以產生文字值的 NFC 標籤，請掃描該標籤以觀察應用程式中的文字。 如果沒有，請選取取消。

掃描 NFC 標籤

新增和設定第二個畫面

為應用程式的 [角度測量] 部分新增空白畫面。

在新增畫面之後，返回第一個畫面，並從 + 插入 > 圖示 > 選擇下一步箭頭圖示來新增下一步箭頭。 將其放置於畫面的右上角，然後在 [進階] 窗格中變更下列屬性：

屬性 數值
OnSelect Navigate(Screen2)
色彩 RGBA(255, 255, 255, 1)

如果已重命名剛剛新增的第二個畫面，請在導覽函數中將該名稱取代為 Screen2。

預覽應用程式，並選取剛剛新增的圖示，以確認它會將您導覽至剛新增的空白畫面。

新增 X 與 Y 角度的設定

從插入窗格拖放文字標籤到畫面進行新增。 將其放置於畫面的左上角，然後在屬性窗格中修改下列屬性：

屬性 數值
文字 「2 軸層級」
字型大小 24
字型粗細 FontWeight.Semibold
文字對齊 置中對齊
寬度 Parent.Width

然後在進階窗格中修改下列屬性：

屬性 數值
色彩 RGBA(255, 255, 255, 1)
填滿 RGBA(56, 96, 178, 1)

這將提供第二個畫面的標題。

接著，從 + 插入 > 圖示 > 選擇上一步箭頭圖示，以新增上一步箭頭圖示。 將其放置於畫面的左上角，然後在進階窗格中變更下列屬性：

屬性 數值
OnSelect Navigate(Screen1)
色彩 RGBA(255, 255, 255, 1)

如果已重命名剛剛新增的第一個畫面，請在導覽函數中將該名稱取代為 Screen1。

最後，新增 HTML 文字控制項。 這將用於在同一個地方顯示所有裝置感應器輸出。 在 HTML Text 屬性中使用下列公式：

"<b><u>Angles:</u></b><br>
<br>
<table width='100%'>
<tr>
<td width='50%'><b>X: </b>" & Abs(Round(Acceleration.X * (90 / 9.81),
0)) & Char(0176) & "</td>
<td width='50%'><b>Y: </b>" & Abs(Round(Acceleration.Y * (90 / 9.81),
0)) & Char(0176) & "</td>
</tr>
</table>"

在 [進階] 索引標籤中變更下列屬性：

屬性 數值
大小 21
BorderStyle BorderStyle.Solid
BorderThickness 2
寬度 560
高度 168
PaddingTop 16
PaddingRight 16
PaddingBottom 16
PaddingLeft 16

將此控制項放在應用程式畫面的頂端附近。

如果您檢查 HtmlText 中的內容，您可能會發現其使用了包含 X 和 Y 屬性的加速度感應器。 在此案例中還有一個 Z 屬性沒有使用。

該感應器在三個平面上檢測裝置上的重力。 以行動電話為範例，想像一下從手機側面延伸出一條線。 這就是 X 平面。 抬起手機右側會產生正值，而抬起左邊就會產生負值。 在手機頂端和底端延伸的線代表 Y 平面。 抬起手機頂端會產生正值，而抬起底端就會產生負值。 最後，從手機背面延伸的線代表 Z 平面。 讓畫面正面朝上會產生正值，朝下會產生負值。

加速計會測量作用在設備上的力，無論是在運動中 (例如放下裝置時)，還是靜止時 (例如先前描述的在一個或多個軸上傾斜裝置)。 靜止時，理論值必須介於 0 與 +/-9.81 m/s2 之間，0 表示相對與地球平行，沒有重力作用在感應器上，而讀數為 9.81 表示相對軸與地球垂直，重力全部作用在感應器上。

查看剛剛新增的 HTML 文字控制項中的程式碼，請注意下列區段：

Abs(Round(Acceleration.X * (90 / 9.81), 0))

在此公式中，從裡到外，首先是X 平面的加速度乘以 (90/9.81)。 這會使用理論最大靜止值，將感應器讀數轉換成度數。 90 值的存在，是因為在最大理論值下，裝置將在該平面上垂直於地球，並提供 90 度的量值。

然後將該度數四捨五入到零小數位，以提供整數度數值。 最後，計算該四捨五入數字的絕對值，以得出正數讀數。 因此，無論角度是從一側或另一個衡量，都不會有任何影響。

注意

以上共用的值是近似的，並不代表精確的度量值。

新增層級視覺效果

在此步驟中，我們將以非常規方式使用一些控制項來達成視覺效果目標。

圓形氣泡水平儀狀視覺效果

首先，將按鈕控制項新增至畫面，並將其重新命名為 btnCircleLevel，並在進階窗格中變更下列屬性：

屬性 數值
文字 ""
BorderColor RGBA(56, 96, 178, 1)
FocusedBorderThickness 2
填滿 透明
DisabledFill Self.Fill
X (Parent.Width - Self.Width) / 2
Y (Parent.Height - Self.Height) / 2
寬度 400
高度 Self.Width

這些變更的結果應該會在畫面中央產生圓形按鈕，該按鈕因停用而無法按下。

接下來，新增圓形形狀，將其邊框半徑設定為 400，並在進階窗格中變更以下屬性：

屬性 數值
FocusedBorderThickness 12
X (Parent.Width - Self.Width) / 2 + (Round(Acceleration.X / 9.81 * 90, 0) / 90 * btnCircleLevel.Width / 2)
Y (Parent.Height - Self.Height) / 2 - (Round(Acceleration.Y / 9.81 * 90, 0) / 90 * btnCircleLevel.Width / 2)
寬度 42
高度 Self.Width
寬度 400
高度 Self.Width

X 與 Y屬性可讓圓形圖形圍繞應用程式畫面中央移動，加速度感應器值會產生相對變化，但包含在 btnCircleLevel 的圓形區域中。

X 軸與 Y 軸氣泡水平儀狀視覺效果

將滑桿控制項新增至應用程式，並將其重新命名為 sldXValue，並在進階窗格中變更下列屬性：

屬性 數值
最小 -90
最大 90
預設值 Round(Acceleration.X * (90 / 9.81), 0)
ValueFill Self.RailFill
X (Parent.Width - Self.Width) / 2
Y btnCircleLevel.Y + btnCircleLevel.Height + 30
寬度 btnCircleLevel.Width
高度 70

此滑桿控制項將顯示類似於氣泡水平儀的角度：滑桿會向裝置的凸起側移動，類似氣泡水平儀中的空氣氣泡。

接著選取它，按 Ctrl + C 複製 btnCircleLevel，然後按 Ctrl + V。將控制項重新命名為 btnXValueOverlay，並在進階窗格中變更下列屬性：

屬性 數值
X sldXValue.X - sldXValue.HandleSize / 2
Y sldXValue.Y
寬度 sldXValue.Width + sldXValue.HandleSize
高度 sldXValue.Height

這些變更會將其定位在 sldXValue 控制項，以防使用者變更其值並提供視覺效果邊框。

使用與複製 btnCircleLevel 相同的方法，複製並貼上 sldXValue。 將其重新命名為 sldYValue，然後變更下列屬性：

屬性 數值
配置 Layout.Vertical
X btnCircleLevel.X - Self.Width - 30
Y (Parent.Height - Self.Height) / 2
寬度 sldXValue.Height
高度 sldXValue.Width

複製並貼上 btnXValueOverlay，將其重命名為 btnYValueOverlay，並變更下列屬性：

屬性 數值
X sldYValue.X
Y sldYValue.Y - sldYValue.HandleSize / 2
寬度 sldYValue.Width
高度 sldYValue.Height + sldYValue.HandleSize

這樣就會完成氣泡水平儀狀視覺效果。

測試水平儀應用程式

測試應用程式

儲存並發佈應用程式。 在具有必要感應器的行動裝置上，開啟應用程式，並導覽至具有氣泡水平儀視覺效果的畫面。 將裝置從左向右傾斜，然後向上或向下傾斜，最後向各方向傾斜，注意角度屬性的變化，以及視覺效果的變化。 找一個斜面來放置裝置，再次記下角度和視覺效果。

請參閱