-
Notifications
You must be signed in to change notification settings - Fork 0
/
help.html
119 lines (113 loc) · 7.91 KB
/
help.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!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>XORGM Documentation</title>
<style type="text/css">
body {
margin:50px;
font-family:Arial, Helvetica, sans-serif;
}
a {
font-size:70%;
}
img {
border:1px solid black;
}
ol {
margin-left:100px;
}
.toplink {
margin-bottom:50px;
}
.image {
text-align:center;
}
</style>
</head>
<body>
<p class="image"><img src="help_img/intro.png" style="border:none;" /></p>
<ol>
<a href="#intro"><li>Introduction</li></a>
<a href="#new"><li>Creating New Chart</li></a>
<a href="#theme"><li>Selecting Chart Theme</li></a>
<a href="#items"><li>Overview of Chart Items</li></a>
<a href="#place"><li>Placing Chart Items</li></a>
<a href="#grid"><li>Using the Grid</li></a>
<a href="#select"><li>Selecting Chart Items</li></a>
<a href="#move"><li>Moving Chart Items</li></a>
<a href="#delete"><li>Deleting Chart Items</li></a>
<a href="#undo"><li>Undo/Redo Buttons</li></a>
<a href="#style"><li>Styling Chart Items</li></a>
<a href="#fill"><li>Using the Fill Tool</li></a>
<a href="#text"><li>Using the Text Tool</li></a>
<a href="#link"><li>Creating Links</li></a>
<a href="#save"><li>Saving a Chart</li></a>
<a href="#export"><li>Exporting PNG</li></a>
<a href="#open"><li>Opening a Previously Saved File</li></a>
</ol>
<h2 id="intro">Introduction</h2>
<p>The Excellent Organizational Chart Maker (XORGM) was created to facilitate the development of org charts and flow charts for use in the AFOD Program. The intention is to encourage a common look and feel and to form a standard by which charts are to be presented. This being the initial release, there are still many improvements on the horizon for XORGM 2.0. Please feel free to contact the developers in the Multimedia Lab at CFSAS with comments or suggestions for further editions.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="new">Creating New Chart</h2>
<p class="image"><img src="help_img/new.png" /></p>
<p>Once XORGM has opened, create a new chart by selecting "New" from the File Menu in the upper left corner of the program.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="theme">Selecting Chart Theme</h2>
<p class="image"><img src="help_img/theme.png" /></p>
<p>Upon creation of a new chart, the theme should be picked to correspond with the module theme for this chart in the AFOD Program. This is done with the drop-down menu in the Properties Toolbar, located at the right of the program on start-up.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="items">Overview of Chart Items</h2>
<p>The behaviour of the various chart items available in the Shape Toolbar (which opens on the left by default) is determined by the use for which that item is intended. For example, the rectangular and circular shapes (which we will simply call <em>Pieces</em>) can not be rotated, and resize based only on the text or Chart Items within them. Pieces, however, can have links attached to them. The arrow shapes (<em>Arrows</em>) can be rotated, stretched, and flipped, but they can not have links attached to them. (Angled arrows rotate in 90 degree increments.) The use of links, as well as Arrow manipulation, will be addressed later in the document.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="place">Placing Chart Items</h2>
<p class="image"><img src="help_img/place.png" /></p>
<p>To place a Chart Item, select it from the Shape Toolbar and click on your canvas.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="grid">Using the Grid</h2>
<p class="image"><img src="help_img/grid.png" /></p>
<p>The canvas grid is on by default, and restricts item movement by ten pixel increments. For finer movement, click the "Toggle Grid" button on the canvas window to remove the default canvas grid. Click it again to make it reappear.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="select">Selecting Chart Items</h2>
<p class="image"><img src="help_img/selrect.png" /></p>
<p>To select a Chart Item on your canvas, click on it using the selection tool. To select multiple items, hold down the Shift key as you select them with the selection tool, or click the selection tool in an empty area of the canvas and drag it to form a selection rectangle.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="move">Moving Chart Items</h2>
<p>To move Chart Items you must drag selected Chart Items using the selection tool or nudge them using the arrow keys. For finer movement, use the "Toggle Grid" function.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="delete">Deleting Chart Items</h2>
<p>Delete a Chart Item by selecting it and pressing the Delete key on your keyboard.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="undo">Undo/Redo Buttons</h2>
<p class="image"><img src="help_img/undo.png" /></p>
<p>To undo an action, click the "Undo" button on the canvas window. To redo an action, click the "Redo" button on the canvas window.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="style">Styling Chart Items</h2>
<p class="image"><img src="help_img/style.png" /></p>
<p>Chart Items can be styled using the Properties Toolbar, which is located at the right side of the program by default. Set the Bevel, Deboss, Drop Shadow, and Stroke attributes using the corresponding check boxes, and select the appropriate fill, text, and stroke colours using the palettes provided. (The stroke colour is only visible when the Stroke attribute check box is checked.)</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="fill">Using the Fill Tool</h2>
<p class="image"><img src="help_img/fill.png" /></p>
<p>The Fill Tool is located in the Properties Toolbar. It may be used to alter the fill of a Chart Item by clicking on it after the correct fill colour has been selected from the Fill Colour palette.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="text">Using the Text Tool</h2>
<p class="image"><img src="help_img/text.png" /></p>
<p>The Text Tool is located in the Properties Toolbar. Use it to edit a Chart Item's text by clicking on the Chart Item, selecting the text, and typing your change.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="link">Creating Links</h2>
<p class="image"><img src="help_img/link.png" /></p>
<p>Links can only be created between Pieces (see Overview of Chart Items). To create a link, select the parent Piece(s) (or the originating sibling(s), if applicable) and click the "Make Link" button on the Properties Toolbar. Use the enabled dropdown menus below the "Make Link" button to define the relationship and line style of your link, and then select the Piece(s) to link to. To stop linking, click an empty area of the canvas or click on the Select Tool in the Properties Toolbar.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="save">Saving a Chart</h2>
<p class="image"><img src="help_img/save.png" /></p>
<p>To save a chart in the XORGM File Format for later use, click the "Save" button on the canvas window, and designate the appropriate file name and location in the dialog box that appears.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="export">Exporting PNG</h2>
<p>To export an image of your chart in PNG file format for use in the AFOD Program, simply click the "Export PNG" button on the canvas window and designate the appropriate file name and destination in the dialog box that appears.</p>
<p class="toplink"><a href="#">Back to top</a></p>
<h2 id="open">Opening a Previously Saved File</h2>
<p class="image"><img src="help_img/save.png" /></p>
<p>From the File Menu in the top left of the program, select "Open" to open a previously created XORGM file.</p>
<p class="toplink"><a href="#">Back to top</a></p>
</body>
</html>