ros_display now seperated into it's own file
This commit is contained in:
Glen Turner
253
index.html
253
index.html
@@ -1,63 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<!--
|
||||
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
|
||||
locally
|
||||
-->
|
||||
<script type="text/javascript" src="include/js/eventemitter2.min.js"></script>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<!--
|
||||
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
|
||||
locally
|
||||
-->
|
||||
<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/
|
||||
Tutorials can be found here: http://www.w3schools.com/bootstrap/default.asp
|
||||
-->
|
||||
<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>
|
||||
<!-- 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
|
||||
-->
|
||||
<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>
|
||||
|
||||
|
||||
<script src="include/js/roslib.js"></script>
|
||||
<script type="text/javascript" src="include/js/roslib.min.js"></script>
|
||||
<script src="include/js/roslib.js"></script>
|
||||
<script type="text/javascript" src="include/js/roslib.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="ProjectFiles/js/ros_scripts.js"></script>
|
||||
<script type="text/javascript" src="ProjectFiles/js/update_guis.js"></script>
|
||||
<script type="text/javascript" src="ProjectFiles/js/ros_scripts.js"></script>
|
||||
<script type="text/javascript" src="ProjectFiles/js/update_guis.js"></script>
|
||||
|
||||
|
||||
<audio id="audio" src="audio/beep-04.mp3" autostart="false" ></audio>
|
||||
<audio id="audio" src="audio/beep-04.mp3" autostart="false" ></audio>
|
||||
|
||||
<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>
|
||||
<div class="container">
|
||||
<div id="jumbotronTitle" class="jumbotron">
|
||||
<h1>Example GUI</h1>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="jumbotronTitle" class="jumbotron">
|
||||
<h1>Example GUI</h1>
|
||||
</div>
|
||||
|
||||
<ul id="tabs" class="nav nav-pills" data-tabs="tabs">
|
||||
<li class="active">
|
||||
<a href="#RobotInfo" data-toggle="tab">
|
||||
Robot Display
|
||||
</a>
|
||||
</li>
|
||||
<li> <a href="#rosbridgeconnection" data-toggle="tab">
|
||||
ROS Bridge Connection
|
||||
<span id="rosbridgeconnection_badge" class="badge">
|
||||
Not Connected
|
||||
</span></a></li>
|
||||
<ul id="tabs" class="nav nav-pills" data-tabs="tabs">
|
||||
<li class="active">
|
||||
<a href="#RobotInfo" data-toggle="tab">
|
||||
Robot Display
|
||||
</a>
|
||||
</li>
|
||||
<li> <a href="#rosbridgeconnection" data-toggle="tab">
|
||||
ROS Bridge Connection
|
||||
<span id="rosbridgeconnection_badge" class="badge">
|
||||
Not Connected
|
||||
</span></a></li>
|
||||
</ul>
|
||||
|
||||
<div id="my-tab-content" class="tab-content">
|
||||
|
||||
<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 -->
|
||||
@@ -86,131 +88,80 @@
|
||||
</div>
|
||||
<!-- ##################################### END ROS BAG PANEL ######################################### -->
|
||||
|
||||
|
||||
<!-- ##################################### Example Progress Bar ######################################### -->
|
||||
|
||||
<div class="panel panel-default">
|
||||
|
||||
<div class="panel-heading">
|
||||
Example Pannel Heading
|
||||
</div>
|
||||
<!-- ##################################### ROBOT DISPLAT PANEL ######################################### -->
|
||||
<div id="includedContent"></div>
|
||||
<!-- ##################################### END ROS BAG PANEL ######################################### -->
|
||||
|
||||
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="row">
|
||||
<label class="col-sm-2">
|
||||
Bar Title
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="tab-pane" id="rosbridgeconnection">
|
||||
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
|
||||
<form class="form-inline" role="form" onsubmit="return validateForm()">
|
||||
<div id="ConnectionIPForm" class="form-group has-warning" align="center">
|
||||
<span>
|
||||
<label id="ConnectionIPLabel" class="control-label" for="inputWarning">
|
||||
Connection Warning
|
||||
</label>
|
||||
</span>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- ##################################### 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>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="tab-pane" id="rosbridgeconnection">
|
||||
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
|
||||
<form class="form-inline" role="form" onsubmit="return validateForm()">
|
||||
<div id="ConnectionIPForm" class="form-group has-warning" align="center">
|
||||
<span>
|
||||
<label id="ConnectionIPLabel" class="control-label" for="inputWarning">
|
||||
Connection Warning
|
||||
</label>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<div class="input-group">
|
||||
<input type="text" id="ConnectionIPInput" class="form-control" placeholder="bag_filename" placeholder="No IP Address yet">
|
||||
<span class="input-group-btn">
|
||||
<button id="ConnectionButton" type="button" onclick="ros.attemptConnection()" class=""btn btn-warning">
|
||||
Connect
|
||||
<script type="text/javascript">
|
||||
<span>
|
||||
<div class="input-group">
|
||||
<input type="text" id="ConnectionIPInput" class="form-control" placeholder="bag_filename" placeholder="No IP Address yet">
|
||||
<span class="input-group-btn">
|
||||
<button id="ConnectionButton" type="button" onclick="ros.attemptConnection()" class=""btn btn-warning">
|
||||
Connect
|
||||
<script type="text/javascript">
|
||||
document.getElementById("ConnectionIPInput").value = ros.connectionName;
|
||||
</script>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</script>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
ROS Topics
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="col-sm-1" id="ROSTopics">
|
||||
N/A
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-1" id="ROSTopics">
|
||||
N/A
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
ROS Nodes
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
ROS Nodes
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="col-sm-1" id="ROSNodes">
|
||||
N/A
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
N/A
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</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