blockly2scafi

blockly2scafi is a Blockly environment developed in Scala.js and Javascript with a custom code generator for ScaFi.

Try it in Github pages.

Installation

• Compile optimized Scala.js with SBT :

sbt fullOptJS

• Open in browser the file index.html

Project structure

The Blockly environment setup and code generator are written in JavaScript in the resource directory:

• index.html contains the layout of the web page of blockly2scafi, styled by the css file main.css.
• blockly2scafi.js initializes the blocky workspace and defines the toolbox.
• blocks_library.js contains the json definition of the blocks and set up the event listeners used to update the dynamic output type of some blocks.
• scafi_generator.js builds the scafi code generator that translates the Blocks to valid and formatted Scafi Code.
• blocks_library.xml this file is not used by blockly2scafi, it's the exported Blockly Developer Tools library.

How to add or edit blocks

1. Open Blockly Developer Tools .
2. Click on Import Block Library and upload the file blocks_library.xml.
3. Define or edit the shape of the blocks using the tool.
4. Insert or edit the Blockly definition JSON in blocks_library.js.
5. Add the block in the toolbox in blockly2scafi.js.
6. Create or edit the code generator function of the block in scafi_generator.js
7. Remember to download the block library xml from Blockly Developer Tools and save it in blocks_library.xml.