topic Re: Hover label in Discussions

Hover label

Emma1 — Fri, 09 Jun 2023 23:35:47 GMT

Hello,

I would like to display a photo in my hover label when I click on a point of a graph (like in the file "Big class families", script "graph builder with pictures").

I would like to do the same thing but without the "Picture" column

Indeed, I have a database with a lot of lines and putting photos for each line would be too heavy

I would like to have a folder on my computer with all the photos, in “.jpg” format. These photos will have the same name as what is in the "name" column of my database

For example, Katie's photo will be named in my computer folder: "KATIE.jpg"

When I click on a point, I would like to display the corresponding image (which is in a folder on my computer, and not in an "image" column) thanks to the "name" column which is named from the same way as my photos

Can you help me please ?

For the moment, I can only open the folder with all my photos when I go over a point but it does’nt show me the photo that corresponds to the point in the hover label

Thank you

Re: Hover label

HadleyMyers — Mon, 24 Aug 2020 14:41:59 GMT

Hi,

This is a really interesting request! One possible way of doing this I can think of would be to use scripting to 1) create a new column, 2) insert the picture in that column at a row where the filename matches a value in another column, 3) display the picture as a hover label. This way, pictures would only be added to the table as the points are hovered over. You could add a line at the start of the script that deletes the picture column if it exists before creating a new one, thereby ensuring that only one picture is inserted into your table at a time. Does this sound like something that would work?

Re: Hover label

nascif_jmp — Mon, 24 Aug 2020 14:52:27 GMT

Hi @Emma1,

This can be done using Graphlets, a Hover Label extension added in JMP 15.0.You will need a bit of JSL to tell JMP how to find your image file, based on the value of your image column. The example below illustrates that approach, using the Iris dataset and deriving the image file name from the the corresponding species. As a bonus, it shows how to open the photo in a browser window when you click on the hover label thumbnail.

You can also use the Hover Label Editor to implement this same technique, with less coding (you will just need to provide the content for the 'Picture' and 'Click' (optional) attributes below.

Re: Hover label

HadleyMyers — Mon, 24 Aug 2020 14:55:22 GMT

I like this better than what I suggested.

Re: Hover label

Emma1 — Mon, 24 Aug 2020 15:08:42 GMT

Thank you very much for your two answers @HadleyMyers and @nascif_jmp .

I have already read the article with Iris and tried the script.

However, instead of referring to a web link, I would like to refer to an image in a folder.

It should not appear in my script a web link, but a link to find a particular photo

In addition, it would'nt be necessary to open the folder of photos with the "open" function present in the script, it would just be necessary that this photo is displayed in the hover label

Re: Hover label

nascif_jmp — Mon, 24 Aug 2020 18:27:49 GMT

@Emma1,

The script I posted as an example in my reply shows how to display the image inside your hover label as a thumbnail as you described.

And it does read the image from the disk, not from the web.

The "open" function, despite its name, does not open the folder. It loads the image and passes it to a PictureBox, which is scaled down and displayed as a thumbnail inside the hover label.

The display of the image on the browser on a click event is optional. You can remove the "Click" attribute from the script if you don't want it.

In which case, clicking on the thumbnail will display the image in a regular JMP window.

Re: Hover label

Emma1 — Tue, 25 Aug 2020 06:40:50 GMT

Ok thank you !

I apply what you tell me but when I click on a dot, the hover label does'nt show up, only the photos file from my computer opens.

In the last line of my script: "Picture (PictureBox (Open (cwd," \ .jpg "))),"

Is it possible at this step to specify to open the photo of the point which has the same name in my photo folder and in one of my columns in my database? To link the names in this column to the image names in my computer folder?

Thank you

Re: Hover label

nascif_jmp — Tue, 25 Aug 2020 14:31:16 GMT

OK, let's see:

>> I apply what you tell me but when I click on a dot, the hover label does'nt show up, only the photos file from my computer opens.

The hover label (JMP's name for what is usually called a tooltip) shows up, as the name implies, when you hover or position the mouse over a marker in your graph, not when you click on it. Once the hover label is displayed - and if all goes well, it should include a thumbnail of your image file - you can click on the image for additional actions, for example to open the image in a new JMP window.

>> In the last line of my script: "Picture (PictureBox (Open (cwd," \ .jpg "))),"

The open command above has two problems:

1) The first argument is missing the value from the table row to create a correspondent file name. It is trying to open a folder, not an image file.

2) The second argument, the type modifier that tells the open command how to read the file data, should be just "jpg".

To recall, here is the open command from the example I posted earlier:

Picture(PictureBox(Open( cwd || local:_Species || ".jpg", "jpg"))),

