长按效果

pages/index/index.js

@@ -3,11 +3,12 @@
 const getBle =  require("../../utils/ble");
 const handle = require("../../utils/handle");
 const sleep = require("../../utils/sleep");
+const TimeClock = require('../../utils/timer');
 const app = getApp();
 const ble = getBle();
 
 let services = [];
-
+const timeClock = new TimeClock();
 const connectStateMap = {
   0: {text:'未连接',color:"red"},
   1:  {text:'扫描中',color:"greenYellow"},
@@ -90,12 +91,28 @@ Page({
     motto: 'Hello World',
     userInfo: {},
     hasUserInfo: false,
+    shutterBtnY1: 0,
+    isHolder: false,
+    time_minute: 0,// 分
+    time_second: 0,// 秒
+    time_ms: 0,// 毫秒
     canIUse: wx.canIUse('button.open-type.getUserInfo'),
     canIUseGetUserProfile: false,
     canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
   },
   async onShow(){
+    timeClock.setHook((msNum)=>{
+      console.log(msNum);
+      let res = timeClock.parse(msNum)
+      console.log(res);
+      this.setData({
+        time_minute:res.minute,
+        time_second:res.second,
+        time_ms:res.ms,
+      })
+    });
     // 初始化蓝牙
+    
     try {
       console.log("init ble");
       await ble.initBle();
@@ -124,7 +141,8 @@ Page({
   async holdFoucus(){
     console.log("发送对焦命令");
   },
-  async shutterHandle(){
+  
+  async devControlShutter(isDown = true){
     let cmds,waitTime=10;
     let code = bleServerMap.remote.code.hold;
     let dev = this.data.bleDevs.find(dev=>this.data.remoteDev.devId===dev.deviceId);
@@ -132,7 +150,7 @@ Page({
     if(!server){console.log('无法找到远程控制服务')}
     let characteristic = server.characteristics.find(c=>c.uuid.startsWith(code.firstUuid));
     if(!characteristic){return console.log('无法匹配到特征')}
-    if(this.data.remoteDev.shutter){
+    if(isDown){
       console.log('快门抬起')
       // 发送抬起快门
       cmds =[
@@ -144,11 +162,6 @@ Page({
       console.log('快门按下')
       cmds =  [code.command.shutterDown]
     }
-    this.setData({
-      remoteDev:{...this.data.remoteDev,shutter:!this.data.remoteDev.shutter}
-    });
-    // 获取对应的服务
-    // let server = 
     for (let index = 0; index < cmds.length; index++) {
       const cmd = cmds[index];
       let [_err,_res] = await handle(ble.sendData(
@@ -158,13 +171,69 @@ Page({
         cmd.replace(/\s/g,'')
         ));
         if(_err){
-          console.log('发送命令失败');
+          // console.log('发送命令失败');
           console.error(_err);
         }
-        console.log('发送命令成功');
+        // console.log('发送命令成功');
         await sleep(waitTime);
     }
+  },
+  async touchStartHandle(e){
+    // console.log("按钮按下");
+    // console.log(e);
+    // todo 获取当前的y信息
+    let touche = e.touches[0];
+    let y1 = 0;
+    if(touche){
+      y1 = touche.clientY;
+    }
+    this.data.shutterBtnY1 = y1;
+    if(this.data.isHolder){
+      // 已经按下,视作已经发送按下快门的操作
+      return false;
+    }else{
+      // todo 未按下,发送按下快门的操作
+      this.devControlShutter(false);
+      timeClock.start();
+    }
+    // 记录当前时间. 等抬起时再次获取
+  },
+  async touchEndHandle(e){
+    console.log("按钮抬起");
     
+    if(this.data.isHolder){
+      // 按住,not do sth
+    }else{
+      // 抬起按钮
+      timeClock.stop();
+      this.devControlShutter(true);
+    }
+  },
+  async touchMoveHandle(e){
+    // console.log("按钮移动");
+    let touche = e.touches[0];
+    let y1 = this.data.shutterBtnY1;
+    let y2 = 0;
+    if(touche){
+      y2 = touche.clientY;
+    }
+    let endY = y2 - y1;
+    if(Math.abs(endY)<15){
+      // console.log("移动范围太小")
+      return false;
+    }
+    this.data.shutterBtnY1 = y2;
+    if(endY < 0){
+      console.log('+');
+      this.setData({
+        isHolder:true
+      })
+    }else{
+      console.log('-');
+      this.setData({
+        isHolder:false
+      })
+    }
   },
   async connectDev(e){
     let devId = e.currentTarget.dataset.dev;

pages/index/index.wxml

@@ -38,10 +38,23 @@
 
   <view class="conetrol" wx:if="{{ble.state === bleStateEnum.connected}}">
     <button bindtap="holdFoucus">对焦</button>
-    <button bindtap="shutterHandle">{{remoteDev.shutter?'抬起':'按下'}}</button>
     
-    <view class="usermotto">
-      <text class="user-motto">{{motto}}</text>
+    <view class="center-row mt-5">
+      <view class="shutter-box">  
+      <view
+      class="shutter-btn {{isHolder?' shutter-holder':''}}" 
+      capture-bind:touchstart="touchStartHandle"
+      capture-bind:touchend="touchEndHandle"
+      capture-bind:touchmove="touchMoveHandle"
+    >
+      </view>
+    </view>
     </view>
+    <view class="center-row mt-5" wx:if="{{isHolder}}">
+    <text>{{time_minute}}</text>:
+    <text>{{time_second}}</text>:
+    <text>{{time_ms}}</text>
+    </view>
+    
   </view>
 </view>

pages/index/index.wxss

@@ -101,4 +101,39 @@
 
 .bleDevices .devList .devItem .option{
   width: 30%;
+}
+.center-row{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.shutter-box{
+  width: 65px;
+  height: 130px;
+  display: flex;
+  justify-content: center;
+  box-shadow: 0px 0px 1px gray;
+  border-radius: 62px;
+  /* background-color: #eee; */
+}
+.shutter-btn{
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  margin-top: 65px;
+  box-shadow: 2px 2px 4px black;
+  background: rgb(216, 216, 216);
+}
+.shutter-btn:active{
+  background-color: rgb(51, 189, 16);
+  box-shadow: inset 2px 2px -4px gray;
+}
+.shutter-holder{
+  margin-top: 5px;
+  background: rgb(51, 189, 16);
+}
+
+
+.mt-5{
+  margin-top: 5px;
 }

utils/timer.js

@@ -0,0 +1,98 @@
+class t {
+  ms = 0;
+  timer = null;
+  startTimer = null;
+  isPause = false;
+  reFreshTime = 10;// 更新数据毫秒
+  lastTime = 0;// 上一次的毫秒数
+  constructor(){
+    this.ms = 0;
+    this.timer = null;
+    
+  }
+  init(){
+    this.ms = 0;
+    if(this.timer){
+      clearTimeout(this.timer);
+    }
+  }
+  start(){
+    // 开始第一步 10ms 更新一次数值
+    let date = new Date();
+    this.startTimer = date.getTime();
+    this.lastTime = date.getTime();
+    if(this.isPause){
+      // 从暂停中恢复
+    }else{
+      // 新的数据
+      this.ms = 0;
+    }
+    console.log('开始计时器');
+    this.isPause = false;
+    this.tick();
+  }
+  pause(){
+    // 暂存当前经过的时间
+    this.isPause = true;
+    // 中止time
+    clearTimeout(this.timer);
+    this.timer = null;
+  }
+  stop(){
+    console.log('停止计时');
+    clearTimeout(this.timer);
+    this.timer = null;
+    this.isPause = false;
+  }
+  tick(){
+    let latencyTime = this.reFreshTime;
+    // 获取当前时间,以及上一次时间
+    let date = new Date();
+    let nowTimeStamp = date.getTime();
+    let lastTime = this.lastTime;
+    // 两次执行间的时间差
+    let timeGap = nowTimeStamp - lastTime;
+    if((timeGap - this.reFreshTime) < 0){
+    // 时间差小于10秒,需要将多跑的时间补齐回去
+    latencyTime = this.reFreshTime + (timeGap - this.reFreshTime) ;
+    }else {
+    // 时间差大于10秒,任务执行超时.减去多损耗的时间
+    latencyTime = this.reFreshTime - (timeGap - this.reFreshTime) ;
+    latencyTime = Math.max(latencyTime,0);
+    }
+    if(this.isPause){
+      console.log('已经暂停');
+      return false;
+    }
+    this.ms +=1;
+    this.lastTime = nowTimeStamp;
+    // 触发hook
+    this._reFreshHook(this.ms);
+    this.timer = setTimeout(()=>{
+      this.tick();
+    },latencyTime);
+    return true;
+  }
+  parse(msNum){
+    // 60:60:100
+    let time_minute = 0;
+    let time_second = (msNum-(msNum%100)) /60;
+    let time_ms = msNum%100;
+    return {
+      minute:time_minute,
+      second: time_second,
+      ms: time_ms,
+      toString(){
+        return `${time_minute}:${time_second}:${time_ms}`
+      }
+    }
+  }
+  setHook(_reFreshHook){
+    this._reFreshHook = _reFreshHook;
+  }
+  _reFreshHook(){
+
+  }
+}
+
+module.exports = t;