Graphs, Diagrams and Flowcharts
In the general case, images are binary resources imported into pages by means of the <img> tag. For graphs, diagrams and flowcharts however, Dissemino Graphics are preferred. The Dissemino Graphics regime is a set of graphic visual entities (GVEs), which generate SVG (Scaleable Vector Graphics) tags, from which browsers directly construct an image. This avoids fetching the image as a separate HTTP request but more importantly, it makes automatic image creation feasible. The flowcharts in this manual for example, are automatically generated by the HadronZoo::CodeProc program.
Dissemino Graphics is in its infancy and thus far only a few GVEs have been developed. These fall into two primary groups: Chart GVEs that create charts from numeric data sets, and Diagram GVEs that create diagrams as a series of shapes and connecting lines. Flowchart VEs are an important sub-group of the latter, which use psudo code to create START and STOP stadia, action rectangles and decision diamonds. In addition there is the hdsText GVE which add supporting text to both charts or diagrams.
The chart visual entities are as follows:-
| hdsChartPie | Pie chart. May only represent a small set of values as each occupies a slice of the pie. Each value must use a separate color. |
| hdsChartBar | Bar chart. There is a bar for each marker on the horizontal axis. Multiple sets of values can be supported by use of color coding, where total bar length is the aggregate value. |
| hdsChartStd | Line chart. Can support multiple sets of fine grain data. |
| hdsChartCndl | Candle-stick chart. Can support multiple sets of fine grain data. |
Diagrams are assumed to comprise 'graphic objects' and connecting lines. The diagram hdsVEs are as follows:-
| hdsGraphic | A Dissemino diagram 'graphic object'. Note that graphic objects are deemed to occupy a rectangle (within the diagram rectangle), regardless of their actual shape. The rectangle top, bottom, left and right coordinates are relative to the diagram rectangle. |
| hdsLine | A Dissemino diagram line. This will only be a straight line between two points with attributes of color, thickness and style (e.g dotted). |
| hdsDiagram | The diagram visual entity produces the opening and closing <svg> tags. Each hdsDiagram instance is a series of one or more shapes. The available shape types are listed below. |
| hdsFlowchart | Special case of a Dissemino diagram for flowcharts. |
| hdsCircuit | Special case of a Dissemino diagram for circuit diagrams. |
Currently supported shapes for graphic objects are:
| HZSHAPE_LINE | Line from y1,x1 to y2,x2 (see next heading) |
| HZSHAPE_DIAMOND | Comprises four lines where bot-top = rht-lft |
| HZSHAPE_ARROW | connecting line plus arrow head |
| HZSHAPE_RECT | Rectangle |
| HZSHAPE_RRECT | Rounded rectangle |
| HZSHAPE_STADIUM | Two semi-circles joined by two paralell lines |
| HZSHAPE_CIRCLE | Circle (center y,x) of radius r |
| HZSHAPE_LGATE_AND | AND gate |
| HZSHAPE_LGATE_OR | OR gate |
| HZSHAPE_LGATE_NOT | NOT gate (arrow head) |
| HZSHAPE_LGATE_NAND | NAND gate |
| HZSHAPE_LGATE_NOR | NOR gate |
| HZSHAPE_CONNECT | Shape connector |
Automated Diagram/Flowchart Shape Positioning and Line Generation
Regardless of their actual shape, all diagram shapes are deemed to occupy a rectangle and to have four ingress/egress points, which are the top, bottom, left and right midpoints of the rectangle. Connecting lines between shapes need only specify line text, line type (dotted/solid, with/without arrow), the origin shape egress point and the target shape ingress point. In flowcharts, lines are not specified at all as they are fully implied by the psudo code.
Once it is established which shapes are to be connected and in what way, the line drawing process is automatic. This confers a number of advantages. There is no need for webmasters to consider coordinates or whether lines intersect shapes or other lines. Just as importantly shapes are free to move, allowing the same diagram to be rendered differently in order to fit differing screen widths.