Note how it is using a local variable ('local:_Species") to create the file name to match your observation. I believe you have a similar column in your data table. Local variables holding the corresponding value for the current visual marker are created automatically for labelled columns. If the column in your data table that matches the file name is not labelled, you can still get its value by using a direct column reference using the local variable 'local:_firstRow' as an index. It would look like this:

Picture(PictureBox(Open( cwd || :species[local:_firstRow] || ".jpg", "jpg"))),

These local variables are defined as part of the Hover Label Execution Context.

>> Is it possible at this step to specify to open the photo of the point which has the same name in my photo folder and in one of my columns in my database? To link the names in this column to the image names in my computer folder?

Yes, it is. We are very close of making it work. :)

Re: Hover label

Emma1 — Tue, 25 Aug 2020 19:35:58 GMT

Ok great thank you !

Now, I have this :

And the last line of my script is :

Picture(PictureBox(Open( cwd || :"Quantième +n°cuve"[local:_firstRow] || ".jpg", "jpg"))),

Now, I have a cross on my hover label...

Can you help me please ?

Thank you

Re: Hover label

nascif_jmp — Wed, 26 Aug 2020 13:23:46 GMT

The cross indicates that it failed to load the file. So we are not generating the file name correctly yet.

Time to do some debugging.

Try this:

