WebApp Controlled Gate Operator Add-on (IoT): 20 trinn (med bilder)

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:25

Jeg har en klient som hadde et inngjerdet område hvor mange mennesker trengte å komme og gå. De ville ikke bruke et tastatur på utsiden og hadde bare et begrenset antall fjernkontrollsendere. Det var vanskelig å finne en rimelig kilde for flere fjernkontroller. Jeg trodde det ville være en flott mulighet til å oppgradere denne Liftmaster gate -operatøren til å være IoT -kompatibel med tilpasset maskinvare, web -API og webapp -grensesnitt. Dette løste ikke bare massetilgangsproblemet, det åpnet også opp ekstra funksjonalitet!

På det siste bildet ovenfor er testenheten som jeg hadde kjørt i nesten et år i en glidelåspose. Jeg trodde det var på tide med en oppgradering!

Dette er en fullt fungerende løsning med all kode, maskinvareinformasjon og design som er oppført her.

Alle prosjektfilene ligger også på GitHub: github.com/ThingEngineer/IoT-Gate-Operator-Addon

Et eksempel på CodeIgniter WebApp -grensesnittet ligger her: projects.ajillion.com/gate Denne forekomsten er ikke koblet til en live gate, men er det eksakte grensesnittet og koden som kjører på portene (minus noen sikkerhetsfunksjoner).

--

For enda større integrasjon kan du bruke IFTTT -biblioteket for Electric Imp.

Trinn 1: Samle delene

• Du trenger en elektrisk IMP med minst 4 GPIO -er tilgjengelig. Jeg bruker IMP001 med et utbruddstavle i april.
• En regulator for å senke kildespenningen til 5V. Jeg bruker en DC-DC Buck Converter Step Down-modul. eBoot's MP1584EN -versjon fra Amazon.
• En dobbel (eller flere) relemodul eller lignende koblingsenhet som fungerer med IMP -utgangen. Jeg bruker denne JBtek 4 -kanals DC 5V relemodulen fra Amazon.
• En skrueterminal med 4 ledninger. Jeg bruker denne 5Pcs 2 Rows 12P Wire Connector Screw Terminal Barrier Block 300V 20A fra Amazon.

Trinn 2: Rekvisita

Du trenger også:

• Tilgang til en 3D -skriver eller en liten prosjektboks
• 4 små skruer ca 4 mm x 6 mm for lokket på saken
• Tilkoblingskabel
• Avbitertang
• Wire strippere
• Små skrutrekkere
• Loddejern
• Varmt lim eller silikon
• Glidelås

Trinn 3: Størr opp saken

Legg opp delene dine for å finne ut hvilken størrelse etui du trenger. Med et oppsett som avbildet trenger jeg et etui som er omtrent 140 mm bredt, 70 mm dypt og 30 mm høyt.

Trinn 4: Koble DC-DC-omformer

Klipp 3 par røde og svarte tilkoblingskabler for strømtilkoblinger inn og ut av DC-DC-omformerkortet.

• Inngang: 100 mm
• Utgang til IMP: 90 mm
• Utgang til relemodul: 130 mm

Lodde dem til brettet ditt som vist.

Trinn 5: Koble strøm til enheter

• Koble inngangen til DC-DC-omformeren til to av punktene på skrueklemmen.
• Lodd de korte 5V utgangskablene til IMP.
• Lodd de lengre 5V utgangskablene til relemodulen.

Trinn 6: Inngang for trådrelémodul

• Klipp 4 x 90 mm ledninger for relémodulens inngangstilkoblinger. Jeg brukte 4 separate farger for enkel referanse senere mens jeg kodet.
• Lodd ledningene til relémodulinngangene 1-4 og deretter til de fire første IMP GPIO-punktene (Pin1, 2, 5 og 7).

Trinn 7: IMP Power Jumper

Du må kanskje bruke USB -strøm mens du først programmerer og tester IMP. Når du er ferdig, må du flytte jumperen til BAT -siden.

Trinn 8: Wire Gate -statusinnganger

