DIR : /home/kozerus/public_html/wz/wz_window.htm
/home/kozerus/public_html/wz
<!DOCTYPE html>
<html><head>
<span id="line2"></span></span><span><<span class="start-tag">html</span>></span><span>
<span id="line3"></span></span><span><<span class="start-tag">head</span>></span><span>
<span id="line4"></span></span><span><<span class="start-tag">meta</span> <span class="attribute-name">http-equiv</span>="<a class="attribute-value">expires</a>" <span class="attribute-name">content</span>="<a class="attribute-value">0</a>"></span><span>
<span id="line5"></span></span><span><<span class="start-tag">meta</span> <span class="attribute-name">http-equiv</span>="<a class="attribute-value">content-type</a>" <span class="attribute-name">content</span>="<a class="attribute-value">text/html; charset=iso-8859-1</a>"></span><span>
<span id="line6"></span></span><span><<span class="start-tag">META</span> <span class="attribute-name">HTTP-EQUIV</span>="<a class="attribute-value">imagetoolbar</a>" <span class="attribute-name">CONTENT</span>="<a class="attribute-value">no</a>"></span><span>
<span id="line7"></span></span><span><<span class="start-tag">title</span>></span><span>Window Simulation with wz_dragdrop.js</span><span></<span class="end-tag">title</span>></span><span>
<span id="line8"></span></span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/css</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/newwalterzorn.css">../../newwalterzorn.css</a>"></span><span>
<span id="line9"></span></span><span></<span class="end-tag">head</span>></span><span>
<span id="line10"></span></span><span><<span class="start-tag">body</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line11"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/scripts/wz_dragdrop.js">../../scripts/wz_dragdrop.js</a>"></span><span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line12"></span> </span><span><<span class="start-tag">p</span> <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>
<span id="line13"></span> <span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line14"></span> </span><span><<span class="start-tag">big</span>></span><span></span><span><<span class="start-tag">b</span>></span><span>Window Simulation with wz_dragdrop.js</span><span></<span class="end-tag">b</span>></span><span></span><span></<span class="end-tag">big</span>></span><span>
<span id="line15"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line16"></span> (simplyfied example)
<span id="line17"></span> </span><span></<span class="end-tag">p</span>></span><span>
<span id="line18"></span> </span><span><<span class="start-tag">p</span> <span class="attribute-name">align</span>="<a class="attribute-value">center</a>"></span><span>
<span id="line19"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/demos/demos.htm">demos.htm</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_top</a>"></span><span>Back, Zur<span class="entity"><span>&</span>uuml;</span>ck</span><span></<span class="end-tag">a</span>></span><span>
<span id="line20"></span> </span><span></<span class="end-tag">p</span>></span><span>
<span id="line21"></span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">frame</a>" <span class="attribute-name">style</span>="<a class="attribute-value">position:absolute;left:130px;top:150px;width:300px;height:240px;border:2px outset #eeeeee;background:#cccccc;visibility:hidden;</a>"></span><span></span><span></<span class="end-tag">div</span>></span><span>
<span id="line22"></span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">titlebar</a>" <span class="attribute-name">style</span>="<a class="attribute-value">position:absolute;border:none;background:#4455aa;overflow:hidden;visibility:hidden;</a>"></span><span></span><span><<span class="start-tag">span</span> <span class="attribute-name">style</span>="<a class="attribute-value">position:relative;left:2px;top:2px;padding:0px;color:white;font-weight:bold;font-size:11px;font-family:Verdana,Geneva,sans-serif;</a>"></span><span><span class="entity"><span>&</span>nbsp;</span>Window Simulation</span><span></<span class="end-tag">span</span>></span><span></span><span></<span class="end-tag">div</span>></span><span>
<span id="line23"></span> </span><span><<span class="start-tag">div</span> <span class="attribute-name">id</span>="<a class="attribute-value">clientarea</a>" <span class="attribute-name">style</span>="<a class="attribute-value">position:absolute;border:2px inset #cccccc;background:white;overflow:auto;visibility:hidden;</a>"></span><span>
<span id="line24"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">10</a>"></span><span>
<span id="line25"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line26"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line27"></span> Instead<span class="entity"><span>&</span>nbsp;</span>of<span class="entity"><span>&</span>nbsp;</span>nested<span class="entity"><span>&</span>nbsp;</span>DIVs,<span class="entity"><span>&</span>nbsp;</span>this<span class="entity"><span>&</span>nbsp;</span>window<span class="entity"><span>&</span>nbsp;</span>simulation uses separate DIVs for outer frame (grey background with outset border), draggable titlebar and 'client area' (white area with inset border).
<span id="line28"></span> Resize handle and titlebar button are images.
<span id="line29"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">align</span>="<a class="attribute-value">left</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/ddcham.jpg">../../images/dragdrop/ddcham.jpg</a>" <span class="attribute-name">width</span>="<a class="attribute-value">155</a>" <span class="attribute-name">height</span>="<a class="attribute-value">95</a>" <span class="attribute-name">vspace</span>="<a class="attribute-value">5</a>" <span class="attribute-name">hspace</span>="<a class="attribute-value">5</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line30"></span> By applying the NO_DRAG command or a combination of VERTICAL+HORIZONTAL[1] accordingly, some of these items have been prevented from being draggable by their own.
<span id="line31"></span> Immediately after SET_DTHML() had been invoked, i.e. while the page was still loading, coherence of these items has been built by use of the API's addChild() method.
<span id="line32"></span> The 'User Interface', i.e. the window's responses to mouse events, is completely processed within my_PickFunc(), my_DragFunc() and my_DropFunc()
<span id="line33"></span> (automatically invoked function bodies for extendes scripting).
<span id="line34"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line35"></span> [1]
<span id="line36"></span> </span><span><<span class="start-tag">br</span>></span><span>
<span id="line37"></span> Different from NO_DRAG, VERTICAL+HORIZONTAL forces the library to consider the item still as Drag<span class="entity"><span>&</span>amp;</span>Drop element, triggering my_PickFunc(), my_DragFunc() or my_Drop Func() calls when hit by a mouse event.
<span id="line38"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line39"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line40"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line41"></span> </span><span></<span class="end-tag">div</span>></span><span>
<span id="line42"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">resizehandle</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/winresize.gif">../../images/dragdrop/winresize.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">20</a>" <span class="attribute-name">height</span>="<a class="attribute-value">20</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>" <span class="attribute-name">style</span>="<a class="attribute-value">visibility:hidden;</a>"></span><span>
<span id="line43"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">resizebutton</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/button_up_outset.gif">../../images/dragdrop/button_up_outset.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">16</a>" <span class="attribute-name">height</span>="<a class="attribute-value">14</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>" <span class="attribute-name">style</span>="<a class="attribute-value">visibility:hidden;</a>"></span><span>
<span id="line44"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line45"></span></span><span><!</span><span>--
<span id="line46"></span>
<span id="line47"></span>SET_DHTML("titlebar"+CURSOR_MOVE, "frame"+NO_DRAG, "clientarea"+NO_DRAG, "resizehandle"+MAXOFFLEFT+210+MAXOFFTOP+90+CURSOR_NW_RESIZE, "resizebutton"+VERTICAL+HORIZONTAL);
<span id="line48"></span>
<span id="line49"></span>// Some vars to customize window:
<span id="line50"></span>var frame_padding = 0;
<span id="line51"></span>var titlebar_h = 19;
<span id="line52"></span>var toolbar_h = 20;
<span id="line53"></span>var statusbar_h = 20;
<span id="line54"></span>var clientarea_margin = 4;
<span id="line55"></span>
<span id="line56"></span>// preload button images to ensure un-delayed image swapping
<span id="line57"></span>var button_down_outset = new Image();
<span id="line58"></span>var button_down_inset = new Image();
<span id="line59"></span>var button_up_outset = new Image();
<span id="line60"></span>var button_up_inset = new Image();
<span id="line61"></span>button_down_outset.src = '../../images/dragdrop/button_down_outset.gif';
<span id="line62"></span>button_down_inset.src = '../../images/dragdrop/button_down_inset.gif';
<span id="line63"></span>button_up_outset.src = '../../images/dragdrop/button_up_outset.gif';
<span id="line64"></span>button_up_inset.src = '../../images/dragdrop/button_up_inset.gif';
<span id="line65"></span>
<span id="line66"></span>// to save window height when window is minimized
<span id="line67"></span>var last_window_h;
<span id="line68"></span>
<span id="line69"></span>
<span id="line70"></span>// initWindow() moves elements to their adequate locations
<span id="line71"></span>// and builds coherences between these elements by converting outer frame, client area and images for resize functionalities
<span id="line72"></span>// to 'childern' of the draggable titlebar
<span id="line73"></span>function initWindow()
<span id="line74"></span>{
<span id="line75"></span> dd.elements.titlebar.moveTo(dd.elements.frame.x+2+frame_padding, dd.elements.frame.y+2+frame_padding);
<span id="line76"></span> dd.elements.titlebar.addChild("frame");
<span id="line77"></span> dd.elements.titlebar.setZ(dd.elements.frame.z+1); // ensure that titlebar is floating above frame
<span id="line78"></span> dd.elements.titlebar.resizeTo(dd.elements.frame.w-4-(frame_padding</span><span><<</span><span></span><span>1</span><span>), titlebar_h);
<span id="line79"></span>
<span id="line80"></span> dd.elements.clientarea.moveTo(dd.elements.frame.x+2+frame_padding+clientarea_margin, dd.elements.titlebar.y+titlebar_h+toolbar_h+clientarea_margin);
<span id="line81"></span> dd.elements.titlebar.addChild("clientarea");
<span id="line82"></span> dd.elements.clientarea.resizeTo(dd.elements.frame.w-4-(frame_padding</span><span><<</span><span></span><span>1</span><span>)-(clientarea_margin</span><span><<</span><span></span><span>1</span><span>), dd.elements.frame.h-titlebar_h-toolbar_h-statusbar_h-4-(frame_padding</span><span><<</span><span></span><span>1</span><span>)-clientarea_margin);
<span id="line83"></span>
<span id="line84"></span> dd.elements.resizehandle.moveTo(dd.elements.frame.x+dd.elements.frame.w-dd.elements.resizehandle.w-2, dd.elements.frame.y+dd.elements.frame.h-dd.elements.resizehandle.h-2);
<span id="line85"></span> dd.elements.resizebutton.moveTo(dd.elements.titlebar.x+dd.elements.titlebar.w-dd.elements.resizebutton.w-frame_padding-(titlebar_h>>1)+Math.round(dd.elements.resizebutton.w/2), dd.elements.titlebar.y+Math.round(titlebar_h/2)-Math.round(dd.elements.resizebutton.h/2));
<span id="line86"></span> dd.elements.titlebar.addChild("resizebutton");
<span id="line87"></span> dd.elements.titlebar.addChild("resizehandle");
<span id="line88"></span>
<span id="line89"></span> dd.elements.titlebar.show();
<span id="line90"></span>}
<span id="line91"></span>initWindow();
<span id="line92"></span>
<span id="line93"></span>
<span id="line94"></span>// my_PickFunc, my_DragFunc and my_DropFunc override their namesakes in wz_dragdrop.js
<span id="line95"></span>function my_PickFunc()
<span id="line96"></span>{
<span id="line97"></span> if (dd.obj.name == "resizebutton")
<span id="line98"></span> {
<span id="line99"></span> dd.obj.swapImage(dd.elements.clientarea.visible? button_up_inset.src : button_down_inset.src);
<span id="line100"></span> }
<span id="line101"></span>}
<span id="line102"></span>
<span id="line103"></span>
<span id="line104"></span>function my_DragFunc()
<span id="line105"></span>{
<span id="line106"></span> if (dd.obj.name == "resizehandle")
<span id="line107"></span> {
<span id="line108"></span> dd.elements.frame.resizeTo(dd.obj.x-dd.elements.frame.x+dd.obj.w+2, dd.obj.y-dd.elements.frame.y+dd.obj.h+2);
<span id="line109"></span> dd.elements.titlebar.resizeTo(dd.obj.x-dd.elements.titlebar.x+dd.obj.w-frame_padding, titlebar_h);
<span id="line110"></span> dd.elements.clientarea.resizeTo(dd.elements.frame.w-4-(frame_padding</span><span><<</span><span></span><span>1</span><span>)-(clientarea_margin</span><span><<</span><span></span><span>1</span><span>), dd.elements.frame.h-titlebar_h-toolbar_h-statusbar_h-4-(frame_padding</span><span><<</span><span></span><span>1</span><span>)-clientarea_margin);
<span id="line111"></span> dd.elements.resizebutton.moveTo(dd.elements.titlebar.x+dd.elements.titlebar.w-dd.elements.resizebutton.w-frame_padding-(titlebar_h>>1)+Math.round(dd.elements.resizebutton.w/2), dd.elements.resizebutton.y);
<span id="line112"></span> }
<span id="line113"></span>}
<span id="line114"></span>
<span id="line115"></span>
<span id="line116"></span>function my_DropFunc()
<span id="line117"></span>{
<span id="line118"></span> if (dd.obj.name == "resizebutton")
<span id="line119"></span> {
<span id="line120"></span> if (dd.elements.clientarea.visible)
<span id="line121"></span> {
<span id="line122"></span> dd.obj.swapImage(button_down_outset.src);
<span id="line123"></span> dd.elements.clientarea.hide();
<span id="line124"></span> dd.elements.resizehandle.hide();
<span id="line125"></span> last_window_h = dd.elements.frame.h;
<span id="line126"></span> dd.elements.frame.resizeTo(dd.elements.frame.w, titlebar_h+(frame_padding</span><span><<</span><span></span><span>1</span><span>)+4);
<span id="line127"></span> }
<span id="line128"></span> else
<span id="line129"></span> {
<span id="line130"></span> dd.obj.swapImage(button_up_outset.src);
<span id="line131"></span> dd.elements.clientarea.show();
<span id="line132"></span> dd.elements.resizehandle.show();
<span id="line133"></span> dd.elements.frame.resizeTo(dd.elements.frame.w, last_window_h);
<span id="line134"></span> }
<span id="line135"></span> }
<span id="line136"></span>}
<span id="line137"></span>
<span id="line138"></span>//-->
<span id="line139"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line140"></span></span><span></<span class="end-tag">body</span>></span><span>
<span id="line141"></span></span><span></<span class="end-tag">html</span>></span><span>
<span id="line142"></span>
<span id="line143"></span></span></pre></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