From Ka-Map Wiki

at this moment you'll have to edit index.html and all .js files to have information on functions and how to develop new tools.

This article is related to Aqua interface

[edit] Add a panel to Ka-Map

[edit] Preparation

Create yourself a static page that has the data that you want. This can be a simple snippet of html, or something more complicated like a php page accessing a database.

Example: (in test.php)

  <?php echo 'hello world'; ?>

Determine where in the Ka-Map interface you would like the panel to appear, and modify the index.html and screen.css files appropriately.

Example: (in index.html, just before the end of the viewport div)

  <div id="NewPanel"><div id="NewPanelBackground" class="transparentBackground"></div></div>

Example: (added to screen.css)

  #newPanel {
     position: absolute;
     bottom: 3px;
     left: 3px;
     height: 30px;
     width: 60px;
     overflow: hidden; /* ensures that it stays 'inside' it's div */
     z-index: 2; /* this puts it above the map */
  }
  #NewPanelBackground {
     width: 100%; /* expands cool transparent background to fill the panel */
     height: 100%;
     background-color: #AAF; /* Overrides default transparent background color */
  }

Now you will have a blank panel on your Ka-Map! that has a nice bluish background and is 30px by 60px down in the lower left corner.

[edit] Javascript Object

Now, you must create a new javascript object to fill the new panel with the content in test.php

This is an example of something simple I adapted from the kaKeyMap class.

The function call() is defined in the xhr.js file that must be included before this one

Example: (in Panel.js)

  Panel.prototype.getRawObject = function(obj) {
     var theObj;
     
     if (typeof obj == "string") {
        if (this.isW3C) {
           theObj = document.getElementById(obj);
        } else if (this.isIE4) {
           theObj = document.all(obj);
        } else if (this.isNN4) {
           theObj = seekLayer(document, obj);
        }
     } else {
        // pass through object reference
        theObj = obj;
     }
     return theObj;
  };
  function Panel(szID ) {
     this.isCSS = false;
     this.isW3C = false;
     this.isIE4 = false;
     this.isNN4 = false;
     this.isIE6CSS = false;
  
     if (document.images) {
        this.isCSS = (document.body && document.body.style) ? true : false;
        this.isW3C = (this.isCSS && document.getElementById) ? true : false;
        this.isIE4 = (this.isCSS && document.all) ? true : false;
        this.isNN4 = (document.layers) ? true : false;
        this.isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;
     }
     this.domObj = this.getRawObject(szID);
     this.width=getObjectWidth(this.domObj);
     this.height=getObjectHeight(this.domObj);
     this.initialize();
  };
  
  Panel.prototype.initialize = function(id) {
     call('test.php',this,this.draw);
  };
  
  Panel.prototype.draw = function( szResult ) {
  
     //clear old div
     for(var i = this.domObj.childNodes.length - 1; i >= 0; i--) {
        this.domObj.removeChild (this.domObj.childNodes[i]);
     }
  
     var text = document.createElement( 'div' );
     text.id="NewPanelText";
     text.innerHTML = szResult;
     overlay.appendChild(text);  
  };

Include this JS file in the index.html (I put it just before startup)

Example:

  <script type="text/javascript" src="Panel.js"></script>

Then, you have to add this to the startUp.js to initialize the object.

Example (in startUp.js, the myOnLoad function. I put it above the scalebar.)

  myPanel = new Panel('NewPanel');

As long as you have good content in your test.php, you should see a panel on your KaMap with a light blue transparent background containing your content.

To update your content, you could write an update method

Example: (in Panel.js)

  Panel.prototype.update = function( argument ) {
     call('test.php?variable=' + argument, this, this.draw);
  }