Arduino'nuzu HTML/Javascript ile Kolay Yoldan Kontrol Etmek: 8 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:20

Bu eğitim, bir adafruit Huzzah'tan yalnızca javascript işlevlerini kullanarak bir ajax geri aramasıyla bir arduino'yu nasıl kontrol edeceğinizi gösterir. Temel olarak, bir ajax geri araması kullanan basit javascript işlevleriyle html arayüzlerini kolayca yazmanıza izin verecek olan html sayfasında javascript kullanabilirsiniz. ESP8266'nın arduino ile iletişim kurmasına izin vermek için. Bu nedenle, tüm pinler bir javascript işlevinden ayarlanabilir. Aynı şekilde, bir javascript işlevi kullanarak herhangi bir pinden de değeri okuyabiliriz. Umarım bu, bir arduino'yu bir html belgesinden kontrol edebilmeyi kolaylaştırmaya yardımcı olur. Html yazabilecek bir sürü insan olduğunu düşündüm. Çoğu, java veya xcode veya başka bir çerçeve ile bir cep telefonu uygulaması yapmaya çalışmakla uğraşmak istemiyor. Bu, insanların işini çok kolaylaştıracak çünkü tek yapmaları gereken, pinlerden değerleri ayarlamak ve okumak için bir javascript işlevi kullanmak. mesela yazmak daha kolay değil mi

Aç

Bir düğmeyi açmak için. Güzel yanı, pinMode(12, INPUT); Kurulum işlevinizde. Pin bildirildiği sürece javascript diğer her şey için kullanılabilir.

belge.onload = {

GetJSON('A0', 1 'dönüş_json')

}

Analog pin 0 değerini almak ve sonucu div'e döndürmek için yapmanız gereken tek şey bu. Bu, insanların arduino'yu kontrol eden html sayfaları oluşturabilmeleri için kolay bir yol olmalıdır. Ayrıca arduino pinlerinin javascript ile ayarlanabilmesi ve okunabilmesi için bir arayüz oluşturun.

Adım 1: Neye İhtiyacınız Olacak?

Bu projeyi, arduinolarını bir ESP8266 üzerinde bir html sayfası ile kontrol etmek isteyen kullanıcılar için oluşturdum. Bu projenin amacı, bir javascript işleviyle arduino'nuzdaki pin değerlerini ayarlamak için basit bir yöntem oluşturmaktır. Örneğin onclick="SetPin(12, 1, 0)", arduino'nuzdaki Pin 12'yi Yüksek olarak ayarlayacaktır.

Bu eğitim için tam olarak takip etmek için aşağıdaki öğelere ihtiyacınız olacak. Ancak, çoğu arduino ve ESP8266 kombinasyonunda çalışması gerektiğini düşünüyorum. Ancak, burada sahip olduklarımı tam olarak takip etmek için aşağıdaki bileşenlere ihtiyacınız olacak.

Arduino Uno - Seri Rx TxAdafruit Huzzah Breakout Board USB'den Seri Kabloya 4 düşük güçlü LED'in Analog Bulanıklık test cihazına sahip herhangi bir arduino uyumlu ile çalışmalıdır - analog çıkış sağlayan herhangi bir analog sensör, Mobil Tarayıcı Arduino Kütüphaneleri ile Wire Wifi Router Cep Telefonu yapacaktır.

Adım 2: Arduino Kimliğini Hazırlama

Bu proje, yeni bir arduino kütüphanesi ve bazı konfigürasyonlar ve zaman uğruna gerektirir. Her ekranın ekran görüntüsünü koymayacağım ve bunu yapılandırmak ve çalıştırmak için ihtiyaç duyacağınız şeyleri gözden geçireceğim. Kullanıcı için mümkün olduğunca kolay hale getirmeye çalıştım.

Kod, çalışmaya başlamak için bir dizi kitaplık kullanır. Öncelikle ESP8266 için arduino kurulumuna odaklanacağız. Bu örnekte Adafruit Huzzah kullanıyorum çünkü adafruit ürünlerini en güvenilir ve en iyi desteğe sahip buluyorum. Adafruit Discord sunucusundan destek almaya çalışmadığınız sürece. Destek forumlarında yardım alma şansınız çok daha fazla olacak.

