WebApp Controlled Gate Operator Add-on (IoT): 20 ขั้นตอน (พร้อมรูปภาพ)

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

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

ในรูปสุดท้ายข้างบนเป็นชุดทดสอบที่ผมวิ่งมาเกือบปีในถุงซิปล็อค ฉันคิดว่าถึงเวลาอัพเกรดแล้ว!

นี่เป็นโซลูชันที่ทำงานได้อย่างสมบูรณ์พร้อมโค้ด ข้อมูลฮาร์ดแวร์ และการออกแบบทั้งหมดที่ระบุไว้ที่นี่

ไฟล์โครงการทั้งหมดยังโฮสต์บน GitHub: github.com/ThingEngineer/IoT-Gate-Operator-Addon

ตัวอย่างของอินเทอร์เฟซ CodeIgniter WebApp โฮสต์ที่นี่: projects.ajillion.com/gate อินสแตนซ์นี้ไม่ได้เชื่อมต่อกับเกตสด แต่เป็นอินเทอร์เฟซและรหัสที่แน่นอนที่ทำงานบนเกต (ลบด้วยคุณสมบัติความปลอดภัยบางอย่าง)

--

สำหรับการผสานรวมที่ดียิ่งขึ้น คุณสามารถใช้ไลบรารี IFTTT สำหรับ Electric Imp

ขั้นตอนที่ 1: รวบรวมชิ้นส่วน

• คุณจะต้องมี IMP ไฟฟ้าที่มี GPIO อย่างน้อย 4 ตัว ฉันกำลังใช้ IMP001 กับกระดานฝ่าวงล้อมเดือนเมษายน
• ตัวควบคุมเพื่อลดแรงดันไฟฟ้าต้นทางลงไปที่ 5V ฉันใช้ DC-DC Buck Converter Step Down Module เวอร์ชัน MP1584EN ของ eBoot จาก Amazon
• โมดูลรีเลย์คู่ (หรือมากกว่า) หรืออุปกรณ์สวิตช์ที่คล้ายกันที่จะทำงานกับเอาต์พุต IMP ฉันใช้ JBtek 4 Channel DC 5V Relay Module จาก Amazon
• ขั้วเกลียวแบบ 4 เส้น ฉันใช้ตัวนี้ 5Pcs 2 Rows 12P Wire Connector Screw Terminal Barrier Block 300V 20A จาก Amazon

ขั้นตอนที่ 2: วัสดุสิ้นเปลือง

คุณจะต้อง:

• เข้าถึงเครื่องพิมพ์ 3 มิติหรือกล่องโปรเจ็กต์ขนาดเล็ก
• สกรูขนาดเล็ก 4 ตัวประมาณ 4 มม. x 6 มม. สำหรับฝาเคส
• สายเชื่อมต่อ
• เครื่องตัดลวด
• เครื่องปอกสายไฟ
• ไขควงขนาดเล็ก
• หัวแร้ง
• กาวร้อนหรือซิลิโคน
• ซิปรูด

ขั้นตอนที่ 3: ปรับขนาดเคส

จัดวางชิ้นส่วนของคุณเพื่อกำหนดขนาดกรณีที่คุณต้องการ ด้วยเลย์เอาต์ตามภาพ ฉันต้องใช้เคสที่มีความกว้าง 140 มม. ลึก 70 มม. และสูง 30 มม.

ขั้นตอนที่ 4: ตัวแปลง DC-DC แบบลวด

ตัดสายเชื่อมต่อสีแดงและสีดำ 3 คู่สำหรับต่อสายไฟเข้าและออกจากบอร์ดแปลง DC-DC

• อินพุต: 100mm
• เอาต์พุตเป็น IMP: 90mm
• เอาต์พุตไปยังโมดูลรีเลย์: 130mm

ประสานเข้ากับบอร์ดของคุณตามที่แสดง

ขั้นตอนที่ 5: ต่อสายไฟไปยังอุปกรณ์

• เชื่อมต่ออินพุตของตัวแปลง DC-DC เข้ากับจุดสองจุดบนแผงขั้วต่อแบบสกรู
• บัดกรีสายเอาต์พุตสั้น 5V เข้ากับ IMP
• ประสานสายเอาต์พุต 5V ที่ยาวกว่าเข้ากับโมดูลรีเลย์

ขั้นตอนที่ 6: อินพุตโมดูลรีเลย์สายไฟ

• ตัดสายไฟ 4 x 90 มม. สำหรับการเชื่อมต่ออินพุตโมดูลรีเลย์ ฉันใช้ 4 สีแยกกันเพื่อให้ง่ายต่อการอ้างอิงในภายหลังขณะเขียนโค้ด
• ประสานสายไฟเข้ากับอินพุตโมดูลรีเลย์ 1-4 จากนั้นไปยังจุด IMP GPIO 4 ตำแหน่งแรก (Pin1, 2, 5 และ 7) ตามลำดับ

ขั้นตอนที่ 7: IMP Power Jumper

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

ขั้นตอนที่ 8: อินพุตสถานะ Wire Gate

• ตัดสายไฟ 2 x 80 มม. สำหรับอินพุตสถานะป้อยอ
• ต่อสายไฟเข้ากับขั้วสกรู 2 ตัวที่เหลือ
• บัดกรีลวดไปที่จุดถัดไปของจุด IMP GPIO (Pin8 & 9) ตามลำดับ

ขั้นตอนที่ 9: พิมพ์หรือซื้อเคส

คุณสามารถดาวน์โหลด. STL หรือ. F3D ของฉันสำหรับกรณีนี้ได้ที่ GitHub หรือ Thingiverse

หากคุณไม่มีสิทธิ์เข้าถึงเครื่องพิมพ์ 3D กรณีโครงการทั่วไปขนาดเล็กจะได้ผล

ขั้นตอนที่ 10: ตกแต่งเคสของคุณ

เพราะ!

ฉันใส่ข้อความที่เยื้องบนของฉันแล้วระบายสีด้วยความคมชัดสีดำ หากคุณรู้สึกอยากผจญภัย คุณสามารถใช้สีอะครีลิก ยาทาเล็บหรืออย่างอื่นเพื่อทำให้สีดูลื่นขึ้น

ขั้นตอนที่ 11: เจาะรูสำหรับสายไฟ

เจาะรูเล็กๆ ประมาณ 10-15 มม. ที่ด้านข้างใกล้ตรงกลางที่ลวดทั้งหมดจะมารวมกัน

ฉันใช้ Unibit เพื่อเจาะรูในพลาสติกที่สะอาดและเรียบ

ขั้นตอนที่ 12: เตรียมและติดตั้งสายเชื่อมต่อ

ตัดสายไฟ 9 x 5-600 มม. เพื่อต่ออุปกรณ์ของเราเข้ากับบอร์ดควบคุมประตู

• 2 สำหรับอินพุตไฟ 24V
• 3 สำหรับสถานะเกต (2 อินพุตและกราวด์ทั่วไป)
• 2 สำหรับสัญญาณเปิดประตู
• 2 สำหรับสัญญาณปิดประตู

บิดแต่ละกลุ่มเข้าด้วยกันโดยใช้สว่าน ซึ่งจะทำให้ทุกอย่างง่ายขึ้นและดูดีขึ้น

ปอกและเชื่อมต่อสายไฟแต่ละเส้นเข้ากับขั้วต่อตามที่แสดง

ขั้นตอนที่ 13: กำหนดเส้นทางสายเชื่อมต่อ

เดินสายเบ็ดผ่านรูตามที่แสดง

ขั้นตอนที่ 14: ติดตั้งส่วนประกอบ

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

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

ขั้นตอนที่ 15: ปิดผนึกสายเชื่อมต่อ

ปิดผนึกสายเชื่อมต่อด้วยกาวร้อนหรือซิลิโคน

ขั้นตอนที่ 16: ปิดเคส

ฉันใช้สกรูขนาดเล็ก ~4 มม. ในรายการเคสที่พิมพ์ 3 มิตินี้ หากคุณกังวลเกี่ยวกับสิ่งสกปรกหรือความชื้น ให้วางซิลิโคนหรือกาวร้อนรอบๆ ข้อต่อฝาก่อนปิด

ขั้นตอนที่ 17: ติดตั้งใน Gate Operator

บนกระดานหลัก:

• เกี่ยวสายไฟสองเส้นที่เชื่อมต่อกับเอาต์พุตรีเลย์ 1 เข้ากับขั้วต่อ Open Gate (ในรูปสีแดง/น้ำตาล)
• เกี่ยวสายไฟสองเส้นที่ต่อกับเอาท์พุตรีเลย์ 2 เข้ากับขั้วปิดเกท (สีเหลือง/น้ำเงินในรูป)
• เกี่ยวสายไฟสองเส้นที่เชื่อมต่อกับอินพุตตัวแปลง DC-DC เข้ากับขั้วต่อสกรูจ่ายไฟเสริม 24V (สีแดง/ดำในรูปภาพ)

บนบอร์ดขยาย

• จัมเปอร์ขั้วต่อสกรูทั่วไปของรีเลย์พร้อมกับลวดชิ้นเล็ก
• เชื่อมต่อกราวด์ทั่วไปเข้ากับขั้วต่อสกรูทั่วไปของรีเลย์ตัวใดตัวหนึ่ง (สีเขียวในรูป)
• เชื่อมต่ออินพุตสถานะเกต 2 อัน (IMP Pin8 & 9) เข้ากับขั้วต่อสกรูแบบเปิดปกติของรีเลย์ (NO) (สีเทา/สีเหลืองในรูปภาพ)

เดินสายไฟ รูดซิปให้เรียบร้อย และหาที่สำหรับติดหรือตั้งเคสของคุณ

มีภาพถ่ายความละเอียดสูงเพิ่มเติมซึ่งโฮสต์อยู่ในที่เก็บ GitHub

ขั้นตอนที่ 18: ตั้งค่า Aux Relay Mode

ตั้งค่าสวิตช์รีเลย์เสริมตามที่แสดงในรูปภาพ

ซึ่งจะทำให้ IMP มีสัญญาณที่จำเป็นในการพิจารณาว่าประตูถูกปิด เปิด เปิด หรือปิด

ขั้นตอนที่ 19: ตัวแทน IMP และรหัสอุปกรณ์

รหัสตัวแทนอิมพ์ไฟฟ้า:

• สร้างโมเดลใหม่ใน Electric Imp IDE:
• แทนที่ URL ให้ชี้ไปที่เซิร์ฟเวอร์ของคุณ

// ฟังก์ชันตัวจัดการ

