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!

1. To Design Circuits
   • Go to Block Based Circuit Design and start designing!
2. To contribute to Block Based Circuit Design Development

   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.

• Blockly
• TL-Verilog
• React
• Chakra-UI
• Core JavaScript and JSON
• netlify for deployment
• MakerchipIDE

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

• Open Source, I was able to peek into the source code for the 5 basic languages and extrapolate how to go about developing one for TL-Verilog.
• Can handle long text, Blocks in blockly can handle multiline texts with formatting.
• Extensible, Blockly is meant to be added on to. They have made it simple to add and remove functionalities from the library.
• Purely based in JavaScript, so no conversion complications
• 100% client-side. It has no server-side dependencies.
• Compatible with all major browsers: Chrome, Firefox, Safari, Opera, and IE.
• Highly customizable and extensible.

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:

• Toolbox (Leftmost)
• Blockly Workspace(middle)
• Panel (rightmost)

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 :

• Precedence of commands
• index of each block
• variables database storage
• scrubbing of multiple block codes together All of these are bundled together in tl-verilog.js file which helps us define our language specification for TL-Verilog

• Github Repository
• Website
• Daily Tracker

• Dr. Gayatri Mehta
• Steve Hoover
• Adam Ratzman
• Ninad Jangle