Pokok Krismas yang Dikendalikan Laman Web (Sesiapa sahaja Boleh Mengawalnya): 19 Langkah (dengan Gambar)

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

Anda ingin tahu seperti apa bentuk pokok Krismas yang dikendalikan laman web?

Berikut adalah video yang menunjukkan projek pokok Krismas saya. Strim langsung telah berakhir sekarang, tetapi saya membuat video, merakam apa yang sedang berlaku:

Tahun ini, pada pertengahan Disember, saya terbaring di tempat tidur saya, cuba tidur di tengah minggu kerja. Dan bukannya tidur, saya memikirkan apa yang akan menjadi projek Krismas yang hebat. Dan kemudian idea hebat menarik perhatian saya.

Oleh kerana saya malas dengan hiasan Krismas, lebih baik membiarkan orang lain mengawal lampu Krismas saya, jadi saya tidak perlu risau.

"Bagaimana jika saya membuat lampu pokok Krismas yang dapat dikendalikan oleh SESIAPA melalui antara muka laman web?"

(masukkan dua minggu malam tanpa tidur)

Jadi saya berjaya.

Pokok Krismas dengan dua puluh LED RGB yang disambungkan ke internet melalui ESP8266 Arduino.

Seorang rakan saya (terima kasih JP) membantu saya membuat laman web (kerana saya bukan pengaturcara yang fasih untuk perkara berkaitan laman web).

Dan kami menyediakan live stream 24/7 youtube dari pokok saya supaya anda dapat melihat apa yang anda hidupkan atau matikan setiap masa.

Projek ini sesuai untuk tahun ini, kerana ramai di antara kita yang berada dalam lokap, tidak dapat bertemu dan bersosial dengan rakan dan keluarga. Mengapa tidak bersatu melalui pokok Krismas:)

Dalam Instructable ini saya akan menerangkan secara terperinci bagaimana projek ini dibuat.

Langkah 1: Tahap Kemahiran

Projek ini lebih berorientasikan perisian. Tetapi jangan takut Sebilangan keberuntungan dan bantuan paman Google akan sangat membantu:)

Anda perlu mempunyai satu set 3 kemahiran (atau anda akan mempelajarinya jangan risau): bahagian pelayan web, bahagian Arduino dan pokok Krismas!

Pengetahuan yang disyorkan:

• Kemahiran asas komputer dan pengaturcaraan

• Pengetahuan terminal Linux asas

• Pengetahuan asas rangkaian komputer

• Pengetahuan asas elektronik

• Kemahiran menggunakan Google dan kebolehan "istimewa" lain

• Harus tahu cara menubuhkan pokok Krismas:)

Sekiranya anda mempunyai pengetahuan tentang teknologi dan pengaturcaraan, anda seharusnya dapat belajar mengatur perkara ini mengikut Instruksional ini.

Langkah 2: Alat dan Komponen

Di sisi pokok Krismas, anda memerlukan: • Pokok Krismas (d'oh…)

• Papan pengawal mikro NodeMCU

(anda juga boleh menggunakan ESP32 atau papan bertenaga Wi-Fi atau Ethernet lain)

• Jalur LED RGB yang boleh dialamatkan. jalur LED RGB yang dapat diatasi akan menjimatkan banyak GPIO Arduino (https://www.sparkfun.com/products/11020)

• Perisian untuk NodeMCU (disediakan dalam arahan ini)

Di sisi pelayan, anda memerlukan:

• Pelayan peribadi maya dengan IP awam. Di sini anda mendapat $ 100 percuma di DigitalOcean

• Domain (pilihan) anda boleh mendaftar di mana-mana organisasi pendaftar, misalnya

• Kod Dedikasi (dibekalkan dengan Instructable ini)

Langkah 3: Konfigurasikan Mesin Maya (komputer) BAHAGIAN 1

Mari terus ke pengekodan:)

Kami memerlukan pelayan, yang akan berkomunikasi dengan laman web dan NodeMCU.

Pelayan di DigitalOcean membolehkan kami memiliki mesin maya dengan alamat IP awam, yang bermaksud, kami dapat menjalankan perkhidmatan di atasnya, dan mengaksesnya ke seluruh dunia.

Sebaik sahaja anda membayar langganan bulanan DigitalOcean (anda boleh menggunakan percubaan percuma 60 hari), buat projek dan beri nama pokok Krismas atau apa sahaja yang anda mahukan.

Anda kini boleh membuat mesin maya anda (komputer maya yang dapat diakses jauh) dengan mengklik "Mulakan dengan titisan" (yang pada dasarnya adalah nama DigitalOcean untuk mesin maya).

Halaman konfigurasi akan muncul dan anda boleh kekal dengan lalai: Imej Ubuntu, pelan asas dan tanpa penyimpanan blok (5 $ / bulan)

Langkah 4: Konfigurasikan Mesin Maya (komputer) BAHAGIAN 2

Kawasan pusat data adalah tempat pelayan anda akan dibuat.

Pilih yang terdekat dengan anda dan bakal pengguna anda. Ini akan memberikan masa tindak balas terendah.

Selanjutnya, di bahagian Pengesahan, anda akan diminta memasukkan kata laluan untuk mengakses mesin maya anda.

Di bahagian Selesaikan dan buat, jangan lupakan 1 titisan, pilih nama hos (pokok Krismas lagi), pilih projek yang anda buat sebelumnya jika tidak dipilih secara lalai dan klik Buat titisan. Ini akan mengambil masa beberapa minit. Dengan mengklik projek anda di bahagian navigasi di sebelah kiri, anda akan melihat titisan anda.

Langkah 5: Konfigurasikan Mesin Maya (komputer) BAHAGIAN 3

Dengan mengklik tiga titik di sebelah kanan titisan, anda boleh mengklik Akses konsol, yang akan menjadikan anda mengakses komputer maya anda.

Tetingkap penyemak imbas kecil baru akan dibuka. Sekarang, ini bukan persekitaran desktop, seperti pada Windows 10 atau Ubuntu anda dengan komputer antara muka Grafik.

Walau bagaimanapun, semua boleh dilakukan melalui antara muka konsol.

Ia tidak begitu menakutkan seperti yang dilihat:)

