使用jUART 完成 html javascript web串口测试

最新推荐文章于 2024-11-18 10:41:58 发布

chatpub.cn

最新推荐文章于 2024-11-18 10:41:58 发布

阅读量1.5k

点赞数

分类专栏：工作记录文章标签： juart html web串口

本文链接：https://blog.csdn.net/likang517/article/details/100018816

版权

工作记录专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1、下载jUART https://github.com/billhsu/jUART

2、For Windows, you need to register the DLL first. You can copy the DLL under SYSTEM32(or SYSWOW for 64 bit systems). After that there's no need to copy it to browser's folders.

3、regsvr32 C:\Windows\System32\npjUART.dll

4、制作网页串口调试，使用的360浏览器

<html> 
<head> 
<title>JavaScript串口测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
 
  <script   language="JavaScript"   type="text/JavaScript"> 
  <!-- 
 
String.prototype.Blength = function(){  
    var arr = this.match(/[^\x00-\xff]/ig);  
    return  arr == null ? this.length : this.length + arr.length;  
}  
 
 		 function pluginValid()
        {
            if(plugin().valid){
                alert(plugin().echo("This plugin seems to be working!"));
            } else {
                alert("Plugin is not working :(");
            }
        }
  var ser;
        function plugin0()
        {
            return document.getElementById('plugin0');
        }
        plugin = plugin0;
        
   function OperatePort()
  {
  	
  	 	ser = plugin().Serial;// Get a Serial object
			ser.open("COM4");// Open a port
			ser.set_option(9600,2,8,0,0);// Set port options 
			ser.recv_callback(recv); // Callback function for recieve data

     if(plugin().valid)
     {
      try{
       document.getElementById("OperateButton").value="打开串口";
      }catch(ex)
        {alert(ex.message);}       
     }
     else{
      try{ 
       document.getElementById("OperateButton").value="关闭串口";
      }catch(ex)
        {alert(ex.message);}     
     }
  }
 
  function ConfigPort()
  {
  alert(MSComm1.PortOpen);
    if(MSComm1.PortOpen==false)
    {   
      try{
        MSComm1.CommPort=document.getElementById("ComName").value;
        MSComm1.Settings=document.getElementById("BaudRate").value.toString()+
                         ","+document.getElementById("CheckBit").value.toString()+
                         ","+document.getElementById("DataBits").value.toString()+
                         ","+document.getElementById("StopBits").value.toString();   
        MSComm1.OutBufferCount =0;           //清空发送缓冲区
        MSComm1.InBufferCount = 0;           //滑空接收缓冲区                         
        alert("已配置串口COM"+MSComm1.CommPort+"\n 参数:"+MSComm1.Settings);       
        }catch(ex){alert(ex.message);}
    }
    else{ alert("请先关闭串口后再设置！");}
  }
  

//十六进制字符串转字节数组
function Str2Bytes(str){
    var pos = 0;
    var len = str.length;
    if (len % 2 != 0){
        return null;
    }
    len /= 2;
    var hexA = new Array();
    for (var i = 0; i < len; i++){
        var s = str.substr(pos, 2);
        var v = parseInt(s, 16);
        hexA.push(v);
        pos += 2;
    }
    return hexA;
}

//字节数组转十六进制字符串

function Bytes2Str(arr)

{

var str = "";

for(var i=0; i<arr.length; i++)

{

var tmp = arr[i].toString(16);

if(tmp.length == 1)

{

tmp = "0" + tmp;

}

str += tmp;

}

return str;

}


  function Send()
  {
    // alert(document.getElementById("txtSend").value);
     var orgstr=document.getElementById("txtSend").value;     
     var newstr="";
     var hexflag=document.getElementById("isSendHex").checked;

     if(hexflag&&orgstr!="")
     {

     }
     try{
		  orgstr = orgstr.replace(/\s/g,'');
      orgstr=Str2Bytes(orgstr);
      for(var i=0;i<orgstr.length;++i)
      {
          ser.send(orgstr[i]);
      }
     
     }catch(ex)     
     {alert(ex.message);}
  }
 
 	 function recv(bytes, size)
  {
  	var newstr="";
  	
  	newstr = Bytes2Str(bytes);
 
    document.getElementById("txtReceive").value += newstr;   
  
  }
  function ClearReceived()
  {
     document.getElementById("txtReceive").value="";
 } 
 
  --> 
 
</script>   

</head> 
<body>
 
<form name="form1">     
 
 
<fieldset style="width:200px;height:250px;text-align:center;">
<legend>配置串口</legend>
    <div style="float:left;width:200px">   
    <br/>   
    <span>串口号:</span>
    <select name="ComName" id="ComName" style="width:75px" >
    <option value="1"  >COM1</option>
    <option value="2"  >COM2</option>
   <option value="3" selected >COM3</option>
    <option value="4"  >COM4</option>   
    </select>   
    <br/>   
    <span>波特率:</span>
    <select name="BaudRate" id="BaudRate" style="width:75px" >
   <option value="9600" selected  >9600</option>
    <option value="57600"  >57600</option>
    <option value="115200" >115200</option>   
    </select>   
    <br/>
   
    <span>校验位:</span>
    <select name="CheckBit" id="CheckBit" style="width:75px" >
    <option value="N" selected  >无NONE</option>
    <option value="O"  >奇ODD</option>
    <option value="E" >偶EVEN</option>   
    </select>   
    <br/>   
   
    <span>数据位:</span>
    <input type=text id="DataBits" name="DataBits" value=8 style="width:75px;height:20px">
    <br/>
   
    <span>停止位:</span>
    <input type=text id="StopBits" name="StopBits" value=1 style="width:75px;height:20px">
    <br/>
    <br/>
    <input   type="button" id="ConfigButton" style="width:80px;height:30px;font-size:13px"   name="ConfigButton"   value="配置串口"   onClick="ConfigPort()">       
    <input   type="button" id="OperateButton" style="width:80px;height:30px;font-size:13px"   name="OperateButton"   value="打开串口"   onClick="OperatePort()">       
    </div> 
</fieldset>
 
 
 
<fieldset style="width:200px;height:250px;text-align:center;">
<legend>发送区域</legend>
<div style="float:left;">
    <textarea id="txtSend"  name="txtSend" style="width:200px;height:160px"></textarea> 
    <br/>
    <span><input id="isSendHex" name="isSendHex" type="checkbox" checked="0" />16进制</span>
    <input   type="button" id="SendButton" style="width:100px;height:30px"   name="SendButton"   value="发送"   onClick="Send()">   
</div> 
</fieldset>
 
<fieldset style="width:200px;height:250px;text-align:center;">
<legend>接收区域</legend>   
<div style="float:left;">
    <textarea id="txtReceive" READONLY=TRUE  name="txtReceive" style="width:200px;height:160px"></textarea>  
    <br/>
  <span><input id="isReceiveHex" name="isReceiveHex" type="checkbox" />16进制</span>
    <input  type="button" id="ClearButton" style="width:100px;height:30px"   name="ClearButton"   value="清空"   onClick="ClearReceived()">
</div>
</fieldset>   
 
 
</form> 
 <object id="plugin0" type="application/x-juart" WIDTH=100 HEIGHT=51 >
            <param name="onload" value="pluginLoaded"  />
        </object><br />
</body> 
</html>