[OK210开发板体验]系统篇(4)基于OK210的智能家居系统之整合

前面介绍了OK210基于Linux的功能篇:LED、Key按、DS18B20温度传感器、PWM蜂鸣器、红外遥控和ADC模数的驱动以及系统篇:Boa服务器搭建、Bootstrap前端设计、CGI后端设计CGI,今天介绍基于OK210的智能家居系统的整合,即通过构建Boa服务器,来控制OK210上的设备资源。对设备资源的访问是通过前面介绍的驱动进行的,对设备资源的控制是通过前面介绍的Boa服务器前端控制的。
    本节主要分3个部分:
  • 1 对驱动的管理
  • 2 对驱动的访问
  • 3 对界面的控制
一、对驱动的管理
前面对驱动的体验都是通过手动加载上去的(insmod\rmmod\lsmod),现在要改成上电启动后,自动加载,具体方法见【OK210试用体验】入门篇(4)编程入门(NFS登录、驱动入门)中的附录模板,这里要加载的驱动有,LED驱动、Key按按驱动、DS18B20温度传感器驱动、PWM蜂鸣器驱动、ADC模数驱动等,具体的驱动代码,见相关章节。
二、对驱动的访问
1 新建文件和目录:对驱动的访问,通过接口函数来实现,
首先在Boa服务器的CGI目录下,新建各自的源文件和头文件,
其次,新建一配置文件config.ini,用来放置一些系统的初始化数据
再次,新建一控制文件main-cgi.c,用来响应或管理前端的数据
最后的文件目录如下所示:
 
2 关键代码说明
  1. if( (fp_html=fopen("./../main.html","r")) == NULL)//打开网页主页面
  2.         {
  3.                 exit(1);//如果打不开,直接退出
  4.         }
  5.         while(fgets(buf,512,fp_html))//每次获取主页面上的512个字符,直到读取完
  6.         {
  7.                 if(strncmp(buf,"$CurTemp$",9)==0)//如果找到温度的显示位置
  8.                 {
  9.                         ds18b20_fun(temperation);//读取OK210上的DS18B20的数据
  10.                         if (temperation[0]>0&&temperation[1]>0)
  11.                                 printf("  %2d.%d ℃\n", temperation[0], temperation[1]);//更新数据显示
  12.                         else
  13.                                 printf("  85.0 ℃\n");
  14.                         //printf("  85.0 ℃\n");
  15.                 }
  16.                 else if(strncmp(buf,"$CurHumidity$",13)==0)<font size="2"><font face="Tahoma"><font size="3">//如果找到湿度的显示位置</font></font></font>
  17.                 {
  18.                         adc_data = adc_fun(0);//通过ADC模拟湿度,读取模拟值
  19.                         printf("     %2d %\n", (adc_data/100));<font size="2"><font face="Tahoma"><font size="3">//更新数据显示</font></font></font>
  20.                 }
  21.                 else if(strncmp(buf,"$PWMMotor$",10)==0)//通过PWM模拟窗帘动作<font size="2"><font face="Tahoma"><font size="3"></font></font></font>
  22.                 {
  23.                         if(pwm_config[0]==0)
  24.             {
  25.                 printf("<img src=\"./../bootstrap-3.3.5-dist/image/off.png\" width=30 height=30 hspace=35 >");<font size="2"><font face="Tahoma"><font size="3"><font size="2"><font face="Tahoma"><font size="3">//更新显示状态</font></font></font></font></font></font>
  26.             }
  27.             else
  28.             {
  29.                 printf("<img src=\"./../bootstrap-3.3.5-dist/image/on.png\" width=30 height=30 hspace=35 >");
  30.             }
  31.                 }
  32.                 else if(strncmp(buf,"$LedSwitch$",11)==0)<font size="2"><font face="Tahoma"><font size="3">//通过LED模拟开关动作</font></font></font>
  33.                 {
  34.                         int i=0;
  35.                         for(i=0; i < 4; i++)
  36.                         {
  37.                                 if(led_config[i]==1)
  38.                                 {
  39.                                         printf("<img src=\"./../bootstrap-3.3.5-dist/image/off.png\" width=30 height=30 hspace=35 >");<font size="2"><font face="Tahoma"><font size="3"><font size="2"><font face="Tahoma"><font size="3"><font size="2"><font face="Tahoma"><font size="3">//更新显示状态</font></font></font></font></font></font></font></font></font>
  40.                                 }
  41.                                 else
  42.                                 {
  43.                                         printf("<img src=\"./../bootstrap-3.3.5-dist/image/on.png\" width=30 height=30 hspace=35 >");
  44.                                 }
  45.                         }
  46.                 }
  47.                 else
  48.                         printf("%s",buf);<font size="2"><font face="Tahoma"><font size="3"><font size="2"><font face="Tahoma"><font size="3"><font size="2"><font face="Tahoma"><font size="3">//否则保护原来的数据</font></font></font></font></font></font></font></font></font>
  49.         }
复制代码
3编译
arm-linux-gcc -o main-cgi.cgi main-cgi.c ds18b20-cgi.c adc-cgi.c leds-cgi.c pwm-cgi.c
三、对界面的控制
1 界面设计
1)主要有3个界面,index.html,login.html,main.html
boa服务器首先启动index.html文件(在boa.conf中设置),在该页面,通过登录按键,将页面跳转到login.html界面,如下代码:
  1. <p><a class="btn btn-lg btn-success" href="login.html" role="button">登录</a></p>
复制代码
在login.html中,通过登录按键,触发onclick事件,该事件响应myFunction()函数,如下代码所示:
  1. <button class="btn btn-lg btn-primary btn-block" onclick="myFunction()" type="submit">登录</button>
复制代码
在myFunction()函数,验证提交的登录信息,如果正确,则跳转到main-cgi.cig文件。
  1. if(document.getElementById("inputEmail").value=="gjianw217@163.com"&&document.getElementById("inputPassword").value=="111111")
  2. {
  3. window.open("./cgi-bin/main-cgi.cgi");
  4. }
复制代码
在main-cgi.cgi中,首先打开main.html文件,获取信息后,再输出的页面上。
2 主界面
主界面主要通过表单<form>和cgi进行数据的交互,如环境检测表单,用来显示温度值和湿度值。其中湿度值是模拟值。代码中有两点值得注意
1)表单数据的提交方法,使用post
2)表单中通过变量$xx$来定位数据
  1.      <font size="2"><font face="Tahoma"><font size="3"><FORM  class="form-horizontal" role="form" METHOD="post"></font></font></font>
  2. <legend>环境检测</legend>
  3.            <div class="form-group">
  4.                     <label class="col-sm-2 control-label" for="ds_id">温度检测</label>
  5.                     <div class="col-sm-4">
  6.                         <p><font color="red"><h5 align=center> 温    度
  7. $CurTemp[        DISCUZ_CODE_1046        ]lt;/h5><b>
  8.                      </div>
  9.            </div>
  10.            <div class="form-group">
  11.                     <label class="col-sm-2 control-label" for="ds_id">湿度检测</label>
  12.                     <div class="col-sm-4">
  13.                         <p><font color="red"><h5 align=center> 湿    度
  14. $CurHumidity[        DISCUZ_CODE_1046        ]lt;/h5><b>
  15.                      </div>
  16.            </div>
  17.                         
  18.   </form>
复制代码
再如通过led灯来模拟开关,同样注意表单的提交方法(post)和变量的设置
  1. <FORM  class="form-horizontal" role="form" METHOD="post">
  2. <legend>灯光控制</legend>
  3. $LedSwitch$
  4.         <br>
  5.         <input type="submit" name="led2" value=" 卧  室 "> 
  6.         <input type="submit" name="led2" value=" 厨  房 "> 
  7.         <input type="submit" name="led3" value=" 客  厅 "> 
  8.         <input type="submit" name="led4" value=" 卫生间 "> 
  9.         <br>

  10. </FORM>
复制代码
3 调试结果
最后附几张调试图片
1)下图为登录控制界面后,当前的温度为32.10度,湿度为16%,默认为读厨房和餐厅的灯亮

2)下图对应上图的控制信息,显示读厨房和餐厅的灯亮

3)下图显示窗帘正在运行,此时OK210的蜂鸣器在响