...

The imported projects contain a meta model for Turing machines. (You may notice that this tutorial thus also slips in a perfect opportunity to brush up on your knowledge of Turing machines. Consider it a public service and thank us later.) It does not model the tape or the head, only its states and transitions. It is these Turing machines that we will develop a visualization for over the course of this tutorial.

Creating a Visualization

Now that we have the model of what we want to visualize, it's time to program the actual visualization. But first, let's take a minute to think about what we need to do here. Take a look at the following diagram:

...

1. Add a new method to your synthesis that transforms a State into a corresponding KNode:

   Code Block
   language scala linenumbers true
   private def KNode transform(State state) { val stateNode = state.createNode().associateWith(state); return stateNode; }

2. While this method does indeed create a node for the state passed to it, KLighD wouldn't know how to render it yet. Let's draw the node as a rounded rectangle by adding the following line before the return statement:

   Code Block
   language java linenumbers true
   stateNode.addRoundedRectangle(4, 4, 2);

3. The only thing missing now is a label with the state's name:

   Code Block
   language java linenumbers true
   stateNode.addInsideCenteredNodeLabel(state.name, KlighdConstants.DEFAULT_FONT_SIZE, KlighdConstants.DEFAULT_FONT_NAME); stateNode.addLayoutParam( LayoutOptionsCoreOptions.NODE_SIZE_CONSTRAINTCONSTRAINTS, EnumSet.of(SizeConstraint.MINIMUM_SIZE, SizeConstraint.NODE_LABELS));

4. Now that we know how to transform states, we have to call our new method from the main transformation method. Replace the comment in its body with the following line of code:

   Code Block
   language scala linenumbers true
   model.states.forEach[ s | root.children += transform(s) ]

Let's see if our visualization works. Start your program (if you don't know how to do that, check out our Eclipse Plug-ins and Extension Points tutorial) and follow these steps:

...

1. Add the following code right before the return statement in the state transformation method:

   Code Block
   language scala linenumbers true
   stateNode.outgoingEdges.addAll(state.outgoingTransitions.map[ t | transform(t) ])

2. Of course, we will have to add a transform method for transitions now:

   Code Block
   language scala linenumbers true
   private def KEdge transform(Transition trans) { val transEdge = trans.createEdge().associateWith(trans) return transEdge; }

3. Again, we need to tell KLighD how to render the label:

   Code Block
   language java linenumbers true
   transEdge.addPolyline(2).addHeadArrowDecorator();

4. And the edge also needs a label that describes the transition:

   Code Block
   language scala linenumbers true
   // Add a label to the edge val label = KimlUtilKGraphUtil.createInitializedLabel(transEdge); val labelText = trans.trigger + " / " + trans.action + " " + trans.direction + " " + trans.newChar; label.configureCenterEdgeLabel(labelText, KlighdConstants.DEFAULT_FONT_SIZE, KlighdConstants.DEFAULT_FONT_NAME);

5. What is missing now is to set the edge target to the node that represents the target state. There's a problem here, though: we don't even know if the target state already had a node created for it. Thus, we need to make sure it has:

   Code Block
   language java linenumbers true
   transEdge.target = transform(trans.targetState);

6. This, however, results in a different problem: if the target state already had a node created for it, we now create another node. What we would need the state transformation method to do would be to first check if a node has already been created for a given state, and, if so, return that instead of creating a new one. It turns out that Xtend already supports this pattern. Change the method's declaration and its first line to the following:

   Code Block
   language scala linenumbers true
   private def create stateNode : state.createNode() transform(State state) { stateNode.associateWith(state);

   Also, remove the return statement. Xtend now checks if we already created a node for the given state and, if not, execute the code in the method.

Start your program again, open your Turing machine file and add an outgoing transition (with pretty much arbitrary properties) to your Wilhelm Tell state. Change the  properties 'New Char' and 'Trigger' to arbirtary characters (but not 0, since that translates to the ASCII char null and will kill your Label).  Set the Apple state as the transition's target state. Save the model and fire up a KLighD view. It should look something like this:

...