Help Topics

Creating Custom Widgets

Active SVG HMI Widgets

Overview

This section describes how to create active widgets.

Create the SVG Artwork

Create the SVG widget artwork. See the section on passive widgets for details on what the various parts of the SVG widget artwork mean.


<?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"
   xmlns:mblogic="http://www.example.com/mblogic"
   width="100"
   height="100">

<defs>
	<linearGradient id="MB_SilverGradient" x1="1" y1="1" x2="0" y2="0">
		<stop offset="50%" stop-color="silver" />
		<stop offset="100%" stop-color="white" />
	</linearGradient>

	<!-- The following filter is used to add a drop shadown. -->
	<filter id="MB_DropShadowFilter">
		<feGaussianBlur stdDeviation="2">
		</feGaussianBlur>
	</filter>
</defs>

<!-- Round pilot light. -->
<g>

	<!-- This is a decorative nut. -->
	<polygon transform="translate(5,5)" fill="grey" stroke="none"
		filter="url(#MB_DropShadowFilter)"
			points="63,0 27,0 0,27 0,63 27,90 63,90 90,63 90,27 63,0" />
	<polygon  fill="url(#MB_SilverGradient)" stroke="none"
			points="63,0 27,0 0,27 0,63 27,90 63,90 90,63 90,27 63,0" />
	
	<!-- This is the part which changes colour. -->
	<circle cx="45px" cy="45px" r="35px" stroke="black" stroke-width="5px"/>

</g>

</svg>

Create the HMIBuilder Data

Create the HMIBuilder attribute data. See the section on HMIBuilder data for more details on this.


	mblogic:widgettype="pilot_light" 
	mblogic:widgetname="Pilot Light"
	mblogic:editcount="0"
	mblogic:menu='[
		{"value": "", "type": "tag", "name": "Output Tag", "param": "outputtag"}, 
		{"value": "black", "type": "colour", "name": "Init Colour", "param": "initcolour"}, 
		{"value": "", "type": "colour", "name": "Off Colour", "param": "offcolour"}, 
		{"value": "", "type": "colour", "name": "On Colour", "param": "oncolour"}]'
	mblogic:inputfunc="[]"
	mblogic:outputfunc='MBHMIProtocol.AddToDisplayList(new MB_PilotLight(document, 
		"%(widgetid)s", "%(initcolour)s", "%(offcolour)s", "%(oncolour)s"), "%(outputtag)s", "read");'

Add the HMIBuilder Data to the SVG Widget

Add the HMIBuilder attribute data to the SVG Widget data. The HMIBuilder attribute data must be part of the "group" tag ("<g></g>") which the "id" will be assigned to. This is normally the outermost group. The HMIBuilder program will find the active widget by looking for a group with the "mblogic:widgettype" attribute. Everything inside that group will be considered to be part of the 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"
   xmlns:mblogic="http://www.example.com/mblogic"
   width="100"
   height="100">

<defs>
	<linearGradient id="MB_SilverGradient" x1="1" y1="1" x2="0" y2="0">
		<stop offset="50%" stop-color="silver" />
		<stop offset="100%" stop-color="white" />
	</linearGradient>

	<!-- The following filter is used to add a drop shadown. -->
	<filter id="MB_DropShadowFilter">
		<feGaussianBlur stdDeviation="2">
		</feGaussianBlur>
	</filter>
</defs>

<!-- Round pilot light. -->
<g mblogic:widgettype="pilot_light" 
	mblogic:widgetname="Pilot Light"
	mblogic:editcount="0"
	mblogic:menu='[
		{"value": "", "type": "tag", "name": "Output Tag", "param": "outputtag"}, 
		{"value": "black", "type": "colour", "name": "Init Colour", "param": "initcolour"}, 
		{"value": "", "type": "colour", "name": "Off Colour", "param": "offcolour"}, 
		{"value": "", "type": "colour", "name": "On Colour", "param": "oncolour"}]'
	mblogic:inputfunc="[]"
	mblogic:outputfunc='MBHMIProtocol.AddToDisplayList(new MB_PilotLight(document, 
		"%(widgetid)s", "%(initcolour)s", "%(offcolour)s", "%(oncolour)s"), "%(outputtag)s", "read");'
	 	
	>

	<!-- This is a decorative nut. -->
	<polygon transform="translate(5,5)" fill="grey" stroke="none"
		filter="url(#MB_DropShadowFilter)"
			points="63,0 27,0 0,27 0,63 27,90 63,90 90,63 90,27 63,0" />
	<polygon  fill="url(#MB_SilverGradient)" stroke="none"
			points="63,0 27,0 0,27 0,63 27,90 63,90 90,63 90,27 63,0" />
	
	<!-- This is the part which changes colour. -->
	<circle cx="45px" cy="45px" r="35px" stroke="black" stroke-width="5px"/>

</g>

</svg>

Types of Widgets

The behaviour of the widget depends on the type of Javascript function used in the output function. See the section on the "HMI Client Display Library" for details on how these work.