## 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 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 settings.

The order in which the SVG images are displayed is based on the sorted file names of the SVG image files, as included in the CIF specification. If some SVG image files have the same file names (in different directories), they are instead ordered based on their absolute paths.

#### 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. When such an element is clicked, the red outline changes to a green outline. The outlines can be configured using the SVG input outline style and SVG input outline filters options.

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:

- 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.

- Speed

  A slider is present to set the speed at which model time progresses. The configured speed is the amount of model time that elapses during a real-world second. For instance, with a speed of 1.0, one unit of model time takes one second during execution, running at normal speed. With a speed of 2.0, one unit of model time takes half a second during execution, making the execution twice as fast. With a speed of 0.5, one unit of model time takes two seconds during execution, making execution half as fast.

  For more information, see the separate section on speeds.

- Show image

  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.

- Log states

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

  - Include algebraic variables

    Whether to include algebraic variables when logging states. Is disabled by default. Only has an effect if Log states is enabled.

- Log transitions

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

### Options

The code generator has several options that are specific to HTML code generation. See the following sections for more information about these options and how to use them:

- HTML frequencies

- HTML speeds

- Choosing a frequency and speed

- SVG input outline style

- SVG input outline filters

#### 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

#### HTML speeds

The HTML speeds option can be used to configure the range of speeds at which the code generated for the model can be executed in generated HTML pages. A speed is the amount of model time that elapses during a real-world second. Specify the minimum, default, and maximum speeds as numbers, separated by colons; for example `0.3:1:2`. The minimum speed must be at least 0.001 and at most 1. The default speed must be at least the minimum speed and at most the maximum speed. The maximum speed must be greater than the minimum speed, at least 1, and at most 1000. By default, the minimum speed is 0.1, the default speed is 1 and the maximum speed is 10.

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

Decreasing the speed | Increasing the speed
--- | ---
More fluent animations | Less fluent animations
More accurate time-based calculations | Less accurate time-based calculations

#### Choosing a frequency and speed

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 and/or decrease the speed.

In general, 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, at a speed of 1.0. 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.

If you use a speed that is not 1.0, then you generally need to multiply the frequency by the speed. That is, if the simulation is twice as fast, you may need twice the frequency to preserve the precision of the simulation. Conversely, if the simulation is twice as slow, you could consider using half the frequency, while still preserving the precision of the simulation.

#### SVG input outline style

The style for the outline of interactive elements can be changed using the SVG input outline style option. Specify `off` to not show any outline. Specify a hover color, click color and stroke width, separated by colons, to specify a specific style. For colors, there are two ways to specify them. The first way to specify a color is to use one of the named colors: `black`, `blue`, `cyan`, `dark-gray`, `gray`, `green`, `light-gray`, `magenta`, `orange`, `pink`, `red`, `white`, or `yellow`. The second way to specify a color is to indicate an RGB color, by specifying comma-separated red, green and blue components, each in range [0..255]. For the stroke width, specify the width in pixels as a positive floating point number. Some examples of valid option values are: `blue:magenta:2.0`, `255,0,128:black:0.5`. The default value is `red:green:1.5`.

Disabling the outline does exactly only that: it prevents the outlines from being shown. It does not prevent the mouse pointer from being changed. Also, interactive elements can still can be clicked and this will still have the same effect.

#### SVG input outline filters

The outlines of interactive elements, if not disabled using the SVG input outline style option (using its `off` value), can be selectively disabled for certain interactive SVG elements, using the SVG input outline filters option. By default, all interactive SVG elements get an outline when hovering or clicking them. By specifying filters, you can change the default. For this option, specify comma-separated node names of SVG elements for which to show the outline. Note that you must specify node names of the elements, as specified in the SVG standard. So, not the ids of the elements that you can specify yourself. For example, use option value `circle,rect,text` to only show outlines for circles, rectangles and texts. You can use `*` in a filter to match zero or more characters of an element name. Prefix a filter with `-` to exclude elements with matching node names, rather than including them. Initially, before applying any filters, all elements get an outline, as if `*,` if prefixed to the filters. The filters are applied in the order they are specified. As an example, specify `*,-text` or simply `-text`, to give all interactive elements an outline, except for SVG `text` elements.

Disabling the outline does exactly only that: it prevents the outlines from being shown. It does not prevent the mouse pointer from being changed. Also, interactive elements can still can be clicked and this will still have the same effect.