메인 화면 index.html
메인 화면 index.html
{% extends "base.html" %}
{% block content %}
<div class="container">
<center>
Submarine 0.1
</center>
<form name="frm">
<table>
<tr>
<td colspan=3>
Temperature = <span id="temperature"> 내부 온도 </span>
</td>
</tr>
<tr>
<td colspan=3>
메시지:<span id="resultmessage">...</span><br><BR>
<input type="button" value="VideoStatus" id="btnVideoStatus" /> Video Status=<span id="videostatus">STARTING</span>
<audio autoplay controls>
<source src="http://web.kkorack.com:19080/out.mp3" type="audio/mp3">
</audio>
<BR>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td></td>
<td><input type="button" value=" LIGHT ON " id="btnLightOn" /></td>
<td><br><br><br></td>
</tr>
<tr>
<td></td>
<td><input type=text id="moveFBLFCnt" maxlength="5" size="5" value=1 />
<td><br><br><br></td>
</tr>
<tr>
<td></td>
<td><center><input type="button" value=" ^ " id="btnForward" /></center></td>
<td></td>
</tr>
<tr>
<td><input type="button" value=" < " id="btnLeft" /></td>
<td></td>
<td><input type="button" value=" > " id="btnRight" /></td>
</tr>
<tr>
<td></td>
<td><center><input type="button" value=" v " id="btnBackward" /></center></td>
<td></td>
</tr>
</table>
</td>
<td>
<img src="{{ url_for('video_usb_feed') }}" class="border border-dark">
</td>
<td>
<table>
<tr>
<td colspan=3>
<input type="button" value="SubmarineStatus" id="btnSubmStatus" /> Submarine Status=<span id="submstatus">STOPED</span><br>
<img src="{{ url_for('video_pi_snapshot') }}" width=400 class="border border-dark">
<br>
<span id="communicationlevel"> 통신 정보 </span><br>통신이 중지되면 부상
</td>
</tr>
<tr>
<td colspan=3>
<input type=text id="moveCnt" maxlength="5" size="5" value=1 />
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value=" UP " id="btnFloating" /></td>
<td></td>
</tr>
<tr>
<td></td>
<td><input type="button" value=" DOWN " id="btnDiving" /></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan=3>
<span id="alertmessage"> 알림 메시지 </span><br>
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
var tempId = null;
tempId = setInterval(getTemperatureFunc, 1000*60);
var commCheck = null;
commCheck = setInterval(getCommStatus, 1000*30);
//clearInterval(timerId);
function getTemperatureFunc() {
var fName = "/temperature";
xhr1 = new XMLHttpRequest();
xhr1.open("get", fName, true);
xhr1.onreadystatechange = function() {
if (xhr1.readyState == 4) {
if (xhr1.status == 200) {
document.getElementById("temperature").innerHTML = xhr1.responseText;
} else {
document.getElementById("temperature").innerHTML = " temperature ERROR : " + xhr1.status;
}
}
}
xhr1.send(null);
}
function getCommStatus() {
var fName = "/commCheck";
xhr2 = new XMLHttpRequest();
xhr2.open("get", fName, true);
xhr2.onreadystatechange = function() {
if (xhr2.readyState == 4) {
if (xhr2.status == 200) {
document.getElementById("communicationlevel").innerHTML = xhr2.responseText;
} else {
document.getElementById("communicationlevel").innerHTML = " communicationlevel ERROR : " + xhr2.status;
}
}
}
xhr2.send(null);
}
/////////////////////////////////////////////////////////////////////////////////////////////
window.onload = function() {
document.getElementById("btnLightOn").onclick = setLightOnOff;
document.getElementById("btnFloating").onclick = getFloatingFunc;
document.getElementById("btnDiving").onclick = getDivingFunc;
document.getElementById("btnForward").onclick = getForwardFunc;
document.getElementById("btnBackward").onclick = getTurnBackwardFunc;
document.getElementById("btnLeft").onclick = getLeftFunc;
document.getElementById("btnRight").onclick = getRightFunc;
document.getElementById("btnVideoStatus").onclick = getVideoStatusFunc;
document.getElementById("btnSubmStatus").onclick = getSubmStatusFunc;
}
function setLightOnOff() {
var fName = "/lightOnOff";
xhr = new XMLHttpRequest();
xhr.open("POST", fName, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("alertmessage").value = xhr.responseText;
} else {
alert("ERROR : " + xhr.status);
}
}
}
xhr.send(null);
}
function getFloatingFunc() {
var fName = "/floating";
data=document.getElementById("moveCnt").value;
xhr = new XMLHttpRequest();
xhr.open("POST", fName, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("resultmessage").innerHTML = xhr.responseText;
} else {
alert("ERROR : " + xhr.status);
}
}
}
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.send("moveCnt=" + data);
}
function getDivingFunc() {
var fName = "/diving";
data=document.getElementById("moveCnt").value;
xhr = new XMLHttpRequest();
xhr.open("POST", fName, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("resultmessage").innerHTML = xhr.responseText;
} else {
alert("ERROR : " + xhr.status);
}
}
}
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.send("moveCnt=" + data);
}
function getForwardFunc() {
var fName = "/forward";
data=document.getElementById("moveFBLFCnt").value;
xhr = new XMLHttpRequest();
xhr.open("POST", fName, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("resultmessage").innerHTML = xhr.responseText;
} else {
alert("ERROR : " + xhr.status);
}
}
}
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.send("moveFBLFCnt=" + data);
}
function getTurnBackwardFunc() {
var fName = "/backward";
data=document.getElementById("moveFBLFCnt").value;
xhr = new XMLHttpRequest();
xhr.open("POST", fName, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("resultmessage").innerHTML = xhr.responseText;
} else {
alert("ERROR : " + xhr.status);
}
}
}
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.send("moveFBLFCnt=" + data);
}
function getRightFunc() {
var fName = "/right";
data=document.getElementById("moveFBLFCnt").value;
xhr = new XMLHttpRequest();
xhr.open("POST", fName, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("resultmessage").innerHTML = xhr.responseText;
} else {
alert("ERROR : " + xhr.status);
}
}
}
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.send("moveFBLFCnt=" + data);
}
function getLeftFunc() {
var fName = "/left";
data=document.getElementById("moveFBLFCnt").value;
xhr = new XMLHttpRequest();
xhr.open("POST", fName, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("resultmessage").innerHTML = xhr.responseText;
} else {
alert("ERROR : " + xhr.status);
}
}
}
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.send("moveFBLFCnt=" + data);
}
function getVideoStatusFunc() {
var fName = "/VideoStatus";
xhr = new XMLHttpRequest();
xhr.open("get", fName, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("videostatus").innerHTML = xhr.responseText;
} else {
alert(" status ERROR : " + xhr.status);
}
}
}
xhr.send(null);
}
function getSubmStatusFunc() {
var fName = "/SubmStatus";
xhr = new XMLHttpRequest();
xhr.open("get", fName, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("submstatus").innerHTML = xhr.responseText;
} else {
alert(" status ERROR : " + xhr.status);
}
}
}
xhr.send(null);
}
</script>
{% endblock %}