Add-on Operator Gerbang Terkawal WebApp (IoT): 20 Langkah (dengan Gambar)

2025 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2025-01-23 15:01

Saya mempunyai pelanggan yang mempunyai kawasan berpagar di mana banyak orang perlu datang dan pergi. Mereka tidak mahu menggunakan papan kekunci di bahagian luar dan hanya mempunyai sejumlah pemancar keyfob. Mencari sumber yang berpatutan untuk keyfob tambahan sukar. Saya fikir akan menjadi peluang terbaik untuk menaik taraf operator gerbang Liftmaster ini agar sesuai dengan IoT dengan perkakasan tersuai, API web, dan antara muka aplikasi web. Ini bukan sahaja dapat menyelesaikan masalah akses massa tetapi juga membuka fungsi tambahan!

Dalam foto terakhir di atas adalah unit ujian yang saya jalankan hampir setahun dalam beg ziplock. Saya fikir sudah tiba masanya untuk peningkatan!

Ini adalah penyelesaian yang berfungsi sepenuhnya dengan semua kod, maklumat perkakasan, dan reka bentuk yang disenaraikan di sini.

Semua fail projek juga dihoskan di GitHub: github.com/ThingEngineer/IoT-Gate-Operator-Addon

Contoh antara muka CodeIgniter WebApp dihoskan di sini: projects.ajillion.com/gate Contoh ini tidak disambungkan ke gerbang langsung tetapi merupakan antara muka dan kod yang tepat yang berjalan di pintu gerbang (tolak beberapa ciri keselamatan).

--

Untuk integrasi yang lebih besar, anda boleh menggunakan perpustakaan IFTTT untuk Electric Imp.

Langkah 1: Kumpulkan Bahagian

• Anda memerlukan IMP Elektrik dengan sekurang-kurangnya 4 GPIO yang ada, saya menggunakan IMP001 dengan papan pelarian April.
• Pengatur untuk menurunkan voltan sumber ke 5V. Saya menggunakan Modul Down Down DC-DC Buck Converter. Versi MP1584EN eBoot dari Amazon.
• Modul relay dwi (atau lebih) atau peranti pensuisan serupa yang akan berfungsi dengan output IMP. Saya menggunakan Modul Relay JBtek 4 Channel DC 5V yang satu ini dari Amazon.
• Terminal skru 4 wayar. Saya menggunakan ini 5Pcs 2 Rows 12P Wire Connector Screw Terminal Barrier Block 300V 20A dari Amazon.

Langkah 2: Bekalan

Anda juga memerlukan:

• Akses ke pencetak 3D atau kotak projek kecil
• 4 skru kecil kira-kira 4mm x 6mm untuk penutup sarung
• Kawat cangkuk
• Pemotong wayar
• Pelucut wayar
• Pemutar skru kecil
• Besi pematerian
• Gam panas atau silikon
• Ikatan zip

Langkah 3: Saiz Sarung

Susun bahagian anda untuk menentukan casing ukuran apa yang anda perlukan. Dengan susun atur seperti yang digambarkan, saya memerlukan casing selebar 140mm, kedalaman 70mm, dan tinggi 30mm.

Langkah 4: Penukar Wire DC-DC

Potong 3 pasang wayar penyambungan merah dan hitam untuk sambungan kuasa masuk dan keluar dari papan penukar DC-DC.

• Input: 100mm
• Keluaran ke IMP: 90mm
• Modul Output ke Relay: 130mm

Memasukkannya ke papan anda seperti yang ditunjukkan.

Langkah 5: Kuasa Wayar ke Peranti

• Sambungkan input penukar DC-DC ke dua titik pada blok terminal skru.
• Selesaikan wayar output 5V pendek ke IMP.
• Memateri wayar output 5V yang lebih panjang ke modul geganti.

Langkah 6: Input Modul Relay Kawat

• Potong wayar 4 x 90mm untuk sambungan input modul geganti. Saya menggunakan 4 warna yang berasingan untuk memudahkan rujukan di kemudian hari semasa membuat kod.
• Memateri wayar ke modul geganti input 1-4 kemudian ke 4 tempat GPIO IMP pertama (Pin1, 2, 5, & 7) masing-masing.

Langkah 7: Jumper Kuasa IMP

Anda mungkin perlu menggunakan kuasa USB semasa anda pada awalnya memprogram dan menguji IMP anda. Apabila anda selesai, pastikan untuk mengalihkan jumper kuasa ke bahagian BAT.

Langkah 8: Input Status Gerbang Kawat

• Potong wayar 2 x 80mm untuk input status sate.
• Sambungkan wayar ke baki 2 terminal skru.
• Kabel solder di sebelah tempat IMP GPIO (Pin8 & 9) masing-masing.

