html页面自己写js脚本收发数据，支持串口和TCP通讯（三）串口快捷命令列表

最新推荐文章于 2023-09-08 18:45:36 发布

大鹏展翅888

最新推荐文章于 2023-09-08 18:45:36 发布

阅读量944

点赞数 1

分类专栏：免费开源 html

本文链接：https://blog.csdn.net/zhupengfei/article/details/115309259

版权

开源同时被 3 个专栏收录

10 篇文章 1 订阅

订阅专栏

免费

9 篇文章 0 订阅

订阅专栏

html

7 篇文章 1 订阅

订阅专栏

有时候我们需要一组常用的命令，然后按顺序发。
比如常见的AT指令。

效果

在这里插入图片描述

编辑命令

    var data = {
        cmdList: [
            { "id": 0, "cmdText": "00", cmdName: "在代码中改名称", hex: true,  },
            { "id": 1, "cmdText": "11", cmdName: "cmd2", hex: true , },
            { "id": 2, "cmdText": "22", cmdName: "cmd3", hex: true , },
            { "id": 3, "cmdText": "33", cmdName: "cmd4", hex: true , },
        ]
    };

在代码中修改相应的列表即可。
id为序号，目前没有用。
cmdText为发送命令的内容
cmdName为命令的名称
hex true表示是hex命令，false表示不是。

组合发命令12

比如有时候要组合三个命令一块发，
先发2，再发1，再发3，这时可以这样处理

    function sendCmdList2() {
        (async function () {
            await CefSharp.BindObjectAsync("serialPortHelper");
            await CefSharp.BindObjectAsync("systemHelper");

            //按此顺序发送命令，修改顺序修改此数组即可
            var sendIndex = [2, 0, 1];
            for (var i = 0; i < sendIndex.length; i++) {
                var index = sendIndex[i];

                await systemHelper.sleep(1000);
                await serialPortHelper.sendData(data.cmdList[index].cmdText);
            }
        })();
    }

注意sendIndex 的序号是从0开始的，第一个命令序号是0
await systemHelper.sleep(1000);表示每个命令停顿一秒，根据情况调整。

完整示例

<body>
    <div>串口测试</div>
    <input type="text" id="txtPort" style="width:50px;" value="COM2" />
    波特率:<input type="text" style="width:50px;" id="txtBaudRate" value="57600" />
    数据位:<input type="text" style="width:50px;" id="txtDataBits" value="8" />
    停止位:<input type="text" style="width:50px;" id="txtStopBits" value="1" />
    校验位:<input type="text" style="width:50px;" id="txtParity" value="0" />
    <ul id="ulCmdList" style="list-style-type: none;">
        <li></li>
    </ul>
    <button onclick="testOpen()">open</button>
    <button onclick="testClose()">close</button>
    <button onclick="sendData()">发送</button>
    <button onclick="recvData()">接收</button>
    <button onclick="startCyclicRecvData()">循环接收</button>
    <button onclick="stopCyclicRecvData()">取消循环接收</button>
    <button onclick="sendCmdList2()">发列表135项</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.min.js"></script>
<script id="tpl-cmdList" type="text/html">
    <% for(var i = 0; i < cmdList.length; i++){ %>
    <li>  <%= i %>  <input type="text" style="width:500px;" readonly="readonly" value="<%= cmdList[i].cmdText %>" /><button onclick="sendCmdList(<%= i %>)"><%= cmdList[i].cmdName %></button></li>
    <% } %>
</script>
<script type="text/javascript">

    var cyclicTimeId;
    var data = {
        cmdList: [
            { "id": 0, "cmdText": "00", cmdName: "在代码中改名称", hex: true,  },
            { "id": 1, "cmdText": "11", cmdName: "cmd2", hex: true , },
            { "id": 2, "cmdText": "22", cmdName: "cmd3", hex: true , },
            { "id": 3, "cmdText": "33", cmdName: "cmd4", hex: true , },
        ]
    };

    (async function () {
        var html = template("tpl-cmdList", data);
        console.log(html);
        document.getElementById('ulCmdList').innerHTML = html;

        await CefSharp.BindObjectAsync("serialPortHelper");

        var portName = document.getElementById("txtPort").value;
        var baudRate = parseInt(document.getElementById("txtBaudRate").value);
        var dataBits = parseInt(document.getElementById("txtDataBits").value);
        var stopBits = parseInt(document.getElementById("txtStopBits").value);
        var parity = parseInt(document.getElementById("txtParity").value);
        await serialPortHelper.init(portName, baudRate, dataBits, stopBits, parity);


    })();

    function testOpen() {
        return (async function () {
            console.log('open');

            await CefSharp.BindObjectAsync("serialPortHelper");

            await serialPortHelper.open();
        })();
    }

    function testClose() {
        console.log('close');
        (async function () {
            await CefSharp.BindObjectAsync("serialPortHelper");

            await serialPortHelper.close();
        })();
    }

    function sendCmdList(index) {
        (async function () {
            await CefSharp.BindObjectAsync("serialPortHelper");

            await serialPortHelper.sendData(data.cmdList[index].cmdText);
        })();
    }

    function sendCmdList2() {
        (async function () {
            await CefSharp.BindObjectAsync("serialPortHelper");
            await CefSharp.BindObjectAsync("systemHelper");

            //按此顺序发送命令，修改顺序修改此数组即可
            var sendIndex = [2, 0, 1];
            for (var i = 0; i < sendIndex.length; i++) {
                var index = sendIndex[i];

                await systemHelper.sleep(1000);
                await serialPortHelper.sendData(data.cmdList[index].cmdText);
            }
        })();
    }


    function sendData() {
        (async function () {
            await CefSharp.BindObjectAsync("serialPortHelper");

            await serialPortHelper.sendData("313233");
        })();
    }

    function recvData() {
        (async function () {
            await CefSharp.BindObjectAsync("serialPortHelper");

            let recvString = await serialPortHelper.recvData();
            console.log('[' + recvString + ']');
        })();
    }

    function startCyclicRecvData() {
        cyclicRecvData();
    }

    function stopCyclicRecvData() {
        clearTimeout(cyclicTimeId);
    }

    function cyclicRecvData() {
        (async function () {
            await CefSharp.BindObjectAsync("serialPortHelper");

            let recvString = await serialPortHelper.recvData();
            console.log('-' + recvString + '-');
            if (recvString.trim() == '11') {
                console.log('ok');
                await serialPortHelper.sendData('22');
            }

            cyclicTimeId = setTimeout("cyclicRecvData()", 1000);
        })();
    }


</script>

大鹏展翅888

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
html页面自己写js脚本收发数据，支持串口和TCP通讯（三）串口快捷命令列表

有时候我们需要一组常用的命令，然后按顺序发。比如常见的AT指令。效果编辑命令 var data = { cmdList: [ { "id": 0, "cmdText": "00", cmdName: "在代码中改名称", hex: true, }, { "id": 1, "cmdText": "11", cmdName: "cmd2", hex: true , }, { "id": 2, "cmdTex
复制链接

扫一扫