ESPAsyncWebServer/examples/ESP_AsyncFSBrowser/data/index.htm

132 lines
3.8 KiB
HTML

<!--
FSWebServer - Example Index Page
Copyright (c) 2015 Hristo Gochkov. All rights reserved.
This file is part of the ESP8266WebServer library for Arduino environment.
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>WebSocketTester</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
background-color: black;
}
#dbg, #input_div, #input_el {
font-family: monaco;
font-size: 12px;
line-height: 13px;
color: #AAA;
}
#dbg, #input_div {
margin:0;
padding:0;
padding-left:4px;
}
#input_el {
width:98%;
background-color: rgba(0,0,0,0);
border: 0px;
}
#input_el:focus {
outline: none;
}
</style>
<script type="text/javascript">
var ws = null;
function ge(s){ return document.getElementById(s);}
function ce(s){ return document.createElement(s);}
function stb(){ window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); }
function sendBlob(str){
var buf = new Uint8Array(str.length);
for (var i = 0; i < str.length; ++i) buf[i] = str.charCodeAt(i);
ws.send(buf);
}
function addMessage(m){
var msg = ce("div");
msg.innerText = m;
ge("dbg").appendChild(msg);
stb();
}
function startSocket(){
ws = new WebSocket('ws://'+document.location.host+'/ws',['arduino']);
ws.binaryType = "arraybuffer";
ws.onopen = function(e){
addMessage("Connected");
};
ws.onclose = function(e){
addMessage("Disconnected");
};
ws.onerror = function(e){
console.log("ws error", e);
addMessage("Error");
};
ws.onmessage = function(e){
var msg = "";
if(e.data instanceof ArrayBuffer){
msg = "BIN:";
var bytes = new Uint8Array(e.data);
for (var i = 0; i < bytes.length; i++) {
msg += String.fromCharCode(bytes[i]);
}
} else {
msg = "TXT:"+e.data;
}
addMessage(msg);
};
ge("input_el").onkeydown = function(e){
stb();
if(e.keyCode == 13 && ge("input_el").value != ""){
ws.send(ge("input_el").value);
ge("input_el").value = "";
}
}
}
function startEvents(){
var es = new EventSource('/events');
es.onopen = function(e) {
addMessage("Events Opened");
};
es.onerror = function(e) {
if (e.target.readyState != EventSource.OPEN) {
addMessage("Events Closed");
}
};
es.onmessage = function(e) {
addMessage("Event: " + e.data);
};
es.addEventListener('ota', function(e) {
addMessage("Event[ota]: " + e.data);
}, false);
}
function onBodyLoad(){
startSocket();
startEvents();
}
</script>
</head>
<body id="body" onload="onBodyLoad()">
<pre id="dbg"></pre>
<div id="input_div">
$<input type="text" value="" id="input_el">
</div>
</body>
</html>