Commit b1176e8a authored by Cédric Bonhomme's avatar Cédric Bonhomme

Added a mini webinterface to command the robot.

parent ac88919c
......@@ -17,7 +17,7 @@ Required imports and code execution for basic functionning.
import os
if os.geteuid() != 0:
raise Exception('You must run the application as root on the EV3.')
pass#raise Exception('You must run the application as root on the EV3.')
import sys
if 'threading' in sys.modules:
raise Exception('threading module loaded before patching!')
......
......@@ -38,6 +38,6 @@ try:
button = TouchSensor()
ir_sensor = InfraredSensor()
except Exception as e:
raise Exception('You must run the application on the EV3.')
pass#raise Exception('You must run the application on the EV3.')
from web import views
/* Entire Page - layout */
body {
margin: 0px;
padding: 0;
background: #FFF;
font-family: 'Armata', sans-serif;
font-size: 12px;
color: #222;
}
.alignCenter{
width: 960px;
margin: 0px auto;
}
div#header {
height: 360px;
}
div#controls {
float: left;
width: 450px;
}
img.button {
cursor: pointer;
border: 4px solid white;
/* rounded corners */
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
img.button:hover {
border: 4px solid black;
}
img.button:active {
border: 4px solid red;
}
img#ArrowUp,
img#ArrowDown {
margin-left: 137px;
}
img#ArrowLeft {
}
img.CounterClockwise {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
div#head-spin {
width: 500px;
height: 150px;
margin-left: 400px;
}
img#head {
margin-bottom: 40px;
}
div#body-spin {
width: 500px;
height: 150px;
margin-left: 400px;
}
img#body {
margin-bottom: 20px;
}
$(document).ready(function() {
$('#ArrowUp').mousedown(function() {
console.log('ArrowUp down')
var ip = document.domain
var power = 60
var ajax_url = "http://" + ip + ":5000/move/forward/" + power
$.ajax({
type: "GET",
crossDomain: true,
dataType: 'jsonp',
url: ajax_url,
success: function() {
}
});
return false;
});
$('#ArrowDown').mousedown(function() {
console.log('ArrowDown down')
var ip = document.domain
var power = 60
var ajax_url = "http://" + ip + ":5000/move/backward/" + power
$.ajax({
type: "GET",
crossDomain: true,
dataType: 'jsonp',
url: ajax_url,
success: function() {
}
});
return false;
});
$('#ArrowLeft').mousedown(function() {
console.log('ArrowLeft down')
var ip = document.domain
var power = 60
var ajax_url = "http://" + ip + ":5000/move/left/" + power
$.ajax({
type: "GET",
crossDomain: true,
dataType: 'jsonp',
url: ajax_url,
success: function() {
}
});
return false;
});
$('#ArrowRight').mousedown(function() {
console.log('ArrowRight down')
var ip = document.domain
var power = 60
var ajax_url = "http://" + ip + ":5000/move/right/" + power
$.ajax({
type: "GET",
crossDomain: true,
dataType: 'jsonp',
url: ajax_url,
success: function() {
}
});
return false;
});
$('#head-spin .CounterClockwise').mousedown(function() {
console.log('CounterClockwise down')
var ip = document.domain
var power = 60
var ajax_url = "http://" + ip + ":5000/move-start/lookleft/" + power + "/"
$.ajax({
type: "GET",
crossDomain: true,
dataType: 'jsonp',
url: ajax_url,
success: function() {
}
});
return false;
});
$('#head-spin .Clockwise').mousedown(function() {
console.log('Clockwise down')
var ip = document.domain
var power = 60
var ajax_url = "http://" + ip + ":5000/move-start/lookright/" + power + "/"
$.ajax({
type: "GET",
crossDomain: true,
dataType: 'jsonp',
url: ajax_url,
success: function() {
}
});
return false;
});
$('.button').mouseup(function() {
console.log('Button release')
var ip = document.domain
var ajax_url = "http://" + ip + ":5000/move/stop"
$.ajax({
type: "GET",
crossDomain: true,
dataType: 'jsonp',
url: ajax_url,
success: function() {
}
});
return false;
});
});
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>EV3WebController</title>
<link href="{{ url_for('static', filename='css/ev3web.css') }}" rel="stylesheet" media="screen" />
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.11.3.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/ev3web.js') }}"></script>
</head>
<body>
<div class='alignCenter'>
<div id='controls'>
<img class='button' id='ArrowUp' src="{{ url_for('static', filename='img/ArrowUp.png') }}" />
<div class='clear'></div>
<img class='button' id='ArrowLeft' src="{{ url_for('static', filename='img/ArrowLeft.png') }}" />
<img id='body' src="{{ url_for('static', filename='img/r2d2-128.png') }}" />
<img class='button' id='ArrowRight' src="{{ url_for('static', filename='img/ArrowRight.png') }}" />
<div class='clear'></div>
<img class='button' id='ArrowDown' src="{{ url_for('static', filename='img/ArrowDown.png') }}" />
<div class='clear'></div>
</div>
<div class='clear'></div>
</div> <!-- alignCenter -->
</body>
</html>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment