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


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

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

key value code ex

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 ของเรา

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

Leave a comment

Your email address will not be published. Required fields are marked *