Easy Java Simulations Wiki | Main / HtmlView

The HTML View provides the graphical user interface (GUI) for your JavaScript simulation.

Although most simulations are displayed using a prescribed HTML page, a JavaScript simulation in EjsS may define more than one HTML View pages for its GUI. This does not mean that the simulation will display several of these pages simultaneously. Instead, it means that the same model can define more than one GUIs, but it will display only one at a time. At start time, if there are more than one views, each with a different preferred width and height, the model will select the one that best matches the device screen size. This allows you to design for different device sizes.

If all HTML View pages match the screen size, the one selected at the time of running or packaging your simulation will be used as default. You can then switch among the views in run time. The command for this is _selectView(pageNumber), where pageNumber is an integer that refers to the order of your desired view, number from left to right in your HTMLView panel (the leftmost page is numbered 0).

Each HTMLView has a root node, called Simulation view, from which all other HTML view elements hang as tree nodes. The Simulation view root node has a number of properties that affect this GUI page.

Properties of the Simulation view root node

RunAlways: This property accepts a constant boolean (that is true or false).

By default, this value is false, meaning that simulations that are playing will be stopped when the HTML page in which they live looses focus. And will be resumed (if they were playing) when the page regains focus. Setting this property to true will make the simulation to continue playing (if it was playing) even if the page in which they leave loose focus. You can also set this property using the model function _model.setRunAlways(run), where run is a boolean value or expression.

InnerHTML: This property accepts a multiline text that will be set as inner HTML for a hidden <div> element of the page.

This, apparently secret, code is a placeholder to define special elements that can be used in other HTML View elements. For instance, this is the place to define SVG filters. As an example, you can include this text to define a radial gradient filter:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="MyGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
</svg>

You can later use "url(#MyGradient)" as FillColor for a 2D SVG element. Here is an example.

OnBlur: This is an Action property that is executed when the HTML page looses focus.

You can use this action, for instance, to stop a sound from playing when the user switches pages.

OnFocus: This is an Action property that is executed when the HTML page gains focus.

You can use this action, for instance, to resume a sound that was playing when the user switched pages.