## HTML code generation

| HTML code generation is currently an experimental feature.

The CIF code generator can generate HTML from a CIF specification. For a CIF specification, a single HTML file is generated, which can be opened in a browser. In this way, the CIF specification can be executed in a browser, similar to using the CIF simulator to simulate the specification (especially when enabling the simulator’s execution mode).

The HTML file that is generated contains JavaScript code that is used to execute the CIF specification (see JavaScript code generation for more information). The HTML file also includes a simple UI, to control the execution. Furthermore, the SVG images coupled to the specification are included. The images are animated based on the state of the CIF model, if the specification contains CIF/SVG output mappings. The images can be clicked to interact with the specification and influence the execution, if the specification contains CIF/SVG input mappings.

It is assumed the reader of this page is familiar with the general information of the CIF code generator tool. This page describes specific information applicable only to HTML code generation.

### HTML page

Generated HTML files can be opened in any modern browser. The HTML files may not function correctly when opened in the browser embedded in the Eclipse ESCET IDE. They should therefore be opened in an external browser.

#### Areas

The HTML page primarily consists of two areas:

- In the upper area, the name of the model and the SVG images are displayed.

- In the lower area, several buttons, configuration options, and a log panel are present.

The lower area can be resized. If the log panel is not hidden, a small triangular marker appears at the bottom-right corner of the upper area, just above the Hide button. Press and drag the marker up or down to resize the lower area.

#### Execution

When the HTML file is opened in a browser, the execution start directly. Several buttons are present to control the execution:

- To stop the execution, press the Stop button.

- To continue the execution after stopping it, press the Start button.

- The execution can be reset to the start state by pressing the Reset button. Resetting the execution also stops it.

#### Visualization

If the specification features SVG images, these are displayed in the upper area. As the execution progresses, the images are updated based on the state of the CIF specification being executed. The visualization can be influenced using the following options:

- Frequency: A slider is present to set the frequency at which the code is executed. For instance, a frequency of 60 Hz means that the JavaScript code generated for the CIF specification is executed 60 times per second.

  Decreasing the frequency reduces the CPU usage of the browser, and makes animations less fluent. Conversely, increasing the frequency makes animations more fluent, but increases CPU usage.

  For more information, see the separate section on frequencies.

- Image visibility: In case the CIF specification is connected to multiple SVG images, a checkbox is present for each image.

  Checking a checkbox ensures that the corresponding image is shown. Unchecking a checkbox hides the corresponding image.

  By default all images are shown.

#### Interaction

If the specification features CIF/SVG input mappings, the SVG images become interactive. Clicking an interactive element of an SVG image influences the execution of the specification.

Elements of the SVG images that are interactive get a red outline when hovering over them. The mouse pointer then also changes, to indicate that they can be clicked.

Clicking an interactive SVG element has no effect while the execution is stopped.

#### Log panel

In the lower area also a log panel is displayed. It provides a log of the current execution, such as which transitions are executed. Upon resetting the execution, the log is cleared.

The log panel can be hidden by pressing the Hide button. Once it is hidden, it can be shown again by clicking the Show button.

The log can be downloaded as a text file by pressing the Download log button. The filename of the downloaded log includes the model name, and a timestamp, such that different logs can be easily distinguished.

#### Settings

The settings menu can be shown by pressing the Settings button. Pressing the button again hides the settings menu. The following settings can be configured in the settings menu:

- Log states: Whether to log all states that are reached. Is disabled by default.

- Log transitions: Whether to log event transitions that are executed. Is enabled by default.

### Options

The code generator has the following options that are specific to HTML code generation:

- HTML frequencies

#### HTML frequencies

The HTML frequencies option can be used to configure the minimum, default, and maximum frequencies in hertz (or Hz), the number of times per second that the JavaScript code for the model is executed in generated HTML pages. First the minimum frequency is given (must be at least 1), then a colon (`:`), then the default frequency (must be at least the minimum frequency and at most the maximum frequency), then another colon (`:`), and then the maximum frequency (must be greater than the minimum frequency, and at most 100,000). By default, the minimum frequency is 1 Hz, the default frequency is 60 Hz and the maximum frequency is 120 Hz.

In generated HTML pages, the current frequency can be set to different values (within the configured range), using a slider. Next to the slider, the current frequency is displayed. Changing the frequency can have the following consequences:

Decreasing the frequency | Increasing the frequency
--- | ---
Lower browser CPU usage | Higher browser CPU usage
Less fluent animations | More fluent animations
Less accurate time-based calculations | More accurate time-based calculations

For a specification with a continuous variable (such as a timer), if calculations need to be more precise, such as detecting when a timed guard becomes enabled, increase the frequency. But generally, if you want a precision in terms of `dt` time units, and the derivative of a continuous variable is `dy`, then you need `dy` / `dt` as minimum frequency. For instance, if `dt` is 0.1 and `dy` is 2, you need 2 / 0.1 = 20 as minimum frequency. However, the execution scheme may influence this, requiring you to use a higher frequency.