HDL Editor

Introduction

The application is designed to generate structured Verilog HDL (Hardware Description Language) code for FPGA devices. The output Verilog code is fully synchronous.

The application is implemented in F#. The source code is transpiled to JavaScript by the Fable compiler and bundled by webpack. The result JavaScript code runs under the Electron framework with GUI set by HTML and CSS files.

The application uses JointJS, a drawing library implemented in JavaScript, to handle the graphical design interface.

Feature

The software is a graphical design tool for FPGA hardware design. For creating custom logic blocks, user can either fill in truth tables to generate standalone blocks, or connect different logic blocks together to form a higher level block.

The application is designed to be cross-platform, either for production use or development purposes.

Although the source code is in F#, interop with JavaScript is made possible by Fable.

Code Structure

The F# source code is placed in three projects and transpiled to three pieces of JavaScript code. Each piece of JavaScript code consists of two files: one minimized file and one mapping file.

The electron main process handles tasks such as creating windows and providing browser-like platform to run the code. Each Electron application instance can has only one main process.

The electron renderer process handles tasks such as GUI update and user interaction. The number of renderer processes is not limited in one Electron application instance.

The two kinds of processes can communicate with each other via IPC (Inter-Process Communication) calls or via the Remove module, which is a one way communication from the renderer process to the main process.

| Process | Project | Source | Executable Code | |-------------------|--------------------------------------------------------|---------------------------------|----------------------------------| | electron main | .src/Main/Main.fsproj | .src/Main/Main.fs | .app/js/main.js | | electron renderer | .src/Renderer/Renderer.fsproj | .src/Renderer/.fs | .app/js/renderer.js | | electron renderer | .src/blockConfigureWindow /blockConfigureWindow.fsproj | .src/blockConfigureWindow /.fs | .app/js /blockConfigureWindow.js |

The ordering of the F# source code files is controlled by the .fsproj files. The .fsproj files are passed in when transpiling to JavaScript.

package.json

The electron framework is built upon Node.js and follows the typical file structure for a Node project.

The package.json is the configuration file for the project, including information such as package dependency, scripts and copyright.

{ ... "scripts": { "start": "cd src/Main && yarn webpack --port free -w --config webpack.config.js -w", "build": "cd src/Main && yarn webpack --port free --config webpack.config.js", "launch": "electron . -w", }, ... }

The script section in package.json defines shortcut commands. To run the defined commands, simply type yarn + <script key> in the terminal followed by the Enter key. To use the yarn commands, yarn needs to be installed.

Native node npm commands are also supported. To run the defined shortcut commands, type npm run <script key> followed by the Enter key.

webpack.config.js

The file is used to configure webpack, the bundler. The file sets the entry point and the output directory for different F# projects.

Webpack configuration is loaded when yarn start is running in the command line interface. The webpack can be configured to watch any changes in the source file and automatically re-bundle.

If the webpack configuration file is changed, the yarn start process needs to be restarted in order to allow the changes to take effect.

File Structure

app folder

The folder contains the HTML and CSS files for setting and styling the GUI. The CSS files are put in a separate folder called css/.

The transpiled JavaScript code is put in the js/ subfolder, as configured in the webpack.config.js file.

src folder

The folder contains F# projects. Each F# project is put in a subfolder. The structure of each subfolder is auto-generated by Visual Studio.

Getting Started

You can skip this section if you just wanted to run the application. Please head to the release section of this repo to get the packaged application.

1. Install Node.js.

2. Install yarn.

3. Install Mono if you were using Mac or Linux. Ensure Mono is downloaded from the official website.

4. Install the Dotnet SDK.

5. Clone the source code repo.

6. Run yarn install to install the npm packages.

7. Install paket if you were using Mac or Linux.

8. Run setup.bat if under Windows or setup.sh if under Mac or Linux.

9. Open one terminal, cd to the source code root directory and run yarn start. Wait for all the source code to compile. Errors in source code is shown in color text in the terminal.

10. Open another terminal, cd to the source code root directory and run yarn launch. The application should launch now.

11. In the application window, press Ctrl-Shift-I to toggle the dev tool.

12. Refer to the Packaging the Application section in this README.md file if you wanted to pack the application for production use.

Reinstalling Compiler and Libraries

For Windows users, run setup.bat file at the root directory.

For Mac and Linux users, run setup.sh file at the root directory.

Packaging the Application

| Operating System | Command | |------------------|-------------------| | Windows | yarn pack-win | | Mac | yarn pack-mac | | Linux | yarn pack-linux |

Please run each command under its corresponding operating system.

Dependency Upgrade

• The project uses the Fable 2.0.3. At the time of development, Fable 3 is under development while not officially released.

• JointJS version 2.2.1. Its commercial extension Rappid is not needed.

• Electron version 4.1.3

• Dotnet SDK version 2.1

• Webpack version 4.29.6

Boilplate Development

The F# projects are controlled by the HDL_Editor.sln file, which is used as the Visual Studio solution file. By openning the file using Visual Studio, all F# projects are accessible in one window.

Open two terminals with one running yarn start and the other running yarn launch. When any changes are made to the F# source code, saving the changes will trigger the automatic re-transpile of the changed files. The yarn launch command needs to be stopped and re-run to make the changes in the source code take effect.

Licensing

The application is licensed under the MIT license.