| <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> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战