green-path/index.html at master · Asylum313/green-path · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
    <head>
        <title>Green Path</title>

        <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
        <script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

        <script type='text/javascript' src='./resources/js/wpilogutil/WPILOGDecoder.js'></script>
        <script type='text/javascript' src='./resources/js/wpilogutil/parser.js'></script>

        <script type='text/javascript' src='./resources/js/splines-kt.js'></script>
        <script type='text/javascript' src='./resources/js/script.js' async defer></script>

        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel='shortcut icon' href='./resources/favicon.png' />
        <link href='./resources/css/style.css' rel='stylesheet'>
    </head>
    <body onload='init("season")'>
        <input id='title' placeholder='GreenPath' disabled>
        <div id='canvases'>
            <canvas id='background'></canvas>
            <canvas id='field'></canvas>
            <svg id='interactive'></svg>
        </div>
        <div class='buttonContainer'>
            <button onclick='addPoint()' class="icon-button" title="Add Point"><i class="material-icons">add</i></button>
            <button onclick='update(false)' class="icon-button" title="Refresh"><i class="material-icons">refresh</i></button>
            <button onclick='draw(3)' class="icon-button" title="Animate"><i class="material-icons">play_arrow</i></button>
            <button onclick="showWaypointsList()">Waypoints Code</button>
            <button onclick="showInstantPathInput()">Instant Path</button>
            <button onclick="showHeadingsList()">Swerve Headings</button>
            <button id="resetButton" onclick="restoreFromFile()" class="icon-button" title="Restore from file"><i class="material-icons">sync</i></button>
            <button id="openButton" onclick="openFile()" class="btn-pair-left">Open</button>
            <button id="saveButton" onclick="saveFile()" class="btn-pair-center">
                Save
                <span class="modified-indicator">&bull;</span>
            </button>
            <button id="saveAsButton" onclick="saveFileAs()" class="btn-pair-right">Save As</button>
            <div class="spacer"></div>
            <select onchange='changeField(this.value)'>
                <option value="season" selected>Crescendo</option>
                <option value="minnetrials">Corn Conundrum</option>
                <option value="6_field2">6_field2</option>
                <option value="7_field1">7_field1</option>
                <option value="7_field2">7_field2</option>
                <option value="7_field3">7_field3</option>
                <option value="snowremoval">Snow Removal</option>
                <option value="SnowThrower">Snow Thrower</option>
            </select>
            <label class='checkbox'>Is reversed: <input type='checkbox' class='data-input' id='isReversed'></label>
        </div>
        <table>
            <thead>
                <th></th>
                <th>X</th>
                <th>Y</th>
                <th>Rotation (Heading)</th>
                <th>Comments</th>
                <th>Enabled</th>
                <th>Delete</th>
            </thead>
            <tbody>
                <tr>
                    <td class='drag-handler'><i class="material-icons">drag_indicator</i></td>
                    <td class='x'><input type='number' class='data-input' value='0'></td>
                    <td class='y'><input type='number' class='data-input' value='0'></td>
                    <td class='heading'><input type='number' class='data-input' value='0'></td>
                    <td class='comments'><input type='search' placeholder='Comments'></td>
                    <td class='enabled'><input type='checkbox' class='data-input' checked></td>
                    <td class='delete'>
                        <button onclick='$(this).parent().parent().remove();update()' class="icon-button">
                            <i class='material-icons'>clear</i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <dialog id="waypointsDialog">
            <button onclick='this.parentElement.close()' class="close-button">&times;</button>
            <h3>Waypoints List</h3>
            <pre onclick="copyToClipboard()"><code id="waypointsOutput"></code></pre>
        </dialog>
        <div class="toast" id="clipboardToast">Copied to clipboard!</div>

        <dialog id="swerveHeadingsDialog">
            <button onclick='this.parentElement.close()' class="close-button">&times;</button>
            <h3>Swerve Headings List</h3>
            <pre onclick="copyToClipboard()"><code id="swerveHeadingsOutput"></code></pre>
        </dialog>
        <dialog id="instantPathDialog">
            <h3>Autopath generation from .wpilog file</h3>
            <button onclick='this.parentElement.close()' class="close-button">&times;</button>
            <input type="file" id="wpiLogInput" name="wpiLogInput" accept=".wpilog">
            <p></p>
            <label for="sampleRateSelector">Sample rate (seconds)</label>
            <input type = "number" id="sampleRateSelector" name="sampleRateSelector" step="0.01" value="0.5">
            <p></p>
            <label for="startSelector">Time to start from (seconds)</label>
            <input type = "number" id="startSelector" name="startSelector" step="1" value="0">
            <p></p>
            <label for="durationSelector">Duration (seconds)</label>
            <input type = "number" id="durationSelector" name="durationSelector" step="1" value="5">
            <p></p>
            <button class="btn" onclick="generatePointsFromFile()">Generate</button>
        </dialog>

        </body>
</html>