【HTML+JS控制Arduino】HTML+JS连接串口/wifi 实现控制Arduino
本帖最后由 Hellmessage 于 2016-12-3 14:58 编辑不多说什么 直接上图：
其实呢 原理很简单 通过html调用系统组件：MSCOMM32.OCX
然后设置参数
<OBJECT id="MSComm1" CLASSID="clsid:648A5600-2C6E-101B-82B6-000000000014" codebase="MSCOMM32.OCX" type="application/x-oleobject"style="left:54px;top:14px" >
<PARAM NAME="CommPort" VALUE="15"/><!--串口号 -->
<PARAM NAME="DataBits" VALUE="8"/>
<PARAM NAME="StopBits" VALUE="1"/>
<PARAM NAME="BaudRate" VALUE="9600"/> <!-- 波率 -->
<PARAM NAME="Settings" VALUE="9600,N,8,1"/><!-- 波率 -->
<PARAM NAME="RTSEnable" VALUE="1"/>
<PARAM NAME="DTREnable" VALUE="1"/>
<PARAM NAME="Handshaking" VALUE="0"/>
<PARAM NAME="NullDiscard" VALUE="0"/>
<PARAM NAME="ParityReplace" VALUE="?"/>
<PARAM NAME="EOFEnable" VALUE="0"/>
<PARAM NAME="InputMode" VALUE="0"/>
<PARAM NAME="InBufferSize" VALUE="1024"/>
<PARAM NAME="InputLen" VALUE="0"/>
<PARAM NAME="OutBufferSize" VALUE="512"/>
<PARAM NAME="SThreshold" VALUE="0"/>
<PARAM NAME="RThreshold" VALUE="1"/>
</OBJECT>
接着 声明一个function 用来接收和发送数据
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
function MSComm1_OnComm(){
switch(MSComm1.CommEvent){
case 1:{ window.alert("Send OK！"); break;}
case 2: { Receive();break;} //接收事件
default: alert("Event Raised!"+MSComm1.CommEvent);;
}
}
</SCRIPT>
//每次执行完MSComm1 都会调用一次MSComm1_OnComm();
<SCRIPT LANGUAGE=javascript FOR=MSComm1 EVENT=OnComm>
MSComm1_OnComm();
</SCRIPT>
然后js控制开关串口
<script type="text/javascript"> var Serial = $("#SerialName");
var Begin = $("#SerialBegin");
var ThisBtn = $("#openSerial");
function OpenPort() {
try {
var SerialName = Serial.val();
var SerialBegin = Begin.val();
if (SerialName == "" || isNaN(SerialName)) {
Serial.focus().val("");
return false;
}
if (SerialBegin == "" || isNaN(SerialBegin)) {
Begin.focus().val("");
return false;
}
MSComm1.CommPort = SerialName;
MSComm1.BaudRate = SerialBegin;
MSComm1.Settings = SerialBegin + ",N,8,1";
MSComm1.OutBufferCount = 0;
MSComm1.InBufferCount = 0;
MSComm1.PortOpen = true;
ThisBtn.addClass("openSerialBtnOn").val("关闭串口");
Serial.attr("disabled", "true");
Begin.attr("disabled", "true");
} catch(ex) {
alert(ex.message);
}
}
function ClockPort() {
try {
MSComm1.OutBufferCount = 0;
MSComm1.InBufferCount = 0;
MSComm1.PortOpen = false;
ThisBtn.removeClass("openSerialBtnOn").val("打开串口");
Serial.removeAttr("disabled");
Begin.removeAttr("disabled");
} catch(ex) {
alert(ex.message);
}
}
</script>
Log输出 和输入窗口代码：
<p class="center title">串口输出</p><textarea disabled="true" spellcheck="false" id="OnLog"></textarea>
<p class="center title">串口输入</p>
<textarea disabled="true" spellcheck="false" id="Tolog"></textarea>
<script type="text/javascript"> function Receive() {
document.getElementById("OnLog").value += hexToString(MSComm1.Input) + "\n";
document.getElementById('OnLog').scrollTop = document.getElementById('OnLog').scrollHeight;
}
function SendLog(data) {
document.getElementById("Tolog").value += data + "\n";
document.getElementById('Tolog').scrollTop = document.getElementById('OnLog').scrollHeight;
}
</script>
js转码：
function stringToHex(str) {//字符串转16进制
var val = "";
for (var i = 0; i < str.length; i++) {
if (val == ""){
val = "0x"+str.charCodeAt(i).toString(16);
} else {
val += ",0x" + str.charCodeAt(i).toString(16);
}
}
return val;
}
function hexToString(str) {//16进制转字符串
var val = "";
var arr = str.split(",");
for (var i = 0; i < arr.length; i++) {
var now = arr.replace("0x","");
val += String.fromCharCode(parseInt(now,16));//16进制先转成10进制 再用String.fromCharCode()转成字符串
}
return val;
}
Arduino 测试代码：
void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
}
void loop() {
if (Serial.available() > 0) {
Serial.print(char(Serial.read()));
}
}
有什么问题可以联系的QQ：617494454
源码下载地址（有些东西还没写好，后面会更新）：链接：http://pan.baidu.com/s/1gfxAFHD 密码：ylsc
没太搞明白，有没有个数据流的框图？
页:
[1]