Cuttlefish applet - dev-cuttlefish/cuttlefish GitHub Wiki

The Cuttlefish applet is a convenient way to interactively visualize a network on a web page. The features available in the applet version of Cuttlefish are similar to the ones available in the stand-alone desktop version of Cuttlefish. To use the cuttlefish applet, you need to specify the network in json format. This is best explained with an example. Consider the following code specifying the applet:

   <applet code='ch.ethz.sg.cuttlefish.gui2.applet.Cuttlefish.class'
      codebase='dist/'
      archive='cuttlefish.jar'
      width='1000' height='800'>
      <param name='data' value='{
         nodes: [
            {id: 0, label: Node0, color: "{0,0,1}", size: 7, width: 0}, 
            {id: 1, label: Node1, color: "{0,1,0}", size: 9, width: 2}, 
            {id: 2, label: Node2, color: "{1,0,0}", size: 11, width: 3}, 
            {id: 3, label: Node3, color: "{1,1,0}", size: 13, width: 1}
         ], 
         edges: [
            {id_origin: 0, id_dest: 1, weight: 0, width: 2, color: "{0.2,0.5,0.1}"},
            {id_origin: 1, id_dest: 2, weight: 1, width: 2, color: "{0.3,0.4,0.4}"},
            {id_origin: 2, id_dest: 3, weight: 2, width: 2, color: "{0.4,0.3,0.7}"},
            {id_origin: 3, id_dest: 0, weight: 3, width: 2, color: "{0.5,0.2,0.9}"}
         ]
      }'/>
      <param name='source_node' value='0'/>
      <param name='distance' value='4'/>
      Your browser is completely ignoring the <applet> tag!
   </applet>

If you store the above code in a file and open it in a browse you should see something similar to the screenshot below:

The first parameters specify how the browser should start the cuttlefish applet:

• code='ch.ethz.sg.cuttlefish.gui2.applet.Cuttlefish.class' - this parameter specifyies that the browser should start the ch.ethz.sg.cuttlefish.gui2.applet.Cuttlefish.class class
• codebase='dist/' - this is the path to the jar file containing the java code
• archive='cuttlefish.jar' - this is the name of the jar container
• width='1000' height='800' - these two parameters specify the applet size

Then, the data, source_node, and distance parameters are specified, all three are given as input to the java applet.

data - this parameter defines the network to be visualized in the applet. It is a string, given in Json format (for more information on Json, see the Json documentation). The network is given as an object consisting of two arrays - nodes and edges. A Json object with two empty arrays called nodes and edges is specified as follows:

   {nodes: [], edges: []}

The nodes array is a json array holding node objects. A node object can have the following attributes: id, label, color, borderColor, size, shape, width, x, y, var1, var2, hide, and fixed. The type of these attributes are the following:

• id - integer
• label - string
• color - string
• borderColor - string
• size - double
• shape - string
• width - int
• x - float
• y - float
• var1 - string
• var2 - string
• hide - boolean
• fixed - boolean

A node object does not need to explicitly specify all attributes, if an attributes is not specified, a default values is always assumed. For example, to specify a node with id 1, label 'test_node', and size 20, we can use the following:

   {id: 1, label: test_node, size: 20}

The color attributes has the format {r,g,b}, where r, g, and b are numbers between 0 and 1. For example, the red color is specified as {1,0,0}. Other colors can be specified as some combination of red, green, and blue.

The edge json object has the following attributes: id_origin, id_dest, label, weight, width, color, var1, var2, hide, which have the following types:

• id_origin - int
• id_dest - int
• label - string
• weight - double
• width - double
• color - string
• var1 - string
• var2 - string
• hide - boolean

Only the id_origin and the id_dest attributes are mandatory.

The cuttlefish applet allows the exploration of the loaded network via the 'Explore network' and the 'Explore node' buttons. In most cases, it is desirable that some initial network is visualized on the screen. This is achieved by specifying a source node and a distance, which leads to exploring the neighbourhood of the source node up to a the distance specified.

To deploy the Cuttlefish applet you need to upload the cuttlefish.jar file to the server. The jar container must be signed in order for browsers to allow running any code from it. To sign the jar file, you can use the jarsigner command:

   jarsigner -keystore keystore.jks cuttlefish.jar CuttlefishCert

CuttlefishCert is the name of the certificate, which is known to the keystore specified. For more details on signing of java applets, refer to the latest java documentation on signing java applets.

Back to User documentation