极客工坊

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 17005|回复: 1

【HTML+JS控制Arduino】HTML+JS连接串口/wifi 实现控制Arduino

[复制链接]
发表于 2016-12-3 14:50:31 | 显示全部楼层 |阅读模式
本帖最后由 Hellmessage 于 2016-12-3 14:58 编辑

不多说什么 直接上图:


其实呢 原理很简单 通过html调用系统组件:MSCOMM32.OCX
然后设置参数
  1. <OBJECT id="MSComm1" CLASSID="clsid:648A5600-2C6E-101B-82B6-000000000014" codebase="MSCOMM32.OCX" type="application/x-oleobject"  style="left:54px;top:14px" >
  2.         <PARAM   NAME="CommPort"   VALUE="15"/><!--串口号 -->
  3.         <PARAM   NAME="DataBits"   VALUE="8"/>
  4.         <PARAM   NAME="StopBits"   VALUE="1"/>
  5.         <PARAM   NAME="BaudRate"   VALUE="9600"/> <!-- 波率 -->
  6.         <PARAM   NAME="Settings"   VALUE="9600,N,8,1"/><!-- 波率 -->
  7.         <PARAM   NAME="RTSEnable"   VALUE="1"/>
  8.         <PARAM   NAME="DTREnable"   VALUE="1"/>
  9.         <PARAM   NAME="Handshaking"   VALUE="0"/>
  10.         <PARAM   NAME="NullDiscard"   VALUE="0"/>
  11.         <PARAM   NAME="ParityReplace"   VALUE="?"/>
  12.         <PARAM   NAME="EOFEnable"   VALUE="0"/>
  13.         <PARAM   NAME="InputMode"   VALUE="0"/>
  14.         <PARAM   NAME="InBufferSize"   VALUE="1024"/>
  15.         <PARAM   NAME="InputLen"   VALUE="0"/>
  16.         <PARAM   NAME="OutBufferSize"   VALUE="512"/>
  17.         <PARAM   NAME="SThreshold"   VALUE="0"/>
  18.         <PARAM   NAME="RThreshold"   VALUE="1"/>
  19. </OBJECT>
复制代码


接着 声明一个function 用来接收和发送数据

  1. <SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
  2.         function MSComm1_OnComm(){      
  3.                 switch(MSComm1.CommEvent){
  4.                         case 1:{ window.alert("Send OK!"); break;}
  5.                         case 2: { Receive();break;} //接收事件
  6.                         default: alert("Event Raised!"+MSComm1.CommEvent);;
  7.                 }      
  8.         }  
  9. </SCRIPT>
  10. //每次执行完MSComm1 都会调用一次MSComm1_OnComm();
  11. <SCRIPT LANGUAGE=javascript FOR=MSComm1 EVENT=OnComm>
  12.         MSComm1_OnComm();
  13. </SCRIPT>
复制代码


然后js控制开关串口
  1. <script type="text/javascript">        var Serial = $("#SerialName");
  2.         var Begin = $("#SerialBegin");
  3.         var ThisBtn = $("#openSerial");
  4.         function OpenPort() {
  5.                 try {
  6.                         var SerialName = Serial.val();
  7.                         var SerialBegin = Begin.val();
  8.                         if (SerialName == "" || isNaN(SerialName)) {
  9.                                 Serial.focus().val("");
  10.                                 return false;
  11.                         }
  12.                         if (SerialBegin == "" || isNaN(SerialBegin)) {
  13.                                 Begin.focus().val("");
  14.                                 return false;
  15.                         }
  16.                         MSComm1.CommPort = SerialName;
  17.                         MSComm1.BaudRate = SerialBegin;
  18.                         MSComm1.Settings = SerialBegin + ",N,8,1";
  19.                         MSComm1.OutBufferCount = 0;
  20.                         MSComm1.InBufferCount = 0;
  21.                         MSComm1.PortOpen = true;
  22.                         ThisBtn.addClass("openSerialBtnOn").val("关闭串口");
  23.                         Serial.attr("disabled", "true");
  24.                         Begin.attr("disabled", "true");
  25.                 } catch(ex) {
  26.                         alert(ex.message);
  27.                 }
  28.         }
  29.         function ClockPort() {
  30.                 try {
  31.                         MSComm1.OutBufferCount = 0;
  32.                         MSComm1.InBufferCount = 0;
  33.                         MSComm1.PortOpen = false;
  34.                         ThisBtn.removeClass("openSerialBtnOn").val("打开串口");
  35.                         Serial.removeAttr("disabled");
  36.                         Begin.removeAttr("disabled");
  37.                 } catch(ex) {
  38.                         alert(ex.message);
  39.                 }
  40.         }
  41. </script>
复制代码



Log输出 和输入窗口代码:

  1. <p class="center title">串口输出</p><textarea disabled="true" spellcheck="false" id="OnLog"></textarea>
  2. <p class="center title">串口输入</p>
  3. <textarea disabled="true" spellcheck="false" id="Tolog"></textarea>
复制代码

  1. <script type="text/javascript">        function Receive() {
  2.                 document.getElementById("OnLog").value += hexToString(MSComm1.Input) + "\n";
  3.                 document.getElementById('OnLog').scrollTop = document.getElementById('OnLog').scrollHeight;
  4.         }
  5.         function SendLog(data) {
  6.                 document.getElementById("Tolog").value += data + "\n";
  7.                 document.getElementById('Tolog').scrollTop = document.getElementById('OnLog').scrollHeight;
  8.         }
  9. </script>
复制代码



js转码:

  1. function stringToHex(str) {//字符串转16进制
  2.     var val = "";
  3.     for (var i = 0; i < str.length; i++) {
  4.         if (val == ""){
  5.             val = "0x"+str.charCodeAt(i).toString(16);
  6.         } else {
  7.             val += ",0x" + str.charCodeAt(i).toString(16);
  8.         }
  9.     }
  10.     return val;
  11. }

  12. function hexToString(str) {//16进制转字符串 
  13.     var val = "";
  14.     var arr = str.split(",");
  15.     for (var i = 0; i < arr.length; i++) {
  16.         var now = arr.replace("0x","");
  17.         val += String.fromCharCode(parseInt(now,16));//16进制先转成10进制 再用String.fromCharCode()转成字符串

  18.     }
  19.     return val;
  20. }
复制代码





Arduino 测试代码:

  1. void setup() {
  2.   // put your setup code here, to run once:
  3.   Serial.begin(9600);
  4. }

  5. void loop() {
  6.   if (Serial.available() > 0) {
  7.       Serial.print(char(Serial.read()));
  8.    }
  9. }
复制代码


有什么问题可以联系的QQ:617494454


源码下载地址(有些东西还没写好,后面会更新):链接:http://pan.baidu.com/s/1gfxAFHD 密码:ylsc


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
回复

使用道具 举报

发表于 2016-12-5 09:29:35 | 显示全部楼层
没太搞明白,有没有个数据流的框图?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则 需要先绑定手机号

Archiver|联系我们|极客工坊

GMT+8, 2024-3-28 23:25 , Processed in 0.052369 second(s), 20 queries .

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表