DIR : /home/kozerus/public_html/konet/winwz_20260822_1930.html
/home/kozerus/public_html/konet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="expires" content="0">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<title>winwz.html 20260822_1900</title>
<link rel="stylesheet" type="text/css" href="js/wz/wz.css">
<style id=style_body>
body { font-family: 'Montserrat', sans-serif; }
</style id=style_body>
<script language="JavaScript">
function clock() {
if (!document.getElementById) return;
theclock=document.getElementById("div_clock");
now = new Date();
hours=now.getHours();
mins=now.getMinutes();
secs=now.getSeconds();
alert( "BUGS_100 clock now="+now+" hours="+hours+" mins="+mins+" secs="+secs );
if (secs < 10) secs= "0" + secs;
if (mins < 10) mins= "0" + mins;
theclock.innerHTML = hours + ":" + mins + ":" + secs;
window.setTimeout("clock();",250);
}
</script id=script_clock>
<script id=script_cfg_show>
function cfg_show(args) {
htmout="";
const items = [
"div_btns",
"div_status",
"layer_leds", "div_leds", "img_leds_btn_toggle",
"layer_ledsover", "div_ledsover", "img_ledsover_btn_toggle",
"layer_ctx", "div_ctx", "img_ctx_btn_toggle",
"layer_links", "div_links", "img_links_btn_toggle"
];
htmout += "<hr color=goldenrod>\n";
htmout += "<table>\n";
htmout += "<tr>\n";
htmout += " <td width=10> </td>\n";
htmout += " <td width=100 >item</td>";
htmout += " <td width=85 style=\"text-align: right\">x</td>";
htmout += " <td width=85 style=\"text-align: right\">y</td>";
htmout += " <td width=85 style=\"text-align: right\">h</td>";
htmout += " <td width=85 style=\"text-align: right\">w</td>";
htmout += " <td width=85 style=\"text-align: right\">x</td>";
htmout += " <td width=85 style=\"text-align: right\">index</td>";
htmout += " <td width=10> </td>\n";
htmout += " </tr>\n";
for( item of items ) {
// alert( "BUGS_110 cfg_show item="+item );
htmout += "<tr>\n";
htmout += " <td width=10> </td>\n";
htmout += " <td><b>"+item+"</b></td>";
htmout += " <td width=85 style=\"text-align: right\">"+dd.elements[item].x+"</td> ";
htmout += " <td width=85 style=\"text-align: right\">"+dd.elements[item].y+"</td> ";
htmout += " <td width=85 style=\"text-align: right\">"+dd.elements[item].h+"</td> ";
htmout += " <td width=85 style=\"text-align: right\">"+dd.elements[item].w+"</td> ";
htmout += " <td width=85 style=\"text-align: right\">"+dd.elements[item].z+"</td> ";
htmout += " <td width=85 style=\"text-align: right\">"+dd.elements[item].index+"</td>\n ";
htmout += " <td width=10> </td>\n";
htmout += " </tr>\n";
}
htmout += " </table>\n";
htmout += "<hr color=goldenrod>\n";
var iW = dd.getWndW();
var iH = dd.getWndH();
// htmout += "iW="+iW+" iH="+iH;
var mx=0; var my=0;
// var mx = dd.obj.body.div.clientX;
// var my = dd.obj.body.div.clientY;
htmout += "iW="+iW+" iH="+iH+" mx="+mx+" my="+my;
htmout += "<br>\n";
if( document.getElementById("div_ledsover") ) {
document.getElementById('div_ledsover').innerHTML=htmout;
}
else {
alert( "BUGS_102 NOTFOUND div_ledsover htmout="+htmout );
}
return(htmout);
}
</script id=script_cfg_show_end>
<script id=script_cfg_reset>
function cfg_reset() {
dd.elements["div_btns"].moveTo(10,10);
dd.elements["div_btns"].resizeTo(152,50);
dd.elements["div_status"].moveTo(520,10);
dd.elements["div_status"].resizeTo(500,50);
dd.elements["layer_leds"].moveTo(10,80);
dd.elements["layer_leds"].resizeTo(500,500);
// dd.elements["div_leds_title"].moveTo(dd.elements["layer_leds"].x,dd.elements["layer_leds"].y);
// dd.elements["div_leds_title"].resizeTo(dd.elements["layer_leds"].w,dd.elements["layer_leds"].h);
// dd.elements["div_leds"].moveTo(dd.elements["layer_leds"].x,dd.elements["layer_leds"].y);
dd.elements["div_leds"].resizeTo(500,500);
dd.elements["layer_ledsover"].moveTo(520,80);
// dd.elements["layer_ledsover"].resizeTo(500,500);
// dd.elements["div_ledsover_title"].moveTo(520,80);
// dd.elements["div_ledsover_title"].resizeTo(dd.elements["layer_ledsover"].w,dd.elements["layer_ledsover"].h);
// dd.elements["div_ledsover"].moveTo(520,80);
dd.elements["div_ledsover"].resizeTo(500,500);
dd.elements["layer_ctx"].moveTo(10,590);
// dd.elements["layer_ctx"].resizeTo(500,200);
// dd.elements["div_ctx_title"].moveTo(dd.elements["layer_ctx"].x,dd.elements["layer_ctx"].y);
// dd.elements["div_ctx_title"].resizeTo(dd.elements["layer_ctx"].w,dd.elements["layer_ctx"].h);
// dd.elements["div_ctx"].moveTo(10,590);
dd.elements["div_ctx"].resizeTo(500,200);
dd.elements["layer_links"].moveTo(16,845);
// dd.elements["layer_links"].resizeTo(845,55);
// dd.elements["div_links_title"].moveTo(dd.elements["layer_links"].x,dd.elements["layer_links"].y);
// dd.elements["div_links_title"].resizeTo(dd.elements["layer_links"].w,dd.elements["layer_links"].h);
// dd.elements["div_links"].moveTo(dd.elements["layer_links"].x,dd.elements["layer_links"].y);
dd.elements["div_links"].resizeTo(500,200);
dd.elements["img_links_btn_toggle"].moveTo(
dd.elements["div_links_title"].x,
dd.elements["div_links_title"].y
);
dd.elements["img_links_btn_toggle"].resizeTo(20,20);
}
</script id=script_cfg_reset_end>
<script id=script_cfg_set>
function cfg_set() {
;
}
</script id=script_cfg_default_end>
<script id=script_startup>
function startup(args) {
// alert( "BUGS_100 startup args="+args );
clock();
return(args);
}
</script id=script_startup_end>
</head>
<body bgcolor=linen onload="startup('onload'); return false;" >
<script type="text/javascript" src="js/wz/wz_dragdrop.js"></script>
<div id="layer_test" name=layer_test style="
position:absolute;
left:520px;top:600px;
width:300px;height:20px;
border:2px outset #eeeeee;
background:linen;
">
<div id="div_test_title" name=div_test_title style="
position:relative;
left:0px;top:0px;
width:300px;height:20px;
border:2px outset #eeeeee;
background:wheat;
">
<img src=imgs/btn/koeyew.png height=15 id=img_test_btn_toggle name=img_test_btn_toggle>
        div_test_title
