Changing an image depending on slider value in Javascript

[chubby...@hotmail.com]

Hi
Florent originally gave me advice on this matter in the chat room, but
I cant quite see how to get it to work.
I have 12 images which show the different states of a slider and I
want them to change depending on the slider value.
I understand that first I need to watch the slider's join

CF.watch(CF.JoinChangeEvent, "a1", onSliderChanged)

Then add a function to get the image to change

onSliderChanged(join, value) {if (value < 1) { /* set first image here
*/ } else if (value < 2) { /* set second image here */ }

etc

But I'm having trouble actually putting this into practice. Assuming
my slider is on a1 and my image is on s1, how do I get it to change?
I've tried loads of comibinations, but no joy so far :-(

Thanks

Rob

[Terence]

First of all you'll need to change your logic as when value<2, value<3, etc.
conditions are met, it will also trigger actions for value<1. For each of
your 12 images, you would want to set the value to be value =1,
value=2,value=3, etc until value=12.

Than use CF.setJoin to set the path for your image. Your function would
probaly look something like this :

onSliderChanged(join, value) {
if (value = 1) { CF.setJoin("s1", *path for your first image here*); // set
first image here } else if (value = 2) { CF.setJoin("s1", *path for your
second image here*); // set second image here } and etc.

CF.watch(CF.JoinChangeEvent, "a1", onSliderChanged)

etc

Thanks

Rob

--
You received this message because you are subscribed to the Google Groups
"CommandFusion" group.
To post to this group, send email to comman...@googlegroups.com.
To unsubscribe from this group, send email to
commandfusio...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/commandfusion?hl=en.

[Jarrod Bell]

Remember JavaScript equality testing needs double equals signs
eg. if (value == 2) {

Jarrod

[chubby...@hotmail.com]

So am I adding this to an external JS file or straight into the GUI?

> >http://groups.google.com/group/commandfusion?hl=en.- Hide quoted text -
>
> - Show quoted text -

[Jarrod Bell]

Needs to be in an external JS file and then added to guiDesigner via
Project Properties > Script Manager

Jarrod

[chubby...@hotmail.com]

So I've now got this...

CF.watch(CF.JoinChangeEvent, "a1", onSliderChanged)

onSliderChanged(a1, value) {if (value == 0) { CF.setJoin("s100",
images/icons/lighting/icon-light-01.png)}
else if (value == 1) { CF.setJoin("s100", images/icons/lighting/icon-
light-02.png);
else if (value == 2) { CF.setJoin("s100", images/icons/lighting/icon-
light-03.png);
else if (value == 3) { CF.setJoin("s100", images/icons/lighting/icon-
light-04.png);
else if (value == 4) { CF.setJoin("s100", images/icons/lighting/icon-
light-05.png);
else if (value == 5) { CF.setJoin("s100", images/icons/lighting/icon-
light-06.png);
else if (value == 6) { CF.setJoin("s100", images/icons/lighting/icon-
light-07.png);
else if (value == 7) { CF.setJoin("s100", images/icons/lighting/icon-
light-08.png);
else if (value == 8) { CF.setJoin("s100", images/icons/lighting/icon-
light-09.png);
else if (value == 9) { CF.setJoin("s100", images/icons/lighting/icon-
light-10.png);
else if (value == 10) { CF.setJoin("s100", images/icons/lighting/icon-
light-11.png);
else if (value == 11) { CF.setJoin("s100", images/icons/lighting/icon-
light-12.png);

But still no joy. I guess I've been managing just fine using simple
commands inside the GUI, but this is new to me. Where am I going
wrong?
Thanks for all your help so far

On Feb 1, 2:09 pm, Jarrod Bell <jar...@guilink.com> wrote:
> Needs to be in an external JS file and then added to guiDesigner via
> Project Properties > Script Manager
>
> Jarrod
>

> >>>http://groups.google.com/group/commandfusion?hl=en.-Hide quoted text -
> >> - Show quoted text -- Hide quoted text -

[Denis Renesto]

Try use "" in image name.

E.G.

CF.setJoin("s100", "images/icons/lighting/icon-
light-02.png"); 

Thanks.

2012/2/1 chubby...@hotmail.com <chubby...@hotmail.com>

[chubby...@hotmail.com]

Thank you, but alas, still no joy

On Feb 1, 4:45 pm, Denis Renesto <denis.rene...@gmail.com> wrote:
> Try use "" in image name.
>
> E.G.
> CF.setJoin("s100", "images/icons/lighting/icon-
> light-02.png");
>
> Thanks.
>

> 2012/2/1 chubby_bl...@hotmail.com <chubby_bl...@hotmail.com>

> > > >>>http://groups.google.com/group/commandfusion?hl=en.-Hidequoted text

> > -
> > > >> - Show quoted text -- Hide quoted text -
>
> > > - Show quoted text -
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "CommandFusion" group.
> > To post to this group, send email to comman...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > commandfusio...@googlegroups.com.
> > For more options, visit this group at

> >http://groups.google.com/group/commandfusion?hl=en.- Hide quoted text -

[Denis Renesto]

Ok, you need to close the blocks "if".

if (value == 0) 

{ 

   CF.setJoin("s100",images/icons/lighting/icon-light-01.png)

}

else if (value == 1) { 

   CF.setJoin("s100", images/icons/lighting/icon-light-02.png);

}

2012/2/1 chubby...@hotmail.com <chubby...@hotmail.com>

[Florent Pillet]

Several basic mistakes in your code: you forgot the 'function' keyword,
you don't enclose strings in "", you didn't terminate the last test with
a closing } nor the function with another closing }.

Also, since you are not using a full blown URL, I assume you are referring
to images in your Assets subfolder. I'll assume that you already set your
assets folder to "images" in the project. If you did so, the images/
prefix folder is redundant.

Finally, you could optimize this code by intelligently building the
URL string, like this:

function onSliderChanged(join, value) {
if (value < 10) {
CF.setJoin("s100", "icons/lighting/icon-light-0"+value+".png");
} else {
CF.setJoin("s100", "icons/lighting/icon-light-"+value+".png");
}
}

Florent

--
Florent Pillet - Software Engineering Lead
www.commandfusion.com

[Steve]

Also, the else if's never fire as you are ending each with a semi
colon. Remove those as well.

On Feb 1, 12:29 pm, Florent Pillet <fpil...@gmail.com> wrote:
> Several basic mistakes in your code: you forgot the 'function' keyword,
> you don't enclose strings in "", you didn't terminate the last test with
> a closing } nor the function with another closing }.
>
> Also, since you are not using a full blown URL, I assume you are referring
> to images in your Assets subfolder. I'll assume that you already set your
> assets folder to "images" in the project. If you did so, the images/
> prefix folder is redundant.
>
> Finally, you could optimize this code by intelligently building the
> URL string, like this:
>
> function onSliderChanged(join, value) {
>     if (value < 10) {
>         CF.setJoin("s100", "icons/lighting/icon-light-0"+value+".png");
>     } else {
>         CF.setJoin("s100", "icons/lighting/icon-light-"+value+".png");
>     }
>
> }
>
> Florent
>

[chubby...@hotmail.com]

Ok, I feel I'm getting closer now.
Now when I move my slider the whole image goes blank, so I presume
that it can't find the graphics.
I've tried adding back the "images" prefix to the image I'm referring
to. I've tried using images straight out of the main folder where my
GUI file is located

Any ideas?


Thanks for all your help, I feel I've nearly cracked this

Rob

> > Florent Pillet - Software Engineering Leadwww.commandfusion.com- Hide quoted text -

[Jarrod Bell]

You have to make sure the image is placed in the GUI somewhere at design
time, otherwise it wont be requested in the cache.

Make sure you validate the actual image url being requested using CF.log
and the web browser debugger connected to iViewer.
See the API docs for debugging details.

Jarrod

[Terence]

To load pictures straight from the main folder where GUI file is located,
use CF.setJoin("s100", "Picture1.png")

To load pictures from subfolder within the GUI file's folder : use
CF.setJoin("s100", "/image/Picture1.png"). The path of the file will of
course depends on the folder's tree structure itself.

-----Original Message-----
From: comman...@googlegroups.com [mailto:comman...@googlegroups.com]

Jarrod

--