lolengine
/
lol
peilaus alkaen https://github.com/lolengine/lol

<DOCTYPE html>
<html>

  <!--
  Copyright (c) 2012 The Native Client Authors. All rights reserved.
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
  -->

<head>

<style type="text/css">
body
{
    font:12px Consolas;
}
#status_field
{
    font:12px Consolas;
}
button
{
    font:14px Consolas;
}
textarea
{
    font:14px Consolas;
}
progress
{
    background-color: #f3f3f3;  
    border: 0;  
    height: 18px;
    width: 200px;
    border-radius: 9px;  
}
progress::-webkit-progress-bar
{
    background-color: #f3f3f3;
    border: 1px solid #000000;
    padding: 2px 2px;
    height: 20px;
    border-radius: 0px;
}
progress::-webkit-progress-value
{
    background-color: #22BB22;
    border: 0px;
    height: 14px;
    border-radius: 0px;
}
#listener
{
    position: relative;
}
#progress_bar
{
    position: absolute;
    top: 40%;
    left: 40%;
    z-index: 3;
}
#DIV_nacl_div
{
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: -1;
}
#BGCanvas
{
    border:1px solid #000000;
}
#DIV_command0 
{
    margin-left: 5px;
}
</style>

<title>Mesh Viewer NaCl</title>

<script src="./TypeDictionnary.js"></script>
<script type="text/javascript">
    var EasyMeshDict = new TypeDictionnary("EasyMesh");
    function GetCmdDictionnary() { return EasyMeshDict; }
</script>
<script src="./EasyMeshDictionnary.js"></script>

