การเพิ่ม Block ใน Tinker (Blockly)

ใครที่อยากเพิ่ม Block ใน Tinker (Blockly สำหรับเขียนภาษา Logo ให้กับ GoGo Board) ให้ลองอ่านตัวอย่างนี้ครับ วันนี้นั่งงมวิธี ไม่อยากลืมเลยขอเขียนจดเอาไว้

ตัวอย่างนี้จะเป็นการเพิ่มคำสั่ง key “key name” ซึ่งคืนค่าเป็น string เอาไว้ใช้ในโปรแกรมเช่น

1. เพิ่ม Block ในเมนู โดยแก้ไขไฟล์ ./index.html

อยากเพิ่มคำสั่งตรงไหนในรายการคำสั่งเดิมก็เขียนเข้าไปในไฟล์นี้ได้เลย  โดยคำสั่ง Key จะเพิ่มดังนี้

<category name="Key" class="rPiBlocks">
<block type="key_value">
<title name="key_name">Button</title>
</block>
</category>

type เป็นตัวเชื่อมโยงไปยังข้อ 2 ว่าจะสร้าง block โดยใช้ Class ใด ในที่่นี้คือ “key_value”
ส่วน <title name> จะโยงไปข้อ 2 เช่นกันว่า Field ที่จะสร้างเป็นชนิดใด เช่น value input, dropdown, etc ในตัวอย่างนี้ name คือ “key_name”

2. เพิ่ม Block Definition เข้าไปในไฟล์ blocks_tinker.js ดังนี้

Blockly.Blocks.key_value = {
  helpUrl: 'http://www.example.com/',
  init: function() {
    this.setColour(290);
    this.appendDummyInput().appendField("Key Name")
        .appendField(new Blockly.FieldDropdown([["Button", "Button"], ["Slider", "Slider"], ["Face Name", "Face Name"], ["Voice Command", "Voice Command"]]), "key_name");
    this.setOutput(true, String);
    this.setTooltip('Reports value of specific key.');
  }
};

ในตัวอย่างนี้ input ของเราเป็น Drop down list
เพียงเท่านี้ block ของคำสั่ง Key ก็จะปรากฏขึ้นใน Tinker ขั้นตอนสุดท้ายที่เหลือคือกำหนดว่าคำสั่งนี้จะถูกแปลงเป็นคำสั่งภาษา Logo อย่างไร

3. กำหนดการแปลงคำสั่งเป็นภาษา Logo โดยแก้ไขไฟล์ gogocode.js

Blockly.GogoCode['key_value'] = function(block) {
  var text_key_name = this.getFieldValue('key_name');
  var code = '<span class="c210">key "'+ text_key_name +'"</span>';
  return [code, Blockly.GogoCode.ORDER_NONE];
};

คำสั่งสำคัญคือ getFieldValue(‘key_name’) ซึ่่งจะไปอ่านค่าจาก field ที่กำหนดไว้เพื่อนำมาใช้ในโปรแกรม Logo ของเรา

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