</div id=div_test_title_end>
<div id="div_test" name=div_test style="
position:relative;
left:0px;top:20px;
width:300px;height:300px;
border:2px outset #eeeeee;
background:linen;
">
<hr color=goldenrod>
<img src=imgs/btn/ko.png height=10 id=img_test name=img_test>
<hr color=goldenrod>
<img src=imgs/btn/ko.png height=10 id=img_test1 name=img_test1>
<hr color=goldenrod>
<img src=imgs/btn/ko.png height=10 id=img_test2 name=img_test2>
<hr color=goldenrod>
<img src=imgs/btn/ko.png height=10 id=img_test3 name=img_test3>
<hr color=goldenrod>
</div id=div_test_end>
</div id="layer_test_end">
<!-- visability:hidden; -->
<div id="div_btns" name=div_btns style="
position:absolute;
left:10px;top:10px;
width:140px;height:50px;
border:2px outset #eeeeee;
background:linen;
">
<a href=ko.php>
<img src=imgs/btn/giphy_box_spinners.gif height=40>
</a>
<a href=ko.php?login>
<img src=imgs/btn/giphy_box_spinners.gif height=40>
</a>
<a href=ko.php?tools>
<img src=imgs/btn/giphy_box_spinners.gif height=40>
</a>
</div id=div_status_end>
<div id="div_clock" name=div_status style="
position:absolute;
left:320px;top:10px;
width:100px;height:50px;
border:2px outset #eeeeee;
font-size: 24px;
background:linen;
">
00:00:00
</div id=div_status_end>
<div id="div_status" name=div_status style="
position:absolute;
left:520px;top:10px;
width:500px;height:50px;
border:2px outset #eeeeee;
background:linen;
">
status: .........................................
</div id=div_status_end>
<div id="layer_leds" style="
position:absolute;
left:10px;top:80px;
width:500px;height:20px;
border:2px outset #eeeeee;
background:wheat;
">
<div id="div_leds_title" name=div_leds_title style="
position:relative;
left:0px;top:0px;
width:500px;height:20px;
border:2px;
background:wheat;
">
<img src=imgs/btn/koeyew.png height=15 id=img_leds_btn_toggle name=img_leds_btn_toggle>
        div_leds_title
</div id=div_leds_title_end>
<div id="div_leds" style="
position:relative;
left:0px;top:0px;
width:500px;height:400px;
border:4px;
background:linen;
overflow:auto;
">
<center>
<table id=table_leds cellpadding="10">
<tr>
<td>
<div id=div_led name=div_led style="width:60 height:60" >
<img id=img_led name=img_led src=imgs/leds/crome_green1.gif height=50 border=0>
</a>
</td>
</tr>
</table id=table_leds_end>
</center>
</div id=div_leds_end>
</div id=layer_leds_end>
<div id="layer_ledsover" style="
position:absolute;
left:520px;top:80px;
width:500px;height:20px;
border:2px outset #eeeeee;
background:wheat;
">
<div id="div_ledsover_title" name=div_ledsover_title style="
position:relative;
left:0px;top:0px;
width:500px;height:20px;
border:2px outset #eeeeee;
background:wheat;
">
<img src=imgs/btn/koeyew.png height=15 id=img_ledsover_btn_toggle name=img_ledsover_btn_toggle>
        div_ledsover_title
</div id=div_test_title_end>
<div id="div_ledsover" style="
position:relative;
border:2px inset #cccccc;
background:linen;
overflow:auto;
">
<center>
<table id=table_ledsover cellpadding="10">
<tr>
<td>
<a href=ko.php?detail/cm12>
<h1>cab: cm12</h1>
<img id=img_cab name=img_cab src=imgs/cab/cm12.png height=200 border=0>
</a>
<hr color=goldenrod>
cab=cm12 floor=floor bldg=bldg dttm=dttm phn=123-456-7890
<hr color=goldenrod>
<a href=imgs/cab/cm12.png ><img src=imgs/cab/tn/tn_cm12.png height=50 border=0></a>
</td>
</tr>
</table id=table_ledsover_end>
</center>
</div id=div_ledsover_end>
</div id=layer_ledsover_end>
<div id="layer_ctx" style="
position:absolute;
left:10px;top:590px;
width:500px;height:20px;
border:2px outset #eeeeee;
background:wheat;
">
<div id="div_ctx_title" name=div_ctx_title style="
position:relative;
left:0px;top:0px;
width:300px;height:20px;
border:2px outset #eeeeee;
background:wheat;
">
<img src=imgs/btn/koeyew.png height=15 id=img_ctx_btn_toggle name=img_ctx_btn_toggle>
        div_ctx_title
</div id=div_test_title_end>
<div id="div_ctx" style="
position:relative;
border:2px;
background:linen;
overflow:auto;
">
<center>
<table id=table_ctx cellpadding="10">
<tr>
<td>
<a href=ko.php?ctx=ai >
<img id=leds_ai name=leds_ai src=imgs/btn/leds_ai.png height=80 border=0>
</a>
   
<a href=ko.php?ctx=cab >
<img id=leds_cab name=leds_cab src=imgs/btn/leds_cab.png height=100 border=0>
</a>
   
<a href=ko.php?ctx=doc >
<img id=leds_doc name=leds_doc src=imgs/btn/leds_doc.png height=80 border=0>
</a>
   
<a href=ko.php?ctx=us >
<img id=leds_us name=leds_us src=imgs/btn/leds_us.png height=80 border=0>
</a>
<hr color=goldenrod>
</td>
</tr>
</table id=table_ctx_end>
</center>
</div id=div_ctx_end>
</div id=layer_ctx_end>
<div id="layer_links" style="
position:absolute;
left:10px;top:800px;
width:500px;height:20px;
border:2px outset #eeeeee;
background:wheat;
">
<div id="div_links_title" name=div_links_title style="
position:relative;
left:0px;top:0px;
width:500px;height:20px;
border:2px outset #eeeeee;
background:wheat;
">
<img src=imgs/btn/koeyew.png height=15 id=img_links_btn_toggle name=img_links_btn_toggle>
        div_links_title
