0
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
0
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
Display:
boxz
botz
boxy
boty
boxg
botg
boxb
botb
<table border=0 cellspacing=0 cellpadding=0 rules=''><tr><td><img src='20H.gif'></td><td><img src='20H.gif'></td><td><img src='20H.gif'></td><td><img src='20H.gif'></td></tr> <tr><td><img src='20V.gif'></td><td colspan=2></td><td><IMG src="20EvS.gif"></td><td><IMG src="20EW.gif"></td></tr> <tr><td><img src='20V.gif'></td><td></td><td><IMG src="20EvS.gif"></td><td><IMG src="20NvW.gif"></td></tr> <tr><td><img src='20V.gif'></td><td><IMG src="20EW.gif"></td><td><IMG src="20NSvWz.gif"></td></tr> <tr><td><img src='20V.gif'></td><td></td><td><IMG src="20NvE.gif"></td><td><IMG src="20SvW.gif"></td></tr> <tr><td><img src='20V.gif'></td><td colspan=2></td><td><IMG src="20NvE.gif"></td><td><IMG src="20EW.gif"></td></tr> </table>
<table border=0 cellspacing=0 cellpadding=0 rules=''><tr><td><img src='20H.gif'></td><td><img src='20H.gif'></td><td><img src='20H.gif'></td><td><img src='20H.gif'></td></tr> <tr><td><img src='20V.gif'></td><td><IMG src="20EW.gif"></td><td><IMG src="20SvW.gif"></td></tr> <tr><td><img src='20V.gif'></td><td></td><td><IMG src="20NvE.gif"></td><td><IMG src="20SvW.gif"></td></tr> <tr><td><img src='20V.gif'></td><td colspan=2></td><td><IMG src="20NvES.gif"></td><td><IMG src="20EW.gif"></td></tr> <tr><td><img src='20V.gif'></td><td></td><td><IMG src="20EvS.gif"></td><td><IMG src="20NvW.gif"></td></tr> <tr><td><img src='20V.gif'></td><td><IMG src="20EW.gif"></td><td><IMG src="20NvW.gif"></td></tr> </table>
<table border=0 cellspacing=0 cellpadding=0 rules='' style='font-size:12px;'><tr><td><img src='20H.gif'></td><td><img src='20H.gif'></td><td><img src='20H.gif'></td><td><img src='20H.gif'></td></tr> <tr><td><img src='20V.gif'></td><td colspan=2></td><td style="vertical-align:bottom;">Yes </td></tr> <tr><td><img src='20V.gif'></td><td></td><td><IMG src="20EvS.gif"></td><td><IMG src="20EW.gif"></td><td><IMG src="20EW.gif"></td></tr> <tr><td><img src='20V.gif'></td><td><IMG src="20EW.gif"></td><td colspan=4><TABLE border=0 cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD><IMG src="20NSvWz.gif"></TD> <TD style="VERTICAL-ALIGN: middle">Decision</TD></TR></TBODY></TABLE></td></tr> <tr><td><img src='20V.gif'></td><td></td><td><IMG src="20NvE.gif"></td><td><IMG src="20EW.gif"></td><td style="vertical-align:bottom;"><IMG src="20EW.gif"></td></tr> <tr><td><img src='20V.gif'></td><td colspan=2></td><td>No </td></tr> </table>
Move
Size
Undo (1 level)
Make HTML
Inserting Images
Click on an image, then click on one or more cells in the grid above.
To delete the contents of a cell (including extended cells), click on any blank square among the icons, and then click on the cells to be deleted.
The two
images are slightly different. One occupies a full cell as normal. The other is less wide, and allows any following text (e.g. in a decision box) to start closer to the apex. This effect can be seen in the text at the top of the grid when either image is clicked.
For colours and borders, click on one of the boxes to the top right of the images.
These effects are controlled by file
Diagrab.css
, which can be edited as required.
Note that, depending on the browser, the box border may not appear until there is something in the box.
To display a box as empty, insert a non-escaping space (
).
The lower boxes contain complete or partial diagrams. Some or all of these may be preset, but can be overwritten by pasting another HTML diagram table into the box.
Note that the HTML code is not visible, apart from one or two characters,
but moving the mouse cursor over the boxes will display each diagram in the area to the right.
Click and hold on the scroll bar will display the code one or two characters at a time!
Click on a box (but avoid the scroll bar) - and then on the grid to insert.
- The diagram is inserted with the top left corner on the cell clicked.
The diagram remains displayed until the next click on an image or box.
Cells can be moved in horizontally or vertically.
Click on one of the
Move cell
arrows, then click on the diagram. All the cells below or to the right of the clicked cell will be moved.
To extend or contract a cell (usually a box containing text), click on one of the
Extend
arrows, then click on the cell to be changed.
Undo
will undo the last operation only. Previous operations cannot be undone.
Make HTML
will convert the diagram to an HTML table, and insert the HTML code into the
HTML code
box below.
From there the user can copy it (click in the box, press Ctrl A then Ctrl C), or select and copy with the mouse.
There is a button in the
More
toolbar which will create the code for a complete HTML page.
- See
More
and
Help
.
The program attempts to copy the code to the scratchpad automatically, but new browser security makes this difficult.
Currently the automatic copying works for Internet Explorer, though a confirmation box may pop up.
It does not work for FireFox, despite strenuous (and continuing) efforts.
alignH
alignV
till no fault
Background Colours
More Help
The horizontal lines
20EWm.gif
and
20EWn.gif
are narrow and very narrow images to allow text to be inserted in teh same cell above and/or below the line.
This does not work for 20*20 cells unless a microscopic font is used - better to put the text in the cells above, and use a normal
20EW.jpg
line.
The cell contents should be vertically aligned in the middle (use the
alignV
button), and the same number of lines of text above and below the line - use blank lines (just <br /> elements) where necessary.
Text above the line
Cell HTML
is to assist in debugging the program.
It displays the HTML code (in the Text input area) of each cell that is clicked.
Make HTML Page
is the same as
Make HTML
in the normal toolbar,
except that HTML page header and trailer is added.
If this is saved to a file with extension
.html
, that file can be displayed by a browser.
The HTML header includes a reference to the file
Diagrab.css
,
using the
Path to Images
, if this has been set by the user.
Note that a
!DOCTYPE
element is NOT inserted.
The full HTML page can be pasted into the diagram boxes above.
The HTML header elements will be discarded.
Make HTML of Area
will create the HTML code for a rectangle defined by two clicks in opposite corners.
Any empty rows and columns at the edges of the rectangle will be included.
There is no check for extended cells extending outside the rectangle, so any such boxes may appear shortened in the final HTML.
Delete Area
requires two clicks in opposite corners of the area to be deleted.
Each occupied cell with a top left corner within the area is replaced by blank cells.
alignH
buttons will set the horizontal alignment of text (or an image) within a cell to be
L
eft,
C
entre,
R
ight, or click
X
to remove the alignment setting (which will then revert to the class of the cell, or to
Left
if there is no class).
alignV
buttons will set the vertical alignment of text (or an image) within a cell to be
T
op,
M
iddle,
B
ottom, or click
X
to remove the alignment setting (which will then revert to the class of the cell, or to
Top
if there is no class).
Reset Fault
will clear the fault flags and allow normal actions to continue.
Normally if there is a fault (e.g. the text within a cell forces the cell to enlarge and possibly displace other parts of the diagram), then other actions are inhibited until the fault is rectified (normally by enlarging the cell).
Text to
Insert:
Inserting Text
Some common text strings (to drag to above box) are:
Text above the line<br /><img src="50EWn3.gif"><br /><br />
Text above the line
- Cell 3*50 wide,
and with
alignV
to
M
iddle
Text above arrowed line<br /><img src="50EWm2.gif">
<img src="50E2Wm.gif"><br /><br />
Text above arrowed line
<table border=0 cellspacing=0 cellpadding=0 rules=''><tr>
<td><IMG src="20NSvWz.gif"></td>
<td style="vertical-align:middle;">Decision</td></tr></table>
Decision
Cell 4*20 or
2*50 wide
<input type=button value=" exit ">
1*50 cell, alignV
M
iddle.
<span style="height:5;padding:0;margin:0;border-style:solid;
border-color:black;border-width:thin;vertical-align:center;">
exit </span>
exit
Cell 2*20 or 1*50 wide, alignV
M
iddle.
Enter the text in the above box, then click the
Insert Text
button, and then the cell where the text is to be displayed.
If the text is too big for the cell, the cell will get bigger to accomodate it and other parts of the diagram may be displaced, and parts of the border lines around the grid will be broken.
Either reduce the size of the text, or use the
Size
arrows to extend the cell over neighbouring cells, until the text is accommodated. The border lines round the outside of the grid should then be continuous.
Text enhancement elements (e.g. <b>
. . .
</b>), hyperlinks, etc. can be used.
Overall text style for a cell should be set via the colour/border controls.
To allow for easier editing, carraige returns can be used but are discarded. Apart from that the text is in HTML format. Any contiguous white space (spaces and tabs) is treated as a single space, and ignored altogether within tables unless between
<td>
and
</td>
.
To force a carraige return, insert a
<br />
element. For contiguous spaces, use
.
Do not put spaces between, say, IMG elements otherwise lines may appear broken.
Text cannot be edited in the grid, but the
Copy Text
button will copy the contents of any cell into the above box, where it can be edited before being reinserted with the
Insert Text
button.
- Clicking the
Copy Text
button and then a cell will copy the text (and any IMG elements) to the
Text to Insert
area, where it can be edited and then inserted back in the cell.
The
Overall text font
settings apply to the whole diagram.
Depending on the font, a text size of about 15 is the largest that can be used in a single row box (i.e. one that has not been vertically extended) without exceeding the 20 pixel cell width.
Overall text font: size:
Path to Images:
Path to Images
There are about 50 small images for the 20x20 pixel squares, altogether about 5Kb, and similar for the 50x50 squares.
There is also a small CSS file (
Diagrab.css
).
These could be copied into each folder where there are diagrams to be displayed, but is more probable that they will be in a fixed folder, usually the one containing the drawing tools.
The path from the document folder to where the images are should be entered, using forward slashes.
If the path does not end with a forward slash, one will be inserted automatically when the path is prefixed to each image filename as the HTML table is created.
When a diagram is pasted into one of the eight text boxes, any file path is stripped off, and if it differs from the existing one, the user asked if this is to be the new Path to Images.
HTML code
