Tartalomjegyzék:

WebApp által vezérelt kapu kezelő bővítmény (IoT): 20 lépés (képekkel)
WebApp által vezérelt kapu kezelő bővítmény (IoT): 20 lépés (képekkel)

Videó: WebApp által vezérelt kapu kezelő bővítmény (IoT): 20 lépés (képekkel)

Videó: WebApp által vezérelt kapu kezelő bővítmény (IoT): 20 lépés (képekkel)
Videó: Kliens-Szerver App (JavaScript - PHP) 2024, November
Anonim
WebApp által vezérelt kapu kezelői bővítmény (IoT)
WebApp által vezérelt kapu kezelői bővítmény (IoT)
WebApp által vezérelt kapu kezelői bővítmény (IoT)
WebApp által vezérelt kapu kezelői bővítmény (IoT)
WebApp által vezérelt kapu kezelői bővítmény (IoT)
WebApp által vezérelt kapu kezelői bővítmény (IoT)

Van egy ügyfelem, akinek volt egy zárt területe, ahol sok embernek kellett jönnie és mennie. Nem akartak külső billentyűzetet használni, és csak korlátozott számú távirányítóval rendelkeztek. Nehéz volt megfizethető forrást találni további távirányítókhoz. Úgy gondoltam, hogy remek lehetőség lenne frissíteni ezt a Liftmaster kapukezelőt, hogy az IoT -kompatibilis legyen az egyedi hardverekkel, webes API -kkal és webes alkalmazásfelülettel. Ez nemcsak a tömeges hozzáférési problémát oldotta meg, hanem további funkciókat is megnyitott!

A fenti utolsó képen az a tesztegység látható, amelyet majdnem egy évig zipzáras táskában futottam. Azt hittem, ideje frissíteni!

Ez egy teljesen működőképes megoldás az összes itt felsorolt kóddal, hardverinformációval és tervezéssel.

Az összes projektfájlt a GitHub is tárolja: github.com/ThingEngineer/IoT-Gate-Operator-Addon

Egy példa a CodeIgniter WebApp felületre itt található:jects.ajillion.com/gate Ez a példány nem kapcsolódik élő kapuhoz, de ez a pontos felület és kód, amely a kapukon fut (mínusz néhány biztonsági szolgáltatás).

--

A még nagyobb integráció érdekében használhatja az IFTTT könyvtárat az Electric Imp számára.

Lépés: Gyűjtse össze az alkatrészeket

Gyűjtse össze az alkatrészeket
Gyűjtse össze az alkatrészeket
  • Szüksége lesz egy elektromos IMP -re, legalább 4 GPIO -val, én az IMP001 -et használom áprilisi töréspanellel.
  • Szabályozó a forrásfeszültség 5 V -ra történő csökkentésére. DC-DC Buck Converter Step Down modult használok. Az eBoot MP1584EN verziója az Amazon -tól.
  • Kettős (vagy több) relé modul vagy hasonló kapcsolóeszköz, amely működik az IMP kimenettel. Ezt a JBtek 4 csatornás DC 5V relé modult használom az Amazon -tól.
  • 4 vezetékes csavaros kapocs. Ezt az 5db 2 soros 12P -es huzalcsatlakozó csavaros sorkapocs blokkot használom az Amazon -tól.

2. lépés: Kellékek

Kellékek
Kellékek

Szüksége lesz még:

  • Hozzáférés egy 3D nyomtatóhoz vagy egy kis projektdobozhoz
  • 4 kis csavar kb. 4 mm x 6 mm a tok fedeléhez
  • Csatlakozó vezeték
  • Drótvágók
  • Huzalhúzók
  • Kis csavarhúzók
  • Forrasztópáka
  • Forró ragasztó vagy szilikon
  • Zip kötések

3. lépés: Méretezze fel a tokot

Méretezze fel a tokot
Méretezze fel a tokot

Az alkatrészek elrendezésével határozza meg, hogy milyen méretű tokra lesz szüksége. A képen látható elrendezéssel körülbelül 140 mm széles, 70 mm mély és 30 mm magas tokra lesz szükségem.

4. lépés: Vezeték DC-DC átalakító

Vezeték DC-DC átalakító
Vezeték DC-DC átalakító

Vágjon el 3 pár piros és fekete csatlakozóvezetéket a tápcsatlakozásokhoz a DC-DC átalakító kártyán.

  • Bemenet: 100 mm
  • Kimenet IMP -re: 90 mm
  • Kimenet a relé modulhoz: 130 mm

