mirror of
https://github.com/oopuuu/zTC1.git
synced 2025-12-12 21:18:13 +08:00
592 lines
18 KiB
HTML
592 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html" charset="utf-8">
|
|
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
|
|
<title>Welcom TC1</title>
|
|
<style type="text/css">
|
|
fieldset{margin-bottom:10px;border:#000 solid 1px;min-inline-size:auto;}
|
|
input,select,button{padding:5px;background:white;border:#777 solid 1px;}
|
|
button{background:none;border:1px #777 solid;}
|
|
button:disabled,select:disabled,input:disabled{background:#bfbfbf;}
|
|
td,th{padding:5px;}
|
|
.task table{width:100%;margin:10px 0;border-collapse:collapse;}
|
|
.task td,.task th{text-align:center;border:1px solid #000;}
|
|
.socket input,.mode input{margin-right:-4px;}
|
|
.submit{padding:5px;margin-top:5px;}
|
|
.success{color:#58dc5c;}
|
|
.error{color:#ff2d2d;}
|
|
.info{color:#e700ea;}
|
|
.network div{padding:5px;}
|
|
.connect div{padding:5px;}
|
|
.right{text-align:right;}
|
|
.pw{width:100%}
|
|
.pw td{width:50%}
|
|
.line{border-top:1px solid #dedede;}
|
|
.line_10{height:4px;}/*10^0.6=4*/
|
|
.line_100{height:12px;}/*100^0.6=16*/
|
|
.line_1000{height:47px;}/*1000^0.6=63*/
|
|
.line_2000{height:33px;}/*2000^0.6=96*/
|
|
.line_top{height:10px;border:none;}
|
|
#power_div{margin-top:10px;border-left:1px solid #000;border-bottom:1px solid #000;}
|
|
#power_line{height:120px;position:relative;overflow:scroll;margin-top:-120px;}
|
|
.power_pre{position:absolute;bottom:0;float:left;height:76px;width:0;border-left:1px solid #00ffff38;border-top:1px solid #000;}
|
|
.power_by{text-align:center;}
|
|
.power_by a{text-decoration:none;}
|
|
.log_div{height:300px;overflow:scroll;}
|
|
.ota input{width:100%;box-sizing: border-box;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<fieldset class="socket">
|
|
<legend>Power Control</legend>
|
|
<table id="socket_tb">
|
|
<tr>
|
|
<td>
|
|
<input type="checkbox" id="socket1" name="socket">
|
|
<label for="socket1">Socket-1</label>
|
|
</td>
|
|
<td>
|
|
<input type="checkbox" id="socket2" name="socket">
|
|
<label for="socket2">Socket-2</label>
|
|
</td>
|
|
<td>
|
|
<input type="checkbox" id="socket3" name="socket">
|
|
<label for="socket3">Socket-3</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<input type="checkbox" id="socket4" name="socket">
|
|
<label for="socket4">Socket-4</label>
|
|
</td>
|
|
<td>
|
|
<input type="checkbox" id="socket5" name="socket">
|
|
<label for="socket5">Socket-5</label>
|
|
</td>
|
|
<td>
|
|
<input type="checkbox" id="socket6" name="socket">
|
|
<label for="socket6">Socket-6</label>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="submit">
|
|
<button class="submit_bt" onclick="SetSocket()">Submit</button>
|
|
<span class="status_sp success">OK</span>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="chart">
|
|
<legend>Power Status</legend>
|
|
<table class="pw">
|
|
<tr>
|
|
<td>P: <span id="p" class="success">0</span> W</td>
|
|
<td>W: <span id="w" class="error">0</span> kW·h</td>
|
|
</tr>
|
|
</table>
|
|
<div id="power_div">
|
|
<div class="line line_top"></div>
|
|
<div class="line line_2000"></div>
|
|
<div class="line line_1000"></div>
|
|
<div class="line line_100"></div>
|
|
<div class="line line_10"></div>
|
|
</div>
|
|
<div id="power_line">
|
|
<!-- <div class="power_pre" style="height:70px;left:20px;"></div> -->
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="network">
|
|
<legend>Network Config</legend>
|
|
<table>
|
|
<tr>
|
|
<td class="right">SSID:</td>
|
|
<td>
|
|
<select id="wifi" onchange="SelectWifi()">
|
|
<option value="0">Manual</option>
|
|
</select>
|
|
<button id="rescan" onclick="Rescan()">Rescan</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">SSID:</td>
|
|
<td>
|
|
<input id="ssid" type="text" onchange="ChangeInput(1)"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">PSWD:</td>
|
|
<td>
|
|
<input id="pswd" type="password" onchange="ChangeInput(2)"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">MODE:</td>
|
|
<td class="mode">
|
|
<input type="radio" id="mode1" name="mode" onchange="ChangeMode(0)">
|
|
<label for="mode1">AP</label>
|
|
<input type="radio" id="mode2" name="mode" onchange="ChangeMode(1)">
|
|
<label for="mode2">STATION</label>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="submit">
|
|
<button class="submit_bt" onclick="SubmitNetwork()">Submit</button>
|
|
<span class="status_sp success">OK</span>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>MQTT Config</legend>
|
|
<table>
|
|
<tr>
|
|
<td class="right">MQTT:</td>
|
|
<td>
|
|
<input id="mqtt_addr"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">PORT:</td>
|
|
<td>
|
|
<input id="mqtt_port"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="submit">
|
|
<button class="submit_bt" onclick="SubmitMqtt()">Submit</button>
|
|
<span class="status_sp success">OK</span>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="connect">
|
|
<legend>System Status</legend>
|
|
<table>
|
|
<tr>
|
|
<td class="right">Version:</td>
|
|
<td class="info" id="version"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">IP:</td>
|
|
<td class="info" id="ip"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">Mask:</td>
|
|
<td class="info" id="mask"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">Gateway:</td>
|
|
<td class="info" id="gateway"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">Uptime:</td>
|
|
<td class="success" id="uptime"></td>
|
|
</tr>
|
|
</table>
|
|
</fieldset>
|
|
|
|
<fieldset class="task">
|
|
<legend>Timed Task</legend>
|
|
<input type="datetime-local" step="01" id="task_time"/>
|
|
<br>
|
|
<select id="task_skt_idx">
|
|
<option value="0">Socket-1</option>
|
|
<option value="1">Socket-2</option>
|
|
<option value="2">Socket-3</option>
|
|
<option value="3">Socket-4</option>
|
|
<option value="4">Socket-5</option>
|
|
<option value="5">Socket-6</option>
|
|
</select>
|
|
<select id="task_on">
|
|
<option value="1">On</option>
|
|
<option value="0">Off</option>
|
|
</select>
|
|
<button class="submit_bt" onclick="AddTimedTask()">Add</button>
|
|
<span class="status_sp success">OK</span>
|
|
<!-- <button class="submit_bt" onclick="DelTimedTask()">TestDelete</button> -->
|
|
<table id="timed_task_tb">
|
|
<tr>
|
|
<th>Index</th>
|
|
<th>Time</th>
|
|
<th>Socket</th>
|
|
<th>On</th>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">Please Sync</td>
|
|
</tr>
|
|
</table>
|
|
<button onclick="GetTimedTask()">Sync</button>
|
|
</fieldset>
|
|
|
|
<fieldset class="sys_log">
|
|
<legend>System Log</legend>
|
|
<div class="log_div">
|
|
<pre id="sys_log"></pre>
|
|
</div>
|
|
<button class="submit_bt" onclick="GetSysLog()">Refresh</button>
|
|
</fieldset>
|
|
|
|
<fieldset class="ota">
|
|
<legend>OTA Update</legend>
|
|
<input type="text" id="ato_url" value="http://119.23.191.79/tc1/tc1ota.bin">
|
|
<br>
|
|
<br>
|
|
<button class="submit_bt" onclick="OtaStart()">Update</button>
|
|
<span class="status_sp success">OK</span>
|
|
<span class="info" id="ota_status"></span>
|
|
</fieldset>
|
|
|
|
<p class="power_by">power by <a id="end" href="https://github.com/zogodo/zTC1" target="_blank">github/zTC1</a></p>
|
|
|
|
<script type="text/javascript">
|
|
|
|
function Ajax(url, onsuccess, type, data) {
|
|
var xml_http = new XMLHttpRequest();
|
|
xml_http.open(type, url, true);
|
|
xml_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
xml_http.onreadystatechange = function () {
|
|
if (xml_http.readyState == 4) {
|
|
if (xml_http.status == 200) {
|
|
onsuccess(xml_http.responseText.replace(/'/g, '"'));
|
|
}
|
|
else {
|
|
alert("Ajax error: " + xml_http.status);
|
|
}
|
|
}
|
|
};
|
|
if (data != null && type == "POST") {
|
|
xml_http.send(data);
|
|
} else {
|
|
xml_http.send();
|
|
}
|
|
}
|
|
function HttpGet(url, onsuccess) {
|
|
Ajax(url, onsuccess, "GET", null);
|
|
}
|
|
function HttpPost(url, onsuccess, data) {
|
|
Ajax(url, onsuccess, "POST", data);
|
|
}
|
|
function HttpDel(url, onsuccess, data) {
|
|
Ajax(url, onsuccess, "DELET", data);
|
|
}
|
|
|
|
var submit_bts = document.getElementsByClassName("submit_bt");
|
|
var info_spans = document.getElementsByClassName("status_sp");
|
|
|
|
var socket_tb = document.getElementById("socket_tb");
|
|
var checkboxs = socket_tb.getElementsByTagName("input");
|
|
|
|
var p = document.getElementById("p");
|
|
var w = document.getElementById("w");
|
|
var power_line = document.getElementById("power_line");
|
|
|
|
var rescan_btn = document.getElementById("rescan");
|
|
var ssid_slt = document.getElementById("wifi");
|
|
var ssid_ipt = document.getElementById("ssid");
|
|
var pswd_ipt = document.getElementById("pswd");
|
|
var mode_rd1 = document.getElementById("mode1");
|
|
var mode_rd2 = document.getElementById("mode2");
|
|
|
|
var mqtt_addr_ipt = document.getElementById("mqtt_addr");
|
|
var mqtt_port_ipt = document.getElementById("mqtt_port");
|
|
|
|
var info_version = document.getElementById("version");
|
|
var info_ip = document.getElementById("ip");
|
|
var info_mask = document.getElementById("mask");
|
|
var info_gateway = document.getElementById("gateway");
|
|
var uptime = document.getElementById("uptime");
|
|
|
|
var sys_log = document.getElementById("sys_log");
|
|
var log_div = document.getElementsByClassName("log_div")[0];
|
|
|
|
var ota_status = document.getElementById("ota_status");
|
|
|
|
var mode = -1;
|
|
var ap_name = "";
|
|
var ap_pswd = "";
|
|
var station_name = "";
|
|
var station_pswd = "";
|
|
HttpGet("/status", function (re) {
|
|
var status = JSON.parse(re);
|
|
var status_arr = status.sockets.split(",");
|
|
for (var i = 0; i < status_arr.length; i++) {
|
|
checkboxs[i].checked = status_arr[i] == "1";
|
|
station_name = status.station_ssid;
|
|
station_pswd = status.station_pwd;
|
|
ap_name = status.ap_ssid;
|
|
ap_pswd = status.ap_pwd;
|
|
//mode = status.mode;
|
|
ChangeMode(status.mode);
|
|
|
|
mqtt_addr_ipt.value = status.mqtt_addr;
|
|
mqtt_port_ipt.value = status.mqtt_port;
|
|
|
|
info_version.innerHTML = status.version;
|
|
info_ip.innerHTML = status.ip;
|
|
info_mask.innerHTML = status.mask;
|
|
info_gateway.innerHTML = status.gateway;
|
|
uptime.innerHTML = status.start_time;
|
|
}
|
|
});
|
|
|
|
var power_idx = 0;
|
|
var position = 0;
|
|
function GetPowerRecord() {
|
|
HttpPost("/power", function (re) {
|
|
var power = JSON.parse(re);
|
|
power_idx = power.idx + 1;
|
|
var html = "";
|
|
for (var i = 0; i < power.powers.length; i++) {
|
|
var curr_p = power.powers[i]/10;
|
|
p.innerHTML = curr_p.toFixed(2);
|
|
var y = Math.pow(curr_p, 0.6);
|
|
html += "<div class='power_pre' style='height:"+y+"px;left:"+position+"px;'></div>";
|
|
position += 1;
|
|
}
|
|
if (power.powers.length != 0 && power_line.scrollWidth - power_line.offsetWidth - power_line.scrollLeft < 10) {
|
|
power_line.innerHTML += html;
|
|
power_line.scrollTo(power_line.scrollWidth, 0); //滑动到最后
|
|
}
|
|
var w_v = (17.1 * power.p_count) / 1000 / 36000;
|
|
w.innerHTML = w_v.toFixed(2); //累加功率
|
|
uptime.innerHTML = power.up_time;
|
|
window.setTimeout(GetPowerRecord, 3000);
|
|
}, power_idx.toString());
|
|
}
|
|
GetPowerRecord();
|
|
|
|
function SetOK(i) {
|
|
submit_bts[i].disabled = false;
|
|
info_spans[i].className = "status_sp success";
|
|
info_spans[i].innerHTML = "OK";
|
|
}
|
|
function SetIng(i) {
|
|
submit_bts[i].disabled = true;
|
|
info_spans[i].className = "status_sp info";
|
|
info_spans[i].innerHTML = "ing...";
|
|
}
|
|
|
|
function SetSocket() {
|
|
SetIng(0);
|
|
var sockets_st = "";
|
|
for (var i = 0; i < checkboxs.length; i++) {
|
|
sockets_st += (checkboxs[i].checked ? "1," : "0,");
|
|
}
|
|
HttpPost("/socket", function (re) {
|
|
SetOK(0);
|
|
}, sockets_st);
|
|
}
|
|
|
|
function SelectWifi() {
|
|
ssid_ipt.disabled = ssid_slt.value != "0";
|
|
if (ssid_slt.value == "0") {
|
|
ssid_ipt.value = station_name;
|
|
} else {
|
|
ssid_ipt.value = ssid_slt.options[ssid_slt.selectedIndex].text;
|
|
}
|
|
}
|
|
|
|
function ChangeMode(m) {
|
|
if (mode == m) return;
|
|
if (m != 1) {
|
|
//AP模式
|
|
mode_rd1.checked = true;
|
|
ssid_slt.value = "0";
|
|
ssid_slt.disabled = true;
|
|
rescan_btn.disabled = true;
|
|
ssid_ipt.disabled = false;
|
|
ssid_ipt.value = ap_name;
|
|
pswd_ipt.value = ap_pswd;
|
|
} else {
|
|
//Station模式
|
|
mode_rd2.checked = true;
|
|
ssid_slt.value = "0";
|
|
ssid_slt.disabled = false;
|
|
rescan_btn.disabled = false;
|
|
ssid_ipt.disabled = false;
|
|
ssid_ipt.value = station_name;
|
|
pswd_ipt.value = station_pswd;
|
|
}
|
|
mode = m;
|
|
}
|
|
|
|
function ChangeInput(type) {
|
|
if (mode == 0) {
|
|
ap_name = ssid_ipt.value;
|
|
ap_pswd = pswd_ipt.value;
|
|
} else if (mode == 1) {
|
|
station_name = ssid_ipt.value;
|
|
station_pswd = pswd_ipt.value;
|
|
} else {
|
|
alert("mode error: " + mode);
|
|
}
|
|
}
|
|
|
|
//Quotation Marks
|
|
function ContainQM(str) {
|
|
if (str == ""
|
|
|| str.indexOf("'") >= 0
|
|
|| str.indexOf('"') >= 0
|
|
|| str.indexOf(' ') >= 0
|
|
|| str.length > 32) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
var qm_mess = "Sorry, can't use ' or \" or space or empty.\n\nAlso, length <= 32."
|
|
var le_mess = "Sorry, length < 8."
|
|
|
|
function SubmitNetwork() {
|
|
if (mode == 0) {
|
|
if (ContainQM(ap_name) || ContainQM(ap_pswd)) {
|
|
alert(qm_mess);
|
|
return;
|
|
}
|
|
if (ap_pswd.length < 8) {
|
|
alert(le_mess);
|
|
}
|
|
var params = mode + " " + ap_name+" "+ap_pswd;
|
|
} else if (mode == 1) {
|
|
if (ContainQM(station_name) || ContainQM(station_pswd)) {
|
|
alert(qm_mess);
|
|
return;
|
|
}
|
|
if (station_pswd.length < 8) {
|
|
alert(le_mess);
|
|
}
|
|
var params = mode + " " + station_name+" "+station_pswd;
|
|
} else {
|
|
alert("mode error: " + mode);
|
|
return;
|
|
}
|
|
SetIng(1);
|
|
HttpPost("/wifi/config", function (re) {
|
|
alert(re);
|
|
SetOK(1);
|
|
}, params);
|
|
}
|
|
|
|
function SubmitMqtt() {
|
|
SetIng(2);
|
|
var params = mqtt_addr_ipt.value + " " + mqtt_port_ipt.value;
|
|
HttpPost("/mqtt/config", function (re) {
|
|
alert(re);
|
|
SetOK(2);
|
|
}, params);
|
|
}
|
|
|
|
function Rescan() {
|
|
HttpPost("/wifi/scan", function (re) {
|
|
if (re == "OK") {
|
|
rescan_btn.innerHTML = "Scanning...";
|
|
rescan_btn.disabled = true;
|
|
window.setTimeout(GetScanResult, 1000);
|
|
} else {
|
|
alert(re);
|
|
}
|
|
});
|
|
}
|
|
|
|
function GetScanResult() {
|
|
HttpGet("/wifi/scan", function (re) {
|
|
if (re != "NO") {
|
|
var ret = JSON.parse(re);
|
|
var html = "<option value='0'>Manual</option>";
|
|
for (var i = 0; i < ret.ssids.length; i++) {
|
|
html += "<option value='"+(i+1)+"'>"+ret.ssids[i]+"</option>";
|
|
}
|
|
ssid_slt.innerHTML = html;
|
|
|
|
rescan_btn.innerHTML = "Rescan";
|
|
rescan_btn.disabled = false;
|
|
return;
|
|
}
|
|
window.setTimeout(GetScanResult, 1000);
|
|
});
|
|
}
|
|
|
|
function GetSysLog() {
|
|
HttpGet("/log", function (re) {
|
|
sys_log.innerHTML = re;
|
|
log_div.scrollTo(0, log_div.scrollHeight);
|
|
});
|
|
}
|
|
GetSysLog();
|
|
|
|
function GetTimedTask() {
|
|
HttpGet("/task", function (re) {
|
|
var tb_html = "\
|
|
<tr>\
|
|
<th>Index</th>\
|
|
<th>Time</th>\
|
|
<th>Socket</th>\
|
|
<th>On</th>\
|
|
</tr>";
|
|
console.log(re);
|
|
var tasks = JSON.parse(re);
|
|
if (tasks.length == 0) {
|
|
tb_html += "<tr><td colspan='4'>No Timed Task</td></tr>";
|
|
}
|
|
for (var i = 0; i < tasks.length; i++) {
|
|
tb_html += "\
|
|
<tr>\
|
|
<td>" + (i+1) + "</td>\
|
|
<td>" + tasks[i].prs_time + "</td>\
|
|
<td>" + tasks[i].socket_idx + "</td>\
|
|
<td>" + tasks[i].on + "</td>\
|
|
</tr>";
|
|
}
|
|
document.getElementById("timed_task_tb").innerHTML = tb_html;
|
|
});
|
|
}
|
|
|
|
function AddTimedTask() {
|
|
var tim = document.getElementById("task_time").value;
|
|
var idx = document.getElementById("task_skt_idx").value;
|
|
var on = document.getElementById("task_on").value;
|
|
|
|
if (tim == null || tim == "" || tim.length < 10) {
|
|
alert("task time invalid!");
|
|
return;
|
|
}
|
|
var prs_time = Math.round(new Date(tim) / 1000);
|
|
//prs_time = prs_time + parseInt(sec);
|
|
var cmd = prs_time + " " + idx + " " + on;
|
|
if (cmd.length >= 16) {
|
|
alert("CMD ERROR!");
|
|
}
|
|
|
|
SetIng(3);
|
|
HttpPost("/task", function (re) {
|
|
SetOK(3);
|
|
GetTimedTask();
|
|
}, cmd);
|
|
}
|
|
|
|
function DelTimedTask() {
|
|
var time = "123456";
|
|
HttpPost("/task?time="+time, function (re) {
|
|
SetOK(3);
|
|
GetTimedTask();
|
|
}, time);
|
|
}
|
|
|
|
function OtaStart() {
|
|
ato_url = document.getElementById("ato_url").value;
|
|
SetIng(4);
|
|
HttpPost("/ota", function (re) {
|
|
SetOK(4);
|
|
OtaStatus();
|
|
}, ato_url);
|
|
}
|
|
|
|
function OtaStatus() {
|
|
HttpGet("/ota", function (re) {
|
|
ota_status.innerHTML = " ota progress: " + re + "%";
|
|
window.setTimeout(OtaStatus, 1000);
|
|
}, ato_url);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|