当前位置：首页 > news >正文

以太网继电器控制页面

news 2025/10/6 13:35:20

智能家居使用以太网继电器控制比较多，经常见到基于enc28j60的Web服务器通讯。如果在家里·，就·可以使用手机登录Web服务器，控制继电器的开和关，就可以实现家庭无线控制了。我是用W5500来测试的，毕竟ioLibrary库比较容易取得，其次W5500比enc28j60在价格上比较便宜，其次，体积也较小。

1、html允许文本框输入，允许传输文本框中的数据到后台

程序设计难点，就是“index.html文件”设计，因为我们对HTML了解较少。我也是在网上搜索，然后修改，才可以实现的。现在就把这个文件贴出来，免得走弯路。

//下面是一个简单的index.html文件的示例：http://192.168.2.199/
#define index_page  "<!DOCTYPE html>"\
"<html>"\
"<head>"\
"<h2>以太网继电器控制页面</h2>"\
"<meta http-equiv='Content-Type' content='text/html; charset=GB2312'/>"\
"<style type='text/css'>"\
"body {text-align:left; background-color:#c0deed;font-family:Verdana;}"\
"#main {margin-right:auto;margin-left:auto;margin-top:30px;}"\
"label{display:inline-block;width:150px;}"\
"#main h3{color:#66b3ff; text-decoration:underline;}"\
"</style>"\
"<script>"\
"function $(id) { return document.getElementById(id); };"\
"function settingsCallback(o) {"\
"if ($('txtVersion')) $('txtVersion').value = 100;"\
"if ( $('txtIPAddress') ) $('txtIPAddress').value = o.ip;"\
"if ( $('txtSubnetMask') ) $('txtSubnetMask').value = o.sub;"\
"if ( $('txtGatewayIPAddress') ) $('txtGatewayIPAddress').value = o.gw;"\
"};"\
"</script>"\
"</head>"\
"<body>"\
"<div id='main'>"\
"<div style='background:snow; display:block;padding:10px 20px;'>"\
"<h3>智能家居</h3>"\
"<form id='frmSetting' method='POST' action='config.cgi'>"\
""\
"<script>"\
" function toggleSW1() {"\
"   const SW1 = document.getElementById(\"mySW1\");"\
"   if (SW1.value === \"关\") {"\
"     SW1.value = \"开\";RL1.value=1;"\
"   } else {"\
"     SW1.value = \"关\";RL1.value=0;"\
"   }"\
" }"\
" function toggleSW2() {"\
"   const SW2 = document.getElementById(\"mySW2\");"\
"   if (SW2.value === \"关\") {"\
"     SW2.value = \"开\";RL2.value=1;"\
"   } else {"\
"     SW2.value = \"关\";RL2.value=0;"\
"   }"\
" }"\
" function toggleSW3() {"\
"   const SW3 = document.getElementById(\"mySW3\");"\
"   if (SW3.value === \"关\") {"\
"     SW3.value = \"开\";RL3.value=1;"\
"   } else {"\
"     SW3.value = \"关\";RL3.value=0;"\
"   }"\
" }"\
" function toggleSW4() {"\
"   const SW4 = document.getElementById(\"mySW4\");"\
"   if (SW4.value === \"关\") {"\
"     SW4.value = \"开\";RL4.value=1;"\
"   } else {"\
"     SW4.value = \"关\";RL4.value=0;"\
"   }"\
" }"\
" function toggleSW5() {"\
"   const SW5 = document.getElementById(\"mySW5\");"\
"   if (SW5.value === \"关\") {"\
"     SW5.value = \"开\";RL5.value=1;"\
"   } else {"\
"     SW5.value = \"关\";RL5.value=0;"\
"   }"\
" }"\
" function toggleSW6() {"\
"   const SW6 = document.getElementById(\"mySW6\");"\
"   if (SW6.value === \"关\") {"\
"     SW6.value = \"开\";RL6.value=1;"\
"   } else {"\
"     SW6.value = \"关\";RL6.value=0;"\
"   }"\
" }"\
" function toggleSW7() {"\
"   const SW7 = document.getElementById(\"mySW7\");"\
"   if (SW7.value === \"关\") {"\
"     SW7.value = \"开\";RL7.value=1;"\
"   } else {"\
"     SW7.value = \"关\";RL7.value=0;"\
"   }"\
" }"\
" function toggleSW8() {"\
"   const SW8 = document.getElementById(\"mySW8\");"\
"   if (SW8.value === \"关\") {"\
"     SW8.value = \"开\";RL8.value=1;"\
"   } else {"\
"     SW8.value = \"关\";RL8.value=0;"\
"   }"\
" }"\
"</script>"\
\
"<p>"\
"<label for='RL1'>继电器1:</label>"\
"<input type='text' id='RL1' value=\"0\" name='Relay1' size='16' />"\
"<input type=\"button\" id=\"mySW1\" value=\"关\" onclick=\"toggleSW1()\" />"\
"</p>"\
\
"<p>"\
"<label for='RL2'>继电器2:</label>"\
"<input type='text' id='RL2' value=\"0\" name='Relay2' size='16' />"\
"<input type=\"button\" id=\"mySW2\" value=\"关\" onclick=\"toggleSW2()\" />"\
"</p>"\
\
"<p>"\
"<label for='RL3'>继电器3:</label>"\
"<input type='text' id='RL3' value=\"0\" name='Relay3' size='16' />"\
"<input type=\"button\" id=\"mySW3\" value=\"关\" onclick=\"toggleSW3()\" />"\
"</p>"\
\
"<p>"\
"<label for='RL4'>继电器4:</label>"\
"<input type='text' id='RL4' value=\"0\" name='Relay4' size='16' />"\
"<input type=\"button\" id=\"mySW4\" value=\"关\" onclick=\"toggleSW4()\" />"\
"</p>"\
\
"<p>"\
"<label for='RL5'>继电器5:</label>"\
"<input type='text' id='RL5' value=\"0\" name='Relay5' size='16' />"\
"<input type=\"button\" id=\"mySW5\" value=\"关\" onclick=\"toggleSW5()\" />"\
"</p>"\
\
"<p>"\
"<label for='RL6'>继电器6:</label>"\
"<input type='text' id='RL6' value=\"0\" name='Relay6' size='16' />"\
"<input type=\"button\" id=\"mySW6\" value=\"关\" onclick=\"toggleSW6()\" />"\
"</p>"\
\
"<p>"\
"<label for='RL7'>继电器7:</label>"\
"<input type='text' id='RL7' value=\"0\" name='Relay7' size='16' />"\
"<input type=\"button\" id=\"mySW7\" value=\"关\" onclick=\"toggleSW7()\" />"\
"</p>"\
\
"<p>"\
"<label for='RL8'>继电器8:</label>"\
"<input type='text' id='RL8' value=\"0\" name='Relay8' size='16' />"\
"<input type=\"button\" id=\"mySW8\" value=\"关\" onclick=\"toggleSW8()\" />"\
"</p>"\
\
"<p><input type='submit' value='提交' /></p>"\
"</form>"\
"</div>"\
"</div>"\
"<div style='margin:5px 5px;'>"\
"&copy;Copyright 2025 by 张工"\
"</div>"\
"<script type='text/javascript' src='w5500.js'></script>"\
"</body>"\
"</html>"

