Skip to content

Layout Overview

Rocco Palermiti edited this page Sep 6, 2020 · 3 revisions

Description of each part of the web UI

In the navigation bar there are:

  • The logo
  • The Run options button to open the run options section
  • The Run button to execute the program with the options of the solver
  • The Appearance button which opens a modal window with all settings to customize the UI
  • The About button which opens a modal window with the description of the project, the name of the team and the link to GitHub
  • The Open file button which opens a section to upload LoIDE project files or a text files
  • The Save button which opens a popup to download all project with all tabs and options
  • The Share button which opens a popup that allows sharing all the project from an URL that will be generated

For the Run, Save, and Open button there are shortcuts to use it in the quickest way.
If you hover with the mouse one of these buttons, will display the shortcut based on the operation system.
For example, for those using macOS will display the button command rather than control.


At the center of the screen there is a navigation bar for the tabs, which for each tab contains the text editor to insert the program to execute. The syntax will be highlighted according to the standard ASP-Core-2.

In the navigation bar there is a toolbar that contains some buttons with features that refer to the current tab:

  • Delete all the tabs button
  • Save content button
  • Cut button
  • Copy button
  • Paste button
  • Search/Replace button
  • Undo button
  • Redo button

On every tab near of its name there is a little button that opens a dropdown with a list of some utility operations:

  • Run
  • Rename
  • Duplicate
  • Clear content
  • Save content
  • Delete

The window will be resized according to the dimension of your browser.


At the right, there is the section of the output, where they will display the Answer Sets of the program.
Next to this section, there is a bar, and thanks to this you can resize or hide, temporarily, the section of the output.
Next to the word Output, there are three buttons:

  • the download content button to download the output
  • the clear output button that clears the output
  • the down arrow button indicates the possibility to split the output container from east to south and vice versa to have two possible views


At the left there is the run options panel that will open or close only when you click on the grey one button at the side of the Run button on the navigation bar.
You can choose the language, the solver, and the executor. In the next, you can add some options to the solver. Thanks to the field free choice, you can write any option not limited to those offered by the application.
Depending on the selected option, it will or will not show the text field to write the value. It is possible to add more options and contemporarily more values for the options that are allowed.

There are also the options for the executions of the program, in particular, by default, there is the option that will execute the program almost automatically, whenever you will insert a dot to complete a rule or a fact.

Underneath there is the section to choose which programs inside the tab to execute contemporarily or to execute the current tab.

At the last, there is a reset button to reset all the panel with default values