ESP8266 Stesen Cuaca yang Memaparkan Data di Laman Web: 7 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:09

Catatan: Sebahagian dari tutorial ini mungkin tersedia dalam format video di Saluran YouTube saya - Tech Tribe

Dalam arahan ini, saya akan menunjukkan cara membuat stesen cuaca yang secara langsung menghantar data ke laman web anda. Oleh itu, anda memerlukan domain anda sendiri (Cth: msolonko.net). Untuk memulakan, berikut adalah bahan yang anda perlukan:

Item:

Bulu Huzzah ($ 16.95)

Kabel USB mikro dengan Data ($ 1.99)

Pek Bateri ($ 25): Nanti saya akan membincangkan kapasiti yang anda perlukan untuk berapa lama tanpa mengisi semula, jadi anda boleh memilih kapasiti yang anda mahukan. Ini adalah pautan ke yang saya gunakan. Anda juga boleh menggunakannya dari outlet.

1 Fotoresistor

Beberapa perintang lain - dibincangkan kemudian

Kawat

Perf Board ($ 5.59) - Pek 20

Sensor Suhu, Tekanan, dan Kelembapan BME280 ($ 9,99)

Sejenis kotak; anda boleh mencetak 3D, dan saya akan menunjukkan reka bentuk saya.

Webhosting dan domain, jika anda ingin mengikuti sepenuhnya tutorial

Alat:

Pemotong wayar

Besi pematerian

Langkah 1: Kod Huzzah Bulu

Kodnya akan ditulis dalam Arduino IDE, yang boleh dimuat turun di sini. Sebelum kita mulakan, ikuti petunjuk di sini untuk menyiapkan Arduino IDE untuk bekerjasama dengan Feather Huzzah anda. Juga, ikuti arahan ini untuk memuat turun perpustakaan yang diperlukan agar sensor BME berfungsi. Fail kod dilampirkan, dan semua kodnya dikomentari sehingga anda dapat memahaminya. Setelah anda melihatnya, teruskan ke langkah seterusnya di mana kita akan melihat kod yang menerima data sensor.

Langkah 2: Menerima Data Dari Fezz Huzzah

Sekarang, semoga anda memahami bagaimana kod Arduino berfungsi. Sekiranya tidak, kembali ke kod dan baca komen saya (saya memberi komen hampir di setiap baris). Sekarang kita akan menulis kod yang menerima data. Seperti sebelumnya, semuanya dikomen. Bahasa pengaturcaraan yang digunakan untuk ini adalah PHP, yang boleh anda baca lebih lanjut di sini.

Data kami akan disimpan di Pangkalan Data MySQL, yang boleh anda baca lebih lanjut di sini. Data disimpan dalam jadual yang mempunyai baris dan lajur. Sebelum menulis kod, kita harus membuat struktur jadual kita di cPanel hosting kita. Saya menggunakan Arvixe Hosting, jadi cPanel anda mungkin kelihatan berbeza. Rujuk salah satu gambar untuk melihat rupa bahagian saya. Pertama, anda ingin membuat pangkalan data MySQL baru jika anda belum memilikinya. Anda boleh menggunakan wizard untuk itu. Terdapat banyak sumber dalam talian mengenai perkara ini jika anda memerlukan bantuan.

Setelah anda menyediakan pangkalan data, pergi ke phpMyAdmin dan pilih pangkalan data anda. Buat jadual bernama weather_data dengan 9 lajur. Rujuk salah satu gambar saya di atas untuk melihat setiap lajur (salin nama, jenis data, dan semua yang lain dengan tepat jika anda mahu menggunakan kod saya). Kaunter akan menjadi kunci utama kami dan id akan membantu kami mengenal pasti hari apa data berkenaan dilakukan (1: hari ini, 2: semalam, 3: yang lain). Oleh kerana kami akan mempunyai banyak data, kami akan menghapuskan beberapa data seiring bertambahnya usia. Itulah sebabnya mengapa kita memerlukan lajur id. Lajur selebihnya cukup jelas. Sekarang, jadual anda di dalam pangkalan data anda akan kelihatan seperti jadual saya.

Sekarang, muat turun kod yang dilampirkan dan baca serta komen saya. Setelah selesai, teruskan ke langkah seterusnya.

Catatan: semasa anda memuat turun kod, namakan semula menjadi esp.php. Atas sebab tertentu, saya mendapat ralat semasa mencuba memuat naik fail PHP.

Ini pada dasarnya adalah bagaimana kod tersebut akan berfungsi.

1. Kumpulkan data setiap 10 minit dan paparkan

2. Setelah sehari berlalu, rata-rata setiap 6 nilai (untuk menjimatkan ruang DB) sehingga ada titik data untuk setiap jam

3. Setelah satu hari berlalu, rata-rata semua data yang tinggal untuk hari itu dan simpan sebagai satu titik data sahaja

Dengan cara ini, kita akan dapat melihat turun naik cahaya, suhu dan lain-lain sepanjang jangka waktu bulan tanpa mula terganggu oleh turun naik suhu, cahaya, dll.

Langkah 3: Mengambil Data Dari Pangkalan Data ke Paparan

Jadi sekarang kami telah mengetahui cara mengumpulkan data cuaca dan memuat naiknya ke pangkalan data kami. Sekarang kita mesti dapat mengambilnya dalam bentuk yang boleh digunakan. Seperti sebelumnya, saya melampirkan fail PHP getWeatherData.txt yang harus anda simpan ke hos anda dan menukar pelanjutan nama fail menjadi.php dan bukannya.txt. Semua kod dikomen. Baca terus untuk memahaminya dan teruskan setelah anda fikir anda sudah memahaminya. Sekiranya anda mempunyai soalan, sila bertanya di bawah.

