103 lines
3.2 KiB
HTML
103 lines
3.2 KiB
HTML
|
|
||
|
|
|
||
|
|
<div class="panel panel-default">
|
||
|
|
|
||
|
|
<div class="panel-heading">
|
||
|
|
Example using ROS messages
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="panel-body">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<div class="input-group">
|
||
|
|
<input type="text" id="sendRosMessageExample" class="form-control" placeholder="message">
|
||
|
|
<script type="text/javascript">
|
||
|
|
document.getElementById("sendRosMessageExample").onkeydown=function(event)
|
||
|
|
{
|
||
|
|
if(event.keyCode == 13)
|
||
|
|
{
|
||
|
|
sendRosMessageExample();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<span class="input-group-btn">
|
||
|
|
<button class="btn btn-primary" id="sendMessageButton" type="button" onclick="sendRosMessageExample()">
|
||
|
|
<span id="recordButtonText">
|
||
|
|
Send
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
Recieved Message: <div id="recievedMessageDiv">
|
||
|
|
No message
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ##################################### D-PAD ######################################### -->
|
||
|
|
<!--
|
||
|
|
|
||
|
|
<p>Click in the actual image. Relative coordinates will be displayed.</p>
|
||
|
|
<p id="rez"></p>
|
||
|
|
<div>
|
||
|
|
<img id="myImage" src="/backend/images/D-pad.png">
|
||
|
|
-->
|
||
|
|
|
||
|
|
<!-- ##################################### END D-PAD ######################################### -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ##################################### Example Progress Bar ######################################### -->
|
||
|
|
|
||
|
|
<div class="panel panel-default">
|
||
|
|
|
||
|
|
<div class="panel-heading">
|
||
|
|
Example Pannel Heading
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="panel-body">
|
||
|
|
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-2">
|
||
|
|
<label>
|
||
|
|
Bar Title
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2">
|
||
|
|
<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>
|
||
|
|
</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="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 ######################################### -->
|