FPGAs in your browser!!

7 min readAug 22, 2021

GSoC’21 — Virtual FPGA Lab

About me

I am Bala Dhinesh, a third-year undergraduate student in the Department of Electrical Engineering. This blog covers the work done by me as part of my open source contribution to the Google Summer of Code 2021 under FOSSi Foundation titled Virtual FPGA Lab.

About the project

Field-Programmable Gate Array(FPGA) is a hardware circuit that a user can program to carry out logical operations. FPGAs are beneficial for prototyping application-specific integrated circuits (ASICs) or processors. The advantage of FPGA being energy-efficient, flexible to reprogram, support parallelism, decreased latency made them widely used in many applications. But the flexibility of FPGAs comes at the price of the difficulty of reprogramming the circuit. FPGA’s are a bit costly and difficult to learn for beginners. Also, students don’t have access to physical FPGA Lab classes in their curriculum amidst this pandemic situation. So there is a massive demand for an alternative option of having an online simulator for FPGA curriculum development.

This project Virtual FPGA Lab aims to solve the problem by taking advantage of the VIZ Visualization feature in the Makerchip platform and providing visualisations of FPGA’s basic peripherals, thereby mimicking the physical lab experience.

Makerchip is a free web-based IDE as well as available as makerchip-app, a virtual desktop application for developing high-quality integrated circuits. You can code, compile, simulate, and debug Verilog designs, all from your browser. Your code, block diagrams, and waveforms are tightly integrated. Makerchip supports the emerging Transaction-Level Verilog standard. Transaction-Level Verilog, or TL-Verilog, represents a huge step forward by eliminating the need for the legacy language features of Verilog and by introducing simpler syntax. At the same time, TL-Verilog adds powerful constructs for pipelines and transactions. More details about TL-Verilog: redwoodeda.com/tl-verilog

Why TL-Verilog?

Simple || Powerful || Flexible

Visual Debug

Waveform viewing has been our go-to debug tool for decades. Is there any way to visualize the simulations? Here you are!! With this cool feature, you can achieve that. Stay tuned, and we will be discussing more of this.

Organized Waveforms

No need of writing a test bench to see the simulation. The IDE provides an inbuilt clock and assigns random values to signals whenever it is not assigned to any value.

Organized Diagrams

Designs are represented in logic diagrams. Very easy to go through the design hierarchy, pipelining and stages.

Less to code

Faster development
Fewer bugs
Easier maintenance

Power of Visual Debug:

Let us first visualize the output of simple digital logic gates. From the GIF above, we can see that the left portion is the coding part where you can see the logic of the gates and the right portion is the Visual Debug(VIZ) part, where you can see the visualization of each logic gate. We can move back and forth between cycles and see in the top right which cycle currently is. Also, look at the waveform of the logic from the below image.

Code and explanation: Link

How Visual Debug is built? Visual Debug is a JavaScript canvas where we used fabric.js, a powerful and simple Javascript HTML5 canvas library framework. It provides us to use interactive object models on top of the canvas element.

We will be using this awesome feature in our Virtual FPGA Lab.

What makes Virtual FPGA Lab special?

Easy Learning📖: Understanding the basics of FPGA programming without having an actual board
Time travel😜: Move back and forth between cycles so that we can visualize what’s happening in each cycle.
Faster🚀: No need to wait for Synthesis, Implementation and Bitstream Generation for simple designs.
Abstraction💪: TL-V requires lesser code than standard HDL languages, making faster development, fewer bugs, easier maintenance, and better quality silicon. It supports System Verilog as well.
Synthesizable😊: Code in Virtual Lab works on real FPGAs!!!. We will cover this in the last section.
Open Source🥰: Licensed under MIT.

Okay, Let’s dive into the FPGA peripherals visualization.

FPGA Boards demonstrated in Makerchip:

Zedboard Zynq-7000 ARM/FPGA SoC Development Board (Product Link)
EDGE Artix 7 FPGA Development Board (Product Link)
Basys 3 Artix-7 FPGA Trainer Board (Product Link)
Icebreaker FPGA (Product Link)
Nexys A7 (Product Link)

Currently, we demonstrate using only these boards and we plan to add more boards in the future.

Phase1:

My weeks of coding before the Phase 1 Evaluation rely on adding the FPGA images on the VIZ canvas screen and support visualizing FPGA LEDs, seven-segment displays, LCD 16x2 display, and VGA display. Example demos using these are shown below:

