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