Block Based Circuit Design

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!

Block Based Circuit Designer

How to Run

  1. To Design Circuits
  2. To contribute to Block Based Circuit Design Development
   git clone
   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.

The Power Of Block Based Circuit Design

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.


Pythagorean Tutorial Demo

Proposed Deliverables Status
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

The Technologies used in the Project include:

Why Blockly?

Blockly has many advantages which made it an ideal choice for our solution:

The TL-Verilog Revolution

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

Code Structure

├── 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

├──  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 :

Daily Tracker

Start Date Updates
[ 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

Work Done