Mengontrol Arduino Anda Dengan HTML/Javascript dengan Cara Mudah: 8 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:57

Tutorial ini menunjukkan cara mengontrol arduino dengan panggilan balik ajax dari adafruit Huzzah hanya menggunakan fungsi javascript. Pada dasarnya Anda dapat menggunakan javascript di halaman html yang memungkinkan Anda untuk dengan mudah menulis antarmuka html dengan fungsi javascript sederhana yang memanfaatkan panggilan balik ajax. Untuk memungkinkan ESP8266 berkomunikasi dengan arduino. Oleh karena itu, semua pin dapat diatur dari fungsi javascript. Demikian juga, kita juga dapat membaca nilai dari pin apa pun menggunakan fungsi javascript. Saya harap ini membantu untuk mempermudah mengontrol arduino dari dokumen html. Saya pikir ada banyak orang di luar sana yang bisa menulis html. Kebanyakan dari mereka tidak mau repot mencoba membuat aplikasi ponsel dengan java atau xcode atau framework lainnya. Ini akan sangat memudahkan orang karena yang perlu mereka lakukan hanyalah menggunakan fungsi javascript untuk mengatur dan membaca nilai dari pin. Misalnya, bukankah lebih mudah untuk menulis

Menyalakan

Untuk mengaktifkan tombol. Keindahannya adalah tidak ada pemrograman arduino lain yang terlibat selain mendeklarasikan pinMode(12, INPUT); Dalam fungsi pengaturan Anda. Selama pin dideklarasikan maka javascript dapat digunakan untuk yang lainnya.

dokumen.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 mengontrol arduino. Serta membuat interface agar pin arduino dapat diatur dan dibaca dengan javascript.

Langkah 1: Apa yang Anda Butuhkan

Saya membangun proyek ini untuk pengguna yang ingin mengontrol arduino mereka dengan halaman html di ESP8266. Tujuan dari proyek ini adalah untuk membuat metode sederhana untuk mengatur nilai pin pada arduino Anda dengan fungsi javascript. Misalnya onclick="SetPin(12, 1, 0)" akan menyetel Pin 12 pada arduino Anda ke Tinggi.

Untuk tutorial ini Anda akan membutuhkan item berikut untuk mengikuti dengan tepat. Namun, saya menganggap itu harus bekerja pada sebagian besar kombinasi arduino dan ESP8266. Namun, untuk mengikuti apa yang saya miliki di sini, Anda memerlukan komponen berikut.

Arduino Uno - Harus bekerja dengan semua arduino compatiable yang memiliki serial Rx TxAdafruit Huzzah Breakout Board USB To Serial Cable 4 testor Analog Turpidity LED daya rendah - setiap sensor analog yang menyediakan output analog akan melakukan Wire Wifi Router Cell Phone Dengan Mobile Browser Arduino Libraries.

Langkah 2: Mempersiapkan ID Arduino

Proyek ini membutuhkan perpustakaan arduino baru dan beberapa konfigurasi dan demi waktu. Saya tidak akan memasukkan sreenshot dari setiap layar dan saya hanya akan menjalankan apa yang Anda perlukan untuk mengonfigurasi ini dan menjalankannya. Saya mencoba membuatnya semudah mungkin bagi pengguna.

Kode menggunakan sejumlah perpustakaan untuk bekerja. Pertama kita akan fokus pada pengaturan arduino untuk ESP8266 Saya menggunakan Adafruit Huzzah dalam contoh ini, karena menurut saya produk adafruit paling dapat diandalkan dan memiliki dukungan terbaik. Selama Anda tidak mencoba untuk mendapatkan dukungan dari server Adafruit Discord. Anda akan lebih beruntung mendapatkan bantuan di forum dukungan.

Bagaimanapun, saya menggunakan perpustakaan berikut di ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONIni bukan tutorial tentang cara mengunduh dan menginstal pustaka, namun ini adalah pustaka yang digunakan di HUZZAH. Jadi silakan temukan dan instal. Anda juga perlu menginstal definisi papan untuk HUZZAH jadi jika Anda pergi ke FILE> Preferences Di kotak yang mengatakan URL Pengelola Papan Tambahan, silakan tambahkan berikut ini https://arduino.esp8266.com/stable/package_esp8266c…jika Anda sudah memilikinya sesuatu di bidang ini, daripada pastikan Anda menambahkan koma di sana untuk menambahkan url papan tambahan. Klik ok itu pergi

Tools>Board>Boards Manager Daripada mencari ESP8266 daripada menginstal ESP8266 oleh Komunitas ESP8266.

Hebat sekarang mari kita pastikan kita memiliki semua yang kita butuhkan untuk membuat kode arduino berfungsi. Satu Sisi arduino arduino sendiri hanya menggunakan 2 perpustakaan untuk tutorial ini.

SoftwareSerialArduinoJSONYang seharusnya sudah Anda miliki.

Langkah 3: Mempersiapkan ESP8266

Sekarang kita akan memasukkan kode ke ESP8266 (Adafruit HUZZAH) dan menyiapkannya untuk terhubung ke Arduino. Buka zip kode untuk HUZZAH dan buka sketsanya. Pada baris 11 dan 12 ubah ssid dan kata sandi menjadi koneksi WIFI Anda di jaringan lokal Anda. Anda akan melihat bahwa ada 2 file file sketsa dan file index.h. File index.h adalah tempat menyimpan html yang akan ditampilkan di ponsel Anda.

Setelah Anda mengatur SSID dan kata sandi yang benar untuk wifi Anda, Anda dapat mengkompilasi kode dan memuatnya ke ESP8266 Anda. Pada HUZZAH Anda harus menahan Tombol berlabel GPIO0 lalu klik tombol istirahat, lalu lepaskan tombol GPIO0 untuk memasukkan chip ke mode bootloader. Jika chip telah berhasil masuk ke mode bootloader maka lampu merah akan menyala menandakan chip dalam mode boot loader.

Untuk menyambungkan ke ESP8266, Anda memerlukan kabel serial atau adaptor USB ke Serial, atau chip FDTI. Dalam hal ini saya menggunakan kabel adafruit seperti yang tercantum dalam instruksi. Namun, Anda dapat menghubungkan ke chip dengan beberapa cara, menggunakan TTL pada pin Tx dan Rx. Yang saya harap orang-orang yang melihat ini tahu cara menghubungkan ke chip untuk memuat kode di atasnya. Bagaimanapun, lanjutkan dan flash chip dengan kode dalam file zip yang dilampirkan pada langkah ini.

Langkah 4: Mempersiapkan Arduino

Untuk memuat kode ke arduino, ubah definisi papan Anda ke Arduino/Genuino Uno. Dari unzip file yang dilampirkan pada langkah ini. Kemudian unggah ke ardunio. Cukup sederhana, semua kerja keras telah dilakukan untuk Anda. Saya sudah melalui proses trial and error jadi yang harus Anda lakukan adalah mengunggah kodenya.

Langkah 5: Menghubungkan Semuanya Bersama

Ok jadi untuk pengkabelan saya punya gambar di atas dari apa yang saya miliki di sini.

Hubungkan Tx di Huzzah ke Pin 2 di arduino. Hubungkan Rx di Huzzah ke Pin 3 di arduino. Saya membuat soket serial lain pada pin 2 dan 3 pada arduino untuk membebaskan Konsol Serial default.

Hubungkan Pin V+ dan En ke 5v dari arduino. - Adafruit Huzzah memiliki regulator tegangan 3.3v bawaan sehingga memasukkan pin ini seperti ini mungkin tidak berfungsi dengan semua modul ESP8266. Anda mungkin perlu memasang pengatur tegangan Anda sendiri. Saya sarankan menggunakan Huzzah jika Anda hanya ingin membuatnya bekerja dengan mudah. Hubungkan GND ke GND arduino

