Page History

...

1. Drag the widget from a UI Widgets Library and drop it into the IBD/Composite Structure diagram of the simulation context. Then use a Binding Connector to connect between the value property of the system and Port of the widget with the same Type. The widget can be resized as needed.

   

   HTML widgets used as Type of Property in the IBD diagram of the simulation context.

2. You can customize properties of any widgets, e.g., changing colors of cursorKnob, through the following steps:

   1. Create an Instance Specification of the widget by right-clicking the widget and selecting Tools > Create Instance. Then select a Part and Package to save.

   2. Open the Specification window of the created Instance Specification. In the left pane of the window, click Slots and choose either Create Value or Edit Value.

   3. Use the modified Instance Specifications as Default Value of the Part properties in the simulation context, as shown in the following figure.

   

   Customizing values through creating instances of the widget, setting values of properties in Slot of widgets, and using them as Part properties.

3. When running from a «SimulationConfig», you must set the executionTarget of the «SimulationConfig» to the simulation context, and the following Events will occur as shown in the next figure below:
   
   1. «Widget» Parts in the executionTarget, found at any Package levels, will be automatically generated as HTML files. All generated HTML files will be stored in the project's working directory with the same name as the project.

   2. The Web Server will automatically start.

      Note
      title Note
      If the Web Server plugin is not installed, a warning message with a link to install the plugin will be printed in the Console panel. Widgets on the IBD will not work until the plugin has been installed.

      
      

   3. The Console pane will print all generated HTML files, the generated folder, and URL of the Web UI with links.
      

      

      Running simulation with HTML widgets from a «SimulationConfig».

      Image Removed

4. You can also run the simulation directly from the IBD/Composite Structure diagram that contains widgets either from the right-click menu of the diagram or the Containment tree, or the Simulation toolbar of the diagram. Then the simulation will automatically generate HTML files, and the Web Server will be automatically started, similar to Step 3.

5. Depending on the circumstances, you can manually regenerate HTML files for further customization of the web UI. Manually regenerating HTML files is possible by right-clicking a «SimulationConfig» and selecting Simulation > Generate HTML.

   
   

   
   Manually regenerating HTML files through the Generate HTML command for HTML widgets.

   Note
   title Note
   The Generate HTML command is available only when there is «Widget» as Part (either Class or Block) in the executionTarget of a «SimulationConfig». If HTTP ERROR 404 ... occurs in the IBD/Composite Structure diagram, you must use the Generate HTML command. This is because the error from HTML files is not generated, but the startWebServer of the «SimulationConfig» is false.

   
   

6. However, if the HTML files already exist, a question dialog will be shown to prevent you from accidentally overwriting them as shown in the figure below.

   

   The question dialog to prevent accidentally overwriting the HTML file.