首页/课程/北京石油化工学院课程/抬起唤醒

抬起唤醒

教学目标及方法

通过手机加速度传感器获取角度，抬起手机控制一盏灯

主要内容

建立项目

建立一个新的文件夹，项目目录选择该文件。将第四堂课文件拷贝到现在的文件夹，项目配置文件project.config.json除外。

如何获取抬起状态

抬起其实是角度变化，而小程序API并没有角度值，所以我们需要将加速度转换为角度。angle

文件里面就是加速度转换角速度方法。

小程序代码实现

定时检测抬起状态，判断角度变化超过一定范围认为触发弹框，从而控制灯依次开关。

WXML文件

将Button修改为文本提示框。

<view class='title'>
  <text>mCookie-BLE摇一摇开灯</text>
  <view class="line"></view>
</view>
<view class='image-H'>
  <image class='userinfo-avatar' src='../bleLED/snm.jpg'></image>
</view>
<view class='wx_frame'>
  <text class='wx_text'>放下再抬起触发一次</text>
</view>

WXSS文件

增加文本框的样式

.title {
  color: #731496;
  text-align: center;
  margin-top: 20px;
}

.line {
  margin-top: 20px;
  width: 100%;
  height: 1rpx;
  background: #731496;
}

.image-H {
  text-align: center;
  margin-top: 110px;
}

.userinfo-avatar {
  width: 166rpx;
  height: 166rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.wx_frame {
  margin-top: 156px;
  height: 36px;
  width: 100%;
  background: #fff;
  border: 1px solid #dadada;
  padding-top:8px;
  text-align: center;
}

.wx_text {
  font-size: 15px;
  color: #555;
}

获取角度

将附件中的angle.js放入utils文件夹中。

angle.js里写了角度API方法，输入3个轴的加速度，返回某个方向的角度。

getAngle: function (x, y, z, dir)

x：x轴加速度

y：y轴加速度

z：z轴加速度

dir：指定返回某个方向角度，0为z轴，1为x轴，2为y轴

如返回y轴角度方法：

getAngle(res.x, res.y, res.z, 2)

逻辑程序

导入angle.js文件

import bleComm from '../utils/bleComm.js';
import angle from '../utils/angle.js';

上堂课按钮的sendData函数可以全部删除。

因为抬起的方向是y轴，定时1秒计算y轴角度。在onLoad函数中先关闭蓝牙连接，检测角度数据。

  onLoad: function (options) {
    // wx.showLoading({
    //   title: '靠近连接',
    //   mask: true
    // })
    // bleComm.connectDevice().then(res => {
    //   wx.showToast({
    //     title: '蓝牙连接成功',
    //     icon: 'success',
    //     duration: 300
    //   })
    // });

    var nowTime = new Date().getTime();//记录当前时间
    if (nowTime - lastTime > 1000) {   //时间超过1秒
      wx.onAccelerometerChange(function (res) {
        var angley = angle.getAngle(res.x, res.y, res.z, 2);
        console.log(angley)
      })
      lastTime = nowTime; //记录当前时间
    }
  },

编译后预览到手机上，打开手机中的性能调试窗口，可以看到角度数据。

根据调试出的角度，选择一个合适数据，这里选择-60被认为抬起。用户根据自己的习惯调整。

同时加上角度判断。

onLoad: function (options) {
    // wx.showLoading({
    //   title: '靠近连接',
    //   mask: true
    // })
    // bleComm.connectDevice().then(res => {
    //   wx.showToast({
    //     title: '蓝牙连接成功',
    //     icon: 'success',
    //     duration: 300
    //   })
    // });

    var nowTime = new Date().getTime();//记录当前时间
    if (nowTime - lastTime > 1000) {   //时间超过1秒
      wx.onAccelerometerChange(function (res) {
        var angley = angle.getAngle(res.x, res.y, res.z, 2);
        console.log(angley)
        if (angley < -60 && !runSta) {
          wx.showModal({//弹出选择框，选择不同消息发送不同指令，控制灯的开关
            title: 'Welcome',
            content: 'LiBin请选择!',
            cancelText: '关灯',
            confirmText: '开灯',
            success: function (res) {
              if (res.confirm) {
                console.log('开灯')
                bleComm.writeValue("ON");
              } else if (res.cancel) {
                console.log('关灯')
                bleComm.writeValue("OFF");
              }
            }
          })
          wx.stopAccelerometer();
          runSta = true;
        }
        else if (angley > -10) {
          runSta = false;
          wx.stopAccelerometer();
        }
      })
      lastTime = nowTime; //记录当前时间
    }
  },

同时顶部加上抬起放下状态变量。runSta用来存储状态，执行完一次后，runSta值为真，当角度小于-60时不会再弹框，直到角度大于-10度时（放平）runSta值为假，确保抬起一次只控制一次。

var lastTime = 0;//此变量用来记录上次摇动的时间
var runSta;//记录抬起、放下状态

最后把蓝牙连接打开。

完整js逻辑代码。

import bleComm from '../utils/bleComm.js';
import angle from '../utils/angle.js';

var msg;
var lastTime = 0;//此变量用来记录上次摇动的时间
var runSta;

Page({
  onUnload: function () {
    bleComm.disConnect();
  },
  onHide: function () {
    bleComm.disConnect();
  },

  onLoad: function (options) {
    wx.showLoading({
      title: '靠近连接',
      mask: true
    })
    bleComm.connectDevice().then(res => {
      wx.showToast({
        title: '蓝牙连接成功',
        icon: 'success',
        duration: 300
      })
    });

    var nowTime = new Date().getTime();//记录当前时间
    if (nowTime - lastTime > 1000) {   //时间超过1秒
      wx.onAccelerometerChange(function (res) {
        var angley = angle.getAngle(res.x, res.y, res.z, 2);
        console.log(angley)
        if (angley < -60 && !runSta) {
          wx.showModal({
            title: 'Welcome',
            content: 'LiBin请选择!',
            cancelText: '关灯',
            confirmText: '开灯',
            success: function (res) {
              if (res.confirm) {
                console.log('开灯')
                bleComm.writeValue("1");
              } else if (res.cancel) {
                console.log('关灯')
                bleComm.writeValue("0");
              }
            }
          })
          wx.stopAccelerometer();
          runSta = true;
        }
        else if (angley > -10) {
          runSta = false;
          wx.stopAccelerometer();
        }
      })
      lastTime = nowTime; //记录当前时间
    }
  },

})

测试

预览小程序蓝牙连接成功抬起即可弹出对话框关灯或开灯。

END

所需硬件

核心模块 MC

传感器接口板 MC

蓝牙通信模块 MC

代码展示

暂无数据！

附件下载

资料展示
ArduinoColorLED_ONOFF.zip
angle.zip

授课教师

杨立斌
美科

问答专区

暂无数据！

杨立斌高级工程师

解惑

课时信息

创建时间:2017/12/22

课程表

佳作推荐

智能唤醒器

智能唤醒器

北服-用微风唤醒你的睡眠

北服-用微风唤醒你的睡眠

北服-早起与太阳同行

北服-早起与太阳同行

北服-灯光唤醒闹钟

北服-灯光唤醒闹钟

爱吃萝卜爱吃菜

课程推荐

微信小程序设计

微信小程序设计

问天鼓美科创想学院--演示

上海杉达创新制造实训营

上海杉达创新制造实训营

刘珂上海杉达学院

游戏交互设计2018

游戏交互设计2018

美科创新教育研究院清华大学

北京石油化工学院课程

北京石油化工学院课程

美科创新教育研究院北京石油化工学院