Class myphysicslab.sims.layout.TabLayout

Provided By
All Implemented Interfaces

TabLayout is a tab-based layout for showing a simulation, graph, controls. TabLayout implements specific ways to present the application on the web page, in this case with a tab-based layout. TabLayout creates and manages various layout elements (LabCanvas, div for controls, Terminal, etc.). Defines regular expressions for easy Terminal scripting of these objects using short names such as terminal, simCanvas, graphCanvas.

TabLayout constructor takes an argument that specifies the names of the HTML elements to look for in the HTML document; these elements are where the user interface of the simulation is created. This allows for having two separate simulations running concurrently on a single page.


There are 7 layouts:

  • sim shows sim-view and sim-controls
  • graph shows graph and graph-controls
  • sim+graph show graph, sim-view, and graph-controls
  • time_graph shows time-graph and time-graph-controls
  • sim+time_graph shows time-graph and sim-view, and time-graph-controls
  • multi_graph shows both graph and time-graph
  • sim+multi_graph shows graph, time-graph and sim-view

Layout Tabs

The set of layout tabs is contained in a UL list. Each tab has a className property which identifies the name of the tab. Clicking on a tab will change the layout.

The selected tab also has the class 'selected', for example 'sim selected' would be the className of the sim tab when it is selected.

The layout tabs are expected to be:

  • sim: selects the 'sim' layout
  • graph: selects the 'sim+graph' layout
  • time_graph: selects the 'sim+time_graph' layout
  • multi_graph: selects the 'sim+multi_graph' layout

Note that each graph tab corresponds to two different layouts: with or without the sim view.

'Show Sim' Checkbox

The 'show sim' checkbox is visible in the graph views. Clicking the 'show sim' checkbox will change the layout to pick the appropriate version of the current layout, for example either 'sim+graph' or 'graph'. The method #showSim can be used from JavaScript to accomplish the same result.

Size of Sim, Graph, TimeGraph

There are three 'levels' which affect how the Simulation, Graph and TimeGraph appear:

  1. There are Parameters for SIM_WIDTH, GRAPH_WIDTH, TIME_GRAPH_WIDTH. These stretch or shrink the canvas, without changing the resolution of the canvas (the canvas screen rectangle remains the same). These set the width of the

    surrounding the LabCanvas's to that fraction of the window width, and the canvas stretches or shrinks to fit into the
    . These Parameters only apply when a single canvas (Sim, Graph, or TimeGraph) is shown alone without another canvas alongside. When there are two or more canvases then we always use 49% width to fit two canvases side-by-side.
  2. LabCanvas Parameters for WIDTH, HEIGHT: These set the pixel density (resolution) and shape (ratio of width to height) of the canvas. These determine the ScreenRect that is passed to the LabViews. The size of the Simulation LabCanvas is set according to arguments passed to the TabLayout constructor. In contrast, the Graph and TimeGraph LabCanvas are always square shaped. Their size is the bigger of the Sim LabCanvas width or height. The size of any LabCanvas can be changed after construction if desired.

  3. SimView Parameters for WIDTH, HEIGHT, CENTER_X, CENTER_Y, VERTICAL_ALIGN, etc. These affect only the SimRect, which determines simulation coordinates. Pan and zoom of the image can be done by changing these Parameters.

Layout Of Controls

We use CSS style display: inline-block on the controls div, so that it naturally flows to right of the canvas if there is enough room, otherwise it flows below the canvas. The method alignCanvasControls() attempts to set the controls to have 2 columns when the controls are below the canvas.

We set the canvases to 'float: left' so that the 'show sim' and 'show terminal' controls will flow under the controls div.

We use

instead of
to separate controls. This fixes a problem in Firefox which was adding a blank line (after the controls-div, before the 'show terminal' checkbox).

Terminal Checkbox

A 'show terminal' checkbox is added to the controls div in all layouts, but only when not using advanced compile.

When using advanced-optimizations compile mode the Terminal will not work, because all method and class names are minified, and unused code is eliminated -- so even if you could get at a minified class, much of it would not be there to use.

Parameters Created

new TabLayout( elem_ids, canvasWidth, canvasHeight )

elem_ids{container: string, div_graph: string, div_terminal: string, div_time_graph: string, graph_controls: string, images_dir: string, label_terminal: string, show_sim: string, show_terminal: string, sim_applet: string, sim_controls: string, tab_list: string, term_input: string, term_output: string, time_graph_controls: string}

specifies the names of the HTML elements to look for in the HTML document; these elements are where the user interface of the simulation is created.


width of sim canvas in pixels


height of sim canvas in pixels

Instance Methods

Instance Properties

Static Functions

Static Properties


Type Definitions