- Welcome, Guest. Please Login or Register
MindFusion  
  We have released initial version of MindFusion.Scheduling library for HTML5 & JavaScript.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Page Index Toggle Pages: 1 Send Topic Print  
Adding custom images like .png, .jpeg in nodelist
Read 1501 times

ashar11   Offline
Junior Member
**
Posts: 54
Gender: male
I Love MindFusion!


   
     
 
Adding custom images like .png, .jpeg in nodelist
Jun 29th, 2017 at 10:18am
 
Hello,
        I am working on winform and using a flowcharter from the samples in c#, i want to ask that can i use the custom images like .png(car, plane, tree etc)instead of predefined shapes from shape library.

new Node(
new AnchorPattern(new AnchorPoint[]
{
new AnchorPoint(30, 0, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(50, 0, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(100, 0, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(100, 50, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(100, 100, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(50, 100, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(0, 100, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(0, 50, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(0, 30, true, true, MarkStyle.Circle, defAnch)
}),
Shape.FromId("PunchedCard"),"Card")
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1591
Gender: male
tech.support


   
     
 
Re: Adding custom images like .png, .jpeg in nodelist
Reply #1 - Jun 29th, 2017 at 10:31am
 
Hi,

You could set the nodes' Image property to a bitmap image, and enable their Transparent property to hide the geometry.

Regards,
Slavcho
Mindfusion
 
 
 
IP Logged    
 
     

ashar11   Offline
Junior Member
**
Posts: 54
Gender: male
I Love MindFusion!


   
     
 
Re: Adding custom images like .png, .jpeg in nodelist
Reply #2 - Jun 29th, 2017 at 11:07am
 
https://imagebin.ca/v/3Rd0b0wwjiKr

This is what it appears ,i want to replace these two shapes from my own png images.
 
 
 
IP Logged    
 
     

ashar11   Offline
Junior Member
**
Posts: 54
Gender: male
I Love MindFusion!


   
     
 
Re: Adding custom images like .png, .jpeg in nodelist
Reply #3 - Jun 29th, 2017 at 11:28am
 
Slavcho thanks for the quick response, but actually i am not that expert in c# and winform can u please explain it a little more with the code if possible
thanks
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1591
Gender: male
tech.support


   
     
 
Re: Adding custom images like .png, .jpeg in nodelist
Reply #4 - Jun 29th, 2017 at 11:39am
 
This example looks outdated, now the library includes a NodeListView control you could use as a palette instead of the custom-drawn ListBox from Flowcharter. So add a NodeListView to your form, and then populate it with prototype nodes like this -

Code:
nodeListView.AddNode(
	new ShapeNode
	{
		Transparent = true,
		Image = Image.FromFile(@"images/airplane.png")
	},
	"Airplane"); 



Now if user drags a node from the palette, it get cloned on the diagram canvas automatically, instead of you having to create instances from DragDrop event handler.

HTH,
Slavcho
 
 
 
IP Logged    
 
     

ashar11   Offline
Junior Member
**
Posts: 54
Gender: male
I Love MindFusion!


   
     
 
Re: Adding custom images like .png, .jpeg in nodelist
Reply #5 - Jun 29th, 2017 at 1:23pm
 
https://imagebin.ca/v/3RdtYsGdhKd3

Slavcho, I tried as u said but i am facing an issue, now image is showing in nodelistview but i cannot drag it to the diagramview even the drag properties are true,and also i think nodelist is not that old i have downloaded the latest version from mindfusion for winforms and nodelist is very flexible with having connectors functionalities as well...so is there any way to get my images in that nodelist as showing in the url i have attached above.

And below is the code i used now,

this.nodeListView1.AddNode(
new ShapeNode
{
Transparent = true,
Image = Image.FromFile(@"C:/Imgs/bitmap1.bmp")
},"Airplane");
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1591
Gender: male
tech.support


   
     
 
Re: Adding custom images like .png, .jpeg in nodelist
Reply #6 - Jun 29th, 2017 at 1:37pm
 
I don't mean your installation but our example is outdated, we should update it to use NodeListView. The DiagramView won't accept drag and drop from NodeListView in Flowcharter example because of the diagramView_DragOver event handler there setting e.Effect = DragDropEffects.None; remove that line and it should work.

Regards,
Slavcho
 
 
 
IP Logged    
 
     

ashar11   Offline
Junior Member
**
Posts: 54
Gender: male
I Love MindFusion!


   
     
 
Re: Adding custom images like .png, .jpeg in nodelist
Reply #7 - Jun 29th, 2017 at 1:47pm
 
The issue is resolved now, thanks Slavcho for the quick solution.
 
 
 
IP Logged    
 
     

Slavcho   Offline
God Member
*****
Posts: 1591
Gender: male
tech.support


   
     
 
Re: Adding custom images like .png, .jpeg in nodelist
Reply #8 - Jun 29th, 2017 at 2:03pm
 
In attached I've replaced the custom-drawn listbox with a NodeListView. Now instead of Shape assignments there you can add Image ones to get what you need. We'll probably replace the connectors list there too for upcoming release, with a ShapeListBox control. I'm guessing Flowcharter was created before we had these controls in the library

HTH,
Slavcho
 
 

FlowCharter_NLV.zip (47 KB | 87 )
 
IP Logged    
 
     

ashar11   Offline
Junior Member
**
Posts: 54
Gender: male
I Love MindFusion!


   
     
 
Re: Adding custom images like .png, .jpeg in nodelist
Reply #9 - Jun 30th, 2017 at 11:10am
 
it is working now ,thanks
 
 
 
IP Logged    
 
     
Page Index Toggle Pages: 1 Send Topic Print