index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>poly2tri tester</title>
        <script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="bower_components/purl/purl.js"></script>
        <script type="text/javascript" src="bower_components/kineticjs/kinetic-v4.7.4.min.js"></script>
        <script type="text/javascript" src="dist/poly2tri.min.js"></script>
        <style type="text/css" media="screen">
            html, body {
                height: 100%;
                padding: 0;
                margin: 0;
                font-family: arial,verdana,helvetica,sans-serif;
                font-size: 12px;
            }

            #control {
                float: right;
                width: 400px;
                height: 100%;
                background-color: #eee;
                overflow: auto;
                padding: 0;
                margin: 0;
            }

            #content {
                z-index: 0;
                padding: 0;
                margin: 0;
                position: absolute;
                top: 10px;
                right: 410px;
                left: 10px;
                bottom: 10px;
            }

            .wrapper {
                width: 100%;
                margin-bottom: 1.5em;
                padding: 0;
            }

            .wrapper textarea {
                margin: 5px;
                width: 380px;
            }

            .info {
                color: #777;
            }
        </style>
        <script type="text/javascript" src="tests/index.js"></script>
    </head>
    <body>
        <div id="control">
            <form>
                <div class="wrapper">
                    <label for="preset">Load preset data:</label>
                    <select id="preset"></select>
                    <input id="btnTriangulate" type="button" value="Triangulate!">
                    <address id="attribution"></address>
                    <div class="info">(<span id="triangles_size">0</span> triangles computed)</div>
                </div>
                <div class="wrapper">
                    <input id="draw_constraints" type="checkbox" value="drawConstraints" checked="checked">
                    <label for="draw_constraints">Draw constraints</label> 
                </div>
                <div class="wrapper">
                    <label for="poly_contour">Contour of the polygon (any separator between coordinates):</label>
                    <textarea id="poly_contour" rows="7" cols="50"></textarea>
                    <div class="info">(<span id="contour_size">0</span> points parsed)</div>
                </div>
                <div class="wrapper">
                    <label for="poly_holes">Holes in the polygon (at least one blank line between each hole):</label>
                    <textarea id="poly_holes" rows="5" cols="50"></textarea>
                    <div class="info">(<span id="holes_size">0</span> holes parsed)</div>
                </div>
                <div class="wrapper">
                    <label for="poly_points">Steiner points (any separator between coordinates):</label>
                    <textarea id="poly_points" rows="5" cols="50"></textarea>
                    <div class="info">(<span id="points_size">0</span> points parsed)</div>
                </div>
                <div class="wrapper">
                    Pointer in drawing coords: {x: <span id="pointer_x"></span>, y: <span id="pointer_y"></span>}
                    <br>
                    <em>Drag to Pan. Use wheel to zoom on pointer.</em>
                </div>
            </form>
            <address>
                Powered by <a href="https://github.com/r3mi/poly2tri.js.git">poly2tri.js</a> 
                v<span id="version">???</span>
            </address>
        </div>
        <div id="content">
        </div>
    </body>
</html>