Developed by Pal Kerecsenyi, Geza Kerecsenyi and Oli Plant.
General contact: email@example.com
Live demo: https://codeddraig.github.io/ffau/
Ffau forms part of CodeDragon, a platform for teaching young people to code for the web with real-life HTML and CSS. Check it out at https://codedragon.org.
Ffau is open source software. This means you can clone, share and use it however you want, including for commercial purposes. However, you MUST provide attribution to the original authors if you do this. However, Ffau is provided with NO WARRANTY whatsoever, and by using this software, you agree to the terms of the MIT License.
For full details, please read LICENSE.
Copyright (c) 2017-19 The CodeDdraig Organisation
The Ffau editor is made to be easily addable to any existing project. There are 4 main steps to setting the Ffau up for a simple project like the one linked above.
- Clone this repo into your project's equivalent of the
assetsdirectory - any nice, static place will do.
git clone https://github.com/codeddraig/ffau.git
- Import our libraries in a specific order. Due to Blockly being our main dependency, you have to import our assets quite specifically. Here's a perfect example (we'll assume you've cloned Ffau into
- Add the toolbox and pick which Ffau components you want to use. We won't explain how the toolbox works in too much detail, but it's simply a bit of XML that defines which blocks should go in your toolbox, and how to arrange them.
See BLOCKS.md for a full list of XML blocks
Here's an example using all Ffau components and three blocks:
<body> <!-- blockly container, must have fixed height & width --> <div id="blockly" style="height: 480px; width: 100%;"></div> <!-- iframe container --> <div id="frame-preview"></div> <!-- ace container, also must have fixed dimensions --> <div id="code-preview" style="height: 480px; width: 100%;"></div> <!-- style="display: none;" is important! Otherwise, XML would try to render as HTML --> <xml id="toolbox" style="display: none;"> <block type="body"></block> <!-- <body> --> <block type="paragraph"></block> <!-- <p> --> <block type="emptytext"></block> <!-- empty text to go inside paragraph --> </xml> </body>
- Render all components using ffau.js. If your page is the same as the one shown in step 3, you can put this at the bottom of your body:
<script> const ffau = new Ffau(); // must come first, renders the Blockly interface ffau.renderBlockly( document.getElementById("blockly"), // container to put blockly in document.getElementById("toolbox") // XML toolbox ); // renders iframe preview ffau.renderPreview( document.getElementById("frame-preview") // container to put iframe in ); // renders the ace editor ffau.renderCode( ace, // pass the window.ace object to this function, just to make sure it works document.getElementById("code-preview") // container to put ace in ); // Now that everything has been rendered, you need to add a change listener to Blockly. // This will make the contents of the code and frame previews update whenever Blockly does. ffau.addEvent(); // That's it! </script>
You can find documentation for all functions in the
Ffau class at https://codeddraig.github.io/ffau/docs/Ffau.html.
Ffau can save your blocks to a text file in the browser (with the extension '.txt') and import them to re-assemble your blocks. Files exported from Ffau can be imported to CodeDragon (https://codedragon.org), and vice-versa.
To report problems or potential additions, please feel free to visit the 'issues' section of this repo. For security issues, please email us at: firstname.lastname@example.org.
This project would not be possible without the following amazing libraries. We are much indebted to them for their support and work:
A magic library which you should have heard of by now. It creates the whole drag-and-drop block system, which is the basis for this entire system!
CSS library for everything but the editor itself. Developed by one of our own team!
Handles syntax highlighting in the "Real Code" tab.
"Dance of the Sugar Plum Fairy", "Monkeys Spinning Monkeys", "Pixelland" - (Licensed under Creative Commons: By Attribution 3.0 (http://creativecommons.org/licenses/by/3.0/))
Trailer for "Big Buck Bunny" and "Llama Drama, Episode 1".
Our project is inspired by, but not a direct clone of, the blockly-html project (https://github.com/bwinf/blockly-html) by the BWNIF (Bundesweit Informatik Nachwuchs Fördern), a German organisation which seeks to further development in Computer Science among children. Also, we owe some of our inspiration to the EduBlocks project (https://github.com/AllAboutCode/EduBlocks) by Joshua Lowe, which performs a similar function to our work, but for Python, rather than the web.