mirror of
https://gitee.com/beecue/fastbee.git
synced 2025-12-20 09:55:54 +08:00
添加智能灯固件代码
This commit is contained in:
kerwincui
198
firmware/esp-idf/wumei-smart-firmware/main/www/home.html
Normal file
198
firmware/esp-idf/wumei-smart-firmware/main/www/home.html
Normal file
@@ -0,0 +1,198 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>物美智能设备AP配置</title>
|
||||
<style type="text/css">
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#all{
|
||||
margin: 20px auto;
|
||||
position: relative;
|
||||
width:320px;
|
||||
text-align:center;
|
||||
}
|
||||
#all #tab li{
|
||||
list-style: none;
|
||||
float: left;
|
||||
width: 94px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color:#fff;
|
||||
margin-left:10px;
|
||||
}
|
||||
#tab{
|
||||
height:40px;
|
||||
}
|
||||
#all .con{
|
||||
border:1px solid #ddd;
|
||||
padding:10px;
|
||||
margin:15px 10px;
|
||||
}
|
||||
.group{
|
||||
line-height:50px;
|
||||
}
|
||||
.group .btn{
|
||||
padding:4px 14px;
|
||||
background:#f56c6c;
|
||||
color:#fff;
|
||||
border:1px solid #ddd;
|
||||
border-radius:6px;
|
||||
width:190px;
|
||||
}
|
||||
.group span{
|
||||
width:85px;
|
||||
display:inline-block;
|
||||
font-size:14px;
|
||||
}
|
||||
.group input{
|
||||
line-height:24px;
|
||||
width:180px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
window.onload = function(){
|
||||
var tab = document.getElementById("tab");
|
||||
var lis = tab.getElementsByTagName('li');//获得标签li的数组
|
||||
var cons = document.getElementsByClassName('con');//获得下面内容div的数组
|
||||
for(var i=0;i<lis.length;i++){
|
||||
lis[i].num = i;//给对象添加属性，赋值用于标记
|
||||
lis[i].onclick = function(){
|
||||
if(this.num==2){
|
||||
window.location.href="/download/";
|
||||
}
|
||||
//tab内容显示和隐藏
|
||||
for(var j = 0;j<cons.length;j++){
|
||||
if(j==this.num){
|
||||
cons[this.num].style.display = 'block';
|
||||
}else{
|
||||
cons[j].style.display = 'none';
|
||||
}
|
||||
}
|
||||
//设置选中
|
||||
for(var k=0;k<lis.length;k++){
|
||||
if(k==this.num){
|
||||
lis[this.num].style.backgroundColor ="#006DFE"; //设置为选中
|
||||
}else{
|
||||
lis[k].style.backgroundColor="#888"; //设置背景为灰色
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
// 根据url参数设置选中
|
||||
var value=getQueryVariable("tab");
|
||||
console.log("value",value);
|
||||
if(value==0){
|
||||
lis[0].onclick();
|
||||
}else if(value==1){
|
||||
lis[1].onclick();
|
||||
}
|
||||
}
|
||||
function getQueryVariable(variable){
|
||||
var query = window.location.search.substring(1);
|
||||
var vars = query.split("&");
|
||||
for (var i=0;i<vars.length;i++) {
|
||||
var pair = vars[i].split("=");
|
||||
if(pair[0] == variable){return pair[1];}
|
||||
}
|
||||
return(false);
|
||||
}
|
||||
function wifiSubmit(){
|
||||
var ssid = document.getElementById("ssid").value;
|
||||
var password = document.getElementById("password").value;
|
||||
var uuid = document.getElementById("uuid").value;
|
||||
if(ssid=="" || password=="" || uuid==""){
|
||||
alert("WIFI的名称、密码和关联用户不能为空。")
|
||||
return;
|
||||
}else{
|
||||
// 确认提交
|
||||
}
|
||||
|
||||
var button = document.getElementById("wifi_submit").submit();
|
||||
}
|
||||
function mqttSubmit(){
|
||||
var mqtt_address = document.getElementById("mqtt_address").value;
|
||||
var mqtt_port = document.getElementById("mqtt_port").value;
|
||||
if(mqtt_address=="" || mqtt_port==""){
|
||||
alert("MQTT的地址和端口不能为空");
|
||||
return;
|
||||
}else{
|
||||
//确认提交
|
||||
}
|
||||
var button = document.getElementById("mqtt_submit").submit();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:100%;height:60px;font-size:22px;line-height:60px;background:#006DFE;color:#fff;text-align:center;">物美智能设备配置</div>
|
||||
|
||||
<div id="all">
|
||||
<ul id="tab">
|
||||
<li style="background: #006DFE;">服务端</li>
|
||||
<li style="background: #888;">配网</li>
|
||||
<li style="background: #888;">上传证书</li>
|
||||
</ul>
|
||||
<div class="con" style="display:block;">
|
||||
<form name=”form1” method="post" action="mqtt" id="mqtt_submit">
|
||||
<div class="group">
|
||||
<span>MQTT地址：</span>
|
||||
<input type="text" name="mqtt_address" placeholder="www.wumei.live" id="mqtt_address">
|
||||
</div>
|
||||
<div class="group">
|
||||
<span>MQTT端口：</span>
|
||||
<input type="text" name="mqtt_port" placeholder="1883" id="mqtt_port">
|
||||
</div>
|
||||
<div class="group">
|
||||
<span>MQTT账号：</span>
|
||||
<input type="text" name="mqtt_account" placeholder="可选项">
|
||||
</div>
|
||||
<div class="group">
|
||||
<span>MQTT密码：</span>
|
||||
<input type="text" name="mqtt_password" placeholder="可选项">
|
||||
</div>
|
||||
<div style="line-height:50px;">
|
||||
<span>使用证书：</span>
|
||||
<input type="radio" name="is_certifi" id="unuse" value=0 checked> <label for="unuse" style="margin-right:20px;">不使用</label>
|
||||
<input type="radio" name="is_certifi" id="use" value=1> <label for="use" style="margin-right:35px;">使用</label><br/>
|
||||
</div>
|
||||
<div style="line-height:20px;" class="group">
|
||||
<span></span>
|
||||
<input type="button" class="btn" value="连接服务端" onclick="mqttSubmit()">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="con" style="display:none;">
|
||||
<form name=”form2” method="post" action="wifi" id="wifi_submit">
|
||||
<div class="group">
|
||||
<span>WIFI名称：</span>
|
||||
<input type="text" name="ssid" placeholder="不能包含中文" id="ssid">
|
||||
</div>
|
||||
<div class="group">
|
||||
<span>WIFI密码：</span>
|
||||
<input type="text" name="password" placeholder="不能包含中文" id="password">
|
||||
</div>
|
||||
<div class="group">
|
||||
<span>关联用户：</span>
|
||||
<input type="text" name="uuid" placeholder="用户ID或者手机号" id="uuid">
|
||||
</div>
|
||||
<div style="line-height:20px;" class="group">
|
||||
<span></span>
|
||||
<input type="button" class="btn" value="配网" onclick="wifiSubmit()" >
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="con"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user