Tempest-online

HTML, JavaScript, and Bootstrap CSS have been used for developing the frontend part of Tempest-online.

Modules and Libraries Used

• toastify-js for showing toast messages (input errors).
• viz-js for showing .dot files in the frontend as SVG graphs.
• CodeMirror for making custom syntax highlighting.

There is one custom CSS file, prism.css, where colors for CodeMirror syntax highlighting and heights of two text editors are defined.

JavaScript Folder

The JavaScript folder contains 4 .js files:

• filesHandling.js: Contains functions for downloading content from two text editors and saving them in a .txt file. It also contains functions for uploading .txt file content to two text editors and functions that upload .dot files and show their content as graphs in SVG.

• syntax.js: Contains functions that create rules/tokens for syntax highlighting using CodeMirror. The token names are used to define what color the text should be with that token. Token examples include: variable, keyword, etc.

• zoom.js: Contains functions for zooming in, zooming out, centering, and dragging SVG files in the frontend.

• index.js: Contains initialization of CodeMirror text editors, a main run() function that runs when the user clicks on the run button, and functions used for updating text area output based on which tab is active. The output tab shows content of the output function, the simulator of the simulator function, and the graph shows an SVG of the uploaded .dot file. The main run() function checks if input fields are empty; if they aren’t, it runs output and simulator functions and shows the content of the active tab.

Basic Visual Format

The basic visual format of the application consists of one container with one row that contains two columns. In the left column, there is a navbar containing the title and run button, two text editors, and a row for .dot file input. Next to the two titles are two buttons for downloading and uploading files.

The right column consists of a navbar with tabs/links, an output text area, and zoom in/out and center buttons. The output text area changes based on the active tab/link.

For creating columns, rows, containers, etc., Bootstrap classes were used.