Dissemino Graphics

Dissemino Graphics is the collective term for the set of proprietary tags which invoke graphical visible entities (GVEs), which in turn generate SVG (Scalable Vector Graphics) tags in the output HTML. The current set of Dissemino graphics tags are <xdiagram> for simple diagrams, <xflowchart> for flowcharts, <xchartPie>, <xchartBar> and <xchartLine> for numeric data and <xchartCndl> (candlestick), for financial data. This set of tags is expected to grow in future versions, with an <xcircuit> tag for circuit diagrams already in development.

Dissemino Graphics are intended to simplify production of image types covered by the tags, in order to give a functional presentation quickly and cheaply. The tags are not intended for creating works of art. Should applications require the near life-like quality images SVG has the power to create, the SVG tags for such images have to be created externally, by skill and/or an SVG editor. SVG was chosen over HTML canvas for a number of reasons but in particular, SVG images are standalone entities that are rendered directly by the browser. By contrast, a canvas only renders as an image when an associated JavaScript is run. In general browsers do not run scripts that lay within modified HTML, so canvas images in HTML loaded by AJAX are not rendered.

Diagrams

Of the Dissemino Graphics tags, <xdiagram> is the most general and accordingly, requires the most parameterization. Dissemino diagrams are constructed as a set of graphics or 'shapes' as they are known, together with connecting or decorative lines and optional descriptive text. Each diagram is a single GVE, i.e. an instance of the C++ class hdsDiagram, created by a <xdiagram> tag in the configs. The coordinates follow the SVG convention with X denoting the horizontal axis and Y denoting the vertical axis. Lines are added by the <line> subtag, text by the <text> subtag and shapes are added by subtags of the shape name. The available shape tags are as follows:-

    <diamond>       //  Comprises four lines where bot-top = rht-lft
    <hexagon>       //  Actually an elongated hexagon. Instead of six equal sides the top and bottom sides may be elongated to accomodate text.
    <rect>,         //  Rectangle
    <rrect>,        //  Rounded rectangle
    <stadium>,      //  Two semi-circles joined by two paralell lines
    <circle>,       //  Circle (center y,x) of radius r
    <arrow>,        //  connecting line plus arrow head

In addition to the above shapes, the <xShape> tag to define additional shapes. These may then be added to diagrams in the same way.