Chrome APP 操作读卡器串口

1.本机可以使用串口虚拟串口程序

test.js
   //遍历获取串口名称
   var added = true;
   var onGetDevices = function(ports) {
       var newArr = [];
       for (var i = 0; i < ports.length; i++) {
           newArr.push(ports[i].path);
           var select = document.getElementById("selectch");
           if (i==0) {

           }else{
               select.options.add(new Option(newArr[i],newArr[i]));
           }

       }
       var chuankou = document.getElementById("selectch").value
       //chrome.serial.disconnect(connectionId,disConnet);
       chrome.serial.connect(chuankou, {
           bitrate: 9600
       }, onConnect);

}
   //获取串口设备名,并将串口设备信息当参数传入指定的onGetDevices函数
   chrome.serial.getDevices(onGetDevices);
   //串口数据接收函数并将arraybuffer转16进制数组
   var onReceiveCallback = function(info) {
       console.log('received', info.data);
       if(info.data.byteLength != 7){
           arr = new Uint8Array(info.data);
           var newArr = [];
           for( let i of arr ){
               newArr.push( i.toString(16));
           }
           console.log(newArr);
           if(newArr[5].length == 1){
               newArr[5]="0"+newArr[5];
           }
           if(newArr[6].length == 1){
               newArr[6]="0"+newArr[6];
           }
           var ka16 = newArr[5]+newArr[6]
           var kahao=parseInt(ka16,16)
           console.log('卡号:', kahao);
       }else{
           console.log("卡信息异常，请重刷")
       }

};

var connectionId;

var onConnect = function(connectionInfo) {
if(typeof(connectionInfo)=="undefined"){
console.log("串口连接错误,请选择其他串口")

}else{
       console.log(chrome.runtime.lastError, connectionInfo); //输出连接信息
       //chrome.serial.onReceive.addListener(onReceiveCallback);//指定串口数据接收函数
       connectionId = connectionInfo.connectionId;
       console.log(connectionId)
   }

};

html页面

<!DOCTYPE html>
<html>

<head>
<title>serialportDemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
选择串口<select id="selectch">
</select>
<input id="btn_submit" type="button" value="连接串口" >
<div><input id="read" type="button" value="读取卡信息" ></div>

</head>

<body>
<script src="test.js"></script>
</body>

</html>

Mainfest.json

{
"app": {
"background": {
"scripts": ["background.js"]
}
},
"manifest_version": 2,
"name": "Performance Monitor",
"version": "1.0",
"description": "A performance monitor to show cpu and memory status.",
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"permissions": [
"serial"
]
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('main.html', {
'id': 'main',
'bounds': {
'width': 542,
'height': 360
},
'resizable': false,
'frame': 'none'
});
});

Chrome APP 操作读卡器串口相关推荐

uniapp app蓝牙打印_编程器加装蓝牙串口模块与手机APP操作演示
编程器加装蓝牙模块后,可以方便的使用手机查看打印信息,进入控制台执行各种串口命令.本款蓝牙串口APP具有保存打印信息.分享打印信息.设置字体大小.清除屏幕信息.进入控制台.发送串口命令.执行串口命令- ...
uniapp app蓝牙打印_给编程器加装蓝牙串口模块，用手机APP操作打印信息进控制台...
公众号回复[编程器]可下载蓝牙串口APP 专用蓝牙串口模块购买: https://item.taobao.com/item.htm?id=619731291566 编程器加装蓝牙模块后,可以方便的使用 ...
使用drawio进行画图真的很方便(WEB版/Chrome APP版/桌面版)
要说画图,最好还是用纸和笔,所见即所得,还没有工具的学习成本,直接撸起即可.但是这是假象. 你觉得纸笔画图的学习成本和使用计算机工具画图的学习成本哪个高?计算机画图工具成本高是吧?其实不是. 你还记得 ...
基于APP Designer 实现串口数据监测功能App总结（2)——app设计
本文具体介绍app设计的过程,该app接收的数据格式是16位整形数,分byte以字符方式打印.打印U16变量var,打印格式为 printf("%c%c\n",U8(var> ...
MATLAB在app中扫描串口并在下拉菜单中显示
MATLAB在app中扫描串口并在下拉菜单中显示更新背景故事实现串口扫描 App中的操作更新经评论提醒,R2019已有现成APIhttps://ww2.mathworks.cn/help/m ...
串口输出换行_stm32初学者必会操作----usart串口调试工具
stm32初学者必会操作----usart串口调试工具今天笔者介绍stm32初学者必会的工具 usart的串口设备. usart很重要,可以传输数据,可以检查代码的错误位置,查看输出数据. 下图就是 ...
AS下怎样录制APP操作生成Gif动态图
本文主要讲解Android下怎样录制APP操作生成gif动态图. Android App开发完成后,我们希望录制个gif做个展示.视频也可以展示,但是它没有gif轻量简单省流量.所以这篇文章就是讲解下 ...
Chrome DevTools 操作归纳
目录前言 1.打开开发者工具快捷键 2.在element 查看DOM节点 3. 实习编辑HTML 和 DOM (临时) 4.在console 中访问节点 5.给DOM断点调试(断点生效自能通过JS来 ...
chrome app之创建第一个开发程序
chrome app开发一概述二开发流程第1步:创建清单第2步:创建后台脚本第3步:创建一个窗口页面第4步:创建图标第5步:启动您的应用打开浏览器可扩展api选项加载您的应用执 ...

Chrome APP 操作读卡器串口

Chrome APP 操作读卡器串口相关推荐

最新文章

热门文章