[OK210开发板体验]系统篇（2） 基于OK210的智能家居系统之前端设计Boostrap



前一篇简单介绍了基于OK210智能家居系统的组成以及Boa服务器的搭建。这篇是系统篇的第2篇，介绍基于OK210的智能家居系统之前端设计。主要包括：


  • 网页前端设计概述
  • 服务器前端设计:Boostrap引入，主界面、登录界面和界面，完善界面功能
  • OK210移植
一、 网页前端设计概述
网页的前端设计，主要是通过HTML，CSS文件和JavaScript来实现，其中HTML是 Hyper Text Markup Language（超文本标记语言）的缩写，超文本的意思就是在页面内可以包含图片、链接、视频等非文字元素，它是网页开发的基础之基础。CSS是Cascading Style Sheet（层叠样子表）的缩写，它的出现解决了网页表现和内容分离，是目前基于文本展示最优秀的表现设计语言。而JavaScript是一种属于网络的脚本语言,主要用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果，值得一提的是，JavaScript和Java没有半毛钱关系。
以上3种语言只是设计网页的基础，一般为了方便开发和提高开发效率，都使用现有的框架，而不是重复造轮子。当前比较流行的框架有：easyUI、Extjs和Bootstrap，其中：easyUI基于jQuery，免费的各个控件相对独立；Extjs更高级一些控件与控件直接的交互用起来会很方便，要收费；Bootstrap相对前两个来说在控件上面会差很多，但是在不同终端的兼容性方面做得很好，就是电脑、手机、平板等这些，这一点是前两个无法比的。一般easyUI和Extjs是用来做后台管理系统的，Bootstrap是做网站界面的。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得Web 开发更加快捷。具有友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特点，详细可去官方查看。
二、服务器前端设计
先看一下前端设计最后生成的文件目录：
 
1 下载Bootstrap
（1）下载用于生产环境的 Bootstrap
http://v3.bootcss.com/getting-started/
（2）编写hello.html检查是否可用
2 页面设计
（1）下载Narrow jumbotron模板，做为首页
1）建议用记事本打开，不然会用乱码
2）将Project Name 修改为基于OK210的智能家居控制系统，将Home替换为主页，将About替换为关于，将Contact一行删除
3）将Jumbotron heading修改为智能家居控制系统
4）将Cras justo odio,dapibus ac facilisis in,
egestas eget quam. Fusce dapibus, tellus accursus commodo, tortor
mauris condimentum nibh, ut fermentum massajusto sit amet risus.
替换为
本系统以飞凌OK210开发板为控制平台,采用无线有线相结合的方式,实现了现代家居的智能化管理。该系统集家庭安防,环境检测，灯光控制,窗帘控制,可视对讲,等自动化控制为一体，为现代家庭提供了安全、高效、舒适、节能的可视化,人性化的生活环境。
5）将<divclass="row marketing">容器内容全部删除
6）最后效果如下所示

（2）下载Signin模板，作为登录页
1）建议用记事本打开，不然会用乱码
2）将Please sign in修改为请输入登录信息
//3）将Email Address修改为邮件地址，将Password修改为密码
4）将Remember me修改为记住我
5）将Sing in修改为登录
6）最后的效果如下：

（3）下载Dashboard模板，作为控制页或主页
1）建议用记事本打开，不然会用乱码
2）将Project Name 修改为基于OK210的智能家居控制系统，并将以下内容全部删除
  1. <ul class="nav navbar-nav navbar-right">
  2.             <li><a href="./main_files/main.htm">Dashboard</a></li>
  3.             <li><a href="./main_files/main.htm">Settings</a></li>
  4.             <li><a href="./main_files/main.htm">Profile</a></li>
  5.             <li><a href="./main_files/main.htm">Help</a></li>
  6.           </ul>
复制代码
3）将Overview修改为实时状态，并将以下内容全部删除
  1. <li><a href="./main_files/main.htm">Reports</a></li>
  2.             <li><a href="./main_files/main.htm">Analytics</a></li>
  3.             <li><a href="./main_files/main.htm">Export</a></li>
复制代码
4）将以下内容
  1. <ul class="nav nav-sidebar">
  2.             <li><a href="">Nav item</a></li>
  3.             <li><a href="">Nav item again</a></li>
  4.             <li><a href="">One more nav</a></li>
  5.             <li><a href="">Another nav item</a></li>
  6.             <li><a href="">More navigation</a></li>
  7.           </ul>
  8.           <ul class="nav nav-sidebar">
  9.             <li><a href="">Nav item again</a></li>
  10.             <li><a href="">One more nav</a></li>
  11.             <li><a href="">Another nav item</a></li>
  12.           </ul>
