Reference

#Display options

An option can be set as an HTML attribute (monitor="false") or as a JavaScript property ({ monitor: false }). JavaScript options take precedence. Invalid values are ignored. Boolean attributes accept true, false, or the attribute by itself for true.

<bus-diagram fit="contain" toolbar="compact" monitor="false" style="height:520px"></bus-diagram>

const diagram = BusDiagram.create("#diagram", scenario, {
  fit: "contain",
  toolbar: "compact",
  monitor: false,
});
diagram.options = { monitor: true }; // Change an option later.

#toolbar

Toolbar above the diagram. ‘full’ shows the title, speed, filter tables, step control, pause, and reset. ‘compact’ shows three small floating buttons in a corner of the diagram, suitable for a slide. ‘none’ hides the controls while leaving the diagram interactive.

<bus-diagram toolbar="compact">

#monitor

Group monitor and telegram details below the diagram. Set to false when a slide or page needs only the diagram. Telegrams still travel over the bus.

<bus-diagram monitor="false">

#description

Scenario description below the toolbar. Hide when the page or slide already explains the interaction.

<bus-diagram description="false">

#hints

Hint explaining short and long button presses. Shown only when a button distinguishes short and long presses.

<bus-diagram hints="false">

#fit

Diagram scaling. ‘width’ uses the available width between minScale and maxScale; oversized diagrams scroll horizontally instead of becoming unreadable. ‘contain’ fits the entire diagram within the component; give the component an explicit height, such as 100% of a slide.

<bus-diagram fit="contain" style="height:560px">

#maxScale

Maximum diagram scale. Prevents a small diagram from becoming oversized on a large screen.

<bus-diagram max-scale="1">

#minScale

Minimum scale in ‘width’ mode before horizontal scrolling. Below this scale, labels would become unreadable, so the diagram scrolls.

<bus-diagram min-scale="0.5">

#speed

Initial simulation speed. 1 is real time, 0.35 is slower, and 2 is faster. The long-press threshold (0.5 real seconds) does not change.

<bus-diagram speed="0.35">

#stepMode

Start in step mode. Pause at each transmission, coupler decision, reception, output change, and scheduled event, with an explanation and a Next button.

<bus-diagram step-mode>