Langkah 9: Cetak atau Beli Kes

Anda boleh memuat turun. STL atau. F3D saya untuk kes ini di GitHub atau Thingiverse

Sekiranya anda tidak mempunyai akses ke pencetak 3D, kes projek generik kecil akan berfungsi.

Langkah 10: Hiaskan Kes Anda

Kerana!

Saya meletakkan beberapa teks lekukan pada saya dan hanya mewarnakannya dengan tajam hitam. Sekiranya anda merasa berani, anda boleh menggunakan cat akrilik, cat kuku atau sesuatu yang lain untuk menjadikannya lebih licin.

Langkah 11: Lubang Bor untuk Wayar

Bor lubang kecil 10-15mm di sisi berhampiran bahagian tengah di mana semua wayar akan bersatu.

Saya menggunakan Unibit untuk lubang plastik bersih dan licin.

Langkah 12: Siapkan dan Pasang Kabel Hookup

Potong wayar 9 x 5-600mm untuk menghubungkan peranti kami ke papan operator pintu.

• 2 untuk input kuasa 24V
• 3 untuk status gerbang (2 input dan landasan bersama)
• 2 untuk isyarat pintu terbuka
• 2 untuk isyarat pintu tutup

Putar bersama setiap kumpulan yang disenaraikan di atas menggunakan latih tubi. Ini akan menjadikan segalanya lebih mudah dan kelihatan lebih baik.

Tanggalkan dan sambungkan setiap wayar ke terminal masing-masing seperti yang ditunjukkan.

Langkah 13: Kabel Hookup Laluan

Arahkan kabel penyambungan melalui lubang seperti yang ditunjukkan.

Langkah 14: Pasang Komponen

Letakkan dan pasang komponen dengan manik kecil gam panas atau silikon. Jangan gunakan terlalu banyak sekiranya anda perlu mengeluarkan bahagian, gunakan cukup untuk mengamankannya.

Pada asalnya saya ingin mencetak casing dengan klip / tab untuk meletakkan papan di tempatnya tetapi saya perlu memasangnya dan tidak mempunyai masa. Menambah klip papan ke kes anda akan menjadi sentuhan yang bagus.

Langkah 15: Wayar Pengait Seal

Tutup wayar penyambung dengan gam panas atau silikon.

Langkah 16: Tutup Kes

Saya menggunakan skru kecil ~ 4mm pada senarai cetakan 3D ini. Sekiranya anda bimbang tentang kotoran atau kelembapan letakkan sebiji silikon atau gam panas di sekitar sendi penutup sebelum menutupnya.

Langkah 17: Pasang di Gate Operator

Di papan utama:

• Hook kedua wayar yang disambungkan ke output relay 1 ke terminal Open Gate. (merah / coklat dalam foto)
• Pasangkan dua wayar yang disambungkan ke output relay 2 ke terminal Close Gate. (kuning / biru dalam foto)
• Hubungkan dua wayar yang disambungkan ke input penukar DC-DC ke terminal skru kuasa aksesori 24V (merah / hitam dalam foto)

Di papan pengembangan

• Jumper terminal skru umum relay bersama dengan sekeping kecil dawai
• Sambungkan landasan bersama ke salah satu terminal skru umum relay (hijau dalam foto)
• Sambungkan input status 2 pintu (IMP Pin8 & 9) ke terminal skru terbuka (NO) relay normal (kelabu / kuning dalam foto)

Laluan wayar, ikat zip agar kelihatan kemas dan cari tempat untuk memasang atau meletakkan beg anda.

Terdapat foto resolusi penuh tambahan yang dihoskan di repositori GitHub.

Langkah 18: Tetapkan Mod Relay Aux

Tetapkan suis geganti tambahan seperti yang ditunjukkan dalam foto.

Ini akan memberi isyarat IMP yang diperlukan untuk menentukan apakah pintu ditutup, dibuka, dibuka atau ditutup.

Langkah 19: Ejen IMP dan Kod Peranti

Kod Ejen Impak Elektrik:

• Buat Model baru di Electric Imp IDE:
• Ganti URL untuk menunjuk ke pelayan anda

// Fungsi pengendali

