虚拟飞控双遥杆的APP界面编程实现

1 缘起

四轴飞行器，添加WIFI模块，用移动手机模拟替代操控遥杆。

2 变通运用nipple库

移动手机，虚拟飞控双遥杆，自然选用成熟的nipple.js库，应用APP界面主导的js库是jQuery及其相关UI如JQM，nipple嵌入其中应用。遥杆界面出现了，但操控不对应，尤其是上、左方向，几乎相反。

JS库冲突，顶层的JQM规定屏幕左上角为坐标原点，nipple只能被动继承。

采用常规冲突解决的最优嵌入JS库引用解决如下：

JS库冲突，顶层的JQM规定屏幕左上角为坐标原点，nipple只能被动继承。

采用常规冲突解决的最优嵌入JS库引用解决如下：

	jQuery(function($){
      var npL = nipplejs.create({
        zone: document.getElementById("left"),
        mode: "static",
        position: { left: "25%", top: "50%" },
        color: "green",
        size: 200,
        restJoystick: { y: false }
      });
      var npR = nipplejs.create({
        zone: document.getElementById("right"),
        mode: "static",
        position: { left: "75%", top: "50%" },
        color: "red",
        size: 200,
        restJoystick: false
      });
	});

几乎不起作用。

把相关页面展现标签提出JQM应用外，JS代码不作调整，nipple恢复功能正常。

不足之处：nipple外圆外不能启动触控操控，其它功能都如独立运行时一样。

APP切换到非遥控页面的，关掉遥控所在DIV域，即不使其显示即可。

	  function show() {
		var t = document.getElementById("ctnr");
		t.style.display = "none";//"block";
	  }

3 油门与旋转复用遥杆的模拟实现

3.1 操控不归零的实现

初始化时设置操控终止，即手指抬起时，不复位即可

设置restJoystack: {y: false}，不能实现操控不归零，虽然restJoyStack: false与restJoyStack: {x: false, y: false}等价，但restJoyStack: {x: false, y: false}，也不能实现操控不归零，深入阅读nipple.js文件，它并没有相关的等价功能处理，即仅支持restJoyStack: false或restJoyStack: true。

3.2 旋转归零与油门保持的共存实现

初始化时，设置restJoyStack: {x: true, y: false}或lockY: true，不能同时实现操控的横向旋转归零与纵向的油门保持，因为原文件不支持，只能通过修改nipple.js原文件一条途径了，而且，不能在移动中消除[移动中保持是必须的功能]，只能在移动结束时“做文章”。

在nipple.js文件中，找到Collection.prototype.processOnMove和Collection.prototype.processOnEnd两个函数，将Collection.prototype.processOnMove中的全部执行语句添加到Collection.prototype.processOnEnd的开始部分，然后修改添加部分，让if (opts.lockY) xPosition = 0无条件执行，就可以了。

4 操控信息的输出控制

输出信息，定义在nipple.js原文件的Collection.prototype.processOnMove函数的toSend数据块中，项目需要的是不常用的原始raw的x、y值，而不是常用的distance和angle，尽管x和y值可以通过distance和angle计算，但不如让其直接输出更加便捷高效。

nipple源src中有raw的定义和toSend输出，打包应用nipple.js文件中没有，在此移植过来raw的定义，并在toSend展开进行具体赋值[nipple源src中toSend输出并没有做具体赋值]。

4.1 nipple.js中raw信息的添加

由于前面在Collection.prototype.processOnEnd中移植了Collection.prototype.processOnMove的执行代码，所以Collection.prototype.processOnEnd函数也要做相应添加和修改。

4.2 nipple输信息的获取及其指示

在且只能在onMove事件中获取，然后在添加的2个JQM页面label标签中展示。

4.3 页面展示效果

5 背景指示图片的添加

看到nipple官网有背景指示图片，觉得不错，想添加一个。

 找到nipple.js原文件中构造页面标签的函数Nipple.prototype.buildEl，做如下添加和修改：

// Build the dom element of the Nipple instance.
Nipple.prototype.buildEl = function (options) {
    this.ui = {};

    if (this.options.dataOnly) {
        return this;
    }

    this.ui.el = document.createElement('div');
    this.ui.back = document.createElement('div');
    this.ui.front = document.createElement('div');

    this.ui.el.className = 'nipple collection_' + this.collection.id;
    this.ui.back.className = 'back';
    this.ui.front.className = 'front';

    this.ui.el.setAttribute('id', 'nipple_' + this.collection.id +
        '_' + this.id);

    this.ui.el.appendChild(this.ui.back);
	//this.ui.back.style.backgroundImage="url('./img/jsBgd.png')";
	this.ui.back.setAttribute('style', "background-image: url('./img/jsBgd.png')");
	//this.ui.back.style.background = "red";
    this.ui.el.appendChild(this.ui.front);
	//this.ui.front.style.background = "#DDDDDD";
    return this;
};

代码中注释的各行代码，是测试，可以改变背景色，就是添加不上背景，语法和图片位置也不错，也没有找到后面有代码可以覆盖相关修改的，花费很长时间，无果。留作以后探讨了。

6 初始油门位置的设置

在nipple.js中添加defaults的options的centerInit定义：

并在nipple.js创建Nipple时指定变量nipple的options的frontPosition.y=centerInit：

初始化时对油门所在遥杆设置centerInit为可遥控半径值，其它类型遥杆为0：

 初始运行效果图：

7 自适屏幕尺寸

 

8 飞控信息形成与输出

油门throttle，偏航yaw，俯仰pitch，横滚roll。1000~2000范围。起点：throttle最低位，其它为中间平衡点。再添加一个航行参数指示标签，在各个nipple中的onMove事件中，完成转换运算并通过标签指示：

 还要注意对nipple.js文件的Collection.prototype.processOnEnd函数添加部分做相应调整，因为各遥杆及其各向有不同的回零与否之要求：

 最终运行的整体效果图：

 特别注意控制的回零，是否达到应用需要目标。