senaduka/old-lab_ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

moved robot display

Browse Source 
added example string publisher
This commit is contained in:
Glen Turner
2015-07-01 12:15:32 -07:00
parent df0a745522
commit 4fea9b0a04
4 changed files with 179 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
robot_display.html
View File

@@ -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
View 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
View 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
View 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 ######################################### -->