
[OK210开发板体验]系统篇(2) 基于OK210的智能家居系统之前端设计Boostrap
前一篇简单介绍了基于OK210智能家居系统的组成以及Boa服务器的搭建。这篇是系统篇的第2篇,介绍基于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的智能家居控制系统,并将以下内容全部删除
3)将Overview修改为实时状态,并将以下内容全部删除
4)将以下内容
修改为
5)将以下代码
修改为
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
三、OK210移植用记事本打开文件,重新指定bootstrap.css目录 最后将设计好的前端代码,上传到OK210的/usr/local/boa/目录中,最后的效果如下所示: 1、打开串口终端,开启boa服务器 ![]() 2、PC上打开浏览器,输入IP地址:x.x.x.x/index.html,弹出首界面 ![]() ![]() ![]() 3、点击首界面上的登录,弹出登录界面 ![]() 4、在登录界面,输入正确的信息,点击登录,弹出主界面
|
13.png