3 lines
17 KiB
HTML
3 lines
17 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>21-GRAPHER</title><link href="navigation.css" rel="stylesheet" type="text/css"/><link href="document.css" rel="stylesheet" type="text/css"/></head><body><p class="top_nav"><a href="part23.htm">< Previous</a><span> | </span><a href="../Medley-Primer.html">Contents</a><span> | </span><a href="part25.htm">Next ></a></p><h1 style="padding-top: 3pt;padding-left: 35pt;text-indent: 0pt;text-align: left;"><a name="bookmark23">21. THE GRAPHER</a></h1><p style="padding-left: 35pt;text-indent: 0pt;line-height: 6pt;text-align: left;"><span><img width="640" height="8" alt="image" src="Image_141.png"/></span></p><p style="text-indent: 0pt;text-align: left;"><br/></p><h2 style="padding-top: 14pt;padding-left: 35pt;text-indent: 0pt;text-align: left;">Say it with Graphs </h2><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-top: 4pt;padding-left: 107pt;text-indent: 0pt;text-align: justify;">Grapher is a collection of functions for creating and displaying graphs, networks of nodes and links. Grapher also allows you to associate program behavior with mouse selection of graph nodes. To load this package, type</p><p class="s3" style="padding-top: 6pt;padding-left: 143pt;text-indent: 0pt;text-align: left;">(FILESLOAD GRAPHER)</p><p style="padding-top: 7pt;padding-bottom: 3pt;padding-left: 107pt;text-indent: 0pt;text-align: left;">Figure 21-1 shows a simple graph.</p><p style="padding-left: 178pt;text-indent: 0pt;text-align: left;"><span><img width="355" height="217" alt="image" src="Image_142.gif"/></span></p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 249pt;text-indent: 0pt;text-align: left;">Figure 21-1. Simple Graph</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 107pt;text-indent: 0pt;text-align: left;">In Figure 21-1 there are six nodes (<span class="s3">ANIMAL </span>, <span class="s3">MAMMAL</span>, <span class="s3">DOG</span>, <span class="s3">CAT</span>, <span class="s3">FISH</span>, and <span class="s3">BIRD</span>)</p><p style="padding-left: 107pt;text-indent: 0pt;text-align: left;">connected by five links. A <span class="s3">GRAPH </span>is a record containing several fields. Perhaps the most</p><p style="padding-left: 107pt;text-indent: 0pt;line-height: 107%;text-align: left;">important field is <span class="s3">GRAPHNODES </span>—which is itself a list of <span class="s3">GRAPHNODE </span>records. Figure 21-2 illustrates these data structures. The window on top contains the fields from the simple</p><p style="padding-left: 107pt;text-indent: 0pt;line-height: 12pt;text-align: left;">graph. The window on the bottoms an inspection of the node, <span class="s3">DOG</span>.</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 147pt;text-indent: 0pt;text-align: left;"><span><img width="430" height="381" alt="image" src="Image_143.gif"/></span></p><p style="padding-top: 2pt;padding-left: 209pt;text-indent: 0pt;text-align: left;">Figure 21-2. Inspecting a Graph and a Node</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 107pt;text-indent: 0pt;line-height: 107%;text-align: left;">The <span class="s3">GRAPHNODE </span>data structure is described by its text (<span class="s3">NODEID </span>), what goes into it (<span class="s3">FROMNODES</span>), what leaves it (<span class="s3">TONODES </span>), and other fields that specify its looks. The basic model of graph building is to create a bunch of nodes, then layout the nodes into a</p><p style="padding-left: 107pt;text-indent: 0pt;line-height: 11pt;text-align: left;">graph, and finally display the resultant graph. This can be done in a number of ways.</p><p style="padding-left: 107pt;text-indent: 0pt;line-height: 107%;text-align: left;">One is to use the function <span class="s3">NODECREATE </span>to create the nodes, <span class="s3">LAYOUTGRAPH </span>to lay out the nodes, and <span class="s3">SHOWGRAPH </span>to display the graph. The primer shows you two simpler ways,</p><p style="padding-left: 107pt;text-indent: 0pt;line-height: 106%;text-align: left;">but please see the <i>Library Packages Manual </i>for more information about these other functions. The primer’s first method is to use <span class="s3">SHOWGRAPH </span>to display a graph with no nodes or links, then interactively add them. The second is to use the function</p><p class="s3" style="padding-left: 107pt;text-indent: 0pt;line-height: 107%;text-align: left;">LAYOUTSEXPR<span class="p">, which does the appropriate </span>NODECREATES <span class="p">and a </span>LAYOUTGRAPH<span class="p">, with a list.</span></p><p style="padding-top: 6pt;padding-left: 110pt;text-indent: 0pt;text-align: left;">The function <span class="s3">SHOWGRAPH </span>displays graphs and allows you to edit them. The syntax of</p><p class="s3" style="padding-left: 107pt;text-indent: 0pt;text-align: left;">SHOWGRAPH <span class="p">is</span></p><p class="s3" style="padding-top: 7pt;padding-left: 166pt;text-indent: -23pt;line-height: 107%;text-align: left;">(SHOWGRAPH <span class="s4">graph window lefibuttonfn middlebuttonfn topjustifyflg alloweditflg copybuttoneventfn</span>)</p><p style="padding-top: 7pt;padding-left: 107pt;text-indent: 0pt;text-align: left;">Obviously the graph structure is very complex. Here’s the easiest way to create a graph.</p><p class="s3" style="padding-top: 7pt;padding-left: 143pt;text-indent: 0pt;line-height: 11pt;text-align: left;">(SETQ MY.GRAPH NIL)</p><p class="s3" style="padding-left: 143pt;text-indent: 0pt;line-height: 11pt;text-align: left;">(SHOWGRAPH MY.GRAPH "My Graph" NIL NIL NIL T)</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 179pt;text-indent: 0pt;text-align: left;"><span><img width="350" height="195" alt="image" src="Image_144.gif"/></span></p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-top: 4pt;padding-left: 111pt;text-indent: 0pt;text-align: center;">Figure 21-3. My Graph</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 107pt;text-indent: 0pt;text-align: left;">You will be prompted to create a small window as in Figure 21-3. This graph has the title My Graph. Hold down the right mouse button in the window. A menu of graph</p><p style="padding-bottom: 2pt;padding-left: 107pt;text-indent: 0pt;text-align: left;">editing operations will appear as in Figure 21-4.</p><p style="padding-left: 248pt;text-indent: 0pt;text-align: left;"><span><img width="168" height="158" alt="image" src="Image_145.gif"/></span></p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 205pt;text-indent: 0pt;text-align: left;">Figure 21-4. Menu of Graph Editing Operations</p><p style="padding-top: 7pt;padding-left: 107pt;text-indent: 0pt;text-align: left;">Here’s how to use this menu. The commands in this menu are easy to learn. Experiment with them!</p><p style="text-indent: 0pt;text-align: left;"><br/></p><h3 style="padding-left: 71pt;text-indent: 0pt;text-align: left;">Add a Node</h3><p style="padding-top: 5pt;padding-bottom: 1pt;padding-left: 107pt;text-indent: 0pt;line-height: 107%;text-align: left;">Start by selecting <span class="s3">Add Node </span>. Grapher will prompt you for the name of the node (see Figure 21-5.) and then its position.</p><p style="padding-left: 228pt;text-indent: 0pt;text-align: left;"><span><img width="220" height="102" alt="image" src="Image_146.gif"/></span></p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 111pt;text-indent: 0pt;text-align: center;">Figure 21-5. Grapher Prompts for Name of Node to add after Add Node is Chosen from Graph Editing Menu.</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 107pt;text-indent: 0pt;text-align: left;">Position the node by moving the mouse cursor to the desired location and clicking a mouse button. Figure 21-6 shows the graph with two nodes added using this menu.</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 270pt;text-indent: 0pt;text-align: left;"><span><img width="108" height="80" alt="image" src="Image_147.gif"/></span></p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-top: 4pt;padding-left: 111pt;text-indent: 0pt;text-align: center;">Figure 21-6. Two Nodes Added to <span class="s3">MY GRAPH </span>Using GraphEditing Menu</p><p style="text-indent: 0pt;text-align: left;"><br/></p><h3 style="padding-left: 71pt;text-indent: 0pt;text-align: left;">Add a Link</h3><p style="padding-top: 5pt;padding-left: 107pt;text-indent: 0pt;line-height: 107%;text-align: left;">Select <span class="s3">Add Link </span>from the graph editing menu. The Prompt window will prompt you to select the two nodes to be linked. (See Figure 21-7.) Do this, and the link will be added.</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 157pt;text-indent: 0pt;text-align: left;"><span><img width="408" height="66" alt="image" src="Image_148.gif"/></span></p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 269pt;text-indent: 0pt;text-align: left;"><span><img width="108" height="80" alt="image" src="Image_149.gif"/></span></p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 111pt;text-indent: 0pt;text-align: center;">Figure 21-7. Prompt Window Requesting Selection of Two Nodes to Link, and Result</p><p style="text-indent: 0pt;text-align: left;"><br/></p><h3 style="padding-left: 71pt;text-indent: 0pt;text-align: left;">Delete a Link</h3><p style="padding-top: 5pt;padding-left: 107pt;text-indent: 0pt;line-height: 107%;text-align: left;">Select <span class="s3">Delete Link </span>from the graph editing menu. ThePrompt window will prompt you to select the two nodes that should no longer be linked. (See Figure 21-8.) Do this, and</p><p style="padding-left: 107pt;text-indent: 0pt;line-height: 11pt;text-align: left;">the link will be deleted.</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 159pt;text-indent: 0pt;text-align: left;"><span><img width="405" height="58" alt="image" src="Image_150.gif"/></span></p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 270pt;text-indent: 0pt;text-align: left;"><span><img width="108" height="79" alt="image" src="Image_151.gif"/></span></p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 111pt;text-indent: 0pt;text-align: center;">Figure 21-8. Prompt Window Requesting Selection of Link to Delete, and Result</p><p style="text-indent: 0pt;text-align: left;"><br/></p><h3 style="padding-left: 71pt;text-indent: 0pt;text-align: left;">Delete a Node</h3><p style="padding-top: 5pt;padding-left: 107pt;text-indent: 0pt;line-height: 107%;text-align: left;">Select <span class="s3">Delete Node </span>from the graph editing menu. The Prompt window will prompt you to select the node to be aeleted. (See Figure 21-9.) Do this, and the node will be deletea.</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 174pt;text-indent: 0pt;text-align: left;"><span><img width="372" height="38" alt="image" src="Image_152.gif"/></span></p><p style="padding-left: 111pt;text-indent: 0pt;text-align: center;">Figure 21.-9. Prompt to Delete a Node</p><p style="text-indent: 0pt;text-align: left;"><br/></p><h3 style="padding-top: 4pt;padding-left: 71pt;text-indent: 0pt;text-align: left;">Move a Node</h3><p style="padding-top: 5pt;padding-left: 107pt;text-indent: 0pt;line-height: 106%;text-align: left;">Select <span class="s3">Delete Node </span>from the graph editng menu. Choose a node pointing to the it with the mouse cursor, and pressing and holding the leff mouse button. When you move the mouse cursor, the node will be dragged along. When the node is at the new position,</p><p style="padding-left: 107pt;text-indent: 0pt;line-height: 11pt;text-align: left;">release the mouse button to deposit the node.</p><p style="text-indent: 0pt;text-align: left;"><br/></p><h2 style="padding-left: 35pt;text-indent: 0pt;text-align: left;">Making a Graph from a List </h2><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-top: 4pt;padding-left: 107pt;text-indent: 0pt;text-align: left;">Typically, a graph is used to display one of your program’s data structures. Here is how that is done.</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p class="s3" style="padding-left: 93pt;text-indent: 0pt;text-align: center;">LAYOUTSEXPR <span class="p">takes a list and returns a </span>GRAPH <span class="p">record. The syntax of the function is</span></p><p style="padding-top: 7pt;padding-left: 91pt;text-indent: 0pt;text-align: center;">(<span class="s3">LAYOUTSEXPR </span><i>sexpr format boxing font motherd personald famlyd</i>)</p><p style="padding-top: 8pt;padding-left: 107pt;text-indent: 0pt;text-align: left;">For example:</p><p class="s3" style="padding-top: 8pt;padding-left: 143pt;text-indent: 0pt;line-height: 88%;text-align: left;">(SETQ ANIMAL.TREE ’(ANIMAL (MAMMAL DOG CAT) BIRD FISH)) (SETQ ANIMAL.GRAPH</p><p class="s3" style="padding-left: 143pt;text-indent: 30pt;line-height: 88%;text-align: left;">(LAYOUTSEXPR ANIMAL.TREE ’HORIZONTAL)) (SHOWGRAPH ANIMAL.GRAPH "My Graph" NIL NIL NIL T)</p><p style="padding-top: 6pt;padding-left: 107pt;text-indent: 0pt;text-align: left;">This is how Figure 21.1 was produced.</p><p style="text-indent: 0pt;text-align: left;"><br/></p><h2 style="padding-left: 35pt;text-indent: 0pt;text-align: left;">Incorporating Grapher into Your Program </h2><p style="padding-top: 9pt;padding-left: 107pt;text-indent: 0pt;text-align: left;">The Grapher is designed to be built into other programs. It can call functions when, for example, a mouse button is clicked on a node. The function <span class="s3">SHOWGRAPH </span>does this:</p><p class="s3" style="padding-top: 7pt;padding-left: 166pt;text-indent: -23pt;line-height: 107%;text-align: left;">(SHOWGRAPH <span class="s4">graph window lefibuttonfn middlebuttonfn topjustifyflg alloweditflg copybuttoneventfn</span>)</p><p style="padding-top: 7pt;padding-left: 107pt;text-indent: 0pt;line-height: 107%;text-align: left;">For example, the third argument to <span class="s3">SHOWGRAPH </span>, <i>leftbuttonfn</i>, is a function that is called when the left mouse button is pressed in the graph window. Try this:</p><p class="s3" style="padding-top: 7pt;padding-left: 173pt;text-indent: -30pt;line-height: 88%;text-align: left;">(DEFINEQ (My.LEFT.BUTT0N.FUNCTION (THE.GRAPHNODE THE.GRAPH.WINDOW)</p><p class="s3" style="padding-left: 203pt;text-indent: 0pt;line-height: 10pt;text-align: left;">(INSPECT THE.GRAPHNODE)))</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p class="s3" style="padding-left: 173pt;text-indent: -30pt;line-height: 88%;text-align: left;">(SHOWGRAPH FAMILY.GRAPH "Inspectable family" (FUNCTION MY.LEFT.BUTTON.FUNCTION)</p><p class="s3" style="padding-left: 203pt;text-indent: 0pt;line-height: 10pt;text-align: left;">NIL NIL T)</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-left: 95pt;text-indent: 0pt;text-align: center;">In the example above, <span class="s3">MY.LEFT.BUTTON.FUNCTION </span>simply calls the inspector. The</p><p style="padding-left: 107pt;text-indent: 0pt;text-align: left;">function should be written assuming it will be passed a graphnode and the window that holds the graph. Try adding a function of your own.</p><p style="text-indent: 0pt;text-align: left;"><br/></p><h2 style="padding-left: 35pt;text-indent: 0pt;text-align: left;">More of Grapher </h2><p style="padding-top: 9pt;padding-left: 107pt;text-indent: 0pt;text-align: left;">Some other Library packages make use of the Grapher. (Grapher needs to be loaded with the packages to use these functions.)</p><p style="text-indent: 0pt;text-align: left;"><br/></p><p style="padding-top: 4pt;padding-left: 119pt;text-indent: -12pt;line-height: 107%;text-align: left;">• <span class="s3">MASTERSCOPE</span>: The Browser package modifies the Masterscope command, <span class="s3">. SHOW PATHS</span>, so that its output is displayed as a graph (using Grapher) instead of simply printed.</p><p style="padding-top: 7pt;padding-left: 107pt;text-indent: 0pt;text-align: left;">• <span class="s3">GRAPHZOOM</span>: allows a graph to be redisplayed larger or smaller automatically.</p><p class="nav"> </p><p class="nav"> </p><p class="nav"><a href="part23.htm">< Previous</a><span> | </span><a href="../Medley-Primer.html">Contents</a><span> | </span><a href="part25.htm">Next ></a></p><p class="nav"> </p></body></html>
|