MBLogic
for an open world in automation
User Created Graphics
Inkscape is a full featured vector drawing program which can be used to create professional graphics. It can therefore be used to create any additional custom graphics. User created graphics can be animated the same way that the provided clip-art is by using its "id" property.
Custom Graphics
When creating graphics the following precautions should be observed:
- Add an "id" attribute to objects which will be controlled by the HMI.
- Add Javascript calls to objects which will act as inputs.
- If you wish to manipulate a property such as "fill" or "stroke", make sure you do not define a fixed property. See the section on "Removing the Fill and Stroke Properties from Objects".
- If you intend to rotate an object about its own centre, do not attempt to rotate the outermost group. Instead, add an additional outer group to the object to ensure that the graphical calculations for the rotation are applied after the translation (the position on the screen) is applied. See the section on "The id Property for Rotating Objects".
User Created Clip-Art
User created clip-art is simply custom graphics that has been saved to a file. User created clip-art can then be dragged into other drawings and used in the same manner as the supplied clip-art.
User created clip-art can be created using Inkscape, or by writing the SVG XML directly using a text editor. When using Inkscape, save the file as "plain SVG". When editing the XML directly with a text editor, the easiest way is to take one of the existing clip-art samples and modifying it.
In either case, the size of the "canvas" usually needs to be set in order to display a thumbnail in the correct proportion (thumbnails will only be present on operating systems that are capable of supporting this feature).
User Created SVG Templates
SVG templates are provided in several different sizes. These are proportioned to fit the web page templates. These SVG templates include definitions for certain common colour gradients used by the SVG object libraries.
The difference between the SVG templates is simply the drawing size. The drawing size may be changed by one of two ways.
- Use the Inkscape page properties dialogue. See the section on "Setting the SVG Background Colour and Other Page Properties" for details.
- Edit the XML using a text editor. Open the SVG file with a text editor and change the "height" and "width" values in the SVG header.