web网页显示界面如下：

我的W5500的IP地址为192.168.2.199，因此在浏览器里输入“http://192.168.2.199/”，就可以登录服务器了。见下图：

点击右边的按钮，设置继电器开或关，然后点击“提交”，就会将相关数据上传至服务器。接收到数据如下：

HTTP_Len=714
POST /config.cgi 0x20 HTTP/1.1
Host: 192.168.2.199
Connection: keep-alive
Content-Length: 71
Cache-Control: max-age=0
Origin: http://192.168.2.199
Content-Type: application/x-www-form-urlencoded
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Referer: http://192.168.2.199/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6

Relay1=1&Relay2=0&Relay3=0&Relay4=0&Relay5=0&Relay6=0&Relay7=0&Relay8=1

串口跟踪结果：

上图中的0x20是空格。收到数据，解析后，再控制相应的继电器开或关。收到的数据均为ASCii码，解析很容易实现。

ioLibrary库下载地址: https://gitcode.com/gh_mirrors/io/ioLibrary_Driver?utm_source=csdn_github_accelerator&isLogin=1

2、html不允许文本框输入，但允许传输文本框中的数据到后台

readonly：顾名思义，表示该输入域的值只能read，不能write，他仅仅只能与type="text"配合使用，可复制，可选择，可以接收焦点，后台会接收到传值。

对上面的程序进行修改，如下：

