I’m playing around with my Espruino board (embedded board, programmed with JavaScript) as part of my quest to find a kid-friendly embedded controller. One of the nice things about Esruino is that it comes with a Web-based IDE that provides a terminal console that allows you to write JavaScript directly onto the board or allows you to programme it using Blockly.
I want to write some custom blocks, so downloaded the source for the EspruinoWebIDE and did the following:
- Created a new file “EspruinoWebIDE\blockly\blockly_myfile.js”
- Included this file in a SCRIPT tag in the top of “EspruinoWebIDE\blockly\blockly.html”
- Proceeded to create my blocks – initially as defined using the Google BlockFactory and then added to blockly.html to present them in the UI
There are already a few files defining extra blocks – blockly_espruino.js is the main one and blockly_robots.js is a simpler one, that actually makes quite a good example to follow if you are doing your own.
The basic idea is that there is a ‘toolbox’ definition for your block in the blockly.html file (which makes it appear in the menu of blocks in the user interface), supported with a block-definition file detailing the physical appearance of the block and what it needs to connect to within the user interface (Blockly.Blocks.mycategory_myblock) with an accompanying code-generation block. In this case, generating JavaScript via Blockly.JavaScript.mycategory_myblock that uses the Blockly API to get what it needs from the user interface and returns a string that contains the corresponding generated code.
There is a setting in the EspruinoWebIDE – Settings->General->Overwrite JavaScript with Graphical Editor – which is quite handy at this point, as it means that every time you hit ‘Send to Espruino’ in the graphical editor, the JavaScript window is updated with the generated code.
Except when it isn’t. There were no obvious errors, and the ‘Send to Espruino’ always said ‘Sent’ but there was no outward sign that anything had happened.
If you use the Inspect option of the Chrome browser then it was apparent that there was a JavaScript error:
Language “JavaScript” does not know how to generate code for block type “mycategory_myblock”
This hidden message indicates that there is a miss-match between the Blockly.Blocks.mycategory_myblock function and the Blockly.JavaScript.mycategory_myblock function and even though the block is available through the user interface, Blockly doesn’t know how to generate code for it.
Except in my case, no matter how it was written, generated, typed or checked, it was ignoring my code and I just could not spot what the error was. Eventually, I changed the order of the SCRIPT statements in blockly.html, wondering if there was some kind of load-order issue and it suddenly started working. Once I changed the order back again, it kept on working – so unfortunately I have no idea what was causing the problem, but just guessing some weird local caching issue or something not picking up my changes.
But if you are finding things aren’t working but there are no visible errors, definitely try Inspect and look for JavaScript errors and see if you can somehow force the application to re-load all files from scratch to make sure you aren’t working with an old version or something similar. I still don’t know why it started working, but at least it works now.
The only reason I’ve written this is that Googling for various hints as to what might cause the issue was failing me – even once I knew what the error was. So thought I’d write it down myself in case others have a similar issue – this might give someone else a clue.
Despite this rather irritating issue, I actually quite like Blockly.
In a future post, I’ll talk a bit more about what I’m actually doing with all this.
Kevin
Kevin's Blog 