Editing SVG with Inkscape
Overview
A web based HMI client will consist of several components. If the HMI is to be
graphical, then one of these components will need to provide some form of
dynamic graphics capabilities to display such things as push buttons, pilot
lights, dial gauges, etc.
This can be achieved by a number of means, but only one is supported directly
by almost all modern web browsers. That means is SVG (Scalable Vector
Graphics). SVG allows graphics to be specified directly in the web page
(without external files) in an XML format, and then manipulated by Javascript
just like normal web page HTML. Other methods require special proprietary
plug-ins that are the source of numerous compatibility and security headaches
and also often require special proprietary (and expensive) development
software. SVG is supported by numerous standard drawing packages, and can
even be edited directly using a simple text editor.
- Setting the Background Colour -
Setting the colour of the background used in the SVG drawing.
- Working with Layers -
Layers are used to provide multiple graphical "screens" in a single
drawing.
- Object Stacking -
The "stacking" of SVG objects determines which drawing elements appear
on top of or below others.
- The SVG "id" Property -
The SVG "id" property is used to give each object (widget) a unique name
which can then be used to control its colour, rotation, or any other
property.
- Setting Text Labels -
Setting the text labels which may come as part of the push buttons, selector
switch labels, or other objects.
- Other Editing Features -
Other editing features including grouping objects, setting (or removing)
the fill and stroke properties, and editing hints.
- Scripting Inputs -
Input devices such as push buttons and selector switches include Javascript
embedded within them. This scripting must be edited to specify which address
tags are to be written to.
- Background Pixel Graphics -
Using pixel graphics such as JPEG or PNG files as background images.
- User Created Graphics -
Some points to observe when creating custom graphics.