Skip to content

Playground

Write an SCChart, see its diagram and run it tick by tick in your browser.

The playground runs the guide's own reimplementation of KIELER. For work you hand in, confirm the result in SCCharts Lab or KIELER. About the simulatorThe guide's own simulator, not KIELER. How it is checked

Examples

Showcase

Start here

Learn

Going further

Patterns

Reference

Compiler messages

Landing

ABRO

About the simulator

The playground runs the guide's own reimplementation of KIELER's compiler and simulator, checked against KIELER. For work you hand in, confirm the result in SCCharts Lab or KIELER. More about the simulator

Keyboard shortcuts

Ctrl+Enter
Step one tick
Ctrl+Shift+Enter
Rebuild the simulation after an edit
Ctrl+Space
Complete a name, a keyword or a target state
F12
Go to the declaration of the name under the cursor (or Ctrl-click or ⌘-click it)
Ctrl+/
Comment or uncomment the selected lines
Ctrl+F
Find and replace
F8
Go to the next problem (with Shift: the previous one)
Ctrl+S
Download the chart as a .sctx file
Ctrl+O
Open a .sctx file (or drop one on the editor)
Ctrl+Shift+S
Copy a link to this chart
EscthenTab
Leave the editor (Tab alone indents)
?
Show this help (outside the editor)

In the diagram

Drag to pan; Ctrl and the mouse wheel, or a pinch, zoom. With the diagram focused: the arrow keys pan, + and − zoom, 0 fits, 1 shows it at 100 %. The picture button downloads the diagram as an SVG file, in the light colours, for a report or a slide.

Press Tab once more to reach the chart's states and transitions: the arrow keys move between them in the order they are written, and Enter finds one in the source.

Click a state or a transition to find it in the source; the element under the cursor in the editor is outlined in the diagram. Hover over a name or a keyword in the editor to see what it is.

The list button shows the chart as an outline, every region, state and transition, for the keyboard and screen readers: moving through it marks the element in the diagram, and Enter selects its source.

In the simulation

Variables chooses what the timing diagram shows; the playground remembers it for each chart. Under the check boxes, Watch shows the value of an expression over the chart's inputs, outputs and variables in the tick shown (count >= 3 && !done, pre(x) != x; a variable of an inner state as Outer.count, a member as home.count, an enum value as Speed.HIGH), and Run until steps until the watch holds or a state is active (at most 1000 ticks). Copy link to this run copies a link with the inputs of every tick you ran: whoever opens it can step through the same run.

When a chart misbehaves

Troubleshooting goes from what you see (a transition that fires a tick late, an output that stays true, a chart that never terminates) to its cause and the fix. Compiler messages explains each error and warning; every problem in the list under the editor links to its entry.

Editor

/* * ABRO, the "hello world" of synchronous * languages: emit O as soon as both A and * B have happened (in any order, or in the * same tick), then wait for R, which * starts it all over. */scchart ABRO {  input signal A, B, R  output signal O   initial state ABO {    initial state WaitAB {      region HandleA:        initial state WaitA          if A go to DoneA        final state DoneA       region HandleB:        initial state WaitB          if B go to DoneB        final state DoneB    }    do O join to Done     state Done  }  if R abort to ABO}

Diagram

ABRO
SCChart ABROStates: ABO (initial, superstate), WaitAB (initial, superstate), WaitA (initial), DoneA (final), WaitB (initial), DoneB (final), Done. Transitions: WaitA to DoneA: A; WaitB to DoneB: B; WaitAB to Done: / O; ABO to ABO: R.ABROinput signalA, B, Routput signalOABOWaitABHandleAWaitADoneAAHandleBWaitBDoneBBDone/ OR

Simulation

Tick 0
Inputs for the next tick

Loading the simulator.Turn on JavaScript to run the chart.

Report a mistake on this page