复制代码
修改为
  1. <ul class="nav nav-sidebar">家庭安防
  2.             <li><a href="">入侵信息</a></li>
  3.             <li><a href="">环境信息</a></li>
  4.             <li><a href="">灯光信息</a></li>
  5.             <li><a href="">窗帘信息</a></li>
  6.           </ul>
  7. <ul class="nav nav-sidebar">环境检测
  8.             <li><a href="">温度检测</a></li>
  9.             <li><a href="">湿度检测</a></li>
  10.           </ul>
  11. <ul class="nav nav-sidebar">灯光控制
  12.             <li><a href="">卧室灯光</a></li>
  13.             <li><a href="">阳台灯光</a></li>
  14.           </ul>
  15. <ul class="nav nav-sidebar">窗帘控制
  16.             <li><a href="">卧室窗帘</a></li>
  17.           </ul>
  18. <ul class="nav nav-sidebar">可视对讲
  19.             <li><a href="">视频</a></li>
  20.           </ul>
复制代码
5）将以下代码
  1. <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
  2.           <h1 class="page-header">Dashboard</h1>
  3.           <div class="row placeholders">
  4.             <div class="col-xs-6 col-sm-3 placeholder">
  5.               <img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
  6.               <h4>Label</h4>
  7.               <span class="text-muted">Something else</span>
  8.             </div>
  9.             <div class="col-xs-6 col-sm-3 placeholder">
  10.               <img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
  11.               <h4>Label</h4>
  12.             &nbs, p; <span class="text-muted">Something else</span>
  13.             </div>
  14.             <div class="col-xs-6 col-sm-3 placeholder">
  15.               <img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
  16.               <h4>Label</h4>
  17.               <span class="text-muted">Something else</span>
  18.             </div>
  19.             <div class="col-xs-6 col-sm-3 placeholder">
  20.               <img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
  21.               <h4>Label</h4>
  22.               <span class="text-muted">Something else</span>
  23.             </div>
  24.           </div>
复制代码
修改为
  1. <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
  2.           <h1 class="page-header">系统功能</h1>
  3.           <div class="row placeholders">
  4.             <div class="col-xs-6 col-sm-3 placeholder">
  5.               <img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
  6.               <h4>家庭安防</h4>
  7.               <span class="text-muted">Something else</span>
  8.             </div>
  9.             <div class="col-xs-6 col-sm-3 placeholder">
  10.               <img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
  11.               <h4>环境检测</h4>
  12.               <span class="text-muted">Something else</span>
  13.             </div>
  14.             <div class="col-xs-6 col-sm-3 placeholder">
  15.               <img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
  16.               <h4>灯光控制</h4>
  17.               <span class="text-muted">Something else</span>
  18.             </div>
  19.             <div class="col-xs-6 col-sm-3 placeholder">
  20.               <img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
  21.               <h4>窗帘控制</h4>
  22.               <span class="text-muted">Something else</span>
  23.             </div>
  24.           </div>
复制代码
6）按照以上方法，修改表格内容，最后的效果图如下所示：

3 完善
（1）index.html文件完善
1）修改名字
将jumbotron-narrow.css修改为index.css，将放到css文件中
2）配置bootstrap
用记事本打开文件，重新指定bootstrap.css
3）添加响应
  将Sign up today替换为登录,并将其href中的#用./login.html替换
（2）login.html文件完善
1）修改名字
2）配置bootstrap
用记事本打开文件，重新指定bootstrap.css目录
3）在<html></html>中添加响应
<script>
function myFunction()
{
if(document.getElementById("inputEmail").value=="elecfans@163.com"&&document.getElementById("inputPassword").value=="elecfans")
{
window.open("main.html");
}
（3）main.html文件完善
1）修改名字
2）配置bootstrap
用记事本打开文件，重新指定bootstrap.css目录
三、OK210移植
最后将设计好的前端代码，上传到OK210的/usr/local/boa/目录中，最后的效果如下所示：
1、打开串口终端，开启boa服务器
 
2、PC上打开浏览器，输入IP地址:x.x.x.x/index.html，弹出首界面







3、点击首界面上的登录，弹出登录界面

4、在登录界面，输入正确的信息，点击登录，弹出主界面


13.png (71.71 KB, 下载次数: 1)

13.png



销售热线：400-699-6866

技术支持：0312-3119192

投诉建议：17713286018

微信公众平台