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

Now have web page pwrking on multiple devices

Browse Source
This commit is contained in:
GLEN TURNER (8GT6)
2015-05-20 17:48:29 -04:00
parent a665e2c5e9
commit e2afdcd38e
14 changed files with 4795 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
Pelican_GUI.html
View File

@@ -1,81 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://cdn.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script type="text/javascript" src="http://cdn.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
<script src="http://cdn.robotwebtools.org/roslibjs/current/roslib.js"></script>
<script type="text/javascript" type="text/javascript">
var ros = new ROSLIB.Ros();
// If there is an error on the backend, an 'error' emit will be emitted.
ros.on('error', function(error) {
document.getElementById('connecting').style.display = 'none';
document.getElementById('connected').style.display = 'none';
document.getElementById('closed').style.display = 'none';
document.getElementById('error').style.display = 'inline';
console.log(error);
});
// Find out exactly when we made a connection.
ros.on('connection', function() {
console.log('Connection made!');
// document.getElementById('connecting').style.display = 'none';
// document.getElementById('error').style.display = 'none';
// document.getElementById('closed').style.display = 'none';
// document.getElementById('connected').style.display = 'inline';
});
ros.on('close', function() {
console.log('Connection closed.');
document.getElementById('connecting').style.display = 'none';
document.getElementById('connected').style.display = 'none';
document.getElementById('closed').style.display = 'inline';
});
// Create a connection to the rosbridge WebSocket server.
ros.connect('ws://localhost:9090');
// Publishing a Topic
// ------------------
// First, we create a Topic object with details of the topic's name and message type.
var cmdVel = new ROSLIB.Topic({
ros : ros,
name : '/cmd_vel',
messageType : 'geometry_msgs/Twist'
});
// Then we create the payload to be published. The object we pass in to ros.Message matches the
// fields defined in the geometry_msgs/Twist.msg definition.
var twist = new ROSLIB.Message({
linear : {
x : 0.1,
y : 0.2,
z : 0.3
},
angular : {
x : -0.1,
y : -0.2,
z : -0.3
}
});
// And finally, publish.
cmdVel.publish(twist);
var listener = new ROSLIB.Topic({
ros : ros,
name : '/listener',
messageType : 'std_msgs/String'
});
listener.subscribe(function(message) {
console.log('Received message on ' + listener.name + ': ' + message.data);
listener.unsubscribe();
});
</script>
</head>
<body>
<h1>Simple roslib Example</h1>
<p>Check your Web Console for output.</p>
<button onclick="cmdVel.publish(twist)">Send Twist Command</button>
</body>
</html>

5
bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
bootstrap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
eventemitter2.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
include/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
include/bootstrap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
include/eventemitter2.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
include/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2302
include/roslib.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
include/roslib.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

155
index.html Normal file
View File

@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="eventemitter2.min.js"></script>
<script type="text/javascript" src="roslib.min.js"></script>
<!-- <link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> -->
<script src="roslib.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
ws://192.168.1.102:9090
var ros = new ROSLIB.Ros();
ros.connectionName = 'ws://192.168.1.102:9090';
// ros.connectionName = 'ws://localhost:9090';
// If there is an error on the backend, an 'error' emit will be emitted.
ros.on('error', function(error) {
document.getElementById("ConnectionIPForm").className = "form-group has-warning has-feedback";
document.getElementById("ConnectionIPInput").value = ros.connectionName;
document.getElementById("ConnectionIPLabel").innerHTML = 'No connection';
console.log(error);
});
// Find out exactly when we made a connection.
ros.on('connection', function() {
console.log('Connection made!');
document.getElementById("ConnectionIPForm").className = "form-group has-success has-feedback";
document.getElementById("ConnectionIPInput").value = ros.connectionName;
document.getElementById("ConnectionIPLabel").innerHTML = 'Connection made';
});
ros.on('close', function() {
console.log('Connection closed.');
});
// Create a connection to the rosbridge WebSocket server.
ros.connect(ros.connectionName);
function attemptConnection()
{
ros.connectionName = document.getElementById("ConnectionIPInput").value;
console.log('Connection = ' + ros.connectionName);
ros.connect(ros.connectionName);
}
var voltageListener = new ROSLIB.Topic({
ros : ros,
name : '/asctec/LL_STATUS',
messageType : '/asctec_msgs/LLStatus'
});
voltageListener.subscribe(function(message) {
updateVoltage(message.battery_voltage_1/1000);
// voltageListener.unsubscribe();
});
function updateVoltage(voltage)
{
var voltage_min = 9.5;
var voltage_max = 12.5;
var voltage_range = voltage_max - voltage_min;
var voltage_percentage = (voltage - voltage_min) / voltage_range * 100;
var voltage_string = "";
voltage_string = voltage_string.concat(voltage_percentage);
voltage_string = voltage_string.substring(0,4);
voltage_string = voltage_string.concat('%');
document.getElementById("VoltageDisplay").style.width = voltage_string;
document.getElementById("VoltageDisplay").innerHTML = voltage_string;
if (voltage_percentage < 50 && voltage_percentage > 25 ) {
document.getElementById("VoltageDisplay").className = "progress-bar progress-bar-warning"
}
else if ( voltage_percentage <= 25)
{
document.getElementById("VoltageDisplay").className = "progress-bar progress-bar-danger"
}
else
{
document.getElementById("VoltageDisplay").className = "progress-bar progress-bar-success"
}
}
window.setInterval(function(){
// ShowTime();
}, 100);
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Asctec Pelican CHANGED</h1>
</div>
<!-- <button onclick="testAlert('<strong>Danger!</strong> ')">test</button> -->
<div class="panel panel-default">
<div class="panel-body">
<form>
<div id="ConnectionIPForm" class="form-group has-warning has-feedback">
<label id="ConnectionIPLabel" class="col-sm-2 control-label" for="inputWarning">Connection warning</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ConnectionIPInput" value="No IP Address yet">
<script type="text/javascript">
document.getElementById("ConnectionIPInput").value = ros.connectionName;
</script>
<!-- <span class="glyphicon glyphicon-remove form-control-feedback"></span> -->
</div>
<div class="col-sm-1">
<button id="ConnectionButton" type="button" class="btn btn-warning" onclick=attemptConnection()>Connect</button>
</div>
</div>
</form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Pelican Status </div>
<div class="panel-body">
Battery Voltage:
<div class="progress">
<div id="VoltageDisplay" 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>
</html>

4
jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2302
roslib.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
roslib.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long