自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

為Wifi-lot小車做一個(gè)遙控器應(yīng)用

作者：龍眼Litchi
系統(tǒng) OpenHarmony
在HarmonyOS3.0和OpenHarmony3.2的支持下，TCP-socket通信API已經(jīng)穩(wěn)定可控，今天我們做一個(gè)控制應(yīng)用來控制小車。

??想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

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

在HarmonyOS3.0和OpenHarmony3.2的支持下，TCP-socket通信API已經(jīng)穩(wěn)定可控，今天我們做一個(gè)控制應(yīng)用來控制小車。

1、效果演示

#盲盒+碼# 【FFH】為Wifi-lot小車做一個(gè)遙控器應(yīng)用 -開源基礎(chǔ)軟件社區(qū)

2、設(shè)計(jì)思路

運(yùn)行環(huán)境:HarmonyOS3.0,OpenHarmony3.2

#盲盒+碼# 【FFH】為Wifi-lot小車做一個(gè)遙控器應(yīng)用 -開源基礎(chǔ)軟件社區(qū)

（1）按鍵說明

①轉(zhuǎn)向控制：左右滑動(dòng)搖桿，實(shí)現(xiàn)轉(zhuǎn)向，上下滑動(dòng)搖桿，實(shí)現(xiàn)速度控制。
②動(dòng)力控制：上下滑動(dòng)搖桿，實(shí)現(xiàn)前進(jìn)后退。
③本機(jī)IP地址展示
④對端IP地址輸入
⑤鏈接，斷開按鍵，主動(dòng)進(jìn)行TCP連接請求與斷開。

（2）控制指令

本遙控器以狀態(tài)指令為驅(qū)動(dòng)，每觸發(fā)一種狀態(tài)僅發(fā)送一次指令，對端在未接收到新指令的情況下一直保持當(dāng)前指令狀態(tài)。

  • 前進(jìn)狀態(tài)：“1”
  • 后退狀態(tài)：“2”
  • 左轉(zhuǎn)狀態(tài)：“3”
  • 右轉(zhuǎn)狀態(tài): “4”
  • 停止?fàn)顟B(tài): “0”

3、頁面設(shè)計(jì)

在搖桿的拖動(dòng)設(shè)計(jì)中，主要運(yùn)用ontouchmove，ontouchend，ontouchstart實(shí)現(xiàn)，通過手指坐標(biāo)來確定搖桿組件的top和left值，通過設(shè)定方向閾值來判斷是否開始發(fā)送指令，通過打印回調(diào)數(shù)據(jù)來設(shè)置參數(shù)。

（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;
/*    background-image:  url("./common/images/bg.png");*/
/*    background-size: 100%;*/
/*    background-repeat: no-repeat;*/
}
.btn{
    width: 100px;
    height:30px;
    left: 30px;
    margin-top: 5px;
    background-color: #ff93f0fd;
/*    background-image:  url("./common/images/btn.png");*/
/*    background-size: 150%;*/
/*    background-repeat: no-repeat;*/
}
.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、業(yè)務(wù)邏輯

（1）參數(shù)調(diào)試

我們前面為搖桿組件設(shè)置了ontouch事件，那么如何設(shè)計(jì)Top或者left值來判斷什么時(shí)候可以開始發(fā)送指令呢？搖桿既不可太過靈敏也不可以太過遲鈍，我們可以通過打印觸摸事件返回的參數(shù)來進(jìn)行調(diào)參。

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）觸摸控制

根據(jù)前文提到的狀態(tài)控制機(jī)制，我們應(yīng)該在ontouchmove中進(jìn)行判斷，當(dāng)上滑到某一閾值的時(shí)候開始發(fā)送前進(jìn)指令，當(dāng)松手時(shí)即ontouchend時(shí)我們應(yīng)該立即發(fā)送停止指令。即滑動(dòng)中判斷并發(fā)送指令，停止則立馬發(fā)送停止信息。具體的閾值參數(shù)根據(jù)個(gè)人考慮進(jìn)行調(diào)試設(shè)置。

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("開始移動(dòng)"+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:正在向右轉(zhuǎn)")
                this.command="4";
                this.send_cmd(this.command);

            }
            else if(ny<=90){
                this.msg="trun_left"
                console.info("YZJ:正在向做左轉(zhuǎn)")
                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("正在前進(jìn)")
            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("停止前進(jìn)")
        this.msg="stop"
        this.forward_image="Button_normal"
        this.command="0"
        this.send_cmd(this.command);

    },
    //創(chuàng)建udpSocket 默認(rèn)端口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');
                })

        //監(jiān)聽收到的信息 打印到屏幕上
        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){
       //發(fā)送信息
//                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: "斷開鏈接！"
        })
    },
    //獲取本機(jī)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

  • 通過輸入框獲取對端IP地址，點(diǎn)擊鏈接按鍵時(shí)觸發(fā)connect方法請求連接，連接成功彈出對話框"連接成功"。
  • 展示本機(jī)IP地址。
  • 應(yīng)用或者頁面銷毀時(shí)應(yīng)關(guān)閉連接，否則會(huì)占據(jù)對端該端口，導(dǎo)致下次連接失敗。
  • 根據(jù)狀態(tài)驅(qū)動(dòng)指令控制，由于ontouchmove是一直在觸發(fā)的，也就是判斷是一直在進(jìn)行的，當(dāng)我們保持搖桿前進(jìn)狀態(tài)的時(shí)候，注意要判斷指令狀態(tài)是否更新了？如果指令未變，那么就不再發(fā)送指令。只有指令變化的時(shí)候才會(huì)發(fā)送一次指令。
  • 只有連接成功后，才能夠發(fā)送信息。

方法

描述

creatScoket()

綁定本機(jī)IP

sendMessage()

發(fā)送指令

onConnect()

鏈接對端

onDisconnect()

斷開鏈接

getIpAddress()

獲取本機(jī)IP地址

  • tcp設(shè)置參數(shù)：
    |參數(shù)|描述|
    |-|-|
    |keepAlive|是否保持連接。默認(rèn)為false。|
    |OOBInline|是否為OOB內(nèi)聯(lián)。默認(rèn)為false。|
    |TCPNoDelay|TCPSocket連接是否無時(shí)延。默認(rèn)為false。|
    |receiveBufferSize|接收緩沖區(qū)大?。▎挝唬築yte）|
    |sendBufferSize|發(fā)送緩沖區(qū)大?。▎挝唬築yte）|
    |reuseAddress|是否重用地址。默認(rèn)為false|
    |socketTimeout|套接字超時(shí)時(shí)間，單位毫秒（ms）|
  • 建議開啟HarmonyOS工程，開發(fā)完畢后可同步安裝到OpenHarmony設(shè)備，反之則會(huì)變得麻煩一些。

（4）申請權(quán)限

"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、結(jié)語

本次分享的應(yīng)用需要南北向開發(fā)配合食用，同時(shí)需要HarmonyOS3.0設(shè)備或者OpenHarmony3.2設(shè)備。HarmonyOS2.0設(shè)備可考慮采用JS/JAVA混合開發(fā)，JAVA側(cè)實(shí)現(xiàn)Socket通信，可參考我往期博客。下一期，我將會(huì)分享如何配置HarmonyOS3.0設(shè)備的碰一碰拉起應(yīng)用配置。

??想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

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

責(zé)任編輯：jianghua 來源： 51CTO 開源基礎(chǔ)軟件社區(qū)
應(yīng)用開發(fā)鴻蒙
相關(guān)推薦

2014-05-06 13:45:09

Peel智能遙控App

2011-02-28 09:22:47

SQLite記賬簿

2012-02-21 13:50:29

瀏覽器遙控器

2021-12-17 10:06:42

鴻蒙HarmonyOS應(yīng)用

2016-11-23 18:13:44

javascriptrxjsreactivex

2011-06-16 15:57:25

Android

2022-10-25 14:51:11

設(shè)備開發(fā)鴻蒙

2021-12-01 07:02:55

Python 記錄器按鍵

2012-04-10 16:26:46

2015-07-03 11:27:30

程序員自己神器

2023-04-11 09:12:31

北向應(yīng)用開發(fā)鴻蒙

2017-10-18 15:28:08

Service WorPWA離線

2014-05-15 09:45:58

Python解析器

2022-06-19 20:48:06

樹莓派Linux

2017-06-30 15:18:24

對賬系統(tǒng)互聯(lián)網(wǎng)

2012-12-17 12:58:18

WebjQuery重構(gòu)

2010-01-08 12:14:44

ibmdwAndroid

2021-02-01 13:58:51

鴻蒙HarmonyOS應(yīng)用開發(fā)

2022-09-07 15:35:49

設(shè)備開發(fā)鴻蒙

2018-08-08 15:06:42

牛奶盒子
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號