<?xml version="1.0"?>

<!--

	This is a test app for the gauge

-->

<Application autoNameMapping="yes">
    <Window caption="Gauge2" width="600" height="600" centered="true">

        <!-- Gauge2 is the main class generating a "div" element thats encapsulates the graphic tags. -->
        <Gauge2 coordWidth="1800" coordHeight="1800" right="10" left="10" top="10" bottom="10">

            <!-- To create a bckground an border can be added, for now there is only one type of border "Gauge2CircularBorder"! -->
            <Gauge2CircularBorder stroke="black" strokeWidth="5">
                <!-- To fill a special gauge2 object a "Filler" can be added, there is 2 types fillers implmented at the moment, Gauge2RadialGradientFiller and Gauge2PlainColorFiller -->
                <Gauge2CircularBorder.Filler>
                    <Gauge2RadialGradientFiller color1="gray" color2="black"/>
                </Gauge2CircularBorder.Filler>
            </Gauge2CircularBorder>

            <!-- A range is a object containing ticks, scales and pherhaps a cap, only Gauge2RadialRange exists so far -->
            <Gauge2RadialRange centerX="600" centerY="500" width="700" height="700" startAngle="-135" endAngle="135">
                <Gauge2CircularBorder stroke="red" strokeWidth="5">
                    <Gauge2CircularBorder.Filler>
                        <Gauge2RadialGradientFiller color1="gray" color2="black"/>
                    </Gauge2CircularBorder.Filler>
                </Gauge2CircularBorder>

                <!-- a range can contain 0 - * ticks -->
                <Gauge2RadialTicks tickWidth="10" tickLength="20" color="yellow" tickCount="16" radius="200"/>
                <Gauge2RadialTicks tickWidth="6" tickLength="10" color="yellow" tickCount="31" radius="200"/>
                <Gauge2RadialTicks tickWidth="1" tickLength="5" color="yellow" tickCount="61" radius="200"/>

                <!-- a range can contain 1 - * scales -->
                <Gauge2RadialScale font="30" foreColor="yellow" radius="248" startValue="0" endValue="300" labelCount="16">

                    <!-- a the scale generates lables and contains needles that are bound to the values of the scale -->
                    <Gauge2RadialNeedle id="needle1" outerRadius="190" innerWidth="10" stroke="black">
                        <Gauge2RadialNeedle.Filler>
                            <Gauge2RadialGradientFiller color1="red" color2="white"/>
                        </Gauge2RadialNeedle.Filler>
                    </Gauge2RadialNeedle>

                    <Gauge2RadialNeedle id="needle2" outerRadius="100" innerWidth="10">
                        <Gauge2RadialNeedle.Filler>
                            <Gauge2PlainColorFiller color="green"/>
                        </Gauge2RadialNeedle.Filler>
                    </Gauge2RadialNeedle>

                    <Gauge2RadialScaleSection sectionWidth="4" color="red" radius="190" startValue="200" endValue="300"/>
                    <Gauge2RadialScaleSection sectionWidth="4" color="red" radius="210" startValue="200" endValue="300"/>
                    <Gauge2RadialScaleSection sectionWidth="4" color="green" radius="190" startValue="000" endValue="110"/>
                    <Gauge2RadialScaleSection sectionWidth="4" color="green" radius="210" startValue="000" endValue="110"/>

                </Gauge2RadialScale>

                <!-- a basic cap is added to the range -->
                <Gauge2BasicCap width="30" height="30">
                    <Gauge2BasicCap.Filler>
                        <Gauge2RadialGradientFiller color1="white" color2="black"/>
                    </Gauge2BasicCap.Filler>
                </Gauge2BasicCap>
            </Gauge2RadialRange>


            <Gauge2RadialRange centerX="900" centerY="1300" width="900" height="900" startAngle="-45" endAngle="205">
                <Gauge2CircularBorder stroke="black" strokeWidth="5">
                    <Gauge2CircularBorder.Filler>
                        <Gauge2RadialGradientFiller color1="yellow" color2="red"/>
                    </Gauge2CircularBorder.Filler>
                </Gauge2CircularBorder>

                <Gauge2RadialTicks tickWidth="10" tickLength="34" color="blue" tickCount="16" radius="300"/>
                <Gauge2RadialTicks tickWidth="6" tickLength="20" color="blue" tickCount="31" radius="300"/>
                <Gauge2RadialTicks tickWidth="1" tickLength="10" color="blue" tickCount="151" radius="300"/>

                <Gauge2RadialScale font="40" foreColor="blue" radius="350" startValue="0" endValue="300" labelCount="16">
                    <Gauge2RadialNeedle id="needle3" outerRadius="300" innerWidth="10" stroke="black">
                        <Gauge2RadialNeedle.Filler>
                            <Gauge2RadialGradientFiller color1="blue" color2="white"/>
                        </Gauge2RadialNeedle.Filler>
                    </Gauge2RadialNeedle>
                </Gauge2RadialScale>

                <Gauge2RadialScale font="40" foreColor="green" radius="248" startValue="0" endValue="150" labelCount="16">
                    <Gauge2RadialNeedle id="needle4" outerRadius="100" innerWidth="10" value="0">
                        <Gauge2RadialNeedle.Filler>
                            <Gauge2PlainColorFiller color="green"/>
                        </Gauge2RadialNeedle.Filler>
                    </Gauge2RadialNeedle>
                </Gauge2RadialScale>

                <Gauge2BasicCap width="30" height="30">
                    <Gauge2BasicCap.Filler>
                        <Gauge2RadialGradientFiller color1="white" color2="black"/>
                    </Gauge2BasicCap.Filler>
                </Gauge2BasicCap>

            </Gauge2RadialRange>

        </Gauge2>

    </Window>

    <Resources>
        <Package name="Gauge2"/>

        <Script><![CDATA[

                var n = 0;
                var t = new BiTimer(100);
                t.addEventListener("tick", function (e) {
				     needle1.setValue(100 + 90 * Math.sin(n / 10));
				     needle2.setValue(100 + 90 * Math.cos(n / 10));
				     needle3.setValue(150 +150 * Math.sin(n / 10 + 0.5));
                     needle4.setValue( 75 + 50 * Math.cos(n / 10 + 0.5));
				     n++;
				   });
                t.start();
                
    ]]></Script>
    </Resources>
</Application>
