331 lines
14 KiB
HTML
331 lines
14 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" type="text/css" href="walkToolsStyle.css">
|
|
<link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.min.css">
|
|
<script src="jquery-2.1.4.min.js"></script>
|
|
<script src="jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
|
|
<script>
|
|
|
|
function loaded() {
|
|
|
|
var pathToAssets = '../assets/';
|
|
|
|
elScopeDisplayCanvas = document.getElementById("scope-display-canvas");
|
|
elPauseButton = document.getElementById("pause-button");
|
|
elScopeChannelOneValues = document.getElementById("scope-channel-one-values");
|
|
elScopeChannelTwoValues = document.getElementById("scope-channel-two-values");
|
|
elScopeChannelThreeValues = document.getElementById("scope-channel-three-values");
|
|
|
|
// scope stuff
|
|
var _paused = false;
|
|
var SCOPE_RESOLUTION = 595;
|
|
var _timeBase = 1;
|
|
var _channelOneGain = 1;
|
|
var _channelTwoGain = 1;
|
|
var _channelThreeGain = 1;
|
|
var _channelOneOffset = 0;
|
|
var _channelTwoOffset = 0;
|
|
var _channelThreeOffset = 0;
|
|
var _heightOverTwo = elScopeDisplayCanvas.height / 2;
|
|
|
|
var _channelOneData = [];
|
|
var _channelTwoData = [];
|
|
var _channelThreeData = [];
|
|
|
|
for (var i = 0; i < SCOPE_RESOLUTION; i++) {
|
|
_channelOneData.push(0);
|
|
_channelTwoData.push(0);
|
|
_channelThreeData.push(0);
|
|
};
|
|
var _chOneMin = Number.POSITIVE_INFINITY;
|
|
var _chOneMax = Number.NEGATIVE_INFINITY;
|
|
var _chTwoMin = Number.POSITIVE_INFINITY;
|
|
var _chTwoMax = Number.NEGATIVE_INFINITY;
|
|
var _chThreeMin = Number.POSITIVE_INFINITY;
|
|
var _chThreeMax = Number.NEGATIVE_INFINITY;
|
|
var _lastJoint = 'Hips';
|
|
var _lastTitle = 'Joint rotation data';
|
|
|
|
function gainSliderSliding(ui, id) {
|
|
switch (id) {
|
|
|
|
case 'channel-one-gain':
|
|
_channelOneGain = ui.value;
|
|
break;
|
|
|
|
case 'channel-two-gain':
|
|
_channelTwoGain = ui.value;
|
|
break;
|
|
|
|
case 'channel-three-gain':
|
|
_channelThreeGain = ui.value;
|
|
break;
|
|
}
|
|
}
|
|
|
|
function offsetSliderSliding(ui, id) {
|
|
switch (id) {
|
|
|
|
case 'channel-one-offset':
|
|
_channelOneOffset = -ui.value;
|
|
break;
|
|
|
|
case 'channel-two-offset':
|
|
_channelTwoOffset = -ui.value;
|
|
break;
|
|
|
|
case 'channel-three-offset':
|
|
_channelThreeOffset = -ui.value;
|
|
break;
|
|
}
|
|
}
|
|
|
|
function timeBaseSliderSliding(ui) {
|
|
_timeBase = ui.value;
|
|
}
|
|
|
|
function resetMinMax() {
|
|
_chOneMin = Number.POSITIVE_INFINITY;
|
|
_chOneMax = Number.NEGATIVE_INFINITY;
|
|
_chTwoMin = Number.POSITIVE_INFINITY;
|
|
_chTwoMax = Number.NEGATIVE_INFINITY;
|
|
_chThreeMin = Number.POSITIVE_INFINITY;
|
|
_chThreeMax = Number.NEGATIVE_INFINITY;
|
|
}
|
|
|
|
elPauseButton.addEventListener("click", function() {
|
|
if (_paused) {
|
|
_paused = false;
|
|
this.value = "Pause";
|
|
} else {
|
|
_paused = true;
|
|
this.value = "Resume";
|
|
}
|
|
});
|
|
|
|
// HTML 5 canvas stuff
|
|
var _displayMargin = 3;
|
|
var _context = elScopeDisplayCanvas.getContext('2d');
|
|
var _scopeBackgroundImage = new Image();
|
|
|
|
|
|
_scopeBackgroundImage.onload = function() {
|
|
_context.drawImage(_scopeBackgroundImage, 0, 0);
|
|
};
|
|
_scopeBackgroundImage.src = '../assets/walktools-overlay-images/walkTools-oscilloscope-panel.png';
|
|
|
|
|
|
// jQueryUI stuff
|
|
$(function() {
|
|
$( ".scope-offset-slider" ).slider({
|
|
min: -1000,
|
|
max: 1000,
|
|
value: 0,
|
|
step: 1,
|
|
orientation: "vertical",
|
|
slide: function(event, ui) {
|
|
var id = $(this).attr("id");
|
|
offsetSliderSliding(ui, id);
|
|
}
|
|
}),
|
|
|
|
$( ".scope-gain-slider" ).slider({
|
|
min: 0.001,
|
|
max: 100,
|
|
value: 1,
|
|
step: 0.001,
|
|
orientation: "vertical",
|
|
slide: function(event, ui) {
|
|
var id = $(this).attr("id");
|
|
gainSliderSliding(ui, id);
|
|
}
|
|
}),
|
|
|
|
$( "#scope-timebase-slider" ).slider({
|
|
min: 1,
|
|
max: 10,
|
|
value: 1,
|
|
step: 0.1,
|
|
orientation: "horizontal",
|
|
slide: function(event, ui) {
|
|
var id = $(this).attr("id");
|
|
timeBaseSliderSliding(ui, id);
|
|
}
|
|
})
|
|
});
|
|
|
|
|
|
if (window.EventBridge !== undefined) {
|
|
EventBridge.scriptEventReceived.connect(function(data) {
|
|
data = JSON.parse(data);
|
|
|
|
if (data.type === "updateScopeTrace") {
|
|
|
|
if (!_paused) {
|
|
_channelOneData.push(-data.ch1);
|
|
_channelOneData.shift();
|
|
_channelTwoData.push(-data.ch2);
|
|
_channelTwoData.shift();
|
|
_channelThreeData.push(-data.ch3);
|
|
_channelThreeData.shift();
|
|
}
|
|
}
|
|
|
|
if (data.type === "updateScopeData") {
|
|
|
|
if (!_paused) {
|
|
_channelOneData.push(-data.scopeDataPacket.ch1);
|
|
_channelOneData.shift();
|
|
_channelTwoData.push(-data.scopeDataPacket.ch2);
|
|
_channelTwoData.shift();
|
|
_channelThreeData.push(-data.scopeDataPacket.ch3);
|
|
_channelThreeData.shift();
|
|
}
|
|
}
|
|
|
|
if (data.type === "updateScopeTrace" || data.type === "updateScopeData") {
|
|
|
|
_context.clearRect(0, 0, elScopeDisplayCanvas.width, elScopeDisplayCanvas.height);
|
|
_context.drawImage(_scopeBackgroundImage, 0, 0);
|
|
if (data.type === "updateScopeData") {
|
|
if (data.scopeDataPacket.joint !== _lastJoint || data.scopeDataPacket.title !== _lastTitle) {
|
|
_lastJoint = data.scopeDataPacket.joint;
|
|
_lastTitle = data.scopeDataPacket.title;
|
|
resetMinMax();
|
|
}
|
|
// update joint values (are stored negative because of y-down screen coords)
|
|
var DP = 2;
|
|
var channel1 = -_channelOneData[SCOPE_RESOLUTION - 1];
|
|
var channel2 = -_channelTwoData[SCOPE_RESOLUTION - 1];
|
|
var channel3 = -_channelThreeData[SCOPE_RESOLUTION - 1];
|
|
|
|
if (channel1 > _chOneMax) {
|
|
_chOneMax = channel1;
|
|
}
|
|
if (channel1 < _chOneMin) {
|
|
_chOneMin = channel1;
|
|
}
|
|
if (channel2 > _chTwoMax) {
|
|
_chTwoMax = channel2;
|
|
}
|
|
if (channel2 < _chTwoMin) {
|
|
_chTwoMin = channel2;
|
|
}
|
|
if (channel3 > _chThreeMax) {
|
|
_chThreeMax = channel3;
|
|
}
|
|
if (channel3 < _chThreeMin) {
|
|
_chThreeMin = channel3;
|
|
}
|
|
elScopeChannelOneValues.innerHTML = _chOneMax.toFixed(DP)+" : "+
|
|
channel1.toFixed(DP)+" : "+
|
|
_chOneMin.toFixed(DP)
|
|
+" ("+(_chOneMax - _chOneMin).toFixed(DP)+")";
|
|
elScopeChannelTwoValues.innerHTML = _chTwoMax.toFixed(DP)+" : "+
|
|
channel2.toFixed(DP)+" : "+
|
|
_chTwoMin.toFixed(DP)
|
|
+" ("+(_chTwoMax - _chTwoMin).toFixed(DP)+")";
|
|
elScopeChannelThreeValues.innerHTML = _chThreeMax.toFixed(DP)+" : "+
|
|
channel3.toFixed(DP)+" : "+
|
|
_chThreeMin.toFixed(DP)
|
|
+" ("+(_chThreeMax - _chThreeMin).toFixed(DP)+")";
|
|
// update scope overlay info
|
|
_context.font = "14px Arial";
|
|
_context.fillStyle = "gray";
|
|
_context.textAlign = "right";
|
|
var traceInfo = data.scopeDataPacket.title;
|
|
_context.fillText(traceInfo, 580, 30);
|
|
traceInfo = 'Joint: '+data.scopeDataPacket.joint;
|
|
_context.fillText(traceInfo, 580, 50);
|
|
traceInfo = 'IK chain: ' + data.scopeDataPacket.iKChain;
|
|
_context.fillText(traceInfo, 580, 70);
|
|
traceInfo = data.scopeDataPacket.metaDataLabel+
|
|
': '+data.scopeDataPacket.metaData;
|
|
_context.fillText(traceInfo, 580, 90);
|
|
}
|
|
_context.beginPath();
|
|
_context.moveTo(_displayMargin,
|
|
_heightOverTwo + _channelOneOffset + _channelOneGain * _channelOneData[0]);
|
|
for (var i = 0 ; i < SCOPE_RESOLUTION ; i++) {
|
|
_context.lineTo(i * _timeBase + _displayMargin,
|
|
_heightOverTwo + _channelOneOffset +
|
|
_channelOneGain * _channelOneData[i]);
|
|
}
|
|
_context.lineJoin = 'round';
|
|
_context.lineWidth = 1;
|
|
_context.strokeStyle = 'red';
|
|
_context.stroke();
|
|
_context.beginPath();
|
|
_context.moveTo(_displayMargin,
|
|
_heightOverTwo + _channelTwoOffset + _channelTwoGain * _channelTwoData[0]);
|
|
for (var i = 0 ; i < SCOPE_RESOLUTION ; i++) {
|
|
_context.lineTo(i * _timeBase + _displayMargin,
|
|
_heightOverTwo + _channelTwoOffset +
|
|
_channelTwoGain * _channelTwoData[i]);
|
|
}
|
|
_context.strokeStyle = 'green';
|
|
_context.stroke();
|
|
_context.beginPath();
|
|
_context.moveTo(_displayMargin,
|
|
_heightOverTwo + _channelThreeOffset + _channelThreeGain * _channelThreeData[0]);
|
|
for (var i = 0 ; i < SCOPE_RESOLUTION ; i++) {
|
|
_context.lineTo(i * _timeBase + _displayMargin,
|
|
_heightOverTwo + _channelThreeOffset +
|
|
_channelThreeGain * _channelThreeData[i]);
|
|
}
|
|
_context.strokeStyle = 'blue';
|
|
_context.stroke();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload='loaded();'>
|
|
|
|
<div id="scope-controls">
|
|
<div class="scope-slider-container">
|
|
<label>Channel 1 Offset</label>
|
|
<div name="channel-one-offset" id="channel-one-offset" class="scope-offset-slider"></div>
|
|
</div>
|
|
<div class="scope-slider-container">
|
|
<label>Channel 1 Gain</label>
|
|
<div name="channel-one-gain" id="channel-one-gain" class="scope-gain-slider"></div>
|
|
</div>
|
|
<div class="scope-slider-container">
|
|
<label>Channel 2 Offset</label>
|
|
<div name="channel-two-offset" id="channel-two-offset" class="scope-offset-slider"></div>
|
|
</div>
|
|
<div class="scope-slider-container">
|
|
<label>Channel 2 Gain</label>
|
|
<div name="channel-two-gain" id="channel-two-gain" class="scope-gain-slider"></div>
|
|
</div>
|
|
<div class="scope-slider-container">
|
|
<label>Channel 3 Offset</label>
|
|
<div name="channel-three-offset" id="channel-three-offset" class="scope-offset-slider"></div>
|
|
</div>
|
|
<div class="scope-slider-container">
|
|
<label>Channel 3 Gain</label>
|
|
<div name="channel-three-gain" id="channel-three-gain" class="scope-gain-slider"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<canvas id="scope-display-canvas" width="600" height="600"></canvas>
|
|
|
|
<div id="scope-bottom-panel">
|
|
<div name="timebase-slider-container" id="scope-timebase-slider-container">
|
|
<label>Timebase</label>
|
|
<div name="timebase-slider" id="scope-timebase-slider"></div>
|
|
</div>
|
|
<div class="button-group">
|
|
<input type="button" id="pause-button" class="scope-button" value="Pause"></button>
|
|
</div>
|
|
<div class="scope-values">
|
|
<div id="scope-channel-one-values">Channel 1</div>
|
|
<div id="scope-channel-two-values">Channel 2</div>
|
|
<div id="scope-channel-three-values">Channel 3</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|