首页 > 其他分享 > agv 遥控器

agv 遥控器

时间:2022-12-28 16:58:47浏览次数:45  
标签:const startTimer MouseEvent move timer 遥控器 agv setBgColor

<template>

  <div class="absolute top-1/3 left-1/3 select-none">
    <div class="flex justify-center w-full">
      <kbd class="kbd w-16 h-12" @mousedown="goUpDown" @mouseup="goUpUp">▲</kbd>
    </div>
    <div class="flex justify-center gap-12 w-full">
      <kbd class="kbd h-16 w-12" @mousedown="goLeftDown" @mouseup="goLeftUp">◀︎</kbd>
      <kbd class="kbd h-16 w-12" @mousedown="goRightDown" @mouseup="goRightUp">▶︎</kbd>
    </div>
    <div class="flex justify-center w-full">
      <kbd class="kbd w-16 h-12" @mousedown="goDownDown" @mouseup="goDownUp">▼</kbd>
    </div>
  </div>


</template>

<script setup lang="ts">

let timer:NodeJS.Timer|null = null

function startTimer(callback:()=>void){
  timer = setInterval(callback,1000)
}

function setBgColor( e:MouseEvent,color:string){
  (e.target as HTMLElement).style.backgroundColor=color;
}

function move(dir:string){
  console.log(dir);
  switch(dir){
    case 'up':
      break;
    case 'down':
      break;
    case 'left':
      break;
    case 'up':
      break;
    default:
      break
  }
}

// judge the agv is moving
function isNaving():boolean{
  // send http request to backend
  // judge the current navigation is completed
  return true
}

// run the agv
function runAgv(dir:string){

}

const goUpDown= (e:MouseEvent)=>{
  setBgColor(e,'#44cef6')
  startTimer(()=>{
    move('up')
  })
}

const goUpUp= (e:MouseEvent)=>{
  clearInterval(timer!);
  setBgColor(e,'#ffffff')
}
//----------------------------------------------------------------------------

const goLeftDown= (e:MouseEvent)=>{
  setBgColor(e,'#44cef6')
  startTimer(()=>{
    move('left')
  })

}

const goLeftUp= (e:MouseEvent)=>{
  clearInterval(timer!);
  setBgColor(e,'#ffffff')
}
//---------------------------------------------------------------------------

const goRightDown= (e:MouseEvent)=>{
  setBgColor(e,'#44cef6')
  startTimer(()=>{
    move('right')
  })
}

const goRightUp= (e:MouseEvent)=>{
  clearInterval(timer!);
  setBgColor(e,'#ffffff')
}

//--------------------------------------------------------------------------
const goDownDown= (e:MouseEvent)=>{
  setBgColor(e,'#44cef6')
  startTimer(()=>{
    move('down')
  })
}

const goDownUp= (e:MouseEvent)=>{
  clearInterval(timer!);
  setBgColor(e,'#ffffff')
}
</script>




<style scoped lang="less"></style>

标签:const,startTimer,MouseEvent,move,timer,遥控器,agv,setBgColor
From: https://www.cnblogs.com/zhuoss/p/17010485.html

相关文章

  • #盲盒+码# 【FFH】为Wifi-lot小车做一个遥控器应用
    本文正在参加「盲盒」+码有奖征文活动在HarmonyOS3.0和OpenHarmony3.2的支持下,TCP-socket通信API已经稳定可控,今天我们做一个控制应用来控制小车。0.效果演示1.设计......
  • agv_fastapi_socket_mock
    E:\song\agv_fastapi_socket_v4_mock\app.pyimporttimefromfastapiimportFastAPI,WebSocket,Request,WebSocketDisconnectfromfastapi.responsesimportRedire......
  • AGV
    通信流程握手:b5ffaa3110aa9985b(送料)b5ffaa311aa38db5bb5ffff311055c205b(接料)b5ffff311ff4ee5b收料轨道起转确认:b5ff......
  • js 字节数组模拟 agv auo
    res=JSON.stringify({x:10.0,y:3.0,angle:0});console.log(res);byteArr=[]for(letcofres){byteArr.push(c.charCodeAt().toString(16))}console......
  • ANO匿名飞控分析(1)— 遥控器解码
    准备电赛,简单写一下匿名飞控的分析基于TM4C主控的匿名拓空者飞控,介绍见​​匿名科创–匿名拓空者PRO—TI版全开源飞控使用入门—TM4C123​​文章目录​​一、简介​​​​......
  • 如何实现就地程控站无线监控agv小车远程加料?
    无线技改背景近年来,随着施工群体的“老龄化”以及政府对“建筑环保”等方面要求的不断提升,“装配式建筑”已成为我国建筑行业转换生产方式的新方向,也是新旧动能转换的重要方......
  • 如何实现就地程控站无线监控agv小车远程加料?
    无线技改背景近年来,随着施工群体的“老龄化”以及政府对“建筑环保”等方面要求的不断提升,“装配式建筑”已成为我国建筑行业转换生产方式的新方向,也是新旧动能转换的重要方......
  • autohotkey video remote 遥控器
    C:\my_script\videoRemote\remoteKey.ahkGroupAdd,remoteKey,ahk_exemsedge.exeGroupAdd,remoteKey,ahk_exechrome.exeGroupAdd,remoteKey,ahk_exe哔哩哔哩.......
  • agv auo threejs 实现曲线运动 曲线转角 曲线转向 tween.js
    //three.jsimport*asTHREEfrom'three';importSpriteTextfrom'three-spritetext';//引入tweenimport*asTWEENfrom'@tweenjs/tween.js';importtype{......
  • agv 转弯
    //three.jsimport*asTHREEfrom'three';importSpriteTextfrom'three-spritetext';//引入tweenimport*asTWEENfrom'@tweenjs/tween.js';importtype{......