[OK210開(kāi)發(fā)板體驗(yàn)]系統(tǒng)篇（2） 基于OK210的智能家居系統(tǒng)之前端設(shè)計(jì)Boostrap

原創(chuàng) 2015-12-24 14:00:00 s5pv210


前一篇簡(jiǎn)單介紹了基于OK210智能家居系統(tǒng)的組成以及Boa服務(wù)器的搭建。這篇是系統(tǒng)篇的第2篇，介紹基于OK210的智能家居系統(tǒng)之前端設(shè)計(jì)。主要包括：


  • 網(wǎng)頁(yè)前端設(shè)計(jì)概述
  • 服務(wù)器前端設(shè)計(jì):Boostrap引入，主界面、登錄界面和界面，完善界面功能
  • OK210移植
一、 網(wǎng)頁(yè)前端設(shè)計(jì)概述
網(wǎng)頁(yè)的前端設(shè)計(jì)，主要是通過(guò)HTML，CSS文件和JavaScript來(lái)實(shí)現(xiàn)，其中HTML是 Hyper Text Markup Language（超文本標(biāo)記語(yǔ)言）的縮寫(xiě)，超文本的意思就是在頁(yè)面內(nèi)可以包含圖片、鏈接、視頻等非文字元素，它是網(wǎng)頁(yè)開(kāi)發(fā)的基礎(chǔ)之基礎(chǔ)。CSS是Cascading Style Sheet（層疊樣子表）的縮寫(xiě)，它的出現(xiàn)解決了網(wǎng)頁(yè)表現(xiàn)和內(nèi)容分離，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語(yǔ)言。而JavaScript是一種屬于網(wǎng)絡(luò)的腳本語(yǔ)言,主要用來(lái)為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能,為用戶提供更流暢美觀的瀏覽效果，值得一提的是，JavaScript和Java沒(méi)有半毛錢(qián)關(guān)系。
以上3種語(yǔ)言只是設(shè)計(jì)網(wǎng)頁(yè)的基礎(chǔ)，一般為了方便開(kāi)發(fā)和提高開(kāi)發(fā)效率，都使用現(xiàn)有的框架，而不是重復(fù)造輪子。當(dāng)前比較流行的框架有：easyUI、Extjs和Bootstrap，其中：easyUI基于jQuery，免費(fèi)的各個(gè)控件相對(duì)獨(dú)立；Extjs更高級(jí)一些控件與控件直接的交互用起來(lái)會(huì)很方便，要收費(fèi)；Bootstrap相對(duì)前兩個(gè)來(lái)說(shuō)在控件上面會(huì)差很多，但是在不同終端的兼容性方面做得很好，就是電腦、手機(jī)、平板等這些，這一點(diǎn)是前兩個(gè)無(wú)法比的。一般easyUI和Extjs是用來(lái)做后臺(tái)管理系統(tǒng)的，Bootstrap是做網(wǎng)站界面的。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得Web 開(kāi)發(fā)更加快捷。具有友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計(jì)，12列格網(wǎng)，樣式向?qū)臋n，自定義JQuery插件，完整的類庫(kù)，基于Less等特點(diǎn)，詳細(xì)可去官方查看。
二、服務(wù)器前端設(shè)計(jì)
先看一下前端設(shè)計(jì)最后生成的文件目錄：
 
1 下載Bootstrap
（1）下載用于生產(chǎn)環(huán)境的 Bootstrap
http://v3.bootcss.com/getting-started/
（2）編寫(xiě)hello.html檢查是否可用
2 頁(yè)面設(shè)計(jì)
（1）下載Narrow jumbotron模板，做為首頁(yè)
1）建議用記事本打開(kāi)，不然會(huì)用亂碼
2）將Project Name 修改為基于OK210的智能家居控制系統(tǒng)，將Home替換為主頁(yè)，將About替換為關(guān)于，將Contact一行刪除
3）將Jumbotron heading修改為智能家居控制系統(tǒng)
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.
替換為
本系統(tǒng)以飛凌OK210開(kāi)發(fā)板為控制平臺(tái),采用無(wú)線有線相結(jié)合的方式,實(shí)現(xiàn)了現(xiàn)代家居的智能化管理。該系統(tǒng)集家庭安防,環(huán)境檢測(cè)，燈光控制,窗簾控制,可視對(duì)講,等自動(dòng)化控制為一體，為現(xiàn)代家庭提供了安全、高效、舒適、節(jié)能的可視化,人性化的生活環(huán)境。
5）將<divclass="row marketing">容器內(nèi)容全部刪除
6）最后效果如下所示

（2）下載Signin模板，作為登錄頁(yè)
1）建議用記事本打開(kāi)，不然會(huì)用亂碼
2）將Please sign in修改為請(qǐng)輸入登錄信息
//3）將Email Address修改為郵件地址，將Password修改為密碼
4）將Remember me修改為記住我
5）將Sing in修改為登錄
6）最后的效果如下：

（3）下載Dashboard模板，作為控制頁(yè)或主頁(yè)
1）建議用記事本打開(kāi)，不然會(huì)用亂碼
2）將Project Name 修改為基于OK210的智能家居控制系統(tǒng)，并將以下內(nèi)容全部刪除
  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>
復(fù)制代碼
3）將Overview修改為實(shí)時(shí)狀態(tài)，并將以下內(nèi)容全部刪除
  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>
復(fù)制代碼
4）將以下內(nèi)容
  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>
復(fù)制代碼
修改為
  1. <ul class="nav nav-sidebar">家庭安防
  2.             <li><a href="">入侵信息</a></li>
  3.             <li><a href="">環(huán)境信息</a></li>
  4.             <li><a href="">燈光信息</a></li>
  5.             <li><a href="">窗簾信息</a></li>
  6.           </ul>
  7. <ul class="nav nav-sidebar">環(huán)境檢測(cè)
  8.             <li><a href="">溫度檢測(cè)</a></li>
  9.             <li><a href="">濕度檢測(cè)</a></li>
  10.           </ul>
  11. <ul class="nav nav-sidebar">燈光控制
  12.             <li><a href="">臥室燈光</a></li>
  13.             <li><a href="">陽(yáng)臺(tái)燈光</a></li>
  14.           </ul>
  15. <ul class="nav nav-sidebar">窗簾控制
  16.             <li><a href="">臥室窗簾</a></li>
  17.           </ul>
  18. <ul class="nav nav-sidebar">可視對(duì)講
  19.             <li><a href="">視頻</a></li>
  20.           </ul>
復(fù)制代碼
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>
復(fù)制代碼
修改為
  1. <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
  2.           <h1 class="page-header">系統(tǒng)功能</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>環(huán)境檢測(cè)</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>
復(fù)制代碼
6）按照以上方法，修改表格內(nèi)容，最后的效果圖如下所示：

3 完善
（1）index.html文件完善
1）修改名字
將jumbotron-narrow.css修改為index.css，將放到css文件中
2）配置bootstrap
用記事本打開(kāi)文件，重新指定bootstrap.css
3）添加響應(yīng)
  將Sign up today替換為登錄,并將其href中的#用./login.html替換
（2）login.html文件完善
1）修改名字
2）配置bootstrap
用記事本打開(kāi)文件，重新指定bootstrap.css目錄
3）在<html></html>中添加響應(yīng)
<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
用記事本打開(kāi)文件，重新指定bootstrap.css目錄
三、OK210移植
最后將設(shè)計(jì)好的前端代碼，上傳到OK210的/usr/local/boa/目錄中，最后的效果如下所示：
1、打開(kāi)串口終端，開(kāi)啟boa服務(wù)器
 
2、PC上打開(kāi)瀏覽器，輸入IP地址:x.x.x.x/index.html，彈出首界面







3、點(diǎn)擊首界面上的登錄，彈出登錄界面

4、在登錄界面，輸入正確的信息，點(diǎn)擊登錄，彈出主界面



13.png (71.71 KB, 下載次數(shù): 1)


13.png



相關(guān)產(chǎn)品 >

  • OKMX6UL-C開(kāi)發(fā)板

    飛凌嵌入式專注imx6系列imx6ul開(kāi)發(fā)板、飛思卡爾imx6ul核心板等ARM嵌入式核心控制系統(tǒng)研發(fā)、設(shè)計(jì)和生產(chǎn),i.mx6UL系列產(chǎn)品現(xiàn)已暢銷全國(guó)，作為恩智浦imx6ul,imx6ul開(kāi)發(fā)板,i.mx6提供者，飛凌嵌入式提供基于iMX6 iMX6UL解決方案定制。

    了解詳情
    OKMX6UL-C開(kāi)發(fā)板

  • OKMX6ULL-C開(kāi)發(fā)板

    40*29mm,雙網(wǎng)雙CAN，8路串口| i.MX6ULL開(kāi)發(fā)板是基于NXP i.MX6ULL設(shè)計(jì)開(kāi)發(fā)的的一款Linux開(kāi)發(fā)板 ，主頻800MHz，體積小，其核心板僅40*29mm，采用板對(duì)板連接器，適應(yīng)場(chǎng)景豐富。 了解詳情
    OKMX6ULL-C開(kāi)發(fā)板
上一篇：[OK210開(kāi)發(fā)板體驗(yàn)]系統(tǒng)篇（1） 基于S5PV210的智能家居系統(tǒng)之Boa服務(wù)器搭建 下一篇：[OK210開(kāi)發(fā)板體驗(yàn)]功能篇（6）Linux字符驅(qū)動(dòng)之紅外遙控驅(qū)動(dòng)（待續(xù)）

推薦閱讀 換一批 換一批