Langkah 6: Konfigurasikan Mesin Maya (komputer) BAHAGIAN 4

Anda berjaya mencipta mesin maya anda sendiri di awan DigitalOcean.

Pada langkah seterusnya, anda akan menyediakan pelayan web, yang disebut Apache dan menyiapkan laman web anda sendiri.

Muat turun klien Filezilla di sini https://filezilla-project.org/download.php?platfo… (atau cari versi 32bit untuk sistem operasi 32bit) dan pasangkannya. Ia adalah pelanggan FTP (File Transfer Protocol).

Anda akan dapat mengakses dan memindahkan fail dari dan ke mesin maya anda.

Setelah dipasang, klik fail → pengurus laman web → laman web baru dan masukkan data seperti pada gambar di atas.

Protokol: SFTP (Protokol Pemindahan Fail Selamat)

Host: IP pelayan anda, cari di projek DigitalOcean anda.

Pengguna adalah root dan kata laluan adalah yang anda tetapkan semasa membuat titisan anda.

Klik OK dan sambungkan ke mesin maya anda.

Anda akan diberi amaran, kunci hos tidak diketahui. Ikuti gambar kedua.

Buat folder tempatan untuk projek itu, dan ekstrak fail projek anda yang akan anda muat turun di sini.

Anda akan mengedit fail anda di komputer anda dan memindahkannya ke mesin maya anda setiap kali anda ingin menguji atau mengemas kini kodnya.

Langkah 7: Pasang Pelayan Web

Log masuk ke konsol titisan anda dengan nama pengguna dan kata laluan anda.

Oleh kerana kami tidak mempunyai antara muka grafik, kami menggunakan arahan untuk mengawal mesin maya anda. Berikut adalah beberapa perintah umum yang akan anda gunakan di Ubuntu (Linux):

• pwd - mencetak direktori semasa saya

• ls - senaraikan fail dan folder dalam direktori semasa saya

• cd / - pindah ke / direktori (folder, yang merangkumi direktori utama linux seperti dll, bin, boot, dev, root, home, var dan sebagainya)

Dengan menjalankan, maksud saya, masukkan perintah dan tekan enter.

Sekarang, kita akan menjalankan apt-get update -y untuk mengemas kini sistem.

Jalankan apt install apache2 -y untuk memasang pelayan web Apache.

Skrin selamat datang Apache anda boleh diakses di https:// virtual-machine-ip dari penyemak imbas anda.

Ganti virtual-machine-ip dengan ip mesin maya anda, misalnya 165.12.45.123. Anda juga boleh melangkau https:// kerana ia akan ditambahkan secara automatik.

Tahniah!

Catatan:

Sekiranya anda mahu laman web anda dapat diakses melalui nama, dan bukannya alamat IP (seperti yang saya gunakan https://blinkmytree.live/), pergi ke laman web penyedia domain GoDaddy atau yang serupa (namecheap.com dll.) Dan ikuti arahannya di sini:

Beberapa nama domain sangat murah. Domain saya hanya berharga 2 $ setahun. Pasti bernilai wang:)

