Up until this point, the <machine> directive has been emplaced into a page and linked to UI elements provided on the page. As we build more examples, this creation of UI to support Pause, Resume, Step and so on will become repetitive and tedious. So let’s create a more convenient directive that provides both a <machine> as well as UI to manage the control and status of the underlying machine.

Embedding a default UI into <machine>

So that I don’t break all my previous examples, I will create a new version of the directive that will serve as the next generation platform for subsequent computation experiments. This new directive will have the option of embedding control UI into its page context, as well as a bunch of other features (focusing, rewriting, general L-systems and proof logics). I could have extended <machine>, but then I would always have to verify that my old version still worked. So instead, I will construct a <mlmmachine> directive that has an associated subdirective <mlmpanel>, and perhaps eventually other non-UI directives such as <mlmrule>, <mlmstate> and so on.

The code for the above is:

<div style="background-color: aliceblue;">

<h6>Machine Time: {{ MA.getMachineTime() }}</h6>
<h6>Machine State: {{ MA.getMachineState() }}</h6>
<h6>Machine Running: {{ MA.isRunning() }}</h6>

<h6>Program Value: {{ programValue }}</h6>
<h6>Program History: {{ programHistory }}</h6>

<mlmmachine
  ptr="MA"
  ng-init="programHistory = ''; programValue=0;"
  reset-fn="programHistory='-'; programValue=1;"
  step-fn=
    "programHistory = programHistory + 'S'; (MA.getMachineTime() > 10) ? (MA.haltMachine()) : (programValue = programValue * 2)"
  pause-fn="programHistory = programHistory + 'P'"
  resume-fn="programHistory = programHistory + 'R'"
  halt-fn="programHistory = programHistory + 'H'"
  class="mlm background">

<mlmpanel></mlmpanel>

</mlmmachine>

</div>