ทดลองสตรีมกราฟผ่าน Plotly และการใช้งาน Socket UDP

plotly เป็นเว็บไซต์ที่ให้บริการแสดงผลกราฟต่างหลายรูปแบบ ซึ่งรองรับได้หลายภาษาทั้ง python , json , javascript เป็นต้นอีกทั้งยังมี  และ Socket เป็น Library ของ Python ที่ใช้ติดต่อกับระบบเครือข่ายเพื่อใช้เชื่อมต่อระหว่างคอมพิวเตอร์กับ Board STM32 



โดยวิธีการทดลองได้แยกออกเป็นสองส่วนดังนี้

ส่วนของ Plotly 

1. ดาวโหลด Library ของ Plotly มาใช้งาน ใช้ terminal "pip install plotly"(ในเครื่องต้องติดตั้ง PIP ก่อนแล้ว) จากนั้นก็สมัครเป็นสมาชิกในเว็บไซต์ Plotly เพื่อนำ API Key, TOKEN มาใช้งาน โดยรหัส API Key, TOKEN จะอยู่ในหน้า https://plot.ly/settings/api (เข้าได้เมื่อ Login ใช้งานแล้ว)
2. การเริ่มใช้งานก่อนอื่นต้อง import Plotly มาใช้งานแล้วเขียนโค้ดในส่วน Login ดังนี้โค้ดข้างล่าง เพื่อใช้สื่อสารกับ Plotly server

import plotly.plotly as py  
# (*) Useful Python/Plotly tools
import plotly.tools as tls   
# (*) Graph objects to piece together plots
from plotly.graph_objs import *

py.sign_in('ีusername', 'API_key')

3. จากนั้นก็เขียนโค้ดตามข้างล่างนี้ Stream_ids คือ TOKEN โดยเก็บในรูปแบบอาร์เรยสามารถเพิ่มได้เรื่อยๆ TOKEN 1อัน เอาไว้ใช้ต่อ การ Stream 1 เส้น จากนั้นก็สร้าง Stream ออปเจค โดยระหว่างสร้างสามารถกำหนดจุดที่แสดงใน Stream ได้

stream_ids=["token1", "token2", "token3"]
tls.set_credentials_file(stream_ids)

stream = Stream(
    token=stream_id,    # link stream id to 'token' key
    maxpoints=80        # keep a max of 80 pts on screen
)

4. ใส่เส้น ,layout(default) ลงในออปเจคภาพและสร้าง url ชื่อของ stream รายละเอียดการปรับแต่ง Layout นี้จะกล่าวอีกครั้งในบทความอื่นลิงค์

//make line
trace1 = Scatter(
            x=[],
            y=[],
            mode='lines+markers',
            stream=stream       # embed stream id, 1 per trace
 )
        
data = Data([trace1])
        
 # Add title to layout object
 layout = Layout(title="titleName")
        
 # Make a figure object
 fig = Figure(data=data, layout=layout)
        
 #(@) Send fig to Plotly, initialize streaming plot, open new tab
  unique_url = py.plot(fig, filename="name" )

5. เริ่มการทำงาน Stream และใส่ข้อมูล

s = py.Stream(stream_id)
        
#(@) Open the stream
s.open()

for i in range(51):
    s.write(dict(x=i,y=i))

6. เมื่อเรารันได้แล้ว python จะเปิดแทป browser ไปที่กราฟ ตัวอย่างชื่อลิงค์ https://plot.ly/~username/221/titlename/
7. สามารถที่จะนำกราฟจาก page นั้นมาใช้งานใน page ของเราได้ โดยใช้โค้ดนี้ สามารถปรับความกว้างความยาวของการแสดงรูปกราฟได้ผ่านส่วนนี้

<iframe frameborder="0" height="480" scrolling="no" seamless="seamless" src="https://plot.ly/~username/221.embed?width=640&height=480" width="640">

8. ตัวอย่าง

บทความต่อในส่วนการเปลี่ยนแปลงค่าต่างๆใน Plotly ลิงค์

ส่วนของ UDP

1. server_test.py ได้เซ็ตค่าให้เป็น Broadcast พร้อมกับ เซ็ต timeout เมื่อไม่มีการเชื่อมต่อในทุกๆ 5 วินาที

import socket,SocketServer

print 'Server started...' 
host, port = '0.0.0.0',42000 #set host and port
server = socket.socket(socket.AF_INET, socket.SOCK_DGRAM, socket.IPPROTO_UDP)
server.setsockopt(socket.SOL_SOCKET, socket.SO_BROADCAST, 1)

server.bind((host,port))#start server
server.settimeout(5)

while(True):
    try:
        (R_data, addr) = server.recvfrom(65535)
        print 'from', str(addr),"data is", R_data
        server.sendto("recieved", addr)
    except socket.timeout:
        print "out"

2. client_test.py ส่งข้อความไปหา server_test.py และรอรับข้อความยืนยันการรับจาก server

import socket,SocketServer ,time

sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM, socket.IPPROTO_UDP)
data = "test"
host, port = "127.0.0.1",42000 #set host and port
for i in range(10):

    time.sleep(1)
    sock.sendto(data, (host, port))
    (R_data, addr) = sock.recvfrom(65535)
    print R_data

3. จะได้ดังนี้