树莓派WEB服务器（Boa）空气监测项目

树莓派WEB服务器（Boa）空气监测项目

网页界面参考源码http://pan.baidu.com/s/1dFN8Twt

系统WEB界面

1 . 天气质量界面



2 . 天气预报界面



3 . 系统设置界面

开发流程

Created with Raphaël 2.1.0start后台服务程序设计网页界面功能设计系统测试end

后台服务程序

主要通过二个线程实现主要功能。

pth_ipc 线程：进程间通信 ，网页同后台程序数据交换。

pth_update：系统定时更新空气与天气数据到全局结构体。

int main(int argc,char* argv[])
{
pthread_t pth_ipc,pth_update;
init_sys();
pthread_create(&pth_update,NULL,update_pro,NULL);
pthread_create(&pth_ipc,NULL,ipcs_pro,NULL);

pthread_join(pth_update,NULL);
pthread_join(pth_ipc,NULL);
return 0;
}

页面数据更新示意图

Created with Raphaël 2.1.0网页网页进程通信进程通信后台程序后台程序网页更新请求，0x01结构体数据更新到共享内存读取共享内存数据显示在网页通过串口定时读取pm2.5模块数据python程序定时读取网络天气数据网页数据保存请求，0x02共享内存更新到全局结构体全局结构体保存到配置文件更新标志置位为1网页请求更新天气，0x03更新标志置位为1

PM2.5模块数据开发文档：

http://blog.csdn.net/tony_shen/article/details/73332476

Python网络天气数据开发文档：

http://blog.csdn.net/tony_shen/article/details/69226919

如果不想购买阿里云的天气API接口数据，可以把源码目录下的day_file,week_file,code_file三个文件拷贝到树莓派的/home/pi目录下。

天气质量页面

界面设计：参考前面的图片

功能设计：显示空气参数，AQI、PM2.5 网络、PM2.5本地，PM10，图表方式显示PM2.5数据（使用数据可视化图表库echarts）。

ECharts (数据可视化图表库) http://echarts.baidu.com/

参考源代码:

http://pan.baidu.com/s/1bptlGPx

执行Makefile文件，生成sys_run后台程序，

//源代码目录，编译程序
$sudo make

//copy到boa的cgi-bin目录
$sudo cp pm25_show.cgi /var/www/cgi-bin

//运行后台服务程序
$sudo ./sys_run

首先要把网页界面的参考代码拷贝到树莓派boa服务器指定的web目录。网页的图表，样式，图表要能正确的显示出来。

在浏览器输入cgi程序地址例如： http://10.1.1.230/cgi-bin/pm25_show.cgi 就可以看到空气质量页面。