Custom UI for the model

In AnyLogic Private Cloud, model developers can take advantage of the JavaScript API client to implement custom web interfaces to work with Cloud-based models.

This custom web interface — or, for short, Custom UI — can serve as a standalone entry point that allows users to work with your model. It also can override the built-in Cloud model UI, so all users of your instance will be able to make use of Custom UI.

To work properly, Custom UI requires an HTML-based web interface. It should include at least one separate HTML page called index.html.

Once the page is created, you can connect it to the Cloud API.

To start using the API

1. Obtain the cloud_client library by adding the <script> tag to the head of your webpage:

   <script src="https://cloud.anylogic.com/assets/js-client-8.5.0/cloud-client.js"></script>

2. Obtain the API key in the AnyLogic Cloud UI.
3. Create a new instance of the CloudClient object:

   For Private Cloud:

   cloudClient = CloudClient.create( <the API key>, <the Cloud instance URL> );

4. Use the API to work with the cloud-based models.

When the preparation work is done, use the JavaScript API to implement controls and adjustable settings.

• See the API reference to learn about available functions and objects.
• See the Examples section for a selection of available HTML and JS-based examples.

To upload Custom UI:

1. Create an archive containing the index.html file and all the necessary assets.
   All links pointing to auxiliary files within the archive should be relative.
2. Open your Private Cloud instance.
3. Open the model screen for the model you want to associate with Custom UI.
4. Go to the Custom UI tab.
5. Drag the zip archive you have created on step 1, to the Upload custom UI field, or
   Click … and select the archive using the navigation window.
6. Once uploaded, the link pointing to Custom UI will be available in the Link access section.
   The path to the model’s Custom UI is identical to the model path in the instance, with ui replacing the model part.
7. (Optional) Select the Redirect to Custom UI option for Custom UI to override the default Cloud UI for this particular model on the Public Models page.

This example demonstrates Custom UI that works with the Product Delivery model.

1. Download the example model from the public version of Cloud (cloud.anylogic.com): Demo model: Product Delivery Open the model page in AnyLogic Cloud. There you can run the model or download it (by clicking Model source files).
2. Upload this model to your Private Cloud instance.
3. Download the archive containing this Custom UI to explore its code base on your machine.

In this example, the HTML portion of Custom UI is implemented directly within the index.html file, while the JavaScript part resides in main.js.

The JavaScript code specifies the API key used to authenticate the user, the host URL which points to the URL of the instance, and the model name in the Cloud web UI. The values of these inputs are utilized by the JavaScript Cloud client to gain access to the Cloud instance — and the model itself.

The initial action performed by the main.js file is the creation of the Cloud client instance, given the API key and host URL.

Each button on the HTML page has a function assigned to it. All of these functions are implemented in the main.js file. They combine more low-level JavaScript API functions and simplify the structure.

Depending on which button the user clicks while interacting with the UI, one of the functions below is called. The button’s label corresponds to the function it is associated with:

• The runAnimation() function demonstrates the animation on the HTML page:
  1. Retrieves the latest model version based on the provided model name,
  2. Creates an experiment based on the inputs of the existing experiment,
  3. Starts the animation, supplying additional controls allowing manipulation of the animation flow.
• The runSimulation() function creates and executes a simple single-run experiment:
  1. Retrieves the latest model version based on the provided model name,
  2. Creates the default inputs for this experiment,
  3. Sets the values for some of the inputs,
  4. Runs the experiment without the animation,
  5. Retrieves the resulting outputs, posts their raw form in the console, and also displays the values on the HTML page.
• The runParameterVariation() function creates and executes a multi-run parameter variation experiment:
  1. Retrieves the latest model version based on the provided model name
  2. Creates the default inputs for this experiment
  3. Sets the values for the ranged inputs
  4. Runs the experiment without the animation
  5. Retrieves the resulting outputs, posts their raw form in the console, and also displays the values on the HTML page
• The stopSimulation(), stopParameterVariation(), and stopAnimation() functions can interrupt the experiment of the corresponding type — and the animation.

To check out how Custom UI works in a real-world example, try out the demo:

How can we improve this article?

Send