This summer I was mentored by the FOSSi Foundation to develop a Block Based Circuit Design solution using blockly by Google. I am excited to introduce to you the result!
git clone https://github.com/ninja3011/Block_Based_Circuit_Design.git cd Block_Based_Circuit_Design/src npm start
Block-Based Circuit Design introduces learners to circuit design early in their education. The current options available for circuit design like Verilog and VHDL are syntactically cumbersome for the younger learners to grasp. TL-Verilog, a variation of Verilog helps eliminate this complexity from Verilog while preserving its advantages.
Block Based Circuit Design takes it a step further. By the gamification of the process, it makes learning and tinkering with circuit design fun, further tearing down the barriers to entry.
With the aid of Block Based Circuit Design, we finally have a tool for nurturing the circuit designer skill of younger learners. For a long time, the community lacked a solution for introducing and catching the interest for circuit design due to the lack of appropriate tools. With this solution, anyone can design circuits. The codebase implements a TL-Verilog Generator which converts the blocks to TL-Verilog code. This code can also be further converted to Verilog in MakerchipIDE using sandbox.
|Designing the required tool list for the interface.||Delivered|
|Create a working custom Language Generator for TL-Verilog on Blocky.||Delivered|
|Adding instructions to the language generator to handle more tasks||Delivered|
|Exploring and possibly implementing big string text inputs in Blocky||Delivered|
Blockly has many advantages which made it an ideal choice for our solution:
TL-Verilog has been developed by addressing the complaints a lot of circuit designers in the industry have voiced for a long time. TL-Verilog simplification is akin to that python brought in Software Development. The industry-standard languages of Verilog and VHDL, though powerful, interact with the hardware at a very low level and make the code unnecessarily complex. TL-Verilog eliminates the archaic aspects of these languages while improving on their functionalities. The intuitive simplicity of TL-Verilog along with the availability of tools that convert it to Verilog made it an ideal choice
├── App.css ├── App.js ├── components │ ├── BlocklyComponent │ │ ├── BlocklyComponent.jsx │ │ └── index.js │ ├── Panel.js │ └── toolbox.js ├── generator │ ├── Components.js │ ├── Expressions.js │ ├── fileStructure.js │ ├── m4Modules.js │ ├── MultiPurpose.js │ ├── Printing.js │ ├── Procedures.js │ ├── Scopes.js │ ├── Sequential.js │ ├── Signals.js │ ├── Ternary.js │ └── tl_verilog.js └── index.js
The Code went through a lot of rounds and I took to recode everything again from scratch post the 1st evaluation. This was done to deliver the most efficient solution for the product.
In our src we have :
├── components ├── generator ├── App.css ├── App.js └── index.js
Using React, we have taken benefit of the states and props to maintain the memory of blocks during operation. All states can be viewed in App.js as they have been lifted up and are passed to the components as required.
State Flow diagram
App.js ├── BlocklyComponent.jsx ├── Panel.js
The components folder holds the code for the three main sections of our solution:
This folder contains the necessary logic to render and handle any changes made by the user in these specific areas. These can be thought of as canvases for their zones
The generator folder carries the description and logic for all the blocks that the Designer is equipped with.
The tl-verilog.js file defines our custom generator and the rules attached with it :
|[ 2020-08-26 ]||Week 13|
|[ 2020-08-19 ]||Week 12|
|[ 2020-08-12 ]||Week 11|
|[ 2020-08-5 ]||Week 10|
|[ 2020-07-29 ]||Week 9|
|[ 2020-07-22 ]||Week 8|
|[ 2020-07-15 ]||Week 7|
|[ 2020-07-8 ]||Week 6|
|[ 2020-07-1 ]||Week 5|
|[ 2020-06-24 ]||Week 4|
|[ 2020-06-18 ]||Week 3|
|[ 2020-06-11 ]||Week 2|
|[ 2020-06-4 ]||Week 1|
|[ 2020-05-27 ]||Week 0.2|
|[ 2020-05-20 ]||Week 0.1|