= Internship.work[3]

Entryนี้จะพูดถึงงานที่ได้ทำไปแล้วในWeek3นะครับ

This entry will talk about my work in week 3 of internship.

 

[TL;DR]

เขียนinterface, ทำบล๊อก, สร้างหุ่นยนต์

/จบ.

Coding interface, Blogging, Create Robot

/end.


[Long version]

ตอนนี้ก็จะมีงานทำInterfaceโต๊ะเหมือนเดิม, เขียนBlogรายงาน

แล้วก็สร้างอะไรสักอย่างด้วยraspberry pi, arduinoนี่แหละ

ซึ่งก็คิดว่าจะ(ลอง)ทำหุ่นยนต์ แต่ไม่รู้จะไหวป่าวนะ ต้องลอง

For now, my works are doing table’s interface, blogging about my works

and create something from raspberry pi, arduino

So i think i will (try to) create robot, but i don’t know i can do it or not.

“Must try”

 

เรื่องInterfaceของโต๊ะที่ทำเนี่ย เดิมทีจะใช้D3.jsในการสร้างObjectต่างๆ

อย่างพวกNode, Edgeที่linkกันเนี่ย ซึ่งหลังจากทำมา2week

พบว่า มันปรับนู่นนี่นั่นยากมากกกกกกกก เช่น สมมติCreate nodeมาแล้ว

จะfixตำแหน่งnodeไปตามx,yที่กำหนดนี่ก็ไม่ได้

link nodeเพิ่มหลังจากสั่งforce.start()ก็มีปัญหา

About table’s interface, at first we use D3.js to create objects

such as Node, Edge to linking node. But after we work on it for 2 weeks.

We founded that it’s really harddddddddd to config.

For example, after create nodes. we can’t fix node into x,y points.

or adding more link after statement force.start() will cause some problems.

 

ขี้เกียจแก้ก็ เลยลองหาLibraryตัวอื่นมาทำดู

จนไปเจอvis.jsเข้าให้ ซึ่งเป็นLibraryสำหรับทำพวกGraph, Networkโดยเฉพาะ

ซึ่งก็คิดว่า น่าจะโอเคกว่าD3.js เพราะD3.jsเนี่ย มันออกแบบมาให้ทำได้หลายแบบ

พอทีนี้จะไปcustomอะไรนิดๆหน่อยๆเนี่ย มีปัญหาทันทีเลย GG

I’m lazy to fix it. so i find another library that can do same things.

then i find vis.js that is library to manipulate graph and network especially.

so i think that it would be better than D3.js

because D3.js is design for handle various types of data and categories,

if we customize it for a little bit, it might be blow up.

 

พอได้ลองใช้vis.jsดูเนี่ย ก็พบว่า มันจัดการเรื่องnode,linkได้ดีกว่าD3.jsมากๆๆๆ

โค้ดที่ว่าก็ประมาณนี้

nodes = new vis.DataSet([
{id:1, label:1}, {id:2, label:2}
]);
edges = new vis.DataSet([ {from:1,to:2} ]);
var data = { nodes: nodes,edges: edges };
var container = document.getElementById('network');
var options = {};
var network = new vis.Network(container,data,options);

I have try to code something with vis.js, then i discover that

it can manage about node and link better than D3.js.

Code is as above.

 

สังเกตได้ว่า ใช้แค่idในการสร้างnode แถมedgeยังกำหนดได้ง่ายๆด้วย

จากที่อ่านในเว็ปมา เรายังสามารถกำหนดoptionลงในข้อมูลnodes,edgesได้เลย

แถมยังมีeventให้detectได้ด้วย ถือว่าเป็นlibraryที่น่าสนใจเลยทีเดียว

แต่เวลาอ่านJSONนี่ต้องใช้jQuery getมา แต่ก็แทนๆกันได้ ไม่ซีเรียส

so we can notice that is easy to create node and edge, also easy to manipulate

I have read some document from vis.js website.

We can define option to node,edge or network indepentdently.

also define event and detect network object. it’s quite interesting.

But if we want to read JSON file, we have to use jQuery to get data.

But i think it’s ok.

 

ส่วนเรื่องหุ่นยนต์เนี่ย ยังไม่ชัวร์เลยว่าจะทำยังไง

เพราะต้องdesignใหม่ตั้งแต่แรกสุดเลย ตอนนี้มีแค่raspberry pi + arduino

เหมือนมีแค่สมองกับไขสันหลัง ยังไม่มีกล้ามเนื้อ,ผิว,กระดูก 55555

ไว้เดี๋ยวจะลองdesign prototypeแล้วปริ้นออกมา3Dดู ถึงตอนนั้นค่อยว่ากัน

About robot, i still not sure that how i make it.

Because i have to design a whole things from beginning.

But now i have only raspberry pi and arduino.

It’s like i have only brain and spine, no muscle, skin and bone. LOL

I will try to design prototype and print it with 3D printer.

So let’s talk about it another time

 

ไว้มาต่อweekหน้าครับ

see you next week

 

