<?xml version="1.0"?>

<!--

	This is a test app for the gauge

-->

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

        <Component id="maxIt" left="10" top="10" bottom="10" right="10">

            <!-- Gauge2 is the main class generating a "div" element thats encapsulates the graphic tags. -->
            <Gauge2 id="gauge" coordWidth="1800" coordHeight="1800" width="100" height="100">
                
                <!-- Create a background using different filled borders-->
                <Gauge2ImageBorder width="1800" height="1800" centerX="900" centerY="900" uri="../test/gauge2bg.bmp"/>

                <Gauge2CircularBorder width="1500" height="1500" centerX="900" centerY="900" strokeWidth="0">
                    <Gauge2CircularBorder.Filler>
                        <Gauge2LinearGradientFiller color1="white" color2="gray" angle="0" opacity1="0.5" opacity2="0.8"/>
                    </Gauge2CircularBorder.Filler>
                </Gauge2CircularBorder>

                <Gauge2CircularBorder width="1400" height="1400" centerX="900" centerY="900" strokeWidth="0">
                    <Gauge2CircularBorder.Filler>
                        <Gauge2LinearGradientFiller color1="black" color2="gray" angle="0" opacity1="0.5" opacity2="0.8"/>
                    </Gauge2CircularBorder.Filler>
                </Gauge2CircularBorder>

                <Gauge2CircularBorder width="1380" height="1380" centerX="900" centerY="900" strokeWidth="0">
                    <Gauge2CircularBorder.Filler>
                        <Gauge2RadialGradientFiller color1="#FFFF66" color2="#FF9900" xpos="20" ypos="40" opacity1="0.5" opacity2="0.8"/>
                    </Gauge2CircularBorder.Filler>
                </Gauge2CircularBorder>


                <!-- Add some labels -->
                <Gauge2Label text="Weather Station" font="55 bold" y="700" x="900" foreColor="gray"/>
                <Gauge2Label text="Humidity" font="40" foreColor="green" y="1280" x="900"/>
                <Gauge2Label text="Wind" font="40" foreColor="blue" y="1530" x="900"/>


                <!-- Add ranges -->
                <Gauge2RadialRange centerX="900" centerY="900" width="1400" height="1400" startAngle="0" endAngle="180">
                    <Gauge2RadialTicks colors="#00AA00,10, #0000AA,21, #AA0000,10" tickWidth="6" tickLength="20" color="black" tickCount="41" radius="495"/>
                    <Gauge2RadialTicks colors="#00FF00,5, #0000FF,11, #FF0000,5" tickWidth="9" tickLength="25" color="black" tickCount="21" radius="495"/>

                    <Gauge2RadialScale font="25 Arial" foreColor="green" radius="440" startValue="0" endValue="100" labelCount="21" postString="%">
                        <Gauge2RadialNeedle id="needleHumidity" outerRadius="450" innerWidth="60" outerWidth="10" value="60">
                            <Gauge2RadialNeedle.Filler>
                                <Gauge2PlainColorFiller color="green"/>
                            </Gauge2RadialNeedle.Filler>
                        </Gauge2RadialNeedle>
                    </Gauge2RadialScale>

                    <Gauge2RadialScale colors="green,5, blue,11, red,5" font="30" foreColor="blue" radius="562" startValue="0" endValue="40" labelCount="21" postString=" m/s">
                        <Gauge2RadialNeedle id="needleWind" outerRadius="550" innerWidth="60" outerWidth="10">
                            <Gauge2RadialNeedle.Filler>
                                <Gauge2RadialGradientFiller color1="blue" color2="white"/>
                            </Gauge2RadialNeedle.Filler>
                        </Gauge2RadialNeedle>
                    </Gauge2RadialScale>

                    <Gauge2BasicCap width="100" height="100">
                        <Gauge2BasicCap.Filler>
                            <Gauge2LinearGradientFiller angle="40" color2="#666666" color1="#AAAAAA"/>
                        </Gauge2BasicCap.Filler>
                    </Gauge2BasicCap>
                </Gauge2RadialRange>


                <Gauge2LinearRange centerX="475" centerY="900" width="260" height="700" angle="0">
                    <Gauge2RectangularBorder strokeWidth="0" width="260" height="700" arcSize="20" angle="0">
                        <Gauge2RectangularBorder.Filler angle="0">
                            <Gauge2LinearGradientFiller color1="#666666" color2="black" angle="90"/>
                        </Gauge2RectangularBorder.Filler>
                    </Gauge2RectangularBorder>

                    <Gauge2LinearTicks colors="#0000AA,2, #0000DD,2, #0000FF,3, #44AAFF,2, #FF2244,2, #DD0044,2" tickWidth="8" tickLength="15" color="green" tickCount="13" tickSpacing="40"/>

                    <Gauge2LinearScale font="24 bold arial" colors="#0000AA,2, #0000DD,2, #0000FF,3, #44AAFF,2, #FF2244,2, #DD0044,2" startValue="-20" valueFunction="return 2*v;" endValue="40" labelCount="13" labelSpacing="40" labelPosition="-30">
                        <Gauge2LinearNeedle id="needleTemp" needlePosition="40" needleBase="30" needleHeight="30" value="0">
                            <Gauge2LinearNeedle.Filler>
                                <Gauge2PlainColorFiller color="red"/>
                            </Gauge2LinearNeedle.Filler>
                        </Gauge2LinearNeedle>
                    </Gauge2LinearScale>

                    <Gauge2Label text="Temperature" font="35" foreColor="gray" y="50" x="130"/>
                </Gauge2LinearRange>

            </Gauge2>

        </Component>

    </Window>

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

        <Script><![CDATA[


Gauge2Test2 = {
    main : function() {

        maxIt.addEventListener("resize", function() {
            var c = this._children[0];
            var w = this.getWidth();
            var h = this.getHeight();
            var size = Math.min(w,h);
            c.setLocation((w-size)/2, (h-size)/2);
            c.setSize(size, size);
        }, maxIt);

        maxIt.dispatchEvent("resize");

		var n = 0;
		var t = new BiTimer(100);
		t.addEventListener("tick", function (e) {
		  needleHumidity.setValue(Math.abs(90 * Math.sin(n / 100)));
 		  needleWind.setValue(Math.abs(30 * Math.cos(n / 100)));
		  needleTemp.setValue(5 + (n/10)%30);
		  n++;
		});
		t.start();

    }
}


    ]]></Script>
    </Resources>
</Application>

