[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開發板
上一篇：[OK210開發板體驗]系統篇（1） 基于S5PV210的智能家居系統之Boa服務器搭建 下一篇：[OK210開發板體驗]功能篇（6）Linux字符驅動之紅外遙控驅動（待續）

推薦閱讀 換一批 換一批