Running Javascript on ESP8266 (NodeMCU) ใช้งานจาวาสคริปต์บน ESP8266

cover.jpg

Running Javascript on ESP8266 (NodeMCU) ใช้งานจาวาสคริปต์บน ESP8266

สวัสดีครับวันนี้เราลองมาใช้งานจาวาสคริปต์ Javascript บน ESP8266 กันดูครับ ในบทความนี้ผมใช้ NodeMCU v0.9 ในการทดลองครับ

เพื่อนๆคงจะเคยใช้ ESP8266 กับภาษา Lua หรือ C/C++ กับ Arduino IDE กันเป็นส่วนใหญ่เพราะค่อนข้างเข้าใจง่าย มีเครื่องมือและบทความต่างๆมากมายให้ศึกษากัน แต่ถ้าบอกว่าเรามารัน JavaScript บนESP8266กันดูก็คงบอกว่าทำได้หรือไม่ มีความจำเป็นมากน้อยแค่ไหน จริงๆแล้วต้องขึ้นอยู่กับนักพัฒนาว่าถนัดในภาษาใด ความยืดหยุ่น ความเร็วในการทำงาน ซึ่งอาจจะยากง่ายแตกต่างกันไปครับ โดยส่วนตัวผมว่านี่ก็เป็นทางเลือกหนึ่งครับ เพราะภาษา JavaScript ก็มีความนิยมและใช้แพร่หลายกันมากเป็นคอร์เทคโนโลยีหลักในการพัฒนาเว็บไซต์ อีกทั้งอาจจะง่ายสำหรับผู้ที่เริ่มต้นศึกษาการเขียนโปรแกรมมือใหม่ แหล่งเรียนรู้มากมาย เช่นที่ Code Academy https://www.codecademy.com/learn/javascript

