General Project Notes

Starting Out (6/3/15)
We wiped the version of Blockly that was being used and are starting over. The previous parts that were modified had bad documentation and created a few glitches so we decided to start from scratch since we want to create a custom navigation system anyways.

"Important Blocks" (6/16/15)
Referred to when creating the comments section is Important Blocks. Important Blocks are any block that can stand on its own without being connected. Non-important blocks are the blocks which need to be connected to important blocks. This is out of date information but there may be remnants still left of these terms

Quick Reference Guide (7/1/15)
The Quick Reference Guide contains every block with detail about it. Each block in the Quick Reference Guide has an anchor tag around the header of the block name. The anchor tag is equivalent to the type of the block. They type is an attribute of the block in the XML.

Prefixes (7/14/15)
Block prefixes will handle up to 701 blocks nested or down after that the getAlphabetical no longer handles letters.

XML and Adding Blocks (7/15/15)
We are using the xml to put blocks from the toolbox to the workspace since the toolbox is very nested into the workspace and you cannot add blocks from the toolbox to the workspace without a mouse click. This way we can put blocks via the keyboard instead.

<p>tags (7/16/15)
Each p tag in the right-hand comment box has an id equal to the id of the corresponding block. These are assigned in tree_view.js displayComments().

Hiding Flyout (7/16/15)
There is a function Blockly.hideChaff() - this hides the flyout when called.

Comment Creation (8/3/15)
In order to detect whenever a new block is added into the scene by us, so that we can grab that block as soon as its created, we create it with a comment attached. This comment is "`4*K". (the first symbol is the grave key). We feel that it is unlikely a user would ever leave this specific comment on a block, so it's safe to use, since using this to tag the block as it enters the scene is the easiest way to immediately find it. The tag is removed as soon as it is found.

Controls (8/7/2015)
As of right now to add blocks to the scene you can select a menu block and hit F to add it to coordinates 0,0 but once a block is on the scene you select it with E hit A or D to select your connection then hit C to save it. Hit E then E again to bypass a bug then you open the menu and select a compatible block and hit G it will connect those blocks.

Exporting (8/7/15)
Blockly workspace blocks are read from top to bottom when exporting code. After top to bottom the workspace is read from left to right.

About Reading the Menu (8/11/15)
The default strings for each block in Blockly are stored in messages.js however, each block is formed by a concatenation of several different strings and there was no reasonable way to procedurally combine the strings for each block. That is where the blockToString() function comes in, it contains a switch statement that takes the blocks type and returns the string for that block. The readToolbox() function is called after menu_navDown() or menu_navUp() is called to read the block. It calls blockToString() and updates an invisible Div on the page that has an aria assertive attribute attached. It then puts the aria-labelledby attribute on the category and has it labelled by the div. On change, the label of the category will be changed by the assertive attribute which causes the block to be read immediately. When blocks are added to the workspace the inputs can be edited audibly by altering the parts of the strings enclosed in '' that usually contain a letter 'A' or word 'variable'.

Connecting block process updated (8/11/15)

• Press 'e' to enter edit mode.
• Navigate through the connections using 'a' and 'd'.
• Press 'enter' to select the connection, this will also automatically set focus to the toolbox.
• Select a block and press enter to connect it. note: Spacebar is now used to open and close the menu.

Tree View (10/2/15)

• We tried using closures tree view but it did not work for a dynamically
• resizing array

Updated to newest Blockly (11/3/15)

• Block id's were removed so we added a function that adds the id's back on the blocks

Replaced Mutators / Notes on creating new blocks (2/5/16)

• Blocks are created in the "blocks" folder under the file corresponding to the toolbox menu they are in. Each new block must be translated into the various blockly supported languages in the generators folder. More information about the new mutators can be found on the Mutator replacement page of the wiki.

Navigating and Adding Top Blocks (5/12/16)

• When added, the top blocks now move below the last top block using function moveToBottom() in menu_nav.js.
• When statement blocks are added, they are automatically connected together using function connectToLastBlock() in menu_nav.js.
• In order to make the above functions work, a new variable named Blockly.Accessibility.MenuNav.containersArr was created. It holds all outer container blocks on the workspace (including: if, while, procedures etc.)

Procedures have a different child connection type (5/31/16)

• Procedures' child connection is called "STACK" instead of "DO" and in most cases will need to be handled separately.

Highlighting the dropdown and new speech method (6/8/16)

• Dropdown menu highlighting is now handled in in_block.js. It works by adding and removing the classes: .goog-menuitem-checkbox and goog-option-selected in the method dropDownSetVal(); The options are navigated using ddNavDown() and ddNavUP()
• Speech has been updated to fix many of the issues including the second embedded block not reading and fields working incorrectly with firefox. The new method alters googles function block.toString(). The function originally returned all blocks connected to that block in one giant string which could be truncated with a length parameter. The new version called changeString() in speech.js takes no parameters and returns the string of immediate blocks inputList[i].type != 3.

Customizable Interface Colors(7/25/16)
*Users can now choose 1 of 4 colored workspace themes using the dropdown menu button to the top right of the commentDiv: Blue, Grey, Dark, or Default.
*These colors can be changed in interface.html in the changeColor() method, toggleColorDD() method, and in the html div with id="colorOptions", simply change an existing color's hex and name or add a new one. The current colors are a bit dull and could be improved upon.

Generating comments in the comment box via n-ary search tree (7/25/16)

• Comments are now automatically generated when the user presses enter while the comment window is open via the generateTree function in prefixes.js. This function calls the recursive narySearchTree function which uses the n-ary search tree algorithm to traverse through the comments of each block and its children. N-ary search trees work by recursively calling the search tree function on childNode[i] and childNode[i]'s children until there are no more children and then i is increased within a for loop.
• n-ary had to be used instead of binary or ternary because each block has a different number of direct children.
• The algorithm is simple but the implementation for the comments is a little complicated. The function takes 3 parameters: the block, indent (a number: 2-first function call, 0-no indent, or 1-indent) and bottom (the lowest level html element in the commentDiv) which the next item will be appended to.
• When indenting, the lowest level <li>is found in order to append the new indented <ul> with the new comment <li> to
• When not indenting the lowest level <ul> must be found to append the <li> to
• In order to display the tree correctly the tags are appended bottom to top all the way up to the comment <div> so for an indented block, the order is comment <li> -> indented <ul> -> bottom <li> -> comment <ul> -> comment <div>
• using bottom.getElementsByTagName("LI")[0] we can keep track of the bottom most html element each time the function is called