add setImage method to Image Endpoint (was : Q: How to change an endpoint image)

[GoogleCodeExporter]

Hi.

This is not an issue, this is a question. I didn't find other to way to send 
this, so sorry me if this is not the correct place and tell me where can I ask 
it.

I'm trying to change the image of an endpoint, but I can't, maybe cause this is 
not possible.

I have two colors (green for full endpoints and yellow for incomplete 
connections in the endpoint) images with differents numbers. A block with a 
source and a target endpoints can have different numbers of maxconnections in 
it:

jsPlumb.addEndpoint(newblock, {
    isTarget : true,
    anchor : "LeftMiddle",
    maxConnections : blocksConfig[type].inputs.length,
    endpoint : [ "Image", {
        src: "images/yellow" +
            (blocksConfig[type].inputs.length <= 5 ? blocksConfig[type].inputs.length : "5+") +
            ".png"
    }]
});

jsPlumb.addEndpoint(newblock, {
    isSource : true,
    anchor : "RightMiddle",
    maxConnections : blocksConfig[type].outputs.length,
    endpoint : [ "Image", {
        src: "images/yellow" +
            (blocksConfig[type].outputs.length <= 5 ? blocksConfig[type].outputs.length : "5+") +
            ".png"
    }]
});

The blocksConfig[type].outputs.length will be always more than 1, so the 
endpoint is always incomplete when it is created and color will be yellow.

I want to change the color of the image if a new connection complete the 
maxconnections to the endpoint, so I bind with jsPlumbConnection event:

jsPlumb.bind("jsPlumbConnection", function(conn) {
    $([ conn.sourceEndpoint, conn.targetEndpoint ]).each(function (idx, val) {
        var number = val.canvas.src.match(/yellow*./)[0].substr(6);
        if (val.isFull()) {
            **********************************
        }
    });
});

********************************** is the code that I can't find to use. I 
tried to change several variables, but no visual change is made.

Can you help me?

Thanks in advance. Great job.

Original issue reported on code.google.com by daniel.martinez.ruiz on 8 Nov 2011 at 1:20

[GoogleCodeExporter]

hello,

this might actually need to be added to jsPlumb - you want to set a new image 
on the Endpoint, basically, right?  there is no method to do that right now.

shall we turn this into an enhancement request and put it in 1.3.4?

Original comment by simon.po...@gmail.com on 8 Nov 2011 at 8:32

[GoogleCodeExporter]

Yes, that's right. I finally do it throught conn.sourceEndpoint.canvas.src but 
I don't know if it could have colateral effects. I'll use this new function in 
1.3.4.

I have create an example in jsfiddle, you can find it in 
http://jsfiddle.net/danielmartinezruiz/rhyhv/2/ . I hope this could help you. 
Additionally, I cannot use isFull function cause the source isFloating and it 
never gives me true but I solved it with (val.connectorSelector() != null).

Thanks for your support.

Original comment by daniel.martinez.ruiz on 10 Nov 2011 at 10:25

[GoogleCodeExporter]

cool, thanks for the link.

i will make this an enhancement and put it in 1.3.4: your workaround solution 
is ok in this case because the images are similar sizes, but the code that 
creates the wrapper div runs only once, so if you swapped out for a bigger 
image i think this would fall down.  the setter method that i'll add will just 
mark the endpoint as dirty for the next repaint, and it will get resized 
properly.

for convenience i'll have the setImage method accept both a url and an existing 
Image.

Original comment by simon.po...@gmail.com on 10 Nov 2011 at 9:49

• Changed title: add setImage method to Image Endpoint (was : Q: How to change an endpoint image)
• Changed state: Accepted
• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

The example I made had internet images with different sizes, but my program 
solution has images with the same size. Thanks for the enhancement. I will be 
aware for 1.3.4 version.

Original comment by daniel.martinez.ruiz on 11 Nov 2011 at 10:16

[GoogleCodeExporter]

i've added this to 1.3.4 now:

setImage(img, onload)

'img' can be either a string or an Image.  'onload' is optional, and replaces 
any current onload on the Image endpoint.

Original comment by simon.po...@gmail.com on 26 Dec 2011 at 9:09

• Changed state: Fixed
• Added labels: Milestone-1.3.4

[GoogleCodeExporter]

1.3.4 was released today.

Original comment by simon.po...@gmail.com on 9 Jan 2012 at 6:58

• Changed state: Verified