Her neyse, ESP8266'da aşağıdaki kitaplıkları kullanıyorum

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONBu kitaplıkların nasıl indirilip kurulacağına dair bir eğitim değildir, ancak bunlar HUZZAH'ta kullanılan kitaplıklardır. Bu yüzden lütfen onları bulun ve kurun. Ayrıca HUZZAH için pano tanımlarını da yüklemeniz gerekecektir, bu nedenle DOSYA> Tercihler'e giderseniz Ek Pano Yöneticisi URL'leri yazan kutuya lütfen aşağıdakini ekleyinhttps://arduino.esp8266.com/stable/package_esp8266c…zaten varsa ek bir pano url'si eklemek için oraya virgül eklediğinizden emin olun. Tamam'ı tıklayın, gidin

Araçlar>Pano>Boards Manager ESP8266 Topluluğu tarafından ESP8266'yı yüklemek yerine ESP8266'yı arayın.

Harika şimdi, arduino kodunu çalıştırmak için ihtiyacımız olan her şeye sahip olduğumuzdan emin olalım. Bir arduino Tarafı arduino'nun kendisi bu eğitim için sadece 2 kitaplık kullanır.

SoftwareSerialArduinoJSONHangisi zaten sahip olmanız gerekir.

Adım 3: ESP8266'nın Hazırlanması

Şimdi kodu ESP8266 (Adafruit HUZZAH) üzerine koyacağız ve Arduino'ya bağlanmak için hazırlayacağız. HUZZAH kodunu açın ve çizimi açın. 11. ve 12. satırlarda ssid ve parolayı yerel ağınızdaki WIFI bağlantınızınkiyle değiştirin. Çizim dosyası ve index.h dosyası olmak üzere 2 dosya olduğunu fark edeceksiniz. index.h dosyası, telefonunuzda görüntülenecek olan html'nin depolandığı yerdir.

Wifi'nize doğru SSID ve şifreyi ayarladıktan sonra, kodu derleyebilir ve ESP8266'nıza yükleyebilirsiniz. HUZZAH'ta çipi önyükleyici moduna geçirmek için GPIO0 düğmesini bırakmak yerine GPIO0 etiketli Düğmeyi basılı tutmanız ve ardından dinlenme düğmesine tıklamanız gerekir. Çip başarıyla önyükleyici moduna geçirilirse, çipin önyükleyici modunda olduğunu gösteren kırmızı bir ışık yanar.

ESP8266'ya bağlanmak için bir seri kabloya veya USB - Seri adaptöre veya FDTI çipine ihtiyacınız olacak. Bu durumda, talimatlarda belirtildiği gibi adafruit'in kablosunu kullanıyorum. Ancak, Tx ve Rx pinlerinde TTL kullanarak çipe birkaç yolla bağlanabilirsiniz. Bunu görüntüleyen kişilerin, kodu yüklemek için çipe nasıl bağlanacağını bildiklerini umuyorum. Her neyse, devam edin ve bu adıma ekli zip dosyasındaki kodla çipi flaşlayın.

Adım 4: Arduino'yu Hazırlamak

Kodu arduinoya yüklemek için kart tanımınızı Arduino/Genuino Uno olarak değiştirin. Daha sonra bu adıma ekli dosyayı açın. Daha sonra ardunio'ya yükleyin. Oldukça basit gerçekten, tüm zor işler sizin için zaten yapıldı. Zaten bir deneme yanılma sürecinden geçtim, bu yüzden tek yapmanız gereken kodu yüklemek.

Adım 5: Her Şeyi Birlikte Kablolamak

Tamam, kablolama için burada sahip olduklarımın üstünde bir resmim var.

Huzzah üzerindeki Tx'i arduino üzerindeki Pin 2'ye bağlayın. Huzzah üzerindeki Rx'i arduino üzerindeki Pin 3'e bağlayın. Varsayılan Seri Konsolu boşaltmak için arduinodaki 2 ve 3 numaralı pinlerde başka bir seri soket oluşturdum.

Pin V+ ve En'i arduino'dan 5v'ye bağlayın. - Adafruit Huzzah'da yerleşik bir voltaj 3.3v regülatörü vardır, bu nedenle bu pinleri bu şekilde takmak tüm ESP8266 modülleriyle çalışmayabilir. Kendi voltaj regülatörünüzü bağlamanız gerekebilir. Bir şeyin kolayca çalışmasını istiyorsanız Huzzah'ı kullanmanızı tavsiye ederim. GND'yi arduino'nun GND'sine bağlayın

LED'lerinizdeki arduino teli üzerindeki 12, 11, 9, 8 pinlerinde düşük güçlü LED'ler kullandım çünkü çok fazla akım çekenler bu deneyi basit tutmak adına çok fazla güç çekebilir.

Arduino'daki A0 analog Pin 0'dan ziyade Turpitity test cihazımın çıkış hattına taktım. Ancak, size analog bir okuma verecek temel olarak herhangi bir sensörün çıkışını takabilirsiniz. Bunu kablolamak için yapmanız gereken tek şey bu.

Adım 6: Web Sayfasına Erişim

Artık arduino'yu bağladığınıza ve panolarınıza yüklenen her şeye sahip olduğunuza göre, html'yi cep telefonunuzda görüntüleyebilmeniz gerekir. Şimdi sizden, Huzzah'taki kodda SSID ve şifreyi belirlediğiniz aynı wifi yönlendiricisine bağlanmanızı istiyorum. Yönlendiricinizin cihazınıza hangi IP adresini atadığını bulmanız gerekir. Genellikle, yönlendirici yapılandırmanızda oturum açarsanız, bir istemci listesi olmalıdır. Bu, Wifi bağlantınıza bağlı tüm cihazların IP adreslerini gösterir. Ancak bu IP adresini bulamazsanız arduinodan çıkarıp tekrar seri kablo ile çalıştırabilirsiniz. Cihaz üzerinde seri konsolu açarsanız, başka bir şekilde bulamamanız durumunda seri konsoldaki cihaza IP adresini yazdıracaktır. Her neyse, cep telefonunuzla aynı Wifi ağına bağlandığınızda. Ardından mobil web tarayıcınızı Huzzah'ın ip adresine yönlendirin. Hangi muhtemelen buna benzer bir şey görünüyor. https://192.168.0.107 veya çok benzer bir şey. Orada 4 Led'i açıp kapatmanıza ve ayrıca analog sensörün değerini okumanıza izin verecek temel bir sayfa koydum.

7. Adım: Javascipt'i Kullanma

ESP8266Code taslağında index.h isimli dosyada arduino editöründe ayrı bir sekme olarak gelmesi gerekiyor. Burada yaptığım temel örneği görebilirsiniz. Temelde çalışma şekli şu şekildedir.

SetPin(12, 1, 0); SetPin({Pin Numarası}, {Değer 1 Yüksek 0 Düşük}, {IsAnalog 1 Evet 0 Hayır})

Bu, dijital pin 12'nin değerini yüksek olarak ayarlayacaktır.

SetPin(4, 0, 0);

Bu, dijital pin 4'ün değerini düşük olarak ayarlayacaktır.

SetPin(A2, 439, 1) Bu, Analog Pin 2'nin değerini 439'a ayarlayacaktır.

Benzer şekilde, GetJSON işlevi bir pinden istenen bir değeri döndürür ve bunu belirtilen div Id ile bir html öğesi içine yerleştirir.

GetJSON('A0', 1, 'resp_i') GetJSON({Pin Numarası}, {IsAnalog 1 Evet 0 Hayır}, {Sonucu döndürecek HTML Öğesinin Kimliği})

Bu, arduino'ya analog pin 0'ın değerini soran bir istek gönderir ve sonucu resp_iGetJSON(12, 0, 'mydiv'); Bu, arduino'dan dijital pin 0'ın değerini almasını ve sonucu mydiv ve Id ile bir html öğesine döndürmesini isteyecektir.

Adım 8: Destek

Umarım benim senaryom onu kullanmak isteyenlere yardımcı olur. Burada diğer insanların benim yapamadığım tüm yeteneklerini keşfedeceği umuduyla çok basit bir html örneği kullandım. Ancak bu, ajax'ın bir arduino'yu html sayfa yükleri ve bu türden şeyler olmadan kontrol etmek için nasıl kullanılabileceğini göstermelidir.

Herhangi bir yorumunuz varsa, lütfen bana sormaktan çekinmeyin, cevaplamak için elimden gelenin en iyisini yapacağım. Bunun işlevselliğini biraz daha genişletmek isterdim ama zamanım ve param tükendi. Ancak, dosyaları ESP8266 yerine normal bir web sunucusunda depolayan bunun daha sağlam bir uygulaması üzerinde çalışıyorum.

Kodumu görmek için zaman ayırdığınız için teşekkür ederiz.

John Anderson Bana E-posta Gönder

Vermont İnternet Tasarım LLC

www.vermontinternetdesign.com