GRAPH-ENE

GRAPH-ENE allows you to build undirected graphs, with multiple edges between 2 verticies, and edge loops that begin and end at a single vertex. Edges may be curved by dragging one of two diamond shape control points on the edge. Loops can be resized by dragging the diamond shape control point. Vertices, edges, and the graph itself can be labeled.

The main menu bar has 4 behavior buttons on the left, and 5 action buttons on the right.

The behavior buttons allow you to build and manipulate a graph. Click a behavior button to build a graph, label a graph, highlight the graph components, or edit a graph by moving, deleting, labeling, coloring, or highlighting graph components. The button for the current behavior choice will appear with a black border and white background. The other buttons will have a shaded background with a blue border. Click one of the tabs to get help on any of these behaviors.

The action buttons allow you to download graph data, load graph data, load a background image for a graph, download a PNG image of the graph, or display this help page. Click the "Actions" tab to get help on these topics.

Below the primary menu bar are two secondary menu bars. Additional input controls appear here as appropriate. A pair of radio buttons always appear here that allow control points to be turned on or off. The active radio button will appear with a black border and white background.

When you select the Build behavior button, GRAPH-ENE will allow you to build a graph by adding vertices, edges, and loops.

Add a Vertex

To add a vertex, simply click the left mouse button on the graph. The vertex will appear.

Add an Edge

To add an edge, simply press the left mouse button, drag the mouse, and release the mouse button. If you start dragging the mouse on a vertex, the edge will start at that vertex. Otherwise, a new start vertex is created. Likewise, if you release the mouse button on an existing vertex, the edge will end at that vertex. Otherwise, a new end vertex is created. The mouse cursor will change to a cross-hair shape when it is over a vertex.

Add a Loop

To add a loop, press the left mouse button for the start vertex, drag the mouse away from the start vertex, return the mouse to the start vertex, and release the left mouse button.

Control Points

You can curve an edge, or adjust the size and position of a loop, by dragging the diamond shape control points. The mouse cursor will change to a cross-hair shape when it is over a control point. Press the left mouse button on the diamond, drag the diamond to the desired position, and release the left mouse button.

When you select the Label behavior button, GRAPH-ENE allows you to label a graph, or change the text of labels already on the graph. Vertices, edges, and loops may all be labeled. These labels are anchored to their graph component, and will move if their attached component is moved. Free labels that are not anchored to any graph component can also be placed on the graph

Add or Select a Label

To add a label to a graph component, click on the component with the left mouse button to select the component. The selected component will appear with a hatched "select" pattern behind it. If the component already has a label, or if you select an existing label, you will be able to change the existing text. You will notice that if you have not selected any graph component, the text "<new label>" follows the mouse cursor around the screen. Clicking the left mouse button will create a new free label on the graph and select the new label. The image shows a selected label "A" and a free label with text "<new label>". A gray line shows that the selected label is attached to the vertex.

Edit Label Text

When a graph component is selected, a set of input controls will appear on the secondary menu bar. The first is an input box for editing the text. If an existing label is selected, its text will appear in the box. You will enter or edit the label text in this box. To change the label text on the graph, click the Okay button, or press the "enter" key.

Three other buttons also appear on the secondary menu bar. The Delete button will delete the selected label. If the selected object was not a label, it will remain selected. The Reset button will restore the label to whatever value it had when the graph component was selected. Note that newly created free labels will return to the value "<new label&rt;". Finally, clicking on the Cancel button or clicking on a blank area of the graph will end the current selection.

Label All Vertices or Edges

When you select the Label behavior button, the Label Vertices and Label Edges buttons appear in the secondary menu area. These buttons make it easy to label all vertices or edges using just the keyboard. When pressed, they step through and select all vertices or all edges and loops one at a time. You can then type in or edit the label for the graph component, and then press the "enter" key (or click the Okay button) to get the next component. Should you press Cancel, you will end the labeling process before all component have been labeled.

When you select the Highlight behavior button, GRAPH-ENE allows you to highlight the vertices, edges, loops, and labels in a graph. A radio box with the highlight color options will appear in the secondary menu area. The first radio button option is a clear highlighting button. The remaining radio buttons are highlighting colors. The currently selected radio button will have a back border. The remaining radio buttons will have a bluse border and a blue shaded background.

