Files
old-lab_ui/client/index.html
2019-07-16 14:58:03 -04:00

154 lines
6.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Lab UI</title>
<link rel="stylesheet" href="include/css/bootstrap.min.css">
<link rel="stylesheet" href="include/css/fontawesome-free-5.8.2-web/css/all.css">
<link rel="stylesheet" href="include/bower_components/pretty-checkbox/dist/pretty-checkbox.css">
<link rel="stylesheet" href="include/bower_components/selectize/dist/css/selectize.css">
<script type="text/javascript" src="include/js/eventemitter2.min.js"></script>
<script type="text/javascript" src="include/js/roslib.js"></script>
<script src="include/js/jquery.min.js"></script>
<script src="include/js/bootstrap.min.js"></script>
<script src="include/js/math.min.js"></script>
<script src="include/bower_components/async/dist/async.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
<script>
if (annyang) {
// Let's define our first command. First the text we expect, and then the function it should call
var commands = {
'stop': function() {
$('#task-connection-message').animate({bottom: '-100px'});
console.log("stop")
}
};
// Add our commands to annyang
annyang.addCommands(commands);
// Start listening. You can call this here, or attach this call to an event, button, etc.
//annyang.start();
}
</script>
<!-- TO DO: Use requirejs to reliably load these all the dependancies in order -->
<script>
$(function(){
$("#coordinatorContent").load("app/components/coordinator/coordinator.html");
$("#teachContent").load("app/components/coordinator/teach.html");
$("#playContent").load("app/components/coordinator/play.html");
$("#connectorContent").load("app/components/connect/connect.html");
});
</script>
<script type="text/javascript" src="app/utilities/ros_scripts.js"></script>
<script type="text/javascript" src="app/utilities/update_guis.js"></script>
<script type="text/javascript" src="app/utilities/Topic.js"></script>
<script type="text/javascript" src="include/bower_components/remarkable-bootstrap-notify/dist/bootstrap-notify.js"></script>
<script type="text/javascript" src="include/bower_components/selectize/dist/js/standalone/selectize.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app/main.css">
<script type="text/javascript" src="app/components/coordinator/js/ros_scripts.js"></script>
<script type="text/javascript" src="app/components/coordinator/js/update_guis.js"></script>
<!-- <script>
$(function(){
$("#visionContent").load("vision/vision.html");
});
</script>
<script type="text/javascript" src="vision/js/ros_scripts.js"></script>
<script type="text/javascript" src="vision/js/update_guis.js"></script> -->
<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
</head>
<body>
<div class="header">
<div class="logo">
<img src="../include/images/aescape-logo-v3_square_300_white.webp"/>
</div>
<div class="title">
<h1>aescape lab</h1>
</div>
<div class="user">
<i class="far fa-user"></i>
</div>
</div>
<div class="header-bar">
<div class="row-md-3">
<ul id="tabs" class="nav nav-pills" data-tabs="tabs" >
<li>
<a href="#Connect" data-toggle="tab">
Connect
</a>
</li>
<li class="active">
<a href="#Coordinator" data-toggle="tab">
Coordinator
</a>
</li>
<li>
<a href="#Teach" data-toggle="tab">
Teach
</a>
</li>
<li>
<a href="#Play" data-toggle="tab">
Play
</a>
</li>
<li>
<a target="_blank" href="vision/vision.html">
Vision
</a>
</li>
</ul>
</div>
<div id="task-connection-message">
Disconnected
</div>
<div>
<!--
<i class="fas fa-2x fa-circle" data-toggle="modal" data-target="#exampleModal"></i>
-->
</div>
</div>
<div class="main-tabs-container">
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="Connect">
<div id="connectorContent"></div>
</div>
<div class="tab-pane active" id="Coordinator">
<div id="coordinatorContent"></div>
</div>
<div class="tab-pane" id="Teach">
<div id="teachContent"></div>
</div>
<div class="tab-pane" id="Play">
<div id="playContent"></div>
</div>
<!-- <div class="tab-pane" id="Vision">
<div id="visionContent"></div>
</div> -->
</div>
</div>
</body>
</html>