Circle Widget

The Circle widget is almost the same as a Fragment widget, except that it draws a circle instead of a rectangle.

The attributes for the Circle widget are:

Attribute	Type	Description
m	Widget	The main Widget Class.
s	WidgetStyle	The style of the widget.
radius	String	Sets the radius of the circle, this can be a percentage or pixels. A pixel would be "100" a percentage would be "50%".
clickAction	Function	This is a function that is called when a user taps on the fragment. The function signature is function(Circle Widget, x position of user tap, y position of user tap)
selectWidget	Widget	If this widget is not null, it allows the circle to be selected instead on selecting the whole circle. When this is selected, this widget is not returned but the circle.

XML Circle Widget Example

This is an example of the Circle Widget written in XML. This shows a number of different circles:

<Widget>
	<Class>Circle</Class>
	<Y>60</Y>
	<Radius>60</Radius>
	<L>100</L>
	<AlignHoz>LEFT</AlignHoz>
	<AlignSpacingHoz>20</AlignSpacingHoz>
	<Widgets>
		<Widget>
			<Class>Text</Class>
			<Style>
				<Colour>#FFFFFF</Colour>
			</Style>
			<Font>Arial</Font>
			<FontSize>14</FontSize>
			<Text>Simple Circle.</Text>
			<AlignHoz>CENTER</AlignHoz>
			<AlignVert>CENTER</AlignVert>
		</Widget>
	</Widgets>
	<Style>
		<Colour>#000000</Colour>
	</Style>
</Widget>
<Widget>
	<Class>Circle</Class>
	<Radius>60</Radius>
	<Y>160</Y>
	<L>100</L>
	<AlignHoz>RIGHT</AlignHoz>
	<AlignSpacingHoz>20</AlignSpacingHoz>
	<Widgets>
		<Widget>
			<Class>Text</Class>
			<Style>
				<Colour>#FFFFFF</Colour>
			</Style>
			<Font>Arial</Font>
			<FontSize>14</FontSize>
			<Text>Transparent</Text>
			<AlignHoz>CENTER</AlignHoz>
			<AlignVert>CENTER</AlignVert>
		</Widget>
	</Widgets>
	<Style>
		<Colour>#000000</Colour>
		<Rounded>True</Rounded>
		<Transparency>100</Transparency>
	</Style>
</Widget>
<Widget>
	<Class>Circle</Class>
	<Radius>60</Radius>
	<Y>260</Y>
	<L>100</L>
	<AlignHoz>LEFT</AlignHoz>
	<AlignSpacingHoz>20</AlignSpacingHoz>
	<Widgets>
		<Widget>
			<Class>Text</Class>
			<Style>
				<Colour>#FFFFFF</Colour>
			</Style>
			<Font>Arial</Font>
			<FontSize>14</FontSize>
			<Text>Gradient</Text>
			<AlignHoz>CENTER</AlignHoz>
			<AlignVert>CENTER</AlignVert>
		</Widget>
	</Widgets>
	<Style>
		<Colour>#000000</Colour>
		<Transparency>100</Transparency>
		<Gradient>
			<Colours>
				<Colour pos="0">#DF01D7</Colour>
				<Colour pos="1">#F7FE2E</Colour>
			</Colours>
			<StartX>2</StartX>
			<StartY>2</StartY>
			<EndX>60</EndX>
			<EndY>60</EndY>
		</Gradient>
	</Style>
</Widget>
<Widget>
	<Class>Circle</Class>
	<Radius>60</Radius>
	<Y>355</Y>
	<L>100</L>
	<AlignHoz>RIGHT</AlignHoz>
	<AlignSpacingHoz>20</AlignSpacingHoz>
	<Widgets>
		<Widget>
			<Class>Text</Class>
			<Style>
				<Colour>#FFFFFF</Colour>
			</Style>
			<Font>Arial</Font>
			<FontSize>14</FontSize>
			<Text>Border Only</Text>
			<AlignHoz>CENTER</AlignHoz>
			<AlignVert>CENTER</AlignVert>
		</Widget>
	</Widgets>
	<Style>
		<BorderColour>#FFFFFF</BorderColour>
		<BorderW>2</BorderW>
	</Style>
</Widget>

The example will be shown as: