Developing blockly

From ago control wiki
Jump to: navigation, search


Blockly developments

The goal of this page is to explain how to have blockly environment to update agocontrol blockly source code.

Prepare development environment


  • Choose or create a root directory for blockly (we call it root in this document)
  • Checkout closure-library source code in your root dir: svn checkout closure-library-read-only
  • Checkout blockly source code in root dir: svn checkout static
  • Checkout blockly lua source code in root dir: svn checkout blockly-lua
  • Jump into blockly main dir: cd static
  • Copy lua generator:
    • cp -a ../blockly-lua/generators/lua generators
    • cp -a ../blockly-lua/generators/lua.js generators/
  • Download agocontrol blockly source code:
    • wget ""
    • wget ""
    • wget ""
    • wget ""
    • wget -O blocks/agocontrol.js ""
    • wget -O generators/lua/agocontrol.js ""


Some modules need to be patched:

  • root/static/ need to be patched to generate lua_compressed.js file: patch -p1 < patch_blockly.patch
  • root/static/generators/lua/*.js need to be patched to remove deprecated warning: patch -p1 < patch_lua.patch


The only files you need to modify are:

  • root/static/blocks/agocontrol.js
  • root/static/generators/lua/agocontrol.js

Files content

  • blocks/agocontrol.js
    • A global object called BlocklyAgocontrol that contains methods to get all needed stuff from agocontrol (list of devices, events, properties...)
    • Some agocontrol specific blocks injected in Blockly editor.
  • generators/lua/agocontrol.js
    • Lua generators for each agocontrol blocks (all blocks need to have a generator)

To create new blocks, the block factory available file:///<root>/static/apps/blockfactory/index.html may be really useful. (Prefer using local block factory than online one because online is not always up to date!)


First of all you need to launch your browser with some parameters:

  • Chrome: chrome --disable-web-security or chromium-browser --disable-web-security under linux. In last version of Chrome/Chromium it is just necessary to install the CORS extension and activate it.
  • Firefox: you must install this extension and activate it (author website [1]). Update: how to force installation of this extension under last Firefox version (>29?): [2]

This parameter/extension allow Cross Domain calls mandatory to load schema.yaml and deviceMap.yaml files. Then open file:///<root>/static/agocontrol.html in your browser, you should see blockly workspace and a button below. Make your modifications on agocontrol.js files and reload webpages. Use a javascript debugger tool like firebug or browser integrated one to check javascript errors.


After validating your file modifications, you need to compile blockly before committing your final release. The compilation tool is directly provided by blockly and require python installed:

  • Go to root/static
  • And execute command python
  • Check output and check errors.

This compilation generates compressed files:

  • root/blocks_compressed containing all blocks
  • root/blockly_compressed containing blockly core and useful libs
  • root/lua_compressed containing lua script generator

/!\ too much compilation during a day will ban you from google server until the end of the day (compilation are done remotely)

Commit changes

If everything went fine, you need to commit 3 new files to agocontrol git repository:

  • Copy blocks_compressed.js, blockly_compressed.js and lua_compressed to <agocontrol_repository>/core/rpc/html/js/blockly
  • Copy source code root/blocks/agocontrol.js and blocks/generators/lua/agocontrol.js to <agocontrol_repository>/devices/blockly/
  • Add files to git, commit and push files.


Personal tools