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

Help Topics

Creating Custom Widgets

A Simple Passive SVG HMI Widget

Overview

This section describes the different parts which make up a simple passive widget. This will discuss some basics about SVG, but it is not intended as a tutorial on SVG itself.

A Simple Widget

The following shows the actual SVG XML code for a simple passive widget. 


	<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	<svg
	   xmlns:svg="http://www.w3.org/2000/svg"
	   xmlns="http://www.w3.org/2000/svg"
	   version="1.0"
	   width="100"
	   height="40">

	<!-- This is a simple box for display numbers and text. -->
	<rect x="0" y="0" width="100" height="35" fill="white" stroke="green" 
				stroke-width="5" rx="10" ry="10" opacity="1.0" />

	</svg>

This is simply a box used as a background to display text or numbers on top of.

clip art

It consists of the following components:

XML Header

The XML header tells other programs that this is a XML file. This must be present, and it must be the first line in the file. 


	<?xml version="1.0" encoding="UTF-8" standalone="no"?>

SVG Document Type

This identifies it as an SVG file. Also important are the "width" and "height" attributes. The value of these will not matter when the widget is inserted into your final HMI drawing. However, setting these to the correct values will determine whether your computer's file browser will show them with the correct thumbnail views. 


	<svg
	   xmlns:svg="http://www.w3.org/2000/svg"
	   xmlns="http://www.w3.org/2000/svg"
	   version="1.0"
	   width="100"
	   height="40">

Comments

You can (and probably should) add comments to the file by enclosing them within "<!--" and "-->" blocks. 


	<!-- This is a simple box for display numbers and text. -->

The SVG Artwork

This is not a tutorial on SVG. However, the following shows a simple rectangle with rounded corners. We set the x and y coordinates to 0 because Inkscape (the drawing editor) will add it's own set of SVG coordinate transforms wrapped around the widget when we drag it into the drawing.

We set the width and heigh attributes to some convenient value. Although you can resize a widget after it is dragged into a drawing, it is advisable to set the default size to what you expect will typically be used to avoid any unecessary effort when using a widget.

The fill and stroke values have been preset to the desirec colours. Although it would be possible to have no colours and to use the drawing editor to add the desired colours, providing a complete set of widgets in a predefined range of colours reduces the number of steps required when using the widget. 


	<rect x="0" y="0" width="100" height="35" fill="white" stroke="green" 
				stroke-width="5" rx="10" ry="10" opacity="1.0" />

Closing SVG Tag

SVG is XML, and XML requires that all tags be explicitly "closed". This last element must always be present. 


	</svg>