分享 UCOS+LWIP+STM32F407+HTML网页

andy_hu · 发表于 2017-6-19 21:23:16

这个东西原理简单，就是要懂一些HTML语言，然后LWIP网络编程模拟一个简单的网站。可用于参数配置，非常适合那种不带液晶屏和按键，但又有大量数据要配置的设备。直接用浏览器配置数据，免去了上位机配置软件的开发，方便使用。

/*web 任务*/
void task_for_web_server(void *arg)
{
int retval;
int web_listen_sockfd;
int i;
int rcvlen, sndlen;
int curRecePos=0;
socklen_t addrlen;
struct sockaddr_in srv_sockaddr,cln_sockaddr;

OSTimeDlyHMSM(0,0,1,0);//==d等系统准备好
web_server_init();

memset(&srv_sockaddr, 0, sizeof(struct sockaddr_in));
#if !(defined LWIP_BSD_SOCKER && LWIP_BSD_SOCKER > 0)
srv_sockaddr.sin_len = sizeof(struct sockaddr_in);
#endif
srv_sockaddr.sin_family = AF_INET;
srv_sockaddr.sin_port = htons(80);
srv_sockaddr.sin_addr.s_addr = htonl(INADDR_ANY);

//=======
printf("task_for_http_server go...\r\n");
for(;;)
{
      /* 创建TCP socket. */
      web_listen_sockfd = socket(AF_INET, SOCK_STREAM, IPPROTO_TCP);
      if(web_listen_sockfd == (-1))
      {
         printf("\nERR:web_listen_sockfd ceate errlog=%d\n",errno);
         close(web_listen_sockfd);
         continue;
      }
      setsockopt(web_listen_sockfd, SOL_SOCKET, SO_REUSEADDR, &attr_bind, sizeof(attr_bind));

      /* 绑定socket IP地址及端口号. */
      addrlen = sizeof(struct sockaddr_in);
      retval  = bind(web_listen_sockfd, (struct sockaddr *)&srv_sockaddr, addrlen);
      if(retval == (-1))
      {
         printf("\nERR:web_listen_sockfd bind errlog=%d\n",errno);
         close(web_listen_sockfd);
         continue;
      }


      /* 侦听socket连接. */
      retval = listen(web_listen_sockfd, 1);
      if(retval == (-1))
      {
         printf("\nERR:web_listen_sockfd listen  errlog=%d\n",errno);
         close(web_listen_sockfd);
         OSTimeDlyHMSM(0,0,3,0);
         continue;
      }

      /* 处理链接，循环接受数据. */
      while (1)
      {
         /* 阻塞等待客户端建立连接. */
         printf("\nHttpServer wait accept......\n ");
         socket_fd_web = accept(web_listen_sockfd, (struct sockaddr *)&cln_sockaddr, &addrlen);
         if (socket_fd_web == (-1))
         {
            printf("\r\nERR:socket_fd_web accept=%d errlog=%d\n",socket_fd_web,errno);
            close(web_listen_sockfd);
            break;
         }

         //=====链接建立，循环等待接收
         curRecePos = 0;
         do
         {
            /* 阻塞接收客户端数据报文. */
            rcvlen= recv(socket_fd_web,&httpReceBuf[curRecePos],sizeof(httpReceBuf)-curRecePos,0);//MSG_DONTWAIT
            printf("\nrecv return len=%d\n",rcvlen);
            if(rcvlen>0)
            {
                  curRecePos=curRecePos+rcvlen;
                  httpReceBuf[curRecePos]=0;  //增加字符串解锁标识
                  if((0==IsDataRecvFinish(httpReceBuf))||(curRecePos>=sizeof(httpReceBuf)))
               {
                     processhttpdata(curRecePos);
                     curRecePos=0;
               }
            }
            else
            {
                  printf("\nERR:recv return len<=0\n");
                  printf("\nerr log =%d\n",errno);
                  curRecePos = 0;
            }
         } while (rcvlen >0);
         closesocket(socket_fd_web);
      }
      close(web_listen_sockfd);
      printf("\nHttpServer close listenSockfd ");
}
}
/*打包网页HTML信息*/
******************************************************************************************************/
int web_server_packet_cfg_page_html(char *out_pack_buff)
{
out_pack_buff[0] = 0;

/*网页文件头部*/
sprintf(out_pack_buff+strlen(out_pack_buff),"<HTML><head><title>网络通信参数</title><meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" /></head><body>");
sprintf(out_pack_buff+strlen(out_pack_buff),"<div style=\"width: 400px; height: 300px; position:absolute; left: 50%;top: 50%;\">");
sprintf(out_pack_buff+strlen(out_pack_buff),"<form name=\"NetcardPage\" action=\"\" method=\"POST\">");
sprintf(out_pack_buff+strlen(out_pack_buff),"<table style=\"width: 400px; border-collapse: collapse;\">");

/*信息内容*/
/*本地IP*/
sprintf(out_pack_buff+strlen(out_pack_buff),"<tr style=\"border: black 1px solid; height: 3px; font-size: 14px;\"><td>本  地IP:</td>");
sprintf(out_pack_buff+strlen(out_pack_buff),"<td><input name=\"IP1addr1\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\">.", cfgdata.local_ip[0]);
sprintf(out_pack_buff+strlen(out_pack_buff),"<input name=\"IP1addr2\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\">.", cfgdata.local_ip[1]);
sprintf(out_pack_buff+strlen(out_pack_buff),"<input name=\"IP1addr3\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\">.", cfgdata.local_ip[2]);
sprintf(out_pack_buff+strlen(out_pack_buff),"<input name=\"IP1addr4\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\"></td></tr>",  cfgdata.local_ip[3]);

/*子网掩码*/
sprintf(out_pack_buff+strlen(out_pack_buff),"<tr style=\"border: black 1px solid; height: 30px; font-size: 14px;\"><td>子网掩码:</td>");
sprintf(out_pack_buff+strlen(out_pack_buff),"<td><input name=\"IP1Mask1\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\">.", cfgdata.sub_mask[0]);
sprintf(out_pack_buff+strlen(out_pack_buff),"<input name=\"IP1Mask2\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\">.", cfgdata.sub_mask[1]);
sprintf(out_pack_buff+strlen(out_pack_buff),"<input name=\"IP1Mask3\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\">.", cfgdata.sub_mask[2]);
sprintf(out_pack_buff+strlen(out_pack_buff),"<input name=\"IP1Mask4\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\"></td></tr>", cfgdata.sub_mask[3]);

/*网关*/
sprintf(out_pack_buff+strlen(out_pack_buff),"<tr style=\"border: black 1px solid; height: 30px; font-size: 14px;\"><td>网关:</td>");
sprintf(out_pack_buff+strlen(out_pack_buff),"<td><input name=\"IP1GateWay1\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\">.", cfgdata.gate_way[0]);
sprintf(out_pack_buff+strlen(out_pack_buff),"<input name=\"IP1GateWay2\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\">.", cfgdata.gate_way[1]);
sprintf(out_pack_buff+strlen(out_pack_buff),"<input name=\"IP1GateWay3\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\">.", cfgdata.gate_way[2]);
sprintf(out_pack_buff+strlen(out_pack_buff),"<input name=\"IP1GateWay4\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\"></td></tr>", cfgdata.gate_way[3]);

/*本地端口*/
sprintf(out_pack_buff+strlen(out_pack_buff),"<tr style=\"border: black 1px solid; height: 30px; font-size: 14px;\"><td>本地端口:</td>");
sprintf(out_pack_buff+strlen(out_pack_buff),"<td><input name=\"LocalPort\" type=\"text\" size=\"5\" maxlength=\"5\" value=\"%d\"></td></tr>", cfgdata.local_port);

/*远方IP*/
sprintf(out_pack_buff+strlen(out_pack_buff),"<tr style=\"border: black 1px solid; height: 30px; font-size: 14px;\"><td>远方IP:</td>");
sprintf(out_pack_buff+strlen(out_pack_buff),"<td><input name=\"IP1Ser1\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\">.", cfgdata.remote_ip[0]);
sprintf(out_pack_buff+strlen(out_pack_buff),"<input name=\"IP1Ser2\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\">.", cfgdata.remote_ip[1]);
sprintf(out_pack_buff+strlen(out_pack_buff),"<input name=\"IP1Ser3\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\">.", cfgdata.remote_ip[2]);
sprintf(out_pack_buff+strlen(out_pack_buff),"<input name=\"IP1Ser4\" type=\"text\" size=\"3\" maxlength=\"3\" value=\"%d\"></td></tr>", cfgdata.remote_ip[3]);

/*远方端口*/
sprintf(out_pack_buff+strlen(out_pack_buff),"<tr style=\"border: black 1px solid; height: 30px; font-size: 14px;\"><td>远方端口:</td>");
sprintf(out_pack_buff+strlen(out_pack_buff),"<td><input name=\"RemotePort\" type=\"text\" size=\"5\" maxlength=\"5\" value=\"5000\"></td></tr>", cfgdata.remote_port);

/*协议类型*/
sprintf(out_pack_buff+strlen(out_pack_buff),"<tr style=\"border: black 1px solid; height: 30px; font-size: 14px;\"><td>通信协议:</td>");
sprintf(out_pack_buff+strlen(out_pack_buff),"<td><select name=\"ProcType\">");
if(cfgdata.proc_type==1)
{
      sprintf(out_pack_buff+strlen(out_pack_buff),"<option value=\"1\" selected=\"selected\">UDP</option>");
      sprintf(out_pack_buff+strlen(out_pack_buff),"<option value=\"2\" >TCP_SERVER</option>");
      sprintf(out_pack_buff+strlen(out_pack_buff),"<option value=\"3\">TCP_CLIENT</option>");
}
else if(cfgdata.proc_type==3)
{
      sprintf(out_pack_buff+strlen(out_pack_buff),"<option value=\"1\">UDP</option>");
      sprintf(out_pack_buff+strlen(out_pack_buff),"<option value=\"2\">TCP_SERVER</option>");
      sprintf(out_pack_buff+strlen(out_pack_buff),"<option value=\"3\" selected=\"selected\">TCP_CLIENT</option>");
}
else
{
      sprintf(out_pack_buff+strlen(out_pack_buff),"<option value=\"1\">UDP</option>");
      sprintf(out_pack_buff+strlen(out_pack_buff),"<option value=\"2\" selected=\"selected\">TCP_SERVER</option>");
      sprintf(out_pack_buff+strlen(out_pack_buff),"<option value=\"3\">TCP_CLIENT</option>");
}
sprintf(out_pack_buff+strlen(out_pack_buff),"</select></td></tr>");

/*尾部*/
sprintf(out_pack_buff+strlen(out_pack_buff),"<tr><td style=\"height: 40px; text-align: center;\" colspan=\"2\"><input name=\"save\" type=\"submit\" value=\"保存\">");
sprintf(out_pack_buff+strlen(out_pack_buff),"   <input name=\"reset\" type=\"reset\" value=\"重置\"></td></tr></table></form></div></BODY></HTML>");

return strlen(out_pack_buff);
}

NIC · 发表于 2017-6-19 23:20:54

楼主把整个工程分享出来呗

zxq6 · 发表于 2017-6-20 06:59:07

挺好得。不过我都喜欢用udp加一个客户端，编程简单得多。

Excellence · 发表于 2017-6-20 08:04:41

好。谢谢楼主。。。。。

ljt80158015 · 发表于 2017-6-20 08:26:28

lwip socket接口稳定吗？

zcllom · 发表于 2017-6-20 13:08:27

搞个简易的工程模板方便我等借鉴

syj0925 · 发表于 2017-6-20 13:38:46

谢谢分享，后续又开发，再来参考。

aming2046 · 发表于 2017-6-20 13:39:33

楼主能否用动态的彩色的界面来实现，也就是用浏览器取代平时炫酷的手机APP的效果，同时改成用WIFI与电脑或手机连接

fengyunyu · 发表于 2017-6-20 14:05:22

也用lwip，raw api模式

zcllom · 发表于 2017-6-20 15:08:03

我最近一个项目也有做过通过网页配置参数。
用的是STM32F103+W5500+UCOS

tangmintm8013TM · 发表于 2017-6-20 17:59:24

厉害，楼主上个工程让我们学习下！

andy_hu · 发表于 2017-6-21 12:40:15

aming2046 发表于 2017-6-20 13:39
楼主能否用动态的彩色的界面来实现，也就是用浏览器取代平时炫酷的手机APP的效果，同时改成用WIFI与电脑或 ...

彩色动态网页的HTML文件会很大,不适合在这里用, 板子那点存储空间还不够存几个网页的.

andy_hu · 发表于 2017-6-21 12:47:29

NIC 发表于 2017-6-19 23:20
楼主把整个工程分享出来呗

这个是我给公司作的产品, 工程不好分享哦!! 其实我主要是想分享一种方法, 难度也不是很大,就是要懂得一些HTML, 真有需要可以私信我!

Yaksa · 发表于 2017-6-21 13:32:38

zcllom 发表于 2017-6-20 15:08
我最近一个项目也有做过通过网页配置参数。
用的是STM32F103+W5500+UCOS

这个做的漂亮，W5500免得调协议栈了，能分享一下吗？

小溪 · 发表于 2017-6-21 14:59:47

学习一下，如果有工程文件就更好了

maoxue121225 · 发表于 2017-6-23 10:43:06

这个是个好东西，谢谢分享。可以参考一下。

lhaoyue · 发表于 2017-6-23 13:21:19

mark UCOS+LWIP+STM32F407+HTML网页

dream215 · 发表于 2018-1-12 16:11:31

mark UCOS+LWIP+STM32F407+HTML网页

分享 UCOS+LWIP+STM32F407+HTML网页

本帖子中包含更多资源

阿莫论坛20周年了！感谢大家的支持与爱护！！

本帖子中包含更多资源