Running the GUI - AD-EYE/AD-EYE_Core GitHub Wiki
Launch the rosbridge server:
In a new terminal
roslaunch adeye_gui websocket.launch
rosbridge_websocket node will start on the terminal:
[INFO] [15611647574.1365610]: Rosbridge WebSocket server started on port 9090
Launch the web video server:
In a new terminal
rosrun web_video_server web_video_server
web video server node will start on the terminal:
[ INFO] [1597915696.053120868]: Waiting For connections on 0.0.0.0:8080
Launch the GUI(webpage):
In order to launch webpage, get in the directory where the html page is and then open it using a web browser.
Once the simulation starts running, refresh the page to see the output.
HTML file:
~/AD-EYE_Core/AD-EYE/ROS_Packages/src/GUI_server/adeye_gui/gui/gui.html
About the Webpage: The gui folder consists of three major files - gui.html, gui.css, gui.js.
gui.js Connection with ros, subscribing and publishing the topics for messages.
Connection with ros :
var ros = new ROSLIB.Ros({
url : 'ws://localhost:9090'
});
ros.on('connection', function() {
document.getElementById("status").innerHTML = "Connected";
});
ros.on('error', function(error) {
document.getElementById("status").innerHTML = "Error";
});
ros.on('close', function() {
document.getElementById("status").innerHTML = "Closed";
});
Subscribe to a topic :
var vel_listener = new ROSLIB.Topic({
ros : ros,
name : '/vehicle_cmd',
messageType : 'autoware_msgs/VehicleCmd'
});
//subscribing to the topic
vel_listener.subscribe(function(message) {
--------------------
---------------------
---------------------
});
Publish a topic :
var faultToggleOn = new ROSLIB.Topic({
ros : ros,
name : '/fault',
messageType : 'std_msgs/Int32'
});
var fautOn = new ROSLIB.Message({
data : 1
});
faultToggleOn.publish(faultOn);
gui.html Displaying card with various topics.
<!-- card for tracked objects -->
<div class="col-md-4 col-sm-12">
<div class="card">
<div class="bcontainer">
<div draggable="true" class="box">
<h2 class="text-center">Tracked Objects</h2>
<p>Tracked object: <span id="track"></span></p>
<p>X: <span id="x"></span></p>
<p>Y: <span id="y"></span></p>
<p>Z: <span id="z"></span></p>
</div>
</div>
</div>
</div>
gui.css Styling the buttons and webpage. Various classes with respective properties are defined for buttons, gauge, box, etc.
.ratingBox{
margin: 0 auto;
width: 24px;
height: 24px;
background-color: #F00;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 9px, #3F8CFF 0 2px 14px;}