BP Blockly User Guide

BP Blockly User Guide

Introduction

BP is implemented in Google Blockly by introducing new programming blocks, and by using the co-routines (generators) facility of JavaScript. Behavioral programs written in Blockly are translated into and executed as JavaScript programs.

Installation / Getting started

• Install Firefox browser version 15.0.1 or later.
• For online use: open with FireFox the designated Blockly link
• For offline/local use on your computer:
  • Download the zip file containing the Blockly and JavaScript package from the download screen;
  • Extract the zip file, preserving directory structure;
  • Open with Firefox the file BP_Code\apps\BP\index.html;
• Look at example projects in the examples drop down, additional examples linked from this site, and the tutorial

User Interface

Tabs

The BP Blockly interface introduces four tabs:

• Blocks: In this tab, on the left is the 'pallet' or menu of Blockly blocks to choose from, and on the right is the canvas where the application is developed.
• HTML: In this tab you program the HTML interfaces of your application, especially sensors and actuators.
• Project Blocks: In this tab you can define new application-specific blocks. For example, application specific events.
• JavaScript: This tab, shown in "debug" mode, shows the executable JavaScript generated from the Blockly code
• XML: This tab, shown in "debug" mode, shows the text file where the entire application is stored.

Navigation

• To scroll click and drag the canvas up or down, or use the scroll bar.
• Note that at initial loading parts of an application may be hidden and you may need to scroll up.
• Actions: Right click offers a popup menu

Programming

• To create an application drag blocks onto the canvas
• To start the application click on the red "Play" button
• To provide HTML information, look at templates of existing projects and at AGERE!2012 paper.
• Sensor example: for translating a button click into a behavioral event

input value="StartGame"
type="button"
onclick="startGame();"
style="position:relative;background-color:LightPink;"

• To create an actuator, code

when_<eventName> = ... 

• Example actuator:

when_addCold = 'innerHTML += addCold'

• Your application is not required to have its own GUI and HTML – you can experiment with creating interwoven behavioral flow just with events
• B-thread priority:
  • Round robin: All b-threads have same priority. Events that are requested and not blocked are chosen from the different b-threads in turn.
  • Strict priority: All b-threads are ordered, as determined by their top down and left-to-right placement on the canvas (presently disabled).
• Loading an existing project: Click "Load project", and browse and select an XML file where a project has been saved.
• Saving a project: Click "Save Project" and use standard browser functions to save the XML file. Close the extra tabs.
• Debugging and Event Logging:
  • Use Firefox console native, or
  • Use [ http://getfirebug.com/ Firebug tool]:
    • Start the application
    • In the application GUI screen – click on the firebug icon;
    • You may have to reload the application GUI screen;
    • In the firebug display click console tab;
    • In the console drop-down - make sure console is enabled;
    • Start the application
    • Watch the events in the console log.
• Do not edit the compiled JavaScript or XML file;
• Avoid spaces or periods in strings and variable names
• Sometimes the XML file may be corrupted. To avoid losing your data, save frequently in different file names and verify the file can be loaded.

BP Programming Blocks

With BP you have in Blockly the following new programming blocks:

• Event: Defines a e behavioral event. The event name should be entered a string inside this event block.
• Request <event>: Request an event. The event is requested and the program continues when the event is triggered.
• Wait for <event >: wait for and event. The program continues when the event is triggered.
• Blocking <event>: This container block, forbids the specified event until the code contained in it completes
• Break upon <event>: This container block executes the code contained in it, but the execution is interrupted if and when the specified event is triggered.
• Application specific events: These events are defined by the user in the application blocks tab, and can then be used from the pallet. To code an application block. The easiest way is to copy and paste the following code changing the text "MYEEVENT" to your event name (4 places).

custom.bp_event_MYEVENT = {
  helpUrl: 'http://www.example.com/',
  init: function() {
    this.setColour(290);
    this.appendDummyInput()
        .appendTitle("MYEVENT");
    this.setOutput(true, 'event');
    this.setTooltip();
  }
};
Blockly.JavaScript.bp_event_MYEVENT = function () {
    return ['"MYEVENT"', Blockly.JavaScript.ORDER_NONE];
};