<script type="text/javascript">
    nacl_div = null;  // Global application object.
    nacl_module = null;  // Global application object.
    mesh_code_module = null;
    code_helper_cmd = [null, null];
    code_helper_arg = null;
    code_helper_cmt = null;
    code_helper_var = null;
    code_helper_alpha = null;

    status_text = 'NO-STATUS';
    window.setTimeout("Tick()", 100);
    window.setTimeout("Init()", 100);

    function Init()
    {
        nacl_div = document.getElementById('DIV_nacl_div');
        mesh_code_module = document.getElementById('DIV_MeshCode');
        code_helper_cmd[0] = document.getElementById('DIV_command0');
        code_helper_cmd[1] = document.getElementById('DIV_command1');
        code_helper_arg = document.getElementById('DIV_args');
        code_helper_cmt = document.getElementById('DIV_comment');
        code_helper_var = document.getElementById('DIV_var_usage');
        code_helper_alpha = document.getElementById('DIV_alphabet');

        code_helper_alpha.innerHTML = '&nbsp;Table of content [';
        for (var a = 'a'.charCodeAt(0); a <= 'z'.charCodeAt(0); a++)
        {
            var stop = false;
            for (var i = 0; !stop && i < EasyMeshDict.m_cmds.length; i++)
            {
                for (var j = 0; j < EasyMeshDict.m_cmds[i].m_name.length; j++)
                {
                    if (EasyMeshDict.m_cmds[i].m_name[j][0] == String.fromCharCode(a))
                    {
                        code_helper_alpha.innerHTML += '<b>' + String.fromCharCode(a) + '</b>';
                        stop = true;
                        break;
                    }
                }
            }
            if (!stop)
                code_helper_alpha.innerHTML += '.';
        }
        code_helper_alpha.innerHTML += ']&nbsp;<br>&nbsp;';
    }

    function Tick()
    {
        window.setTimeout("Tick()", 100);

/* -- cmd lookup code. */
        if (mesh_code_module != undefined)
        {
            var cmd_size = 8;
            var found = FindMatchingCommand(mesh_code_module);
            if (found.match_list.length > 0)
            {
                var type_list = new Array();
                code_helper_cmd[0].innerHTML = "";
                code_helper_cmd[1].innerHTML = "";
                code_helper_arg.innerHTML = "";
                code_helper_cmt.innerHTML = "";
                //Go through the found matches and show them.
                for (var i = 0; i < found.match_list.length; i++)
                {
                    var cur_match = EasyMeshDict.m_cmds[found.match_list[i]];
                    code_helper_cmd[0].innerHTML += '[';
                    var max = cur_match.m_name.length;
                    var word = 0;
                    for (var j = 0; j < max; j++)
                    {
                        var mth = found.match;
                        var cmd = cur_match.m_name[j];
                        //Matching start caracters should be bold
                        if (mth == cmd.slice(0, mth.length))
                        {
                            code_helper_cmd[word].innerHTML += '&nbsp;';
                            code_helper_cmd[word].innerHTML += '<b>' + mth + '</b>';
                            code_helper_cmd[word].innerHTML += cmd.slice(mth.length, cmd.length);
                            word++;
                        }
                    }
                    //Complete empty command by <br> so commands in the two columns are on the same line
                    word = (word > 0)?(2):(0);
                    while (word-- > 0)
                        code_helper_cmd[word].innerHTML += "<br>";
                    //Go through the arguments and show them
                    if (found.match_list.length < 4 && i == 0)
                    {
                        code_helper_arg.innerHTML += "&nbsp;>&nbsp;";
                        if (cur_match.m_arg != undefined)
                        {
                            max = cur_match.m_arg.length;
                            var found_optional = false;
                            for (var j = 0; j < max; j++)
                            {
                                if (cur_match.m_arg[j].m_optional != undefined && found_optional == false)
                                {
                                    var tab = '<br>'; for (var l = 0; l < 5; l++) tab += '&nbsp;';
                                    code_helper_arg.innerHTML += tab + 'Opt: [';
                                    found_optional = true;
                                }
                                else if (j > 0)
                                    code_helper_arg.innerHTML += ', ';

                                //Types are bold
                                code_helper_arg.innerHTML += '<b>' + cur_match.m_arg[j].m_type + '</b> ';
                                type_list[type_list.length] = cur_match.m_arg[j].m_type;
                                //Names are not
                                code_helper_arg.innerHTML += cur_match.m_arg[j].m_name;
                                if (cur_match.m_arg[j].m_optional != undefined)
                                    code_helper_arg.innerHTML += ' = <b>' + cur_match.m_arg[j].m_optional + '</b>';
                            }
                            if (found_optional == true)
                                code_helper_arg.innerHTML += '] ';
                            code_helper_arg.innerHTML += '&nbsp;<br>';
                        }
                        //Add the comment
                        if (cur_match.m_comment != undefined)
                        {
                            var tb_i = 16; var in_i = 8;
                            var tab = '<br>';
                            if (cur_match.m_arg == undefined) { tb_i -= 8; in_i -= 8; }
                            for (var l = 0; l < in_i; l++) code_helper_arg.innerHTML += '&nbsp;';
                            for (var l = 0; l < tb_i; l++) tab += '&nbsp;';
                            code_helper_arg.innerHTML += cur_match.m_comment + '&nbsp;';
                            while (code_helper_arg.innerHTML.indexOf('\n') > -1)
                                code_helper_arg.innerHTML = code_helper_arg.innerHTML.replace('\n', tab);
                        }
                    }
                }
                //Go through the type list and bold the used ones.
                if (EasyMeshDict.m_vars != undefined)
                {
                    code_helper_var.innerHTML = "";
                    var max = EasyMeshDict.m_vars.length;
                    for (var j = 0; j < max; j++)
                    {
                        var cur_var = EasyMeshDict.m_vars[j];
                        code_helper_var.innerHTML += "&nbsp;>&nbsp;";
                        var k = 0;
                        for (; k < type_list.length; k++)
                            if (cur_var.m_type == type_list[k])
                                break;

                        //Bold the used variables
                        if (k < type_list.length) 
                            code_helper_var.innerHTML += "<b>" + cur_var.m_type + "</b>";
                        else
                            code_helper_var.innerHTML += cur_var.m_type;
                        
                        if (cur_var.m_syntax != undefined)
                        {
                            var align_size = 9;
                            var cmd_size = cur_var.m_type.length + 3;
                            for (var m = 0; m < cur_var.m_syntax.length; m++)
                            {
                                for (var l = 0; l < align_size - cmd_size; l++)
                                    code_helper_var.innerHTML += "&nbsp;";
                                code_helper_var.innerHTML += cur_var.m_syntax[m] + "<br>";
                                cmd_size = 0;
                            }
                        }
                    }
                }
            }
            else
            {
                code_helper_cmd[0].innerHTML = "[ ...&nbsp;";
                code_helper_cmd[1].innerHTML = "";
                code_helper_arg.innerHTML = "";
                code_helper_cmt.innerHTML = "";
            }
        }
/* -- */
    }


    // Indicate load success.
    function moduleDidLoad() {
        nacl_module = document.getElementById('ID_NaClModule');
        mesh_code_module = document.getElementById('DIV_MeshCode');
        updateStatus('Rock n\' Roll !!');
        var progress_bar = document.getElementById('progress_bar');
        progress_bar.style.visibility = "hidden";
    }

    // The 'message' event handler.  This handler is fired when the NaCl module
    // posts a message to the browser by calling PPB_Messaging.PostMessage()
    // (in C) or pp::Instance.PostMessage() (in C++).  This implementation
    // simply displays the content of the message in an alert panel.
    function handleMessage(message_event) {
      alert(message_event.data);
    }

    // If the page loads before the Native Client module loads, then set the
    // status message indicating that the module is still loading.  Otherwise,
    // do not change the status message.
    function pageDidLoad() {
      if (nacl_module == null) {
        updateStatus('Please wait, loading ...');
      } else {
        // It's possible that the Native Client module onload event fired
        // before the page's onload event.  In this case, the status message
        // will reflect 'SUCCESS', but won't be displayed.  This call will
        // display the current message.
        updateStatus();
      }
    }

    // Set the global status message.  If the element with id 'statusField'
    // exists, then set its HTML to the status message as well.
    // opt_message The message test.  If this is null or undefined, then
    // attempt to set the element with id 'statusField' to the value of
    // |status_text|.
    function updateStatus(opt_message) {
      if (opt_message)
        status_text = opt_message;
      var statusField = document.getElementById('status_field');
      if (statusField) {
        statusField.innerHTML = status_text;
      }
    }

    function moduleCrash(event)
    {
        alert("Module has crashed !");
        //nacl_module.src = null;
    }

    function moduleLoadProgress(event)
    {
        var progressBar = document.getElementById("p");
        var statusField = document.getElementById('status_field');
        if (event.lengthComputable)
        {
            progressBar.max = event.total;
            progressBar.value = event.loaded;
            var load_progress = ((event.loaded / event.total) * 100.0);
            status_field.innerHTML = 'Please wait, loading [' + load_progress.toFixed(0) + '%]';
            
        }
        else
        {
            progressBar.value = -1;
            status_field.innerHTML = 'Computing progress ...'
        }
    }

    //Called by the "Send Mesh Command !" button
    function SendMeshData()
    {
        if (nacl_module)
            nacl_module.postMessage(mesh_code_module.value);
        else
            alert("Module not loaded");
    }
  </script>
</head>

<body onload="pageDidLoad()">

<h1>Mesh Viewer : Native Client version.</h1>
<p>
    <div id="final_div">
        <div id="listener" align="center" style="width:770px;height:200px">
            <canvas id="BGCanvas" width="772" height="202"></canvas>
            <div id="progress_bar">
                <div id="status_field">NO-STATUS</div>
                <progress id="p" align="left" width="200"></progress>
            </div>
            <div id="DIV_nacl_div">
                <param name="wmode" value="opaque"/>
                <embed name="nacl_module"
                id="ID_NaClModule"
                width=770 height=200
                src="meshviewer_nacl.nmf"
                type="application/x-nacl" />
            </div>
            <script type="text/javascript">
                var listener = document.getElementById('listener');
                listener.addEventListener('load', moduleDidLoad, true);
                listener.addEventListener('progress', moduleLoadProgress, true);
                listener.addEventListener('message', handleMessage, true);
                listener.addEventListener('crash', moduleCrash, true);
            </script>
        </div>
    </div>
</p>
<div><button onclick="SendMeshData()">Send Mesh Command !</button></div>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="bouton">
                <textarea autofocus id="DIV_MeshCode" rows="6" cols="94" style="font: 14px Consolas; resize: none;">//This is a comment
sc#f8f afcb 1 1 1 0</textarea>
            </div>
        </td>
        <td valign="top" rowspan="3">&nbsp;</td>
        <td valign="top" rowspan="3">
            <div><b><u>Variable Types usage :</u></b></div>
            <div id="DIV_var_usage"></div>
        </td>
    </tr>
    <tr>
    <td>
        <div id="DIV_alphabet"></div>
    </td>
    </tr>
    <tr>
        <td valign="top">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td valign="top"><div id="DIV_command0"></div></td>
                    <td valign="top"><div id="DIV_command1"></div></td>
                    <td valign="top"><div id="DIV_args"    ></div></td>
                    <td valign="top"><div id="DIV_comment" ></div></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</body>
</html>