Pada projek kali ini, kamu bisa membuat control warna LED RGB menggunakan web server dari ESP8266. Projek ini disebut ESP8266 module controller warna LED RGB.
Alat dan bahan
Berikut hardware yang kamu butuhkan untuk menyelesaikan projek ini :
- NODEMCU AMICA LUA WIFI V3 4MB 32MBITS FLASH ESP8266 ESP12 CP2102
- KABEL DATA MICRO USB ARDUINO MICRO USB ROBOTDYN TYPE A MALE 30CM
- LED RGB RED GREEN BLUE 4P 4 PIN CLEAR 5MM COMMON ANODE
- 10X RESISTOR 470 OHM 1/4W 1% METAL FILM (1 paket sudah 10 helai resistor)
- BREADBOARD MINI SOLDERLESS 400 400P
- 40PCS JUMPER CABLE KABEL 10CM MALE TO FEMALE DUPONT (1 paket sudah 40 helai kabel)
Kamu bisa lihat link ini CNC STORE BANDUNG untuk menemukan produk-produk lainnya tentunya dengan harga terjangkau.
Flashing ESP kamu dengan NodeMCU firmware
Pada tutorial ini, kita akan bergerak menggunakan firmware NodeMCU. Kamu harus flash terlebih dahulu ya untuk ESP nya, dengan catatan ESP kamu tidak ada masalah dalam upload program sebelumnya.
ini adalah file .exe kami bisa download dengan mengikuti link ini :
Kamu bisa klik disini untuk menemukan semua informasi mengenai flasher NodeMCU.
Buka aplikasi flasher yang kamu download dan akan muncul pada window (seperti yang ditunjukan pada photo dibawah ini).
Tekan tombol “Flash” dan itu harus dimulai proses cepat flash. (kamu mungkin harus mengubah sesuatu pada setting pada tab selanjutnya). Setelah proses tersebut selesai, akan muncul lingkaran hijau dengan ikon centang.
Downloading ESPlorer IDE
Aku merekomendasikan menggunakan ESPlorer IDE yang merupakan program dibuat oleh 4refr0nt untuk mengirimkan perintah ke ESP8266 kamu.
Ikuti instruksi ini untuk download dan install ESPlorer IDE :
Klik disini untuk download ESPlorer
Unzip folder-nya
Pergi ke folder utama
Run “ESPlorer.jar” file
Buka ESPlorer IDE-nya
UPLOADING CODE
Kamu harus melihat laman yang sama dengan gambar sebelumnya, ikuti instruksi ini untuk upload Lua file:
Sambungkan ESP8266-12E kamu yang telah built-in programmer ke computer kamu
Select port ESP8266-12E kamu
Tekan Open/Close
Select tab NodeMCU+MicroPtyhon
Buat file baru untuk memanggil init.lua
Tekan Save untuk ESP
CODE
Ikuti program code untuk upload ke ESP8266 kamu menggunakan software sebelumnya. File kamu harus diberi nama “init.lua“.
Jangan lupa untuk tambahkan nama internet kamu (SSID) dan password ke sketch dibawah.
-- Rui Santos
-- Complete project details at https://randomnerdtutorials.com
wifi.setmode(wifi.STATION)
wifi.sta.config("YOUR_NETWORK_NAME","YOUR_NETWORK_PASSWORD")
print(wifi.sta.getip())
function led(r, g, b)
pwm.setduty(1, r)
pwm.setduty(2, g)
pwm.setduty(3, b)
end
pwm.setup(1, 1000, 1023)
pwm.setup(2, 1000, 1023)
pwm.setup(3, 1000, 1023)
pwm.start(1)
pwm.start(2)
pwm.start(3)
srv=net.createServer(net.TCP)
srv:listen(80,function(conn)
conn:on("receive", function(client,request)
local buf = "";
buf = buf.."HTTP/1.1 200 OK\n\n"
local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP");
if(method == nil)then
_, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");
end
local _GET = {}
if (vars ~= nil)then
for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do
_GET[k] = v
end
end
buf = buf.."<!DOCTYPE html><html><head>";
buf = buf.."<meta charset=\"utf-8\">";
buf = buf.."<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">";
buf = buf.."<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
buf = buf.."<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\">";
buf = buf.."<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\"></script>";
buf = buf.."<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js\"></script>";
buf = buf.."</head><body><div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1>";
buf = buf.."<a type=\"submit\" id=\"change_color\" type=\"button\" class=\"btn btn-primary\">Change Color</a> ";
buf = buf.."<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div></div>";
buf = buf.."<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);";
buf = buf.."document.getElementById(\"change_color\").href=\"?r=\" + Math.round(picker.rgb[0]*4.0117) + \"&g=\" + Math.round(picker.rgb[1]*4.0117) + \"&b=\" + Math.round(picker.rgb[2]*4.0117);}</script></body></html>";
if(_GET.r or _GET.g or _GET.b) then
-- This is for RGB Common Cathode
-- led(_GET.r, _GET.g,_GET.b)
-- This is for RGB Common Anode
led(1023-_GET.r, 1023-_GET.g,1023-_GET.b)
end
client:send(buf);
client:close();
collectgarbage();
end)
end)
Catatan: jika kamu menggunakan LED RGB common cathode, kamu bisa tambahkan komentar dan hapus komentar beberapa kode pada if(_GET.r or _GET.g or _GET.b) pernyataan seperti dijelaskan pada komentar sketch.
SKEMA
Sekarang ikuti skematik ini untuk membuat circuit untuk LED RGB common anode.
Catatan: jika kamu menggunakan LED RGB common cathode, kamu boleh sambungkan kaki panjang ke GND.
IP Address ESP
Ketika ESP8266 kamu di reset pada boardnya, ESP8266 akan menampilkannya di Serial Monitor. Simpan atau salin IP address, karena nanti akan dibutuhkan oleh kamu.
Di dalam kasus kita, IP address is 192.168.1.7 . Jika kamu mengalami masalah, kamu bisa flash ulang dengan setting disesuaikan dengan “Advance” pada laman aplikasi Flasher.
Kamu sudah siap!
Buka Web Server kamu
Pergi ke beberapa browser seperti google crome, dan paste Salinan IP Address ESP8266 kamu, ini yang akan kamu lihat :
Klik kotak kecil pada laman untuk membuka control warna. Simpelnya seret mouse kamu atau jari dan select warna yang kamu pilih untuk LED RGB kamu.
Kemudian cukup klik tombol “Change Color”:
Sekarang kamu bisa merubah LED RGB ke warna biru :