LEDs

Demo: makerchip.com/sandbox/0mZf5hLPG/0y8h64Z#

The GIF above shows the example of a 16-bit counter whose output is shown in LEDs. Here we used Zedboard. The initialization can be seen in lines 26, 27 and 28. m4+fpga_init will initialize the board, and m4+fpga_led will enable the LEDs to work. If you want to work with the other boards, you can change the value of M4_BOARD in line 26.

Seven-segment display

Demo: makerchip.com/sandbox/0mZf5hLPG/0zmh8rV

This demo is a counter from 0–15 in HEX values in all four digits of the seven-segment display. *digit is the common anode signal. Each seven-segment display contains segments which are basically LEDs that can be turned on by sending an active low signal. To display digit 8 in the seven segments display, all the segments should be enabled by active low signal.

LCD 16x2 display

Demo: makerchip.com/sandbox/0mZf5hLPG/0k5hYwz#

This program prints the following in the LCD 16x2 display

Line 1: FPGAs are fun!!!

Line 2: —

And then left shift line1 and line2 once completed.

VGA display

Demo: makerchip.com/sandbox/0mZf5hLPG/0nZhlW1

This is the visualization for the 640*480 VGA display. Signals $sx and $sy are the horizontal and vertical positions of the display cursor, respectively. This program draws a square in orange colour when the horizontal and vertical pixel regions ($sx and $sy) are less than 64, otherwise blue. We need around 400 thousand cycles in 480p resolution to display a complete single frame, including all front and back porch timing constraints. So for visualization purposes, we made each square box be a 32x32 pixel, thus completing a frame in around 470 cycles for better understanding. Anyways, you can tweak the square box size to whatever you want using the M4_COUNTER macro variable definition. You can also change the number of frames to visualize using the definition of the M4_FRAMES macro variable.

Phase 2:

For Phase 2, I started visualizing other peripherals such as Pushbuttons, Slide switches, LED RGBs, Temperature, Light sensor etc. Following are the demo using these visualizations:

Pushbuttons

Demo: makerchip.com/sandbox/0mZf5hLPG/0pghQw2

This program light up the LEDs when a particular pushbutton is pressed. Pushbutton should be given as input from the board. Unfortunately, Makerchip VIZ doesn’t support interactivity for now. So, to use this peripheral, we manually gave the inputs to the pushbutton using the $pb signal.

Slideswitches

Demo: https://makerchip.com/sandbox/05yf0h91P/066hVzy

The logic is the same as the above pushbutton example.

Temperature sensor

Demo: makerchip.com/sandbox/0mZf5hLPG/0mwh1MY

The temperature and light sensor are placed in the bottom left of the board. Here we used the sun image as the heat source. As the sun image moves far from the temperature sensor, the corresponding temperature reading value is shown in the seven-segment display. Four clock cycles are used to display the reading of the sensor. This is because the cathodes of the seven segment displays are connected. So, to display four different digits, we enable only one digit for every clock cycle. Since one cycle change usually happens in the order of 10s of nanoseconds, our naked eye pretends to act as if all digits are updated at the same time when run in an actual FPGA.

Light sensor

Demo: makerchip.com/sandbox/0mZf5hLPG/0oYhlwR

Here we used the bulb image as the heat source. The same logic of the above temperature sensor example applies here as well.

LED RGB

Demo: makerchip.com/sandbox/0mZf5hLPG/0vghOl6

This program outputs different colours in the RGB LEDs based on the duty cycle value using the concept of Pulse Width Modulation(PWM).

Steps to run in an actual FPGA:

Detailed step-by-step instructions are provided in this link. Credit goes to Mayank Kabra for helping me build this part.

LED Demo: Link

Output in Makerchip and actual FPGA board:

Future Scope:

To support more FPGA boards and peripherals.
The automated shell script that converts TL-V code to run in an actual FPGA currently supports only Xilinx boards with Vivado software. So to provide scripts that target other vendors as well using open source tools.

Conclusion:

Gratitude to all my mentors Steve Hoover, Ákos Hadnagy and Dylan McNamee for providing constant guidance and support to the project. Special mention to Mayank Kabra and Shivani Shah for helping throughout the project. I would also like to thank the GSoC and FOSSi Foundation for providing me with this amazing experience.

Github Project repo: Link