forked from 0xABAD/behavior_tree
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (131 loc) · 5.55 KB
/
index.html
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FTC Behavior Trees</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-amber.min.css" />
<link rel="stylesheet" href="style.css" />
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script defer src="https://d3js.org/d3.v7.min.js"></script>
<script defer src="behaviorTree.js"></script>
<script defer src="parseBehaviorTree.js"></script>
<script defer src="behaviorTreeDrawing.js"></script>
<script defer src="behaviorTreeControls.js"></script>
<script defer src="behaviorTreeFunctionality.js"></script>
<script defer src="behaviorTreeGenerateJava.js"></script>
<script>
const SAMPLE_TREE = `->
| ?
| | ->
| | | (IsLeftSpike)
| | | [SetLeftSpikeTrajectory]
| | ->
| | | (IsRightSpike)
| | | [SetRightSpikeTrajectory]
| | [SetMiddleSpikeTrajectory]
| [FollowTrajectory]
`;
window.onload = function () {
let codeElement = document.getElementById('code');
let graphElement = document.getElementById('graph');
let javaElement = document.getElementById('java');
let team_number = document.getElementById('team_number').value;
let tree_name = document.getElementById('tree_name').value;
codeElement.value = SAMPLE_TREE;
setupControls(graphElement, codeElement, javaElement);
loadTree(graphElement, codeElement, javaElement, team_number, tree_name);
}
</script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header" style="background-color: #7851A9; color: #FDB812">
<div class=" mdl-layout__header-row">
<span class="mdl-layout-title"><A HREF="https://github.com/ftc16072/behavior_tree">FTC Behavior Trees</A></span>
<!-- Add spacer, to align any items to the right -->
<div class=" mdl-layout-spacer"></div>
<div>
<button id="download_svg__button" style="background-color: #FDB812" class="mdl-button
mdl-js-button
mdl-button--raised
mdl-js-ripple-effect
mdl-button--accent">
Download SVG
</button>
<button id="tree-help__button" style="background-color: #FDB812" class="mdl-button
mdl-js-button
mdl-button--fab
mdl-button--mini-fab
mdl-js-ripple-effect
tree-help-button
mdl-button--accent">
?
</button>
<div id="tree-help__card" class="tree-help mdl-card mdl-shadow--2dp" style="visibility: hidden">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Tree Manipulation</h2>
</div>
<div class="mdl-card__supporting-text">
To change the state of condition or action: Click on name
<ul>
<li><span class="tree-help__action">Move</span>: Left Mouse Button</li>
<li><span class="tree-help__action">Zoom</span>: Mouse Wheel</li>
<li><span class="tree-help__action">Stretch Horizontal</span>: Shift + Wheel</li>
<li><span class="tree-help__action">Stretch Vertical</span>: Shift + Alt + Wheel</li>
</ul>
</div>
</div>
</div>
<input type="file" id="treeFileInput" style="display:none" accept="*.tree" class="visually-hidden">
<button id="treeFileSelect" style="background-color: #FDB812" class="mdl-button
mdl-js-button
mdl-button--raised
mdl-js-ripple-effect
mdl-button--accent">
Load Tree
</button>
</div>
</header>
<main class="mdl-layout__content">
<div>
<table>
<TR>
<TD>
<textarea id="code" style="height:40vh;width:90vh;"><!-- text tree goes here --></textarea>
</TD>
<TD>
<UL>
<LI>? - Fallback</LI>
<LI>-> - Sequential</LI>
<LI>=2 - Parallel (with number)</LI>
<LI>(Conditional)</LI>
<LI>[Action]</LI>
</UL>
<br />
Num:<input type="text" id="team_number" name="team_number" value="16072" />
<br />
Tree:<input type="text" id="tree_name" name="tree_name" value="Sample" />
<br />
<br />
<button id="codeUpdate" style="background-color: #FDB812" class="mdl-button
mdl-js-button
mdl-button--raised
mdl-js-ripple-effect
mdl-button--accent">
Update
</button>
</TD>
<TD>
<textarea id="java" wrap="off" readonly style="height:40vh;width:60vh;background-color: grey"
;><!-- Your content goes here --></textarea>
</TD>
</TR>
</table>
</div>
<div class="page-content" id="graph" style="height:50vh;"><!-- graph will go here --></div>
</main>
</div>
</body>
</html>