KiNG in a Browser

This page explains simple ways to display kinemage graphics in a browser window using KiNG. The minimum essentials you'll need are:

  1. an html file like this one to instruct the browser,
  2. the king.jar which is java code for the viewer,
  3. a kinemage file, which is a text file describing object to be drawn, and
  4. a java-enabled browser. The browser can be either local or on the world wide web.

This method is platform independent and if using a modern browser, will work on Windows/Vista, Linux, and Macintosh. All of the files which generate this page - a starter kit for using KiNG in a browser - are available for download as a zipped archive at the url: <http://kinemage.biochem.duke.edu/software/kingInBrowser.zip>

Three examples follow on this page. These three cover the two major modes of display:

  1. graphics window embedded in the page's content
  2. graphics window is presented in a separate window after being launched from the page content. The launch button can be either:
    1. a simple default button which shows the name "KiNG", or
    2. an image file

KiNG Embedded in a Browser

Shown below is a ribbon schematic of the phage lambda repressor (PDB entry: 1lmb) with details showing N- or C-caps on helices. The graphics window is active:

The code snippet to generate the interactive display at left is:
<applet code="king/Kinglet.class" archive="king.jar" width="500" height="500">
<param name="mode" value="flat">
<param name="kinSource" value="hlxCaps.kin">
</applet>

We use the </applet> tag to load the java code for KiNG. HTML purists will note that we use the deprecated applet tag instead of the object tag. Both work; the use of object tags is presented in this companion page. We use applet here because other documentation on this subject; e.g. the King Manual, uses applet. And, at this point in time (2008), some older browsers still in use don't handle object as well as applet when calling a java applet.

The embedded mode is invoked via use of the "flat" value for the mode parameter. You'll see below that "launch" is the other option.

The name of the kinemage file to be displayed is passed in the kinSource parameter. All files in this example are located in the same folder/subdirectory as the HTML file. This is not required, but does simplify.


KiNG Launched in a Browser

The second mode of using KiNG to display kinemages on the world wide web is to launch a display into a window separate from the current browser. The advantages of this mode are that one typically can use a larger display pane and the original web page contains smaller images related to KiNG. The disadvantage of using the launch mode in our experience is that the additional windows are a nuisance to the user, and it's not obvious how best to close them.

KiNG is launched when the user clicks a button - an image - which is anchored to similar applet tags as shown above with the embedded (flat) mode. The button can be either a default image, a 60 pixel wide by 21 pixel high graphic containing the word "KiNG" in gold letters on a black background; or, the button can use an image supplied by you. An example of each follows. Also, for those concerned with the HTML page composition aspects, we use a table to lay out the next two examples.

Launched via default button

Click the "KiNG" image at left, to display an interactive graphic display of conformational changes modeled for the GroEL/GroES chaperonin complexes. Read more in the Text Window that is also displayed. "Animate" the movement by clicking the Animate arrows at the bottom of the right-hand pane, or by pressing the 'a' key on your keyboard when program focus is on the graphics window. Close the KiNG window using the close button for the graphics pane. The applet tag for this example is:
<applet code="king/Kinglet.class" archive="king.jar" width="60" height="21">
<param name="mode" value="launcher">
<param name="kinSource" value="GroEL-ES_move.kin">
</applet>

Launched via supplied image button

As above, click the image at left to launch KiNG and display models of hemoglobin allostery, with explanations in the text window. The applet tag for this example is:
<applet code="king/Kinglet.class" archive="king.jar" width="200" height="200">
<param name="mode" value="launcher">
<param name="kinSource" value="HbAllo_simple.kin">
<param name="launcherImage" value="HbAlloheme.png">
</applet>