智能照明控制软件开发说明书
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
智能照明控制系统
软件程序开发说明书 编号 WW‐S‐H‐1301
北京中发万维科技有限公司
2013.09
智能照明控制系统软件程序开发说明书
目录 1. 总述.......................................................................1
1.1. 开发环境 .......................................................................................................................... 1 1.2. 使用环境 .......................................................................................................................... 1 1.3. 总体设计框架 .................................................................................................................. 1
本系统的总体布局应用 Bootstrap 中的 3x4 经典布局方式，整个界面分可分 为 east、west、south、north、center 五个部分，然后将系统所需的子控件相应 地排列到各个区域中。
3.1.1. 总体布局 基于 html5、css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，卓
2.3. current_shan
该表记录教学楼各个网络继电器当前的开关状态。 其中 id 为继电器开关编码，state 表述当前开关状态。
2.4. shan
该表记录教学楼各个网络继电器的开关动作。
北京中发万维科技有限公司 2
智能照明控制系统软件程序开发说明书
其中 id 为继电器开关编码，state 表述当前开关动作状态（变为开或变为关）， time 为动作发生时间。
1、全局样式(Global Style).Bootstrap 要求 html5 的文件类型，所以必须在每 个使用 bootstrap 页面的开头都引用:
<!DOCTYPE html> <html lang="en"> ... </html>
同时，它通过 Bootstrap.less 文件来设置全局的排版和连接显示风格.其中去 掉了 Body 的 margin，使用@baseFontFamily,@baseFontSize,@linkColor 等变量来 控制基本排版。
4. 系统关键技术.....................................................16
4.1. C#技术 ........................................................................................................................... 16 4.2. AJAX 技术.....................................................................................................................17 4.3. PHP 技术........................................................................................................................18
1.2. 使用环境
操作系统：windows XP 浏览器：chrome（推荐）、firefox、搜狗、ie 7 及其以上 显示器分辨率：1440x900 及其以上
1.3. 总体设计框架
本系统的设计主要分为三大部分，数据库设计、用户界面设计、后台设计， 如下图所示：
图表 1-1 系统设计模块
北京中发万维科技有限公司 1
2、格网系统(Grid System).默认的 Bootstrap 格网系统提供一个宽达 940 像素 的,12 列的格网。这意味着你页面默认宽度是 940px,最小的单元要素宽度是 940/12px.Bootstrap 能够使得你的网页可以更好地适应多种终端设备(平板电脑， 智能手机等)。
2.1、默认格网系统以下简单的代码则是实现第三列的宽度为 4 和宽度为 8 的两个 div.
2.5. current_hui
该表记录劳技楼各个网络继电器当前的开关状态。 其中 id 为继电器开关编码，state 表述当前开关状态。
2.6. hui
该表记录劳技楼各个网络继电器的开关动作。 其中 id 为继电器开关编码，state 表述当前开关动作状态（变为开或变为关）， time 为动作发生时间。
<div class="row">
北京中发万维科技有限公司 4
智能照明控制系统软件程序开发说明书
<div class="span4">...</div> <div class="span8">...</div> </div>
2.2 、偏移列. 有时候，页面要素前面需要一些空白，bootstrap 提供了偏移 列来实现。以下代码实现了是实现第一列的宽度为 4 和偏移度为 4 宽度为 4 的两 个 div.
3. 用户界面设计ቤተ መጻሕፍቲ ባይዱ
本系统的用户界面(UI)是基于 PHP 技术，结合 JavaScirpt 语言、html 语言、 CSS、BootStrap 框架等进行设计。
界面主体相关 js 文件放在/js 目录和/bootstrap/js 目录下，主要 js 文件如下 表所示：
Js 文件名 energy_quantity_updater.js swfobject.js jquery.min.js bootstrap.min.js
智能照明控制系统软件程序开发说明书
2. 数据库设计
2.1. current_zhulou
该表记录实验主楼各个网络继电器当前的开关状态。 其中 id 为继电器开关编码，state 表述当前开关状态。
2.2. zhulou
该表记录实验主楼各个网络继电器的开关动作。 其中 id 为继电器开关编码，state 表述当前开关动作状态（变为开或变为关）， time 为动作发生时间。
北京中发万维科技有限公司 1
智能照明控制系统软件程序开发说明书
智能照明控制系统
1. 总述
本文对智能照明控制系统的设计进行了详细说明。 以下为本系统总体设计说明：
1.1. 开发环境
技术：C#、PHP、Html5、Javascript、CSS、Ajax. 开发环境：Visual Studio2012(C#程序) 开发框架：Bootstrap(前端)、OpenFlashChart 服务器：Wamp Server 图片绘制软件：Adobe Illustrator CS5、Adobe Photoshop CS6
2. 数据库设计...........................................................2
2.1. CURRENT_ZHULOU ............................................................................................................ 2 2.2. ZHULOU ............................................................................................................................. 2 2.3. CURRENT_SHAN.................................................................................................................2 2.4. SHAN ................................................................................................................................. 2 2.5. CURRENT_HUI....................................................................................................................3 2.6. HUI .................................................................................................................................... 3
3. 用户界面设计.......................................................3
3.1. 用户界面总述 .................................................................................................................. 4 3.1.1. 总体布局.................................................................................................................4 3.1.2. 页面展示策略.........................................................................................................6 3.1.3. 闪烁效果实现.......................................................................................................12 3.1.4. 数据可视化展示...................................................................................................14 3.1.5. 页面轮询切换效果实现.......................................................................................15
越的兼容性，响应式设计，12 列格网，样式向导文档，自定义 JQuery 插件，完 整的类库，基于 Less 等。Bootstrap 建立了一个响应式的 12 列格网布局系统，它 引入了 fixed 和 fluid‐with 两种布局方式。我们从全局样式(Global Style),格网系统 (Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)五个方 面深入讲解 Boostrap 的 scaffolding.
主要功能 定义页面轮询效果 定义图表展示风格 定义核心 JavaScript 库 定义主页面的显示风格
北京中发万维科技有限公司 3
智能照明控制系统软件程序开发说明书
3.1. 用户界面总述
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形 区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符 以及添加图像的方法。
软件程序开发说明书 编号 WW‐S‐H‐1301
北京中发万维科技有限公司
2013.09
智能照明控制系统软件程序开发说明书
目录 1. 总述.......................................................................1
1.1. 开发环境 .......................................................................................................................... 1 1.2. 使用环境 .......................................................................................................................... 1 1.3. 总体设计框架 .................................................................................................................. 1
本系统的总体布局应用 Bootstrap 中的 3x4 经典布局方式，整个界面分可分 为 east、west、south、north、center 五个部分，然后将系统所需的子控件相应 地排列到各个区域中。
3.1.1. 总体布局 基于 html5、css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，卓
2.3. current_shan
该表记录教学楼各个网络继电器当前的开关状态。 其中 id 为继电器开关编码，state 表述当前开关状态。
2.4. shan
该表记录教学楼各个网络继电器的开关动作。
北京中发万维科技有限公司 2
智能照明控制系统软件程序开发说明书
其中 id 为继电器开关编码，state 表述当前开关动作状态（变为开或变为关）， time 为动作发生时间。
1、全局样式(Global Style).Bootstrap 要求 html5 的文件类型，所以必须在每 个使用 bootstrap 页面的开头都引用:
<!DOCTYPE html> <html lang="en"> ... </html>
同时，它通过 Bootstrap.less 文件来设置全局的排版和连接显示风格.其中去 掉了 Body 的 margin，使用@baseFontFamily,@baseFontSize,@linkColor 等变量来 控制基本排版。
4. 系统关键技术.....................................................16
4.1. C#技术 ........................................................................................................................... 16 4.2. AJAX 技术.....................................................................................................................17 4.3. PHP 技术........................................................................................................................18
1.2. 使用环境
操作系统：windows XP 浏览器：chrome（推荐）、firefox、搜狗、ie 7 及其以上 显示器分辨率：1440x900 及其以上
1.3. 总体设计框架
本系统的设计主要分为三大部分，数据库设计、用户界面设计、后台设计， 如下图所示：
图表 1-1 系统设计模块
北京中发万维科技有限公司 1
2、格网系统(Grid System).默认的 Bootstrap 格网系统提供一个宽达 940 像素 的,12 列的格网。这意味着你页面默认宽度是 940px,最小的单元要素宽度是 940/12px.Bootstrap 能够使得你的网页可以更好地适应多种终端设备(平板电脑， 智能手机等)。
2.1、默认格网系统以下简单的代码则是实现第三列的宽度为 4 和宽度为 8 的两个 div.
2.5. current_hui
该表记录劳技楼各个网络继电器当前的开关状态。 其中 id 为继电器开关编码，state 表述当前开关状态。
2.6. hui
该表记录劳技楼各个网络继电器的开关动作。 其中 id 为继电器开关编码，state 表述当前开关动作状态（变为开或变为关）， time 为动作发生时间。
<div class="row">
北京中发万维科技有限公司 4
智能照明控制系统软件程序开发说明书
<div class="span4">...</div> <div class="span8">...</div> </div>
2.2 、偏移列. 有时候，页面要素前面需要一些空白，bootstrap 提供了偏移 列来实现。以下代码实现了是实现第一列的宽度为 4 和偏移度为 4 宽度为 4 的两 个 div.
3. 用户界面设计ቤተ መጻሕፍቲ ባይዱ
本系统的用户界面(UI)是基于 PHP 技术，结合 JavaScirpt 语言、html 语言、 CSS、BootStrap 框架等进行设计。
界面主体相关 js 文件放在/js 目录和/bootstrap/js 目录下，主要 js 文件如下 表所示：
Js 文件名 energy_quantity_updater.js swfobject.js jquery.min.js bootstrap.min.js
智能照明控制系统软件程序开发说明书
2. 数据库设计
2.1. current_zhulou
该表记录实验主楼各个网络继电器当前的开关状态。 其中 id 为继电器开关编码，state 表述当前开关状态。
2.2. zhulou
该表记录实验主楼各个网络继电器的开关动作。 其中 id 为继电器开关编码，state 表述当前开关动作状态（变为开或变为关）， time 为动作发生时间。
北京中发万维科技有限公司 1
智能照明控制系统软件程序开发说明书
智能照明控制系统
1. 总述
本文对智能照明控制系统的设计进行了详细说明。 以下为本系统总体设计说明：
1.1. 开发环境
技术：C#、PHP、Html5、Javascript、CSS、Ajax. 开发环境：Visual Studio2012(C#程序) 开发框架：Bootstrap(前端)、OpenFlashChart 服务器：Wamp Server 图片绘制软件：Adobe Illustrator CS5、Adobe Photoshop CS6
2. 数据库设计...........................................................2
2.1. CURRENT_ZHULOU ............................................................................................................ 2 2.2. ZHULOU ............................................................................................................................. 2 2.3. CURRENT_SHAN.................................................................................................................2 2.4. SHAN ................................................................................................................................. 2 2.5. CURRENT_HUI....................................................................................................................3 2.6. HUI .................................................................................................................................... 3
3. 用户界面设计.......................................................3
3.1. 用户界面总述 .................................................................................................................. 4 3.1.1. 总体布局.................................................................................................................4 3.1.2. 页面展示策略.........................................................................................................6 3.1.3. 闪烁效果实现.......................................................................................................12 3.1.4. 数据可视化展示...................................................................................................14 3.1.5. 页面轮询切换效果实现.......................................................................................15
越的兼容性，响应式设计，12 列格网，样式向导文档，自定义 JQuery 插件，完 整的类库，基于 Less 等。Bootstrap 建立了一个响应式的 12 列格网布局系统，它 引入了 fixed 和 fluid‐with 两种布局方式。我们从全局样式(Global Style),格网系统 (Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)五个方 面深入讲解 Boostrap 的 scaffolding.
主要功能 定义页面轮询效果 定义图表展示风格 定义核心 JavaScript 库 定义主页面的显示风格
北京中发万维科技有限公司 3
智能照明控制系统软件程序开发说明书
3.1. 用户界面总述
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形 区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符 以及添加图像的方法。