CHDK Wiki
Register
Advertisement

Save this code as mdtest.html on your local drive and then open it with your browser :[]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <!--
    Web-based CHDK motion detector speed test
    Copyright (c) 2008 DataGhost
    -->
    <head>
        <title>Motion detector speed test</title>
        <style type="text/css">
            body {
                background-color: #000000;
                color: #000000;
                font-family: Verdana, sans-serif;
            }
            table {
                background-color: #000000;
                border: 0px;
                font-size: 24pt;
                margin: auto;
                position: relative;
            }
            td {
                background-color: #ffffff;
                text-align: center;
            }
            td.lit {
                background-color: #ffffff;
            }
            td.unlit {
                background-color: #000000;
            }
            span.buttonlight {
                color: #ffffff;
                cursor: pointer;
            }
            span.buttondark {
                color: #000000;
                cursor: pointer;
            }
            div#settings {
                background-color: #ffffff;
            }
        </style>
        <script type="text/javascript">
            <!--
            // Globals
            var step = 10;
            var tbl_width = 7;
            var tbl_height = 7;
            var tbl_offtop = 0;
            var delaystart = 500;
            var delay = 10000;
            var test_go = 1;
            var timer;
            
            // Page stuff
            function preparetest() {
                var tbl = document.getElementById('md_blocks');
                var body = document.getElementById('body');
                tbl.style.width=parseInt(body.clientWidth) + 'px';
                tbl.style.height=parseInt(0.75 * parseInt(body.clientWidth)) + 'px';
                
                document.getElementById('tbl_pxwidth').value = parseInt(tbl.style.width);
                document.getElementById('tbl_pxheight').value = parseInt(tbl.style.height);
                document.getElementById('tbl_pxtop').value = tbl_offtop;
                document.getElementById('tbl_cols').value = tbl_width;
                document.getElementById('tbl_rows').value = tbl_height;
                document.getElementById('timestep').value = step;
                document.getElementById('delaystart').value = delaystart;
                document.getElementById('delay').value = delay;
                
                redrawtable();
            }
            
            function redrawtable() {
                var tbl = document.getElementById('md_blocks');
                var i, x, y;
                var html = '';
                
                i = 1;
                for(y=0;y<tbl_height;y++) {
                    html += '<tr>';
                    for(x=0;x<tbl_width;x++) {
                        html += '<td id="td_'+ i + '">'+ (step * i).toString() +'</td>';
                        i++;
                    }
                    html += '</tr>\n';
                }
                
                tbl.innerHTML = html;
            }
            
            
            // Settings
            function showtable() {
                for(i=1;i<=tbl_width*tbl_height;i++) {
                    document.getElementById('td_'+i).className='lit';
                }
            }

            function hidetable() {
                for(i=1;i<=tbl_width*tbl_height;i++) {
                    document.getElementById('td_'+i).className='unlit';
                }
            }
            
            function showsettings() {
                document.getElementById('settings').style.display='block';
            }
            
            function hidesettings() {
                document.getElementById('settings').style.display='none';
            }
            
            function changetest() {
                var tmp;
                var tbl = document.getElementById('md_blocks');
                var tbl_dirty = 0;
                
                tmp = parseInt(document.getElementById('tbl_pxwidth').value);
                if(tmp > 10) {
                    if(parseInt(tbl.style.width) != tmp) {
                        tbl.style.width = tmp + 'px';
                    }
                }
                
                tmp = parseInt(document.getElementById('tbl_pxheight').value);
                if(tmp > 10) {
                    if(parseInt(tbl.style.height) != tmp) {
                        tbl.style.height = tmp + 'px';
                    }
                }
                
                tmp = parseInt(document.getElementById('tbl_pxtop').value);
                if(tmp >= 0) {
                    if(parseInt(tbl.style.top) != tmp) {
                        tbl.style.top = tmp + 'px';
                    }
                }
                
                tmp = parseInt(document.getElementById('tbl_cols').value);
                if(tmp > 0) {
                    if(parseInt(tbl_width) != tmp) {
                        tbl_dirty = 1;
                        tbl_width = tmp;
                    }
                }
                
                tmp = parseInt(document.getElementById('tbl_rows').value);
                if(tmp > 0) {
                    if(parseInt(tbl_height) != tmp) {
                        tbl_dirty = 1;
                        tbl_height = tmp;
                    }
                }
                
                tmp = parseInt(document.getElementById('timestep').value);
                if(tmp > 0) {
                    if(step != tmp) {
                        tbl_dirty = 1;
                        step = tmp;
                    }
                }
                
                tmp = parseInt(document.getElementById('delaystart').value);
                if(tmp > 0) delaystart = tmp;
                
                tmp = parseInt(document.getElementById('delay').value);
                if(tmp > 0) delay = tmp;
                
                if(tbl_dirty == 1) {
                    redrawtable();
                }
            }
            
            
            // The actual test
            function executetest() {
                if(test_go == 0) return;
                
                var i, val;
                var tds = document.getElementsByTagName('td');
                
                val = step;
                for(i=1;i<=tbl_width*tbl_height;i++) {
                    document.getElementById('td_'+i).className='lit';
                    setTimeout('executetest_step2('+ i +')', val);
                    val += step;
                }
                timer = setTimeout('executetest()', val+delay);
            }
            
            function executetest_step2(i) {
                if(test_go == 0) return;
                document.getElementById('td_'+i).className='unlit';
            }
            
            function starttest() {
                hidesettings();
                hidetable();
                test_go = 1;
                timer = setTimeout('executetest()', delaystart);
            }
            
            function stoptest() {
                test_go = 0;
                clearTimeout(timer);
                showsettings();
                showtable();
            }
            
            // -->
        </script>
    </head>
    <body onload="preparetest()" id="body">
        <div>
            <span class="buttonlight" onclick="starttest()">Execute</span> &nbsp; <span class="buttonlight" onclick="stoptest()">Stop</span> &nbsp; <span class="buttonlight" onclick="showsettings()">Show settings</span> &nbsp; <span class="buttonlight" onclick="hidesettings()">Hide settings</span>
        </div>
        <div id="settings">
            These settings will disappear when the test starts.
            <br /><span class="buttondark" onclick="showtable()">Show table</span> &nbsp; <span class="buttondark" onclick="hidetable()">Hide table</span>
            <br /><input type="text" id="tbl_pxwidth" onkeyup="changetest()" /> Table width (pixels)
            <br /><input type="text" id="tbl_pxheight" onkeyup="changetest()" /> Table height (pixels)
            <br /><input type="text" id="tbl_pxtop" onkeyup="changetest()" /> Table vertical offset (pixels)
            <br /><input type="text" id="tbl_cols" onkeyup="changetest()" /> Table columns
            <br /><input type="text" id="tbl_rows" onkeyup="changetest()" /> Table rows
            <br /><input type="text" id="timestep" onkeyup="changetest()" /> Time step (ms)
            <br /><input type="text" id="delaystart" onkeyup="changetest()" /> Delay before starting test (ms)
            <br /><input type="text" id="delay" onkeyup="changetest()" /> Delay before restarting test (ms)
        </div>
        <table id="md_blocks">
            <tr><td>This table should have been filled by some nice javascript. This test is known not to work in IE6, maybe also IE7 and IE8. If you can read this text, please consider using <a href="http://opera.com/">Opera</a> or <a href="/http://www.mozilla.com/firefox/">Firefox</a>.</td></tr>
        </table>
    </body>
</html>
Advertisement