• Klipp 2 x 80 mm ledninger for statusinngangene.
• Koble ledningene til de resterende 2 skrueterminalene.
• Loddetråder til henholdsvis ved siden av IMP GPIO -flekker (Pin8 og 9).

Trinn 9: Skriv ut eller kjøp en sak

Du kan laste ned min. STL eller. F3D for denne saken på GitHub eller Thingiverse

Hvis du ikke har tilgang til en 3D -skriver, fungerer et lite generelt prosjektkasse.

Trinn 10: Dekorer saken din

Fordi!

Jeg la litt innrykket tekst på min og bare farget den inn med en svart skarp. Hvis du føler deg eventyrlystne, kan du bruke akrylmaling, neglelakk eller noe annet for å gjøre det enda slankere.

Trinn 11: Borehull for ledninger

Bor et lite hull 10-15 mm på siden nær midten der alle ledningene kommer sammen.

Jeg brukte en Unibit for et rent, glatt hull i plasten.

Trinn 12: Forbered og installer tilkoblingskabler

Klipp 9 x 5-600 mm ledninger for å koble enheten til portkortet.

• 2 for 24V effektinngang
• 3 for portstatus (2 innganger og felles grunn)
• 2 for signalet om åpen gate
• 2 for signalet for lukkeport

Vri hver av gruppene ovenfor ved å bruke en drill. Dette vil gjøre alt lettere og se bedre ut.

Strip og koble hver av ledningene til de respektive terminalene som vist.

Trinn 13: Rutetilkoblingskabler

Før tilkoblingstrådene gjennom hullet som vist.

Trinn 14: Monter komponenter

Plasser og monter komponentene med en liten perle med varmt lim eller silikon. Ikke bruk for mye hvis du trenger å fjerne en del. Bruk akkurat nok til å sikre dem.

Jeg ønsket opprinnelig å skrive ut saken med klipp/faner for å holde brettene på plass, men jeg trengte å få dette installert og hadde ikke tid. Å legge brettklips til saken din ville være en fin touch.

Trinn 15: Tett tilkoblingskabler

Tett tilkoblingstrådene med varmt lim eller silikon.

Trinn 16: Lukk saken

Jeg brukte små ~ 4 mm skruer på listen over denne 3D -trykte saken. Hvis du er bekymret for skitt eller fuktighet, legg en silikonperle eller varmt lim rundt lokket før du lukker den.

Trinn 17: Installer i Gate Operator

På hovedtavlen:

• Fest de to ledningene som er koblet til reléutgang 1 til Open Gate -terminalen. (rød/brun på bildene)
• Hekt de to ledningene som er koblet til reléutgang 2 til Close Gate -terminalen. (gul/blå på bildene)
• Fest de to ledningene som er koblet til DC-DC-omformerinngangen til 24V tilbehørsklemmer (rød/svart på bilder)

På utvidelseskortet

• Jumper reléets vanlige skrueterminaler sammen med et lite stykke ledning
• Koble felles bakken til en av reléets vanlige skrueterminaler (grønt på bilder)
• Koble de 2 portstatusinngangene (IMP Pin8 & 9) til reléets normale åpne (NO) skrueterminaler (grå/gul på bilder)

Før ledningene, glidelås dem for å se pent ut og finn et sted å montere eller sette saken på.

Det er flere bilder i full oppløsning som ligger på GitHub -depotet.

Trinn 18: Angi Aux -relemodus

Still inn tilleggsrelébryterne som vist på bildet.

Dette vil gi IMP signalene den trenger for å avgjøre om porten er lukket, åpner, åpner eller lukker.

Trinn 19: IMP -agent og enhetskode

Kode for elektrisk impagent:

• Lag en ny modell i Electric Imp IDE:
• Erstatt URL for å peke på serveren din

// HTTP -behandlerfunksjon

