Add-on WebApp Controlled Gate Operator (IoT): 20 passaggi (con immagini)

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:04

Ho un cliente che aveva un'area recintata dove molte persone dovevano andare e venire. Non volevano usare una tastiera all'esterno e avevano solo un numero limitato di trasmettitori. Trovare una fonte conveniente per ulteriori telecomandi è stato difficile. Ho pensato che sarebbe stata una grande opportunità aggiornare questo operatore per cancello Liftmaster per renderlo compatibile con IoT con hardware personalizzato, API Web e interfaccia dell'app Web. Questo non solo ha risolto il problema dell'accesso di massa, ma ha anche aperto funzionalità aggiuntive!

Nell'ultima foto sopra c'è l'unità di prova che ho tenuto in funzione per quasi un anno in una borsa a chiusura lampo. Ho pensato che fosse il momento per un aggiornamento!

Questa è una soluzione completamente funzionante con tutto il codice, le informazioni sull'hardware e i progetti elencati qui.

Tutti i file dei progetti sono anche ospitati su GitHub: github.com/ThingEngineer/IoT-Gate-Operator-Addon

Un esempio dell'interfaccia WebApp di CodeIgniter è ospitato qui: projects.ajillion.com/gate Questa istanza non è connessa a un gate live ma è l'interfaccia e il codice esatti in esecuzione sui gate (meno alcune funzionalità di sicurezza).

--

Per un'integrazione ancora maggiore è possibile utilizzare la libreria IFTTT per Electric Imp.

Passaggio 1: raccogliere le parti

• Avrai bisogno di un IMP elettrico con almeno 4 GPIO disponibili, sto usando l'IMP001 con una breakout board di aprile.
• Un regolatore per abbassare la tensione della sorgente fino a 5V. Sto usando un modulo step-down del convertitore buck DC-DC. Versione MP1584EN di eBoot da Amazon.
• Un modulo relè doppio (o più) o un dispositivo di commutazione simile che funzionerà con l'uscita IMP. Sto usando questo modulo relè JBtek 4 canali DC 5V di Amazon.
• Un morsetto a vite a 4 fili. Sto usando questo blocco barriera con morsetti a vite da 5 pezzi 2 file 12P 300V 20A da Amazon.

Passaggio 2: materiali di consumo

Avrai anche bisogno di:

• Accesso a una stampante 3D o a un piccolo project box
• 4 piccole viti di circa 4 mm x 6 mm per il coperchio della custodia
• Cavo di collegamento
• Pinza tagliafili
• Spelafili
• Cacciaviti piccoli
• Saldatore
• Colla a caldo o silicone
• Fascette

Passaggio 3: dimensiona il caso

Disponi le tue parti per determinare di quale dimensione avrai bisogno. Con un layout come nella foto avrò bisogno di una custodia larga circa 140 mm, profonda 70 mm e alta 30 mm.

Passaggio 4: convertitore DC-DC a filo

Tagliare 3 coppie di cavi di collegamento rosso e nero per i collegamenti di alimentazione all'interno e all'esterno della scheda del convertitore CC-CC.

• Ingresso: 100 mm
• Uscita su IMP: 90 mm
• Uscita al modulo relè: 130 mm

Saldali alla tua scheda come mostrato.

Passaggio 5: collegare l'alimentazione ai dispositivi

• Collegare l'ingresso del convertitore DC-DC a due dei punti sulla morsettiera a vite.
• Saldare i fili di uscita 5V corti all'IMP.
• Saldare i fili di uscita 5V più lunghi al modulo relè.

Passaggio 6: ingressi del modulo relè a filo

• Tagliare i fili 4 x 90 mm per le connessioni di ingresso del modulo relè. Ho usato 4 colori separati per un facile riferimento in seguito durante la codifica.
• Saldare i fili agli ingressi 1-4 del modulo relè, quindi ai primi 4 punti IMP GPIO (Pin1, 2, 5 e 7 rispettivamente).

Passaggio 7: ponticello di alimentazione IMP

