Get MBLogic at SourceForge.net. Fast, secure and Free Open Source software downloads

Help Topics

Topic Details for HMI

Using the SVG Library with Inkscape

Standard Template Boilerplate

SVG Templates

A number of SVG "template" files have been provided. These are pre-formatted to fit the HTML web page templates and other files.

The templates should be selected based on the size, shape, and resolution of the target HMI screen. The most satisfactory size is most easily determined by creating a few empty sample web pages and dragging the result onto the web browser on the target. If none of the provided templates is satisfactory, then a user defined custom template may be necessary. See below for more details on how to create these.

Once an SVG template has been selected, a copy of the template should be made and placed in a convenient location to be worked on. This copy can be given any desired name.

Pre-Defined Colours

Common Colour Gradients

A colour gradient is where a surface shades gradually from one colour to another. The colour gradients used here shade from one colour gradually to white. This gives the illusion of lighting, shadowing, and depth. This is entirely decorative and is not a functional feature.

The SVG clip-art includes colour definitions used by the graphics. These colour gradients are automatically imported into the drawing when the clip-art object is imported (dragged and dropped). If additional colours are desired the clip art can be modified to define them. You can also use these gradients for your own graphics if you desire.

In addition to these, certain graphics such as column gauge indicators and tank fill indicators provide their own gradients. However, these gradients are directly manipulated by the software during operation. Attempting to use one of these gradients in your own graphics will cause your object to be linked to the gauge or tank and manipulated with it.

Pre-Defined Colour Gradients

The following colours are pre-defined as colour gradients with lighting from the upper left:

Pre-Defined Colour Gradients for Special Purposes

The following colours are pre-defined as colour gradients with lighting directly from the left. These are used to decorate tanks (this seems to give a better appearance in this case):

Other Colour Gradients

In addition, there are two other definitions:

Imported Colour Gradients

Some of the clip-art (e.g. tank fill and column gauges) will import additional colour gradients which are not described here. Generally, it should be assumed that any "id" starting with "MB_" may be used by the graphics library and should not be used by custom user objects or definitions.

Default Tag Names

The Javascript functions attached to the input objects have default address tags already present. These tags should be replaced with the correct ones for the application (see above). The following is a list of some of the default tags used. You should avoid using these names in your own applications, as future diagnostic features will be added to the system to scan for any tags beginning with "MB_Default" and report an error to warn you of unconfigured addresses.