funksjon httpHandler (req, resp) {try {local d = http.jsondecode (req.body); //server.log(d.c); hvis (d.c == "btn") {//server.log(d.val); device.send ("btn", d.val); resp.send (200, "OK"); }} catch (ex) {// Hvis det var en feil, send den tilbake i svarserveren.log ("error:" + ex); resp.send (500, "Intern server error:" + ex); }}} // Registrer HTTP -behandler http.onrequest (httpHandler); // GateStateChange handlerfunksjon funksjon gateStateChangeHandler (data) {// URL til webtjeneste lokal url = "https://projects.ajillion.com/save_gate_state"; // Angi innholdstype-overskrift til json local headers = {"Content-Type": "application/json"}; // Kode mottatte data og logg lokalt organ = http.jsonencode (data); server.log (brødtekst); // Send dataene til webtjenesten http.post (url, headers, body).sendsync (); } // Registrer gateStateChange handler device.on ("gateStateChange", gateStateChangeHandler);

Kode for elektrisk imp -agent:

• Tilordne en Imp -enhet til modellen din
• Kontroller at maskinvarenålene er Alias som tilkoblet

// Debouce bibliotek

#require "Button.class.nut: 1.2.0" // Alias for gateOpen GPIO pin (active low) gateOpen <- hardware.pin2; // Alias for gateLukk kontroll GPIO pin (aktiv lav) gateLukk <- hardware.pin7; // Konfigurer 'gateOpen' til å være en digital utgang med en startverdi på digital 1 (høy) gateOpen.configure (DIGITAL_OUT, 1); // Konfigurer 'gateClose' til å være en digital utgang med en startverdi på digital 1 (høy) gateClose.configure (DIGITAL_OUT, 1); // Alias for GPIO-pinnen som indikerer at porten beveger seg (N. O.) gateMovingState <- Knapp (hardware.pin8, DIGITAL_IN_PULLUP); // Alias for GPIO-pinnen som indikerer at porten er helt åpen (N. O.) gateOpenState <- Knapp (hardware.pin9, DIGITAL_IN_PULLUP); // Global variabel for å holde porttilstanden (Åpen = 1 / Lukket = 0) lokal lastGateOpenState = 0; // Latch Timer -objekt lokalt latchTimer = null agent.on ("btn", funksjon (data) {switch (data.cmd) {case "open": gateOpen.write (0); if (latchTimer) imp.cancelwakeup (latchTimer); latchTimer = imp.wakeup (1, releaseOpen); server.log ("Open kommando mottatt"); break case "latch30m": gateOpen.write (0); if (latchTimer) imp.cancelwakeup (latchTimer); latchTimer = imp.wakeup (1800, releaseOpen); server.log ("Latch30m kommando mottatt"); break case "latch8h": gateOpen.write (0); if (latchTimer) imp.cancelwakeup (latchTimer); latchTimer = imp.wakeup (28800, releaseOpen); server.log ("Latch8h -kommando mottatt"); break case "close": if (latchTimer) imp.cancelwakeup (latchTimer); gateOpen.write (1); gateClose.write (0); latchTimer = imp.wakeup (1, releaseClose); server.log ("Lukk nå kommando mottatt"); break default: server.log ("Knappkommando gjenkjennes ikke");}}); function releaseOpen () {if (latchTimer) imp.cancelwakeup (latchTimer); gateOpen.write (1); //server.log("Timer frigitt gateOpen switch contact "); } function releaseClose () {if (latchTimer) imp.cancelwakeup (latchTimer); gateClose.write (1); //server.log("Timer frigitt gateLukk bryterkontakt "); } gateMovingState.onPress (function () {// Reléet er aktivert, gate beveger //server.log("Gate åpner "); lokale data = {" gatestate ": 1," timer ": hardware.millis ()}; agent.send ("gateStateChange", data);}). onRelease (function () {// Reléet slippes, gate er i ro //server.log("Gate er stengt "); lokale data = {"gatestate": 0, "timer": hardware.millis ()}; agent.send ("gateStateChange", data);}); gateOpenState.onPress (funksjon () {// Reléet er aktivert, porten er helt åpen //server.log("Gate er åpen "); lokale data = {" gatestate ": 2," timer ": hardware.millis ()}; agent.send ("gateStateChange", data);}). onRelease (funksjon () {// Reléet slippes, porten er ikke helt åpen //server.log("Gate lukker "); lokale data = {"gatestate": 3, "timer": hardware.millis ()}; agent.send ("gateStateChange", data);});

Trinn 20: Web Service PHP -kode

Jeg skrev denne koden for CodeIgniter -rammeverket fordi jeg la den til et gammelt eksisterende prosjekt. Kontrolleren og visningskoden kan enkelt tilpasses rammen du ønsker.

For å holde ting enkelt lagret jeg JSON -data i en flat fil for datalagring. Hvis du trenger logging eller mer komplekse datarelaterte funksjoner, bruk en database.

Ajax-biblioteket jeg skrev og brukte i dette prosjektet kan lastes ned fra GitHub-depotet: ThingEngineer/Codeigniter-jQuery-Ajax

PHP -kontrollerkode:

• app/kontrollere/projects.php
• Sørg for at datastien er tilgjengelig med PHP -skriptet ditt, både posisjons- og lese-/skriverettigheter.

last-> hjelper (matrise ('fil', 'dato'));

$ data = json_decode (read_file ('../ app/logs/gatestate.data'), TRUE); switch ($ data ['gatestate']) {case 0: $ view_data ['gatestate'] = 'Lukket'; gå i stykker; case 1: $ view_data ['gatestate'] = 'Åpner …'; gå i stykker; case 2: $ view_data ['gatestate'] = 'Åpne'; gå i stykker; case 3: $ view_data ['gatestate'] = 'Lukker …'; gå i stykker; } $ last_opened = json_decode (read_file ('../ app/logs/projects/gateopened.data'), TRUE); $ view_data ['last_opened'] = tidsrom ($ last_opened ['last_opened'], time ()). 'siden'; // Last inn visning $ t ['data'] = $ view_data; $ this-> load-> view ('gate_view', $ t); } funksjon 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, TRUE); if ($ data ['gatestate'] == 1) {$ last_opened = array ('last_opened' => time ()); write_file ('../ app/logs/projects/gateopened.data', json_encode ($ last_opened)); }} funksjon 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'] = tidsrom ($ last_opened ['last_opened'], time ()). 'siden'; $ this-> ajax-> output_ajax ($ data, 'json', FALSE); // send json -data, ikke håndhev ajax -forespørsel}}/ * Slutt på filprosjekter.php *// * Sted:./application/controllers/projects.php */

PHP View Code:

Jeg brukte Bootstrap for front-end fordi det er raskt, enkelt og responsivt. Du kan laste den ned her: https://getbootstrap.com (jQuery er inkludert)

• app/kontrollere/gate_view.php
• Erstatt DIN-AGENT-KODEN med din elektriske imp-agentkode

IoT Gate Opperator Addon IoT Gate Opperator Addon

• Hjem
• Admin

Open Gate Latch Åpen i 30 min Latch Open i 8 timer Lukk nå Gate Status: Sist åpnet $ (dokument).ready (function () {resetStatus ();}) funksjon sendJSON (JSONout) {var url = 'https:// agent.electricimp.com/YOUR-AGENT-CODE '; $.post (url, JSONout); } $ ("#open_gate"). klikk (function () {var JSONout = '{"c": "btn", "val": {"cmd": "open"}}'; sendJSON (JSONout); $ ("#status"). tekst ("Åpner …");}); $ ("#latch30m_gate"). klikk (function () {var JSONout = '{"c": "btn", "val": {"cmd": "latch30m"}}'; sendJSON (JSONout); $ ("#status"). tekst ("Åpner …");}); $ ("#latch8h_gate"). klikk (function () {var JSONout = '{"c": "btn", "val": {"cmd": "latch8h"}}'; sendJSON (JSONout); $ ("#status"). tekst ("Åpner …");}); $ ("#close_gate"). klikk (function () {var JSONout = '{"c": "btn", "val": {"cmd": "close"}}'; sendJSON (JSONout); $ ("#status"). tekst ("Lukker …");}); function resetStatus () {// Target url var target = 'https://projects.ajillion.com/get_gate_state'; // Be om var data = {agent: 'app'}; // Send ajax -forespørsel $.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"). text (data.last_opened);}, error: function (XMLHttpRequest, textStatus, errorThrown) {// Feilmelding $ ("#status"). text ('Server Error');}}); setTimeout (resetStatus, 3000); }