</div id=div_links_title_end>
<div id="div_links" style="
position:relative;
border:2px inset #cccccc;
background:linen;
overflow:auto;
">
<center>
<table id=table_links cellpadding="10">
<tr>
<td>
<img src=imgs/btn/koeye.png onclick="cfg_show();return false;" title=" cfg_show" height=20 border=0>
   
<img src=imgs/btn/koeyeb.png onclick="cfg_reset();return false;" title=" cfg_reset" height=20 border=0>
   
<img src=imgs/btn/koeyew.png onclick="cfg_save(); return false;" title=" cfg_save" height=20 border=0>
   
</td>
</tr>
</table id=table_links_end>
</center>
</div id=div_links_end>
</div id=layer_links_end>
<script type="text/javascript">
<!--
SET_DHTML(
<!--
"div_xxx_title"+CURSOR_MOVE,
"layer_xxx"+NO_DRAG,
"div_xxx"+NO_DRAG,
"img_xxx_btn_resize"+MAXOFFLEFT+210+MAXOFFTOP+90+CURSOR_NW_RESIZE,
"img_xxx_btn_toggle"+VERTICAL+HORIZONTAL,
-->
"div_clock"+RESIZABLE,
"layer_test",
"img_test_btn_toggle"+RESIZABLE,
"div_test"+RESIZABLE,
"div_btns"+RESIZABLE,
"div_status"+RESIZABLE,
"layer_leds",
"img_leds_btn_toggle"+RESIZABLE,
"div_leds"+RESIZABLE,
"layer_ledsover",
"img_ledsover_btn_toggle"+RESIZABLE,
"div_ledsover"+RESIZABLE,
"layer_ctx",
"img_ctx_btn_toggle"+RESIZABLE,
"div_ctx"+RESIZABLE,
"layer_links",
"img_links_btn_toggle"+RESIZABLE,
"div_links"+RESIZABLE
);
// Some vars to customize window:
<!--
var layer_xxx_padding = 0;
var div_xxx_title_h = 19;
var div_xxx_margin = 4;
var xxx_toolbar_h = 20;
var xxx_statusbar_h = 20;
var xxx_last_window_h;
-->
// preload button images to ensure un-delayed image swapping
<!--
var img_xxx_btn_toggle_down_outset = new Image();
var img_xxx_btn_toggle_down_inset = new Image();
var img_xxx_btn_toggle_up_outset = new Image();
var img_xxx_btn_toggle_up_inset = new Image();
img_xxx_btn_toggle_down_outset.src = 'imgs/btn/koeyeb.png';
img_xxx_btn_toggle_down_inset.src = 'imgs/btn/koeyeb.png';
img_xxx_btn_toggle_up_outset.src = 'imgs/btn/koeyew.png';
img_xxx_btn_toggle_up_inset.src = 'imgs/btn/koeyew.png';
-->
// initWindow() moves elements to their adequate locations
// and builds coherences between these elements by converting outer layer_xxx, client area and images for resize functionalities to 'childern' of the draggable div_xxx_title
function initWindow_xxx() {
<!--
dd.elements.div_xxx_title.moveTo(
dd.elements.layer_xxx.x+2+layer_xxx_padding,
dd.elements.layer_xxx.y+2+layer_xxx_padding
);
dd.elements.div_xxx_title.addChild("layer_xxx");
dd.elements.div_xxx_title.setZ(dd.elements.layer_xxx.z+1);
dd.elements.div_xxx_title.resizeTo(
dd.elements.layer_xxx.w-4-(layer_xxx_padding<<1),
div_xxx_title_h
);
dd.elements.div_xxx.moveTo(
dd.elements.layer_xxx.x+2+layer_xxx_padding+div_xxx_margin,
dd.elements.div_xxx_title.y+div_xxx_title_h+xxx_toolbar_h+div_xxx_margin
);
dd.elements.div_xxx_title.addChild("div_xxx");
dd.elements.div_xxx.resizeTo(
dd.elements.layer_xxx.w-4-(layer_xxx_padding<<1)-(div_xxx_margin<<1),
dd.elements.layer_xxx.h-div_xxx_title_h-xxx_toolbar_h-xxx_statusbar_h-4-(layer_xxx_padding<<1)-div_xxx_margin
);
dd.elements.img_xxx_btn_resize.moveTo(
dd.elements.layer_xxx.x+dd.elements.layer_xxx.w-dd.elements.img_xxx_btn_resize.w-2,
dd.elements.layer_xxx.y+dd.elements.layer_xxx.h-dd.elements.img_xxx_btn_resize.h-2
);
dd.elements.img_xxx_btn_toggle.moveTo(
dd.elements.div_xxx_title.x+dd.elements.div_xxx_title.w
-dd.elements.img_xxx_btn_toggle.w
-layer_xxx_padding-(div_xxx_title_h>>1)
+Math.round(dd.elements.img_xxx_btn_toggle.w/2),
dd.elements.div_xxx_title.y
+Math.round(div_xxx_title_h/2)
-Math.round(dd.elements.img_xxx_btn_toggle.h/2)
);
dd.elements.div_xxx_title.addChild("img_xxx_btn_toggle");
dd.elements.div_xxx_title.addChild("img_xxx_btn_resize");
dd.elements.div_xxx_title.show();
-->
}
function initWindow_leds() {
}
function initWindow_ledsover() {
}
function initWindow_ctx() {
}
function initWindow_links() {
}
<!-- initWindow_xxx(); -->
initWindow_leds();
initWindow_ledsover();
initWindow_ctx();
initWindow_links();
// my_PickFunc, my_DragFunc and my_DropFunc override their namesakes in wz_dragdrop.js
function my_PickFunc() {
<!--
if (dd.obj.name == "img_xxx_btn_toggle") {
dd.obj.swapImage(dd.elements.div_xxx.visible? img_xxx_btn_toggle_up_inset.src : img_xxx_btn_toggle_down_inset.src);
}
-->
}
function my_DragFunc() {
<!--
if (dd.obj.name == "img_xxx_btn_resize") {
dd.elements.layer_xxx.resizeTo(
dd.obj.x-dd.elements.layer_xxx.x+dd.obj.w+2,
dd.obj.y-dd.elements.layer_xxx.y+dd.obj.h+2
);
dd.elements.div_xxx_title.resizeTo(
dd.obj.x-dd.elements.div_xxx_title.x+dd.obj.w-layer_xxx_padding,
div_xxx_title_h
);
dd.elements.div_xxx.resizeTo(
dd.elements.layer_xxx.w-4
-(layer_xxx_padding<<1)-(div_xxx_margin<<1),
dd.elements.layer_xxx.h-div_xxx_title_h
-xxx_toolbar_h
-xxx_statusbar_h-4
-(layer_xxx_padding<<1)
-div_xxx_margin
);
dd.elements.img_xxx_btn_toggle.moveTo(
dd.elements.div_xxx_title.x
+dd.elements.div_xxx_title.w
-dd.elements.img_xxx_btn_toggle.w
-layer_xxx_padding
-(div_xxx_title_h>>1)
+Math.round(dd.elements.img_xxx_btn_toggle.w/2),
dd.elements.img_xxx_btn_toggle.y
);
}
-->
}
function my_DropFunc() {
if( dd.obj.name == "img_test_btn_toggle" ) {
if( dd.elements.div_test.visible) {
dd.obj.swapImage("imgs/btn/koeyeb.png");
dd.elements.div_test.hide();
}
else {
dd.obj.swapImage("imgs/btn/koeyew.png");
dd.elements.div_test.show();
}
}
if( dd.obj.name == "img_leds_btn_toggle" ) {
if( dd.elements.div_leds.visible) {
dd.obj.swapImage("imgs/btn/koeyeb.png");
dd.elements.div_leds.hide();
}
else {
dd.obj.swapImage("imgs/btn/koeyew.png");
dd.elements.div_leds.show();
}
}
if( dd.obj.name == "img_ledsover_btn_toggle" ) {
if( dd.elements.div_ledsover.visible) {
dd.obj.swapImage("imgs/btn/koeyeb.png");
dd.elements.div_ledsover.hide();
}
else {
dd.obj.swapImage("imgs/btn/koeyew.png");
dd.elements.div_ledsover.show();
}
}
if( dd.obj.name == "img_ctx_btn_toggle" ) {
if( dd.elements.div_ctx.visible) {
dd.obj.swapImage("imgs/btn/koeyeb.png");
dd.elements.div_ctx.hide();
}
else {
dd.obj.swapImage("imgs/btn/koeyew.png");
dd.elements.div_ctx.show();
}
}
if( dd.obj.name == "img_links_btn_toggle" ) {
if( dd.elements.div_links.visible) {
dd.obj.swapImage("imgs/btn/koeyeb.png");
dd.elements.div_links.hide();
}
else {
dd.obj.swapImage("imgs/btn/koeyew.png");
dd.elements.div_links.show();
}
}
}
//-->
</script>
</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