文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

为Wifi-lot小车做一个遥控器应用

2024-12-01 00:35

关注

想了解更多关于开源的内容,请访问:

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

在HarmonyOS3.0和OpenHarmony3.2的支持下,TCP-socket通信API已经稳定可控,今天我们做一个控制应用来控制小车。

1、效果演示

2、设计思路

运行环境:HarmonyOS3.0,OpenHarmony3.2

(1)按键说明

①转向控制:左右滑动摇杆,实现转向,上下滑动摇杆,实现速度控制。
②动力控制:上下滑动摇杆,实现前进后退。
③本机IP地址展示
④对端IP地址输入
⑤链接,断开按键,主动进行TCP连接请求与断开。

(2)控制指令

本遥控器以状态指令为驱动,每触发一种状态仅发送一次指令,对端在未接收到新指令的情况下一直保持当前指令状态。

3、页面设计

在摇杆的拖动设计中,主要运用ontouchmove,ontouchend,ontouchstart实现,通过手指坐标来确定摇杆组件的top和left值,通过设定方向阈值来判断是否开始发送指令,通过打印回调数据来设置参数。

(1)hml

<div class="container">
<div class="yaogan">
div>
<div class="controller" style="top:`x`;left:`y`" ontouchstart="onMoveStart"on:touchend="onMoveEnd" on:touchmove="onMove" on:longpress="toSpeed_mode" >

div>
<image src="common/images/title.png" style="width: 60%;height:20%;object-fit: contain;">

image>

<image src="common/images/` msg `.png" style="width: 30%;height: 10%;object-fit: contain;">

image>
<progress class="min-progress" type="horizontal" percent= "` speed `" secondarypercent="100" style="width: 30%;left: 30px;margin-top: 30px;">progress>
<text class="ip_local">

`local_ip`
text>
<input class="ip_input" placeholder="请输入IP地址" onchange="get_remote_ip">

input>
<button class="btn" type="capsule" onclick="onConnect">
链接
button>
<button class="btn" type="capsule" onclick="onDisconnect">
断开
button>
<div class="forward" >
<image src="common/` forward_image `.png" style="width: 100%;height: 100%;top: `forward_x`;" on:touchmove="onForward" on:touchend="onForwardend" on:touchstart="onForwardstart" >
image>
div>
div>

(2)CSS

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}

.title {
font-size: 40px;
text-align: center;
width: 100%;
height: 40%;
margin: 10px;
}


.yaogan{
position: absolute;
top: 100px;
left: 50px;
width: 200px;
height: 200px;
background-image: url("./common/RadialJoy_Area.png");
background-size: 100%;
background-repeat: no-repeat;
z-index: -1;


}
.controller{
width: 100px;
height: 100px;
top: 150px;
left: 100px;
background-image: url("./common/RadialJoy_Area.png");
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
z-index: 1;
}
.forward{
position: absolute;
left: 550px;
width: 100px;
height: 100px;
background-size: 100%;
z-index: -1;
}
.ip_input{
font-size: 18px;
left: 30px;
width: 200px;
height: 50px;
margin-top: 25px;
background-color: #ff2c7a87;



}
.btn{
width: 100px;
height:30px;
left: 30px;
margin-top: 5px;
background-color: #ff93f0fd;



}
.ip_local{
font-size: 20px;
width: 200px;
height: 50px;
left:30px;
color: #ff3850ef;
margin-top: 20px;
background-image: url("./common/images/bg2.png");
background-size: 100%;
background-repeat: no-repeat;
}

4、业务逻辑

(1)参数调试

我们前面为摇杆组件设置了ontouch事件,那么如何设计Top或者left值来判断什么时候可以开始发送指令呢?摇杆既不可太过灵敏也不可以太过迟钝,我们可以通过打印触摸事件返回的参数来进行调参。

export default {
touchstartfunc(msg) {
console.info(`on touch start, point is: ${msg.touches[0].globalX}`);
console.info(`on touch start, point is: ${msg.touches[0].globalY}`);
console.info(`on touch start, data is: ${msg.target.dataSet.a}`);
}
}

(2)触摸控制

根据前文提到的状态控制机制,我们应该在ontouchmove中进行判断,当上滑到某一阈值的时候开始发送前进指令,当松手时即ontouchend时我们应该立即发送停止指令。即滑动中判断并发送指令,停止则立马发送停止信息。具体的阈值参数根据个人考虑进行调试设置。

import prompt from '@ohos.prompt';
import wifi from '@ohos.wifi';
import socket from '@ohos.net.socket';
import display from '@ohos.display';
var promise ;
export default {
data: {
title: "",
x:150,
y:100,
forward_x:150,
msg:"forward",
forward_image:"Button_normal",
TGA:"YZJ",
command:"1",
local_ip:"",
remote_ip:"",
speed_mode:1,
speed:10,
tcp:socket.constructTCPSocketInstance(),
pre_cmd:'0',
cur_cmd:'0'
},
onInit() {
this.title = this.$t('strings.world');
this.getIpAddress();
this.creatScoket();


},
send_cmd(cmd){
if(cmd!=this.cur_cmd){
this.cur_cmd=cmd;
this.sendMessage(cmd);
}
},
onMoveStart(e){
console.info("开始移动"+JSON.stringify(e));
},
toSpeed_mode(){
if(this.speed_mode==0)
this.speed_mode=1;
else if(this.speed_mode==1)
this.speed_mode=0;

},
onMove(e){
//圆心是(100,250)
if(this.speed_mode==0){
console.info(JSON.stringify(e))
let nx=e.touches[0].globalY-50;
this.x=nx;
}
else if(this.speed_mode==1){
console.info(JSON.stringify(e))
let ny=e.touches[0].globalX-50;
this.y=ny;
if(ny>=110){
this.msg="trun_right"
console.info("YZJ:正在向右转")
this.command="4";
this.send_cmd(this.command);

}
else if(ny<=90){
this.msg="trun_left"
console.info("YZJ:正在向做左转")
this.command="3";
this.send_cmd(this.command);

}

}

},
onMoveEnd(){
this.x=150;
this.y=100;
this.msg="stop"
this.command='0';
this.send_cmd(this.command);

},
onForwardstart(e){
this.forward_image="Button_active";
this.forward_x=e.touches[0].globalY-50
},
onForward(e){
if( e.touches[0].globalY-50<=140){
console.info("正在前进")
this.msg="forward"
this.command="1"
this.send_cmd(this.command);

if(e.touches[0].globalY-50<100){
this.forward_x=100
}
else
this.forward_x=e.touches[0].globalY-50
}
else if(e.touches[0].globalY-50>165){
console.info("正在后退")
this.msg="backoff"
this.command="2"
this.send_cmd(this.command);

if(e.touches[0].globalY-50>200){
this.forward_x=200
}
else
this.forward_x=e.touches[0].globalY-50

}
},
onForwardend(){
this.forward_x=150;
console.info("停止前进")
this.msg="stop"
this.forward_image="Button_normal"
this.command="0"
this.send_cmd(this.command);

},
//创建udpSocket 默认端口10006
creatScoket: async function(){

this.tcp.bind({address: this.local_ip, port: 8888,family: 1}, err => {
if (err) {
console.log('YZJ---bind fail');
return;
}
console.log('YZJ---bind success');
})

//监听收到的信息 打印到屏幕上
this.tcp.on('message', value => {
let buffer = value.message;
let dataView = new DataView(buffer);
let str = "";
for (let i = 0;i < dataView.byteLength; ++i) {
str += String.fromCharCode(dataView.getUint8(i))
}
this.title =str;
});
},
sendMessage: async function(cmd){
//发送信息
// let promise1 = this.tcp.connect({ address: {address: this.remote_ip, port: 10006, family: 1} , timeout: 6000});
let promise2 = this.tcp.send({
data:cmd
});
promise2.then(() => {
console.log('YZJ---send success');
}).catch(err => {
console.log('YZJ---send fail');
});


},
onConnect: async function(){
promise = this.tcp.connect({ address: {address: "192.168.1.1", port: 8888, family: 1} , timeout: 6000});
promise.then(() => {
prompt.showToast({
message: "连接成功!"
})
console.log('YZJ---connect success');
this.tcp.setExtraOptions({
keepAlive: true,
OOBInline: true,
TCPNoDelay: true,
socketLinger: { on:true, linger:10 },
receiveBufferSize: 1000,
sendBufferSize: 1000,
reuseAddress: true,
socketTimeout: 3000,
},err => {
if (err) {
console.log('YZJ---setExtraOptions fail');
return;
}
console.log('YZJ---setExtraOptions success');
});
}).catch(err => {
console.log('YZJ---connect fail');
prompt.showToast({
message: "连接失败!"
})
});
},
onDisconnect(){
this.tcp.close()
prompt.showToast({
message: "断开链接!"
})
},
onDestroy(){
this.tcp.close()
prompt.showToast({
message: "断开链接!"
})
},
//获取本机ip地址
getIpAddress(){
let ip=wifi.getIpInfo().ipAddress;
this.local_ip = (ip >> 24 & 0xFF)+"."+ ((ip >> 16) & 0xFF)+"."+((ip >> 8) & 0xFF)+"."+(ip & 0xFF);
},
get_remote_ip(e){
this.remote_ip=e.value
}
}

(3)TCP

方法

描述

creatScoket()

绑定本机IP

sendMessage()

发送指令

onConnect()

链接对端

onDisconnect()

断开链接

getIpAddress()

获取本机IP地址

(4)申请权限

"reqPermissions": [

{
"name": "ohos.permission.GET_WIFI_INFO"
},
{
"name": "ohos.permission.GET_NETWORK_INFO"
},
{
"name": "ohos.permission.INTERNET"
},
{
"name": "ohos.permission.SET_NETWORK_INFO"
},
{
"name": "ohos.permission.ACCELEROMETER"
}
]

5、结语

本次分享的应用需要南北向开发配合食用,同时需要HarmonyOS3.0设备或者OpenHarmony3.2设备。HarmonyOS2.0设备可考虑采用JS/JAVA混合开发,JAVA侧实现Socket通信,可参考我往期博客。下一期,我将会分享如何配置HarmonyOS3.0设备的碰一碰拉起应用配置。

想了解更多关于开源的内容,请访问:

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

来源:51CTO 开源基础软件社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