Langkah 4: Persediaan Perpustakaan dan Beberapa Perkara Lain

Untuk projek ini, salah satu kerangka kerja yang akan kami gunakan adalah AngularJS, yang akan membantu kami berkomunikasi dengan pangkalan data dan membina SPA (Aplikasi Halaman Tunggal). Untuk mendapatkan perpustakaan, pergi ke pautan ini dan muat turun versi 1.64 atau lebih tinggi. Untuk tutorial ini, saya menggunakan 1.64 tetapi versi baru sering dikeluarkan sehingga anda boleh menggunakan yang lain. Cari pautan di halaman yang berakhir seperti ini: / VERSION/angular.min.js

Salin pautan dan simpan di tempat yang selamat. Kami baru sahaja mendapat pautan untuk perpustakaan AngularJS. Anda memerlukannya untuk langkah seterusnya. Sekarang, di halaman yang sama cari pautan yang kelihatan seperti ini dan salin juga: / VERSION/angular-route.min.js

Laluan sudut akan membantu kami menguruskan SPA kami dan menangani pertukaran pandangan di halaman.

Kami mahu dapat memaparkan carta data kami dengan baik. Untuk ini, kami akan menggunakan perpustakaan bernama ChartJS. Pergi ke sini, pilih versi terkini dan simpan pautan yang berakhir seperti ini: VERSI / Chart.bundle.min.js

Akhirnya, kami akan menggunakan perpustakaan untuk menyusun halaman yang disebut Bootstrap. Pergi ke pautan ini ke Mula Pantas dan biarkan sekarang terbuka. Setelah kami mula menulis kod pelanggan, anda akan dapat menggantikan pautan lama saya dengan versi yang lebih baru.

Sekarang, kita harus menetapkan pandangan yang berbeza untuk aplikasi kita. Di direktori di host anda di mana anda mempunyai dua fail sebelumnya (esp.php dan getWeatherData.php), buat folder baru bernama weather_views. Di sini, kami akan meletakkan semua halaman kami yang masing-masing akan sesuai dengan id dari pangkalan data kami (1, 2, atau 3).

Dalam folder, buat 3 fail (day.html, old.html, dan semalam.html). Muat turun kod yang dilampirkan dan masukkan ke dalam fail tersebut. Kod untuk DAY. HTML dikomentari supaya anda dapat memahami apa yang berlaku. Kod untuk 2 halaman lain pada dasarnya sama (bahagian yang berbeza dalam old.html dikomentari).

Setelah anda selesai dengan langkah ini, teruskan ke langkah seterusnya, yang merupakan langkah pengaturcaraan yang paling sukar.

Langkah 5: Fail HTML Utama

Dalam langkah ini, anda akan membuat / mengedit / membaca fail HTML utama di mana anda akan memaparkan semuanya. Simpan fail yang dilampirkan (yang, seperti biasa, dikomentari) sebagai espdata.html dalam direktori yang sama dengan esp.php. Saya harap anda dapat membuat beberapa perubahan dan memahami apa yang sebenarnya berlaku.

Ini adalah sebahagian besar kod anda, jadi sangat penting untuk memahami apa yang sedang berlaku.

Langkah 6: Ujian Pendawaian di Breadboard

Sekarang kita akan menguji bahawa semua kod berfungsi dengan perkakasan kita. Sekiranya anda belum melakukannya, pin header solder pada Feather Huzzah dan sensor BME280. Untuk setiap langkah, gambar dilampirkan.

1. Letakkan bulu di papan roti. Sambungkan 3V ke rel + dan GND ke - rel.

2. Sambungkan sensor VIN ke rel + dan GND ke - rel.

3. Sambungkan sensor SDA ke pin 4 pada bulu. Sambungkan SCL ke pin 5.

4. Letakkan fotoresistor di papan roti dengan satu plumbum menuju ke rel +.

5. Sambungkan perintang 4.7k ke plumbum photoresistor yang tidak bersambung. Sambungkan plumbum 4.7k yang tidak bersambung ke perintang 2k. Sambungkan hujung perintang 2k yang tidak tersambung ke - rel (GND).

6. Sambungkan sambungan perintang 4.7k dan 2k ke pin ADC (pin analog). Kami baru sahaja membuat pembahagi voltan yang membahagi voltan maksimum yang dibaca oleh pin dari 3.3V hingga kurang daripada 1V. Anda boleh bermain dengan kombinasi anda sendiri jika anda mahu tetapi perlu diingat bahawa voltan yang diberikan pada pin analog mestilah kurang dari 1V.

7. Akhirnya, sambungkan pin RST (reset) pada bulu ke pin 16 pada bulu (wayar oren dalam foto). Konfigurasi ini membolehkan Feather Huzzah memasuki mod tidur dalam untuk menjimatkan kuasa.

Sekarang anda sudah selesai! Muat naik kod ke huzzah bulu anda, dan mudah-mudahan, anda dapat melihat kemas kini halaman web anda (hanya halaman day.html). Sekiranya tidak, cuba gunakan monitor Serial untuk menyelesaikan masalah atau tanya di komen di bawah.

Langkah 7: Projek Tetap (Pilihan)

Dengan andaian semuanya berfungsi, jika anda mahu, anda boleh menjadikan projek ini lebih kekal. Saya tidak akan menunjukkannya di sini, tetapi anda boleh memasukkan semua komponen ke papan perf dan kemudian memasukkannya ke dalam bekas. Saya akan melampirkan fail IPT untuk bekas 3D yang saya gunakan di bawah ini dan beberapa foto untuk memulakan anda. Bekas itu dimaksudkan untuk inspirasi kerana anda mungkin ingin menjadikannya lebih peribadi dengan reka bentuk dan teks yang berbeza. Bersenang-senang dengan penyesuaian! Semoga berjaya!