-
Notifications
You must be signed in to change notification settings - Fork 1
/
webpage.h
148 lines (116 loc) · 3.8 KB
/
webpage.h
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
138
139
140
141
142
143
144
145
146
147
148
#include "pgmspace.h"
const char body[] PROGMEM = R"===(
<!DOCTYPE html>
<html>
<head>
<title>MEAM 5100 Final Project</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
.arrow-button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
margin: 10px 5px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: 0.3s;
font-size: 20px;
}
.arrow-button:hover {
background-color: #45a049;
}
.stop-button {
background-color: red;
color: white;
padding: 10px 15px;
margin: 10px 5px;
border: none;
border-radius: 50%; /* Makes the button circular */
cursor: pointer;
transition: 0.3s;
font-size: 20px;
}
.stop-button:hover {
background-color: darkred;
}
p {
color: #555;
}
</style>
</head>
<body>
<h1>MEAM 5100 Final Project</h1>
<p>Press to turn on motors (always press at beginning).</p>
<button id="motorPowerButton" class="button" onclick="hitMotorPower()"> ▲ Start motors. </button>
<p>Press to move robot.</p>
<button id="forwardButton" class="arrow-button" onclick="hitForward()"> ▲ Move Forward </button> <!-- Up arrow -->
<button id="stopButton" class="stop-button" onclick="hitStop()"> Stop </button> <!-- Stop button -->
<button id="backButton" class="arrow-button" onclick="hitBack()"> ▼ Move Backwards </button> <!-- Down arrow -->
<p>Press to turn robot.</p>
<button id="leftButton" class="arrow-button" onclick="hitLeft()"> ◀ Turn Left </button> <!-- Left arrow -->
<button id="rightButton" class="arrow-button" onclick="hitRight()"> ▶ Turn Right </button> <!-- Right arrow -->
<p>Press to enter an autonomous mode.</p>
<button id="wallFollowingButton" class="button" onclick="hitWallFollowing()"> ▶ Perform Wall Following. </button>
<button id="beaconTrackingButton" class="button" onclick="hitTrackBeacon()"> ▶ Perform Beacon Tracking. </button>
<button id="locatePoliceCar" class="button" onclick="hitPoliceCar()"> ▶ Locate Police Car. </button>
<script>
function hitLeft(){
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "hitLeft", true);
xhttp.send();
}
function hitRight(){
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "hitRight", true);
xhttp.send();
}
function hitForward(){
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "hitForward", true);
xhttp.send();
}
function hitBack(){
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "hitBack", true);
xhttp.send();
}
function hitStop(){
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "hitStop", true);
xhttp.send();
}
function hitWallFollowing(){
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "hitWallFollowing", true);
xhttp.send();
}
function hitTrackBeacon(){
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "hitTrackBeacon", true);
xhttp.send();
}
function hitPoliceCar(){
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "hitPoliceCar", true);
xhttp.send();
}
function hitMotorPower(){
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "hitMotorPower", true);
xhttp.send();
}
</script>
</body>
</html>
</html>
)===";