Once you have selected a highlight color, click the left mouse button on graph components to change their highlighting. As you move the mouse, the mouse cursor will change to a cross-hair when it is over a a graph component.

If the clear highlight radio button is selected, clicking the left mouse button on a component will clear any highlighting for that component. If a highlight color radio button is selected, clicking on a component will toggle its highlight color. Toggling clears the highlight color if the component has the same highlight color as the selected radio button. Otherwise, it sets the highlight color of the component to the selected highlight color.

When you select the Edit behavior button, you can edit graph components. Components can be moved, deleted, colored, highlighted, or labeled.

Move a Component

You can drag vertices, edges, loops, and labels to reposition them. To move a component, move the mouse cursor over the component. A cross-hair mouse cursor will appear. Press the left mouse button, drag the component to its new position, and release the left mouse button. The component will remain selected for more editing.

Dragging an edge or loop will drag its incident vertices. Dragging non-labels will drag their attached labels. Dragging labels will change their position relative to their attached component.

Select a Component for Editing

Components are selected if they are dragged. Components can also be selected by left clicking on them with the mouse. The selected component will appear with a hatched "select" pattern behind it. Clicking on a blank section of the graph will clear the current selection.

Editing Input Controls

When a graph component is selected, several input controls will appear in the secondary menu area. These controls are used to delete, color, highlight, and label the selected component. These controls will represent the current color, highlight, and label values of the component when it is selected.

Delete a Component

To delete the selected graph component, click on the Delete button. The control will be removed from the graph. If a vertex is deleted, any incident edges will also be deleted. After the component is deleted, there will be no selection for editing.

Edit Component Color

The edit controls include a set of color radio buttons for setting the color of the component. To set the color, click on the desired color radio button. The color radio button for the component's current color will display a black border with a white background.

Edit Component Highlight Color

The edit controls include a set of highlight color radio buttons for setting the highlighting color of the component. To set the highlight color, click on the desired highlight color radio button. The first radio button is used to clear the highlight color. The highlight color button for the component's current highlight color will display a black border with a white background. Note that when editing a component, you set a highlight color, whereas when using the Highlight behavior, highlighting is toggled.

Edit a Component Label

You can edit the text of a selected label, or the text of a label attached to a selected component. Use the edit box control to edit the text. Click the Okay button, or press the "enter" key, to save the text changes to the graph.

Two other buttons also appear with the label input controls. The Delete button will delete the selected label. If the selected component was not a label, it will remain selected. The Reset button will restore the label to whatever value it had when the graph component was selected.

The action buttons allow you to download graph data, load graph data, load a background image for a graph, download a PNG image of the graph, or display this help page.

Save

The Save button will download the graph data to a file on your computer. You may have to set the download options on your browser to allow you to choose where to save the file.

Load

The Load button will upload a file containing graph data from your computer. Your browser will allow you to select a file on the computer using an open file dialog box.

Background Image

The Background button will upload a PNG image file to use as a background image for your graph. Once the image is uploaded, it appears under the graph. This allows you to build a graph to model whatever appears in the image. As long as a background image is loaded, a set of background image controls will appear in the secondary menu area. The Show and Hide huttons are radio buttons that allow you to control whether the background image is visible. The active radio button will appear with a black border and white background. The Clear button will remove the background image from the system.

Background images are not saved with graph data. They also do not appear in a downloaded PNG image file. Some browsers, including Firefox, allow you to right click on the graph and save it as an image. In that case, the background image will appear in the saved image.

Download PNG Image

The Image button will allow you to download a PNG image of the graph to your computer. You can then insert the PNG image into documents, or print the image. Depending on your browser, you will be able to save or view the downloaded image. You may have to set the download options on your browser to allow you to choose where to save the file.

Help

The  ?  button will display this help dialog.

GRAPH-ENE, version 1.2.1 test version.

© 2016, Dr. Robert A. Ravenscroft, Jr.

GRAPH-ENE uses jQuery and jQuery UI. See the links for information. See JQuery License for licensing information.

You may use and distribute this software as-is, free of charge.

This program is provided 'as is' without warranty of any kind, expressed or implied.