Class TabLayout3

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

TabLayout3 is similar to TabLayout, except each canvas has its own controls area. Each pair of canvas and controls are contained in a div. This makes it visually clear which controls go with the SimView, and which go with the Graph (or TimeGraph). The controls are shown or hidden along with the canvas in most layouts.

HTML Changes

TabLayout3 requires use of stylesheet2.css and the macro CONTROLS_CONTAINER2 in macros_tab.html in the HTML page that loads the app.

Element IDs

TabLayout3 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 instances of the same simulation running concurrently on a single page.

These are the names expected to be in the element IDs object:

• tab_list
• container
• term_output
• term_input
• sim_applet
• div_graph
• graph_controls
• sim_controls
• div_terminal
• div_time_graph
• time_graph_controls
• label_terminal
• show_terminal
• show_sim
• images_dir

Layouts

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 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 Simulation' Checkbox

The 'show simulation' checkbox is visible in the graph views. Clicking the 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 TabLayout3 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

The layout depends on whether there is one, two, or three canvases visible. And on how wide the window is.

In each case, the controls should appear grouped with the canvas they "belong" to:

• The simulation controls (playback, and various simulation settings) appear with the sim-canvas.
• The graph controls (which variable to display, etc.) appear with the graph canvas.
• And similar for the time-graph and its controls.

The size of the canvases depends on the window size. For the single canvas case, we use CSS style "max-width: 95vw" and "max-height: 95vh" which means it will be full size when the window is large enough (but no larger), and will be 95% of the window size when the window is smaller.

For the single canvas case, the controls can appear either to the right of the canvas (when there is room), or below the canvas. In either case, we arrange the controls in columns if there is adequate space.

For the two canvas case with wide window: the canvas size is set to be roughly 47% of the window width. The canvases appear side-by-side, with their controls below each one (in columns if there is enough space).

For two canvas case with narrow window: the canvas size is 95% of the window, and they appear one above the other, but each has their controls just below them.

Terminal Checkbox

A 'show terminal' checkbox is added to the controls div in all layouts, unless the opt_terminal parameter is false.

Parameters Created

• ParameterNumber named SIM_WIDTH, see setSimWidth

• ParameterNumber named GRAPH_WIDTH, see setGraphWidth

• ParameterNumber named TIME_GRAPH_WIDTH, see setTimeGraphWidth

• ParameterString named LAYOUT, see setLayout

• ParameterBoolean named SHOW_TERMINAL, see showTerminal