Dojo Toolkit

PolyLine Shapes changing color on the fly

Classic

List

Threaded

10 messages Options

rayh

PolyLine Shapes changing color on the fly

Hi.

Dojox gfx

I've created my surface (sc), created my polylines which I colour using a stored variable t=sc etc, t=sc.setFill (variable). I am then mapping the shape, placing a blank gif (linked to a map) over the shapes and changing the stored colour variable by clicking the 'blank.gif' and triggering the function referred to in the map coordinates. (basically, the user clicks a colour (that is stored) and I want the user to then click a part of the overall created image, and apply the colour to the selected part.

Using a blank.gif and a map works but to my mind I am 'recreating co-ordinates' etc and bloating my code, plus this approach has its limitations, so I would rather user could click the actual polyLine shape and change the colour via a function linked to it directly. But. I cannot work out how to 'connect' with the shape as an object. the Dojo.connect (on mousedown) fails, I can't get it to recognise the shape using dojo.byID; my question is.. is there a way of clicking a shape and have a function run in the same way as would work??? Thank you. this is urgent please.. all ideas welcome.

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

j105.rob

Re: PolyLine Shapes changing color on the fly

Ray,

Here is a snip that I use:

_createKeyImage: function(/*surface*/surface, /*xpos*/xpos, /*ypos*/ypos,/*backFill*/backFill,/*fontFill*/fontFill, /*clickFill*/clickFill,/*letter*/letter, /*clickFunc*/clickFunc){

rect = surface.createRect({x:xpos, y:ypos, width:20, height:20, r:4}).setFill(backFill);

txt = surface.createText({x:xpos + 6, y:ypos +15 , text:letter}).setFill(fontFill).setFont({style:'normal',family:'verdana',weight:'bold',size:'10pt'});

clickSurface = surface.createRect({x:xpos, y:ypos, width:20, height:20, r:4}).setFill(clickFill);

clickSurface.connect('onclick', clickFunc);

}

Above Connects the surface to the event. I use a "clickSurface over the area I want to be "clickable"....

If you need to simulate an event:

dojo.trigger(dojo.byId('userName'), "keypress", { keyChar: "s", charOrCode: "s", testAttr: 'blah' });

That "trigger" is part of plugd.....

Sorry so fast of a response, but you seem like you needed a quick reply...

On Mon, Aug 16, 2010 at 8:28 AM, raymond howell <[hidden email]> wrote:

Hi.

Dojox gfx

I've created my surface (sc), created my polylines which I colour using a stored variable t=sc etc, t=sc.setFill (variable). I am then mapping the shape, placing a blank gif (linked to a map) over the shapes and changing the stored colour variable by clicking the 'blank.gif' and triggering the function referred to in the map coordinates. (basically, the user clicks a colour (that is stored) and I want the user to then click a part of the overall created image, and apply the colour to the selected part.

Using a blank.gif and a map works but to my mind I am 'recreating co-ordinates' etc and bloating my code, plus this approach has its limitations, so I would rather user could click the actual polyLine shape and change the colour via a function linked to it directly. But. I cannot work out how to 'connect' with the shape as an object. the Dojo.connect (on mousedown) fails, I can't get it to recognise the shape using dojo.byID; my question is.. is there a way of clicking a shape and have a function run in the same way as would work??? Thank you. this is urgent please.. all ideas welcome.

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

rayh

Re: PolyLine Shapes changing color on the fly

Hi.. Thanks for the quick reply..I appreciate it. I will digest hahahaha...

From: [hidden email] [mailto:[hidden email]] On Behalf Of Rob Weiss
Sent: 16 August 2010 13:37
To: [hidden email]
Subject: Re: [Dojo-interest] PolyLine Shapes changing color on the fly

Ray,

Here is a snip that I use:

_createKeyImage: function(/*surface*/surface, /*xpos*/xpos, /*ypos*/ypos,/*backFill*/backFill,/*fontFill*/fontFill, /*clickFill*/clickFill,/*letter*/letter, /*clickFunc*/clickFunc){

rect = surface.createRect({x:xpos, y:ypos, width:20, height:20, r:4}).setFill(backFill);

txt = surface.createText({x:xpos + 6, y:ypos +15 , text:letter}).setFill(fontFill).setFont({style:'normal',family:'verdana',weight:'bold',size:'10pt'});

clickSurface = surface.createRect({x:xpos, y:ypos, width:20, height:20, r:4}).setFill(clickFill);

clickSurface.connect('onclick', clickFunc);

}

Above Connects the surface to the event. I use a "clickSurface over the area I want to be "clickable"....

If you need to simulate an event:

dojo.trigger(dojo.byId('userName'), "keypress", { keyChar: "s", charOrCode: "s", testAttr: 'blah' });

That "trigger" is part of plugd.....

Sorry so fast of a response, but you seem like you needed a quick reply...

On Mon, Aug 16, 2010 at 8:28 AM, raymond howell <[hidden email]> wrote:

Hi.

Dojox gfx

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

rayh

Re: PolyLine Shapes changing color on the fly

In reply to this post by j105.rob

Hi Rob.. Thanks for that, It works thus far. I have an alert box functioning so all is well in the garden, so now I can plant. Many thanks Ray.

Ray,

Here is a snip that I use:

_createKeyImage: function(/*surface*/surface, /*xpos*/xpos, /*ypos*/ypos,/*backFill*/backFill,/*fontFill*/fontFill, /*clickFill*/clickFill,/*letter*/letter, /*clickFunc*/clickFunc){

rect = surface.createRect({x:xpos, y:ypos, width:20, height:20, r:4}).setFill(backFill);

txt = surface.createText({x:xpos + 6, y:ypos +15 , text:letter}).setFill(fontFill).setFont({style:'normal',family:'verdana',weight:'bold',size:'10pt'});

clickSurface = surface.createRect({x:xpos, y:ypos, width:20, height:20, r:4}).setFill(clickFill);

clickSurface.connect('onclick', clickFunc);

}

Above Connects the surface to the event. I use a "clickSurface over the area I want to be "clickable"....

If you need to simulate an event:

dojo.trigger(dojo.byId('userName'), "keypress", { keyChar: "s", charOrCode: "s", testAttr: 'blah' });

That "trigger" is part of plugd.....

Sorry so fast of a response, but you seem like you needed a quick reply...

On Mon, Aug 16, 2010 at 8:28 AM, raymond howell <[hidden email]> wrote:

Hi.

Dojox gfx

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

OldGuru

Re: PolyLine Shapes changing color on the fly

In reply to this post by rayh

As I understand, you are using a HTML image, not a gfx image, to capture mouse clicks. If you create a separate GFX Image object for each polyline then you can capture onclick events of each Image object separately by passing Image.getNode() to dojo.connect:

var img = sc.createImage(...);
dojo.connect(img.getNode(), 'onclick', ...);

I used this method only in IE, but it should also work in other browsers. You can even try the same approach for polyline and, if it works, skip creating the blank image altogether.

Farid

rayh wrote

Hi.

Dojox gfx

I've created my surface (sc), created my polylines which I colour using a
stored variable t=sc etc, t=sc.setFill (variable). I am then mapping the
shape, placing a blank gif (linked to a map) over the shapes and changing
the stored colour variable by clicking the 'blank.gif' and triggering the
function referred to in the map coordinates. (basically, the user clicks a
colour (that is stored) and I want the user to then click a part of the
overall created image, and apply the colour to the selected part.

Using a blank.gif and a map works but to my mind I am 'recreating
co-ordinates' etc and bloating my code, plus this approach has its
limitations, so I would rather user could click the actual polyLine shape
and change the colour via a function linked to it directly. But. I cannot
work out how to 'connect' with the shape as an object. the Dojo.connect (on
mousedown) fails, I can't get it to recognise the shape using dojo.byID; my
question is.. is there a way of clicking a shape and have a function run in
the same way as would work??? Thank you. this is
urgent please.. all ideas welcome.

rayh

Re: PolyLine Shapes changing color on the fly

Hi 'OldGuru',

Thanks for that.. You are right in your assessment about the html image, and
I am close to using your idea, I just started to read about images.

NOW, hahaha, I am struggling with how to carry a parameter to a function, my
example named colourIt using obj.connect("onclick", colourIt)

Can't seem to tag a parameter as you would usually, say
ColourIt('something').

Tried colourIt(), then placed an alert in colourIt and the alert gets
triggered when the page loads, so I removed the () and the alert rightly
only triggers on the click event, I tried various ideas like , 'parameter',
' no quote, : etc, {} etc, all to no avail. I am new to dojo and in many
ways it is a very new concept and I must admit I am struggling.

I've read the dojo.connect articles but couldn't see where they are
'holding' / passing parameters to the called, my example, colourIt()
function. So, because I have to pass a value back to the calling function it
is looking like I will have to have a different function for each Polyline
created which doesn't 'feel' right to me. Anyway.. Thank you very much, I
appreciate your help.

Ray

-----Original Message-----
From: [hidden email]
[mailto:[hidden email]] On Behalf Of OldGuru
Sent: 16 August 2010 14:49
To: [hidden email]
Subject: Re: [Dojo-interest] PolyLine Shapes changing color on the fly

As I understand, you are using a HTML image, not a gfx image, to capture
mouse clicks. If you create a separate GFX Image object for each polyline
then you can capture onclick events of each Image object separately by
passing Image.getNode() to dojo.connect:

var img = sc.createImage(...);
dojo.connect(img.getNode(), 'onclick', ...);

I used this method only in IE, but it should also work in other browsers.
You can even try the same approach for polyline and, if it works, skip
creating the blank image altogether.

Farid

rayh wrote:

>
> Hi.
>
> Dojox gfx
>
>
>
> I've created my surface (sc), created my polylines which I colour
> using a stored variable t=sc etc, t=sc.setFill (variable). I am then
> mapping the shape, placing a blank gif (linked to a map) over the
> shapes and changing the stored colour variable by clicking the
> 'blank.gif' and triggering the function referred to in the map
> coordinates. (basically, the user clicks a colour (that is stored)
> and I want the user to then click a part of the overall created image,
> and apply the colour to the selected part.
>
>
>
> Using a blank.gif and a map works but to my mind I am 'recreating
> co-ordinates' etc and bloating my code, plus this approach has its
> limitations, so I would rather user could click the actual polyLine
> shape and change the colour via a function linked to it directly. But.
> I cannot work out how to 'connect' with the shape as an object. the
> Dojo.connect (on
> mousedown) fails, I can't get it to recognise the shape using
> dojo.byID; my question is.. is there a way of clicking a shape and
> have a function run in the same way as 
> would work??? Thank you. this is urgent please.. all ideas welcome.
>

--
View this message in context:
http://dojo-toolkit.33424.n3.nabble.com/PolyLine-Shapes-changing-color-on-th
e-fly-tp1169851p1170804.html
Sent from the Dojo Toolkit mailing list archive at Nabble.com.
_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

OldGuru

Re: PolyLine Shapes changing color on the fly

You're welcome Ray. I need to correct my previous comment; I had tested this method in Firefox and Chrome too and it worked in both of them.

You don't need separate functions. The function you define in dojo.connect is a standard event handler:

function myHandler(evt)
{
var targetDomNode = window.event ? window.event.srcElement : evt.target; // node that fired the event
.
.
.
}

A trick that I use often to pass extra info to event handlers is to add extra attributes to nodes:

var img = sc.createImage(...);
var node = img.getNode();
node.extraInfo = {...}; // Add any information that helps you quickly determine which node fired the event. In your case it can simply be the color code of the poly line.
dojo.connect(node, 'onclick', ...);

Farid

rayh wrote

Hi 'OldGuru',

Thanks for that.. You are right in your assessment about the html image, and
I am close to using your idea, I just started to read about images.

NOW, hahaha, I am struggling with how to carry a parameter to a function, my
example named colourIt using obj.connect("onclick", colourIt)

Can't seem to tag a parameter as you would usually, say
ColourIt('something').

Tried colourIt(), then placed an alert in colourIt and the alert gets
triggered when the page loads, so I removed the () and the alert rightly
only triggers on the click event, I tried various ideas like , 'parameter',
' no quote, : etc, {} etc, all to no avail. I am new to dojo and in many
ways it is a very new concept and I must admit I am struggling.

I've read the dojo.connect articles but couldn't see where they are
'holding' / passing parameters to the called, my example, colourIt()
function. So, because I have to pass a value back to the calling function it
is looking like I will have to have a different function for each Polyline
created which doesn't 'feel' right to me. Anyway.. Thank you very much, I
appreciate your help.

Ray

rayh

Re: PolyLine Shapes changing color on the fly

In reply to this post by j105.rob

Hi Rob

You may recall nudging me along bit a week or so back. Thanks.

This is a link to a bare basic test page which will show you where I want to be., and if you look at the messy code you will see how I've achieved it. It would be great to improve on this if I can, but anyway it is there for all to laugh at lol, now at least you will be able to visualise my aims.

http://www.equisign.co.uk/draw/drawPoly.html

Thanks again for your help

Feel free to 'comment'.. Take care

Regards

Raymond

Ray,

Here is a snip that I use:

_createKeyImage: function(/*surface*/surface, /*xpos*/xpos, /*ypos*/ypos,/*backFill*/backFill,/*fontFill*/fontFill, /*clickFill*/clickFill,/*letter*/letter, /*clickFunc*/clickFunc){

rect = surface.createRect({x:xpos, y:ypos, width:20, height:20, r:4}).setFill(backFill);

txt = surface.createText({x:xpos + 6, y:ypos +15 , text:letter}).setFill(fontFill).setFont({style:'normal',family:'verdana',weight:'bold',size:'10pt'});

clickSurface = surface.createRect({x:xpos, y:ypos, width:20, height:20, r:4}).setFill(clickFill);

clickSurface.connect('onclick', clickFunc);

}

Above Connects the surface to the event. I use a "clickSurface over the area I want to be "clickable"....

If you need to simulate an event:

dojo.trigger(dojo.byId('userName'), "keypress", { keyChar: "s", charOrCode: "s", testAttr: 'blah' });

That "trigger" is part of plugd.....

Sorry so fast of a response, but you seem like you needed a quick reply...

On Mon, Aug 16, 2010 at 8:28 AM, raymond howell <[hidden email]> wrote:

Hi.

Dojox gfx

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

j105.rob

Re: PolyLine Shapes changing color on the fly

In reply to this post by j105.rob

@Ray - Wow... switch out those "if"'s for a switch; also have you seen dojo.color? I am sure that you can optimize the color picker code and get it down to operate on offsets and eliminate the need to replicate all of that code over and over.....

But, I really like the concept!!!

Cheers!

On Wed, Aug 25, 2010 at 9:42 AM, raymond howell <[hidden email]> wrote:

Hi Rob

You may recall nudging me along bit a week or so back. Thanks.

This is a link to a bare basic test page which will show you where I want to be., and if you look at the messy code you will see how I've achieved it. It would be great to improve on this if I can, but anyway it is there for all to laugh at lol, now at least you will be able to visualise my aims.

http://www.equisign.co.uk/draw/drawPoly.html

Thanks again for your help

Feel free to 'comment'.. Take care

Regards

Raymond

From: [hidden email] [mailto:[hidden email]] On Behalf Of Rob Weiss
Sent: 16 August 2010 13:37
To: [hidden email]
Subject: Re: [Dojo-interest] PolyLine Shapes changing color on the fly

Ray,

Here is a snip that I use:

 _createKeyImage: function(/*surface*/surface, /*xpos*/xpos, /*ypos*/ypos,/*backFill*/backFill,/*fontFill*/fontFill, /*clickFill*/clickFill,/*letter*/letter, /*clickFunc*/clickFunc){

 rect = surface.createRect({x:xpos, y:ypos, width:20, height:20, r:4}).setFill(backFill);

 txt = surface.createText({x:xpos + 6, y:ypos +15 , text:letter}).setFill(fontFill).setFont({style:'normal',family:'verdana',weight:'bold',size:'10pt'});

 clickSurface = surface.createRect({x:xpos, y:ypos, width:20, height:20, r:4}).setFill(clickFill);

 clickSurface.connect('onclick', clickFunc);

 }

Above Connects the surface to the event. I use a "clickSurface over the area I want to be "clickable"....

If you need to simulate an event:

dojo.trigger(dojo.byId('userName'), "keypress", { keyChar: "s", charOrCode: "s", testAttr: 'blah' });

That "trigger" is part of plugd.....

Sorry so fast of a response, but you seem like you needed a quick reply...

On Mon, Aug 16, 2010 at 8:28 AM, raymond howell <[hidden email]> wrote:

Hi.

Dojox gfx

I've created my surface (sc), created my polylines which I colour using a stored variable t=sc etc, t=sc.setFill (variable). I am then mapping the shape, placing a blank gif (linked to a map) over the shapes and changing the stored colour variable by clicking the 'blank.gif' and triggering the function referred to in the map coordinates. (basically, the user clicks a colour (that is stored) and I want the user to then click a part of the overall created image, and apply the colour to the selected part.

Using a blank.gif and a map works but to my mind I am 'recreating co-ordinates' etc and bloating my code, plus this approach has its limitations, so I would rather user could click the actual polyLine shape and change the colour via a function linked to it directly. But. I cannot work out how to 'connect' with the shape as an object. the Dojo.connect (on mousedown) fails, I can't get it to recognise the shape using dojo.byID; my question is.. is there a way of clicking a shape and have a function run in the same way as would work??? Thank you. this is urgent please.. all ideas welcome.

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

rayh

Re: PolyLine Shapes changing color on the fly

Hi Rob

Not sure if I should say thanks or cry, hahahah.

I'll chance Thanks!

Ray

From: [hidden email] [mailto:[hidden email]] On Behalf Of Rob Weiss
Sent: 25 August 2010 16:24
To: [hidden email]
Subject: Re: [Dojo-interest] PolyLine Shapes changing color on the fly

But, I really like the concept!!!

Cheers!

On Wed, Aug 25, 2010 at 9:42 AM, raymond howell <[hidden email]> wrote:

Hi Rob

You may recall nudging me along bit a week or so back. Thanks.

http://www.equisign.co.uk/draw/drawPoly.html

Thanks again for your help

Feel free to 'comment'.. Take care

Regards

Raymond

Ray,

Here is a snip that I use:

_createKeyImage: function(/*surface*/surface, /*xpos*/xpos, /*ypos*/ypos,/*backFill*/backFill,/*fontFill*/fontFill, /*clickFill*/clickFill,/*letter*/letter, /*clickFunc*/clickFunc){

rect = surface.createRect({x:xpos, y:ypos, width:20, height:20, r:4}).setFill(backFill);

txt = surface.createText({x:xpos + 6, y:ypos +15 , text:letter}).setFill(fontFill).setFont({style:'normal',family:'verdana',weight:'bold',size:'10pt'});

clickSurface = surface.createRect({x:xpos, y:ypos, width:20, height:20, r:4}).setFill(clickFill);

clickSurface.connect('onclick', clickFunc);

}

Above Connects the surface to the event. I use a "clickSurface over the area I want to be "clickable"....

If you need to simulate an event:

dojo.trigger(dojo.byId('userName'), "keypress", { keyChar: "s", charOrCode: "s", testAttr: 'blah' });

That "trigger" is part of plugd.....

Sorry so fast of a response, but you seem like you needed a quick reply...

On Mon, Aug 16, 2010 at 8:28 AM, raymond howell <[hidden email]> wrote:

Hi.

Dojox gfx

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest