<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="../resources/stylesheet.css"/>
    <title>{{device}} WebUI HMI</title>
    <meta charset="UTF-8">
    <script>
    var xhttp = new XMLHttpRequest();
    document.addEventListener("keypress", function (e) { if(e.which == 13) callRfid() }); // Numerical code for "enter"
    function callButton(display, action)
    {
        sendRequest('Button='+action+'&display='+display);
    }
    function callRfid(display, tag)
    {
        sendRequest('rfidString='+tag+'&display='+display);
    }
    function sendRequest(message)
    {
        xhttp.open("POST", "/virtualhmi", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send(message);
    }
    </script>
</head>
<body>
<div class="virtualhmi">
        <div class="hmi-clooney">
            <img src="/resources/rfid.png" class="button-rfid" style="height:10%; width:10%;" onclick="javascript:callRfid({{DISPLAY_NO}},'{{ID_TAG_WILDCARD}}')" alt="RFID">
            <a class="button-debug" href="javascript:callButton({{DISPLAY_NO}}, '{{E_VIRT_DEBUG_KEY}}')" >&#x2315;</a>
            <p>{{IFRAME}}</p>
            <a href="javascript:callButton({{DISPLAY_NO}},'{{E_UP_BUTTON}}')" class="button-ec-shadowless"></a>
            <a href="javascript:callButton({{DISPLAY_NO}},'{{E_DOWN_BUTTON}}')" class="button-ec-shadowless"></a>
            <a href="javascript:callButton({{DISPLAY_NO}},'{{E_START_BUTTON}}')" class="button-ec-shadowless"></a>
            <a href="javascript:callButton({{DISPLAY_NO}},'{{E_STOP_BUTTON}}')" class="button-ec-shadowless"></a>
            <a href="javascript:callButton({{DISPLAY_NO}},'{{E_DIAMOND_BUTTON}}')" class="button-ec-shadowless"></a>
            <br><br>
        </div>
</div>
</body>
</html>
