Organizational chart style ICE

Dec 15, 2009 at 7:47 AM

Hi.

I'm currently looking at ICE as on option to make a organizational chart for my company (kind of like the image displayed on the frontapge of the ICE project), where the root node is at the top of the screen and the child nodes are placed below the root/parent node by default?

Is it possible to set that kind of physics up by changing settings, or do I need to alter code in the ICE source to make such a structure?

Connecting people with people based on their hierarchical position

Coordinator
Dec 17, 2009 at 4:25 PM

Glad you've ask, we've meant to document this "hidden feature" for a while. There's the possibility to add the concept of gravity in your settings XML file. Here's the setting file we've used for the org chart you ,antioned (see also this video for a better view of the org chart)

 

<?xml version="1.0" encoding="UTF-8" ?>

<!-- This is a setting file for ICE 1.00 -->
<iceSettings xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="InformationConnectionsEngine.settings">

  <!-- (Optional) Activate some special modes for ICE -->
  <modes>
    <!-- Enable to select more than one node at a time. Possible values?-->
    <multiNodeSelection/>
    
    <!-- Enable all debug message-->
    <debug/>

    <!-- Add a navigation bar -->
    <navigationBar/>

    <!-- Add a navigation menu -->
    <navigationMenu/>
  </modes>

  <!-- (Optional) Constants have a default value, so you don't have to redefine them all. -->
  <constants>
    
    <!-- Warning : may cause unexpected behavior, be careful! -->
    <physicsConstants>

      <!--  (Optional) Gravity goes between -10 and 10 (integer). Use negative number to see nodes "flying" instead of dropping. Use 0 for no gravity. -->
      <gravity>1</gravity>

    </physicsConstants>
    <drawingConstants>

      <!-- (Optional) Initial zoom value (this is a decimal coefficient and could be expressed in percent E.G.; 4.6749 or 467.49%) -->
      <initialZoomRatio>10.0000</initialZoomRatio>

      <!-- (Optional) Initial depth of visibility (non-negative integer). To know which node should be visible and which shouldn't, we start from the selected nodes and we explore the graph. The depth is the number of level we will explore from the starting nodes. For Example: 0 mean you will see only the selected nodes and 1 mean you will see all selected node and their direct neighbors. -->
      <initialGraphVisibilityDepth>1</initialGraphVisibilityDepth>

      <!-- (Recommended) This Constant is used to increase or decrease the size of all nodes. If you want to change the ratio Node/Link on your map, this constant is the one you must use -->
      <nodeSize>0.08</nodeSize>

      <!-- (Optional) Maximum thickness of every link -->
      <linkMaximalThickness>1.0</linkMaximalThickness>

      <!-- (Optional) Minimum thickness of every link -->
      <linkMinimalThickness>0.2</linkMinimalThickness>

    </drawingConstants>
  </constants>

  <!-- (Highly recommended) List of all node styles you may use in your graph. 
      "default" value specifies which style is used if the style reference in a node doesn't exist-->
  <nodeStyles default="defaultStyle">

    <!-- This is the definition of a node style. "id" value is used to find which style must be use on a specific node-->
    <nodeStyle id="defaultStyle">

      <!--(Highly recommended) This is the full name off the UserControl (also called template) you want to use to represent a node. Your UserControl is one of the silverlight libraries you have passed as an argument to ICE XAP file (initParams)-->
      <className>WhoIsOnDeckICElibrary.BusinessCardTheme</className>

      <!--(Highly recommended) You can override some default values of the theme, for this particular style. For example, the template could be a black circle, but you can define here a style that would force the color to blue, and then another style using the same the template with the color red -->
      <drawingInformation>
        <color xmlns="">
          <red>8E</red>
          <green>8E</green>
          <blue>8E</blue>
          <alpha>FF</alpha>
        </color>
        <font xmlns="">Verdana</font>
      </drawingInformation>

    </nodeStyle>

    <!-- This is the definition of a node style. "id" value is used to find which style must be use on a specific node-->
    <nodeStyle id="Department">
      <!--(Highly recommended) This is the full name off the UserControl (also called template) you want to use to represent a node. Your UserControl is one of the silverlight libraries you have passed as an argument to ICE XAP file (initParams)-->
      <className>WhoIsOnDeckICElibrary.BusinessCardTheme</className>
      <!--(Highly recommended) You can override some default values of the theme, for this particular style. For example, the template could be a black circle, but you can define here a style that would force the color to blue, and then another style using the same the template with the color red -->
      <drawingInformation>
        <color xmlns="">
          <red>D3</red>
          <green>7c</green>
          <blue>7C</blue>
          <alpha>FF</alpha>
        </color>
        <font xmlns="">Verdana</font>
      </drawingInformation>
    </nodeStyle>

    <!-- This is the definition of a node style. "id" value is used to find which style must be use on a specific node-->
    <nodeStyle id="Subdepartment">
      <!--(Highly recommended) This is the full name off the UserControl (also called template) you want to use to represent a node. Your UserControl is one of the silverlight libraries you have passed as an argument to ICE XAP file (initParams)-->
      <className>WhoIsOnDeckICElibrary.BusinessCardTheme</className>
      <!--(Highly recommended) You can override some default values of the theme, for this particular style. For example, the template could be a black circle, but you can define here a style that would force the color to blue, and then another style using the same the template with the color red -->
      <drawingInformation>
        <color xmlns="">
          <red>86</red>
          <green>C9</green>
          <blue>EF</blue>
          <alpha>FF</alpha>
        </color>
        <font xmlns="">Verdana</font>
      </drawingInformation>
    </nodeStyle>

    <!-- This is the definition of a node style. "id" value is used to find which style must be use on a specific node-->
    <nodeStyle id="Division">
      <!--(Highly recommended) This is the full name off the UserControl (also called template) you want to use to represent a node. Your UserControl is one of the silverlight libraries you have passed as an argument to ICE XAP file (initParams)-->
      <className>WhoIsOnDeckICElibrary.BusinessCardTheme</className>
      <!--(Highly recommended) You can override some default values of the theme, for this particular style. For example, the template could be a black circle, but you can define here a style that would force the color to blue, and then another style using the same the template with the color red -->
      <drawingInformation>
        <color xmlns="">
          <red>B3</red>
          <green>D9</green>
          <blue>64</blue>
          <alpha>FF</alpha>
        </color>
        <font xmlns="">Verdana</font>
      </drawingInformation>
    </nodeStyle>

    <!-- This is the definition of a node style. "id" value is used to find which style must be use on a specific node-->
    <nodeStyle id="Team">
      <!--(Highly recommended) This is the full name off the UserControl (also called template) you want to use to represent a node. Your UserControl is one of the silverlight libraries you have passed as an argument to ICE XAP file (initParams)-->
      <className>WhoIsOnDeckICElibrary.BusinessCardTheme</className>
      <!--(Highly recommended) You can override some default values of the theme, for this particular style. For example, the template could be a black circle, but you can define here a style that would force the color to blue, and then another style using the same the template with the color red -->
      <drawingInformation>
        <color xmlns="">
          <red>F6</red>
          <green>92</green>
          <blue>1E</blue>
          <alpha>FF</alpha>
        </color>
        <font xmlns="">Verdana</font>
      </drawingInformation>
    </nodeStyle>

    <!-- This is the definition of a node style. "id" value is used to find which style must be use on a specific node-->
    <nodeStyle id="Group">
      <!--(Highly recommended) This is the full name off the UserControl (also called template) you want to use to represent a node. Your UserControl is one of the silverlight libraries you have passed as an argument to ICE XAP file (initParams)-->
      <className>WhoIsOnDeckICElibrary.BusinessCardTheme</className>
      <!--(Highly recommended) You can override some default values of the theme, for this particular style. For example, the template could be a black circle, but you can define here a style that would force the color to blue, and then another style using the same the template with the color red -->
      <drawingInformation>
        <color xmlns="">
          <red>AF</red>
          <green>0</green>
          <blue>AF</blue>
          <alpha>FF</alpha>
        </color>
        <font xmlns="">Verdana</font>
      </drawingInformation>
    </nodeStyle>

  </nodeStyles>

  <!-- (Highly recommended) List of all link styles you may use in your graph. 
      "default" value specify which style will be use if the style reference in a link doesn't exist-->
  <linkStyles default="defaultLinkStyle">

    <!-- This is the definition of a link style-->
    <linkStyle id="defaultLinkStyle">

      <!--(Highly recommended) This is the full name off the UserControl (also called template) you want to use to represent a link. Your UserControl will be search into all silverlight library give in argument to ICE-->
      <className>myNameSpace.myLinkView</className>

      <!--(Highly recommended) You can override some default values of the theme, for this particular style. For example, the template for the link  could be a black link, but you can define here a style that would force the color to blue, and then another style using the same the template with the color red -->
      <drawingInformation>
        <color xmlns="">
          <red>8C</red>
          <green>8C</green>
          <blue>8C</blue>
          <alpha>FF</alpha>
        </color>
      </drawingInformation>

    </linkStyle>

  </linkStyles>

  <!--(Highly recommended) List of all actions-->
  <actions>

    <!--(Highly recommended) This is the definition of an action.
    "id" is used to witch action must be called. A target of an action could be a link, a node, a group of nodes or links. Target of an action is the entity that called the action. To do so, the entity have in it's XML description that we call an "ActionCall". It's a reference to the current action this customized parameter. (see node or link Xml definition) -->
    <action id="drawInfo">

      <!-- The description of your action -->
      <description>Display information about who is in charge</description>
      
      <!-- This is the Icon that describe the action-->
      <iconURL>http://.../WhoIsOnDeck/DataProvider/icon/Info.png</iconURL>

      <!-- here we put all tasks we want to execute when the action is called-->
      <tasks>
        <!-- This is a "JavaScript Task". When executing this task the program will call the JavaScript function with the name in argument. E.G.; "myJavascriptFunctionName(myActionCall)". In other words, tha web page hosting the ICE application is expected to implement this javascript function. -->
        <javascriptTask name="drawInformation_onClick"/>
      </tasks>
    </action>

  </actions>

</iceSettings>

 

Jan 4, 2010 at 11:55 AM

Great :)

Thanks for the hint, I'll try that out,

/Peter Lindberg

Feb 3, 2011 at 11:05 AM

Hi,

 

I am looking for something similar to the application shown in below link.

http://www.screencast.com/users/HerveT/folders/Demos/media/312f56f0-2cc0-457a-a918-75f11bc2a76f

I need to create the start node, then link child node based on relation, then each child may have multiple children so list grows....

something very similar to video show in above link.

I tried defining nodes then links, because of threading relations(links) are not getting correct when it is displayed on to screen.

please do help!

 

If i can get the sample code for the application shown in the video would be of help.

Thank

BG