azalea/kotlin-fork
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: improved greatly design, added some useful functionality and features

Browse Source
This commit is contained in:
dsavvinov
2016-08-31 20:27:06 +03:00
parent 236cae95c3
commit 4a0f9df093
8 changed files with 209 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
proto/protofiles_sources/server_client/mode_change.proto
+2 -1
View File
@@ -2,9 +2,10 @@ syntax = "proto3";
message ModeChange {
enum Mode {
ManualControl = 0;
Idle = 0;
PerimeterBuilding = 1;
PerimeterDebug = 2;
ManualControl = 3;
}
Mode newMode = 1;
ui/index.html
+29 -15
View File
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<title>CarKot</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
@@ -25,29 +25,43 @@
<div class="container" id="body-cont">
<div class="row">
<!-- Canvas -->
<div class="col-md-8"> <canvas id="pathCanvas" width="1024" height="768"></canvas> </div>
<div class="col-md-8">
<canvas id="pathCanvas" width="1024px" height="768px" class="center-block"></canvas>
<div id="coords-tooltip">HEY</div>
</div>
<!-- Control Pnael -->
<div class="col-md-1 center-block">
<div class="col-md-2 center-block">
<!-- Note that algoID should coincide with enums id in ModeChange -->
<button type="button" class="btn btn-primary center-block btn-block" id="perimeter-btn" onclick="changeMode(1)">Enter Room Exploration Mode</button>
<button type="button" class="btn btn-primary center-block btn-block" id="perimeter-btn" onclick="perimeterRequest()">Get Waypoints Info</button>
<button type="button" class="btn btn-primary center-block btn-block" id="manual-btn" onclick="changeMode(2)">Debug Room Exploration</button>
<button type="button" class="btn btn-primary center-block btn-block" id="manual-btn" onclick="perimeterDebugRequest()">Draw algo state</button>
<button type="button" class="btn btn-primary center-block btn-block" id="manual-btn" onclick="changeMode(0)">Manual Control</button>
<button type="button" class="btn btn-primary center-block btn-block" id="mode-perimeter-btn" onclick="changeMode(1, this, &quot;perimeter-mode-tab&quot;)">Enter Room Exploration Mode</button>
<button type="button" class="btn btn-primary center-block btn-block" id="debug-permiter-btn" onclick="changeMode(2, this, &quot;perimeter-debug-tab&quot;)">Debug Room Exploration</button>
<button type="button" class="btn btn-primary center-block btn-block" id="mode-manual-btn" onclick="changeMode(3, this, &quot;manual-mode-tab&quot;)">Manual Control</button>
<!-- Manual control -->
<!--
<button type="button" class="btn btn-default control-btn center-block" id="up-control-btn" onclick="sendMoveCommand(1)">Up</button>
<button type="button" class="btn btn-default control-btn" id="left-control-btn" onclick="sendMoveCommand(3)">Left</button>
<button type="button" class="btn btn-default control-btn" id="down-control-btn" onclick="sendMoveCommand(2)">Down</button>
<button type="button" class="btn btn-default control-btn" id="right-control-btn" onclick="sendMoveCommand(4)">Right</button> -->
</div> <!-- Control panel -->
<div class="col-md-3"> </div>
<div class="col-md-2" id="control-tabs">
<div class="tab btn-block" id="perimeter-mode-tab">
<button type="button" class="btn btn-primary center-block btn-block" id="get-waypoints-btn" onclick="perimeterRequest()">Get Waypoints Info</button>
</div>
<div class="tab btn-block" id="perimeter-debug-tab">
<button type="button" class="btn btn-primary center-block btn-block" id="get-debug-btn" onclick="perimeterDebugRequest()">Draw algo state</button>
</div>
<div class="tab btn-block" id="manual-mode-tab">
<button type="button" class="btn btn-default control-btn center-block" id="up-control-btn" onclick="sendMoveCommand(1)">Up</button>
<button type="button" class="btn btn-default control-btn" id="left-control-btn" onclick="sendMoveCommand(3)">Left</button>
<button type="button" class="btn btn-default control-btn" id="down-control-btn" onclick="sendMoveCommand(2)">Down</button>
<button type="button" class="btn btn-default control-btn" id="right-control-btn" onclick="sendMoveCommand(4)">Right</button>
</div>
<button type="button" class="btn btn-primary center-block btn-block" id="exit-btn" onclick="changeMode(0, this, null)">Exit</button>
</div>
</div> <!-- Main container first (and last) row -->
</div> <!-- Main container -->
<!-- Get protobuf -->
<script src="scripts/protobufjs/long.js"></script>
<script src="scripts/protobufjs/bytebuffer.js"></script>
ui/scripts/index.js
+62 -15
View File
@@ -18,7 +18,14 @@ var ProtoBuf = dcodeIO.ProtoBuf,
// serverAddress = "http://localhost:8000";
serverAddress = "http://localhost:7926",
remoteController = null;
remoteController = null,
// drawing-related objects
canvas = $( "#pathCanvas" )[0],
ctx = canvas.getContext('2d'),
tooltip = $( "#coords-tooltip");
var currentActiveButton = null;
var Commands = {
UP: 0,
@@ -118,28 +125,68 @@ $(document).keyup(function(event) {
return handleControlKeyup(event)
});
function changeMode(modeId) {
$(document).ready(init)
function init() {
$("#perimeter-mode-tab").hide()
$("#perimeter-debug-tab").hide()
$("#manual-mode-tab").hide()
$("#exit-btn").hide()
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(evt);
var message = "(" + mousePos.x + "," + mousePos.y + ")";
tooltip[0].textContent = message;
tooltip.offset( {top: (evt.clientY + 20), left: (evt.clientX + 20) } );
},
false
);
}
function hideTabs() {
$("#perimeter-mode-tab").fadeOut()
$("#perimeter-debug-tab").fadeOut()
$("#manual-mode-tab").fadeOut()
$("#exit-btn").fadeOut()
}
function changeMode(modeId, button, associatedTab) {
console.log("Changing mode to mode #" + modeId)
// check for pressing wrong buttons
if (($(button).hasClass("disabled"))) {
alert("Exit current mode first!");
return;
}
if ($(button) == currentActiveButton) {
alert("Already in this mode!");
}
// if exit pressed
if (modeId == 0) {
currentActiveButton.siblings().removeClass("disabled")
currentActiveButton = null
hideTabs();
}
else { // entering mode
$(button).siblings().addClass("disabled");
currentActiveButton = $(button);
$("#exit-btn").fadeIn();
$("#" + associatedTab).fadeIn();
}
console.log("Sending request to change mode to" + modeId.toString());
var msg = new ModeChange(modeId);
console.log("Sending request to change algorithm");
sendProtobuf(msg, serverAddress + "/change-mode", function(response) {
var response = GenericResponse.decode64(response);
if (response.result.errorCode != 0) {
if (response.result.error != 0) {
alert("Something went wrong!");
return;
}
console.log("Got OK for changing request")
// switch(modeId) {
// case 0:
// enterManualMode();
// break;
// case 1:
// buildPerimeter( debug = false);
// break;
// case 2:
// buildPerimeter(/* debug = */ true);
// break;
// }
});
}
ui/scripts/proto/client_debug.proto
+1 -3
View File
@@ -1,7 +1,6 @@
syntax = "proto3";
message DebugResponse {
repeated int32 begin_x = 1 [packed = true];
repeated int32 begin_y = 2 [packed = true];
repeated int32 end_x = 3 [packed = true];
@@ -14,5 +13,4 @@ message DebugResponse {
repeated int32 x = 8 [packed = true];
repeated int32 y = 9 [packed = true];
}
}
ui/scripts/proto/generic_response.proto
+1 -1
View File
@@ -1,7 +1,7 @@
syntax = "proto3";
message Result {
int32 errorCode = 1;
int32 error = 1;
}
message GenericResponse {
ui/scripts/proto/mode_change.proto
+3 -1
View File
@@ -2,8 +2,10 @@ syntax = "proto3";
message ModeChange {
enum Mode {
ManualControl = 0;
Idle = 0;
PerimeterBuilding = 1;
PerimeterDebug = 2;
ManualControl = 3;
}
Mode newMode = 1;
ui/scripts/util/drawing.js
+94 -10
View File
@@ -1,8 +1,12 @@
"use strict";
var canvas = $( "#pathCanvas" )[0],
ctx = canvas.getContext('2d'),
eps = 1e-5,
var aspectRatio = 4.0/3.0;
var leftmostPoint = createPoint(0, 0);
var rightmostPoint = createPoint(0, 0);
var topPoint = createPoint(0, 0);
var bottomPoint = createPoint(0, 0);
var eps = 1e-5,
zero = {
x: canvas.width / 2,
y: canvas.height / 2
@@ -14,6 +18,9 @@ var canvas = $( "#pathCanvas" )[0],
canvas.style = "border:5px solid #000000;";
var stepX = canvas.width / 20
var stepY = canvas.height / 20
function drawPath(waypoints) {
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
@@ -30,19 +37,19 @@ function drawCar(carPosition) {
drawPoint(carPosition, carColour, 10);
}
function drawLine(line) {
function drawLine(line, colour, lineWidth) {
var begin_x = 0;
var begin_y = (line.A * (0 - zero.x) + line.C) / line.B + zero.y;
var begin_y = - (line.A * (0 - zero.x) + line.C) / line.B + zero.y;
var end_x = canvas.width;
var end_y = (line.A * (canvas.width - zero.x) + line.C) / line.B + zero.y;
var end_y = - (line.A * (canvas.width - zero.x) + line.C) / line.B + zero.y;
// check if evaluated y-coordinates are in the canvas. If not, re-evaluate x-coordinates from y, to prevent issues with lines that are close to vertical
if (gt(begin_y, canvas.height) || gt(end_y, canvas.height)) {
begin_x = (line.B * (0 - zero.y) + line.C) / line.A + zero.x;
begin_x = - (line.B * (0 - zero.y) + line.C) / line.A + zero.x;
begin_y = 0;
end_x = (line.B * (canvas.height - zero.y) + line.C) / line.A + zero.x;
end_x = - (line.B * (canvas.height - zero.y) + line.C) / line.A + zero.x;
end_y = canvas.height;
}
@@ -50,12 +57,17 @@ function drawLine(line) {
ctx.beginPath();
ctx.moveTo(begin_x, begin_y);
ctx.lineTo(end_x, end_y);
ctx.strokeStyle = foundColour;
if (lineWidth != null) {
ctx.lineWidth = lineWidth
}
ctx.strokeStyle = colour;
ctx.closePath();
ctx.stroke();
}
function drawSegment(segment, colour) {
updateCorners(segment.begin);
updateCorners(segment.end);
console.log("Drawing segment from (" + segment.begin.x + ", " + segment.begin.y + ") to (" + segment.end.x + ", " + segment.end.y + ")")
ctx.beginPath();
ctx.moveTo(segment.begin.x + zero.x, segment.begin.y + zero.y);
@@ -123,7 +135,24 @@ function createPoint(x_, y_) {
return point;
}
function updateCorners(point) {
if (point.x < leftmostPoint.x) {
leftmostPoint = point;
}
if (point.x > rightmostPoint.x) {
rightmostPoint = point;
}
if (point.y < bottomPoint.y) {
bottomPoint = point;
}
if (point.y > topPoint.y) {
topPoint = point;
}
resizeCanvas();
}
function drawPoint(point, colour, radius) {
updateCorners(point);
ctx.beginPath();
ctx.arc(point.x + zero.x, point.y + zero.y, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = colour;
@@ -131,6 +160,59 @@ function drawPoint(point, colour, radius) {
ctx.fill();
}
function resizeCanvas() {
while (canvas.width < rightmostPoint.x + zero.x || 0 > leftmostPoint + zero.x) {
canvas.width *= 2.0;
canvas.height = canvas.width / 4.0 * 3.0;
}
while (canvas.height < topPoint.y + zero.y || 0 > bottomPoint + zero.y) {
canvas.height *= 2.0;
canvas.width = canvas.height / 3.0 * 4.0
}
var contentMid = createPoint( (rightmostPoint.x + leftmostPoint.x) / 2, (topPoint.y + bottomPoint.y) / 2);
var canvasMid = createPoint(canvas.width / 2, canvas.height / 2);
zero.x = canvasMid.x - contentMid.x
zero.y = canvasMid.y - contentMid.y
stepX = canvas.width / 20;
stepY = canvas.height / 20;
}
function getMousePos(evt) {
var rect = canvas.getBoundingClientRect();
var pt = {
x: Math.floor((evt.clientX-rect.left) / (rect.right-rect.left) * canvas.width) - zero.x,
y: Math.floor((evt.clientY-rect.top) / (rect.bottom-rect.top) * canvas.height - zero.y)
};
return pt;
}
function drawAxis() {
for (var i = zero.x + stepX; i < canvas.width; i += stepX) {
drawLine(createLine(1, 0, -(i - zero.x)), "black", 0.1);
}
for (var i = zero.x - stepX; i > 0; i -= stepX) {
drawLine(createLine(1, 0, -(i - zero.x)), "black", 0.1);
}
drawLine(createLine(1, 0, 0), "black", 2);
for (var i = zero.y + stepY; i < canvas.height; i += stepY) {
drawLine(createLine(0, 1, -(i - zero.y)), "black", 0.1);
}
for (var i = zero.y - stepY; i > 0; i -= stepY) {
drawLine(createLine(0, 1, -(i - zero.y)), "black", 0.1);
}
drawLine(createLine(0, 1, 0), "black", 2)
}
function drawDebug(data) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -147,7 +229,7 @@ function drawDebug(data) {
var pt = createPoint(data.x[i], data.y[i])
points.push(pt);
}
var carPosition = createPoint(data.carX, data.carY);
// draw everything
@@ -163,4 +245,6 @@ function drawDebug(data) {
for (var i = 0; i < points.length; i++) {
drawPoint(points[i], "green", 2);
}
drawAxis()
}
ui/styles/style.css
+17
View File
@@ -3,6 +3,23 @@
height: 36em;
}
#control-tabs {
display: block;
}
.btn {
white-space: normal;
}
#coords-tooltip {
display: none;
}
#pathCanvas:hover + #coords-tooltip {
display: block;
position: fixed;
overflow: hidden;
}
/*#algos {
padding: 1em;