CS 404/504: Program Monitoring and Visualization HW#2

Due: Wednesday February 13, 11:59pm

In this assignment, you will learn and practice Unicon's 2D graphics facilities. Write a Unicon program that reads in your output JSON file from HW#1, and renders it graphically in 2D in a Unicon window. Graph layout is a whole mini-industry for which many Ph.D. dissertations have been written. For this assignment we will use dot (see graphviz.org and this manual) to do the graph layout for you.

Part One: Read Your JSON and Write .dot

If only we had anticipated that we were going to use dot.

Use the Unicon JSON library and read in a JSON file (should be about one line of code) given in the format that your HW#1 output.
Write it out as a .dot file (same basename, file extension changed from .json to .dot). Example .dot file:
```
digraph mygraph {
   a -> b -> c;
   b -> d;
  }
```

Part Two: Run Dot and Read/Parse the Output Layout

Although there are nice descriptions of The DOT Language and its attributes, we are interested in reading only that subset that is what the dot program writes out by way of specifying the layout of the graph.

Run "dot myfile.dot" in a pipe (Unicon open mode "p") and read in the layout dot has generated for you. Example layout is shown below. C++ // comments are not present in the file but are for your enlightenment.

digraph graphname {
	graph [bb="0,0,126,180"]; // bounding box (points)
	node [label="\N"];	  // each node's name is its label
	a     [height=0.5,	  // (inches)
	      pos="63,162",	  // center (points)
		width=0.75];	  // (inches)
	b	 [height=0.5,
		 pos="63,90",
			width=0.75];
				  // below: "spline control points" (points)
	a -> b	 [pos="e,63,108.41 63,143.83 63,136.13 63,126.97 63,118.42"];
	c  [height=0.5,
		   pos="27,18",
		width=0.75];
	b -> c	 [pos="e,35.634,35.269 54.285,72.571 50.04,64.081 44.846,53.693 40.134,44.267"];
	d  [height=0.5,
	   pos="99,18",
	width=0.75];
	b -> d	 [pos="e,90.366,35.269 71.715,72.571 75.96,64.081 81.154,53.693 85.866,44.267"];
}

Part Three: Open a Window and Draw the Graph

Units: while technically points are 1/72th of an inch, we will approximate this by saying they are units of pixels, and that when units are given in inches, they should be multiplied by 72 (so a height of 0.5 == 36 pixels). Optionally you could implement a command line option to scale this larger (say N pixels per "point") if you want.
Open a window (mode "g") whose size is given by the graph bounding box.
Draw nodes using DrawArc() and DrawString() for the label.
Draw edges using DrawCurve().