pico_angledtessel-introduction-1-638
JavaScript สำหรับบอร์ด Microcontroller นั้นโดยเริ่มแรกมีการถูกพัฒนาเพื่อใช้งานบนบอร์ด Espruino (http://www.espruino.com/Get+it) และ Tessel (https://tessel.io/) แต่ก็ยังไม่ได้รับความนิยมอย่างกว้างขวางเหมือน Arduino หรือ ESP8266 เหล่าสาวก Espruino มีการเรียกร้องผู้พัฒนา Espruino (Gordon Williams) ว่าอยากจะใช้งาน JavaScript บน ESP8266 … ขอมามากพี่ท่านก็เลยจัดให้ (ใจกว้างมากดั่งแม่น้ำเทมส์ ณ.กรุงลอนดอน)

เรามาเริ่มเตรียมเครื่องมือกันเลยครับ (Installing tools)

  1. Python 2.7.xx https://www.python.org/downloads/ ในที่นี้ผมใช้ Python 2.7.11 สำหรับ Python 3.5.xx ไม่สามารถใช้ได้นะครับ (ผมลองมาแล้วฮา..)
  2. Git for Windows https://git-scm.com/download บทความนี้เราFlashจาก Windows 8
  3. Espruino build for Esp8266  http://forum.espruino.com/conversations/279176/
  4. Espruino Web IDE โปรแกรมที่ใช้เขียนโปรแกรมลงบนบอร์ดเรา ในที่นี้เราจะใช้ผ่าน Chrome เว็บบราวเซอร์
  5. ESP8266 board ผมใช้ NodeMCU v.0.9 แต่เท่าที่ดู EPS8266-01 ก็ทำได้ครับ

ขั้นตอน (Flashing process)

Install Python

  1. ดาวน์โหลด Python 2.7.xx https://www.python.org/downloads/
  2. ตรวจสอบให้แน่ใจว่าเราจะใช้คำสั่ง Python ได้จาก Windows command line (CMD) โดยให้ไปกำหนดการเข้าถึงโปรแกรม Python ที่ Windows Environment
  3. ไปที่ Computer>Properties
    22-05-2016 17-00-35
  4. >Advanced system setting22-05-2016 17-29-33
  5. >Environment Variables…
    22-05-2016 17-29-52
  6. แก้ไขที่ PATH variable
    22-05-2016 17-34-57
  7. เพิ่มข้อความ C:Python27\ ต่อท้ายค่าเดิมที่มีอยู่ดังรูป
    22-05-2016 17-35-30
  8. ในส่วนของ System variables ทำเช่นเดียวกัน
    22-05-2016 17-36-24
  9. เพิ่มข้อความ C:Python27\ ต่อท้ายค่าเดิมที่มีอยู่ดังรูป
    22-05-2016 17-36-57
  10. เราลองทดสอบเช็คเวอร์ชั่นของ Python กันดูที่ Windows Command Prompt โดยไปที่ Run แล้ว พิมพ์ cmd หลังจากนั้นก็ลอง พิมพ์คำสั่ง
     
    python --version
    

    ถ้าการตั้งค่าเรียบร้อยดี ที่ Terminal จะโชว์ เลขเวอร์ชั่นขึ้นมาดังรูป
    22-05-2016 17-40-14

  11. ขั้นตอนต่อไปเราก็สร้าง folder ชื่อ espruino ไว้ที่ drive C: เพื่อเตรียมไฟล์ต่างๆที่จะดาวน์โหลดมากันครับ
    22-05-2016 17-48-58

Install ESP tool

  1. หลังจากที่เราติดตั้ง Python กันไปแล้ว
    ตอนนี้ให้เราดาวน์โหลด Git for Windows https://git-scm.com/download มาก่อนเพื่อใช้เรียก Espruino Tool มาไว้ในเครื่องคอมฯของเราก่อน
    22-05-2016 17-52-54
  2. หลังจากติดตั้ง Git แล้วให้เปิดตัว Console ของ Git ขึ้นมาเลยครับ
    22-05-2016 18-12-47
  3. เข้าไปที่ folder ชื่อ espruino ที่เราเคยสร้างไว้ที่ drive C:
  4. พิมพ์คำสั่งด้านล่างเพื่อ clone esptool มาไว้ใน folder
     git clone https://github.com/themadinventor/esptool.git 
  5. หลังจากที่ Clone มาเรียบร้อยแล้วจะเห็นข้อความดังภาพ
    22-05-2016 18-11-39
  6. ต่อไไปก็ Install esptool กันโดย ใน folder esptool ให้พิมพ์คำสั่ง
     
    python setup.py install
    

    22-05-2016 18-15-49

  7. เมื่อเสร็จแล้วจะเป็นดังภาพด้านล่าง
    22-05-2016 18-16-32
  8. เย้เย้..เสร็จแล้วสำหรับเครื่องมือที่เตรียมใช้ในการ Flash ESP8266

ดาวน์โหลดไบนารี่ไฟล์ Espruino for ESP8266

  1. ไปที่ฟอรั่มของ Espruino ตามลิงค์นี้  http://forum.espruino.com/conversations/279176/ เพื่อดาวน์โหลดไบนารี่ไฟล์ล่าสุดของ Espruino for ESP8266
    23-05-2016 20-20-02
  2. ทำการ Unzip และไว้ใน folder espruino ใน drive C: ที่เราสร้างไว้ จะเปลี่ยนชื่อ folder ก็ได้เอาที่สบายใจ แต่ผมคงเดิมไว้ครับ
    23-05-2016 20-24-53

เชื่อมต่อ ESP8266 เพื่อทำการ Flashing (Flashing ESP8266)

  1. ตอนนี้ก็ต่อ ESP8266 กับคอมพิวเตอร์ของเราผ่านสาย USB กันเลยครับ เมื่อเราต่อแล้วเราอาจสงสัยว่า Port อะไรที่เราเชื่อต่ออยู่ ให้เราไปเช็คที่ Device Manager ดูนะครับ ในรูปของผมเป็น Port COM8 ครับ เลข Port สำคัญมากครับเพราะเราจะต้องไปกำหนดในการ Flash
    22-05-2016 19-56-26
  2. ขั้นตอนต่อไปเราจะทำการล้างไฟล์ใน erase ESP8266 ให้สิ้นซากก่อนที่เราจะ Flash เจ้า espruino ลงไป…
  3. กลับมาที่ Git CMD แล้วใช้คำสั่งด้านล่างเพื่อทำการลบไฟล์เก่าที่อยู่ใน ESP8266 (ใช้คำสั่งในfolder esptool) ออ อย่างลืมเปลี่ยน COM port ของท่านนะครับของผม –port COM8
     python ../esptool/esptool.py --port COM8 erase_flash 

    22-05-2016 20-01-33

  4. หลังจากที่เราลบไฟล์เก่าแล้ว เราก็พร้อมจะ Flash espruino แล้ว
  5. ตอนนี้ให้เราเข้าไปที่ folder espruino_1v85….ชื่อยาววว เพื่อจะทำการเรียกไฟล์ต่างๆในfolderนี้flashลงไปที่ ESP8266ครับ ดังรูปด้านล่าง
  6. แล้วให้ใช้ Python เรียกรัน esptool.py ในfolder esptool โดยพิมพ์ตามด้วยพารามิเตอร์ต่างๆดังนี้ (ยาวนิดนึง)
     
    python ../esptool/esptool.py --port COM8 --baud 115200 write_flash --flash_freq 80m --flash_mode qio --flash_size 32m 
    0x0000 "boot_v1.4(b1).bin" 0x1000 espruino_esp8266_user1.bin 0x37E000 blank.bin
    

    จุดสังเกตุ…หลักๆจะเป็น COM port และ Baud rates ที่นี้เรากำหนด 115200
    ถ้าถูกต้องจะได้ผลดังภาพด้านล่างครับ เย้เย้เย้…..
    22-05-2016 20-23-25

โปรแกรมด้วยภาษาจาวา JavaScript บน ESP8266 (Running JavaScript on ESP8266)

  1. เราสามารถใช้ โปรแกรม Terminal อะไรก็ได้ติดต่อไปยัง ESP8266 เช่น PuTTY เป็นต้น แต่ทางผู้พัฒนา Espruino ได้จัดทำ Espruino Web IDE ขึ้นมาซึ่งมีหน้าตาหล่อเหลาเอาการ ผมจึงแนะนำให้ใช้ตัวนี้เลยครับ
    22-05-2016 20-28-43
  2. สามารถติดตั้งเป็น extension ให้กับ Chrome ได้เลย https://chrome.google.com/webstore/detail/espruino-web-ide/bleoifhkdalbjfbobjackfdifdneehpo
    22-05-2016 20-29-36
  3. หลังจากทำการติดตั้งแล้วเราก็เปิดโปรแกรมขึ้นมาใช้งานกันเลยครับ แต่ก่อนอื่นให้เราไปตั้งค่าที่ setting
    22-05-2016 20-45-17
  4. กำหนด Baud Rates ให้ตรงกับที่เราได้ทำการ Flash มาซึ่งเป็นค่า 115200 และในส่วนของ Connect over TCP Address เราสามารถใส่ค่าIP ของ ESP8266 ที่เราใช้flashได้ ซึ่งจะมีประโยชน์ในการอัพโหลดโปรแกรมที่เขียนได้ผ่านWiFi โดยไม่ต้องต่อสาย USB (วิธีการเช็คIPจากตัวESP8266จะอธิบายให้ทราบอีกทีครับ)
    22-05-2016 20-45-45
  5. ทดสอบเชื่อมต่อเลยครับ กดปุ่มเชื่อมต่อดังภาพด้านล่างกันเลย
    22-05-2016 20-46-31
  6. เลือกวิธีการเชื่อมต่อ ในที่นี้เพื่อนๆอาจมีแค่ต่อด้วยCOM port แต่ถ้าเราเพิ่มผ่านWiFiด้วยแล้วจะขึ้นมาดังภาพครับ ผมต่อด้วยCOM8ก่อนนะครับ
    22-05-2016 20-47-02
  7. เชื่อมต่อได้แล้วจะมีข้อความและกราฟิกขึ้นมาดังภาพด้านล่างนะครับ เย้เย้เย้….
    22-05-2016 20-47-30
  8. ลองพิมพ์บวกเลขง่ายๆในหน้าต่างTerminalดูว่าเวิร์คไหม ผลลัพธ์ออกมาถูกต้องเป็นอันใช้ได้ครับ
    22-05-2016 20-48-08
  9. ลองมาเขียนโปรแกรมไฟกระพริบตามสูตร (โปรแกรมพื้นฐานเหล่าเมกเก้อ555) กันบ้างด้วยภาษา JavaScript ในหน้าต่างด้านขวามือ เขียนเสร็จก็กดปุ่ม Send to Espruino กันเลยครับ ออเกือบลืมผมต่อ LED ไว้ที่ขา GPIO4 ดังนั้นในโปรแกรมเราก็ใช้ Pin(4)นะครับ
     
    var led = new Pin(4);
    var toggle=1;
    
    setInterval(function() {
     toggle=!toggle;
     digitalWrite(led, toggle);
    }, 500);
    

    22-05-2016 20-50-06

  10. เย้!!! ทำไฟกระพริบได้ด้วย JavaScript แล้ว ><b
    20160523_213655-ANIMATION.gif
  11. อ่า…ยังไม่หมด เราสามารถเขียนโปรแกรมด้วยภาษาภาพ visual programming language คล้ายๆโปรแกรม Scratch ได้ด้วยครับ อันนี้เหมาะมากสำหรับมือใหม่ครับ กดปุ่มเลือกมุมมอง Graphic designer ดังภาพด้านล่างครับ
    23-05-2016 21-46-03.jpg
    วางบล๊อกตามภาพเลยครับ
    23-05-2016 21-48-33
    22-05-2016 21-12-04
    เสร็จแล้วเราก็กดปุ่ม send ไปที่ ESP8266 ครับ

เป็นอย่างไรบ้างครับการใช้งาน JavaScript บน ESP8266 ไม่ยากเลยใช่ไหมครับ

บทความหน้าเรามาเชื่อมต่อ WiFi กันและทดลองอะไรกันอีกคอยติดตามครับผม

สามารถเข้าไปดูตัวอย่างเพิ่มเติมได้ที่เว็บของ Espruino ได้เลยครับด้านล่าง

References

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s