From 4fea9b0a04f88e5661cd90857088f9b35837cbf4 Mon Sep 17 00:00:00 2001 From: Glen Turner <8gt6@queensu.ca> Date: Wed, 1 Jul 2015 12:15:32 -0700 Subject: [PATCH] moved robot display added example string publisher --- robot_display.html | 64 ------------------- robot_display/js/ros_scripts.js | 33 ++++++++++ robot_display/js/update_guis.js | 44 +++++++++++++ robot_display/robot_display.html | 102 +++++++++++++++++++++++++++++++ 4 files changed, 179 insertions(+), 64 deletions(-) delete mode 100644 robot_display.html create mode 100644 robot_display/js/ros_scripts.js create mode 100644 robot_display/js/update_guis.js create mode 100644 robot_display/robot_display.html diff --git a/robot_display.html b/robot_display.html deleted file mode 100644 index e1713e2..0000000 --- a/robot_display.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - - - -
- -
- Example Pannel Heading -
- - -
- -
- - -
-
- No data recieved yet.
-
-
- -
- - - -
- N/A -
-
-
-
- - - - - -
-
- Camera Image -
-
-
- No Camera Image -
-
-
- - diff --git a/robot_display/js/ros_scripts.js b/robot_display/js/ros_scripts.js new file mode 100644 index 0000000..e6395fb --- /dev/null +++ b/robot_display/js/ros_scripts.js @@ -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) +}); diff --git a/robot_display/js/update_guis.js b/robot_display/js/update_guis.js new file mode 100644 index 0000000..9de9459 --- /dev/null +++ b/robot_display/js/update_guis.js @@ -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); diff --git a/robot_display/robot_display.html b/robot_display/robot_display.html new file mode 100644 index 0000000..4cba54d --- /dev/null +++ b/robot_display/robot_display.html @@ -0,0 +1,102 @@ + + +
+ +
+ Example using ROS messages +
+ + +
+
+
+
+ + + + + +
+
+
+
+
+ Recieved Message:
+ No message +
+
+
+
+ +
+ + + + + + + + + + +
+ +
+ Example Pannel Heading +
+ + +
+ + +
+
+ +
+
+
+
+ No data recieved yet.
+
+
+
+
+
+ + + + + +
+
+ Camera Image +
+
+
+ No Camera Image +
+
+
+ +