Blockly VHDL tutorial

This tutorial will learn you how to use Blockly VHDL for making a design in VHDL.
The blocks are used as a template for the VHDL code, where only some variables has to be filled in.

After completion or during the design process the VHDL code can be extracted from the Blockly design by pushing a button on the right screen, the VHDL code will then be displayed at the screen under this button. The code can be copied and pasted in a other third party design tool or it can be saved as a vhdl file on your drive. The blockly design itself can be saved by saving it as xml file, this file can be loaded back again in the design screen.

For ease of use the tutorials can be practiced on the tutorial page (weblink) were only the blocks that are used in the tutorial part are made visible in the menu structure on the left side of the work area.

Another feature is that the design can be simulated with the BlocklyVHDL simulator tool in the browser. The blocklyVHDL simulator tool is not a real VHDL simulator tool but it can be used to simulate blocklyVHDL designs. The difference between a VHDl simulator and this BlocklyVHDl simulator is that a real VHDL simulator takes the VHDL code as the source for its simulation and the BlocklyVHDL simulator takes its source from the the BlocklyVHDL design. To make a simulation run in the browser the simulator tool needs a language that is supported by a browser, in this case Javascript. The idea is to generate a Javascript code that is functional equivalent with the VHDL code, in runnning the Javascript code the VHDL design is then simulated. The trick played is that it uses the same template blocks that generates the VHDL code but now instead is translating it into Javascript. For the simulation some extra blocks were created to setup a testbench for generating the input stimuli and showing the results on the output or internal

signals.

For generating the signal diagram in the browser another open source tool is used called WaveDrom. WaveDrom is a JavaScript application using WaveJSON which is a format that describes Digital Timing Diagrams. it is effectifly used to generate signal diagrams that can be used for documentation or presentation or show in a browser by giving in the signal description.

Ofcourse this can be automated by sending the signal description as a text string to the WaveDrom function, who interpet it and displays the signal diagram.

The Javascript code and WaveDrom function is then embedded in a HTML page that has to be saved to the local storage on your PC. After the HTML file is saved it has to be opened manually with a browser, by opening it the Javascript code is autmatically executed, the input stimuli of the testbench is handled and calculated and the result will be shown as a signal diagram in the browser screen.

The simulation tool is for now only available for the first tutorial, but will be expanded to the other tutorials in future time by upgrading its coverage of the VHDL features.