สร้างแอปที่ใช้เซ็นเซอร์สำหรับอุปกรณ์เคลื่อนที่

  • บทความ

เซ็นเซอร์ช่วยให้คุณสามารถเพิ่มฟังก์ชันการทำงานที่สมบูรณ์ยิ่งขึ้นลงในแอปของคุณ โดยการใช้ประโยชน์จากความสามารถของโทรศัพท์ของคุณ ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับการใช้เซ็นเซอร์บนอุปกรณ์เคลื่อนที่ของคุณภายใน Power Apps

ในการทำเช่นนี้ คุณจะต้องสร้างแอปตัวอย่างที่มีสองหน้าจอ หน้าจอแรกจะแสดงทิศทางปัจจุบันของเข็มทิศ, ละติจูด, ลองจิจูด, ระดับความสูง, และสามารถสแกนแท็ก NFC เพื่อรับข้อมูลข้อความ หน้าจอที่สองจะแสดงวิธีการแสดงข้อมูลเครื่องวัดความเร่งเพื่อสร้างมุมของอุปกรณ์ตามแนวแกน X และ Y

ในการตั้งค่าสถานการณ์เบื้องหลังหน้าจอแรก ให้จินตนาการว่าคุณกำลังสร้างแอปสำหรับการตามล่าหาสมบัติโดยใช้ 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 คุณอาจสังเกตเห็นว่ามีการใช้งานเซ็นเซอร์สองชนิด

ชนิดแรกคือเซ็นเซอร์ เข็มทิศ ซึ่งใช้คุณสมบัติ ทิศทาง เพื่อให้ทิศทางของเข็มทิศจากอุปกรณ์

ชนิดที่สองคือเซ็นเซอร์ ตำแหน่งที่ตั้ง ซึ่งให้ ละติจูด, ลองจิจูด, และ ระดับความสูง มีข้อควรพิจารณาสองประการเกี่ยวกับตำแหน่งที่ตั้ง อันดับแรก หากคุณใช้เพียงตำแหน่งที่ตั้งโดยไม่มีตัวดำเนินการและคุณสมบัติของจุด คุณจะได้รับเรกคอร์ดที่มีฟิลด์สำหรับละติจูด, ลองจิจูด, และระดับความสูง ประการที่สอง คุณสมบัติระดับความสูงเป็นหน่วยเมตรตามค่าเริ่มต้น หากคุณต้องการแปลงเป็นหน่วยฟุต ให้แทนที่สูตรต่อไปนี้:

ใช้เมตร:

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, ข้อความ, TNF, และ URI แม้ว่าคำอธิบายแบบเต็มของฟิลด์เหล่านี้จะอยู่นอกเหนือขอบเขตของบทความนี้ แต่คำอธิบายบางอย่างอาจมีประโยชน์ TNF หมายถึง พิมพ์ชื่อรูปแบบ และถูกใช้เพื่อกำหนดโครงสร้างของ ข้อกำหนดของชนิดของเรกคอร์ด หรือ RTD ซึ่งจะกำหนดชนิดของเรกคอร์ดที่มีอยู่ในฟิลด์ ข้อความ และ/หรือฟิลด์ URI URI หมายถึง Uniform Resource Identifier ซึ่งโดยพื้นฐานแล้วคือที่อยู่ของทรัพยากร สำหรับแท็ก NFC ที่ใช้ในตัวอย่างนี้ นอกเหนือจากฟิลด์ ข้อความ ที่มีข้อความตัวอย่างจากบทนำของหัวข้อนี้ โดยจะประกอบด้วยค่า TNF เป็น 1 ค่า RTD เป็น T และค่า 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:

"<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 ม./วินาที2 โดย 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

ตัวควบคุม ตัวเลื่อน นี้จะแสดงมุมที่คล้ายกับของระดับฟอง: ที่จับ จะเคลื่อนไปทางด้านที่ยกขึ้นของอุปกรณ์ ซึ่งคล้ายกับฟองอากาศในระดับฟอง

ต่อไป คัดลอก btnCircleLevel โดยการเลือก กด Ctrl + C แล้วจากนั้น Ctrl + V เปลี่ยนชื่อตัวควบคุมเป็น btnXValueOverlay และเปลี่ยนคุณสมบัติต่อไปนี้ในบานหน้าต่าง ขั้นสูง:

คุณสมบัติ ค่า
X sldXValue.X - sldXValue.HandleSize / 2
Y sldXValue.Y
ความกว้าง sldXValue.Width + sldXValue.HandleSize
ความสูง sldXValue.Height

การเปลี่ยนแปลงเหล่านี้จะวางตำแหน่งไว้เหนือตัวควบคุม sldXValue ซึ่งป้องกันไม่ให้ผู้ใช้เปลี่ยนค่าและให้เส้นขอบภาพ

คัดลอกและวาง sldXValue โดยใช้วิธีเดียวกับที่ใช้ในการคัดลอก btnCircleLevel เปลี่ยนชื่อเป็น 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

สิ่งนี้ทำให้ภาพที่เหมือนระดับฟองเสร็จสมบูรณ์

ทดสอบแอประดับ

ทดสอบแอป

บันทึกและเผยแพร่แอป บนอุปกรณ์เคลื่อนที่ที่มีเซ็นเซอร์ที่จำเป็น ให้เปิดแอปและนำทางไปยังหน้าจอด้วยภาพระดับฟอง เอียงอุปกรณ์จากซ้ายไปขวา จากนั้น ขึ้นและลง และสุดท้าย ในทุกทิศทาง โดยสังเกตการเปลี่ยนแปลงในคุณสมบัติของมุม ตลอดจนการเปลี่ยนแปลงในภาพ ค้นหาพื้นผิวที่ทำมุมเพื่อวางอุปกรณ์ และสังเกตมุมและภาพอีกครั้ง

ดูเพิ่มเติม