NodeMCU ile Web Üzerinden Gerçek Zamanlı Grafik Çizdirme

Bu projede NTC sıcaklık sensörü ve MPU6050 Gyro modülünden veri okuyup gerçek zamanlı olarak okunan verileri NodeMCU içinde oluşturacağımız bir web server üzerinden yayında olacak bir web sayfasında canlı olarak grafiğe dökeceğiz. 

Öncelikle ihtiyacımız olacak temel malzemelerin listesini çıkaralım.

• ESP8266 NodeMCU DevKit
• 10k NTC Sıcaklık Sensörü
• MPU6050 Gyro Modülü
• 10kΩ Direnç

Gerekli malzemelerimizi hazır ettikten sonra devre kurma aşamasına geçebiliriz. Devremizi görseldeki şemaya uygun şekilde kuralım. Devreyi breadboard üzerine kurmak isteyenler için şema hemen aşağıda.

Şemadan anlaşılamama ihtimaline karşı tabloda MPU6050 bağlantılarını verdim. ÖNEMLİ! Gyro modülünün headerları lehimli olmalı, yoksa temassızlık sebebiyle veri akışı düzgün olmayacağından ötürü sağlıklı çalışmayacaktır. Hatta bu temassızlıklar kalıcı hasarlara dahi sebep olabilir. Lütfen dikkat! Ayrıca NTC bağlantısı da şemada nasıl gösterildiyse öyle olmalı.

Devreyi breadboard üzerinde kurmak istemeyenler için ise aşağıdaki şemayı hazırladım. Devrede harici güç kaynağı kullanılacağı varsayılmış ve şema ona göre çizilmiştir. Tercihen 7805’in çıkışına küçük bir filtre kapasitörü konulması gelen voltajın kararlılığını artıracaktır.

Devre kurulumu tamamlandıktan sonra yazılım aşamasına geçebiliriz. Öncelikle Arduino IDE üzerinden doğru kart versiyonunu, yani 2.6.0’ı seçmeliyiz. Maalesef kod güncel versiyonlarda çalışmıyor, bu konuda çalışmalarım sürmekte. Eğer sorunun nasıl çözülebileceği hakkında bilginiz varsa burada bir issue açtım, katkıda bulunabilirsiniz 🙂 Sorun çözüldüğünde yazı ve GitHub reposu da güncellenecektir. 2.6.0 versiyonunu seçtikten sonra ise koda ve projenin tamamına https://github.com/prdsmehmetstc/NodeMCU-Data-Graphing-on-Web/tree/master adresinden ulaşabilirsiniz. Kart versiyonunu değiştirmek için Araçlar > Kart > Kart Yöneticisi yolunu izleyerek en altta bulunan esp8266’nın “Versiyon Seç” bölümünden 2.6.0’ı seçmelisiniz. İşlemin sonucu görseldeki gibi görünmeli.

Kodu indirdikten sonra Arduino IDE ile açın. Karşınıza görseldeki gibi bir görüntü olmalı.

Kodu açtıktan sonra yüklemeden önce 51. ve 52. satırdaki kablosuz ağ bilgilerini değiştirmeyi unutmayın! Bilgilerinizi girdikten sonra yükleme esnasında herhangi bir hatayla karşılaşmamanız için yüklemeden önce kartın tüm pinlerini boşta bırakmanızda yarar var. Yükleme işlemi tamamlandıktan sonra ise Arduino IDE’nin sağ üst köşesinde bulunan butona tıklayarak seri portu açın. Orada NodeMCU’nuzun IP adresini göreceksiniz. Adresi seçip CTRL+C tuş kombinasyonu ile kopyaladıktan sonra tarayıcınızı açın ve adres çubuğuna yapıştırın.

Tarayıcınızda artık verileri görmeye başlayabilirsiniz. Proje bu kadar ile sınırlı değil, gelişime açık 🙂 index.h dosyasında değiştirebileceğiniz parametreleri de anlatacağım.

Şimdi kodu tekrar açıp index.h sekmesine gelelim. Eğer temel bir HTML bilginiz varsa işiniz daha da kolay olacaktır. Burada sadece grafiğe dair parametreler anlatılacaktır.

72. satıra gelin. 72. ve 119. satırlar arasındaki parametreler grafiğimiz ile yakından alakalı. Buradan renkleri, adları, grafik doldurma gibi detayları değiştirebilirsiniz. Renkler RGBA standardına göredir. Her label’a özel parametreler tanımlı. backgroundColor parametresi grafik üstündeki noktaların rengini belirtir. borderColor parametresi ise çizgi rengini belirtir. fill, yani doldurma varsayılan olarak kapalı gelmekte. Ancak denemenizi öneririm 🙂 İhtiyacınıza göre gerekli değişiklikleri yapabilirsiniz.

Ayrıca 130. satırda bulunan tension parametresiyle grafiğin kavisliği ile oynayabilirsiniz. 152. satırda bulunan değer ise yenileme birim zamanıdır. Bu süreyi değiştirerek yenileme hızınızı artırabilir veya azaltabilirsiniz. Ancak yenileme hızı artarsa NodeMCU bir süre sonra yavaşlamaya başlayacaktır, buna dikkat edin. Bu parametrelerin değişimi sonrası sonuçları sizin keşfinize bırakıyorum 🙂

Proje geliştirmeye açıktır, ve dilediğiniz gibi kullanabilirsiniz 🙂 Katkı sağlamak isterseniz lütfen GitHub reposunu ziyaret edin.