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, default 800
height of sim canvas in pixels, default 800
whether to add the 'show terminal' checkbox, default is true
Private debug_Whether to put dashed outline around elements for debugging layout. Outline differs from borders. Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.
Private div_div for graph controls
Private div_div for sim controls
Private div_div element for Terminal
Private div_div for time graph controls
Private graphwidth of graphCanvas, as fraction of available width
Private layout_name of current layout
Private show_Whether to also show the simulation in the graph views. Default for small screens is to not show the simulation, so that clicking on the graph tab shows the graph.
Private simwidth of simCanvas, as fraction of available width
Private terminalCan disable terminal with this flag.
Private timewidth of timeGraphCanvas, as fraction of available width
Add the control to the set of simulation controls.
whether to also add to SimControls, default is true
the control that was passed in
Adds the given Observer to this Subject's list of Observers, so that the Observer
will be notified of changes in this Subject. An Observer may call Subject.addObserver
during its observe method.
the Observer to add
Adds the Parameter to the list of this Subject's available Parameters.
the Parameter to add
if a Parameter with the same name already exists.
Notifies all Observers that this Subject has changed by calling observe on each Observer.
An Observer may call addObserver or removeObserver during its observe
method.
a SubjectEvent with information relating to the change
Notifies all Observers that the Parameter with the given name has changed by calling observe on each Observer.
the language-independent or English name of the Parameter that has changed
if there is no Parameter with the given name
Protected getReturns whether broadcasting is enabled for this Subject. See setBroadcast.
whether broadcasting is enabled for this Subject
Returns the ParameterBoolean with the given name.
the language-independent or English name of the ParameterBoolean
the ParameterBoolean with the given name
if there is no ParameterBoolean with the given name
Returns the ParameterNumber with the given name.
the language-independent or English name of the ParameterNumber
the ParameterNumber with the given name
if there is no ParameterNumber with the given name
Returns the ParameterString with the given name.
the language-independent or English name of the ParameterString
the ParameterString with the given name
if there is no ParameterString with the given name
Private getPrivate redoRemoves the Observer from this Subject's list of Observers. An Observer may
call removeObserver during its observe method.
the Observer to detach from list of Observers
Removes the Parameter from the list of this Subject's available Parameters.
the Parameter to remove
Protected setSets whether this Subject will broadcast events, typically used to temporarily disable broadcasting. Intended to be used in situations where a subclass overrides a method that broadcasts an event. This allows the subclass to prevent the superclass broadcasting that event, so that the subclass can broadcast the event when the method is completed.
whether this Subject should broadcast events
the previous value
Private setSets the number of columns for the controls div. Finds the width of a 1 column div, and uses that to determine how many columns will fit across the entire viewDiv. Assumes that the viewDiv contains both the canvas and controlsDiv. (I have not found a way to do this with just CSS). *
the div containing the canvas and controlsDiv *
the graph or simview *
the div containing the controls
Private setReturns a minimal string representation of this object, usually giving just identity information like the class name and name of the object.
For an object whose main purpose is to represent another Printable object, it is
recommended to include the result of calling toStringShort on that other object.
For example, calling toStringShort() on a DisplayShape might return something like
this:
DisplayShape{polygon:Polygon{'chain3'}}
a minimal string representation of this object.
Static getReturns array containing all possible layout values.
array containing all possible layout values
Generated using TypeDoc
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,
divfor 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.cssand the macroCONTROLS_CONTAINER2inmacros_tab.htmlin 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:
Layouts
There are 7 layouts:
Layout Tabs
The set of layout tabs is contained in a UL list. Each tab has a
classNameproperty 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
classNameof the sim tab when it is selected.The layout tabs are expected to be:
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:
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 theLabCanvas 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.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 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_terminalparameter is false.Parameters Created
ParameterNumber named
SIM_WIDTH, see setSimWidthParameterNumber named
GRAPH_WIDTH, see setGraphWidthParameterNumber named
TIME_GRAPH_WIDTH, see setTimeGraphWidthParameterString named
LAYOUT, see setLayoutParameterBoolean named
SHOW_TERMINAL, see showTerminal