I'm working with NetDiagram Trial Version in ClientSideMode="ImageMap" using ImageGen.aspx.

What we want to do is style the nodes.  We either want to load the Shapenodes from bitmaps (.png) and then write text on them or somehow insert icons into rectangular nodes and then write node text on them.

We're simply looking to make the nodes look more graphically pleasing for our application instead of straight shape nodes.

We are using ImageMap mode so that users do not have to download/use a java app, silverlight or anything else.

Is there some way I can design some .png graphics or something like that and use those?

Thanks!

-- Bob

That helped tremendously but when I load the 64x64 pixel image that I create into the node, it displays much larger than 64x64 pixels. We tried using another method to resize the image (the commented out line of code in the code below) but when you click on the node, the png image background turns black is no longer transparent like it's supposed to be.

Also, how do I place the node text precisely where I want it in the node?

Here's the code:

[code]
//n.Image = new Bitmap(System.Drawing.Image.FromFile(MapPath(@"CallFlowImages/CallFlow_Node_WIP01.png")), new Size(64, 64));
ShapeNode n = DiagramView1.Diagram.Factory.CreateShapeNode(0, 0, 81, 51);
n.Image = new Bitmap(MapPath(@"CallFlowImages/CallFlow_Node_WIP01.png"));
n.ImageAlign = MindFusion.Drawing.ImageAlign.TopLeft;
n.Transparent = true;

n.PolygonalTextLayout = true;
n.EnableStyledText = true;

n.Text = "<b><i> Call Answered </i><b>";
//TODO: store our internal CALL FLOW NODE ID in the ID field of the node
n.Id = "Call_Answered";
[/code]

1. The node size should be irrelevant when the ImageAlign is set to Center (as it is in my code) or TopLeft (as it is in yours). The node size should matter only when the ImageAlign is set to Stretch or Fill. What's more, the size of the node is expressed in the current units of measure (which by default is Millimeters). Thus if you set 230x143 as the size of the node, it is interpreted as mm instead of pixels. As you can see in one of your images, the node is actually larger than the image displayed within. It looks like the node on the first image has its ImageAlign set to Stretch.

To make the size of the node match exactly the physical dimensions of the image, use the code below. The current unit of measure is taken into consideration.

PointF a = fc.ClientToDoc(new Point(0, 0));
PointF b = fc.ClientToDoc(new Point(node.Image.Width, node.Image.Height));
node.Bounds = new RectangleF(node.Bounds.X, node.Bounds.Y, b.X - a.X, b.Y - a.Y); 

Note, that when the node and image sizes are the same, the image alignment will be irrelevant.

2. To position the text of the node more precisely, you can use a custom shape with defined text area. Text areas are specified in coordinates relative to the bounding rectangle of the node. Here is a text area which occupies the rectangle (Left: 10%, Top: 10%, Right: 50%, Bottom: 30%):

node.Shape = new Shape(
      null,
      null,
      new ElementTemplate[]
      {
            new LineTemplate(10, 10, 50, 10),
            new LineTemplate(50, 10, 50, 30),
            new LineTemplate(50, 30, 10, 30),
            new LineTemplate(10, 30, 10, 10),
      },
      System.Drawing.Drawing2D.FillMode.Winding, "myShape"); 

3. The background transparency getting lost between postbacks is related to the PNG encoder installed on the computer. A possible workaround would be to reassign the images after postback. You can also check this topic: http://mindfusion.eu/Forum/YaBB.pl?board=fcnet_disc;action=display;num=116366417....

Regards,
Meppy

This is the DiagramView object.

Regards,
Meppy

If you are asking about the coordinates of the text area in your custom shape, they will correspond exactly to those numbers since text area coordinates are expressed as percents:

...
new ElementTemplate[]
{
      new LineTemplate(10, 20, 90, 20),
      new LineTemplate(90, 20, 90, 80),
      new LineTemplate(90, 80, 10, 80),
      new LineTemplate(10, 80, 10, 20),
},
... 

The above code will define a text area inside the node with top and bottom margins equal to 20% of node's height and left and right margins equal to 10% of node's width.

Regards,
Meppy

Ok.. next question.

I have a batch of nodes that are created by the user as they make selections on some drop-downs and select Apply.  These nodes are Keypress Options for a phone keypad. So, they can select actions for keypress number 0-9 and a default time-out action.

The below graphic shows nodes created using the modal popup. 

https://s3.amazonaws.com/SwiftreachTesting/CallFlow_NodeNames.png

We wish to show the option numbers on the treeview but we want the text centered over the arrows pointing to the nodes.

I still haven't figured out how to make that happen.

Thanks for the help in advance!

The words Option 0, Option 2, Option 5 and Time-Out need to be centered over the corresponding DOWN arrows. They are in the correct position vertically but not horizonatally.

That's what we're looking for.

I'll keep fiddling with it but maybe you know a way to make that happen.

Thanks!

Here is where I want the text to be:

https://s3.amazonaws.com/SwiftreachTesting/CallFlow_NodeNames_Edit.png

The text in question is highlighted in yellow in the diagramview.  I've moved the text in the graphic to show where I want it.

Below that in the overview, the red dots show where the text should be centered.

Thanks!