基于ARM的智能灯光控制系统总结（11-网页CGI进程之欢迎界面）
2018-03-12 06:36
387 查看
主控制端加载boa服务器后，新建index.html文件，其目的就是一个欢迎界面，其目录菜单均对应了不同的cgi程序。即各网页控制进程的入口。
效果如下图：
index.html<!DOCTYPE html>
<html>
<head>
<title>SL1200智能灯光控制系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../empty files/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../empty files/font-awesome.css">
<link rel="stylesheet" type="text/css" href="../empty files/custom-styles.css">
<style>
#wrapper{
width: 1000px;
margin-right: auto;
margin-left: auto;
}
.navbar_header{
float: left;
}
.sidebar-collapse{
width: 200px;
height:600px;
float: left;
background: rgb(228,238,249);
}
a:hover{
background: yellow;
}
#page-wrapper li {
float: left;
display: block;
width:90px;
height:50px;
}
#page-inner{
float: left;
width:800px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle"><span class="sr-only">智能灯光控制系统</span></button>
</div>
<!-- NAV TOP -->
<div class="sidebar-collapse">
<ul class="nav">
<li><a href="sys_show.cgi">系统状态</a></li>
<li><a href="#">设备设置
<span class="fa arrow">
<ul class="nav nav-second-level">
<li><a href="dev_add.cgi">设备添加</a></li>
<li><a href="dev_con.cgi">设备管理</a></li>
</ul>
</span>
</a>
</li>
<li><a href="#"><i class="fa fa-sitemap"></i>区域设置<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li><a href="area_add.cgi">区域创建</a></li>
<li><a href="area_con.cgi">区域管理</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-table"></i>场景设置<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li><a href="#">场景添加</a></li>
<li><a href="#">场景管理</a></li>
</ul>
</li>
<li><a href="./sys_info.cgi"><i class="fa fa-fw fa-file"></i>系统信息</a>
</li>
</ul>
</div>
<!-- NAV SIDE -->
<div id="page-wrapper">
<div class="header">
<h1 class="page-header">设备添加<small></small></h1>
<ol class="breadcrumb">
<li><a href="index.html">主页</a></li>
<li><a href="#">设备设置</a></li>
<li class="active">设备添加</li>
</ol>
</div>
<div id="page-inner">
<from method="get" action="/cgi-bin/dev_add_post.cgi">
<div class="row">
<div class="col-md-12">
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-heading">设备列表</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table hover" id="dataTables-example">
<thead>
<tr>
<th>设备名称</th>
<th>节点信息</th>
<th>设备类型</th>
<th>连接状态</th>
<th>提交操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="name_1" value="主控制器"></td>
<td><input type="text" name="1" value="SL_M_1"></td>
<td>主控制器</td>
<td class="center"><input type="radio" name="join_sta1" value="1" checked="checked">连通<input type="radio" name="join_sta1" value="0" >断开</td>
<td class="center"><button type="submit">设置</button></td>
</tr>
<!-- <tr>
4000
<td><input type="text" name="name_3" value="光感设备"></td>
<td><input type="text" name="3" value="SL_M_3"></td>
<td>光线感应</td>
<td class="center"><input type="radio" name="join_sta3" value="1" checked="checked">连通<input type="radio" name="join_sta3" value="0" >断开</td>
<td class="center"><button type="submit">设置</button></td>
</tr>
<tr>
<td><input type="text" name="name_6" value="客厅小灯"></td>
<td><input type="text" name="6" value="SL_M_6"></td>
<td>灯光设备</td>
<td class="center"><input type="radio" name="join_sta6" value="1" checked="checked">连通<input type="radio" name="join_sta6" value="0" >断开</td>
<td class="center"><button type="submit">设置</button></td>
</tr>
<tr>
<td><input type="text" name="name_7" value="新增设备123"></td>
<td><input type="text" name="7" value="SL_M_7"></td>
<td>灯光设备</td>
<td class="center"><input type="radio" name="join_sta7" value="1" checked="checked">连通<input type="radio" name="join_sta7" value="0" >断开</td>
<td class="center"><button type="submit">设置</button></td>
</tr>
<tr>
<td><input type="text" name="name_5" value="新增设备"></td>
<td><input type="text" name="5" value="SL_M_5"></td>
<td>声音感应</td>
<td class="center"><input type="radio" name="join_sta5" value="1" checked="checked">连通<input type="radio" name="join_sta5" value="0" >断开</td>
<td class="center"><button type="submit">设置</button></td>
</tr> -->
</tbody>
</table>
</div>
</div>
</div>
<!-- End Advanced Tables -->
</div>
</div>
</from>
<footer>
<p>Copyright 2017 cumtzd<a target="_blank" href="http://127.0.0.1">学习91创客学堂</a></p>
</footer>
</div>
<!-- PAGE INNER -->
</div>
<!-- PAGE WRAPPER -->
</div>
<script src="../empty files/jquery-1.10.2.js"></script>
<script src="../empty files/bootstrap.min.js"></script>
<script src="../empty files/jquery.metisMenu.js"></script>
</body>
</html>
效果如下图：
index.html<!DOCTYPE html>
<html>
<head>
<title>SL1200智能灯光控制系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../empty files/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../empty files/font-awesome.css">
<link rel="stylesheet" type="text/css" href="../empty files/custom-styles.css">
<style>
#wrapper{
width: 1000px;
margin-right: auto;
margin-left: auto;
}
.navbar_header{
float: left;
}
.sidebar-collapse{
width: 200px;
height:600px;
float: left;
background: rgb(228,238,249);
}
a:hover{
background: yellow;
}
#page-wrapper li {
float: left;
display: block;
width:90px;
height:50px;
}
#page-inner{
float: left;
width:800px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle"><span class="sr-only">智能灯光控制系统</span></button>
</div>
<!-- NAV TOP -->
<div class="sidebar-collapse">
<ul class="nav">
<li><a href="sys_show.cgi">系统状态</a></li>
<li><a href="#">设备设置
<span class="fa arrow">
<ul class="nav nav-second-level">
<li><a href="dev_add.cgi">设备添加</a></li>
<li><a href="dev_con.cgi">设备管理</a></li>
</ul>
</span>
</a>
</li>
<li><a href="#"><i class="fa fa-sitemap"></i>区域设置<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li><a href="area_add.cgi">区域创建</a></li>
<li><a href="area_con.cgi">区域管理</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-table"></i>场景设置<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li><a href="#">场景添加</a></li>
<li><a href="#">场景管理</a></li>
</ul>
</li>
<li><a href="./sys_info.cgi"><i class="fa fa-fw fa-file"></i>系统信息</a>
</li>
</ul>
</div>
<!-- NAV SIDE -->
<div id="page-wrapper">
<div class="header">
<h1 class="page-header">设备添加<small></small></h1>
<ol class="breadcrumb">
<li><a href="index.html">主页</a></li>
<li><a href="#">设备设置</a></li>
<li class="active">设备添加</li>
</ol>
</div>
<div id="page-inner">
<from method="get" action="/cgi-bin/dev_add_post.cgi">
<div class="row">
<div class="col-md-12">
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-heading">设备列表</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table hover" id="dataTables-example">
<thead>
<tr>
<th>设备名称</th>
<th>节点信息</th>
<th>设备类型</th>
<th>连接状态</th>
<th>提交操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="name_1" value="主控制器"></td>
<td><input type="text" name="1" value="SL_M_1"></td>
<td>主控制器</td>
<td class="center"><input type="radio" name="join_sta1" value="1" checked="checked">连通<input type="radio" name="join_sta1" value="0" >断开</td>
<td class="center"><button type="submit">设置</button></td>
</tr>
<!-- <tr>
4000
<td><input type="text" name="name_3" value="光感设备"></td>
<td><input type="text" name="3" value="SL_M_3"></td>
<td>光线感应</td>
<td class="center"><input type="radio" name="join_sta3" value="1" checked="checked">连通<input type="radio" name="join_sta3" value="0" >断开</td>
<td class="center"><button type="submit">设置</button></td>
</tr>
<tr>
<td><input type="text" name="name_6" value="客厅小灯"></td>
<td><input type="text" name="6" value="SL_M_6"></td>
<td>灯光设备</td>
<td class="center"><input type="radio" name="join_sta6" value="1" checked="checked">连通<input type="radio" name="join_sta6" value="0" >断开</td>
<td class="center"><button type="submit">设置</button></td>
</tr>
<tr>
<td><input type="text" name="name_7" value="新增设备123"></td>
<td><input type="text" name="7" value="SL_M_7"></td>
<td>灯光设备</td>
<td class="center"><input type="radio" name="join_sta7" value="1" checked="checked">连通<input type="radio" name="join_sta7" value="0" >断开</td>
<td class="center"><button type="submit">设置</button></td>
</tr>
<tr>
<td><input type="text" name="name_5" value="新增设备"></td>
<td><input type="text" name="5" value="SL_M_5"></td>
<td>声音感应</td>
<td class="center"><input type="radio" name="join_sta5" value="1" checked="checked">连通<input type="radio" name="join_sta5" value="0" >断开</td>
<td class="center"><button type="submit">设置</button></td>
</tr> -->
</tbody>
</table>
</div>
</div>
</div>
<!-- End Advanced Tables -->
</div>
</div>
</from>
<footer>
<p>Copyright 2017 cumtzd<a target="_blank" href="http://127.0.0.1">学习91创客学堂</a></p>
</footer>
</div>
<!-- PAGE INNER -->
</div>
<!-- PAGE WRAPPER -->
</div>
<script src="../empty files/jquery-1.10.2.js"></script>
<script src="../empty files/bootstrap.min.js"></script>
<script src="../empty files/jquery.metisMenu.js"></script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于ARM的智能灯光控制系统总结（14-网页CGI进程之网页数据提取函数）
- 基于ARM的智能灯光控制系统总结（15-网页CGI进程之设备添加）
- 基于ARM的智能灯光控制系统总结（16-网页CGI进程之设备管理）
- 基于ARM的智能灯光控制系统总结（17-网页CGI进程之区域添加）
- 基于ARM的智能灯光控制系统总结（18-网页CGI进程之区域管理）
- 基于ARM的智能灯光控制系统总结（19-网页CGI进程之makefile）
- 基于ARM的智能灯光控制系统总结（12-网页CGI进程之网页布局函数）
- 基于ARM的智能灯光控制系统总结（13-网页CGI进程之进程通信头文件）
- 基于ARM的智能灯光控制系统总结（8-网络客户端进程）
- 基于ARM的智能灯光控制系统总结（9-主控进程的设备状态更新线程）
- 基于ARM的智能灯光控制系统总结（10-主控进程的makefile文件）
- 基于ARM的智能灯光控制系统（11）状态更新
- 基于ARM的智能灯光控制系统总结（7-主控端网络监听、连接及控制线程）
- 基于ARM的智能灯光控制系统（6）进程通信
- 基于ARM的智能灯光控制系统总结（4-设备链表）
- 基于ARM的智能灯光控制系统总结（3-主程序及全局数据结构）
- 基于ARM的智能灯光控制系统总结（2-驱动开发）
- 基于ARM的智能灯光控制系统（6）进程通信
- 基于ARM的智能灯光控制系统（11）状态更新
- 基于ARM的智能灯光控制系统总结（6-设备动态更新线程）