Mengendalikan Arduino Anda Dengan HTML / Javascript Cara Mudah: 8 Langkah

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

Tutorial ini menunjukkan kepada anda cara mengawal arduino dengan panggilan balik ajax dari adzruit Huzzah dengan hanya menggunakan fungsi javascript. Pada dasarnya anda boleh menggunakan javascript di halaman html yang akan membolehkan anda menulis antaramuka html dengan mudah dengan fungsi javascript sederhana yang menggunakan panggilan balik ajax. Untuk membolehkan ESP8266 berkomunikasi dengan arduino. Oleh itu, semua pin boleh ditetapkan dari fungsi javascript. Begitu juga, kita juga dapat membaca nilai dari pin mana pun menggunakan fungsi javascript. Saya harap ini membantu mempermudah pengendalian arduino dari dokumen html. Saya fikir terdapat banyak orang di luar sana yang boleh menulis html. Sebilangan besar dari mereka tidak mahu bersusah payah membuat aplikasi telefon bimbit dengan java atau xcode atau beberapa kerangka lain. Ini akan memudahkan orang kerana semua yang perlu mereka lakukan adalah menggunakan fungsi javascript untuk menetapkan dan membaca nilai dari pin. Contohnya, bukankah lebih mudah untuk menulis

Hidupkan

Untuk menghidupkan butang. Keindahannya adalah bahawa tidak ada pengaturcaraan arduino lain yang terlibat selain untuk menyatakan pinMode (12, INPUT); Dalam fungsi persediaan anda. Selagi pin dinyatakan daripada javascript boleh digunakan untuk semua yang lain.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Ini semua yang perlu anda lakukan untuk mendapatkan nilai pin analog 0 dan mengembalikan hasilnya ke div. Jadi ini harus menjadi cara mudah bagi orang untuk dapat membuat halaman html yang mengawal arduino. Serta membuat antara muka sehingga pin arduino dapat diset dan dibaca dengan javascript.

Langkah 1: Apa yang Anda Perlu

Saya membina projek ini untuk pengguna yang ingin mengawal arduino mereka dengan halaman html pada ESP8266. Matlamat projek ini adalah untuk membuat kaedah mudah untuk menetapkan nilai pin pada arduino anda dengan fungsi javascript. Untuk contoh onclick = "SetPin (12, 1, 0)" akan menetapkan Pin 12 pada arduino anda ke Tinggi.

Untuk tutorial ini, anda memerlukan item berikut untuk mengikutinya dengan tepat. Walau bagaimanapun, saya menganggap bahawa ia mesti berfungsi pada kebanyakan kombinasi arduino dan ESP8266. Walau bagaimanapun, untuk mengikuti apa yang saya ada di sini, anda memerlukan komponen berikut.

Arduino Uno - Harus bekerja dengan mana-mana arduino yang mempunyai siri Rx TxAdafruit Huzzah Breakout Board USB To Serial Cable 4 LED low power LED Analog Turpidity - sebarang sensor analog yang memberikan output analog akan melakukan Wire Wifi Router Cell Phone With Mobile Browser Arduino Library.

Langkah 2: Menyiapkan ID Arduino

Projek ini memerlukan perpustakaan arduino baru dan beberapa konfigurasi dan demi masa. Saya tidak akan meletakkan tangkapan layar setiap skrin dan saya hanya akan menjalankan perkara yang anda perlukan untuk mengkonfigurasi ini dan menjalankannya. Saya cuba membuatnya semudah mungkin bagi pengguna.

Kod tersebut menggunakan sebilangan perpustakaan untuk mula berfungsi. Mula-mula kita akan menumpukan pada penyediaan arduino untuk ESP8266 Saya menggunakan Adafruit Huzzah dalam contoh ini, kerana saya mendapati produk adafruit adalah yang paling dipercayai dan mendapat sokongan terbaik. Selagi anda tidak cuba mendapatkan sokongan dari pelayan Adafruit Discord. Anda akan mendapat lebih banyak keberuntungan untuk mendapatkan bantuan di forum sokongan.