= Internship.work[1:2]

ในEntryนี้จะพูดถึงงานที่โดนassignมา ในการมาฝึกงานที่เยอรมันนะครับ

ก็จะเขียนของWeek1-2ตามHeader 5555

[ TL;DR ]

Projectที่ได้คือ สร้างPlatform interactive computingชิ้นนึง

เป็นInteractive table สำหรับใช้งานในMuseum

โดยนำMachine learning algorithm มาapplyในระบบBack-end

เพื่อสร้างcontentใหม่ๆขึ้นมาdisplayด้วย และเรียนรู้จากข้อมูลใหม่ๆ

ส่วนงานที่ทำคือเขียนหน้าเว็ปที่ใช้แสดงผลบนinteractive table

/จบ.


[ Long version ]

(beware – geek content)

ก็ งานแรกที่ต้องทำนี่ เป็นส่วนหนึ่งของProject สร้าง Interactive table มาใช้ในmuseum

 

ส่วนชื่อProjectเต็มๆคือ  Beyond browsing and searching: Design and development of a platform for supporting curatorial research and content creation

อารมณ์ประมาณว่า สร้างplatformมาอันนึง เพื่อใช้ในmuseum

Platformที่ว่านั่นก็คือInteractive tableเนี่ยแหละ

ซึ่งProject Interactive tableเนี่ย แนวคิดของเจ้าของโปรเจ็คคือ

เอาMachine LearningมารวมกับInteractive Computing

 

 

โดยตัวProjectก็แบ่งหลักๆได้สองส่วน คือส่วนSystemหลักที่จะทำหน้าที่Generate Contentด้วยMachine learning  อีกส่วนก็คือโต๊ะที่จะinteractกับคนใช้นี่แหละ

งานเราคือ เขียนโค้ดให้โต๊ะนี่มันทำงานได้ แสดงผลได้

(ตอนแรกก็คิดว่าไม่ยากหรอก ทำไปทำมายากเฉย)

มีส่วนUIที่ไว้Interactกับคน แล้วก็ส่วนที่ติดต่อกับmain system

ในการทำระบบที่จะฝังลงโต๊ะเนี่ย ทั้งหมดนี่ใช้ภาษาjavascriptเป็นหลักเลย

ก็ตัวserverก็จะใช้nodejs เพื่อให้ง่าย(?)ต่อการทำงานด้วยJS

ส่วนinterfaceก็ใช้ D3.js ล้วนๆเลย ซึ่งD3.jsเนี่ย มันคือJS Libraryตัวนึง

ไว้สำหรับสร้างObjectและแสดงผลขึ้นมาด้วยDataที่มีอยู่ ซึ่งมันก็ใช้ง่ายในระดับนึงแหละ

แถมD3.jsยังให้functionไว้สำหรับอ่านไฟล์jsonมาโดยเฉพาะ ชีวิตง่ายขึ้นมากกก

d3.json("file.json",function(err,data){
// code
});

(โค้ดที่ว่า)

แล้วก็เอาdataไปสร้างนู่นนี่นั่นได้เลย

แต่ปัญหาคือ จะทำให้แสดงผลออกมาตามที่ต้องการเนี่ย ยากมาก 5555

ส่วนการติดต่อกับmain systemเนี่ย จะติดต่อโดยการโยนjsonไปมาเป็นหลัก ซึ่งก็ไม่ค่อยยากเท่าไหร่(?)

 

ประเด็นต่อมาคือการรับข้อมูลจากuserที่ใช้โต๊ะเนี่ยแหละ

เริ่มจากuserก็จะมาแตะๆบนโต๊ะใช่มะ ซึ่งก็เป็นกระจกแล้วข้างใต้ก็จะมีกล้องไว้detectการสัมผัส

ซึ่งข้อมูลจากกล้องเนี่ย ต้องใช้TUIOในการดัดแปลงข้อมูลให้เราเอามาใช้งานได้

แต่ก็ยังทำไม่ได้และไม่รู้จะทำยังไงต่อ เพราะยังไม่ได้สร้างโต๊ะ 55555555555

(แต่เดี๋ยวถ้าสร้างเรียบร้อยจะมาเขียนบอกอีกที)

 

ในสัปดาห์แรกเนี่ย ที่ต้องทำก็คือ

อ่านโค้ดเดิมๆของระบบนี้ แล้วก็คิดว่า จะต้องโค้ดตรงไหนเพิ่มมั่ง

วางแผนว่าแต่ละweekจะทำอะไรมั่ง

แค่นั้น จบแล้วweek1 55555 (เอาจริงก็โค้ดไปนิดนึงล่ะ)

ส่วนสัปดาห์ที่สอง ก็ทำตามที่วางแผนไว้ในสัปดาห์แรก

ก็คือ โค้ดไปเรื่อยๆจนกว่าจะเสร็จนั่นแหละ T__T

แล้วก็ทำblogอธิบายงาน(ก็คือentryนี้)

 

ไว้มาต่อweekต่อๆไปนะครับ