Pada pin 12, 11, 9, 8 pada kabel arduino di LED Anda, saya menggunakan LED berdaya rendah di sini karena yang menarik terlalu banyak arus dapat menarik terlalu banyak daya demi menjaga eksperimen ini tetap sederhana.

Dari pada A0 analog Pin 0 pada arduino saya telah terpasang di jalur output tester Turpitity saya. Namun, pada dasarnya Anda dapat mencolokkan output dari sensor apa pun yang akan memberi Anda pembacaan analog. Hanya itu yang perlu Anda lakukan untuk menghubungkan ini.

Langkah 6: Mengakses Halaman Web

Sekarang Anda memiliki arduino yang terhubung dan Anda memiliki semua yang dimuat ke papan Anda, Anda harus dapat melihat html di ponsel Anda. Sekarang saya ingin Anda terhubung ke router wifi yang sama dengan yang Anda atur SSID dan kata sandinya dalam kode di Huzzah. Daripada Anda perlu mencari tahu alamat IP apa yang telah ditetapkan router Anda ke perangkat Anda. Biasanya, jika Anda masuk ke konfigurasi router Anda, harus ada daftar klien. Itu menunjukkan alamat IP dari semua perangkat yang terhubung ke koneksi Wifi Anda. Namun, jika Anda tidak dapat menemukan alamat IP ini, Anda dapat mencabutnya dari arduino dan menjalankannya dengan kabel serial lagi. Jika Anda membuka konsol serial pada perangkat, itu akan mencetak alamat IP ke perangkat di konsol serial jika Anda tidak dapat menemukannya dengan cara lain. Bagaimanapun setelah Anda terhubung ke jaringan Wifi yang sama dengan ponsel Anda. Kemudian arahkan browser web seluler Anda ke alamat ip Huzzah. Yang mungkin terlihat mirip dengan ini. https://192.168.0.107 atau sesuatu yang sangat mirip. Di sana saya memasukkan halaman dasar yang memungkinkan Anda untuk menghidupkan dan mematikan 4 Led serta membaca nilai sensor analog.

Langkah 7: Menggunakan Javascipt

Dalam file bernama index.h di sketsa ESP8266Code itu akan muncul sebagai tab terpisah di editor arduino. Anda dapat melihat contoh dasar yang saya buat di sini. Pada dasarnya cara kerjanya seperti ini.

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

Ini akan mengatur nilai pin digital 12 ke tinggi

SetPin(4, 0, 0);

Ini akan mengatur nilai pin digital 4 ke rendah

SetPin(A2, 439, 1) Ini akan mengatur nilai Analog Pin 2 menjadi 439

Demikian juga, fungsi GetJSON akan mengembalikan nilai yang diminta dari pin dan menempatkannya ke dalam html yang dilengkapi dengan Id div yang ditentukan.

GetJSON('A0', 1, 'resp_i') GetJSON({Nomor Pin}, {IsAnalog 1 Ya 0 Tidak}, {Id Elemen HTML untuk mengembalikan hasil})

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

Langkah 8: Dukungan

Saya harap skrip saya membantu Anda yang ingin menggunakannya. Saya menggunakan contoh html yang sangat mendasar di sini dengan harapan orang lain akan mengeksplorasi semua kemampuan yang saya tidak bisa. Namun, ini harus menunjukkan bagaimana ajax dapat digunakan untuk mengontrol arduino tanpa memuat halaman html dan hal-hal semacam itu.

Jika Anda memiliki komentar, jangan ragu untuk bertanya kepada saya, saya akan melakukan yang terbaik untuk menjawab. Saya ingin memperluas fungsionalitas ini lagi, tetapi saya kehabisan waktu dan uang. Namun, saya sedang mengerjakan implementasi yang lebih kuat dari ini, yang menyimpan file di server web biasa daripada di ESP8266.

Terima kasih telah meluangkan waktu untuk melihat kode saya.

John AndersonEmail Saya

Vermont Internet Design LLC

www.vermontinternetdesign.com