Bagaimanapun, saya menggunakan perpustakaan berikut di ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONIni bukan tutorial mengenai cara memuat turun dan memasang perpustakaan namun, ini adalah perpustakaan yang digunakan di HUZZAH. Oleh itu, sila cari dan pasangkannya. Anda juga perlu memasang definisi papan untuk HUZZAH jadi jika anda pergi ke FILE> Keutamaan Di dalam kotak yang mengatakan URL Pengurus Papan Tambahan, sila tambahkan yang berikuthttps://arduino.esp8266.com/stable/package_esp8266c… jika anda sudah mempunyai sesuatu dalam bidang ini, daripada pastikan anda menambahkan koma di sana untuk menambahkan url papan tambahan. Klik ok sahaja

Alat> Papan> Pengurus Papan Daripada mencari ESP8266 daripada memasang ESP8266 oleh ESP8266 Komuniti.

Hebat sekarang, pastikan kita mempunyai semua yang kita perlukan agar kod arduino berfungsi. One the arduino Side the arduino sendiri hanya menggunakan 2 perpustakaan untuk tutorial ini.

SoftwareSerialArduinoJSONApa yang sepatutnya anda miliki.

Langkah 3: Menyiapkan ESP8266

Sekarang kita akan memasukkan kod ke ESP8266 (Adafruit HUZZAH) dan menyiapkannya untuk menyambung ke Arduino. Buka zip kod untuk HUZZAH dan buka lakaran. Pada baris 11 dan 12 ubah ssid dan kata laluan ke sambungan WIFI anda di rangkaian tempatan anda. Anda akan melihat bahawa terdapat 2 fail fail lakaran dan fail index.h. Fail index.h adalah tempat penyimpanan html yang akan dipaparkan di telefon anda.

Setelah anda menetapkan SSID dan kata laluan yang betul ke wifi anda, anda dapat menyusun kod dan memuatkannya ke ESP8266 anda. Pada HUZZAH anda mesti menekan Butang berlabel GPIO0 kemudian klik butang rehat, daripada melepaskan butang GPIO0 untuk memasukkan cip ke dalam mod pemuat but. Sekiranya cip berjaya dimasukkan ke dalam mod pemuat but, lampu merah akan menyala menunjukkan bahawa cip tersebut berada dalam mod pemuat but.

Untuk menyambung ke ESP8266, anda memerlukan kabel bersiri atau penyesuai USB ke Serial, atau cip FDTI. Dalam kes ini, saya menggunakan kabel adafruit seperti yang dinyatakan dalam arahan. Walau bagaimanapun, anda boleh menghubungkan cip dengan beberapa cara, menggunakan TTL pada pin Tx dan Rx. Yang saya harapkan agar orang yang melihat ini tahu bagaimana menghubungkan cip untuk memuatkan kod di atasnya. Bagaimanapun teruskan kilat cip dengan kod dalam fail zip yang dilampirkan pada langkah ini.

Langkah 4: Menyiapkan Arduino

Untuk memuatkan kod ke arduino, ubah definisi papan anda ke Arduino / Genuino Uno. Daripada unzip fail yang dilampirkan pada langkah ini. Daripada memuat naiknya ke ardunio. Cukup sederhana, semua kerja keras telah dilakukan untuk anda. Saya telah melalui proses percubaan dan melakukan kesalahan kerana yang perlu anda lakukan ialah memuat naik kod.

Langkah 5: Pendawaian Semuanya Bersama

Baiklah untuk pendawaian saya mempunyai gambar di atas dari apa yang saya ada di sini.

Sambungkan Tx di Huzzah ke Pin 2 di arduino. Sambungkan Rx di Huzzah ke Pin 3 di arduino. Saya membuat soket bersiri lain pada pin 2 dan 3 di arduino untuk membebaskan Serial Console lalai.

Sambungkan Pin V + dan En ke 5v dari arduino. - Adzruit Huzzah mempunyai pengatur voltan 3.3v terpasang sehingga memasang pin ini seperti ini mungkin tidak berfungsi dengan semua modul ESP8266. Anda mungkin perlu memasukkan kabel pengatur voltan anda sendiri. Saya mengesyorkan menggunakan Huzzah jika anda hanya mahu perkara itu berfungsi dengan mudah. Sambungkan GND ke GND arduino

Pada pin 12, 11, 9, 8 pada wayar arduino di LED anda, saya menggunakan LED berkuasa rendah di sini kerana lampu yang terlalu banyak arus boleh menarik terlalu banyak kuasa untuk memastikan percubaan ini mudah.

Daripada pin 0 analog A0 pada arduino, saya telah memasang barisan output penguji Turpitity saya. Walau bagaimanapun, anda boleh memasukkan output pada dasarnya sebarang sensor yang akan memberi anda bacaan analog. Itu sahaja yang perlu anda lakukan untuk menyelesaikannya.

Langkah 6: Mengakses Laman Web

Sekarang setelah anda menggunakan arduino dan memuatkan semua perkara ke papan anda, anda perlu dapat melihat html di telefon bimbit anda. Sekarang saya mahu anda menyambung ke penghala wifi yang sama dengan yang anda tetapkan SSID dan kata laluan dalam kod di Huzzah. Daripada anda perlu mengetahui alamat IP apa yang diberikan oleh penghala ke peranti anda. Biasanya, jika anda masuk ke konfigurasi router anda mesti ada senarai pelanggan. Itu menunjukkan alamat IP semua peranti yang disambungkan ke sambungan Wifi anda. Walau bagaimanapun, jika anda tidak dapat mencari alamat IP ini daripada anda boleh mencabutnya dari arduino dan jalankannya lagi dengan kabel bersiri. Sekiranya anda membuka konsol bersiri pada peranti, ia akan mencetak alamat IP ke peranti di konsol bersiri sekiranya anda tidak dapat mencarinya dengan cara lain. Bagaimanapun apabila anda disambungkan ke rangkaian Wifi yang sama dengan telefon bimbit anda. Daripada arahkan penyemak imbas web mudah alih anda ke alamat ip Huzzah. Yang mungkin kelihatan serupa dengan ini. https://192.168.0.107 atau sesuatu yang serupa. Di sana saya memasukkan halaman asas yang membolehkan anda menghidupkan dan mematikan 4 Leds serta membaca nilai sensor analog.

Langkah 7: Menggunakan Javascipt

Dalam fail yang disebut index.h dalam sketsa ESP8266Code, ia akan muncul sebagai tab berasingan di editor arduino. Anda dapat melihat contoh asas yang saya buat di sini. Pada dasarnya cara kerjanya adalah seperti ini.

SetPin (12, 1, 0); SetPin ({Pin Number}, {Nilai 1 Tinggi 0 Rendah}, {IsAnalog 1 Ya 0 Tidak})

Ini akan menetapkan nilai pin digital 12 menjadi tinggi

SetPin (4, 0, 0);

Ini akan menetapkan nilai pin digital 4 menjadi rendah

SetPin (A2, 439, 1) Ini akan menetapkan nilai Pin Analog 2 hingga 439

Begitu juga, fungsi GetJSON akan mengembalikan nilai yang diminta dari pin dan meletakkannya ke dalam html yang disertakan dengan Id Id yang ditentukan.

GetJSON ('A0', 1, 'resp_i') GetJSON ({Pin Number}, {IsAnalog 1 Yes 0 No}, {Id Of HTML Element untuk mengembalikan hasil})

Ini akan menghantar permintaan ke arduino yang meminta nilai pin analog 0 dan mengembalikan hasilnya ke Div dengan ID resp_iGetJSON (12, 0, 'mydiv'); Ini akan meminta arduino mendapatkan nilai pin digital 0 dan mengembalikan hasilnya menjadi elemen html dengan dan Id mydiv

Langkah 8: Sokongan

Saya harap skrip saya dapat membantu anda yang mahu menggunakannya. Saya menggunakan contoh html yang sangat asas di sini dengan harapan orang lain akan meneroka semua kemampuannya yang saya tidak dapat. Walau bagaimanapun, ini harus menunjukkan bagaimana ajax dapat digunakan untuk mengendalikan arduino tanpa memuatkan halaman html dan perkara-perkara yang seumpamanya.

Sekiranya anda mempunyai komen, sila tanya saya, saya akan berusaha sebaik mungkin untuk menjawabnya. Saya ingin mengembangkan lagi fungsi ini, tetapi saya kehabisan masa dan wang. Walau bagaimanapun, saya sedang mengusahakan pelaksanaan yang lebih mantap, iaitu menyimpan fail pada pelayan web biasa dan bukannya pada ESP8266.

Terima kasih kerana meluangkan masa untuk melihat kod saya.

John AndersonEmail Saya

Reka Bentuk Internet Vermont LLC

www.vermontinternetdesign.com