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