Modify:修改前端显示界面

This commit is contained in:
Pulsar-V 2021-08-26 22:08:53 +08:00
parent 9a2daa9d1b
commit e5a8cac80d
7 changed files with 0 additions and 326 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,4 +0,0 @@
.controller_button{
width: 100%;
height: 50px;
}

View File

@ -1,143 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RoboCar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">控制面板</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="state.html">系统状态</a></li>
</ul>
</div>
</div>
</nav>
<div class="content">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
运动控制
</h3>
</div>
<div class="panel-body">
<div class="col-md-6">
<p id="image_title">图像标题</p>
<img id="image_stream" src="https://static.runoob.com/images/mix/img_avatar.png" width="100%" height="100%">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="button_ac" class="bs-example">
<button onclick="button_ac_click()" type="button" class="btn btn-primary controller_button"
data-loading-text="Loading...">左旋
</button>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="button_front" class="bs-example ">
<button onclick="button_front_click()" type="button"
class="btn btn-primary controller_button"
data-loading-text="Loading...">前进
</button>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="button_cw" class="bs-example">
<button onclick="button_cw_click()" type="button" class="btn btn-primary controller_button"
data-loading-text="Loading...">右旋
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="button_left" class="bs-example ">
<button onclick="button_left_click()" type="button"
class="btn btn-primary controller_button"
data-loading-text="Loading...">左转
</button>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="button_stop" class="bs-example ">
<button onclick="button_stop_click()" type="button"
class="btn btn-primary controller_button"
data-loading-text="Loading...">停止
</button>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="button_right" class="bs-example">
<button onclick="button_right_click()" type="button"
class="btn btn-primary controller_button"
data-loading-text="Loading...">右转
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="button_follow" class="bs-example ">
<button onclick="button_follow_click()" type="button"
class="btn btn-primary controller_button"
data-loading-text="Loading...">跟随
</button>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="button_line" class="bs-example ">
<button onclick="button_back_click()" type="button"
class="btn btn-primary controller_button"
data-loading-text="Loading...">后退
</button>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div id="button_control" class="bs-example">
<button onclick="button_control_click()" type="button"
class="btn btn-primary controller_button"
data-loading-text="Loading...">遥控
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
setInterval("video()", 200);
function video() {
$.ajax({
url: '/video',
async: true,
dataType: "html",
type: 'get',
success: function (data) {
$('#image_stream').attr("src","data:image/png;base64,"+data);
}
})
}
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -1,54 +0,0 @@
function button_ac_click() {
send_command('/move/ac')
}
function button_cw_click() {
send_command('/move/cw')
}
function button_control_click() {
send_command('/move/control')
}
function button_back_click() {
send_command('/move/back')
}
function button_front_click() {
send_command('/move/front')
}
function button_left_click() {
send_command('/move/left')
}
function button_right_click() {
send_command('/move/right')
}
function button_stop_click() {
send_command('/move/stop')
}
function button_follow_click() {
send_command('/move/follow')
}
function send_command(urlpath) {
$.ajax({
type : "GET",
url : urlpath,
success : function(result) {
console.log(result);
},
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
})
}
function button_line_click() {
send_command('/move/line')
}

File diff suppressed because one or more lines are too long

View File

@ -1,107 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RoboCar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">控制面板</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="state.html">系统状态</a></li>
</ul>
</div>
</div>
</nav>
<div class="content">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
队列状态
</h3>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>队列</th>
<th>状态</th>
<th>当前大小</th>
</tr>
</thead>
<tbody>
<tr>
<td>图像队列</td>
<td>启用</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
设备状态
</h3>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>设备名</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>雷达</td>
<td>启用</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
配置文件
</h3>
</div>
<div class="panel-body">
<table class="table table-striped">
<caption>雷达</caption>
<thead>
<tr>
<th>配置名</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>路径</td>
<td>/dev/ttyUSB0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>