Forrasztja őket a táblához az ábrán látható módon.

5. lépés: Csatlakoztassa az áramot az eszközökhöz

Csatlakoztassa az áramot az eszközökhöz
Csatlakoztassa az áramot az eszközökhöz
  • Csatlakoztassa a DC-DC átalakító bemenetét a csavaros sorkapocs két pontjához.
  • Forrasztja a rövid 5 V -os kimeneti vezetékeket az IMP -hez.
  • Forrasztja a hosszabb 5 V -os kimeneti vezetékeket a relé modulhoz.

6. lépés: Vezetékrelé modul bemenetek

Huzal relé modul bemenetek
Huzal relé modul bemenetek
  • Vágjon 4 x 90 mm -es vezetéket a relé modul bemeneti csatlakozásaihoz. 4 külön színt használtam a későbbi könnyű hivatkozáshoz a kódolás során.
  • Forrasztja a vezetékeket a relé modul 1-4 bemenetére, majd az első 4 IMP GPIO pontra (Pin1, 2, 5, & 7).

7. lépés: IMP Power Jumper

IMP Power Jumper
IMP Power Jumper

Előfordulhat, hogy USB tápellátást kell használnia az IMP programozásakor és tesztelésekor. Amikor befejezte, feltétlenül helyezze át az áthidalót a BAT oldalra.

8. lépés: Vezetékkapu állapot bemenetek

Vezetékkapu állapot bemenetek
Vezetékkapu állapot bemenetek
  • Vágjon el 2 x 80 mm -es vezetéket az állapotjelző bemenetekhez.
  • Csatlakoztassa a vezetékeket a fennmaradó 2 csavaros csatlakozóhoz.
  • Forrasztja a vezetékeket az IMP GPIO pontok mellé (Pin8 és 9).

9. lépés: Nyomtasson vagy vásároljon tokot

Nyomtasson vagy vásároljon tokot
Nyomtasson vagy vásároljon tokot

Letöltheti a. STL vagy. F3D fájljaimat erre az esetre a GitHub -ról vagy a Thingiverse -ről

Ha nincs hozzáférése 3D nyomtatóhoz, akkor egy kis általános projekt tok működik.

10. lépés: Díszítse tokját

Díszítse tokját
Díszítse tokját

Mivel!

Az enyémre tettem néhány behúzott szöveget, és csak befestettem egy fekete élességgel. Ha kalandosnak érzi magát, használjon akrilfestéket, körömlakkot vagy valami mást, hogy még simább legyen.

11. lépés: Fúrjon lyukat a vezetékekhez

Fúrólyuk vezetékekhez
Fúrólyuk vezetékekhez

Fúrjon egy kis lyukat 10-15 mm-re az oldalán, a közepe közelében, ahol az összes vezeték összeér.

Unibit -t használtam a műanyag tiszta, sima lyukához.

12. lépés: A csatlakozó vezetékek előkészítése és telepítése

A csatlakozó vezetékek előkészítése és telepítése
A csatlakozó vezetékek előkészítése és telepítése
A csatlakozó vezetékek előkészítése és telepítése
A csatlakozó vezetékek előkészítése és telepítése

Vágjon le 9 x 5-600 mm-es vezetéket, hogy a készüléket a kapu kezelőlapjához csatlakoztassa.

  • 2 a 24V -os tápellátáshoz
  • 3 a kapu állapotához (2 bemenet és közös föld)
  • 2 a nyitott kapu jelzéséhez
  • 2 a zárókapu jelzéséhez

Csavarja össze a fentebb felsorolt csoportokat fúróval. Így minden könnyebb lesz és jobban fog kinézni.

Csavarja le és csatlakoztassa az összes vezetéket a megfelelő csatlakozókhoz az ábrán látható módon.

13. lépés: Útvonal bekötési vezetékek

Útvonal összekapcsolási vezetékek
Útvonal összekapcsolási vezetékek

Vezesse át a csatlakozó vezetékeket a lyukon az ábrán látható módon.

14. lépés: Az alkatrészek felszerelése

Szerelő alkatrészek
Szerelő alkatrészek

Helyezze fel és szerelje fel az alkatrészeket egy kis, forró ragasztóval vagy szilikonnal. Ne használjon túl sokat, ha el kell távolítania egy alkatrészt, csak annyit használjon, hogy rögzítse.

Eredetileg klipekkel/fülekkel akartam kinyomtatni a tokot, hogy a táblákat a helyükön tartsák, de telepítenem kellett, és nem volt időm. Táblacsíptetők hozzáadása a tokhoz jó lenne.

15. lépés: Tömítse le a bekötő vezetékeket

Tömítés Összekötő vezetékek
Tömítés Összekötő vezetékek

Zárja le a csatlakozó vezetékeket forró ragasztóval vagy szilikonnal.

16. lépés: Zárja le az ügyet

Zárja le az ügyet
Zárja le az ügyet

Kis, 4 mm -es csavarokat használtam a 3D nyomtatott tok listáján. Ha aggódik a szennyeződés vagy a nedvesség miatt, tegyen egy szilikon- vagy forró ragasztószalagot a fedélcsukló köré, mielőtt becsukja.

17. lépés: Telepítse a Gate Operatorba

Telepítse a Gate Operatorba
Telepítse a Gate Operatorba
Telepítse a Gate Operatorba
Telepítse a Gate Operatorba

Az alaplapon:

  • Csatlakoztassa az 1. relé kimenethez csatlakoztatott két vezetéket az Open Gate terminálhoz. (piros/barna a fotókon)
  • Csatlakoztassa a 2 -es relé kimenethez csatlakoztatott két vezetéket a Close Gate terminálhoz. (sárga/kék a képeken)
  • Csatlakoztassa a DC-DC átalakító bemenetéhez csatlakoztatott két vezetéket a 24 V-os tápegység csavaros csatlakozóihoz (piros/fekete a képeken)

A bővítőlapon

  • Ugrálja át a relé közös csavarkapcsait egy kis huzaldarabbal
  • Csatlakoztassa a közös földet az egyik relé közös csavaros csatlakozójához (zöld a képeken)
  • Csatlakoztassa a 2 kapu állapot bemenetet (IMP Pin8 & 9) a relé normál nyitott (NO) csavaros csatlakozóihoz (szürke/sárga a képeken)

Vezesse el a vezetékeket, cipzárral kösse össze őket, hogy jól nézzen ki, és találjon helyet a tok rögzítéséhez vagy beállításához.

További, teljes felbontású fotók is találhatók a GitHub adattárban.

18. lépés: Állítsa be az Aux relé módot

Állítsa be az Aux relé módot
Állítsa be az Aux relé módot

Állítsa be a kiegészítő relékapcsolókat a képen látható módon.

Ez megadja az IMP -nek azokat a jeleket, amelyekre szüksége van annak meghatározásához, hogy a kapu zárva, nyitva, nyitva vagy zárva van -e.

19. lépés: IMP -ügynök és eszközkód

IMP ügynök és eszközkód
IMP ügynök és eszközkód

Elektromos Imp Agent kód:

  • Hozzon létre egy új modellt az Electric Imp IDE -ben:
  • Cserélje ki a szerverre mutató URL -t

// HTTP kezelő funkció

function httpHandler (req, resp) {try {local d = http.jsondecode (req.body); //szerver.log(d.c); if (d.c == "btn") {//szerver.log(d.val); device.send ("btn", d.val); vagy küldés (200, "OK"); }} catch (ex) {// Ha hiba történt, küldje vissza a válaszszerverre.log ("error:" + ex); resp.send (500, "Belső szerverhiba:" + ex); }} // HTTP -kezelő regisztrálása http.onrequest (httpHandler); // GateStateChange kezelő függvény függvény gateStateChangeHandler (adatok) {// URL a webszolgáltatáshoz helyi url = "https://projects.ajillion.com/save_gate_state"; // A Content-Type fejléc beállítása json local headers = {"Content-Type": "application/json"}; // A kapott adatok kódolása és a helyi test naplózása = http.jsonencode (adatok); server.log (törzs); // Küldje el az adatokat a webszolgáltatásának http.post (url, headers, body).sendsync (); } // GateStateChange kezelő eszköz regisztrálása.on ("gateStateChange", gateStateChangeHandler);

Elektromos Imp Agent kód:

  • Rendeljen Imp -eszközt a modellhez
  • Ellenőrizze, hogy a hardveres tűk aliasan vannak -e csatlakoztatva

// Debouce könyvtár

#require "Button.class.nut: 1.2.0" // Alias for gateOpen GPIO pin (aktív alacsony) gateOpen <- hardware.pin2; // Alias for gateClose control GPIO pin (active low) gateClose <- hardware.pin7; // A 'gateOpen' konfigurálása digitális kimenetre, digitális kezdőértékkel 1 (high) gateOpen.configure (DIGITAL_OUT, 1); // A 'gateClose' konfigurálása digitális kimenetre, amelynek kezdőértéke a digitális 1 (magas) gateClose.configure (DIGITAL_OUT, 1); // A GPIO tű álneve, amely jelzi, hogy a kapu mozog (N. O.) gateMovingState <- Button (hardware.pin8, DIGITAL_IN_PULLUP); // A GPIO tű álneve, amely azt jelzi, hogy a kapu teljesen nyitva van (N. O.) gateOpenState <- Button (hardware.pin9, DIGITAL_IN_PULLUP); // Globális változó a kapu állapotának megtartására (Open = 1 / Closed = 0) local lastGateOpenState = 0; // Reteszelő időzítő objektum helyi 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 ("Nyitott parancs fogadva"); break case "latch30m": gateOpen.write (0); if (latchTimer) imp.cancelwakeup (latchTimer); latchTimer = imp.wakeup (1800, releaseOpen); server.log ("Latch30m parancs érkezett"); break case "latch8h": gateOpen.write (0); if (latchTimer) imp.cancelwakeup (latchTimer); latchTimer = imp.wakeup (28800, releaseOpen); server.log ("Latch8h parancs érkezett"); break case "close": if (latchTimer) imp.cancelwakeup (latchTimer); gateOpen.write (1); gateClose.write (0); latchTimer = imp.wakeup (1, releaseClose); server.log ("Bezárás most parancs érkezett"); break default: server.log ("A gombparancs nem ismert");}}); function releaseOpen () {if (latchTimer) imp.cancelwakeup (latchTimer); gateOpen.write (1); //szerver.log ("Az időzítő feloldotta a kaputA nyitott kapcsoló érintkezője"); } function releaseClose () {if (latchTimer) imp.cancelwakeup (latchTimer); gateClose.write (1); //szerver.log("Az időzítő elengedte a kaputA kapcsoló érintkező bezárása "); } gateMovingState.onPress (function () {// A relé aktiválva van, a kapu mozog //szerver.log("A kapu nyílik "); local data = {" gatestate ": 1," timer ": hardware.millis ()}; agent.send ("gateStateChange", adatok);}). onRelease (function () {// A relé feloldva, a kapu nyugalomban van //szerver.log("A kapu zárva "); local data = {"gatestate": 0, "timer": hardware.millis ()}; agent.send ("gateStateChange", adatok);}); gateOpenState.onPress (function () {// A relé aktiválva van, a kapu teljesen nyitva //szerver.log("A kapu nyitva "); local data = {" gatestate ": 2," timer ": hardware.millis ()); agent.send ("gateStateChange", adatok);}). onRelease (function () {// A relé feloldva, a kapu nincs teljesen nyitva //szerver.log("A kapu záródik "); helyi adatok = {"gatestate": 3, "timer": hardware.millis ()}; agent.send ("gateStateChange", adatok);});

20. lépés: Webszolgáltatás PHP -kódja

Webszolgáltatás PHP kódja
Webszolgáltatás PHP kódja

Ezt a kódot a CodeIgniter keretrendszerhez írtam, mert hozzáadtam egy régi meglévő projekthez. A vezérlő és a nézet kódja könnyen illeszthető az Ön által választott kerethez.

Az egyszerűség kedvéért a JSON adatokat egy lapos fájlba mentettem adattárolás céljából. Ha naplózásra vagy bonyolultabb adatokkal kapcsolatos funkciókra van szüksége, használjon adatbázist.

Az ajax könyvtár, amelyet ebben a projektben írtam és használtam, letölthető a GitHub adattárból: ThingEngineer/Codeigniter-jQuery-Ajax

PHP vezérlőkód:

  • app/vezérlők/projektek.php
  • Győződjön meg arról, hogy az adatút elérhető a PHP szkriptje által, mind a helymeghatározási, mind az olvasási/írási jogosultságokkal.

load-> helper (tömb ('fájl', 'dátum'));

$ data = json_decode (read_file ('../ app/logs/gatestate.data'), IGAZ); switch ($ data ['gatestate']) {case 0: $ view_data ['gatestate'] = 'Zárt'; szünet; 1. eset: $ view_data ['gatestate'] = 'Megnyitás …'; szünet; 2. eset: $ view_data ['gatestate'] = 'Nyitott'; szünet; 3. eset: $ view_data ['gatestate'] = 'Bezárás …'; szünet; } $ last_opened = json_decode (read_file ('../ app/logs/project/gateopened.data'), IGAZ); $ view_data ['last_opened'] = időtartam ($ last_opened ['last_opened'], time ()). 'régen'; // Nézet betöltése $ t ['data'] = $ view_data; $ this-> betöltés-> nézet ('gate_view', $ t); } function save_gate_state () {$ this-> load-> helper ('fájl'); $ data = file_get_contents ('php: // input'); write_file ('../ app/logs/project/gatestate.data', $ adatok); $ data = json_decode ($ data, TRUE); if ($ data ['gatestate'] == 1) {$ last_opened = array ('last_opened' => time ()); write_file ('../ app/logs/project/gateopened.data', json_encode ($ last_opened)); }} function get_gate_state () {$ this-> load-> helper (tömb ('fájl', 'dátum')); $ this-> betöltés-> könyvtár ('ajax'); $ data = json_decode (read_file ('../ app/logs/project/gatestate.data'), IGAZ); $ last_opened = json_decode (read_file ('../ app/logs/project/gateopened.data'), IGAZ); $ data ['last_opened'] = időtartam ($ last_opened ['last_opened'], time ()). 'régen'; $ this-> ajax-> output_ajax ($ data, 'json', FALSE); // json adatok küldése, ne hajtsa végre az ajax kérést}}/ * A fájlok vége.php *// * Hely:./application/controllers/projects.php */

PHP nézetkód:

Bootstrap-ot használtam az előlaphoz, mert gyors, egyszerű és érzékeny. Letöltheti innen: https://getbootstrap.com (a jQuery benne van)

  • app/kontrollerek/gate_view.php
  • Cserélje ki ÖNKÉP-KÓDJÁT az Electric Imp ügynök kódjára

IoT Gate Opperator Addon IoT Gate Opperator Addon

  • itthon
  • Admin

Kapu nyitása Retesz Nyitva 30 percig Retesz Nyitva 8 órán keresztül Bezárás Most Kapu állapota: Utoljára megnyitva $ (dokumentum).ready (function () {resetStatus ();}) függvény sendJSON (JSONout) {var url = 'https:// agent.electricimp.com/YOUR-AGENT-CODE '; $.post (url, JSONout); } $ ("#open_gate"). kattintson (function () {var JSONout = '{"c": "btn", "val": {"cmd": "open"}}'; sendJSON (JSONout); $ ("#állapot"). text ("Megnyitás …");}); $ ("#latch30m_gate"). kattintson (function () {var JSONout = '{"c": "btn", "val": {"cmd": "latch30m"}}'; sendJSON (JSONout); $ ("#állapot"). text ("Megnyitás …");}); $ ("#latch8h_gate"). kattintson (function () {var JSONout = '{"c": "btn", "val": {"cmd": "latch8h"}}'; sendJSON (JSONout); $ ("#állapot"). text ("Megnyitás …");}); $ ("#close_gate"). kattintson (function () {var JSONout = '{"c": "btn", "val": {"cmd": "close"}}'; sendJSON (JSONout); $ ("#állapot"). text ("Bezárás …");}); function resetStatus () {// Target url var target = 'https://projects.ajillion.com/get_gate_state'; // Var data kérése = {agent: 'app'}; // ajax bejegyzéskérés küldése $.ajax ({url: target, dataType: 'json', type: 'POST', data: data, success: function (data, textStatus, XMLHttpRequest) {switch (data.gatestate) {case 0: $ ("#állapot"). Text ('Lezárt'); szünet; 1. eset: $ ("#állapot"). Text ('Megnyitás …'); szünet; 2. eset: $ ("#állapot").text ('Open'); break; case 3: $ ("#status"). text ('Closing …'); break; default: $ ("#status"). text ('Error');} $ ("#last_opened"). text (data.last_opened);}, error: function (XMLHttpRequest, textStatus, errorThrown) {// Hibaüzenet $ ("#állapot"). text ('Szerverhiba';}}); setTimeout (resetStatus, 3000); }

Ajánlott: