Class TabLayout

TabLayout is a tab-based layout for showing a simulation, graph, and 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.). It also defines regular expressions for easy Terminal scripting of these objects using short names such as terminal, simCanvas, graphCanvas.

Element IDs

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 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
  • div_sim_controls
  • div_terminal
  • div_time_graph
  • div_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 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.

The default state of the 'show sim' checkbox is set inside the application's HTML file by the presence or absence of the word checked in a line like this:

<input type="checkbox" id="show_sim" checked>show simulation

This is usually determined by a macro in the macros_tab.html file.

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.

The individual controls have display: block and are styled with CSS.

Terminal Checkbox

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

Parameters Created

Hierarchy (view full)

Implements

Constructors

constructor

Properties

debug_layout div_sim_controls div_term div_time_graph_controls graphWidth_ layout_ show_sim_cb simWidth_ terminalEnabled_ timeGraphWidth_

Methods

addControl addObserver addParameter alignCanvasControls broadcast broadcastParameter getBroadcast getClassName getGraphCanvas getGraphControls getGraphDiv getGraphWidth getLayout getName getObservers getParameter getParameterBoolean getParameterNumber getParameterString getParameters getSelectedTab getSimCanvas getSimControls getSimDiv getSimWidth getSubjects getTerminal getTimeGraphCanvas getTimeGraphControls getTimeGraphDiv getTimeGraphWidth redoLayout removeObserver removeParameter setBroadcast setDisplaySize setGraphWidth setLayout setLayoutFromTab setSelectedTab setSimWidth setTimeGraphWidth showSim showTerminal toString toStringShort getLayoutValues

Constructors

constructor

  • new TabLayout(elem_ids, canvasWidth?, canvasHeight?, opt_terminal?): TabLayout

  • Parameters

    • elem_ids: ElementIDs

      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.

    • canvasWidth: number = 800

      width of sim canvas in pixels, default 800

    • canvasHeight: number = 800

      height of sim canvas in pixels, default 800

    • opt_terminal: boolean = true

      whether to add the 'show terminal' checkbox, default is true

    Returns TabLayout

Properties

debug_layout

debug_layout: boolean = false

Whether to put dashed borders around elements for debugging layout.

Private div_sim_controls

div_sim_controls: HTMLDivElement

div for sim controls

Private div_term

div_term: HTMLDivElement

div element for Terminal

Private div_time_graph_controls

div_time_graph_controls: HTMLDivElement

div for time graph controls

Private graphWidth_

graphWidth_: number = 1

width of graphCanvas, as fraction of available width

Private layout_

layout_: string

name of current layout

Private show_sim_cb

show_sim_cb: HTMLInputElement

The 'show sim' checkbox is added to the graph views.

Private simWidth_

simWidth_: number = 1

width of simCanvas, as fraction of available width

Private terminalEnabled_

terminalEnabled_: boolean

Can disable terminal with this flag.

Private timeGraphWidth_

timeGraphWidth_: number = 1

width of timeGraphCanvas, as fraction of available width

Methods

addControl

addObserver

addParameter

Private alignCanvasControls

  • alignCanvasControls(canvas, controls, canvas2?): void

  • Positions the controls in relation to the canvas. 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. This method attempts to set the controls to have 2 columns when the controls are below the canvas.

    Parameters

    • canvas: HTMLElement

      the div containing the canvas element

    • controls: HTMLElement

      the div containing the controls

    • Optional canvas2: HTMLElement

    Returns void

broadcast

broadcastParameter

Protected getBroadcast

getClassName

getGraphCanvas

getGraphControls

  • getGraphControls(): HTMLDivElement

  • Returns HTMLDivElement

    Inherit Doc

getGraphDiv

getGraphWidth

  • getGraphWidth(): number

  • Returns the width of the graph LabCanvas, as fraction of available width

    Returns number

    width of the graph LabCanvas, as fraction of available width

getLayout

getName

getObservers

getParameter

getParameterBoolean

getParameterNumber

getParameterString

getParameters

Private getSelectedTab

  • getSelectedTab(): string

  • Returns classname of selected tab

    Returns string

    classname of selected tab, or empty string if none selected

getSimCanvas

getSimControls

  • getSimControls(): HTMLDivElement

  • Returns HTMLDivElement

    Inherit Doc

getSimDiv

getSimWidth

  • getSimWidth(): number

  • Returns the width of the simulation LabCanvas, as fraction of available width

    Returns number

    width of the simulation LabCanvas, as fraction of available width

getSubjects

getTerminal

getTimeGraphCanvas

getTimeGraphControls

  • getTimeGraphControls(): HTMLDivElement

  • Returns HTMLDivElement

    Inherit Doc

getTimeGraphDiv

  • getTimeGraphDiv(): HTMLDivElement

  • Returns HTMLDivElement

    Inherit Doc

getTimeGraphWidth

  • getTimeGraphWidth(): number

  • Returns the width of the time graph LabCanvas, as fraction of available width

    Returns number

    width of the time graph LabCanvas, as fraction of available width

Private redoLayout

  • redoLayout(): void

  • Redo the current layout, either because the type of layout changed or the size of the view port changed.

    Returns void

removeObserver

removeParameter

Protected setBroadcast

  • setBroadcast(value): boolean

  • Sets 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.

    Parameters

    • value: boolean

      whether this Subject should broadcast events

    Returns boolean

    the previous value

Private setDisplaySize

  • setDisplaySize(max_width, graph_div): void

  • Sets the size of the SimCanvas and a graph. This limits the SimCanvas so that it fits in the window.

    Parameters

    • max_width: number

      size of SimCanvas, as fraction of screen width, from 0 to 1

    • graph_div: HTMLElement

    Returns void

setGraphWidth

  • setGraphWidth(value): void

  • Sets the width of the graph LabCanvas, as fraction of available width.

    Parameters

    • value: number

      width of the graph LabCanvas, as fraction of available width

    Returns void

setLayout

setLayoutFromTab

  • setLayoutFromTab(layout): void

  • Sets current layout based on which tab was clicked

    Parameters

    • layout: string

      class name of tab that was clicked

    Returns void

Private setSelectedTab

  • setSelectedTab(layout): void

  • Sets selected tab to be the tab with given className

    Parameters

    • layout: string

      className of tab

    Returns void

setSimWidth

  • setSimWidth(value): void

  • Sets the width of the simulation LabCanvas, as fraction of available width.

    Parameters

    • value: number

      width of the simulation LabCanvas, as fraction of available width

    Returns void

setTimeGraphWidth

  • setTimeGraphWidth(value): void

  • Sets the width of the time graph LabCanvas, as fraction of available width.

    Parameters

    • value: number

      width of the time graph LabCanvas, as fraction of available width

    Returns void

showSim

  • showSim(visible): void

  • Change layout to hide or show simulation view.

    Parameters

    • visible: boolean

      whether sim view should be visible

    Returns void

showTerminal

toString

toStringShort

  • toStringShort(): string

  • Returns 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'}}

    Returns string

    a minimal string representation of this object.

Static getLayoutValues

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc