<?xml-stylesheet type="text/xsl" href="/exist/rest/db/apps/xsltforms/xsltforms.xsl"?><?xsltforms-options debug="yes"?>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>SVG Gauges</title>
        <xf:model xmlns:xf="http://www.w3.org/2002/xforms">
            <xf:instance>
                <data xmlns="">
                    <code>1</code>
                    <measure code="1" name="Gauge #1">
                        <title>Skills</title>
                        <name>level</name>
                        <min>0</min>
                        <max>4</max>
                        <value>3</value>
                    </measure>
                    <measure code="2" name="Gauge #2">
                        <title>Eff. Activity</title>
                        <name>%</name>
                        <min>0</min>
                        <max>100</max>
                        <value>89</value>
                    </measure>
                </data>
            </xf:instance>
        </xf:model>
        <style type="text/css">
    body {
        margin-left:2em;
        margin-top:2em;
        font-size:110%;
    }
    input {
        margin-left:1em;
        margin-right:1em;
    }
    #xsltforms_console {
        margin-top:3em;
        padding-top:1em;
        font-size:75%;
        }
    iframe {
        display:none;
    }
    #xsltforms_debug {
        padding-bottom:1em;
    }
    
    .btn {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #F5F5F5;
    background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6);
    background-repeat: repeat-x;
    border-bottom-color: #A2A2A2;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #BBBBBB;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #BBBBBB;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #BBBBBB;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-style: solid;
    border-top-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-top:1em;
    margin-bottom:1em;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 4px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    }
    .btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    background-color: #E6E6E6;
    color: #333333;
    }
    .btn:active, .btn.active {
    }
    .btn:first-child {
    }
    .btn:hover {
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    background-color: #E6E6E6;
    background-position: 0 -15px;
    color: #333333;
    transition-delay: 0s;
    transition-duration: 0.1s;
    transition-property: background-position;
    transition-timing-function: linear;
    }
    .btn:focus {
    outline-color: #333333;
    outline-offset: -2px;
    outline-style: dotted;
    outline-width: thin;
    }
    .btn.active, .btn:active {
    background-color: #E6E6E6;
    background-image: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    outline-color: -moz-use-text-color;
    outline-style: none;
    outline-width: 0;
    }
    a {
    text-decoration:none;
    color: #0088CC;
    }
    a:hover {
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: underline;
    -moz-text-decoration-style: solid;
    color: #005580;
    }
    .xforms-value {margin-left:1em;}
    .description {
        color: gray;
        margin-top:2em;
        font-size: 80%;}
</style>
    </head>
    <body>
        <div class="source">
            <div class="toolbar">
                <a class="btn" href="/exist/apps/eXide/index.html?open=/db/apps/XSLTForms-Demo/data/gauges.xml" target="eXide" data-type="XML" title="Opens the form in eXide.">Open form in eXide</a>
            </div>
        </div>
        <h1>SVG Gauges</h1>
        <xf:select1 xmlns:xf="http://www.w3.org/2002/xforms" ref="code" appearance="full">
            <xf:itemset nodeset="../measure">
                <xf:label ref="@name"/>
                <xf:value ref="@code"/>
            </xf:itemset>
        </xf:select1>
        <br/>
        <xf:group xmlns:xf="http://www.w3.org/2002/xforms" ref="measure[@code=/data/code]">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="177" height="203.20624" style="overflow:hidden">
                <defs/>
                <ellipse cx="98" cy="98" rx="88" ry="88" transform="translate(-9.5,16.706237)" style="fill:#d0d0d0;fill-opacity:1;stroke:#333333;stroke-width:1"/>
                <ellipse cx="98" cy="98" rx="78" ry="78" transform="translate(-9.5,16.706237)" style="fill:#fafafa;fill-opacity:1;stroke:#e0e0e0;stroke-width:2"/>
                <text x="89.330505" y="14.316406" style="font-size:20px;text-anchor:middle;fill:#333333;fill-opacity:1;stroke:none;font-family:arial">
                    <xf:output value="title"/>
                </text>
                <text x="88.5" y="145.70624" style="font-size:20px;text-anchor:middle;fill:#333333;fill-opacity:1;stroke:none;font-family:arial">
                    <tspan style="font-size:18px">
                        <xf:output value="name"/>
                    </tspan>
                </text>
                <text x="50.174801" y="156.70624" style="font-size:10px;fill:#666666;fill-opacity:1;stroke:none;font-family:arial">
                    <xf:output value="min"/>
                </text>
                <text x="126.5" y="156.70624" style="font-size:10px;text-anchor:end;fill:#666666;fill-opacity:1;stroke:none;font-family:arial">
                    <xf:output value="max"/>
                </text>
                <path d="m 23.1797,127.69926 -7.257811,1.44366 M 51.499022,59.330361 47.387803,53.177486 m 78.113177,6.152875 4.11122,-6.152875 m 24.2081,74.521774 7.25781,1.44366" style="fill:none;stroke:#666666;stroke-width:2"/>
                <path d="M 46.639279,156.56696 36.174098,167.03214 M 33.806332,92.051378 20.132915,86.387663 M 88.5,55.506237 l 0,-14.8 m 54.69367,51.345141 13.67342,-5.663715 m -26.50637,70.179297 10.46518,10.46518" style="fill:none;stroke:#666666;stroke-width:2.5"/>
                <text x="88.5" y="177.70624" style="font-size:20px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:arial">
                    <xf:output value="value"/>
                </text>
                <g transform="translate(-9.5,16.706237)">
                    <g transform="rotate({(value - min) * 270 div max}, 98, 98)">
                        <path d="M 48.502525,147.49747 C 94.337187,94.337187 111.72494,80.612244 113.55635,82.443651 c 1.83141,1.831406 -11.89354,19.219159 -65.053825,65.053819" style="fill:#805c18;fill-opacity:0.6;stroke:#666666;stroke-width:1"/>
                        <ellipse cx="98" cy="98" rx="8" ry="8" style="fill:#987c84;fill-opacity:1;stroke:#666666;stroke-width:1"/>
                    </g>
                </g>
            </svg>
        </xf:group>
        <div xmlns="" class="description">
            <description>Gauges</description>
        </div>
    </body>
</html>