Category: Developer

งานพัฒนาระบบ, เขียนโปรแกรม

  • Raspberry Pi 3 [LCD Text Display with Python]

    จากตอนที่แล้ว เราทำการเชื่อมต่อจอ LCD 16×2 และเขียน Basic Python ให้สามารถแสดงข้อความง่ายๆ ได้แล้ว

    ตอนนี้เราจะลองนำค่าที่อยู่ในตัว Raspberry Pi 3 มาแสดง เช่น

    Date & Time
    Network Adapter IP Address
    CPU Percentage Usage
    CPU Temperature
    Memory Total
    Memory Usage
    Memory Free
    Disk Total
    Disk Usage
    Disk Free

    เป็นต้น

     

    ** ส่วนตัวผมจะถนัดใช้ nano เป็น text editor นะครับ ส่วนท่านอื่นที่ไม่คล่อง จะใช้ผ่าน vi หรือ text editor บน gui ก็ไม่ว่ากันครับ **

    ** ไฟล์ทั้งหมดผม mkdir LCD เอาไว้บน home directory ของ user: pi ครับ **
    ซึ่งดาวน์โหลดตัวอย่าง ได้ที่นี่ จากนั้นนำไฟล์ RPi_LCD_Driver.py (จากตอนที่แล้ว) วางไว้ที่ directory เดียวกัน

     

    การแสดงวัน/เวลาบนหน้าจอ

    ใช้คำสั่งเพื่อสร้างไฟล์ sudo nano show_dt.py จากนั้นเขียนโค้ดตามด้านล่างนี้ครับ

     

    import RPi_I2C_Driver
    from datetime import datetime
    mylcd = RPi_I2C_Driver.lcd()

    while True:
        mylcd.lcd_display_string(“%s” %datetime.now().strftime(“%d/%m/%Y”), 1)
        mylcd.lcd_display_string(“%s” %datetime.now().strftime(“%H:%M:%S.%f”), 2)

     

    while True เนื่องจากต้องการให้รันแบบ infinite loop แสดงวันเวลาโดยที่

    %d แสดงวันที่
    %m แสดงเดือน
    %Y แสดงปี ค.ศ.

    %H แสดงหลักชั่วโมง
    %M แสดงหลักนาที
    %S แสดงหลักวินาที
    %f แสดง milli-seconds

     

    เมื่อทดลองรันด้วยคำสั่ง sudo python show_dt.py หน้าจอ LCD จะแสดงดังตัวอย่างข้างล่างนี้


    หลัก milli-seconds จะวิ่งเร็วมากจนหน้าจอแสดงไม่ทัน

    จากนั้นท่านจะเห็นว่าไม่สามารถพิมพ์คำสั่งอื่นๆ ที่ terminal ได้อีก เนื่องจากโปรแกรมรันอยู่นั่นเอง ให้ท่าน Ctrl+C ออกมา

     

    การแสดงค่า IP Address

    ใช้โค้ดด้านล่างนี้ พร้อมกับเซฟไว้ในชื่อ myip.py

     

    import RPi_I2C_Driver
    import socket

    mylcd = RPi_I2C_Driver.lcd()

    s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
    s.connect((‘psu.ac.th’, 80))
    ip = s.getsockname()[0]
    s.close()

    mylcd.lcd_display_string(“IP Address:”, 1)
    mylcd.lcd_display_string(ip, 2)

     

    หน้าจอ LCD ก็จะแสดงข้อความดังนี้

    ** มีวิธีการเขียนแสดง ip address อีกหลายวิธี แต่ใช้วิธีนี้เนื่องจากเป็นวิธีที่จะได้ ip address ที่ใช้งานจริง เพราะในบางกรณีจะได้ loopback ip 127.0.0.1 แทน และในบางแบบ ก็สามารถระบุ interface เช่น eth0 หรือ wlan0 ได้ด้วย **

     

    ต่อจากนี้ไปจะเป็นการเขียนเพื่อแสดงค่า Environment ของเครื่อง (เช่นเดียวกับ Performance ใน Task Manager ของ Windows) และเนื่องจากหน้าจอ LCD มีขนาดจำกัด จึงได้เขียนให้มีการวนแสดงค่าต่างๆ ออกมาตามเวลาที่กำหนด

     

    ซึ่งเราจะต้องทำการอาศัย library ชื่อ python package ชื่อ psutil มาใช้เป็น library เพื่อดู process และเพื่อทำ system monitoring ครับ

     

    ทำการติดตั้ง psutil ด้วยคำสั่งต่อไปนี้

    sudo apt-get install build-essential python-dev python-pip

     

    จากนั้นทำการติดตั้ง psutil ด้วย PIP คำสั่ง

    sudo pip install psutil

     

    จากนั้นทำการทดสอบการติดตั้ง จะต้องไม่แสดง error ให้เห็น (ไม่แสดงอะไรเลยนั่นเอง)

    sudo python -c “import psutil”

     

    ตามตัวอย่างต่อไปนี้

     

    เมื่อเรียบร้อยแล้ว ให้ท่านลองเขียนโค้ดตามด้านล่างนี้ จากนั้นเซฟไว้ในไฟล์ชื่อ resource_mon.py

     

    import os
    import time
    import socket
    import psutil
    import RPi_I2C_Driver

    mylcd = RPi_I2C_Driver.lcd()

    # Return CPU temperature as string
    def getCPUtemperature():
        res = os.popen(‘vcgencmd measure_temp’).readline()
        return(res.replace(“temp=”,””).replace(“‘C\n”,””))

    # Return RAM info (in kb)
    # [0]: total RAM
    # [1]: RAM in used
    # [2]: free RAM
    def getRAMinfo():
        p = os.popen(‘free’)
        i = 0
        while 1:
            i = i + 1
            line = p.readline()
            if i==2:
                return(line.split()[1:4])

    # Return disk info (with unit)
    # [0]: disk space total
    # [1]: disk space in used
    # [2]: disk space remaining
    # [3]: percentage of used space
    def getDiskInfo():
        p = os.popen(“df -h /”)
        i = 0
        while 1:
            i = i +1
            line = p.readline()
            if i==2:
                return(line.split()[1:5])

    #CPU Usage
    CPU_usage = str(psutil.cpu_percent(interval=1))

    # CPU Temp
    CPU_temp = getCPUtemperature()

    # RAM info (converted to MB)
    RAM_info = getRAMinfo()
    RAM_total = round(int(RAM_info[0]) / 1000,1)
    RAM_used = round(int(RAM_info[1]) / 1000,1)
    RAM_free = round(int(RAM_info[2]) / 1000,1)

    #Disk info
    DISK_info = getDiskInfo()
    DISK_total = DISK_info[0]
    DISK_free = DISK_info[2]
    DISK_perc = DISK_info[3]

    while True:
     mylcd.lcd_display_string(“CPU Temperature:”, 1)
     mylcd.lcd_display_string(CPU_temp + ” DegCelcius”, 2)
     time.sleep(5)
     mylcd.lcd_clear()
     mylcd.lcd_display_string(“CPU Usage:”, 1)
     mylcd.lcd_display_string (CPU_usage + “%”, 2)
     time.sleep(5)
     mylcd.lcd_clear()
     mylcd.lcd_display_string(“RAM Total/Used”, 1)
     mylcd.lcd_display_string(str(RAM_total) + ” / ” + str(RAM_used) + “MB”, 2)
     time.sleep(5)
     mylcd.lcd_clear()
     mylcd.lcd_display_string(“DISK Total/%Used”, 1)
     mylcd.lcd_display_string(str(DISK_total) + ” / ” + str(DISK_perc), 2)
     time.sleep(5)
     mylcd.lcd_clear()

     

    โดยในโค้ดนี้จะมีการเขียนแยก method และเขียนคำอธิบายเอาไว้ใน comment ของโค้ดให้แล้ว
    สามารถนำปรับการแสดงผลได้ตามที่ท่านต้องการครับ และเมื่อรันด้วยคำสั่ง sudo python resource_mon.py
    ก็จะพบกับหน้าจอวนไปเรื่อยๆ ดังนี้

               

    บนซ้าย แสดงอุณหภูมิ CPU
    บนขวา แสดง CPU Usage %
    ล่างซ้าย แสดงการใช้ RAM ทั้งหมด/ที่ใช้ไป
    ล่างขวา แสดงการใช้ DISK ทั้งหมด/%ที่ใช้ไป

               

     

    ท่านสามารถปรับค่าที่ต้องการให้แสดงได้ตามที่ต้องการ
    โดยค่าที่สามารถดึงมาใช้ได้ จะ comment เอาไว้ในโค้ดของ method ที่ทำการ assign ค่าให้กับตัวแปรมาแสดง

     

    ผิดพลาดประการใด ขออภัยมา ณ โอกาสนี้ครับ

     

    สำหรับตอนหน้า จะเป็นการเชื่อมกับเซนเซอร์ภายนอก

    จะเป็นเซนเซอร์อะไรนั้น ติดตามต่อตอนหน้า ในอีกระยะเวลาหนึ่ง

     

    สวัสดีครับ

  • Raspberry Pi 3 [Writing Text to 16×2 LCD]

    จากตอนที่แล้วเราได้ทำการเชื่อมต่อ hardware ซึ่งได้แก่ จอ LCD ขนาด 16×2 ผ่าน I2C Module ไปเรียบร้อยแล้วนั้น

    เราจะเริ่มทำการ Config I2C และเขียน Python เพื่อแสดงข้อความตัวอักษรอย่างง่าย

     

    Enable I2C Module

    เริ่มด้วยการ login เข้าสู่ Raspberry Pi และใช้คำสั่ง sudo raspi-config บนหน้าจอ Terminal

    จากนั้นเลือก 5 Interfacing Option และเลือก P5 I2C (Enable/Disable automatic loading…)

    ทำการคอนเฟิร์ม ด้วยการตอบ YES จากนั้น Reboot

     

    จากนั้นทำการอัพเดทไฟล์ /boot/config.txt ด้วยคำสั่ง sudo nano /boot/config.txt

    ใส่ข้อความ (หรือ uncomment) ต่อไปนี้

    dtparam=i2c1=on

    dtparam=i2c_arm=on

    จากนั้นทำการ reboot ครับ

     

    ลองใช้คำสั่ง sudo i2cdetect -y 1 เพื่อดูว่าเจอ I2C Module หรือไม่ ซึ่งผลที่ได้คือ address ของอุปกรณ์ (อาจแตกต่างกันไปในแต่ละเครื่อง ซึ่งในที่นี้คือ address 0x3f นั่นเอง)

     

    จากนั้นทำการตรวจสอบว่ามีการติดตั้ง Python ไว้หรือยัง ด้วยการทดลองเรียกใช้ซะเลย ด้วยคำสั่ง

    python3 จะพบกับหน้าจอดังนี้ (ใช้คำสั่ง exit() เพื่อออกกลับไปยัง prompt เดิม)

    แต่ถ้าหากยังไม่เคยติดตั้ง ให้ติดตั้งด้วยคำสั่ง sudo apt-get install python ครับ

     

    เริ่มเขียน Python เพื่อแสดงตัวอักษรบน LCD กันเลย

    เนื่องจากเราไม่ใช่คนแรกในโลกที่ใช้งานส่วนนี้ เพื่อเป็นการประหยัดเวลา เราจะทำการดาวน์โหลด library มาใช้งาน

    ซึ่ง ดาวน์โหลดได้ที่นี่ (ต้อง Extract Zip จะเจอไฟล์  RPi_I2C_Driver.py) โดยจะต้องทำการแก้ไข บันทัดที่ 54 ADDRESS = 0x3f ให้เป็น Address ของเราเอง (ต้นฉบับจากที่นี่ https://gist.github.com/DenisFromHR/cc863375a6e19dce359d)

     

    จากนั้นลองทำการเขียนกันดูครับ

    import RPi_I2C_Driver
    from time import *

    mylcd = RPi_I2C_Driver.lcd()
    mylcd.lcd_display_string(“Hello PSU !”, 1)

    เซฟไฟล์ชื่อ hello.py จากนั้นสั่งรันด้วยคำสั่ง python hello.py จะพบว่า LCD สามารถแสดงข้อความได้แล้ว

     

    คำสั่งพื้นฐานอื่นๆ ที่อาจต้องใช้ได้แก่

    mylcd.lcd_display_string(“Hello PSU !”, 2, 3) แสดงข้อความที่ row 2, column 3

    mylcd.lcd_clear() เพื่อเคลียร์หน้าจอ

    เป็นต้นครับ

     

    สำหรับตอนหน้า จะเป็นเรื่องของการแสดงข้อความอื่นๆ ในระบบ เช่น วัน/เวลา, IP Address, CPU/Memory/Disk Usage ครับ

     

    ผิดพลาดประการใด ขออภัยมา ณ โอกาสนี้ครับ

     

     

     

     

  • Raspberry Pi 3 [Drive 16×2 LCD with I2C Interface]

    หลังจากตอนที่แล้วเราได้ทำการ setup โปรแกรมที่เราต้องการ

    ในตอนนี้ขอพูดถึงอุปกรณ์ต่อพ่วงกันบ้าง เพื่อให้ดูเหมือนเข้าสู่ยุค IoT (Internet Of Things) มากขึ้น นั่นคือจอ LCD ระดับเบื้องต้น ขนาด 16×2 ดังรูปนี้

    ซึ่งอุปกรณ์ตัวนี้ สามารถแสดงผลได้ 2 แถว แถวละ 16 ตัวอักษร ซึ่งเพียงพอในระดับเบื้องต้นสำหรับการเรียนรู้การเขียนโปรแกรมครับ

    โดยในตลาดจะมีขายหลายรุ่น เช่น 16×2, 20×4 ไปจนถึง 128×64 อีกทั้งยังมี จอสีประเภท TFT 2.4 นิ้ว, 3 นิ้ว, 3.2 นิ้ว, 4 นิ้ว เป็นต้น และมีแบบหน้าจอสัมผัสให้เลือกใช้งานอีก มากมาย

     

    การเชื่อมต่อจอ 16×2 กับบอร์ด Raspberry Pi 3

    โดยทั่วไปแล้ว จะต้องทำการเชื่อมต่อดังรูปด้านล่างนี้

     

             

    การเชื่อมต่อแบบ 4 bits (ซ้าย) – การเชื่อมต่อแบบ 8 bits (ขวา)

    จะเห็นว่าเป็นการเชื่อมต่อที่ยุ่งยาก ใช้สายหลายเส้น และยากต่อการปรับเปลี่ยนการใช้งาน ดังนั้นจึงมึโมดูลที่เข้ามาช่วยตรงนี้คือ I2C

     

    I2C คืออะไร

    I2C คือบัสการเชื่อมต่ออนุกรมแบบ Synchronous ด้วยสายสัญญาณเพียง 2 เส้น (แต่จริงๆ ต่อ 4 เส้น ได้แก่ SDA, SLC, +5V และ GND) โดยจะมีสายสัญญาณข้อมูล คือ SDA (Serial Data Line) และสายสัญญาณนาฬิกา คือ SLC (Serial Clock Line) โดยแบ่งการทำงานออกเป็น 4 โหมดตามความเร็วดังนี้

    1. Normal Mode ความเร็ว 100Kbps
    2. Fast Mode ความเร็ว 400Kbps
    3. Fast Mode Plus ความเร็ว 1Mbps
    4. High Speed ควาามเร็ว 3.4Mbps

     

    ซึ่งเมื่อเป็นการเชื่อมต่อแบบอนุกรม ทำให้เราสามารถใช้งาน I2C ได้มากกว่าหนึ่งอุปกรณ์บนสายเพียง 2 เส้น โดยจะเลือกติดต่อกับอุปกรณ์ใดได้ด้วยการกำหนดที่อยู่ (Address) ของ Hardware ให้กับอุปกรณ์

     

    และเนื่องด้วยความง่ายของการใช้งานของ I2C ทำให้อุปกรณ์จอ LCD ส่วนใหญ่จะทำการติดตั้งมาพร้อมกับจอแล้ว ดังรูป

              

    I2C Module คือโมดูลสีเข้มในรูป
    บอร์ดสีเขียวคือ ด้านหลังของจอ LCD 16×2 ซึ่งได้ทำการเชื่อมต่อเรียบร้อยแล้ว

     

    เริ่มทำการเชื่อมต่อกับ Raspberry Pi

    โดย I2C จะต้องทำการเชื่อมต่อ 4 เส้น คือ +5V, GND, SDA, SLC กับ Pinout ของ Raspberry Pi 3

    ดูจากข้อมูล Alternate Function เราจะต้องทำการต่อสาย SDA ที่ Pin 3, SCL ที่ Pin 5
    และ +5V ที่ Pin 2 หรือ ส่วน GND นั้นมี Pin 6, 9, 25, 39, 14, 20, 30 หรือ 34 ให้เลือก

     

         

    จากนั้นทำการ Power On Raspberry PI 3 ขึ้นมาครับ จะพบว่าหน้าจอ LCD ติดพร้อมไฟ Backlight (แต่ไม่มีตัวอักษรอะไรแสดง เพราะเรายังไม่ได้โปรแกรมครับ)

     

    หน้าจอสามารถปรับ Contrast (ความเข้มของตัวอักษร) และสามารถ เปิด/ปิด ไฟ backlight ได้ด้วย Jumper บนโมดูล I2C ครับ

     

    ตอนต่อไป จะเป็นการเริ่มเขียน Python เพื่อแสดงผลตัวอักษร

     

    ผิดพลาดประการใด ขออภัยมา ณ โอกาสนี้ครับ

  • Raspberry Pi 3 [Basic Configuration]

    หลังจากเราได้ติดตั้ง OS แล้ว ต่อไปจะเป็นการเชื่อมต่อกับเครือข่าย LAN หรือ Wi-Fi

    ถ้าเป็นสายแลน ก็ไม่ยากครับ เสียบสายเข้าไปเลย โดย default config eth0 จะเป็น DHCP Client อยู่แล้ว

    ส่วน Wi-Fi นั้น จากการหาข้อมูลชิบBroadcom BCM43438 Wireless Controller นั้น เหมือนจะรองรับเฉพาะ 2.4GHz ครับ

     

    ผมจะเลือกทำการ connect Wi-Fi ก่อนนะครับ หลังจากนั้นค่อยเซ็ตอัพวัน/เวลา และโปรแกรม

    เรื่องของการ connect เข้า Wi-Fi ที่เป็น WPA2 Enterprise นั่นก็อาจจะเป็นปัญหาเบื้องต้นที่เจอครับ คือ โดย default แล้วนั้น จะไม่ support ดังรูปข้างล่างนี้ ทำให้ connect เข้าโดยตรงไม่ได้

    ต้องทำการแก้ไขปัญหาดังนี้ครับ

    1.เปิด terminal จากนั้นแก้ไฟล์ wpa_supplicant.conf โดยใช้คำสั่ง

    sudo nano /etc/wpa_supplicant/wpa_supplicant.conf

     

    2.เพิ่มบรรทัดต่อไปนี้เข้าไป

    network={
    ssid=PSU WiFi (802.1x)
    priority=1
    proto=RSN
    key_mgmt=WPA-EAP
    pairwise=CCMP
    auth_alg=OPEN
    eap=PEAP
    identity=”YOUR_PSU_PASSPORT_USERNAME
    password=hash:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    phase1=“peaplabel=0”
    phase2=“auth=MSCHAPV2”
    }

     

    เซฟไฟล์ด้วยการกด Ctrl + X ตอบ Y กด Enter กลับมาที่หน้าจอ Terminal ตามเดิม

    ข้อมูลที่ท่านสามารถปรับแก้ได้คือตัวอักษรสีแดงด้านบน ได้แก่

    ssid <= ชื่อ ssid ซึ่งบางที่อาจจะไม่ใช่ดังในตัวอย่าง

    identity <= username ของ psu passport อยู่ภายใต้เครื่องหมาย ” ”

    password=hash: มาจากการคำนวณ hash ด้วยคำสั่งต่อไปนี้

    echo -n YOUR_PASSWORD | iconv -t utf16le | openssl md4

    จากนั้นเอาค่ามาใส่แทนที่ xxxxxxxx ตามตัวอย่างข้างบน

     

    3.เมื่อเรียบร้อยแล้วให้ restart service networking ซักครั้งหนึ่งด้วยคำสั่ง

    sudo service networking restart

     

    4.หากไม่เกิดการเปลี่ยนแปลงอะไร ให้ reboot ซักครั้ง

    sudo reboot

     

    5.เมื่อ reboot กลับมาแล้ว ท่านจะพบว่ามีการเชื่อมต่อ SSID ตามที่ท่านได้เซ็ตเอาไว้เรียบร้อยแล้ว ดังรูปด้านล่างนี้

     

    ** คำสั่งที่ท่านพิมพ์ผ่าน Terminal จะถูกเก็บ History เอาไว้ รวมทั้งรหัสผ่านที่ท่านได้สร้างเป็น hash เอาไว้ ท่านจะต้องทำการเคลียร์ออก ด้วยคำสั่ง

    history -c (เพื่อเคลียร์ทั้งหมด) หรือ

     

    history | tail เพื่อดูหมายเลขบรรทัด เช่น 300  จากนั้นใช้คำสั่ง

    history -d 300 เพื่อลบเฉพาะบรรทัดนั้น

     

    เมื่อเสร็จเรื่องการเชื่อมต่อแล้ว จากนั้นควรทำการเซ็ตอัพวันเวลา / timezone ให้เรียบร้อย

    เปิด Terminal จากนั้นพิมพ์คำสั่ง sudo dpkg-reconfigure tzdata

             

    เลือก Asia และเลือก Bangkok กด Enter เป็นอันเสร็จสิ้นครับ

     

    จากนั้นควรทำการ sync time เพื่อให้ได้เวลาที่ถูกต้อง

    ** ใน Raspbian Stretch ส่วนของ NTP จะไม่ได้ถูกติดตั้งโดยอัตโนมัติ จะต้องทำการติดตั้งก่อนด้วยคำสั่งต่อไปนี้

    sudo apt install ntp

    รอจนเสร็จ จากนั้นทำการ enable ด้วยคำสั่ง

    sudo systemctl enable ntp

    และสั่งอัพเดทวัน/เวลา ด้วยคำสั่ง

    sudo timedatectl set-ntp 1

     

    สำหรับการติดตั้ง Software เพิ่มเติมนั้น สามารถทำได้โดยการใช้ Add / Remove Software

    (ขอกลับมาใช้ GUI บ้างครับ)

    ด้วยการกดที่ ICON Raspberry เลือก Preferences > Add/Remove Software

     

    จากนั้นท่านจะพบกับ package ให้เลือก ตามที่ท่านต้องการ จากนั้นกด Apply ได้ทันทีครับ

     

     

    และบางครั้งการทำงานผ่านหน้าจอ console ของ Raspberry Pi เอง อาจจะลำบาก ยากต่อการเข้าถึง จึงแนะนำให้ติดตั้ง Remote Desktop ด้วยครับ (ในที่นี้ เนื่องจากผมทำงานกับ Windows ซะเป็นส่วนใหญ่ จึงขอติดตั้งเฉพาะ RDP นะครับ ส่วนวิธีอื่น (เช่น VNC) ท่านสามารถหาอ่านได้ทั่วไปเลยครับ)

     

    ทำการติดตั้ง package RDP ด้วยคำสั่งต่อไปนี้

    sudo apt-get install xrdp

     

    เมื่อเรียบร้อยแล้วท่านก็จะสามารถเข้าผ่าน Remote Desktop บน Windows ได้ทันที

    โดย default username จะเป็น pi และ default password ก็คือ raspberry ครับ

     

    และสำหรับการใช้งานสำหรับคนไทย ขาดไม่ได้คือการเพิ่มคีย์บอร์ดภาษาไทย เพื่อให้พิมพ์ไทยได้ ด้วยวิธีการดังต่อไปนี้

     

    คลิ๊กขวาบน Taskbar ด้านบน เลือก Panel Settings

     

    เลือกแทบ Panel Applets จากนั้นกดปุ่ม Add

     

    เลือก Keyboard Layout Handler จากนั้นกด Add

     

    กด Preferences เพื่อแก้ไขค่าของ Keyboard Layout Handler

     

             

    นำเครื่องหมายถูก หน้า Keep system layouts ออก (unchecked) จากนั้นกดปุ่ม Add เพื่อเพิ่ม Keyboard Layouts

    เลือก th Thai จากนั้นกด OK ออกมาจากหน้าจอ Add Keyboard Layout

    หากต้องการปรับปุ่มสลับภาษา สามารถเลือกได้ที่ Change Layout Option โดยมีให้เลือกตามความถนัด

     

    จากนั้นสังเกตมุมขวาบน จะเห็นสัญลักษณ์ธงชาติ แสดงภาษาที่ใช้งานอยู่ ณ ขณะนั้นครับ

     

     

    สำหรับตอนต่อไป จะเป็นการเชื่อมต่อกับ I2C Module กับจอ LCD ขนาด 16×2 เพื่อแสดงผลตัวอักษร และการเขียน Python เบื้องต้นครับ

     

    ผิดพลาดประการใด ขออภัยมา ณ ที่นี้ครับ

     

  • Raspberry Pi 3 [Assemble & OS Installation]

    ใน part นี้ขอพูดในส่วนของการติดตั้ง heat sink, ประกอบลงใน enclosure และติดตั้ง OS Raspbian ครับ

     

    Heat Sink จำเป็นไหม

    โดยส่วนตัวผมว่าจำเป็นครับ เพราะอุปกรณ์อิเล็กทรอนิกส์เมื่อมีการทำงาน จะก่อให้เกิดความร้อน ความร้อนทำให้เกิดการเสื่อมของอุปกรณ์ และจากการหาข้อมูล พบว่าการติดตั้ง Heat Sink + พัดลม จะทำให้อุณหภูมิของอุปกรณ์ (โดยเฉพาะ CPU และ GPU) นั้นไม่สูงเกินไปครับ (อ้างอิงจาก https://www.youtube.com/watch?v=e6okZKRwnTQ)

     

     

    Heat Sink อลูมิเนียมสีดำขนาดเล็ก เพียงพอต่อการใช้งานทั่วๆ ไป

     

    ติดตั้งด้วยการใช้เทปกาวสองหน้าแบบนำความร้อน (ติดมากับ Heat Sink) แปะลงไปบนตัว CPU และ GPU ได้เลย
    ** กรณีที่ไม่มีเทปกาวสองหน้านำความร้อน ให้ใช้กาวซิลิโคน นำความร้อน แทนครับ **

     

    Enclosure หรือกล่อง จำเป็นหรือไม่ ?

    บอกเลยว่า ขึ้นอยู่กับบุคคลครับ ซึ่ง Enclosure ก็มีหลายแบบให้เลือกใช้ ทั้งแบบเป็นกล่องเดี่ยวๆ (แบบที่จะแสดงให้ดูนี้), แบบที่เป็น Stack, แบบอลูมิเนียมเพื่อระบายความร้อนแบบ Passive และอีกมากมายครับ ประเด็นคือ เลือกให้ตรงกับความต้องการดีกว่าครับ ทั้งนี้ก็เพื่อความเป็นระเบียบและเรียบร้อยของอุปกรณ์นั่นเองครับ

     

     

    ผมเลือกใช้เคสที่เป็นอะคริลิค พร้อมช่องพัดลม เพื่อติดตั้งไว้ระบายความร้อนของ Heat Sink อีกทีนึงครับ

     

     

    ประกอบเรียบร้อยพร้อมติดตั้งพัดลมครับ
    ** ผมติดตั้งพัดลมแบบดูดเข้านะครับ เพื่อให้ลมเย็นจากภายนอกปะทะกับ Heat Sink โดยตรง **

    ** พัดลมติดตั้งโดยใช้ไฟจาก GPIO PIN 4 (+5V) และ 6 (GND) ครับ **

     

    พร้อมแล้วสำหรับการใช้งานครับ ต่อไปเตรียม microSD สำหรับติดตั้ง OS กันครับ

    ถ้าหลายท่านเคยผ่านตา จะเห็นว่าส่วนใหญ่จะใช้โปรแกรม SD Card Formatter ครับ แต่ผมจะใช้อีกตัวนึงตามคำแนะนำของ raspberrypi.org

    นั่นคือ Etcher ครับ

    สิ่งที่ต้องมีคือ

    • SD Card 8GB ขึ้นไป (Class 4 หรือ 10 แล้วแต่ท่านสะดวกเลยครับ ผมลองแล้ว ความเร็ว ไม่ต่างกันเท่าไหร่)
    • Card Reader และ microSD Adapter *ถ้าจำเป็น
    • 7-Zip หรือโปรแกรมสำหรับ Extract Zip File
    • โปรแกรม Etcher ดาวน์โหลดได้ที่นี่
    • ผมติดตั้ง Raspbian เพราะงั้นต้องมี image file ซึ่ง ดาวน์โหลดได้ที่นี่

    ** เมื่อเข้าไปหน้าดาวน์โหลด ท่านจะเป็น NOOBS และ RASPBIAN ให้เลือก RASPBIAN นะครับ ซึ่งจะได้ Latest Version **

    ** NOOBS (New Out Of the Box Software) คือตัวติดตั้งที่ออกมาจาก Official Raspberry Pi เอง โดยจะมีพื้นฐานจาก Raspbian นั่นเอง แต่มีการปรับให้สามารถทำการติดตั้งได้ง่ายขึ้น พร้อมโปรแกรมอื่นๆ สามารถเลือกติดตั้งได้ทันทีจาก internet **

     

    Flash SD Card

       1.ทำการใส่การ์ดใน Card Reader จากนั้นเปิดโปรแกรม Ether

    2.เลือก Image File จากนั้นกด Flash

             

    3.รอจนเสร็จ

    4.นำ microSD Card ไปใส่ใน Raspberry Pi จากนั้นทำการต่อสายอุปกรณ์ให้เรียบร้อย (Power, HDMI, Keyboard + Mouse)

    ** เพื่อป้องกันความเสียหายที่อาจเกิดขึ้นกับ microSD Card ให้ทำการ Power Off ทุกครั้งก่อนถอด/ใส่ การ์ดนะครับ **

     

    5.พร้อมแล้วสำหรับการ Power On (Raspberry Pi จะไม่มีสวิตซ์สำหรับเปิดนะครับ แค่เสียบเสีย micro USB ที่มีไฟ ก็จะทำการเปิดเองโดยอัตโนมัติ)

    ** เนื่องจากผมไม่มี Monitor ที่ Input HDMI ได้โดยตรง จึงต้องใช้ตัวแปลงจาก HDMI –> VGA ครับ **

     

        

    รูปซ้าย รูประหว่างการ boot (ถ่ายไม่ค่อยทัน)

    รูปขวา แสดงหน้า Desktop พร้อมใช้งานได้ทันทีครับ

     

    ตอนหน้า จะเป็นเรื่องของการเซ็ตอัพทั่วๆไป, การเชื่อมต่อ Wi-Fi และการติดตั้งโปรแกรมพื้นฐานอย่างง่ายครับ

     

    ผิดพลาดประการใด ขออภัยมา ณ โอกาสนี้ครับ

     

  • Raspberry Pi 3 [Overview]

        

    Raspberry Pi (ราสเบอร์รี่ พาย) คือ เครื่องคอมพิวเตอร์ ขนาดเล็ก (ประมาณบัตรทั่วไป) ที่มีราคาถูกกว่าคอมพิวเตอร์ ราคาปกติมาก (1,xxx บาท ขึ้นอยู่กับว่าผลิตจากประเทศไหน China, UK หรือ Japan) สามารถต่อเข้ากับจอคอมพิวเตอร์ (ผ่าน HDMI) หรือจะใช้ตัวแปลง (HDMI to VGA)  และยังรองรับเมาส์/คีย์บอร์ด/อุปกรณ์อื่นๆ ผ่านทาง USB Port อีกทั้งยังสามารถต่อสายแลน (10/100 RJ45) ได้อีกด้วย (มี Bluetooth และ Wi-Fi 802.11n Controller On-Board)

     

     

             

     

     

    Specification (ข้อมูลจาก: https://www.raspberrypi.org/magpi/raspberry-pi-3-specs-benchmarks/)

    SoC: Broadcom BCM2837
    CPU: 4× ARM Cortex-A53, 1.2GHz
    GPU: Broadcom VideoCore IV
    RAM: 1GB LPDDR2 (900 MHz)
    Networking: 10/100 Ethernet, 2.4GHz 802.11n wireless
    Bluetooth: Bluetooth 4.1 Classic, Bluetooth Low Energy
    Storage: microSD
    GPIO: 40-pin header, populated
    Ports: HDMI, 3.5mm analogue audio-video jack, 4× USB 2.0, Ethernet, Camera Serial Interface (CSI), Display Serial Interface (DSI)

     

     

    (รูปจาก element 14)

    Raspberry Pi ทำอะไรได้บ้าง ?

    เรียกว่าเป็นเครื่องคอมพิวเตอร์ desktop เครื่องหนึ่งเลยก็ว่าได้ อาจจะไม่พลังสูงเหมือนกับเครื่อง PC แต่ก็เพียงพอสำหรับเด็กๆ ลูกๆ หลานๆ ได้ใช้งาน พิมพ์งาน เล่นเกมจำนวนหนึ่ง และที่สำคัญสามารถฝึกการเขียนโปรแกรม (เช่น Python) ได้อีกด้วย ซึ่งสามารถใช้งานได้ทันที สามารถต่อ I/O (Input/Output) ร่วมกับเซนเซอร์ต่างๆ อีกทั้งสามารถทำเป็น Media Center ได้อีกด้วย

     

     

     

    Raspberry Pi VS Arduino

    ทั้งสองอย่างอย่างนี้ ถ้ามองกันจริงๆ แล้วแตกต่างกันพอสมควร โดยที่ Arduino (อา-ดู-อิ-โน่ หรือ อาดุยโน่) เป็น Microprocessor ตระกูล AVR เอาไว้รันโปรแกรมเล็กๆ หรือเอาไว้ต่อพ่วงกับอุปกรณ์อื่นๆ เช่น เซนเซอร์, รีเลย์ ได้อย่างง่ายกว่า Raspberry Pi ซึ่งอย่างที่กล่าวเอาไว้ก่อนหน้า Raspberry Pi คือ คอมพิวเตอร์ขนาดจิ๋ว สามารถลงระบบปฏิบัติการ (OS) ใช้งานแทนคอมพิวเตอร์ได้

     

    แล้วจะเอา Raspberry Pi มาทำแบบ Arduino ได้มั้ย ?

    คำตอบคือ ได้ครับ เนื่องจาก Raspberry Pi ก็มี GPIO (General Purpose Input Output) ให้จำนวนหนึ่ง สามารถคอนโทรลให้เป็น “1” หรือ “0” ได้ตามใจชอบ ด้วยการเขียนโปรแกรมควบคุมแต่ละ Pin (เหมือนกับ Microcontroller) ด้วยภาษา C หรือ Python

     

    (รูปจาก https://www.raspberrypi.org/blog/introducing-pixel/)

    แล้ว OS ที่จะเอามาติดบน Raspberry Pi มีอะไรบ้าง

    โดยส่วนใหญ่จะเป็น OS ในตระกูลของ Linux ครับ ที่สามารถทำงานบน Processor ARM ได้ ซึ่งในเว็บของ raspberrypi.org นั้น แนะนำเป็น “Raspbian” นอกจากนี้ยังมี Windows 10 IoT ก็ยังสามารถใช้งานได้อีกด้วย ซึ่งมีโอกาสอาจจะได้ลองติดตั้งให้ดูครับ

     

    ตอนหน้า จะเป็นเรื่องติดตั้ง OS “Raspbian” ให้กับ Raspberry Pi ครับ

     

    ผิดพลาดประการใด ขออภัยครับ

  • การใช้ GitHub Command Line #newbie

    Prerequisite

    • ต้องมี GitHub Account ก่อน ทำตามวิธีการนี้ https://help.github.com/articles/signing-up-for-a-new-github-account/
    • สร้าง GitHub Repository บน Web ก่อน  (ในที่นี้ จะสร้าง Repository ชื่อ mynewrepo) ซึ่งจะได้ URL มาเป็น https://github.com/your-username/mynewrepo.git

    สร้าง local repository

    mkdir mynewrepo
    cd mynewrepo
    git init
    git status

    สร้างไฟล์ใหม่

    # สมมุติสร้างไฟล์ใหม่
    echo "Hello World" > mynewfile.txt
    git add .
    git status

    ทำการ Commit

    git commit -m "This is a first Commit"

    สร้าง Connection ระหว่าง Local Folder กับ GitHub Repository

    git remote add origin https://github.com/your-username/mynewrepo.git
    git push -u origin master

    จากนั้น ใส่ Username/Password ของ GitHub Account

    ไปดูผลงานใน Repository “mynewrepo” ที่ https://github.com/your-username/mynewrepo

    เมื่อมีการแก้ไขไฟล์

    echo "Hello New World" >> mynewfile.txt
    git status

    ทำการ เพิ่ม > Commit > Push

    git add .
    git commit -m "This is a second Commit"
    git push -u origin master

    วนไป

     

  • การปรับเปลี่ยนรูปแบบการแสดงผลเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsTravelMode

              ก่อนที่เราจะไปเริ่มเนื้อหาของบทความี้ ผู้เขียนต้องขอท้าวความเดิมตอนที่แล้วของบทความก่อน ซึ่งผู้เขียนได้พูดถึงวิธีการแสดงผลเส้นทางทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้นไว้ (สามารถศึกษาเพิ่มเติมได้จากบทความ : การแสดงเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้น )  สำหรับในบทความนี้ผู้เขียนจึงอยากต่อยอดการทำงาน และเพิ่มลูกเล่นให้กับการแสดงผลแผนที่ด้วยการปรับเปลี่ยนการกำหนดรูปแบบการแสดงผลของเส้นทางให้ผู้เยี่ยมชมเว็บไซต์  ซึ่งเราจะให้ผู้ใช้สามารถเลือกรูปแบบในการแสดงผลได้ว่า ต้องการดูเส้นทางในรูปแบบใดตามรูปแบบ Mode ที่ผู้ใช้เลือกมา เช่น เส้นทางเดิน ทางถนน หรือขนส่งสาธารณะ เป็นต้น โดยวิธีการดังกล่าวนี้เหมาะกับเว็บไซต์ที่มีความเกี่ยวข้องกับความต้องการที่ต้องการทราบเส้นทางในแต่ละรูปแบบ เพื่อเป็นประโยชน์ในการนำไปประยุกต์ใช้กับงานของแต่ละท่านได้ค่ะ

       ตัวอย่างผลลัพธ์ที่ได้จากบทความที่แล้ว 

    ซึ่งจากตัวอย่างโค้ดในบทความที่แล้ว การกำหนด DirectionsTravelMode เป็น DRIVIING ซึ่งในความเป็นจริงแล้วยังมีรูปแบบอื่นๆให้เลือกใช้ด้วยกันทั้งหมด 4 รูปแบบ ดังนี้

    DRIVING (Default):เป็นโหมดตั้งต้นให้หากไม่ได้มีการกำหนดไว้ ซึ่งเป็นโหมดที่แสดงเส้นทางการขับขี่ด้วยยานพาหนะ
    BICYCLING: เป็นโหมดสำหรับเส้นทางที่เตรียมไว้สำหรับผู้ขับขี่จักรยาน
    TRANSIT: เป็นโหมดสำหรับแสดงเส้นทางระบบขนส่งสาธารณะ เช่น  รถบัส รถไฟ หรือแม้แต่เครื่องบิน เป็นต้น
    WALKING: เป็นโหมดสำหรับแสดงเส้นทางการเดินถนน

              ซึ่งผู้เขียนจะขอยกตัวอย่างในส่วนของการเลือกรูปแบบเส้นทางและผลลัพธ์ของแต่ละรูปแบบ ดังตัวอย่างโค้ดต่อไปนี้

    • การกำหนดรูปแบบของเส้นทางในการแสดงผลบนแผนที่
    1. โค้ด Javascript
       <script type="text/javascript">
      function initialize() {
       // ประกาศเรียกใช้งาน DirectionsService เพื่อการแสดงผลให้มีลักษณะเป็น Global
       window.directionsService = new google.maps.DirectionsService();
       window.directionsDisplay = new google.maps.DirectionsRenderer();
       var map;
       var bounds = new google.maps.LatLngBounds();
       var mapOptions = {
       mapTypeId: 'roadmap'
       };
      
      // แสดงผลแผนที่ในหน้าจอตาม Element ที่กำหนด
       map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
       map.setTilt(45);
      
      // กำหนดพิกัดจุดให้กับจุดเริ่มต้นและเส้นสุด
       window.markers = [
       ['Place1', 51.501546, -0.142000],
       ['Place2', 51.512051,-0.091225]
       ];
      // ให้แสดงผลสิ่งที่ตั้งค่าไว้ในพื้นที่แผนที่ที่กำหนด
       directionsDisplay.setMap(map);
      // กำหนดค่าเริ่มต้นของรูปแบบให้เป็นเส้นทางการเดิน (walking mode)
       calcRoute();
      }
      // เป็นฟังก์ชั่นในการคำนวณเส้นทางระหว่างสองจุดพิกัดบนแผนที่และเลือกกำหนดค่า Mode ในการแสดงผล
       function calcRoute() {
        var selectedMode = document.getElementById('travelType').value;
        var request = {
       
        origin: new google.maps.LatLng(markers[0][1], markers[0][2]),
       
        destination: new google.maps.LatLng(markers[1][1], markers[1][2]),
      
      //// //กำหนดรูปแบบการแสดงผลเส้นทางโดยเริ่มต้นให้เป็นเส้นทางการเดิน(ตามรายการแรกที่เลือก)
        travelMode: google.maps.TravelMode[selectedMode]
        };
        
       directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
       directionsDisplay.setDirections(response);
       }
       });
       }
       </script>
    2. ส่วนของการแสดงผลใน body
      <body> 
      <div id="map_wrapper">
       <div id="map_canvas" class="mapping"></div>
      </div>
      <div id="travel_selector">
       <p><strong>Mode of Travel: </strong>
       <select id="travelType" onchange="calcRoute();">
       <option value="WALKING">Walking</option>
       <option value="BICYCLING">Bicycling</option>
       <option value="DRIVING">Driving</option>
       <option value="TRANSIT">Transit</option>
       </select></p>
      </div>
      </body>
    3. ผลลัพธ์ในแต่ละรูปแบบ
    • แบบที่ 1 DRIVING Mode :

     

    • แบบที่ 2 BICYCLING Mode:

    • แบบที่ 3 TRANSIT Mode:


    • แบบที่ 4 WALKING Mode:


                จากตัวอย่างจะเห็นได้ว่าเป็นพิกัดของประเทศในต่างแดน เนื่องจากก่อนหน้านี้ ผู้เขียนลองใช้พิกัดจุดบนพื้นที่ประเทศไทย แต่พบว่ามีบาง Mode ยังไม่รองรับ เช่น เส้นทางจักรยาน ซึ่งเมื่อเลือกกำหนดโหมดดังกล่าวจะไม่เห็นการเปลี่ยนแปลงใดๆ จึงหันไปยกตัวอย่างจาก London แทนเพื่อให้ผู้อ่านได้เห็นความแตกต่างในการแสดงผลแต่ละแบบได้ชัดเจนขึ้น แต่เพื่อไม่ให้เป็นการน้อยเนื้อต่ำใจกัน ผู้เขียนก็ได้ลองเอาพิกัดของพื้นที่ในประเทศไทยมาลองทำดูให้ผู้อ่านได้เห็นแถมมาด้วยว่าพื้นที่ของเราจะเห็นเส้นทางเป็นยังไงในแต่ละแบบกันบ้าง ดังนี้ค่ะ
      ตัวอย่างการแสดงเส้นทางระหว่างสนามบินสุวรรณภูมิและเขตจตุจักร
      1) แบบ Transit mode

       

      จะเห็นได้ว่า เมื่อคลิกที่รูปสัญลักษณ์เครื่องหมายคำพูด จะแสดงรายละเอียดเกี่ยวกับข้อมูลการขนส่งสาธารณะนั้นๆ เช่น รถเมล์สายใด รถไฟฟ้า BTS สายใด เป็นต้น

      2) แบบ Walking Mode


      3) แบบ Driving Mode

                จากบทความ จะเห็นได้ว่านี่เป็นอีกหนึ่งตัวอย่างในการเพิ่มลูกเล่นให้กับการใช้งานแผนที่เท่านั้น โดยยังมีอีกหลายวิธีการรอให้เราศึกษาเพื่อนำมาประยุกต์ใช้และเพิ่มความสามารถให้กับการใช้งานแผนที่ในเว็บไซต์ของเรา ผู้เขียนหวังว่าบทความนี้จะเป็นประโยชน์กับผู้อ่านสามารถหยิบยกไปใช้ประโยชน์ได้ไม่มากก็น้อย หากมีข้อผิดพลาดประการใดผู้เขียนขออภัยไว้ ณ ที่นี้ด้วยนะคะ ขอบคุณค่ะ ^^


      แหล่งข้อมูลอ้างอิง :

     

  • การแสดงเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้น

              หลังจากที่ก่อนหน้านี้ ผู้เขียนเคยได้มีโอกาสศึกษาบทความเกี่ยวกับความสามารถของ Google Map APIs มาบ้างแล้วนั้น ผู้เขียนเห็นว่าเรื่องเกี่ยวกับแผนที่นับเป็นอีกหัวข้อที่น่าสนใจในการพัฒนาเว็บไซต์ในปัจจุบัน โดยเฉพาะเว็บไซต์ที่มีส่วนเกี่ยวข้องกับสถานที่ และที่ตั้ง เพราะถือเป็นการเพิ่มลูกเล่นให้มีความตื่นตาตื่นใจยิ่งขึ้น โดยความสามารถของแผนที่ที่ใน Google Map APIs มีมาให้ใช้กันได้ในหลายรูปแบบ ขึ้นอยู่กับความต้องการของผู้พัฒนาแต่ละคน อาทิ การกำหนดพิกัดจุด การแสดงเส้นทาง การค้นหาละติจูด-ลองจิจูดจากการคลิกบนแผนที่ หรือจนกระทั่งการดึงพิกัดมาจากฐานข้อมูลเพื่อมาแสดงผล เป็นต้น โดยในความเป็นจริงแล้ว ลูกเล่นเกี่ยวกับการทำงานกับแผนที่ยังมีอีกมากมาย แต่ในบทความนี้ ผู้เขียนจะขอพูดถึงในส่วนของการแสดงเส้นทางระหว่างจุดสองจุดในแบบเบื้องต้นเพื่อทำความเข้าใจก่อนนำไปประยุกต์ใช้ ดังนี้

    การแสดงเส้นทางโดยเบื้องต้นเมื่อทราบจุดพิกัดละติจูด-ลองจิจูดบนแผนที่

    1. อ้างอิงไฟล์ที่ใช้ในการทำงานร่วมกับ Google Map APIs
      <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&language=en" async defer></script>
      
    2. ส่วนของ Javascript ที่ใช้ในการแสดงเส้นทางระหว่างพิกัด 2 จุดบนแผนที่
      <script type="text/javascript">
      /////////การกำหนดค่าละติจูด-ลองจิจูดระหว่าง 2 ตำแหน่ง ในที่นี้คือ มหาวิทยาลัยสงขลานครินทร์ และสวนสาธารณะหาดใหญ่
      var markers = [
       {
       "title": 'มหาวิทยาลัยสงขลานครินทร์',
       "lat": '7.006941', 
       "lng": '100.498412',
       "description": '<b>มหาวิทยาลัยสงขลานครินทร์:</b> (อังกฤษ: Prince of Songkla University; อักษรย่อ: ม.อ.) เป็นมหาวิทยาลัยแห่งแรกในภาคใต้ของประเทศไทย ตาม พระราชบัญญัติมหาวิทยาลัยสงขลานครินทร์ พ.ศ. ๒๕๑๑ ก่อตั้งในปี พ.ศ. 2510 ต่อมา พระบาทสมเด็จพระปรมินทรมหาภูมิพลอดุลยเดชได้พระราชทานชื่อเมื่อวันที่ 22 กันยายน พ.ศ. 2510 จึงถือว่าวันที่ 22 กันยายนของทุกปี เป็นวันสงขลานครินทร์'
       }
       ,
       {
       "title": 'สวนสาธารณะหาดใหญ่',
       "lat": '7.042899', 
       "lng": '100.507664',
       "description": '<b>สวนสาธารณะเทศบาลนครหาดใหญ่:</b> เป็นแหล่งพักผ่อนหย่อนใจของคนเมืองแห่งนี้ มีทัศนียภาพที่สวยงาม เต็มไปด้วยด้วยแมกไม้เขียวขจี มีอ่างเก็บน้ำขนาดใหญ่ สัตว์น้ำนานาชนิดมากมาย สมบูรณ์ด้วยธรรมชาติอันบริสุทธิ์ ที่รอคอยต้อนรับนักท่องเที่ยวให้ได้สัมผัสกับความร่มรื่นของพรรณไม้นานาชนิด'
       }
       
       ];
      ///////เป็นการกำหนดค่าต่างๆตอนที่ฟอร์มมีการโหลด
      
      window.onload = function () {
      
      //////กำหนดค่ากึ่งกลางการแสดงผลแผนที่ ระยะใกล้ และชนิดการแสดงผลของแผนที่
       var mapOptions = {
       center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP
       };
      
      //////ประกาศ Element ที่จะใช้ในการแสดงผล
       var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
       var infoWindow = new google.maps.InfoWindow();
      
       var lat_lng = new Array(); ///สร้างตัวแปรอาร์เรย์เพื่อเก็บค่าละติจูด-ลองจิจูด
       var latlngbounds = new google.maps.LatLngBounds();
      
      /// วนพื่อเก็บค่าละติจูด-ลองจิจูดในตัวแปรอาร์เรย์ และเก็บค่าในการพิกัดจุดของแต่ละจุดที่มี
       for (i = 0; i < markers.length; i++) {
       var data = markers[i]
       var myLatlng = new google.maps.LatLng(data.lat, data.lng);
       lat_lng.push(myLatlng);
      
      
       var marker = new google.maps.Marker({
       position: myLatlng,
       map: map,
       title: data.title
       });
      
       latlngbounds.extend(marker.position);
      
      //////กำหนดเมื่อมีอีเวนต์คลิก ให้แสดงผลรายละเอียดที่กำหนดไว้ในตัวแปรของ marker ที่กำหนดไว้ในแต่ละตำแหน่ง
       (function (marker, data) {
       google.maps.event.addListener(marker, "click", function (e) {
       infoWindow.setContent(data.description);
       infoWindow.open(map, marker);
       });
       })(marker, data);
       }
       map.setCenter(latlngbounds.getCenter());
       map.fitBounds(latlngbounds);
       
       //***********ส่วนของการแสดงเส้นทาง****************//
       
       //ประกาศ Path Array
       var path = new google.maps.MVCArray();
       
       //ประกาศการใช้งาน Direction Service
       var service = new google.maps.DirectionsService();
       
       //กำหนดสีของเส้นทางที่ต้องการ
       var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
       
       //วนลูปเพื่อวาดเส้นทางระหว่างจุดที่มีในแผนที่
       for (var i = 0; i < lat_lng.length; i++) {
       if ((i + 1) < lat_lng.length) {
       var src = lat_lng[i];
       var des = lat_lng[i + 1];
       path.push(src);
       poly.setPath(path);
       service.route({
       origin: src,
       destination: des,
       travelMode: google.maps.DirectionsTravelMode.DRIVING
      /////กำหนด Mode ในการแสดงผลเส้นทาง(จะกล่าวเพิ่มเติมในภายหลัง)
       }, function (result, status) {
       if (status == google.maps.DirectionsStatus.OK) {
       for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) 
      {
       path.push(result.routes[0].overview_path[i]);
       }
       }
       });
       }
       }
      
      </script>
    3. ส่วนของ body ในการแสดงผล
      <body>
       <form id="form1" runat="server">
      <div id="dvMap" style="width: 500px; height: 500px">
      </div>
       </form>
      </body>
    4. ตัวอย่างผลลัพธ์ที่ได้ หมายเหตุ: หากต้องการเปลี่ยนสีเส้นทางในการแสดงผล สามารถทำได้โดยการกำหนดสี จากโค้ดดังตัวอย่าง คือ
      var poly = new google.maps.Polyline({ map: map, strokeColor: ‘#4986E7‘ }); ซึ่งสามารถเปลี่ยน strokeColor ในส่วนของตัวอักษรสีน้ำเงินให้เป็นสีที่ท่านต้องการได้

              เอาล่ะค่ะ เราก็ได้เห็นวิธีการและตัวอย่างการแสดงเส้นทางระหว่างจุดพิกัดบนแผนที่กันไปพอหอมปากหอมคอกันแล้วนะคะ หวังว่าผู้อ่านแต่ละท่านจะสามารถนำเกร็ดเล็กเกร็ดน้อยเหล่านี้ไปประยุกต์ใช้งานต่อได้ไม่มากก็น้อย หากมีข้อผิดพลาดประการใดผู้เขียนขออภัยไว้ ณ ที่นี้ด้วยนะคะ ไว้เจอกันใหม่บทความหน้าเกี่ยวกับเรื่อง “การปรับเปลี่ยนรูปแบบการแสดงผลเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsTravelMode” นะคะ ขอบคุณค่ะ ^^

    หมายเหตุ: หากผู้ใดสนใจบทความอื่นๆเกี่ยวกับการพัฒนาโปรแกรมด้วยแผนที่ Google Map APIs ที่ผู้เขียนเคยเขียนไว้ก่อนหน้านี้ สามารถติดตามได้จากลิงค์ต่อไปนี้ค่ะ
    1) ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C#
    2) ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C# (ภาคต่อ)
    3) การดึงค่าละติจูดและลองจิจูดของสถานที่ด้วย Places search box บน Google Maps
    4) การค้นหาสถานที่ด้วย Places search box และแสดงผลภาพจากข้อมูล Street View บน Google Maps


แหล่งข้อมูลอ้างอิง :