ros_display now seperated into it's own file
This commit is contained in:
Glen Turner
93
index.html
93
index.html
@@ -1,18 +1,18 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<!--
|
<!--
|
||||||
Link to included files. These are typically done by fetching from the web.
|
Link to included files. These are typically done by fetching from the web.
|
||||||
Because this needs to run without an internet conection, the files were saved
|
Because this needs to run without an internet conection, the files were saved
|
||||||
locally
|
locally
|
||||||
-->
|
-->
|
||||||
<script type="text/javascript" src="include/js/eventemitter2.min.js"></script>
|
<script type="text/javascript" src="include/js/eventemitter2.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<!-- Bootstrap is a beatuful and usefull library of GUIs. Docs can be found here: http://getbootstrap.com/
|
<!-- Bootstrap is a beatuful and usefull library of GUIs. Docs can be found here: http://getbootstrap.com/
|
||||||
Tutorials can be found here: http://www.w3schools.com/bootstrap/default.asp
|
Tutorials can be found here: http://www.w3schools.com/bootstrap/default.asp
|
||||||
-->
|
-->
|
||||||
<link rel="stylesheet" href="include/css/bootstrap.min.css">
|
<link rel="stylesheet" href="include/css/bootstrap.min.css">
|
||||||
<script src="include/js/jquery.min.js"></script>
|
<script src="include/js/jquery.min.js"></script>
|
||||||
<script src="include/js/bootstrap.min.js"></script>
|
<script src="include/js/bootstrap.min.js"></script>
|
||||||
@@ -29,9 +29,15 @@
|
|||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(function(){
|
||||||
|
$("#includedContent").load("ros_display.html");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
</head>
|
||||||
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div id="jumbotronTitle" class="jumbotron">
|
<div id="jumbotronTitle" class="jumbotron">
|
||||||
<h1>Example GUI</h1>
|
<h1>Example GUI</h1>
|
||||||
@@ -54,10 +60,6 @@
|
|||||||
|
|
||||||
<div class="tab-pane active" id="RobotInfo">
|
<div class="tab-pane active" id="RobotInfo">
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../include/css/bootstrap.min.css">
|
|
||||||
<script src="../../include/js/jquery.min.js"></script>
|
|
||||||
<script src="../../include/js/bootstrap.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ##################################### ROS BAG PANEL ######################################### -->
|
<!-- ##################################### ROS BAG PANEL ######################################### -->
|
||||||
<!-- ROS Bag Panel -->
|
<!-- ROS Bag Panel -->
|
||||||
@@ -86,66 +88,15 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- ##################################### END ROS BAG PANEL ######################################### -->
|
<!-- ##################################### END ROS BAG PANEL ######################################### -->
|
||||||
|
|
||||||
|
<!-- ##################################### ROBOT DISPLAT PANEL ######################################### -->
|
||||||
<!-- ##################################### Example Progress Bar ######################################### -->
|
<div id="includedContent"></div>
|
||||||
|
<!-- ##################################### END ROS BAG PANEL ######################################### -->
|
||||||
<div class="panel panel-default">
|
|
||||||
|
|
||||||
<div class="panel-heading">
|
|
||||||
Example Pannel Heading
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="panel-body">
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<label class="col-sm-2">
|
|
||||||
Bar Title
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="progress">
|
|
||||||
<div id="progressBar1" class="progress-bar progress-bar-striped active" role="progressbar"
|
|
||||||
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%" >
|
|
||||||
No data recieved yet. </div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
|
|
||||||
<label class="col-sm-2">
|
|
||||||
Up Time (s):
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="col-sm-1" id="UpTime">
|
|
||||||
N/A
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ##################################### Example Image ######################################### -->
|
|
||||||
|
|
||||||
<div class="panel panel-default">
|
|
||||||
<div class="panel-heading">
|
|
||||||
Camera Image
|
|
||||||
</div>
|
|
||||||
<div class="panel-body">
|
|
||||||
<div class="row" >
|
|
||||||
<div class="col-lg-4">
|
|
||||||
<img height="350" alt="No Camera Image" id="imageStream" src="http://localhost:8080/stream?topic=/camera/image"></img>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4">
|
|
||||||
<img height="350" alt="No Camera Image" id="imageStream" src="http://localhost:8080/stream?topic=/camera/image"></img>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -212,5 +163,5 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
57
ros_display.html
Normal file
57
ros_display.html
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
<!-- ##################################### Example Progress Bar ######################################### -->
|
||||||
|
|
||||||
|
<div class="panel panel-default">
|
||||||
|
|
||||||
|
<div class="panel-heading">
|
||||||
|
Example Pannel Heading
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="panel-body">
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<label class="col-sm-2">
|
||||||
|
Bar Title
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="progress">
|
||||||
|
<div id="progressBar1" class="progress-bar progress-bar-striped active" role="progressbar"
|
||||||
|
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%" >
|
||||||
|
No data recieved yet. </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<label class="col-sm-2">
|
||||||
|
Up Time (s):
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="col-sm-1" id="UpTime">
|
||||||
|
N/A
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ##################################### END Example Progress Bar ######################################### -->
|
||||||
|
|
||||||
|
<!-- ##################################### Example Image ######################################### -->
|
||||||
|
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
Camera Image
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="row" >
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<img height="350" alt="No Camera Image" id="imageStream" src="http://localhost:8080/stream?topic=/camera/image">
|
||||||
|
</img>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<img height="350" alt="No Camera Image" id="imageStream" src="http://localhost:8080/stream?topic=/camera/image"></img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ##################################### END Example Image ######################################### -->
|
||||||
Reference in New Issue
Block a user