Muatkan Halaman Web Konfigurasi Arduino / ESP Anda dari Awan: 7 Langkah

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

Semasa membuat projek Arduino / ESP (ESP8266 / ESP32), anda boleh menguraikan semuanya. Tetapi lebih kerap sesuatu tidak muncul dan anda akhirnya akan memasang semula peranti IoT anda ke IDE anda lagi. Atau anda mendapat lebih banyak orang yang mengakses konfigurasi dan anda ingin memberikan UI dan bukannya mengharapkan mereka memahami cara kerja dalaman.

Petunjuk ini akan memberitahu anda bagaimana meletakkan sebahagian besar UI di awan dan bukannya pada Arduino / ESP. Melakukannya dengan cara ini akan menjimatkan penggunaan ruang dan memori. Perkhidmatan yang menyediakan laman web statik percuma sangat sesuai sebagai "cloud", seperti GitHub Pages, tetapi pilihan lain mungkin akan berfungsi juga.

Membangun laman web dengan cara ini memerlukan penyemak imbas pengguna menjalani 4 langkah:

1. Minta url root dari Arduino / ESP
2. Terima laman web yang sangat sederhana, memberitahu kepada:
3. Minta fail JavaScript dari awan
4. Terima kod yang membina halaman sebenar

Instructable ini juga akan menerangkan cara berinteraksi dengan Arduino / ESP setelah halaman siap seperti langkah-langkah di atas.

Kod yang dibuat pada arahan ini boleh didapati di GitHub juga.

Prasyarat

Ini boleh diandaikan dengan andaian anda mendapat akses ke bahan-bahan tertentu dan beberapa pengetahuan sebelumnya:

• Arduino (dengan akses rangkaian) / ESP
• Komputer untuk melampirkan perkara di atas ke
• Akses WiFi disambungkan ke internet
• Arduino IDE dipasang (juga untuk ESP32)
• Anda tahu bagaimana memuat naik lakaran ke peranti IoT anda
• Anda tahu bagaimana menggunakan Git & GitHub

Langkah 1: Bermula Dengan Sketsa Pelayan Web yang Sederhana

Kami akan bermula semudah mungkin, dan biarkan ia berkembang mulai sekarang.

#sertakan

const char * ssid = "yourssid"; const char * kata laluan = "yourpasswd"; Pelayan WiFiServer (80); batal persediaan () {// Permulaan siri dan tunggu port dibuka: Serial.begin (115200); sambil (! bersiri) {; // tunggu port bersambung. Diperlukan hanya untuk port USB asli} WiFi.begin (ssid, password); sementara (WiFi.status ()! = WL_CONNECTED) {kelewatan (500); Cetakan bersiri ("."); } Serial.println ("WiFi disambungkan."); Serial.println ("Alamat IP:"); Serial.println (WiFi.localIP ()); pelayan.begin (); } gelung void () {// dengarkan klien masuk WiFiClient client = server.available (); // dengarkan klien masuk bool sendResponse = false; // tetapkan ke true jika kita mahu menghantar jawapan String urlLine = ""; // buat Rentetan untuk menahan URL yang diminta jika (klien) // jika anda mendapat pelanggan, {Serial.println ("Pelanggan Baru."); // mencetak mesej keluar dari siri siri String currentLine = ""; // buat String untuk menahan data masuk dari klien semasa (client.connected ()) // loop semasa klien terhubung {if (client.available ()) // jika ada bait untuk dibaca dari klien, {char c = client.read (); // baca bait, kemudian jika (c == '\ n') // jika bait adalah watak barisan baru {// jika baris semasa kosong, anda mendapat dua watak barisan berturut-turut. // itulah akhir permintaan HTTP klien, jadi hantarkan respons: if (currentLine.length () == 0) {sendResponse = true; // semuanya baik sahaja! rehat; // keluar dari loop sementara} lain // jika anda mendapat garis baru, kemudian kosongkan currentLine: {if (currentLine.indexOf ("GET /")> = 0) // ini harus menjadi baris URL {urlLine = currentLine; // simpan untuk penggunaan kemudian} currentLine = ""; // reset theLine String}} yang lain jika (c! = '\ r') // jika anda mendapat apa-apa selain watak pengembalian kereta, {currentLine + = c; // tambahkannya ke hujung currentLine}}} jika (sendResponse) {Serial.print ("Pelanggan diminta"); Serial.println (urlLine); // Header HTTP selalu bermula dengan kod respons (mis. HTTP / 1.1 200 OK) // dan jenis kandungan sehingga klien tahu apa yang akan datang, kemudian baris kosong: client.println ("HTTP / 1.1 200 OK"); client.println ("Jenis kandungan: teks / html"); pelanggan.println (); if (urlLine.indexOf ("GET /")> = 0) // jika URL hanya "/" {// kandungan respons HTTP mengikuti tajuk: client.println ("Hello world!"); } // Respons HTTP diakhiri dengan baris kosong lain: client.println (); } // tutup sambungan: client.stop (); Serial.println ("Pelanggan Terputus."); }}

Salin kod di atas, atau muat turun dari komit di GitHub.

Jangan lupa menukar SSID dan kata laluan agar sesuai dengan rangkaian anda.

Lakaran ini menggunakan Arduino yang terkenal

persediaan ()

dan

gelung ()

fungsi. Di dalam

persediaan ()

fungsi sambungan bersiri ke IDE dimulakan dan begitu juga WiFi. Setelah WiFi disambungkan ke SSID tersebut, IP dicetak dan pelayan web dimulakan. Dalam setiap lelaran

gelung ()

fungsi pelayan web diperiksa untuk pelanggan yang disambungkan. Sekiranya pelanggan dihubungkan, permintaan akan dibaca dan URL yang diminta disimpan dalam pemboleh ubah. Sekiranya semuanya kelihatan baik-baik saja, tindak balas dari pelayan kepada pelanggan dilakukan berdasarkan URL yang diminta.

AMARAN! Kod ini menggunakan kelas Arduino String agar mudah. Pengoptimuman rentetan tidak berada dalam ruang lingkup arahan ini. Baca lebih lanjut mengenai ini mengenai petunjuk Manipulasi String Arduino Menggunakan Ram Minimal.

Langkah 2: Membuat JavaScript Jauh

Arduino / ESP akan memberitahu pelayar pelawat untuk memuatkan fail yang satu ini. Selebihnya akan dilakukan dengan kod JavaScript ini.

Dalam Instructable ini kami akan menggunakan jQuery, ini tidak diperlukan sepenuhnya, tetapi akan menjadikan semuanya lebih mudah.

Fail ini perlu diakses dari web, pelayan halaman statik sudah cukup untuk membuat ini berfungsi, misalnya halaman GitHub. Oleh itu, anda mungkin mahu membuat repositori GitHub baru dan membuat

halaman gh

cawangan. Masukkan kod berikut di dalam a

.js

fail di repositori di cawangan yang betul.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (fungsi () {var script = document.createElement ('script'); // buat elemen skrip.src = cdnjsURL + 'jquery / 3.2.1 / jquery.min.js'; // tetapkan src = "" atribut script.onload = function () // callback function, dipanggil setelah fail jquery dimuat {$ = window.jQuery; // jadikan jQuery dapat diakses sebagai $ global init (); // panggil fungsi init}; dokumen. getElementsByTagName ('head') [0].appendChild (script); // tambahkan tag yang dibuat ke dokumen, ini akan mula memuatkan jQuery lib}) (); function init () {// Selesai memuat jQuery, akan menambahkan kod di sini nanti…}

Salin kod di atas, atau muat turun dari komit di GitHub.

Periksa sama ada fail anda boleh diakses. Sekiranya halaman GitHub pergi ke https://username.github.io/repository/your-file.j… (ganti

nama pengguna

,

repositori

dan

fail-fail anda

untuk parameter yang betul).

Langkah 3: Memuatkan Fail Jauh JavaScript ke Penyemak Imbas Pelawat

Sekarang kita sudah siap semuanya, inilah masanya laman web memuatkan fail JavaScript jauh.

Anda boleh melakukannya dengan menukar baris 88 lakaran dari

client.println ("Hello world!"); t

pelanggan.println ("");

(tukar

src

atribut untuk menunjuk ke fail JavaScript anda sendiri). Ini adalah laman web html kecil, yang dilakukannya hanyalah memuatkan fail JavaScript ke pelayar pelawat.

Fail yang diubah juga boleh didapati di komit yang sesuai di GitHub.

Muat naik lakaran yang disesuaikan ke Arduino / ESP anda.

Langkah 4: Menambah Elemen Baru ke Halaman

Halaman kosong tidak berguna, jadi sekarang masanya untuk menambahkan elemen baru ke laman web. Buat masa ini ini akan menjadi video YouTube. Dalam contoh ini, beberapa kod jQuery akan digunakan untuk mencapainya.

Tambahkan baris kod berikut ke

di dalamnya()

fungsi:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({lebar: '608px', tinggi: '342px'}). AppendTo ('body');

Ini akan mewujudkan

iframe

elemen, tetapkan yang betul

src

atribut dan tetapkan ukuran menggunakan css dan tambahkan elemen ke badan halaman.

jQuery membantu kita memilih dan mengubah elemen dengan mudah di laman web, beberapa perkara asas yang perlu diketahui:

• $ ('badan')

• memilih elemen yang sudah ada, pemilih css lain juga boleh digunakan

• $(' ')

  mencipta yang baru

• elemen (tetapi tidak menambahkannya ke dokumen)

• .appendTo ('. utama')

• menambahkan elemen yang dipilih / dibuat ke elemen dengan kelas 'utama' css

• Fungsi lain untuk menambahkan elemen adalah

  .lampirkan ()

  ,

  .pendekkan ()

  ,

  .prependTo ()

  ,

  .sisipkan ()

  ,

  .insertSetelah ()

  ,

  .insertSebelum ()

  ,

  . selepas ()

  ,

  sebelum ()

Lihat komitmen yang sesuai di GitHub jika ada yang tidak jelas.

Langkah 5: Elemen Interaktif

Video memang menyeronokkan, tetapi tujuan pengajaran ini adalah untuk berinteraksi dengan Arduino / ESP. Mari ganti video untuk butang yang menghantar maklumat ke Arduino / ESP dan juga menunggu tindak balas.

Kami memerlukan

$('')

untuk menambah halaman, dan lampirkan pendengar acara di dalamnya. Eventlistener akan memanggil fungsi callback apabila peristiwa yang ditentukan berlaku:

$ (''). teks ('butang'). pada ('klik', fungsi ()

{// kod di sini akan dilaksanakan apabila butang diklik}). appendTo ('body');

Dan tambahkan permintaan AJAX ke fungsi panggilan balik:

$.get ('/ ajax', fungsi (data)

{// kod di sini akan dilaksanakan apabila permintaan AJAX selesai});

Setelah permintaan selesai, data yang dikembalikan akan ditambahkan ke halaman:

$('

'). teks (data).appendTo (' body ');

Ringkasnya, kod di atas membuat butang, menambahkannya ke halaman web, ketika tombol diklik permintaan akan dikirim dan respons juga akan ditambahkan ke halaman web.

Sekiranya ini adalah kali pertama anda menggunakan panggilan balik, anda mungkin ingin memeriksa komit di GitHub untuk melihat bagaimana semuanya bersarang.

Langkah 6: Tindak Balas Elemen Interaktif

Sudah tentu, permintaan AJAX memerlukan tindak balas.

Untuk membuat tindak balas yang betul untuk

/ ajax

url kita perlu menambah

lain jika ()

tepat selepas tanda kurung penutup pernyataan if yang memeriksa

/

url.

lain jika (urlLine.indexOf ("GET / ajax")> = 0)

{client.print ("Hai!"); }

Dalam komit di GitHub saya juga telah menambahkan penghitung untuk menunjukkan penyemak imbas bahawa setiap permintaan adalah unik.

Langkah 7: Kesimpulannya

Inilah akhir pengajaran ini. Anda sekarang mempunyai Arduino / ESP yang menyajikan laman web kecil yang memberitahu penyemak imbas pelawat memuat fail JavaScript dari awan. Setelah JavaScript dimuat, ia akan membina sisa kandungan halaman web yang menyediakan UI untuk pengguna berkomunikasi dengan Arduino / ESP.

Sekarang terserah kepada imaginasi anda untuk membuat lebih banyak elemen di laman web dan menyimpan tetapan secara tempatan pada semacam ROM (EEPROM / NVS / dll).

Terima kasih kerana membaca, dan sila beri maklum balas!