[OK210開發板體驗]系統篇(2) 基于OK210的智能家居系統之前端設計Boostrap

原創 2015-12-24 14:00:00 s5pv210


前一篇簡單介紹了基于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



相關產品 >

  • OKMX6UL-C開發板

    飛凌嵌入式專注imx6系列imx6ul開發板、飛思卡爾imx6ul核心板等ARM嵌入式核心控制系統研發、設計和生產,i.mx6UL系列產品現已暢銷全國,作為恩智浦imx6ul,imx6ul開發板,i.mx6提供者,飛凌嵌入式提供基于iMX6 iMX6UL解決方案定制。

    了解詳情
    OKMX6UL-C開發板
  • OKMX6ULL-C開發板

    40*29mm,雙網雙CAN,8路串口| i.MX6ULL開發板是基于NXP i.MX6ULL設計開發的的一款Linux開發板 ,主頻800MHz,體積小,其核心板僅40*29mm,采用板對板連接器,適應場景豐富。 了解詳情
    OKMX6ULL-C開發板

推薦閱讀 換一批 換一批