//下面是一个简单的index.html文件的示例：http://192.168.2.199/
#define index_page  "<!DOCTYPE html>"\
"<html>"\
"<head>"\
"<h2>以太网继电器控制页面</h2>"\
"<meta http-equiv='Content-Type' content='text/html; charset=GB2312'/>"\
"<style type='text/css'>"\
"body {text-align:left; background-color:#c0deed;font-family:Verdana;}"\
"#main {margin-right:auto;margin-left:auto;margin-top:30px;}"\
"label{display:inline-block;width:150px;}"\
"#main h3{color:#66b3ff; text-decoration:underline;}"\
"</style>"\
"<script>"\
"function $(id) { return document.getElementById(id); };"\
"function settingsCallback(o) {"\
"if ($('txtVersion')) $('txtVersion').value = 100;"\
"if ( $('txtIPAddress') ) $('txtIPAddress').value = o.ip;"\
"if ( $('txtSubnetMask') ) $('txtSubnetMask').value = o.sub;"\
"if ( $('txtGatewayIPAddress') ) $('txtGatewayIPAddress').value = o.gw;"\
"};"\
"</script>"\
"</head>"\
"<body>"\
"<div id='main'>"\
"<div style='background:snow; display:block;padding:10px 20px;'>"\
"<h3>智能家居</h3>"\
"<form id='frmSetting' method='POST' action='config.cgi'>"\
""\
"<script>"\
" function toggleSW1() {"\
"   const SW1 = document.getElementById('mySW1');"\
"   if (SW1.value === '关') {"\
"     SW1.value = '开';RL1.value=1;"\
"   } else {"\
"     SW1.value = '关';RL1.value=0;"\
"   }"\
" }"\
" function toggleSW2() {"\
"   const SW2 = document.getElementById('mySW2');"\
"   if (SW2.value === '关') {"\
"     SW2.value = '开';RL2.value=1;"\
"   } else {"\
"     SW2.value = '关';RL2.value=0;"\
"   }"\
" }"\
" function toggleSW3() {"\
"   const SW3 = document.getElementById('mySW3');"\
"   if (SW3.value === '关') {"\
"     SW3.value = '开';RL3.value=1;"\
"   } else {"\
"     SW3.value = '关';RL3.value=0;"\
"   }"\
" }"\
" function toggleSW4() {"\
"   const SW4 = document.getElementById('mySW4');"\
"   if (SW4.value === '关') {"\
"     SW4.value = '开';RL4.value=1;"\
"   } else {"\
"     SW4.value = '关';RL4.value=0;"\
"   }"\
" }"\
" function toggleSW5() {"\
"   const SW5 = document.getElementById('mySW5');"\
"   if (SW5.value === '关') {"\
"     SW5.value = '开';RL5.value=1;"\
"   } else {"\
"     SW5.value = '关';RL5.value=0;"\
"   }"\
" }"\
" function toggleSW6() {"\
"   const SW6 = document.getElementById('mySW6');"\
"   if (SW6.value === '关') {"\
"     SW6.value = '开';RL6.value=1;"\
"   } else {"\
"     SW6.value = '关';RL6.value=0;"\
"   }"\
" }"\
" function toggleSW7() {"\
"   const SW7 = document.getElementById('mySW7');"\
"   if (SW7.value === '关') {"\
"     SW7.value = '开';RL7.value=1;"\
"   } else {"\
"     SW7.value = '关';RL7.value=0;"\
"   }"\
" }"\
" function toggleSW8() {"\
"   const SW8 = document.getElementById('mySW8');"\
"   if (SW8.value === '关') {"\
"     SW8.value = '开';RL8.value=1;"\
"   } else {"\
"     SW8.value = '关';RL8.value=0;"\
"   }"\
" }"\
"</script>"\
\
"<p>"\
"<label for='RL1'>继电器1:</label>"\
"<input type='text' id='RL1' value='0' readonly='readonly' name='Relay1' size='16' />"\
"<input type='button' id='mySW1' value='关' onclick='toggleSW1()' />"\
"</p>"\
\
"<p>"\
"<label for='RL2'>继电器2:</label>"\
"<input type='text' id='RL2' value='0' readonly='readonly' name='Relay2' size='16' />"\
"<input type='button' id='mySW2' value='关' onclick='toggleSW2()' />"\
"</p>"\
\
"<p>"\
"<label for='RL3'>继电器3:</label>"\
"<input type='text' id='RL3' value='0' readonly='readonly' name='Relay3' size='16' />"\
"<input type='button' id='mySW3' value='关' onclick='toggleSW3()' />"\
"</p>"\
\
"<p>"\
"<label for='RL4'>继电器4:</label>"\
"<input type='text' id='RL4' value='0' readonly='readonly' name='Relay4' size='16' />"\
"<input type='button' id='mySW4' value='关' onclick='toggleSW4()' />"\
"</p>"\
\
"<p>"\
"<label for='RL5'>继电器5:</label>"\
"<input type='text' id='RL5' value='0' readonly='readonly' name='Relay5' size='16' />"\
"<input type='button' id='mySW5' value='关' onclick='toggleSW5()' />"\
"</p>"\
\
"<p>"\
"<label for='RL6'>继电器6:</label>"\
"<input type='text' id='RL6' value='0' readonly='readonly' name='Relay6' size='16' />"\
"<input type='button' id='mySW6' value='关' onclick='toggleSW6()' />"\
"</p>"\
\
"<p>"\
"<label for='RL7'>继电器7:</label>"\
"<input type='text' id='RL7' value='0' readonly='readonly' name='Relay7' size='16' />"\
"<input type='button' id='mySW7' value='关' onclick='toggleSW7()' />"\
"</p>"\
\
"<p>"\
"<label for='RL8'>继电器8:</label>"\
"<input type='text' id='RL8' value='0' readonly='readonly' name='Relay8' size='16' />"\
"<input type='button' id='mySW8' value='关' onclick='toggleSW8()' />"\
"</p>"\
\
"<p><input type='submit' value='提交' /></p>"\
"</form>"\
"</div>"\
"</div>"\
"<div style='margin:5px 5px;'>"\
"&copy;Copyright 2025 by 张工"\
"</div>"\
"<script type='text/javascript' src='w5500.js'></script>"\
"</body>"\
"</html>"

效果图：