Add control sticks for MSP Rx, suitable for debugging CF without a Tx
Nicholas Sherlock
9 years ago
parent
fb46711659
commit
ef0c637877
@ -0,0 +1,109 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, sans-serif;
|
||||
font-size: 12px;
|
||||
color: #303030;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.control-gimbals {
|
||||
/* A generous padding around the window edges ensures that we continue to receive mousemove events (since
|
||||
* cursor stays in the window for longer)
|
||||
*/
|
||||
padding:25px;
|
||||
padding-bottom:0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.control-gimbal {
|
||||
position:relative;
|
||||
width:120px;
|
||||
height:120px;
|
||||
background-color:#eee;
|
||||
margin-left:1em;
|
||||
margin-right:1em;
|
||||
margin-bottom:2em;
|
||||
display:inline-block;
|
||||
border-radius:5px;
|
||||
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.crosshair {
|
||||
display:block;
|
||||
position:absolute;
|
||||
background-color:#ddd;
|
||||
}
|
||||
|
||||
.crosshair-vert {
|
||||
width:1px;
|
||||
height:100%;
|
||||
left:50%;
|
||||
}
|
||||
|
||||
.crosshair-horz {
|
||||
height:1px;
|
||||
width:100%;
|
||||
top:50%;
|
||||
}
|
||||
|
||||
.gimbal-label {
|
||||
display:block;
|
||||
position:absolute;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.gimbal-label-horz {
|
||||
top:calc(100% + 0.5em);
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.gimbal-label-vert {
|
||||
transform:rotate(-90deg);
|
||||
/*transform-origin:0% 100%;*/
|
||||
top:calc(50% - 0.5em);
|
||||
width:100%;
|
||||
left:calc(-50% - 1em);
|
||||
}
|
||||
|
||||
.control-stick {
|
||||
background-color:rgba(255,50,50,1.0);
|
||||
width:20px;
|
||||
height:20px;
|
||||
margin-left:-10px;
|
||||
margin-top:-10px;
|
||||
display:block;
|
||||
border-radius:100%;
|
||||
position:absolute;
|
||||
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.control-slider {
|
||||
margin:20px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
left: calc(100% + 24px);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.control-slider .slider {
|
||||
margin-left:50px;
|
||||
margin-right:50px;
|
||||
}
|
||||
|
||||
.slider-label {
|
||||
position:absolute;
|
||||
text-align:right;
|
||||
width:40px;
|
||||
left:-65px;
|
||||
}
|
||||
|
||||
.button-enable {
|
||||
padding:0.5em;
|
||||
font-size:110%;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
display:block;
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="/js/libraries/jquery-2.1.3.min.js"></script>
|
||||
<script type="text/javascript" src="/js/libraries/jquery-ui-1.11.2.min.js"></script>
|
||||
<script type="text/javascript" src="/js/libraries/jquery.nouislider.all.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="receiver_msp.js"></script>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="/js/libraries/jquery.nouislider.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="/js/libraries/jquery.nouislider.pips.min.css">
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="receiver_msp.css" media="all" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="control-gimbals">
|
||||
<div class="control-gimbal left">
|
||||
<span class="gimbal-label gimbal-label-vert"></span>
|
||||
<span class="gimbal-label gimbal-label-horz"></span>
|
||||
|
||||
<span class="crosshair crosshair-vert"></span>
|
||||
<span class="crosshair crosshair-horz"></span>
|
||||
<div class="control-stick">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-gimbal right">
|
||||
<span class="gimbal-label gimbal-label-vert"></span>
|
||||
<span class="gimbal-label gimbal-label-horz"></span>
|
||||
|
||||
<span class="crosshair crosshair-vert"></span>
|
||||
<span class="crosshair crosshair-horz"></span>
|
||||
<div class="control-stick">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-sliders">
|
||||
<div class="control-slider">
|
||||
<div class="slider">
|
||||
<span class="slider-label"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-slider">
|
||||
<div class="slider">
|
||||
<span class="slider-label"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-slider">
|
||||
<div class="slider">
|
||||
<span class="slider-label"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-slider">
|
||||
<div class="slider">
|
||||
<span class="slider-label"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warning">
|
||||
<p>
|
||||
These sticks allow Cleanflight to be armed and tested without a transmitter or receiver being
|
||||
present. However, <strong>this feature is not intended for flight and propellers must not be attached.</strong>
|
||||
</p>
|
||||
<p>
|
||||
This feature does not guarantee reliable control of your craft. <strong>Serious injury is likely to
|
||||
result if propellers are left on.</strong>
|
||||
</p>
|
||||
<button class="button-enable" type="button">Enable controls</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,182 @@
|
||||
"use strict";
|
||||
|
||||
var
|
||||
CHANNEL_MIN_VALUE = 1000,
|
||||
CHANNEL_MID_VALUE = 1500,
|
||||
CHANNEL_MAX_VALUE = 2000,
|
||||
|
||||
// What's the index of each channel in the MSP channel list?
|
||||
channelMSPIndexes = {
|
||||
roll: 0,
|
||||
pitch: 1,
|
||||
yaw: 2,
|
||||
throttle: 3,
|
||||
aux1: 4,
|
||||
aux2: 5,
|
||||
aux3: 6,
|
||||
aux4: 7,
|
||||
},
|
||||
|
||||
// Set reasonable initial stick positions (Mode 2)
|
||||
stickValues = {
|
||||
throttle: CHANNEL_MIN_VALUE,
|
||||
pitch: CHANNEL_MID_VALUE,
|
||||
roll: CHANNEL_MID_VALUE,
|
||||
yaw: CHANNEL_MID_VALUE,
|
||||
aux1: CHANNEL_MIN_VALUE,
|
||||
aux2: CHANNEL_MIN_VALUE,
|
||||
aux3: CHANNEL_MIN_VALUE,
|
||||
aux4: CHANNEL_MIN_VALUE
|
||||
},
|
||||
|
||||
// First the vertical axis, then the horizontal:
|
||||
gimbals = [
|
||||
["throttle", "yaw"],
|
||||
["pitch", "roll"],
|
||||
],
|
||||
|
||||
gimbalElems,
|
||||
sliderElems,
|
||||
|
||||
enableTX = false;
|
||||
|
||||
function transmitChannels() {
|
||||
var
|
||||
channelValues = [0, 0, 0, 0, 0, 0, 0, 0];
|
||||
|
||||
if (!enableTX) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (var stickName in stickValues) {
|
||||
channelValues[channelMSPIndexes[stickName]] = stickValues[stickName];
|
||||
}
|
||||
|
||||
// Callback given to us by the window creator so we can have it send data over MSP for us:
|
||||
window.setRawRx(channelValues);
|
||||
}
|
||||
|
||||
function stickPortionToChannelValue(portion) {
|
||||
portion = Math.min(Math.max(portion, 0.0), 1.0);
|
||||
|
||||
return Math.round(portion * (CHANNEL_MAX_VALUE - CHANNEL_MIN_VALUE) + CHANNEL_MIN_VALUE);
|
||||
}
|
||||
|
||||
function channelValueToStickPortion(channel) {
|
||||
return (channel - CHANNEL_MIN_VALUE) / (CHANNEL_MAX_VALUE - CHANNEL_MIN_VALUE);
|
||||
}
|
||||
|
||||
function updateControlPositions() {
|
||||
for (var stickName in stickValues) {
|
||||
var
|
||||
stickValue = stickValues[stickName];
|
||||
|
||||
// Look for the gimbal which corresponds to this stick name
|
||||
for (var gimbalIndex in gimbals) {
|
||||
var
|
||||
gimbal = gimbals[gimbalIndex],
|
||||
gimbalElem = gimbalElems.get(gimbalIndex),
|
||||
gimbalSize = $(gimbalElem).width(),
|
||||
stickElem = $(".control-stick", gimbalElem);
|
||||
|
||||
if (gimbal[0] == stickName) {
|
||||
stickElem.css('top', (1.0 - channelValueToStickPortion(stickValue)) * gimbalSize + "px");
|
||||
break;
|
||||
} else if (gimbal[1] == stickName) {
|
||||
stickElem.css('left', channelValueToStickPortion(stickValue) * gimbalSize + "px");
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleGimbalMouseDrag(e) {
|
||||
var
|
||||
gimbal = $(gimbalElems.get(e.data.gimbalIndex)),
|
||||
gimbalOffset = gimbal.offset(),
|
||||
gimbalSize = gimbal.width();
|
||||
|
||||
stickValues[gimbals[e.data.gimbalIndex][0]] = stickPortionToChannelValue(1.0 - (e.pageY - gimbalOffset.top) / gimbalSize);
|
||||
stickValues[gimbals[e.data.gimbalIndex][1]] = stickPortionToChannelValue((e.pageX - gimbalOffset.left) / gimbalSize);
|
||||
|
||||
updateControlPositions();
|
||||
}
|
||||
|
||||
function localizeAxisNames() {
|
||||
for (var gimbalIndex in gimbals) {
|
||||
var
|
||||
gimbal = gimbalElems.get(gimbalIndex);
|
||||
|
||||
$(".gimbal-label-vert", gimbal).text(chrome.i18n.getMessage("controlAxis" + gimbals[gimbalIndex][0]));
|
||||
$(".gimbal-label-horz", gimbal).text(chrome.i18n.getMessage("controlAxis" + gimbals[gimbalIndex][1]));
|
||||
}
|
||||
|
||||
for (var sliderIndex = 0; sliderIndex < 4; sliderIndex++) {
|
||||
$(".slider-label", sliderElems.get(sliderIndex)).text(chrome.i18n.getMessage("controlAxisAux" + (sliderIndex + 1)));
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$(".button-enable").click(function() {
|
||||
var
|
||||
shrinkHeight = $(".warning").height();
|
||||
|
||||
$(".warning").slideUp("short", function() {
|
||||
chrome.app.window.current().innerBounds.minHeight -= shrinkHeight;
|
||||
chrome.app.window.current().innerBounds.height -= shrinkHeight;
|
||||
chrome.app.window.current().innerBounds.maxHeight -= shrinkHeight;
|
||||
});
|
||||
|
||||
enableTX = true;
|
||||
});
|
||||
|
||||
gimbalElems = $(".control-gimbal");
|
||||
sliderElems = $(".control-slider");
|
||||
|
||||
gimbalElems.each(function(gimbalIndex) {
|
||||
$(this).on('mousedown', {gimbalIndex: gimbalIndex}, function(e) {
|
||||
if (e.which == 1) { // Only move sticks on left mouse button
|
||||
handleGimbalMouseDrag(e);
|
||||
|
||||
$(window).on('mousemove', {gimbalIndex: gimbalIndex}, handleGimbalMouseDrag);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(".slider", sliderElems).each(function(sliderIndex) {
|
||||
var
|
||||
initialValue = stickValues["aux" + (sliderIndex + 1)];
|
||||
|
||||
$(this)
|
||||
.noUiSlider({
|
||||
start: initialValue,
|
||||
range: {
|
||||
min: CHANNEL_MIN_VALUE,
|
||||
max: CHANNEL_MAX_VALUE
|
||||
}
|
||||
}).on('slide change set', function(e, value) {
|
||||
value = Math.round(parseFloat(value));
|
||||
|
||||
stickValues["aux" + (sliderIndex + 1)] = value;
|
||||
|
||||
$(".tooltip", this).text(value);
|
||||
});
|
||||
|
||||
$(this).append('<div class="tooltip"></div>');
|
||||
|
||||
$(".tooltip", this).text(initialValue);
|
||||
});
|
||||
|
||||
/*
|
||||
* Mouseup handler needs to be bound to the window in order to receive mouseup if mouse leaves window.
|
||||
*/
|
||||
$(window).mouseup(function(e) {
|
||||
$(this).off('mousemove', handleGimbalMouseDrag);
|
||||
});
|
||||
|
||||
localizeAxisNames();
|
||||
|
||||
updateControlPositions();
|
||||
|
||||
setInterval(transmitChannels, 100);
|
||||
});
|
||||
Loading…
Reference in New Issue