#Programmatic control

<p>
  <button id="c-pause">Pause</button>
  <button id="c-play">Play</button>
  <button id="c-adv">+ 250 ms</button>
  <button id="c-reset">Reset</button>
  <button id="c-state">Read state</button>
</p>
<bus-diagram
  id="ctrl"
  scenario="#ctrl-json"
  toolbar="none"
  monitor="false"
  description="false"></bus-diagram>
<pre
  id="ctrl-out"
  style="font-size:12px;background:#fff;padding:8px;border:1px solid #dedbd2;border-radius:8px"></pre>
<script>
  const sim = document.getElementById("ctrl");
  const $ = (id) => document.getElementById(id);
  $("c-pause").onclick = () => sim.pause();
  $("c-play").onclick = () => sim.play();
  $("c-adv").onclick = () => sim.advance(250);
  $("c-reset").onclick = () => sim.reset();
  $("c-state").onclick = () => {
    const s = sim.getState();
    $("ctrl-out").textContent =
      `t = ${s.timeMs} ms, paused: ${s.paused}\nL1: ${s.equipment["switchActuator/s1"].state.on ? "on" : "off"}\nKey 1 object = ${s.objects["pushButton/b1"].value}`;
  };
</script>