เพียงแค่ควบคุมมอเตอร์ด้วยโทรศัพท์มือถือ: 5 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:05

How-To นี้แสดงวิธีควบคุม IoT Servo "HDrive17" อัจฉริยะด้วยโทรศัพท์มือถือของคุณเพียงแค่ใช้ HTML และ JavaScript หน้าเว็บรวมถึงสคริปต์นี้ถูกจัดเก็บไว้ใน Motor it และสามารถแนบไปกับ WebApp บนโทรศัพท์มือถือของคุณได้

ขั้นตอนที่ 1: ตั้งค่า HDDrive17 เป็นเครือข่ายท้องถิ่นของคุณ

เชื่อมต่อ HDrive17 (คุณสามารถรับได้จาก www.henschel-robotics.ch) กับเครือข่ายท้องถิ่นของคุณโดยเสียบสายอีเทอร์เน็ตจากมอเตอร์เข้ากับเราเตอร์ WiFi ของคุณ ดูแลว่าคุณได้กำหนดค่าที่อยู่ IP ที่ถูกต้องบน HDrive สำหรับเครือข่ายของคุณก่อน แอปพลิเคชันทั้งหมดที่แสดงในวิดีโอทั้งหมดอยู่ในไฟล์ HTML เดียวบนคอมพิวเตอร์ของฉัน ขั้นแรก คุณสามารถทดสอบเว็บไซต์นี้ในเบราว์เซอร์ในพื้นที่ของคุณและควบคุม HDrive จากพีซีของคุณ

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

นอกจากนี้ยังสามารถจัดเก็บหน้าเว็บบนมอเตอร์ได้โดยตรง โดยไม่ต้องใช้พีซีอีกต่อไป

ขั้นตอนที่ 2: การสมัครโปรแกรม

เนื้อหาของหน้าเว็บ:

เรากำลังใช้สคริปต์ roundslider เพื่อแสดงมาตรวัดที่ดี ดังนั้น เราต้องเพิ่มองค์ประกอบตัวเลื่อนในเนื้อหาของเอกสาร HTML

ขั้นตอนที่ 3: สคริปต์หน้าเว็บ

รหัสต่อไปนี้กำลังส่งตำแหน่งเป้าหมายใหม่ไปยัง HDrive เริ่มต้นด้วยการรวมสคริปต์ JQuery และ RoundSlider ตัวเลื่อนรอบเรียกเหตุการณ์การลากซึ่งเรียกฟังก์ชัน “sendDataToHdrive” ฟังก์ชันนี้จะส่งคำสั่งการขับเคลื่อนใหม่ไปยังมอเตอร์

โปรดดูบรรทัดนี้:

var blob = ใหม่ Blob(['

มันส่งไดรฟ์ยกย่องไปยัง HDrive ด้วยตำแหน่งเป้าหมาย สูงสุด ความเร็ว 2000 รอบต่อนาที ท่าสูงสุด กระแสไฟ 2A ในโหมด 129 (การควบคุมตำแหน่ง) คุณสามารถดาวน์โหลดโครงการทั้งหมดได้ที่นี่: Slider_demo.rar

ขั้นตอนที่ 4: จัดเก็บหน้าเว็บลงใน HDrive. โดยตรง

ในการโฮสต์เว็บแอปพลิเคชันบนไดรฟ์ของคุณ เราต้องอัปโหลดไฟล์ไปยังมอเตอร์ มอเตอร์สามารถอัปโหลดไฟล์ได้ 4 ไฟล์, 2 ไฟล์ HTML และ 2 สคริปต์ (.js) แต่ละไฟล์ได้รับการเปลี่ยนชื่อหลังจากอัปโหลด ไฟล์ HTML แรกถูกเปลี่ยนชื่อเป็น app1.html จากนั้น app2.html ไฟล์สคริปต์จะถูกเปลี่ยนชื่อเป็น s1.js และ s2.js ดังนั้นเราจึงต้องเปลี่ยนลิงค์ไฟล์ในไฟล์ HTML ของเรา JQuery… กลายเป็น “s2.js” นอกจากนี้ฉันได้คัดลอก css ตัวเลื่อนไปยังไฟล์ HTML

ขั้นแรกให้เข้าสู่ Web GUI จาก HDrive ของคุณและเข้าถึงส่วน "Apps"

ขั้นตอนที่ 5: การเข้าถึงแอพ

หลังจากอัปโหลดไฟล์เหล่านี้แล้ว คุณจะสามารถเข้าถึงหน้าเว็บตามที่อยู่ https://192.168.1.102/app1.html จากอุปกรณ์ใดๆ ในเครือข่ายเดียวกัน ไม่จำเป็นต้องใช้พีซีของคุณอีกต่อไป ไฟล์เหล่านี้โฮสต์โดยตรงจาก HDrive

ดาวน์โหลดไฟล์ทั้งหมดได้ที่นี่