moved robot display
added example string publisher
This commit is contained in:
Glen Turner
@@ -1,64 +0,0 @@
|
|||||||
<!-- ##################################### 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">
|
|
||||||
<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="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 ######################################### -->
|
|
||||||
33
robot_display/js/ros_scripts.js
Normal file
33
robot_display/js/ros_scripts.js
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
///////////////////////////////////////////////////////////////////////////////////
|
||||||
|
// Publishers
|
||||||
|
///////////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
function publishStringExample(msg)
|
||||||
|
{
|
||||||
|
var stringMessage = new ROSLIB.Message({
|
||||||
|
data : msg
|
||||||
|
})
|
||||||
|
stringPublisherTopic.publish(stringMessage)
|
||||||
|
console.log(stringMessage)
|
||||||
|
}
|
||||||
|
|
||||||
|
////////////////////////////////////////////////////////////////
|
||||||
|
// Topics
|
||||||
|
////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
var stringPublisherTopic = new ROSLIB.Topic({
|
||||||
|
ros : ros,
|
||||||
|
name : 'stringPublisher',
|
||||||
|
messageType : 'std_msgs/String'
|
||||||
|
});
|
||||||
|
|
||||||
|
////////////////////////////////////////////////////////////////
|
||||||
|
// Subscribers
|
||||||
|
////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
|
||||||
|
stringPublisherTopic.subscribe(function(message) {
|
||||||
|
|
||||||
|
console.log("stringPublisherTopic: " + message.data)
|
||||||
|
update_sendRosMessageExample(message.data)
|
||||||
|
});
|
||||||
44
robot_display/js/update_guis.js
Normal file
44
robot_display/js/update_guis.js
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
function sendRosMessageExample()
|
||||||
|
{
|
||||||
|
publishStringExample(String(document.getElementById("sendRosMessageExample").value))
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_sendRosMessageExample(msg)
|
||||||
|
{
|
||||||
|
document.getElementById("recievedMessageDiv").innerHTML = msg
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_ProgressBar(value)
|
||||||
|
{
|
||||||
|
|
||||||
|
// This would be a great way of getting a float or int from a rosTopic and displaying it.
|
||||||
|
// I would suggest storing the data as a data field in the ros_scripts then updating it every 500 or 1000 ms rather than updating the gui every time you recieve a message
|
||||||
|
var num_string = "";
|
||||||
|
num_string = num_string.concat(value);
|
||||||
|
num_string = num_string.substring(0,4);
|
||||||
|
num_string = num_string.concat("%");
|
||||||
|
|
||||||
|
doc = document.getElementById("progressBar1");
|
||||||
|
|
||||||
|
doc.style.width = num_string;
|
||||||
|
doc.innerHTML = num_string;
|
||||||
|
|
||||||
|
if (value < 50 && value > 25 ) {
|
||||||
|
doc.className = "progress-bar progress-bar-warning";
|
||||||
|
}
|
||||||
|
else if ( value <= 25)
|
||||||
|
{
|
||||||
|
doc.className = "progress-bar progress-bar-danger";
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
doc.className = "progress-bar progress-bar-success";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.setInterval(function(){
|
||||||
|
|
||||||
|
update_ProgressBar(Math.random() * 100);
|
||||||
|
|
||||||
|
}, 1000);
|
||||||
102
robot_display/robot_display.html
Normal file
102
robot_display/robot_display.html
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<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 ######################################### -->
|
||||||
Reference in New Issue
Block a user