DIR : /home/kozerus/public_html/konet/winwz.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 id="script_cfg_wz">
var cfgwz = {
hdr: { x:'x', y:'y', w:'w', h:'h', z:'z', idx:'idx' },
div_btns: { x:'10', y:'10', w:'285', h:'30', z:'58', idx:'13' },
div_clock: { x:'300', y:'10', w:'215', h:'30', z:'57', idx:'17' },
div_status: { x:'520', y:'10', w:'500', h:'30', z:'65', idx:'12' },
layer_leds: { x:'10', y:'45', w:'500', h:'20', z:'60', idx:'11' },
div_leds: { x:'10', y:'65', w:'500', h:'550', z:'88', idx:'11' },
layer_ledsover: { x:'520', y:'45', w:'500', h:'20', z:'84', idx:'8' },
div_ledsover: { x:'520', y:'65', w:'500', h:'550', z:'87', idx:'8' },
layer_ctx: { x:'10', y:'615', w:'500', h:'20', z:'107', idx:'5' },
div_ctx: { x:'10', y:'640', w:'500', h:'80', z:'107', idx:'5' },
layer_links: { x:'10', y:'720', w:'500', h:'20', z:'53', idx:'2' },
div_links: { x:'10', y:'740', w:'500', h:'50', z:'53', idx:'2' },
layer_test: { x:'10', y:'800', w:'500', h:'20', z:'0', idx:'16' },
div_test: { x:'10', y:'820', w:'500', h:'300', z:'0', idx:'16' }
};
const ids = [
"div_clock",
"div_btns",
"div_status",
"layer_leds", "div_leds",
"layer_ledsover", "div_ledsover",
"layer_ctx", "div_ctx",
"layer_links", "div_links",
"layer_test", "div_test"
];
// var htmout = "";
// for( id of ids ) {
// htmout += id;
// htmout += " x="+cfgwz[id].x+" y="+cfgwz[id].y;
// htmout += " w="+cfgwz[id].w+" h="+cfgwz[id].h + "\n";
// }
</script id=script_cfg_wz_end>
<script id=script_clock>
function clock() {
if (!document.getElementById) return;
theclock=document.getElementById("div_clock");
const timestamp = new Intl.DateTimeFormat('en-CA', {
timeZone: 'America/Chicago',
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hourCycle: 'h23'
})
.formatToParts(new Date())
.reduce((result, part) => {
result[part.type] = part.value;
return result;
}, {});
const dttm =
`${timestamp.year}${timestamp.month}${timestamp.day}_` +
`${timestamp.hour}${timestamp.minute}${timestamp.second}`;
// theclock.innerHTML = hours + ":" + mins + ":" + secs;
theclock.innerHTML = dttm;
window.setTimeout("clock();",250);
}
</script id=script_clock_end>
<script id=script_cfg_show>
function cfg_show(args) {
htmout="";
const items = [
"div_btns",
"div_clock",
"div_status",
"layer_leds", "div_leds",
"layer_ledsover", "div_ledsover",
"layer_ctx", "div_ctx",
"layer_links", "div_links",
"layer_test", "div_test"
];
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\">w</td>";
htmout += " <td width=85 style=\"text-align: right\">h</td>";
htmout += " <td width=85 style=\"text-align: right\">z</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].w+"</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].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";
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=<b>"+iW+"</b> iH=<b>"+iH+"</b> 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() {
const ids = [
"div_clock", "div_btns", "div_status",
"layer_leds", "div_leds",
"layer_ledsover", "div_ledsover",
"layer_ctx", "div_ctx",
"layer_links", "div_links",
"layer_test", "div_test"
];
htmout = "";
htmout += "<table id=table_cfg_reset>\n";
htmout += "<tr><td width=80px>id</td><td width=400px>moveTo/resizeTo</td></tr>\n";
for( id of ids ) {
dd.elements[id].moveTo(cfgwz[id].x,cfgwz[id].y);
dd.elements[id].resizeTo(cfgwz[id].w,cfgwz[id].h);
htmout += "<tr>";
htmout += "<td width=80px><b>"+id+"</b></td>";
htmout += "<td width=400px>";
htmout += "moveTo(<b> "+cfgwz[id].x+" , "+cfgwz[id].y+" </b>); ";
htmout += "resizeTo(<b> "+cfgwz[id].w+" , "+cfgwz[id].h+" </b>);"
htmout += "</td>";
htmout += "</tr>\n";
}
htmout += " </table id=table_cfg_reset_end>\n";
if( document.getElementById('div_ledsover')) {
document.getElementById('div_ledsover').innerHTML=htmout;
}
}
</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="div_btns" name=div_btns style="
position:absolute;
left:10px;top:10px;
width:285px;height:30px;
border:2px outset black;
background:linen;
">
<a href=ko.php>
<img src=imgs/btn/giphy_box_spinners.gif height=25>
</a>
<a href=ko.php?login>
<img src=imgs/btn/giphy_box_spinners.gif height=25>
</a>
<a href=ko.php?tools>
<img src=imgs/btn/giphy_box_spinners.gif height=25>
</a>
</div id=div_status_end>
<div id="div_clock" name=div_status style="
position:absolute;
left:300px;top:10px;
width:215px;height:30px;
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:30px;
border:2px outset #eeeeee;
background:linen;
">
status: .........................................
</div id=div_status_end>
<div id="layer_leds" style="
position:absolute;
left:10px;top:40px;
width:500px;height:20px;
border:2px outset black;
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:550px;
border:2px outset black;
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:40px;
width:500px;height:20px;
border:2px outset black;
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 black;
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;
width:500px;height:550px;
border:2px inset black;
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:615px;
width:500px;height:20px;
border:2px inset black;
background:wheat;
">
<div id="div_ctx_title" name=div_ctx_title style="
position:relative;
left:0px;top:0px;
width:500px;height:20px;
border:2px inset black;
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;
width:500px;height:80px;
border:2px inset black;
background:linen;
overflow:auto;
">
<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=40 border=0>
</a>
   
<a href=ko.php?ctx=cab >
<img id=leds_cab name=leds_cab src=imgs/btn/leds_cab.png height=50 border=0>
</a>
   
<a href=ko.php?ctx=doc >
<img id=leds_doc name=leds_doc src=imgs/btn/leds_doc.png height=40 border=0>
</a>
   
<a href=ko.php?ctx=us >
<img id=leds_us name=leds_us src=imgs/btn/leds_us.png height=40 border=0>
</a>
</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:720px;
width:500px;height:20px;
border:2px outset black;
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 black;
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;
width:500px;height:50px;
border:2px outset black;
background:linen;
overflow:auto;
">
<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>
<!-- visability:hidden; -->
<div id="layer_test" name=layer_test style="
position:absolute;
left:10px;top:800px;
width:500px;height:20px;
border:2px outset black;
background:linen;
">
<div id="div_test_title" name=div_test_title style="
position:relative;
left:0px;top:0px;
width:500px;height:20px;
border:2px outset black;
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:0px;
width:500px;height:300px;
border:2px outset black;
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">
<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