WebApp Controlled Gate Operator Add-on (IoT): 20 stappen (met afbeeldingen)

2025 Auteur: John Day | [email protected]. Laatst gewijzigd: 2025-01-23 15:01

Ik heb een klant die een omheind gebied had waar veel mensen moesten komen en gaan. Ze wilden geen toetsenbord aan de buitenkant gebruiken en hadden maar een beperkt aantal handzenders. Het vinden van een betaalbare bron voor extra keyfobs was moeilijk. Ik dacht dat het een geweldige kans zou zijn om deze Liftmaster-poortaandrijving te upgraden naar IoT-compatibel met aangepaste hardware, web-API en webapp-interface. Dit loste niet alleen het probleem van massale toegang op, het opende ook extra functionaliteit!

Op de laatste foto hierboven is de testeenheid die ik bijna een jaar in een ritssluitingszak had draaien. Ik vond het tijd voor een upgrade!

Dit is een volledig functionerende oplossing met alle code, hardware-informatie en ontwerpen die hier worden vermeld.

Alle projectbestanden worden ook gehost op GitHub: github.com/ThingEngineer/IoT-Gate-Operator-Addon

Een voorbeeld van de CodeIgniter WebApp-interface wordt hier gehost: projects.ajillion.com/gate Deze instantie is niet verbonden met een live gate, maar is de exacte interface en code die op de gates wordt uitgevoerd (min enkele beveiligingsfuncties).

--

Voor nog meer integratie kunt u de IFTTT-bibliotheek voor Electric Imp gebruiken.

Stap 1: Verzamel de onderdelen

• Je hebt een elektrische IMP nodig met minimaal 4 beschikbare GPIO's, ik gebruik de IMP001 met een breakout-bord van april.
• Een regelaar om de bronspanning te verlagen tot 5V. Ik gebruik een DC-DC Buck Converter Step Down Module. eBoot's MP1584EN-versie van Amazon.
• Een dubbele (of meer) relaismodule of soortgelijk schakelapparaat dat werkt met de IMP-uitgang. Ik gebruik deze JBtek 4-kanaals DC 5V-relaismodule van Amazon.
• Een 4 draads schroefklem. Ik gebruik deze 5 stuks 2 rijen 12P draadconnector schroefklemmenblok 300V 20A van Amazon.

Stap 2: Benodigdheden

Je hebt ook nodig:

• Toegang tot een 3D-printer of een kleine projectbox
• 4 kleine schroeven ongeveer 4 mm x 6 mm voor het deksel van de behuizing
• Aansluitdraad
• Draadsnijders
• Draadstrippers
• Kleine schroevendraaiers
• Soldeerbout
• Hete lijm of siliconen
• Ritssluitingen

Stap 3: Grootte van de zaak

Lay-out uw onderdelen om te bepalen welke maat koffer u nodig heeft. Met een lay-out zoals afgebeeld heb ik een behuizing nodig die ongeveer 140 mm breed, 70 mm diep en 30 mm hoog is.

Stap 4: Draad DC-DC-converter

Knip 3 paar rode en zwarte aansluitdraad door voor stroomaansluitingen in en uit de DC-DC-converterkaart.

• Invoer: 100 mm
• Uitgang naar IMP: 90 mm
• Uitgang naar relaismodule: 130 mm

Soldeer ze op je bord zoals afgebeeld.

Stap 5: Bedrading van stroom naar apparaten

• Sluit de ingang van de DC-DC-converter aan op twee van de punten op het schroefklemmenblok.
• Soldeer de korte 5V uitgangsdraden aan de IMP.
• Soldeer de langere 5V uitgangsdraden aan de relaismodule.

Stap 6: Ingangen draadrelaismodule

• Knip 4 draden van 90 mm door voor de ingangsaansluitingen van de relaismodule. Ik heb 4 afzonderlijke kleuren gebruikt om later tijdens het coderen gemakkelijk te kunnen raadplegen.
• Soldeer de draden aan de relaismodule-ingangen 1-4 en vervolgens aan de eerste 4 IMP GPIO-spots (Pin1, 2, 5 en 7) respectievelijk.

Stap 7: IMP-stroomjumper

Mogelijk moet u USB-voeding gebruiken terwijl u uw IMP in eerste instantie programmeert en test. Als u klaar bent, moet u de voedingsjumper naar de BAT-kant verplaatsen.

Stap 8: Ingangen draadpoortstatus

• Knip 2 draden van 80 mm door voor de sate-statusingangen.
• Sluit de draden aan op de overige 2 schroefklemmen.
• Soldeer draden naar de volgende IMP GPIO-spots (Pin8 & 9) respectievelijk.

Stap 9: Een hoesje afdrukken of kopen

Je kunt mijn. STL of. F3D voor dit geval downloaden op GitHub of Thingiverse

Als je geen toegang hebt tot een 3D-printer, zal een kleine generieke projectcase werken.

Stap 10: Versier je koffer

Omdat!

Ik heb wat ingesprongen tekst op de mijne gezet en deze gewoon ingekleurd met een zwarte sharpie. Als je avontuurlijk bent ingesteld, kun je acrylverf, nagellak of iets anders gebruiken om het nog gelikter te maken.

Stap 11: boorgat voor draden

Boor een klein gaatje van 10-15 mm aan de zijkant in het midden waar alle draden samenkomen.

Ik gebruikte een Unibit voor een schoon, glad gat in het plastic.

Stap 12: Bereid en installeer aansluitdraden

Knip 9 draden van 5 tot 600 mm door om ons apparaat aan de poortbedieningskaart te bevestigen.

• 2 voor de 24V-stroomingang
• 3 voor de poortstatus (2 ingangen en een gemeenschappelijke aarde)
• 2 voor het open poortsignaal
• 2 voor het poortsignaal sluiten

Draai elk van de hierboven genoemde groepen samen met behulp van een oefening. Dit maakt alles gemakkelijker en ziet er beter uit.

Strip en sluit elk van de draden aan op de respectievelijke klemmen zoals afgebeeld.

Stap 13: Route aansluitdraden

Leid de aansluitdraden door het gat zoals afgebeeld.

Stap 14: Onderdelen monteren

Plaats en monteer componenten met een kleine druppel hete lijm of siliconen. Gebruik niet te veel voor het geval u een onderdeel moet verwijderen, gebruik net genoeg om ze vast te zetten.

Ik wilde de behuizing oorspronkelijk bedrukken met clips/lipjes om de planken op hun plaats te houden, maar ik moest dit installeren en had geen tijd. Het zou een leuke touch zijn om boardclips aan je koffer toe te voegen.

Stap 15: Verbindingsdraden verzegelen

Verzegel de aansluitdraden met hete lijm of siliconen.

Stap 16: Sluit de zaak

Ik gebruikte kleine ~ 4 mm schroeven op de lijst van deze 3D-geprinte behuizing. Als u zich zorgen maakt over vuil of vocht, plaats dan een druppel siliconen of hete lijm rond de dekselverbinding voordat u deze sluit.

Stap 17: Installeren in Gate Operator

Op het hoofdbord:

• Sluit de twee draden die zijn aangesloten op relaisuitgang 1 aan op de Open Gate-aansluiting. (rood/bruin op foto's)
• Haak de twee draden aangesloten op relaisuitgang 2 aan op de Close Gate-aansluiting. (geel/blauw op foto's)
• Haak de twee draden die zijn aangesloten op de ingang van de DC-DC-converter aan de 24V-schroefaansluitingen voor accessoires (rood/zwart op foto's)

Op het uitbreidingsbord

• Overbrug de gemeenschappelijke schroefklemmen van het relais samen met een klein stukje draad
• Sluit de gemeenschappelijke aarde aan op een van de gemeenschappelijke schroefklemmen van het relais (groen op foto's)
• Sluit de 2 poortstatusingangen (IMP Pin8 & 9) aan op de relais normaal open (NO) schroefklemmen (grijs/geel op foto's)

Leid de draden, sluit ze met een ritssluiting om er netjes uit te zien en zoek een plek om uw koffer te monteren of te plaatsen.

Er zijn extra foto's met volledige resolutie die worden gehost op de GitHub-repository.

Stap 18: Aux-relaismodus instellen

Stel de hulprelaisschakelaars in zoals weergegeven op de foto.

Dit geeft de IMP de signalen die hij nodig heeft om te bepalen of de poort gesloten, geopend, geopend of gesloten is.

Stap 19: IMP-agent en apparaatcode

Elektrische Imp Agent-code:

• Maak een nieuw model in de Electric Imp IDE:
• Vervang URL om naar uw server te verwijzen

//

functie httpHandler (req, resp) { probeer { local d = http.jsondecode (req.body); //server.log(d.c); if (d.c == "btn") {//server.log(d.val); device.send("btn", d.val); resp.verzenden(200, "OK"); } } catch(ex) { // Als er een fout was, stuur deze dan terug naar de response server.log("error:" + ex); resp.send(500, "Interne serverfout: " + ex); } } // Registreer HTTP-handler http.onrequest (httpHandler); // GateStateChange handlerfunctie functie gateStateChangeHandler(data) {// URL naar lokale webservice url = "https://projects.ajillion.com/save_gate_state"; // Stel Content-Type header in op json local headers = { "Content-Type": "application/json"}; // Codeer ontvangen gegevens en log lokale instantie = http.jsonencode (data); server.log(lichaam); // Stuur de gegevens naar uw webservice http.post(url, headers, body).sendsync(); } // Registreer gateStateChange handler device.on ("gateStateChange", gateStateChangeHandler);

Elektrische Imp Agent-code:

• Een Imp-apparaat toewijzen aan uw model
• Controleer of de hardware-pinnen Aliased zijn als verbonden

// Debouce-bibliotheek

#require "Button.class.nut:1.2.0" // Alias voor gateOpen GPIO-pin (actief laag) gateOpen <- hardware.pin2; // Alias voor gateClose-besturing GPIO-pin (actief laag) gateClose <- hardware.pin7; // Configureer 'gateOpen' als een digitale uitgang met een startwaarde van digitaal 1 (hoog) gateOpen.configure(DIGITAL_OUT, 1); // Configureer 'gateClose' als een digitale uitgang met een startwaarde van digitaal 1 (hoog) gateClose.configure (DIGITAL_OUT, 1); // Alias voor de GPIO-pin die aangeeft dat de poort beweegt (N. O.) gateMovingState <- Button (hardware.pin8, DIGITAL_IN_PULLUP); // Alias voor de GPIO-pin die aangeeft dat de poort volledig open is (N. O.) gateOpenState <- Button (hardware.pin9, DIGITAL_IN_PULLUP); // Globale variabele om de poortstatus vast te houden (Open = 1 / Gesloten = 0) lokale 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 commando ontvangen"); break case "latch30m": gateOpen.write(0); if (latchTimer) imp.cancelwakeup(latchTimer); latchTimer = imp.wakeup(1800, releaseOpen); server.log("Latch30m commando ontvangen"); break case "latch8h": gateOpen.write(0); if (latchTimer) imp.cancelwakeup(latchTimer); latchTimer = imp.wakeup(28800, releaseOpen); server.log ("Latch8h-opdracht ontvangen"); break case "close": if (latchTimer) imp.cancelwakeup(latchTimer); gateOpen.write(1); gateClose.write(0); latchTimer = imp.wakeup(1, releaseClose);server.log("Sluit nu commando ontvangen"); break default: server.log("Knop commando niet herkend");} }); functie releaseOpen() {if (latchTimer) imp.cancelwakeup(latchTimer); gateOpen.schrijven(1); //server.log ("Timer vrijgegeven gateOpen schakelcontact"); } function releaseClose() { if (latchTimer) imp.cancelwakeup(latchTimer); gateClose.write(1); //server.log ("Timer vrijgegeven gateSluit schakelcontact"); } gateMovingState.onPress(function() { // Het relais is geactiveerd, poort beweegt //server.log("Poort gaat open"); local data = {"gatestate": 1, "timer": hardware.millis() }; agent.send("gateStateChange", data); }).onRelease(function() { // Het relais is vrijgegeven, poort is in rust //server.log("Poort is gesloten"); lokale data = {"gatestate": 0, "timer": hardware.millis()}; agent.send("gateStateChange", data);}); gateOpenState.onPress(function() {// Het relais is geactiveerd, poort is volledig open //server.log("Poort is open"); local data = {"gatestate": 2, "timer": hardware.millis() }; agent.send("gateStateChange", data); }).onRelease(function() { // Het relais is vrijgegeven, poort is niet volledig open //server.log("Gate gaat sluiten"); lokale gegevens = {"gatestate": 3, "timer": hardware.millis()}; agent.send("gateStateChange", data); });

Stap 20: Webservice PHP-code

Ik heb deze code geschreven voor het CodeIgniter-framework omdat ik het aan een oud bestaand project heb toegevoegd. De controller en viewcode kunnen eenvoudig worden aangepast aan het framework van uw keuze.

Om het simpel te houden, heb ik JSON-gegevens opgeslagen in een plat bestand voor gegevensopslag. Als u logging of meer complexe gegevensgerelateerde functies nodig heeft, gebruik dan een database.

De ajax-bibliotheek die ik in dit project heb geschreven en gebruikt, kan worden gedownload van de GitHub-repository: ThingEngineer/Codeigniter-jQuery-Ajax

PHP-controllercode:

• app/controllers/projecten.php
• Zorg ervoor dat het gegevenspad toegankelijk is voor uw PHP-script, zowel locatie- als lees-/schrijfrechten.

load->helper(array('bestand', 'datum'));

$data = json_decode(read_file('../app/logs/gatestate.data'), TRUE); switch ($data['gatestate']) { case 0: $view_data['gatestate'] = 'Gesloten'; pauze; geval 1: $view_data['gatestate'] = 'Bezig met openen…'; pauze; geval 2: $view_data['gatestate'] = 'Open'; pauze; geval 3: $view_data['gatestate'] = 'Bezig met sluiten…'; pauze; } $last_opened = json_decode(read_file('../app/logs/projects/gateopened.data'), TRUE); $view_data['last_opened'] = timespan($last_opened['last_opened'], time()). ' geleden'; //Laad View $t['data'] = $view_data; $this->load->view('gate_view', $t); } function 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)); } } function 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()). ' geleden'; $this->ajax->output_ajax($data, 'json', FALSE); // stuur json-gegevens, dwing geen ajax-verzoek af } } /* Einde van bestand projects.php */ /* Locatie:./application/controllers/project.php */

PHP-weergavecode:

Ik gebruikte Bootstrap voor de front-end omdat het snel, gemakkelijk en responsief is. Je kunt het hier downloaden: https://getbootstrap.com (jQuery is inbegrepen)

• app/controllers/gate_view.php
• Vervang UW-AGENT-CODE door uw Electric Imp-agentcode

IoT Gate Opperator-add-on IoT Gate Opperator-add-on

• Huis
• beheerder

Open Gate Vergrendeling Open voor 30 min. Vergrendeling Open voor 8 uur Sluit nu Gate Status: Laatst geopend $(document).ready(function(){ resetStatus(); }) function sendJSON(JSONout){ var url = 'https:// agent.electricimp.com/UW-AGENT-CODE'; $.post(url, JSONout); } $("#open_gate").click(function() { var JSONout = '{"c":"btn", "val":{"cmd":"open"}}'; sendJSON(JSONout); $ ("#status").text ("Bezig met openen…"); }); $("#latch30m_gate").click(function() { var JSONout = '{"c":"btn", "val":{"cmd":"latch30m"}}'; sendJSON(JSONout); $("#status").text("Bezig met openen…"); }); $("#latch8h_gate").click(function() { var JSONout = '{"c":"btn", "val":{"cmd":"latch8h"}}'; sendJSON(JSONout); $("#status").text("Bezig met openen…"); }); $("#close_gate").click(function() { var JSONout = '{"c":"btn", "val":{"cmd":"close"}}'; sendJSON(JSONout); $("#status").text("Bezig met sluiten…"); }); function resetStatus() {// Doel-url var target = 'https://projects.ajillion.com/get_gate_state'; // Verzoek var data = {agent: 'app'}; // Stuur ajax postverzoek $.ajax({url: target, dataType: 'json', type: 'POST', data: data, success: function(data, textStatus, XMLHttpRequest) { switch(data.gatestate) { case 0: $("#status").text('Gesloten'); 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) { // Foutmelding $("#status").text('Server Error'); } }); setTimeout (resetStatus, 3000); }