메인 화면 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 %}