By Date: <-- -->
By Thread: <-- -->

Hide/show keymap + floating

Thanks a lot Jason! I think you put me on the right way. I have now a working floating KeyMap which can be moved freely around. But I have still a small bug: I cannot move the red rectangle showing the actual extents of the map. But at the next refresh it is regenerated on the correct place. It would be great if that layer would move together with all the others.

For those you might be interrested about how I did this, here are some simplified extracts of my code:

I added the following hidden form elements to pass the state of the keymap in the session:

<input type="hidden" name="KeyMapVis" value="[$KeyMapVis$]">
<input type="hidden" name="KeyMapPosX" value="[$KeyMapPosX$]">
<input type="hidden" name="KeyMapPosY" value="[$KeyMapPosY$]">
In the template file I created a layer which will contain the Key Map. All the layers of the KeyMap will follow this layer.
<div id="boxHandle" class="box">
<div class="handle"><table><tr><td>[...Here I put the 2 KeyMap controls (zoom and pan)...]</td></tr></TABLE></TD><td id="handle" class="Caption">KEY MAP</td><td ALIGN="RIGHT"><a href="javascript:keymap_vis();"><IMG SRC="images/close.png" ALT="Close KeyMap" BORDER=0 WIDTH="9" HEIGHT="9"></a></td></tr></table></div>
<table>
<tr>
<!-- KEYMAP -->
<td colspan="3" align="left">
<cwc2 type="KeyMapDHTML" image="images/world_key.png" />
</td>
</tr>
</TABLE>
</div>

In the nav toolbar I added a button to toggle the visualisation of the Key Map:

<cwc2 type="Link" linktype="javascript" jsfunction="keymap_vis" styleresource="NavButtons" Image="buttons/button_preview_12.png" ImageTip="Toggle the Key Map" default="false">
<image state="normal" image="buttons/button_preview_12.png"/>
<image state="hover" image="buttons/button_preview_22.png"/>
<image state="selected" image="buttons/button_preview_32.png"/>
</cwc2>

Basing my project on one of the Chameleon samples, I added the following lines in the javascript file connected to the sample. (sample.js?) to pass the actual position of the keymap is in the session as KeyMapPosX and KeyMapPosY.
In function LayerSetSizeInit():

  var oLayer = CWCDHTML_GetLayer( 'boxHandle' );
   if ((document.forms[0].KeyMapPosX.value) != "KeyMapPosX")
    oLayer.left = document.forms[0].KeyMapPosX.value;
   else oLayer.left = 745;
   document.forms[0].KeyMapPosX.value = oLayer.left;

   if (document.forms[0].KeyMapPosY.value != "KeyMapPosY")
    oLayer.top = document.forms[0].KeyMapPosY.value;
else oLayer.top = 0;
   document.forms[0].KeyMapPosY.value = oLayer.top;
   moveKeyMap2( oLayer.left, oLayer.top );
and added the following lines before the LayerSetSizeInit(); call:
function moveKeyMap(coordinate) {
moveKeyMap2(coordinate.x, coordinate.y);
}

function moveKeyMap2(x, y) {
document.forms[0].KeyMapPosX.value = x;
document.forms[0].KeyMapPosY.value = y;
x = parseInt(x)+3;
y = parseInt(y)+18;
 CWCDHTML_SetLayerPos("KeyMapLayerDiv", x, y);
 CWCDHTML_SetLayerPos("KeyMapLayerBG", x, y);
 CWCDHTML_SetLayerPos("zKeyMapBoxTop", x, y);
 CWCDHTML_SetLayerPos("zKeyMapBoxLeft", x, y);
 CWCDHTML_SetLayerPos("zKeyMapBoxBottom", x, y);
 CWCDHTML_SetLayerPos("zKeyMapBoxRight", x, y);

// Having the following lines enabled caused often errors, without fixing the sticking red rectangle bug.
/*CWCDHTML_SetLayerPos("zKeyMapBox2Top", x, y);
CWCDHTML_SetLayerPos("zKeyMapBox2Left", x, y);
CWCDHTML_SetLayerPos("zKeyMapBox2Bottom", x, y);
CWCDHTML_SetLayerPos("zKeyMapBox2Right", x, y);*/

if (document.layers) //Netscape 4.x
{
gKeyMapWhspc = document.images['keymapFrameTL'].x;
gKeyMapWvspc = document.images['keymapFrameTL'].y;
}
else
{
gKeyMapWhspc = CWCDHTML_FindObjectPosX( document.getElementById('keymapFrameTL'));
gKeyMapWvspc = CWCDHTML_FindObjectPosY( document. getElementById('keymapFrameTL'));
}

gKeyMapWhspc+=1;
       gKeyMapWvspc+=1;
               KeyMapWsetZoomBoxSettings();
}

function keymap_vis ()
{
keyvis = document.forms[0].KeyMapVis.value;

if (keyvis == "1")
{
 document.forms[0].KeyMapVis.value = 2;
 CWCDHTML_SetLayerVis("boxHandle", true);
 CWCDHTML_SetLayerVis("KeyMapLayerDiv", true);
 CWCDHTML_SetLayerVis("KeyMapLayerBG", true);
 CWCDHTML_SetLayerVis("zKeyMap2BoxLeft", true);
 CWCDHTML_SetLayerVis("zKeyMap2BoxBottom", true);
 CWCDHTML_SetLayerVis("zKeyMap2BoxRight", true);
 CWCDHTML_SetLayerVis("zKeyMap2BoxTop", true);
}

if (keyvis == "KeyMapVis" || keyvis == "2")
{
 document.forms[0].KeyMapVis.value = 1;
 CWCDHTML_SetLayerVis("boxHandle", false);
 CWCDHTML_SetLayerVis("KeyMapLayerDiv", false);
 CWCDHTML_SetLayerVis("KeyMapLayerBG", false);
 CWCDHTML_SetLayerVis("zKeyMap2BoxLeft", false);
 CWCDHTML_SetLayerVis("zKeyMap2BoxBottom", false);
 CWCDHTML_SetLayerVis("zKeyMap2BoxRight", false);
 CWCDHTML_SetLayerVis("zKeyMap2BoxTop", false);
}
}

function keymap_reset ()
{
var keyvis = document.forms[0].KeyMapVis.value;

if (keyvis == "KeyMapVis" || keyvis == "2")
{
 CWCDHTML_SetLayerVis("boxHandle", true);
 CWCDHTML_SetLayerVis("KeyMapLayerDiv", true);
 CWCDHTML_SetLayerVis("KeyMapLayerBG", true);
 CWCDHTML_SetLayerVis("zKeyMap2BoxLeft", true);
 CWCDHTML_SetLayerVis("zKeyMap2BoxBottom", true);
 CWCDHTML_SetLayerVis("zKeyMap2BoxRight", true);
 CWCDHTML_SetLayerVis("zKeyMap2BoxTop", true);
}

if (keyvis == "1")
{
 CWCDHTML_SetLayerVis("boxHandle", false);
 CWCDHTML_SetLayerVis("KeyMapLayerDiv", false);
 CWCDHTML_SetLayerVis("KeyMapLayerBG", false);
 CWCDHTML_SetLayerVis("zKeyMap2BoxLeft", false);
 CWCDHTML_SetLayerVis("zKeyMap2BoxBottom", false);
 CWCDHTML_SetLayerVis("zKeyMap2BoxRight", false);
 CWCDHTML_SetLayerVis("zKeyMap2BoxTop", false);
}
}

This script was added to the main template file to position the key map relatively to the movable layer "boxHandle":

<script type="text/javascript"><!--
function load() {
var group
var coordinates = ToolMan.coordinates()
var drag = ToolMan.drag()

var origin = coordinates.create(0, 0)

var boxHandle = document.getElementById("boxHandle")
group = drag.createSimpleGroup(boxHandle, document.getElementById("handle"))
group.addTransform(function(coordinate, dragEvent) {
var scrollOffset = coordinates.scrollOffset()
if (coordinate.y < scrollOffset.y) {
coordinate = coordinates.create(coordinate.x, scrollOffset.y)
moveKeyMap(coordinate)
return coordinate
}

 var clientHeight = coordinates.clientSize().y
 var boxHeight = coordinates._size(boxHandle).y
 if ((coordinate.y + boxHeight) > (scrollOffset.y + clientHeight)) {
  coordinate = coordinates.create(coordinate.x,
    (scrollOffset.y + clientHeight) - boxHeight)
  moveKeyMap(coordinate)
  return coordinate
 }

 moveKeyMap(coordinate)
 return coordinate
})
}
//-->
</script>

It is called on the onLoad function of the page.
Does somebody have an idea how to make red rectangle move as well?

Cheers,

Carlo 

_______________________________________________
Chameleon mailing list
Chameleon (at) lists.maptools.org
http://lists.maptools.org/mailman/listinfo/chameleon