Files
old-lab_ui/index.html

158 lines
6.7 KiB
HTML

<!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';
document.getElementById("ConnectionButton").className = "btn btn-warning"
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 at:';
document.getElementById("ConnectionButton").className = "btn btn-success"
});
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</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" align="center">
<label id="ConnectionIPLabel" class="col-sm-3 control-label" for="inputWarning">Connection warning</label>
<div class="col-sm-6">
<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">
<label class="col-sm-2"> Battery Voltage: </label>
<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>