ฟังก์ชั่น httpHandler (req, resp) { ลอง { local d = http.jsondecode (req.body); //server.log(d.c); ถ้า (d.c == "btn") { //server.log (d.val); device.send("btn", d.val); resp.send(200, "ตกลง"); } } catch(ex) { // หากมีข้อผิดพลาด ส่งกลับในการตอบสนอง server.log("error:" + ex); resp.send(500, "Internal Server Error:" + ex); } } // ลงทะเบียนตัวจัดการ HTTP http.onrequest (httpHandler); // ฟังก์ชั่นฟังก์ชันตัวจัดการ GateStateChange gateStateChangeHandler (ข้อมูล) { // URL ไปยัง URL ของบริการเว็บในเครื่อง = "https://projects.ajillion.com/save_gate_state"; // ตั้งค่าส่วนหัวของประเภทเนื้อหาเป็นส่วนหัวในเครื่อง json = { "ประเภทเนื้อหา": "แอปพลิเคชัน/json" }; // เข้ารหัสข้อมูลที่ได้รับและบันทึกเนื้อหาในเครื่อง = http.jsonencode(data); server.log (เนื้อหา); // ส่งข้อมูลไปยังบริการเว็บของคุณ http.post(url, headers, body).sendsync(); } // ลงทะเบียน gateStateChange handler device.on("gateStateChange", gateStateChangeHandler);

รหัสตัวแทนอิมพ์ไฟฟ้า:

• กำหนดอุปกรณ์ Imp ให้กับรุ่นของคุณ
• ตรวจสอบว่าพินฮาร์ดแวร์มีนามแฝงว่าเชื่อมต่อแล้ว

// Debouce ห้องสมุด

#require "Button.class.nut:1.2.0" // นามแฝงสำหรับ gateOpen GPIO pin (active low) gateOpen <- hardware.pin2; // นามแฝงสำหรับ gateClose ควบคุมพิน GPIO (แอ็คทีฟต่ำ) gateClose <- hardware.pin7; // กำหนดค่า 'gateOpen' ให้เป็นดิจิตอลเอาท์พุตที่มีค่าเริ่มต้นเป็นดิจิตอล 1 (สูง) gateOpen.configure(DIGITAL_OUT, 1); // กำหนดค่า 'gateClose' ให้เป็นดิจิตอลเอาท์พุตที่มีค่าเริ่มต้นเป็นดิจิตอล 1 (สูง) gateClose.configure(DIGITAL_OUT, 1); // นามแฝงสำหรับพิน GPIO ที่ระบุว่าเกตกำลังเคลื่อนที่ (N. O.) gateMovingState <- Button(hardware.pin8, DIGITAL_IN_PULLUP); // นามแฝงสำหรับพิน GPIO ที่ระบุว่าเกตเปิดเต็มที่ (N. O.) gateOpenState <- Button(hardware.pin9, DIGITAL_IN_PULLUP); // ตัวแปรโกลบอลเพื่อเก็บสถานะเกต (เปิด = 1 / ปิด = 0) โลคัล lastGateOpenState = 0; // Latch Timer object local latchTimer = null agent.on ("btn", function (data) { switch (data.cmd) { case "open": gateOpen.write (0); if (latchTimer) imp.cancelwakeup (latchTimer)); latchTimer = imp.wakeup(1, releaseOpen); server.log("Open command received"); break case "latch30m": gateOpen.write(0); if (latchTimer) imp.cancelwakeup(latchTimer); latchTimer = imp.wakeup(1800, releaseOpen); server.log("Latch30m command gets"); break case "latch8h": gateOpen.write(0); if (latchTimer) imp.cancelwakeup(latchTimer); latchTimer = imp.wakeup() 28800, releaseOpen); server.log ("ได้รับคำสั่ง Latch8h"); ตัวพิมพ์เล็ก "close": ถ้า (latchTimer) imp.cancelwakeup (latchTimer); gateOpen.write (1); gateClose.write (0); latchTimer = imp.wakeup(1, releaseClose); server.log("ปิดตอนนี้ได้รับคำสั่งแล้ว"); แบ่งค่าเริ่มต้น: server.log("ปุ่มคำสั่งไม่รู้จัก"); } }); ฟังก์ชั่น releaseOpen () { ถ้า (latchTimer) imp.cancelwakeup (latchTimer); gateOpen.write(1); //server.log("ตัวจับเวลาปล่อยประตูเปิดหน้าสัมผัสสวิตช์"); } ฟังก์ชัน releaseClose() { if (latchTimer) imp.cancelwakeup(latchTimer); gateClose.write(1); //server.log("ตัวจับเวลาปล่อยประตูปิดหน้าสัมผัสสวิตช์"); } gateMovingState.onPress (ฟังก์ชัน () { // รีเลย์ถูกเปิดใช้งาน ประตูกำลังเคลื่อนที่ //server.log("Gate is open"); local data = { "gatestate": 1, "timer": hardware.millis () }; agent.send("gateStateChange", data); }).onRelease(function() { // รีเลย์ถูกปล่อย, เกทหยุดนิ่ง //server.log("Gate is closed"); ข้อมูลในเครื่อง = { "gatestate": 0, "timer": hardware.millis() }; agent.send("gateStateChange", data); }); gateOpenState.onPress (ฟังก์ชัน () { // รีเลย์เปิดใช้งานอยู่ ประตูเปิดเต็มที่ //server.log ("Gate is open"); ข้อมูลในเครื่อง = { "gatestate": 2, "timer": hardware.millis () }; agent.send("gateStateChange", data); }).onRelease(function() { // รีเลย์ถูกปล่อย, เกทเปิดไม่เต็มที่ //server.log("Gate is closed"); ข้อมูลในเครื่อง = { "gatestate": 3, "timer": hardware.millis() }; agent.send("gateStateChange", data); });

ขั้นตอนที่ 20: รหัส PHP ของเว็บเซอร์วิส

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

เพื่อให้ทุกอย่างง่ายขึ้น ฉันบันทึกข้อมูล JSON ลงในไฟล์แฟลตเพื่อจัดเก็บข้อมูล หากคุณต้องการบันทึกหรือฟังก์ชันที่เกี่ยวข้องกับข้อมูลที่ซับซ้อนมากขึ้น ให้ใช้ฐานข้อมูล

ไลบรารี ajax ที่ฉันเขียนและใช้ในโครงการนี้สามารถดาวน์โหลดได้จากที่เก็บ GitHub: ThingEngineer/Codeigniter-jQuery-Ajax

รหัสควบคุม PHP:

• app/controllers/projects.php
• ตรวจสอบให้แน่ใจว่าสคริปต์ PHP ของคุณเข้าถึงเส้นทางข้อมูลได้ ทั้งตำแหน่งและสิทธิ์ในการอ่าน/เขียน

load->helper(array('file', 'date'));

$data = json_decode(read_file('../app/logs/gatestate.data'), TRUE); สวิตช์ ($data['gatestate']) { กรณี 0: $view_data['gatestate'] = 'ปิด'; หยุดพัก; กรณีที่ 1: $view_data['gatestate'] = 'กำลังเปิด…'; หยุดพัก; กรณีที่ 2: $view_data['gatestate'] = 'Open'; หยุดพัก; กรณีที่ 3: $view_data['gatestate'] = 'กำลังปิด…'; หยุดพัก; } $last_opened = json_decode(read_file('../app/logs/projects/gateopened.data'), TRUE); $view_data['last_opened'] = timespan($last_opened['last_opened'], time()) ' ที่ผ่านมา'; //โหลดมุมมอง $t['data'] = $view_data; $this->load->view('gate_view', $t); } ฟังก์ชั่น save_gate_state() { $this->load->helper('file'); $data = file_get_contents('php://input'); write_file('../app/logs/projects/gatestate.data', $data); $data = json_decode($data, จริง); ถ้า ($data['gatestate'] == 1) { $last_opened = array('last_opened' => time()); write_file('../app/logs/projects/gateopened.data', json_encode($last_opened)); } } ฟังก์ชั่น get_gate_state() { $this->load->helper(array('file', 'date')); $this->load->library('ajax'); $data = json_decode(read_file('../app/logs/projects/gatestate.data'), TRUE); $last_opened = json_decode(read_file('../app/logs/projects/gateopened.data'), TRUE); $data['last_opened'] = timespan($last_opened['last_opened'], time()) ' ที่ผ่านมา'; $this->ajax->output_ajax($data, 'json', FALSE); // ส่งข้อมูล json ไม่บังคับใช้คำขอ ajax } } /* สิ้นสุดไฟล์ project.php */ /* Location:./application/controllers/projects.php */

PHP ดูรหัส:

ฉันใช้ Bootstrap สำหรับ front-end เพราะมันรวดเร็ว ง่าย และตอบสนองได้ดี คุณสามารถดาวน์โหลดได้ที่นี่: https://getbootstrap.com (รวม jQuery)

• app/controllers/gate_view.php
• แทนที่ YOUR-AGENT-CODE ด้วยรหัสตัวแทน Electric Imp ของคุณ

IoT Gate Opperator Addon IoT Gate Opperator Addon

• บ้าน
• แอดมิน

Open Gate Latch เปิดเป็นเวลา 30 นาที Latch เปิดเป็นเวลา 8 ชั่วโมง ปิดทันที สถานะ Gate: เปิดล่าสุด $(document).ready(function(){ resetStatus(); }) function sendJSON(JSONout){ var url = 'https:// agent.electricimp.com/YOUR-AGENT-CODE'; $.post(url, JSONout); } $("#open_gate")).click(function() { var JSONout = '{"c":"btn", "val":{"cmd":"open"}}'; sendJSON(JSONout); $ ("#status")).text("กำลังเปิด…"); }); $("#latch30m_gate").click(function() { var JSONout = '{"c":"btn", "val":{"cmd":"latch30m"}}'; sendJSON(JSONout); $("#สถานะ").text("กำลังเปิด…"); }); $("#latch8h_gate").click(function() { var JSONout = '{"c":"btn", "val":{"cmd":"latch8h"}}'; sendJSON(JSONout); $("#สถานะ").text("กำลังเปิด…"); }); $("#close_gate").click(function() { var JSONout = '{"c":"btn", "val":{"cmd":"close"}}'; sendJSON(JSONout); $("#สถานะ").text("กำลังปิด…"); }); ฟังก์ชัน resetStatus () {// url เป้าหมาย var target = 'https://projects.ajillion.com/get_gate_state'; // ขอข้อมูล var = { ตัวแทน: 'แอพ' }; // ส่งคำขอโพสต์ ajax $.ajax ({ url: target, dataType: 'json', type: 'POST', data: data, success: function (data, textStatus, XMLHttpRequest) { switch (data.gatestate) { case 0: $("#status")).text('Closed'); break; case 1: $("#status")).text('Opening…'); break; case 2: $("#status").text('Open'); break; case 3: $("#status")).text('Closing…'); break; default: $("#status")).text('Error'); } $ ("#last_opened") ข้อความ (data.last_opened); } ข้อผิดพลาด: ฟังก์ชัน (XMLHttpRequest, textStatus, errorThrown) { // ข้อความแสดงข้อผิดพลาด $ ("#status").text ('เซิร์ฟเวอร์ผิดพลาด'); } }); setTimeout (รีเซ็ตสถานะ 3000); }