Picture(PictureBox(

fileName = cwd || :Name("Quantième +n°cuve")[local:_firstRow] || ".jpg";

Show(fileName);

Open( fileName, "jpg"))

Then check the JMP log after you hover over a point. Make sure the file name printed there matches a image file name in your folder.

Note also how I changed the way you refer to the column name, you have to use the Name() function for column names that include invalid JSL name characters like that one. That change might actually solve this issue.

Re: Hover label

Emma1 — Wed, 26 Aug 2020 10:30:35 GMT

Hello

I tried your line of code:

SendToReport(
    Dispatch(
        {},
        "Graph Builder",
        FrameBox,
        {Set Graphlet(
            Picture(
                Picture Box(
                    fileName = cwd || :Name( "Quantième +n°cuve" )[local:_firstRow] || ".jpg";
                    Show( fileName );
                    Open( fileName, "jpg" );
                )
            )
        )}
    )
)

Unfortunately, it still doesn't work. I still have a cross in my hover label.

JMP doesn't make the connection between the name of my column and the name of my images which are in a folder of my computer.

I tried also to change the name "Quantième+n°cuve" to put a simpler one ("id"), while changing the name of the column in my database, however it still doesn't work.

Thanks for your help

Re: Hover label

nascif_jmp — Wed, 26 Aug 2020 13:22:12 GMT

Hi @Emma1,

I promise you that JMP can make the connection between the id and the file name. But we have to give it enough information to do so.

Have you defined the 'cwd' variable to point to the folder where the file is? The 'Open' command needs a complete file name.

Please add to the beginning of the script, before the creation of the Graph Builder instance, an expression to define cwd as a string with the path to your images folder.

Something like:

Names Default to Here(1);
cwd = "C:/myProject/myImages/"; //CHANGE THE PATH TO MATCH YOUR IMAGE FOLDER
gb = Graph Builder( ...

In the original example I shared, I was defining 'cwd' using the current directory (the one the script was loaded from) because in my case the image folder was in the same directory as the script. This might or might not be the case for you. It is simpler if you simply specify the image folder path directly.

Also, don't forget to use Show() and check to logs to make sure the file name is what you would expect it to be.

You are so close! I am looking forward to see a screenshot of the hover label with one of your images inside it!

Re: Hover label

Emma1 — Wed, 26 Aug 2020 14:36:33 GMT

Thank you very much for your help I succeeded!

It was only a "/" that was missing at the end of my "cwd" path

Here's the photo :

On my screenshot, I increased the size of my photo in the hover label editor then the "Thumbnail" tab

I put Width = Height = 400 while at the beginning there was Width = 200 and Height = 170

Is it possible to add this photo size in the script? 400 x 400?

Or does each user of the script need to change this with the hover label editor?

Thank you

Re: Hover label

nascif_jmp — Wed, 26 Aug 2020 15:05:11 GMT

I am so glad it worked! And even more so to see such a beautiful cheese! :)

You can add the size of the thumbnail to the script. Add to the beginning of the script:

tX = 400; tY = 400;
size = EvalList({tX, tY});

And then add, inside your setGraphlet call (maybe after the Picture attribute)

Thumbnail( size )

Note also that you have the option to click on the thumbnail to launch the image - at full size - in a separate window.

Re: Hover label

Emma1 — Thu, 27 Aug 2020 10:27:41 GMT

Hello,

I am trying to increase the size of the thumbnail with the script

I added at the start of my script:

gb = Graph Builder(

    tX = 400;
    tY = 400;

    size = Eval List( {tX, tY} );

    Size( 531, 456 );, 

    Show Control Panel( 0 )
    
    // ...
);

However, when I add "Thumbnail" at the end like this, it no longer works:

gb = Graph Builder(

    tX = 400;
    tY = 400;

    size = Eval List( {tX, tY} );

    Size( 531, 456 );, 

    Show Control Panel( 0 ), 
    
    // ...
    
    SendToReport(
        Dispatch(
            {},
            "Graph Builder",
            FrameBox,
            {Set Graphlet(
                Thumbnail( size ),
                Picture(
                    Picture Box(
                        fileName = cwd || :Name( "Quantième +n°cuve" )[local:_firstRow] || ".jpg";
                        Show( fileName );
                        Open( fileName, "jpg" );
                    )
                )
            )},

        )
    )
);

I tried to set "Thumbnail (size)" to other places in the script but I can't increase the size, I think I'm not putting it in the right place

It is a good idea to click on the photo directly in the thumbnail to view it large but the size is too large

Have a good day

Thank you

Re: Hover label

Emma1 — Thu, 27 Aug 2020 10:31:23 GMT

@nascif_jmp I succeeded!

It had to be put before "graph builder"

tX = 400;
tY = 400;

size = Eval List( {tX, tY} );

gb = Graph Builder( /* ... */ );

And for the Thumbnail :

SendToReport(
    Dispatch(
        {},
        "Graph Builder",
        FrameBox,
        {Set Graphlet(
            Picture(
                Picture Box(
                    fileName = cwd || :Name( "Quantième +n°cuve" )[local:_firstRow] || ".jpg";

                    Show( fileName );
                    Open( fileName, "jpg" );
                )
            ), 
            Thumbnail( size )
        )}
    )
)

Thank you again for your help !

have a good day

Re: Hover label

Emma1 — Thu, 27 Aug 2020 09:17:53 GMT

Hello,
I have another question :
This script is only applied to a chart (which I built at the start)
I have another script (much longer) which allows you to build several charts and display them in the same window and in different tabs
I would like to apply the previous script (which displays the photos of cheeses when we click on a dot) to all my other graphics
Is there an easy way to do this?
Thank you

Re: Hover label

Emma1 — Thu, 27 Aug 2020 11:03:13 GMT

Hello again !

I tried to "paste" my script to display the photos to other graphics, but I still have a problem

When it's graphics with a variable that we have "grouped" at the top (as on the image I am sending you), the photos of the cheeses are displayed only on the left part, not on the others parts.

As if JMP considered that there were two graphics and applied the script only on the left part.

Also, I have some charts that have multiple "Dispatch" inside "Send to report".

In these cases, where can I put my search script for my cheese photos so that it can be applied to my whole graphic?

Thank you for your help, and sorry for all these questions.

Indeed, you helped me a lot the first time ...

Re: Hover label

nascif_jmp — Thu, 27 Aug 2020 15:06:38 GMT

Hello again, @Emma1!

I am glad the Thumbnail size setting is now working for you, I am sorry I didn't give you a full example. But you figured it out, well done!

Just a reminder for other readers, this setting was added in 16.0, so I guess you are using an Early Adopter version.

As for the image displayed on click being too large, keep reading, I added a solution for that in the script below.

Regarding setting the image display graphlet in a graph that uses a Grouping variable, you have already guessed the issue. Under the covers, the graph on each one of the panels - or frames, as we call them - is an individual graph, and the dispatchReport command is only configuring the very first one.

An easy workaround for that is to use the XPath to find all the frames in your composite graph:

gb = dt << Graph Builder( ... );
frames = (gb << report) << xpath("//FrameBox");
Show(NItems(frames)); // one frame(graph) per panel

The frame references are captured in a list. We can now configure all of them at once by sending a setGraphlet message (any message, actually) to the list, which "broadcasts" the message to its members:

frames << Set Graphlet( ... );

The complete script is attached below. Note how we used the scale() message to change the size of the image (I scaled it up, you will probably want to scale it down) before passing it back to be displayed by JMP when you click on the thumbnail image (which still uses the size determined by the Thumbnail() attribute).

img = Open( fileName, "jpg" );
img << scale( scaleValue );

If you want to show a different image when you click on the thumbnail, or carry a different action (opening a web page or running a script) you can pass a JSL fragment to the setGraphlet() named attribute Click().

Re: Hover label

Emma1 — Thu, 27 Aug 2020 15:17:30 GMT

Ok, I'll try your script to apply it to the others of my graphics!
On the other hand, I didn't understand what worked on JMP 16 and not on JMP 15? Can you explain please ?
Indeed, I am testing JMP 16 EA but other users have JMP 15, so I need a script that works with JMP 15 ...

Thank you
Have a good day