Potrebbe essere necessario utilizzare l'alimentazione USB durante la programmazione e il test iniziale dell'IMP. Al termine, assicurati di spostare il ponticello di alimentazione sul lato BAT.

Passaggio 8: ingressi di stato del gate del cavo

• Tagliare 2 fili da 80 mm per gli ingressi dello stato di sate.
• Collegare i fili ai restanti 2 terminali a vite.
• Saldare i fili al prossimo spot IMP GPIO (Pin8 e 9 rispettivamente).

Passaggio 9: stampa o acquista una custodia

Puoi scaricare il mio. STL o. F3D per questo caso su GitHub o Thingiverse

Se non hai accesso a una stampante 3D, funzionerà un piccolo caso di progetto generico.

Passaggio 10: decora la tua custodia

Perché!

Ho inserito del testo rientrato sul mio e l'ho colorato con un pennarello nero. Se ti senti avventuroso, puoi usare vernice acrilica, smalto per unghie o qualcos'altro per renderlo ancora più liscio.

Passaggio 11: praticare il foro per i cavi

Praticare un piccolo foro di 10-15 mm sul lato vicino al centro del punto in cui tutti i fili si uniranno.

Ho usato un Unibit per un foro pulito e liscio nella plastica.

Passaggio 12: preparare e installare i cavi di collegamento

Tagliare fili 9 x 5-600mm per agganciare il nostro dispositivo alla scheda operatore del cancello.

• 2 per l'ingresso di alimentazione 24V
• 3 per lo stato del cancello (2 ingressi e una massa comune)
• 2 per il segnale di cancello aperto
• 2 per il segnale di cancello chiuso

Twist insieme ciascuno dei gruppi sopra elencati utilizzando un trapano. Questo renderà tutto più facile e avrà un aspetto migliore.

Spellare e collegare ciascuno dei fili ai rispettivi terminali come mostrato.

Passaggio 13: instradare i cavi di collegamento

Instradare i cavi di collegamento attraverso il foro come mostrato.

Passaggio 14: montare i componenti

Posiziona e monta i componenti con una piccola goccia di colla a caldo o silicone. Non usare troppo nel caso in cui sia necessario rimuovere una parte, usa quanto basta per fissarli.

Inizialmente volevo stampare la custodia con clip / linguette per tenere le schede in posizione, ma avevo bisogno di installarlo e non avevo tempo. L'aggiunta di clip di bordo alla tua custodia sarebbe un bel tocco.

Passaggio 15: Sigillare i cavi di collegamento

Sigillare i fili di collegamento con colla a caldo o silicone.

Passaggio 16: chiudere il caso

Ho usato piccole viti da ~ 4 mm nell'elenco di questa custodia stampata in 3D. Se sei preoccupato per lo sporco o l'umidità, posiziona una goccia di silicone o colla a caldo attorno al giunto del coperchio prima di chiuderlo.

Passaggio 17: installazione in Gate Operator

Sulla scheda principale:

• Agganciare i due fili collegati all'uscita relè 1 al terminale Open Gate. (rosso/marrone nelle foto)
• Agganciare i due fili collegati all'uscita relè 2 al morsetto Close Gate. (giallo/blu nelle foto)
• Agganciare i due fili collegati all'ingresso del convertitore DC-DC ai morsetti a vite di alimentazione accessori 24V (rosso/nero nelle foto)

Sulla scheda di espansione

• Ponticellare i terminali a vite comuni del relè insieme a un piccolo pezzo di filo
• Collegare la massa comune ad uno dei morsetti a vite comuni del relè (verde nelle foto)
• Collegare i 2 ingressi di stato del cancello (IMP Pin8 e 9) ai morsetti a vite del relè normalmente aperto (NO) (grigio/giallo nelle foto)

Instrada i cavi, fissali con la cerniera per avere un aspetto ordinato e trova un posto dove montare o impostare la custodia.

Ci sono altre foto a piena risoluzione, ospitate nel repository GitHub.

Passaggio 18: impostare la modalità relè ausiliario

Impostare gli interruttori del relè ausiliario come mostrato nella foto.

Questo darà all'Imp i segnali di cui ha bisogno per determinare se il cancello è chiuso, aperto, aperto o chiuso.

Passaggio 19: agente IMP e codice dispositivo

Codice agente Imp elettrico:

• Crea un nuovo modello nell'IDE Electric Imp:
• Sostituisci l'URL per puntare al tuo server

// Funzione del gestore

function httpHandler(req, resp) { try { local d = http.jsondecode(req.body); //server.log(d.c); if (d.c == "btn") { //server.log(d.val); device.send("btn", d.val); risp.send(200, "OK"); } } catch(ex) { // Se c'è stato un errore, rimandalo nella risposta server.log("error:" + ex); resp.send(500, "Errore interno del server: " + ex); } } // Registra il gestore HTTP http.onrequest(httpHandler); // GateStateChange handler function function gateStateChangeHandler(data) { // URL al servizio web url locale = "https://projects.ajillion.com/save_gate_state"; // Imposta l'intestazione Content-Type su json local headers = { "Content-Type": "application/json" }; // Codifica i dati ricevuti e registra il corpo locale = http.jsonencode(data); server.log(corpo); // Invia i dati al tuo servizio web http.post(url, headers, body).sendsync(); } // Registra il gestore gateStateChange device.on("gateStateChange", gateStateChangeHandler);

Codice agente Imp elettrico:

• Assegna un dispositivo Imp al tuo modello
• Verificare che i pin hardware siano alias come collegati

// Libreria Debouce

#require "Button.class.nut:1.2.0" // Alias per gateOpen GPIO pin (active low) gateOpen <- hardware.pin2; // Alias per gateClose control pin GPIO (active low) gateClose <- hardware.pin7; // Configura 'gateOpen' come uscita digitale con un valore iniziale di digital 1 (high) gateOpen.configure(DIGITAL_OUT, 1); // Configura 'gateClose' come uscita digitale con un valore iniziale di digital 1 (high) gateClose.configure(DIGITAL_OUT, 1); // Alias per il pin GPIO che indica che il cancello si sta muovendo (N. O.) gateMovingState <- Button(hardware.pin8, DIGITAL_IN_PULLUP); // Alias per il pin GPIO che indica che il gate è completamente aperto (N. O.) gateOpenState <- Button(hardware.pin9, DIGITAL_IN_PULLUP); // Variabile globale per mantenere lo stato del cancello (Aperto = 1 / Chiuso = 0) local lastGateOpenState = 0; // Oggetto Latch Timer locale 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("Comando di apertura ricevuto"); break case "latch30m": gateOpen.write(0); if (latchTimer) imp.cancelwakeup(latchTimer); latchTimer = imp.wakeup(1800, releaseOpen); server.log("Comando Latch30m ricevuto"); break case "latch8h": gateOpen.write(0); if (latchTimer) imp.cancelwakeup(latchTimer); latchTimer = imp.wakeup(28800, releaseOpen); server.log("Comando Latch8h ricevuto"); break case "close": if (latchTimer) imp.cancelwakeup(latchTimer); gateOpen.write(1); gateClose.write(0); latchTimer = imp.wakeup(1, releaseClose); server.log("Comando di chiusura ricevuto"); break default: server.log("Comando pulsante non riconosciuto"); } }); funzione releaseOpen() { if (latchTimer) imp.cancelwakeup(latchTimer); gateOpen.write(1); //server.log("Contatto interruttore cancello aperto timer rilasciato"); } funzione releaseClose() { if (latchTimer) imp.cancelwakeup(latchTimer); gateClose.write(1); //server.log("Timer rilasciato cancelloChiudi contatto interruttore"); } gateMovingState.onPress(function() { // Il relè è attivato, il cancello si sta muovendo //server.log("Il cancello si sta aprendo"); local data = { "gatestate": 1, "timer": hardware.millis() }; agent.send("gateStateChange", data); }).onRelease(function() { // Il relè è rilasciato, il gate è a riposo //server.log("Il cancello è chiuso"); local data = { "gatestate": 0, "timer": hardware.millis() }; agent.send("gateStateChange", data); }); gateOpenState.onPress(function() { // Il relè è attivato, il gate è completamente aperto //server.log("Il cancello è aperto"); local data = { "gatestate": 2, "timer": hardware.millis() }; agent.send("gateStateChange", data); }).onRelease(function() { // Il relè è rilasciato, il cancello non è completamente aperto //server.log("Il cancello si sta chiudendo"); dati locali = { "gatestate": 3, "timer": hardware.millis() }; agent.send("gateStateChange", data); });

Passaggio 20: codice PHP del servizio Web

Ho scritto questo codice per il framework CodeIgniter perché l'ho aggiunto a un vecchio progetto esistente. Il controller e il codice di visualizzazione possono essere facilmente adattati al framework di tua scelta.

Per semplificare le cose, ho salvato i dati JSON in un file flat per l'archiviazione dei dati. Se hai bisogno di registrazione o di funzioni più complesse relative ai dati, usa un database.

La libreria ajax che ho scritto e utilizzato in questo progetto può essere scaricata dal repository GitHub: ThingEngineer/Codeigniter-jQuery-Ajax

Codice controller PHP:

• app/controller/projects.php
• Assicurati che il percorso dei dati sia accessibile dal tuo script PHP, sia la posizione che i privilegi di lettura/scrittura.

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

$data = json_decode(read_file('../app/logs/gatestate.data'), TRUE); switch ($data['gatestate']) { case 0: $view_data['gatestate'] = 'Chiuso'; rottura; case 1: $view_data['gatestate'] = 'Apertura…'; rottura; caso 2: $view_data['gatestate'] = 'Apri'; rottura; case 3: $view_data['gatestate'] = 'Chiusura in corso…'; rottura; } $last_opened = json_decode(read_file('../app/logs/projects/gateopened.data'), TRUE); $view_data['last_opened'] = timespan($last_opened['last_opened'], time()). ' fa'; //Carica vista $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()). ' fa'; $this->ajax->output_ajax($data, 'json', FALSE); // invia dati json, non forzare la richiesta ajax } } /* Fine del file project.php */ /* Posizione:./application/controllers/projects.php */

Codice di visualizzazione PHP:

Ho usato Bootstrap per il front-end perché è veloce, facile e reattivo. Puoi scaricarlo qui: https://getbootstrap.com (jQuery è incluso)

• app/controllers/gate_view.php
• Sostituisci il TUO-CODICE-AGENTE con il tuo codice agente Electric Imp

Addon IoT Gate Operator Addon IoT Gate Opperator

• Casa
• amministratore

Open Gate Latch Apre per 30 min Latch Apre per 8 ore Close Now Gate Status: Ultima apertura $(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); $ ("#stato").text("Apertura…"); }); $("#latch30m_gate").click(function() { var JSONout = '{"c":"btn", "val":{"cmd":"latch30m"}}'; sendJSON(JSONout); $("#status").text("Apertura…"); }); $("#latch8h_gate").click(function() { var JSONout = '{"c":"btn", "val":{"cmd":"latch8h"}}'; sendJSON(JSONout); $("#status").text("Apertura…"); }); $("#close_gate").click(function() { var JSONout = '{"c":"btn", "val":{"cmd":"close"}}'; sendJSON(JSONout); $("#status").text("Chiusura…"); }); function resetStatus() { // Target url var target = 'https://projects.ajillion.com/get_gate_state'; // Richiedi var data = { agent: 'app' }; // Invia richiesta post ajax $.ajax({ url: target, dataType: 'json', type: 'POST', data: data, success: function(data, textStatus, XMLHttpRequest) { switch(data.gatestate) { case 0: $("#stato").text('Chiuso'); break; case 1: $("#status").text('Apertura…'); break; case 2: $("#stato").text('Aperto'); break; case 3: $("#status").text('Closing…'); break; default: $("#status").text('Error'); } $ ("#last_opened").text(data.last_opened); }, errore: function(XMLHttpRequest, textStatus, errorThrown) { // Messaggio di errore $("#status").text('Server Error'); } }); setTimeout(resetStatus, 3000); }