fungsi httpHandler (req, resp) {cuba {local d = http.jsondecode (req.body); //server.log(d.c); jika (d.c == "btn") {//server.log(d.val); device.send ("btn", d.val); resp.send (200, "OK"); }} catch (ex) {// Sekiranya terdapat ralat, hantarkan kembali di server respons.log ("error:" + ex); resp.send (500, "Ralat Pelayan Dalaman:" + ex); }} // Daftar pengendali HTTP http.onrequest (httpHandler); // fungsi fungsi pengendali GateStateChange gateStateChangeHandler (data) {// URL ke perkhidmatan tempatan url = "https://projects.ajillion.com/save_gate_state"; // Tetapkan tajuk Jenis Kandungan ke tajuk tempatan json = {"Content-Type": "application / json"}; // Encode data yang diterima dan log badan tempatan = http.jsonencode (data); pelayan.log (badan); // Hantar data ke laman web anda http.post (url, header, body).sendsync (); } // Mendaftar device.on pengendali gateStateChange ("gateStateChange", gateStateChangeHandler);

Kod Ejen Impak Elektrik:

• Tetapkan peranti Imp ke model anda
• Sahkan pin perkakasan diasingkan sebagai disambungkan

// Perpustakaan Debouce

#require "Button.class.nut: 1.2.0" // Alias untuk gateBuka pin GPIO (low low) gateOpen <- hardware.pin2; // Alias untuk gateClose control GPIO pin (active low) gateClose <- hardware.pin7; // Konfigurasikan 'gateOpen' untuk menjadi output digital dengan nilai permulaan digital 1 (tinggi) gateOpen.configure (DIGITAL_OUT, 1); // Konfigurasikan 'gateClose' untuk menjadi output digital dengan nilai permulaan digital 1 (tinggi) gateClose.configure (DIGITAL_OUT, 1); // Alias untuk pin GPIO yang menunjukkan pintu bergerak (N. O.) gateMovingState <- Button (hardware.pin8, DIGITAL_IN_PULLUP); // Alias untuk pin GPIO yang menunjukkan pintu terbuka sepenuhnya (N. O.) gateOpenState <- Butang (hardware.pin9, DIGITAL_IN_PULLUP); // Pemboleh ubah global untuk menahan keadaan pintu (Open = 1 / Closed = 0) lastGateOpenState tempatan = 0; // Objek Latch Timer 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 diterima"); break case "latch30m": gateOpen.write (0); if (latchTimer) imp.cancelwakeup (latchTimer); latchTimer = imp.wakeup (1800, releaseOpen); server.log ("perintah Latch30m diterima"); break case "latch8h": gateOpen.write (0); if (latchTimer) imp.cancelwakeup (latchTimer); latchTimer = imp.wakeup (28800, releaseOpen); server.log ("Perintah Latch8h diterima"); break case "close": if (latchTimer) imp.cancelwakeup (latchTimer); gateOpen.write (1); gateClose.write (0); latchTimer = imp.wakeup (1, releaseClose); server.log ("Tutup perintah sekarang diterima"); rehat lalai: server.log ("Perintah butang tidak dikenali");}}); pelepasan fungsiBuka () {if (latchTimer) imp.cancelwakeup (latchTimer); gateOpen.write (1); //server.log("Timer yang dilepaskanPerbuka suis terbuka "); } pelepasan fungsiTutup () {if (latchTimer) imp.cancelwakeup (latchTimer); gateClose.write (1); //server.log("Timer dilepaskan gateClose switch contact "); } gateMovingState.onPress (function () {// Relay diaktifkan, gate bergerak //server.log("Gate sedang dibuka "); data tempatan = {" gatestate ": 1," timer ": hardware.millis ()}; agent.send ("gateStateChange", data);}). onRelease (function () {// Relay dilepaskan, gate berada dalam keadaan rehat //server.log("Gate ditutup "); data tempatan = {"gatestate": 0, "timer": hardware.millis ()}; agent.send ("gateStateChange", data);}); gateOpenState.onPress (function () {// Relay diaktifkan, gate terbuka sepenuhnya //server.log("Gate is open "); data tempatan = {" gatestate ": 2," timer ": hardware.millis ()}; agent.send ("gateStateChange", data);}). onRelease (function () {// Relay dilepaskan, gate tidak dibuka sepenuhnya //server.log("Gate sedang tutup "); data tempatan = {"gatestate": 3, "timer": hardware.millis ()}; agent.send ("gateStateChange", data);});

Langkah 20: Kod PHP Perkhidmatan Web

Saya menulis kod ini untuk rangka kerja CodeIgniter kerana saya menambahkannya ke projek lama yang sudah ada. Pengawal dan kod pandangan dapat disesuaikan dengan mudah mengikut kerangka pilihan anda.

Untuk memastikan semuanya mudah, saya menyimpan data JSON ke fail rata untuk penyimpanan data. Sekiranya anda memerlukan pembalakan atau fungsi berkaitan data yang lebih kompleks, gunakan pangkalan data.

Perpustakaan ajax yang saya tulis dan gunakan dalam projek ini boleh memuat turun dari repositori GitHub: ThingEngineer / Codeigniter-jQuery-Ajax

Kod Pengawal PHP:

• aplikasi / pengawal / projek.php
• Pastikan laluan data dapat diakses oleh skrip PHP anda, baik dari segi lokasi dan keistimewaan membaca / menulis.

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

$ data = json_decode (read_file ('../ app / logs / gatestate.data'), BENAR); beralih ($ data ['gatestate']) {kes 0: $ view_data ['gatestate'] = 'Closed'; rehat; kes 1: $ view_data ['gatestate'] = 'Membuka …'; rehat; kes 2: $ view_data ['gatestate'] = 'Buka'; rehat; kes 3: $ view_data ['gatestate'] = 'Penutup …'; rehat; } $ last_opened = json_decode (read_file ('../ aplikasi / log / projek / gateopened.data'), BENAR); $ view_data ['last_opened'] = jangka masa ($ last_opened ['last_opened'], masa ()). 'lalu'; // Load View $ t ['data'] = $ view_data; $ this-> load-> view ('gate_view', $ t); } fungsi save_gate_state () {$ this-> load-> helper ('file'); $ data = file_get_contents ('php: // input'); write_file ('../ app / log / projek / gatestate.data', $ data); $ data = json_decode ($ data, BENAR); if ($ data ['gatestate'] == 1) {$ last_opened = array ('last_opened' => masa ()); write_file ('../ aplikasi / log / projek / gateopened.data', json_encode ($ last_opened)); }} fungsi get_gate_state () {$ this-> load-> helper (array ('file', 'date')); $ this-> load-> library ('ajax'); $ data = json_decode (read_file ('../ aplikasi / log / projek / gatestate.data'), BENAR); $ last_opened = json_decode (read_file ('../ aplikasi / log / projek / gateopened.data'), BENAR); $ data ['last_opened'] = jangka masa ($ last_opened ['last_opened'], masa ()). 'lalu'; $ this-> ajax-> output_ajax ($ data, 'json', SALAH); // hantar data json, jangan laksanakan permintaan ajax}} / * Akhir projek fail.php * / / * Lokasi:./application/controllers/projects.php * /

Kod Paparan PHP:

Saya menggunakan Bootstrap untuk bahagian depan kerana cepat, mudah dan responsif. Anda boleh memuat turunnya di sini: https://getbootstrap.com (jQuery disertakan)

• aplikasi / pengawal / gate_view.php
• Ganti KOD-EJEN ANDA dengan kod ejen Imp elektrik anda

IoT Gate Opperator Addon IoT Gate Opperator Addon

• Rumah
• Pentadbir

Open Gate Latch Open selama 30 min Latch Open selama 8 jam Tutup Sekarang Status Gerbang: Terakhir dibuka $ (dokumen). Sudah (fungsi () {resetStatus ();}) fungsi sendJSON (JSONout) {var url = 'https:// ejen.electricimp.com/YOUR-AGENT-CODE '; $. pos (url, JSONout); } $ ("# open_gate"). klik (function () {var JSONout = '{"c": "btn", "val": {"cmd": "open"}}'; sendJSON (JSONout); $ ("#status"). teks ("Pembukaan …");}); $ ("# latch30m_gate"). klik (function () {var JSONout = '{"c": "btn", "val": {"cmd": "latch30m"}}'; sendJSON (JSONout); $ ("#status"). teks ("Pembukaan …");}); $ ("# latch8h_gate"). klik (function () {var JSONout = '{"c": "btn", "val": {"cmd": "latch8h"}}'; sendJSON (JSONout); $ ("#status"). teks ("Pembukaan …");}); $ ("# close_gate"). klik (function () {var JSONout = '{"c": "btn", "val": {"cmd": "close"}}'; sendJSON (JSONout); $ ("#status"). teks ("Penutup …");}); reset fungsiStatus () {// Target url var target = 'https://projects.ajillion.com/get_gate_state'; // Minta var data = {ejen: 'app'}; // Kirim permintaan pos ajax $.ajax ({url: target, dataType: 'json', type: 'POST', data: data, success: function (data, textStatus, XMLHttpRequest) {switch (data.gatestate) {case 0: $ ("# status"). Teks ('Closed'); break; case 1: $ ("# status"). Text ('Opening …'); break; case 2: $ ("# status").text ('Open'); break; case 3: $ ("# status"). text ('Closing …'); break; default: $ ("# status"). teks ('Ralat');} $ ("#last_opened"). teks (data.last_opened);}, ralat: fungsi (XMLHttpRequest, textStatus, errorThrown) {// Mesej ralat $ ("# status"). teks ('Ralat Pelayan');}}); setTimeout (resetStatus, 3000); }