DIR : /home/kozerus/public_html/grid_best.html
/home/kozerus/public_html
<html>
<head>
<title>20200802_2100_grid.html</title>
<script id="script_kolists">
// alert( "BUGS_10" );
var kolists = [];
kolists['ids'] = `id0 id1 id2 id3`;
// alert( "BUGS_11 kolists_ids="+kolists['ids'] );
</script>
<script id="script_random_int">
function random_int(max,min) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
<script id="script_grid">
function grid1(args) {
alert( "BUGS_300 grid args="+args );
htmout="";
htmout="<h1>grid</h1>";
if( document.getElementById('div_grid')) {
document.getElementById('div_grid').innerHTML=htmout;
}
}
function grid(args) {
// alert("BUGS_200 grid args="+args );
tokens=args;
if( args == '' ) {
tokens = '';
tokens += '0000-';
for( j=1; j<19; j++ ) {
token = random_int(9999,0);
token_str = token.toString();
tokens += token.toString(); tokens += '-';
// tokens += token_str; tokens += '-';
}
tokens += '-0000';
}
var token = tokens.split(/-/);
token_len = token.length;
alert( "BUGS_49 token_len="+token_len );
for(j=0; j< token_len; j++ ) {
alert( "BUGS_50 j="+j+" token_len="+token_len+" token="+token[j] );
}
alert( "BUGS_52 flds_len="+token_len );
alert( "BUGS_53 token_len="+token_len+" token="+token );
// tokes = tokens.split();
grid1 = '';
grid1 += '<div id="div_grid1" >';
grid1 += ' <h1>div_grid1</h1>';
grid1 += ' <br>';
grid1 += ' <table id="table_grid1">';
// alert( "BUGS_51 grid1="+grid1+" tokes="+tokes );
j=0;
for(r=1; r<4; r++) {
grid1 += '<tr>';
for(c=1; c<4; c++) {
j=j+1;
grid1 += '<td>';
grid1 += j;
grid1 += '<img src="/imgs/btn/kob.png" ';
grid1 += ' onclick="grid(\''+tokens+'\'); return false;" ';
grid1 += ' height=50 border=0 >';
grid1 += '<br>'
alert( "BUGS_65 j="+j+" toke="+tokes(j) );
// grid1 += tokes(j).toString();
grid1 += ' </td>';
}
grid1 += ' </tr>';
}
grid1 += ' </table>';
grid1 += ' </div>';
alert( "BUGS_70 grid1="+grid1 );
if( document.getElementById('div_grid1')) {
document.getElementById('div_grid1').innerHTML=grid1;
}
return(args);
grid2 = '';
for(j=10; j<19; j++ ) {
}
return(args);
htmout = '';
htmout += '<div id="div_tokens">';
htmout += '<h1>div_tokens</h1>';
htmout += '<br>';
htmout += ' </div>';
if( document.getElementById('div_tokens')) {
document.getElementById('div_tokens').innerHTML=tokens;
}
htmout += '<div id="div_grid">';
htmout += '<h1>div_grid</h1>';
htmout += '<img src="/imgs/btn/kob.png" ';
htmout += ' onclick="grid(\'grid-1\');return false;" ';
htmout += ' height=50 border=0>';
htmout += '<img src="/imgs/btn/kob.png" ';
htmout += ' onclick="grid(\'grid-2\');return false;" ';
htmout += ' height=50 border=0>';
htmout += '<img src="/imgs/btn/kob.png" ';
htmout += ' onclick="grid(\'grid-3\');return false;" ';
htmout += ' height=50 border=0>';
htmout += '<br>';
htmout += '<img src="/imgs/btn/kob.png" ';
htmout += ' onclick="grid(\'grid-4\');return false;" ';
htmout += ' height=50 border=0>';
htmout += '<img src="/imgs/btn/kob.png" ';
htmout += ' onclick="grid(\'grid-5\');return false;" ';
htmout += ' height=50 border=0>';
htmout += '<img src="/imgs/btn/kob.png" ';
htmout += ' onclick="grid(\'grid-6\');return false;" ';
htmout += ' height=50 border=0>';
htmout += '<br>';
htmout += '<img src="/imgs/btn/kob.png" ';
htmout += ' onclick="grid(\'grid-7\');return false;" ';
htmout += ' height=50 border=0>';
htmout += '<img src="/imgs/btn/kob.png" ';
htmout += ' onclick="grid(\'grid-8\');return false;" ';
htmout += ' height=50 border=0>';
htmout += '<img src="/imgs/btn/kob.png" ';
htmout += ' onclick="grid(\'grid-9\');return false;" ';
htmout += ' height=50 border=0>';
htmout += '<br><br><br><br>';
htmout += '<hr color=goldenrod';
// htmout += '<table>';
//
// j=0;
// for(r=0; r<3; r++ ) {
// htmout += ' <tr>';
// for( c=0; c<3; c++ ) {
// rand=random_int(99999999,0);
//// alert( "BUGS_202 j="+j+" rand="+rand );
// kolists[j] = rand;
// htmout += ' <td>';
// htmout += '<img src="/imgs/btn/kob.png"';
// htmout += ' alt="/imgs/btn/kob.png"';
// htmout += ' onclick="grid(\''j+'|'+kolists[j]+'\');return false;" ';
// htmout += ' height=50 border=0>';
// htmout += ' '+kolists[j];
// htmout += ' </td>';
// }
// htmout += ' </tr>';
// }
// htmout += ' </table>';
// htmout += ' </div>';
//
// htmout="<h1>BUGS_HTML</h1>";
// alert("BUGS_201 grid htmout="+htmout );
if( document.getElementById('div_grid')) {
document.getElementById('div_grid').innerHTML=htmout;
}
return(args);
}
</script>
<script id="script_startup">
function startup(args) {
// alert("BUGS_100 startup args="+args );
grid(args);
return(args);
}
</script>
</head>
<body bgcolor=linen onload="startup('');return false;">
<h1>grid.html</h1>
<div id="div_tokens">
<h1>div_tokens</h1>
</div>
<br>
<hr color=goldenrod>
<div id="div_grid1"> <h1>div_grid1</h1> </div>
<br>
<div id="div_grid2"> <h1>div_grid2</h1> </div>
<br>
<hr color=goldenrod>
<br>
<div id="div_grid"> <h1>div_grid</h1> </div>
<br>
<hr color=goldenrod>
<br>
<img src=/imgs/btn/koeye.png alt="/imgs/btn/koeye.png"
onclick="startup('startup'); return false;"
height=100 border=0>
<img src=/imgs/btn/koeye.png alt="/imgs/btn/koeye.png"
onclick="grid('grid'); return false;"
height=100 border=0>
<br>
<hr color=goldenrod>
<br>
<h1>grid_rand</h1>
<table>
<tr>
<td id="td11" > <img src=/imgs/btn/kob.png onclick="grid('grid1_11');return false;" height=50 border=0 ></td>
<td id="td12" > <img src=/imgs/btn/kob.png onclick="grid('grid1_12');return false;" height=50 border=0 ></td>
<td id="td13" > <img src=/imgs/btn/kob.png onclick="grid('grid1_13');return false;" height=50 border=0 ></td>
</tr>
<tr>
<td id="td21" > <img src=/imgs/btn/kob.png onclick="grid('grid1_21');return false;" height=50 border=0 ></td>
<td id="td22" > <img src=/imgs/btn/kob.png onclick="grid('grid1_22');return false;" height=50 border=0 ></td>
<td id="td23" > <img src=/imgs/btn/kob.png onclick="grid('grid1_23');return false;" height=50 border=0 ></td>
</tr>
<tr>
<td id="td31" > <img src=/imgs/btn/kob.png onclick="grid('grid1_31');return false;" height=50 border=0 ></td>
<td id="td32" > <img src=/imgs/btn/kob.png onclick="grid('grid1_32');return false;" height=50 border=0 ></td>
<td id="td33" > <img src=/imgs/btn/kob.png onclick="grid('grid1_33');return false;" height=50 border=0 ></td>
</tr>
<tr>
<td id="td_1-1" >box1-1</td>
<td id="td_1-2" >box1-2</td>
<td id="td_1-3" >box1-3</td>
</tr>
<tr>
<td id="td_2-1" >box2-1</td>
<td id="td_2-2" >box2-2</td>
<td id="td_2-3" >box2-3</td>
</tr>
<tr>
<td id="td_3-1" >box3-1</td>
<td id="td_3-2" >box3-2</td>
<td id="td_3-3" >box3-3</td>
</tr>
</table>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer