Skip to content

Instantly share code, notes, and snippets.

@samirsogay

samirsogay/index.html

Last active November 24, 2020 09:23
Show Gist options
  • Save samirsogay/ac66eea13922f0d44c14fe43c30503da to your computer and use it in GitHub Desktop.
Save samirsogay/ac66eea13922f0d44c14fe43c30503da to your computer and use it in GitHub Desktop.
Download ZIP
Index.html file for Rover web page
Raw
index.html
<html>
<head>
<title>Pi Video Surveillance</title>
<script type="text/javascript">
document.onkeypress = keypressed;
function sendstop(){
server = "/stop";
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send(null);
}
function sendforward(){
server = "/forward";
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send(null);
}
function sendbackward(){
server = "/backward";
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send(null);
}
function sendleft(){
server = "/left";
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send(null);
}
function sendright(){
server = "/right";
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send(null);
}
function sendhand(){
server = "/hand";
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send(null);
}
function sendauto(){
server = "/auto";
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send(null);
}
function sendquit(){
server = "/quit";
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send(null);
}
function keypressed (event) {
var keyCd = ('charCode' in event) ? event.charCode : event.keyCode;
if (keyCd == 113 || keyCd == 81) // q
sendquit()
if (keyCd == 119 || keyCd == 87) // w
sendforward()
if (keyCd == 122 || keyCd == 90) // z
sendbackward()
if (keyCd == 97 || keyCd == 65 ) // a
sendleft()
if (keyCd == 102 || keyCd == 70) // f
sendauto()
if (keyCd == 115 || keyCd == 83) // s
sendstop()
if (keyCd == 100 || keyCd == 68) // d
sendright()
if (keyCd == 104 || keyCd == 72) // h
sendhand()
}
</script>
</head>
<body>
<h1>Pi Video Surveillance</h1>
<img src="{{ url_for('video_feed') }}">
<font face="Arial">
<table name="Table" border="1" cellpadding="6">
<tr>
<td align="center">
<input type="hidden" name="action" value="0" id="hand" />
<img src="/static/images/hand.jpg" id="imghand" onclick="sendhand();"/>
</td>
<td align="center">
<input type="hidden" name="action" value="0" id="forward" />
<img src="/static/images/forward.jpg" id="imgforward" onclick="sendforward();"/>
</td>
<td align="center">
<input type="hidden" name="action" value="0" id="auto" />
<img src="/static/images/auto.jpg" id="imgauto" onclick="sendauto();"/>
</td>
</tr>
<tr>
<td align="center">
<input type="hidden" name="action" value="0" id="left" />
<img src="/static/images/left.jpg" id="imgleft" onclick="sendleft();"/>
</td>
<td align="center">
<input type="hidden" name="action" value="0" id="stop" />
<img src="/static/images/stop.jpg" id="imgstop" onclick="sendstop();"/>
</td>
<td align="center">
<input type="hidden" name="action" value="0" id="right" />
<img src="/static/images/right.jpg" id="imgright" onclick="sendright();"/>
</td>
</tr>
<tr>
<td align="center">
<input type="hidden" name="action" value="0" id="quit" />
<img src="/static/images/quit.jpg" id="imgquit" onclick="sendquit();"/>
</td>
<td align="center">
<input type="hidden" name="action" value="0" id="backward" />
<img src="/static/images/backward.jpg" id="imgbackward" onclick="sendbackward();"/>
</td>
<td align="center">
<input type="hidden" name="action" value="0" id="quit" />
<img src="/static/images/quit.jpg" id="imgquit" onclick="sendquit();"/>
</td>
</tr>
</table>
<br><br>
<br><br>
</font>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment