สร้าง Custom block ใน Snap!

Snap! (http://snap.berkeley.edu/) เป็นภาษาโปรแกรมที่มีการเขียนแบบลากวางเป็นบล็อคๆ ซึ่งเหมาะกับการใช้สอนการเขียนโปรแกรมเบื้องต้น เนื่องจากผู้เรียนแทบจะไม่ต้องจำว่าไวยากรณ์ของภาษาเป็นอย่างไร และแทบจะลดโอกาสความผิดพลาดเนื่องจากการพิมพ์ผิดหรือตกหล่น ซึ่งเป็นปัญหาสำคัญของผู้เริ่มเรียนเขียนโปรแกรม

Snap! พัฒนาต่อยอดมากจาก Scratch (https://scratch.mit.edu/) แต่มีข้อที่แตกต่างหลักๆก็คือ Snap! ถูกพัฒนาบนแพลตฟอร์ม HTML5 ในขณะที่ Scratch ทำงานบน Adobe Flash ซึ่งถ้าเครื่องไม่ได้ติดตั้งไว้ก็จะใช้งาน Scratch ไม่ได้

ข้อแตกต่างที่สำคัญอีกประการหนึ่งคือ Snap! สนับสนุนการสร้าง custom block ซึ่งก็คือชุดคำสั่งใหม่ จากคำสั่งที่มีอยู่แล้วได้ (จริงๆแล้ว Scratch ในปัจจุบันก็สนับสนุนแล้วบางส่วน)

สมมติว่าเราจะเอา Snap! ไปสอนจาวาเรื่อง loop ก็จะมีความสับสนกันบ้าง เพราะไวยากรณ์ของสองภาษาต่างกัน ตัวอย่างเช่น ถ้าเราต้องการวนลูปห้ารอบ
Snap!


Java
for(int i=1; i<=5; i++) {    
}

ซึ่งไวยากรณ์คนละแบบ สำหรับคนที่เริ่มเขียนโปรแกรมก็อาจจะแปลงไปมาได้ลำบาก

เราลองมาสร้าง custom block ของ Snap! ให้คล้ายๆจาวากัน

1. ใน Snap! คลิกเลือกแท็บ Variables (สีส้ม) แล้วเลือกปุ่ม Make a block ด้านล่าง
2. ตั้งชื่อและหมวดของ block เช่นตามรูป แล้วเลือก OK


3. คลิกเครื่องหมาย + ด้านขวาของ for


4. เลือกหัวข้อ Title text เพื่อเพิ่มข้อความ เช่น "i="
 

 5. คลิก + หลังคำว่า i= คราวนี้เลือก Input name ลองพิมพ์ชื่อกล่องที่จะเป็นตัวแปรของลูปไว้ เช่น start
 

6. ทำต่อเนื่องไปเรื่อยๆให้ครบพารามิเตอร์ของลูปคือ start, stop, step ก็จะได้รูปแบบนี้


7. ต่อไปเราจะเพิ่มส่วนที่เป็นเนื้อหาของลูป ซึ่งเมื่อกด + ต่อแล้ว พิมพ์ชื่อสมมติว่าเป็น content และคลิกลูกศรเล็กๆสีดำที่อยู่ทางขวามือ แล้วเลือกตามรูป


8. ต่อไปก็จะใช้ block ที่มีอยู่แล้วคือ repeat until เข้ามาช่วยให้ได้รูปตามนี้


9. สุดท้ายก็จะเกิด custom block ในหมวด Control ที่เราเลือกไว้ ลองลากมาใช้ได้ครับ


10. เราสามารถ export block นี้ แล้วไป import ใช้ภายหลังได้ครับ


ดูแล้วก็ไม่ยากเกินไป ลองไปเล่นดูกันได้ครับ

NativeScript ตอนที่ 5 การอ่านค่าจาก TextField และนำไปแสดงผลใน Label

ตอนนี้ก็ยังเป็นการยุ่งเกี่ยวกับ event แต่เพิ่มการรับค่าจาก TextField และ การอัพเดท Label ครับ

เป้าหมายที่เราต้องการคือ


และเมื่อป้อนข้อความและกดปุ่ม OK ค่าใน Label จะเปลี่ยนตามดังนี้


อันดับแรกเราก็จะแก้ไขไฟล์ hello.xml ใหม่เป็น

<Page loaded="pageLoad">
     <StackLayout>
        <Label id="lblHello" text="Hello World" class="title"/>
        <TextField id="tfName" hint="Your Name" />
        <Button text="OK" tap="showName" />
    </StackLayout> 
</Page>

และแก้ไขไฟล์ hello.js เป็น

//include module "view"
var viewModule = require("ui/core/view");
//variables for label and TextField
var lblHello, tfName;

//when page is loaded
exports.pageLoad = function(args) {
    //get current page
    var page = args.object;
    //get the view by ID
    lblHello = viewModule.getViewById(page, "lblHello"); 
    tfName = viewModule.getViewById(page, "tfName");
    //console.log(tfName.text);
}

//whent button is tapped
exports.showName = function() {
 //get value from TextField
    var name = tfName.text;
    if(name.length!=0) {
        lblHello.text = "Hello "+name;
    }
    else {
        lblHello.text = "Hello anonymous";
    }
}

เท่านี้ก็จะได้ผลลัพธ์ตามต้องการครับ

NativeScript ตอนที่ 4 Event เบื้องต้น

ตอนที่แล้วเราลองทำแค่ interface ง่ายๆ คราวนี้เราจะลองเพิ่ม event ง่ายๆกันดูครับ

เริ่มต้นด้วยในโปรเจคเดิม เราสร้างไฟล์ interface ใหม่ชื่อ hello.xml เพื่อแสดงข้อความบนหน้าจอ

คราวนี้เราจะลองเพิ่มโค้ดที่เป็น event เข้าไป โดยเริ่มจาก event ง่ายๆคือ "loaded" สำหรับ Page

ดังนั้น ในไฟล์ hello.xml เราก็จะเพิ่ม event "loaded" สำหรับ Page เข้าไปเป็น

<Page loaded="onLoad">
    <Label text="Hello World" class="title"/>
</Page>

หลังจากนั้น เราก็จะสร้างไฟล์โค้ดที่คู่กับหน้านี้ ชื่อ hello.js แล้วเพิ่มโค้ดง่ายๆดังนี้

function hello() {
    alert("Hello world");
}
exports.onLoad = hello;

ซึ่งเมื่อรันโปรแกรม ก็จะแสดง alert dialog ขึ้นมาแบบนี้ครับ


ต่อไป เราจะลองเพิ่มปุ่มกดดูบ้าง ก็จะกลับไปแก้ไขไฟล์ hello.xml ใหม่ให้เป็น

<Page>
 <StackLayout>
  <Label text="Hello World" class="title"/>
  <Button text="OK" tap="sayHello"/>
 </StackLayout>
</Page>

สังเกตว่ามีการใช้ StackLayout ซึ่งเป็น LayOut ประเภทหนึ่งที่จัดเรียง widget ที่อยู่ภายในแบบบนลงล่างหรือซ้ายไปขวา

ในที่นี้เราสร้าง Label และ ปุ่มกดไว้ใน StackLayout นี้ และเอา Page Load event ออก แต่เพิ่ม "tap" event ให้กับปุ่ม ซึ่งเมื่อเรากดก็จะไปเรียกใช้ฟังก์ชัน sayHello ในไฟล์ hello.js อีกที

และปรับแก้ไฟล์ hello.js ดังนี้

function hello() {
    alert("Hello world");
}
exports.sayHello = hello;

คราวนี้เมื่อเรากดปุ่ม ก็จะเกิด alert dialog ตามรูปครับ



ตอนต่อไป เราจะลองรับค่าจาก Text box คลิกปุ่มแล้วนำค่าที่ได้ไปแสดงผลใน Label กันครับ

NativeScript ตอนที่ 3 เริ่มต้นจากศูนย์

ตอนที่แล้วเราพอรู้จักโครงสร้างของ NativeScript แล้ว แต่ดูเหมือนว่ามันจะเข้าใจยากใช่ไหมครับ คราวนี้เราลองมาเริ่มต้นแอพใหม่กันตั้งแต่แรกดีกว่า

แอพที่เราจะทำจะมีหน้าตาง่ายๆแบบนี้

เริ่มต้นจากการสร้างโปรเจคกันก่อน สมมติว่าเราอยู่ในโฟเดอร์ที่ต้องการแล้ว เช่น D:\codes\nativescript

รัน Command prompt แล้วย้ายไปยังโฟลเดอร์ดังกล่าว แล้วใช้คำสั่ง
tns create MyApp
เพื่อสร้างโปรเจคชื่อ MyApp

ย้ายเข้าไปในโฟลเดอร์โปรเจคโดย
cd MyApp

ต่อจากนั้น เราจะกำหนดแพลตฟอร์มให้เป็น Android
tns platform add android

ในโฟลเดอร์โปรเจค เข้าไปแก้ไขไฟล์ app.js โดยเปลี่ยนไฟล์ที่จะเป็นหน้าหลักเป็น hello

var application = require("application");
application.start({ moduleName: "hello" });

จากนั้นก็สร้างไฟล์เปล่าเพิ่มอีกสองไฟล์ คือ hello.xml และ hello.js

ใน hello.xml ซึ่งจะเป็นหน้า interface หลัก เราจะลองเขียนแค่

<Page>
    <Label text="Hello World" class="title" />
</Page>

เราจะลองรันแอพนี้ ให้เชื่อต่อกับ Android device (หรือ emulator) แล้วทดสอบว่ามองเห็นอุปกรณ์นั้นหรือไม่ด้วยคำสั่ง
tns device

อย่าลืมยืนยันการเชื่อมต่อกับอุปกรณ์ในกรณีที่มีการถาม

สมมติว่าตอนนี้การเชื่อมต่อกับอุปกรณ์สำเร็จ เราจะลองรันแอพโดยใช้คำสั่ง
tns run android
แล้วก็รอกันไป

ก็น่าจะเห็นผลลัพธ์เป็นคำว่า Hello World กลางหน้าจอ



ใน command prompt ให้กด CTRL+C แล้วเลือก y เพื่อสิ้นสุดการทำงานของคำสั่ง

จากนั้น เราจะลองรันแอพแบบ livesync นั่นคือ เมื่อเราแก้ไขโค้ด ตัว nativescript จะ build และ patch เข้ากับโปรแกรมที่รันอยู่บนอุปกรณ์ ซึ่งจะทำให้การรันรวดเร็วขึนมาก ไม่ต้อง build ใหม่ทั้งหมดและติดตั้ง

พิมพ์คำสั่ง
tns livesync android --watch

เมื่อผลลัพธ์แสดงในอุปกรณ์แล้ว ให้ลองกลับมาแก้โค้ดในไฟล์ hello.xml เป็น

<Page>
    <Label text="My First Mobile App" class="title" />
</Page>

ทันทีที่เรากด save ไฟล์นี้ ผลลัพธ์ในอุปกรณ์จะเปลี่ยนไปทันที สะดวกมากๆเลยครับ



ตอนนี้เราคงทดสอบกันแค่นี้ก่อน ตอนต่อไปเราจะลองมาเขียนโค้ดเพิ่มปุ่มกันครับ

NativeScript ตอนที่ 2 องค์ประกอบของแอพ

หลังจากที่เราทดลองติดตั้งและสร้างแอพโดยใช้ template ที่เป็นตัวตั้งต้นแล้ว เราลองมาดูองค์ประกอบของไฟล์ที่ถูกสร้างขึ้นกับครับ

ถ้าเข้าไปดูในโฟลเดอร์ของโปรเจคที่ถูกสร้างขึ้น จะเห็นว่ามันมีองค์ประกอบคือ
Project
--app
--node_modules
--platform
package.json

ซึ่งตัวโค้ดหลักๆ จะอยู่ในโฟลเดอร์ app
เมื่อเข้าไปดู จะพบว่ามีไฟล์ที่สำคัญคือ

• app.js เป็นไฟล์เริ่มต้น จะบอกว่าให้โปรแกรมไปเรียกโมดูลและหน้าไหนมาทำงานเป็นหน้าแรก
• app.css เอาไว้กำหนดรูปแบบ สไตล์การแสดงผลโดยรวมของแอพ
• main-page.xml หน้าอินเตอร์เฟสหลัก
• main-page.js โค้ดที่สัมพันธ์กับ main-page.xml

ถ้าดูรายละเอียดของ app.js จะพบดังนี้

var application = require("application");
application.start({ moduleName: "main-page" }); 

นั่นคือบรรทัดแรกจะมีการ include โมดูลชื่อ application
บรรทัดที่สองจะสั่งให้ start module โดยที่ไปเริ่มที่หน้าซึ่งมีชื่อว่า main-page (ตรงกับไฟล์ main-page.xml และ main-page.js)

ต่อไป เราจะลองเปิดไฟล์ main-page.xml ซึ่งเป็นส่วนของ interface

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
  <StackLayout>
    <Label text="Tap the button" class="title"/>
    <Button text="TAP" tap="{{ onTap }}" />
    <Label text="{{ message }}" class="message" textWrap="true"/>
  </StackLayout>
</Page>

 ซึ่งจะมีหลายองค์ประกอบ ในที่นี้ถ้าเราแยกส่วนดู จะพบว่าประกอบไปด้วย

• Page คือ หน้านั้น
• StackLayout คือโครงของหน้านั้นว่าจะมีการเรียงอินเตอร์เฟสอย่างไร ในที่นี้เป็นแบบ Stack คือเรียงจากบนลงล่าง หรือ ซ้ายไปขวา
• Label ก็คือข้อความที่เอาไว้แสดงผล
• Button คือปุ่มกด

 ซึ่งจะสังเกตว่ามีการอ้างถึง event ที่จะใช้กับปุ่ม คือ tap = {{ onTap }} เป็นต้น ซึ่งรายละเอียดจะอยู่ในไฟล์ main-view-model.js อีกที

เนื่องจากโค้ดตัวอย่างนี้ เป็นลักษณะการเขียนโค้ดแบบ Model-View-View-Model ซึ่งอาจจะเข้าใจยาก ในตอนต่อไปเราจะลองเริ่มเขียนแอพแบบโครงสร้างธรรมดาง่ายๆกันดูครับ

Processing กับ Kinect ตอนที่ 1

บทความนี้จะพูดถึงการประยุกต์ใช้งานโปรแกรม Processing กับกล้อง Kinect ซึ่งถือได้ว่าเป็นซอฟต์แวร์และฮาร์ดแวร์ที่ทำงานร่วมกันได้อย่างดีคู่หนึ่ง

ในตอนนี้ เราจะลองติดตั้งโปรแกรมที่เกี่ยวข้อง รวมถึงเริ่มต้นเขียนโค้ดเพื่อแสดงผลตำแหน่งมือขวาของเรา

ผลลัพธ์ที่ได้น่าจะประมาณนี้ครับ โดยวงกลมสีเหลืองก็คือตำแหน่งของมือขวาของเรา ที่ตรวจจับโดย Kinect และวงกลมนี้จะเคลื่อนตามมือของเราครับ



การติดตั้งซอฟต์แวร์ที่เกี่ยวข้อง

1. Processing (https://processing.org/)
2. Kinect SDK (https://www.microsoft.com/en-us/download/details.aspx?id=40278)
3. Kinect4WinSDK หลังจากติดตั้ง Processing แล้ว สามารถเลือกเมนู Sketch/Import Library.../Add Library... แล้วเลือก Kinect4WindSDK

โค้ด

/*
  Hand detection and display
*/
import kinect4WinSDK.Kinect;
import kinect4WinSDK.SkeletonData;
//ref: http://www.magicandlove.com/blog/research/kinect-for-processing-library/

Kinect kinect;
ArrayList <SkeletonData> bodies;

//Set initial graphic properties
void setup()
{
  //set window's size
  size(640, 480);
  //set black background
  background(0);
  //create an instance of Kinect
  kinect = new Kinect(this);
  smooth();
  //arraylist of skeletons
  bodies = new ArrayList<SkeletonData>();
}

//Method to draw graphics, auto refresh
void draw()
{
  background(0);
  //assume only one tracked skeleton
  //right hand detection
  if(bodies.size() != 0) {
    showRightHand(bodies.get(0), Kinect.NUI_SKELETON_POSITION_HAND_RIGHT); 
  }
}

//Method to draw a circle at right hand
void showRightHand(SkeletonData _s, int hand) 
{
  //if hand is tracked
  if (_s.skeletonPositionTrackingState[hand] != Kinect.NUI_SKELETON_POSITION_NOT_TRACKED) 
  {
      //get x and y positions of right hand
      float x = _s.skeletonPositions[hand].x * width;
      float y = _s.skeletonPositions[hand].y * height;
      //draw a yellow circle at hand position
      fill(255,255,0);
      ellipse(x, y, 30, 30);     
   }
}  

//*********************** DO NOT MODIFY ANYTHING BELOW THIS PART ************************
void appearEvent(SkeletonData _s) 
{
  if (_s.trackingState == Kinect.NUI_SKELETON_NOT_TRACKED) 
  {
    return;
  }
  synchronized(bodies) {
    bodies.add(_s);
  }
}

void disappearEvent(SkeletonData _s) 
{
  synchronized(bodies) {
    for (int i=bodies.size ()-1; i>=0; i--) 
    {
      if (_s.dwTrackingID == bodies.get(i).dwTrackingID) 
      {
        bodies.remove(i);
      }
    }
  }
}

void moveEvent(SkeletonData _b, SkeletonData _a) 
{
  if (_a.trackingState == Kinect.NUI_SKELETON_NOT_TRACKED) 
  {
    return;
  }
  synchronized(bodies) {
    for (int i=bodies.size ()-1; i>=0; i--) 
    {
      if (_b.dwTrackingID == bodies.get(i).dwTrackingID) 
      {
        bodies.get(i).copy(_a);
        break;
      }
    }
  }
}