Langkah 8: Pasang Rangka Kerja Aplikasi Web

Kembali ke konsol kami. Jangan takut:)

Gunakan Filezilla untuk membuat folder bernama aplikasi di dalam / rumah, jadi / rumah / aplikasi akan menjadi folder anda

Jalankan cd / home / app untuk masuk ke dalam folder aplikasi dalam.

Jalankan apt install npm -y, untuk memasang pengurus pakej npm. Ini akan mengambil masa beberapa minit.

Jalankan npm init -y untuk membuat package.json fail, yang akan mengesan / mengingat data pakej utama mengenai aplikasi.

Jalankan npm --simpan install cors express untuk memasang modul cors, express

Cors adalah modul untuk mengkonfigurasi akses lintas tapak dan ekspres adalah kerangka aplikasi web.

Npm adalah pengurus pakej yang kami gunakan dan kami akan menggunakan runtime JavaScript node.js untuk memprogramkan antara muka pengaturcaraan aplikasi kami (API), yang, digabungkan dengan pelayan http, akan menerima permintaan HTTP untuk menerapkan warna pada LED, menandakan nilainya (warna) dalam memori, dan berikan nilai ke NodeMcu, ketika memintanya.

Nota: Node di NodeMcu tidak ada kaitan dengan simpul di node.js. NodeMcu dapat diganti dengan papan pengembangan arduino yang tersambung ke internet, papan pengembangan NXP, atau Microchip / NXP / Renesas / STM / Atmel PCB khusus. Node.js juga boleh diganti dengan. Net framework, PHP atau platform lain. Tetapi untuk kesederhanaan, kami menggunakan NodeMCU dan Node.js.

Sekarang, mari buat ujian, jika kita dapat menjalankan program kecil di node.js

Buat fail bernama index.js dengan notepad / notepad ++ atau editor lain atau persekitaran pembangunan bersepadu yang anda gunakan (Visual Studio Code https://code.visualstudio.com/) dalam folder tempatan anda.

Masukkan kod ini di dalamnya:

var http = memerlukan ('http');

http.createServer (fungsi (req, res) {

res.writeHead (200, {'Content-Type': 'text / plain'});

res.end ('Hello World!');

}). dengar (8080);

Simpan dan pindahkan ke folder / rumah / aplikasi sebagai index.js dengan doubleclick / drag-drop pada fail di FileZilla.

Jalankan node index.js, dan biarkan ia berjalan.

Sekarang, kita boleh mengakses halaman kami di https:// virtual-machine-ip: 8080 dari penyemak imbas kami. Halaman putih dengan teks Hello World akan muncul.

Tahniah, anda baru sahaja membuat pelayan web di node.js!

Langkah 9: Sediakan Perisian

Pergi ke konsol dan hentikan program dengan menekan ctrl + C.

Ganti fail index.js anda di / home / app / dan gantikan dengan index.js kami di.

Anda boleh memuat turun semua fail untuk laman web di sini:

drive.google.com/file/d/1oIFdipoJxg6PF5klO…

Salin kod pokok Chrismas kami dari folder html ke direktori jauh / var / www / html / dengan Filezilla. Ia akan memakan masa. Sekiranya ia meminta anda, ganti index.html dengan yang baru.

Masukkan semula IP anda di penyemak imbas web kegemaran anda.

Anda baru sahaja menyediakan aplikasi web di bahagian depan di https:// virtual-machine-ip.

Langkah 10: Tidak Memahami Kod Back-end dan Menjadikannya Berfungsi

Catatan: kod back-end anda ada di / home / app

Ingat, setelah anda mengedit kod anda secara tempatan, jangan lupa memuat naiknya ke pelayan anda menggunakan FileZilla, dan mulakan semula aplikasi simpul anda (konsol: ctrl + c, anak panah ke atas (menunjukkan arahan terakhir node index.js), masukkan)

Agar kod berfungsi, anda perlu memasukkan beberapa data terlebih dahulu.

Pertama, anda perlu menukar pemboleh ubah nama host di index.js ke domain atau IP anda sendiri, (sesuatu yang kelihatan seperti: 165.13.45.123).

Kedua, saya akan membimbing anda melalui kod untuk memahaminya. Pastikan tidak melangkau komen yang saya buat dalam kod.

Anda dapat melihat dalam file index.js, bahawa kami membuat aplikasi menggunakan modul ekspres. Kemudian, kami menerapkan peraturan CORS padanya, menambahkan API dan memulakan pelayan http. Pelayan ini tidak akan melayani laman web melalui permintaan GET http, tetapi akan melayani keadaan yang dipimpin melalui permintaan GET http dan mengemas kini keadaan yang dipimpin pada permintaan PUT http yang diterima.

API adalah amalan biasa untuk bertukar maklumat antara aplikasi. Yang paling biasa kita gunakan ialah API REST yang kita gunakan sendiri. Mereka tidak bernegara dan tidak mempunyai hubungan yang berterusan (shorturl.at/aoBC3, Permintaan PUT hanya mengemas kini keadaan yang dipimpin dalam pembolehubah array aplikasi (memori), permintaan GET hanya menghantar keadaan yang dipimpin kepada klien.

Jawapan kepada pelanggan biasanya terdapat dalam notasi JSON, tetapi untuk respons ringkas 30 keadaan LED ini, kami hanya menghantar rentetan 30 nilai yang dipisahkan dengan koma.

Langkah 11: Memahami Kod Bahagian Depan dan Menjadikannya BAGIAN 1

Catatan: kod front-end anda berada di / var / www / html

Ingat, setelah anda mengedit kod anda secara tempatan, jangan lupa memuat naiknya ke pelayan anda menggunakan FileZilla. Tidak seperti node.js, Apache menghidupkan semula secara automatik, tetapi anda harus memuatkan semula halaman anda di penyemak imbas anda. Gunakan ctrl + f5 untuk menyegarkan dan juga menghapus cache halaman anda.

Agar kod berfungsi, anda perlu memasukkan sedikit data. Pertama, anda perlu menukar pemboleh ubah url dalam fungsi send_request di dalam index.html dari blinkmytree.live ke domain atau IP anda sendiri, misalnya: 165.13.45.123.

Kedua, saya akan membimbing anda melalui kod untuk memahaminya. Pastikan tidak melangkau komen yang saya buat dalam kod. Halaman adalah dokumen HTML. Meninggalkan semua peraturan CSS (gaya halaman dan kedudukan kandungan), kami akan melihat fungsi penting kandungan. Untuk mengetahui lebih lanjut mengenai CSS, periksa

Kami mahukan ciri utama ini (pakar kaedah tangkas akan mengatakan kisah pengguna) di halaman:

• Video langsung yang disematkan ke dalam halaman

• LED yang dapat diklik pada pokok natal, yang dimanipulasi dalam penyunting gambar Gimp (https://www.gimp.org/).

• Komunikasi sebenar dengan pelayan, menunggu untuk menukar keadaan yang dipimpin.

Langkah 12: Memahami Kod Bahagian Depan dan Menjadikannya BAGIAN 2

Setelah kami mempunyai pokok Krismas kami dengan jumlah LED dan warna untuk dipilih, kami perlu membuat kawasan dan menerapkan tindakan kepada mereka, jadi setelah kami mengklik LED berwarna di bahagian pemetik gambar, warna akan dipilih, dan satu kita mengklik LED, perintah akan dihantar ke pelayan, di mana Arduino akan memilih nilainya.

Dalam HTML5, standard HTML terbaru, ada sesuatu yang disebut peta gambar. Ini memungkinkan kita untuk menentukan bidang pada gambar, yang mana kita dapat menerapkan pendengar tindakan di atasnya.

Oleh kerana kami mempunyai banyak bidang untuk ditentukan, kami menggunakan alat dalam talian https://www.image-map.net/ untuk menentukan kawasan ini dan menyalin kod HTML ke halaman kami.

Setelah kami melakukannya, kami dapat memasukkan acara onclick dengan fungsi yang disebutnya dan parameter nombor LED ke setiap kawasan ini. Lihat tangkapan skrin di atas.

Langkah 13: Memahami Kod Bahagian Depan dan Menjadikannya BAGIAN 3

Di hujung badan HTML, di suatu wilayah, kami meletakkan beberapa JavaScript, untuk menentukan fungsi yang kami panggil dalam acara onclick. Di peringkat global, kami menentukan XMLHttpRequest, yang kami gunakan untuk mengirim permintaan PUT

Kami mempunyai dua fungsi:

fungsi set_color (val)

fungsi send_request (id)

Untuk menguji permintaan API, saya mengesyorkan alat perisian yang biasa digunakan bernama Postman https://www.postman.com/. Ini membolehkan kita hanya mengirim permintaan API ke pelayan, tanpa kemahiran pengaturcaraan. Ini memungkinkan untuk mengejek pelayan, dan menerima permintaan juga.

Langkah 14: Memahami Kod Bahagian Depan dan Membuatnya Berfungsi BAHAGIAN 4

Permohonan anda berfungsi.

Ketahuilah, angka dibalikkan, iaitu 20 adalah 1 dan 1 adalah 20, ini kerana LED di pokok bermula di bahagian bawah, tetapi untuk pengalaman pengguna yang lebih baik, kami meletakkan permulaan yang menuju ke puncak.

Anda masih perlu membuat siaran langsung di YouTube jika anda menginginkannya, dan mengganti kod benam video YouTube dengan yang anda sendiri.

Langkah 15: Kod Arduino

ESP8266 menjalankan lakaran contoh HTTP Client asas yang sedikit diubah suai, menerima data dari laman web saya melalui panggilan API.

Anda juga perlu memasang perpustakaan untuk mengawal jalur LED sekiranya anda ingin menggunakan jalur RGB yang dapat dialamatkan sama seperti yang saya lakukan.

github.com/adafruit/Adafruit-WS2801-Librar…

Dalam lakaran yang saya lampirkan, anda perlu memasukkan nama dan kata laluan wi-fi anda dan url ke laman web anda (lihat komen)

Pada dasarnya kita menukar respons http menjadi rentetan bertaip C, jadi kita dapat menggunakan strtok fungsi C untuk memisahkan rentetan dengan koma dan mengisi jadual led dengan nilai yang dibaca dari pelayan. Daripada kita memanggil fungsi di mana kita melalui jadual, dan berdasarkan nilainya, kita mengubah warna yang betul yang diharapkan pengguna.

Itu sahaja!

Tahniah, anda berjaya!

Langkah 16: Rantai LED RGB

Aduh. Sekarang masanya untuk berehat sebentar dari semua pengekodan:)

Oleh kerana ESP8266 tidak mempunyai banyak pin GPIO untuk mengawal LED secara individu, saya menggunakan rantai LED RGB yang boleh diatasi ini:

www.sparkfun.com/products/11020

Dengan cara ini, semua 20 led RGB (60 leds total) dapat dikendalikan dengan hanya dua pin - "data" dan "jam" dan kuasa 5V secara langsung dari ESP8266.

Menyambungkan jalur ke NodeMcu adalah mudah. 5V ke Vin pada NodeMcu (5V dari USB), wayar kuning ke pin 12, wayar hijau ke pin 14, tanah ke tanah.

Anda boleh menetapkan warna dan kecerahan RGB individu. Dengan pencampuran warna, anda dapat menghasilkan BANYAK warna untuk setiap LED.

Terdapat juga perpustakaan yang sangat bagus untuk pelbagai jenis kesan FX yang sejuk dengan LED ini. Cubalah jika anda suka:

github.com/r41d/WS2801FX

Langkah 17: Hiaskan Pokok Krismas

Jadikannya cantik dan pastikan semua LED kelihatan dan tersebar dengan baik di atas pokok.

Langkah 18: Sentuhan Akhir

Apabila pokok sudah siap, ambil foto yang bagus dan ulangi langkah untuk membuat peta gambar kedudukan yang dapat diklik (kedudukan LED)

Ini adalah cara yang paling intuitif untuk berinteraksi dengan LED.

Sekiranya anda tidak mahu terlalu banyak perkara, anda boleh menggunakan butang biasa.

Anda juga harus memulakan siaran langsung pokok anda di YouTube (jika anda ingin menonton apa yang berlaku dalam masa nyata) dan memasukkan aliran ke laman web anda.

Langkah 19: Kagumi Laman Web Anda

Anda hebat jika berjaya sejauh ini:) Jemput rakan anda (dan saya tentu saja: P) dan buat mereka mengklik pokok anda sebanyak mungkin:)

n

Ini adalah Instructable yang sangat lama, untuk projek yang agak rumit. Tetapi sangat berbaloi pada akhirnya: D

Terima kasih! Sekiranya anda ingin terus berhubung dengan apa yang saya kerjakan:

Anda boleh melanggan saluran YouTube saya:

www.youtube.com/c/JTMakesIt

Anda juga boleh mengikuti saya di Facebook dan Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

untuk spoiler mengenai apa yang sedang saya kerjakan, di sebalik tabir dan tambahan lain! PS:., Jika anda BENAR-BENAR, BENAR-BENAR menyukainya, anda juga boleh membelikan saya kopi di sini, jadi saya akan mempunyai lebih banyak tenaga untuk projek-projek yang akan datang (ini memerlukan 2 minggu tidur dari saya, kerana saya mendapat idea ini terlambat):)

www.buymeacoffee.com/JTMakesIt

Dan jangan lupa untuk memilih peraduan Instructable in "Anything Goes" ini:)