topic Re: Display PNG image from URL into a Wafer Map in Discussions

Display PNG image from URL into a Wafer Map

BiX — Sun, 11 Jun 2023 11:29:37 GMT

Hello,

I would like to see a wafermap from CSV file ... ok

but I would replace each square by an PNG image from URL defined into the same CSV file ...

Do you have some ideas how to do ???

Re: Display PNG image from URL into a Wafer Map

jthi — Thu, 24 Nov 2022 10:51:17 GMT

You can try to use images as markers Using JMP > JMP Reports > Use Markers in Graphs > Use Images as Markers after you have the images in the data table. And how to get those images depends a lot on how your urls work. You might be able to use Expression column with formula like Open(url). Getting the sizes right might require some tinkering.

Names Default To Here(1);

dt = New Table("Untitled",
	Add Rows(1),
	New Column("url",
		Character,
		"Nominal",
		Set Values(
			{
			"https://www.jmp.com/en_us/download-jmp-free-trial/_jcr_content/par/contenttargetingcont/par_off/styledcontainer_cdbe/par/image_f589.img.png/1520449222936.png"
			}
		)
	),
	New Column("Column 2", Expression, "None", Formula(Open(:url)), Use for Marker)
);

gb = dt << Graph Builder(
	Size(496, 466),
	Show Control Panel(0),
	Variables(X(:url)),
	Elements(Points(X, Legend(2)))
);

It might also be a good idea to prevent the images from being downloaded again if they have been downloaded once

Re: Display PNG image from URL into a Wafer Map

Craige_Hales — Thu, 24 Nov 2022 12:03:17 GMT

might give you some ideas.

JMP has three ways to think about images.

put the images into graphs, using the X and Y axes to position and scale and the order of the images to determine what is on top.
use the image functions to load and crop and size image objects (which can be saved as PNG or JPG when done.)
move the image objects into matrices and use matrix operations to manipulate the pixels. Move back to image objects to save a picture.

You'll want to use (1) if you are building a graph already. Look at the second answer, around here:

// you could use a loop to add a bunch of images to the framebox
// <<AddImage adds at the FRONT of the display list. The first 
// image added will be drawn last, on top of the 2nd image added.
gb[framebox(1)]<<Add Image( image( overlay2 ), bounds( top( 50 ), Left( 155 ), bottom( 50+yOverlay2Size ), Right( 155+xOverlay2Size + 1 ) ) );
gb[framebox(1)]<<Add Image( image( overlay1 ), bounds( top( 50 ), Left( 20 ), bottom( 50+yOverlay1Size ), Right( 20+xOverlay1Size + 1 ) ) );
gb[framebox(1)]<<Add Image( image( original ), bounds( top( 0 ), Left( 1 ), bottom( ySize ), Right( xSize + 1 ) ) );

Re: Display PNG image from URL into a Wafer Map

hogi — Thu, 24 Nov 2022 17:29:19 GMT

To use the images as shapes for the data points, you can also specify the column via Set Shape Column in the GraphBuilder command.

Or later, by right-clicking into the GraphBuilder window and slecting Set Shape Column ... from there.

This allows to use different columns for different plots - and have some plots with standard markers.

A great way to get the images into the data table is explained here:
https://community.jmp.com/t5/Discovery-Summit-Americas-2020/Images-in-Data-Tables-and-related-JSL-Tools-2020-US-30MP-585/ta-p/281528

If the links are listed in a column, it's just one click (Imagetable_Import_Images) and they are automatically loaded.

Open( "$SAMPLE_DATA/Big Class Families.jmp" );

New Column( "X", Numeric, "Continuous", Format( "Best", 12 ), Formula( Mod( Row() - 1, 7 ) ), Set Selected );
New Column( "Y", Numeric, "Continuous", Format( "Best", 12 ), Formula( Floor( (Row() - 1) / 7 ) ), Set Selected );

Graph Builder(
	Size( 511, 500 ),
	Show Control Panel( 0 ),
	Variables( X( :X ), Y( :Y ) ),
	Elements( Points( X, Y, Legend( 3 ), Set Shape Column( :picture ) ) ),
	Dispatch( {}, "400", ScaleBox, {Legend Model( 3, Properties( 0, {Marker Size( 10 )}, Item ID( "Y", 1 ) ) )} )
)

Re: Display PNG image from URL into a Wafer Map

BiX — Tue, 29 Nov 2022 14:31:23 GMT

Tous, Merci de vos propositions. je vais les essayer.

je vais deja essayer de faire apparaitre les images dans une colonne de ma table car je ne suis pas sur du format de l URL avec un chemin type windows (ex: //server.com/directory/image.png)

si vous avez des propositions de codes pour l affichage d image dans une data base JMP ... je suis interesse.

Merci

Re: Display PNG image from URL into a Wafer Map

BiX — Fri, 02 Dec 2022 13:57:02 GMT

Desole, je suis debutant et ne reussi pas, meme avec vos conseils, a realiser ce graph, avec les images et le fichier csv en entree. je renouvèle ma demande d aide. merci par avance

Re: Display PNG image from URL into a Wafer Map

jthi — Fri, 02 Dec 2022 14:30:16 GMT

What is causing issues for you? Have you managed to get the images correctly to data table?

Re: Display PNG image from URL into a Wafer Map

BiX — Fri, 02 Dec 2022 16:29:11 GMT

Hi jthi,

When I execute my script, I don't obtain the wafermap with all Pokemon Images ...

Re: Display PNG image from URL into a Wafer Map

hogi — Fri, 02 Dec 2022 16:35:43 GMT

Try this:

After importing the csv file with the X/Y data and the file paths, use the add-in from
https://community.jmp.com/t5/Discovery-Summit-Americas-2020/Images-in-Data-Tables-and-related-JSL-Tools-2020-US-30MP-585/ta-p/281528

by clicking on

Last step: generate the GraphBuilder Graph and load the images via:

Re: Display PNG image from URL into a Wafer Map

jthi — Fri, 02 Dec 2022 17:07:37 GMT

Leave Filename column as Character. I would also suggest using full paths of the images as it makes it easier to load the images (if you cannot do that, it might be easiest to use Get Default Directory() or Convert File Path() to build those for image loading column). Also using images as markers will make them (most likely) dependent on the graph size and used marker size. If all images are same size and you don't need graph builder, building custom display can also be an option.

My images, csv and images are in Downloads/pokemons folder

I did some path cleanup in the script for paths

Names Default To Here(1);
dt = Open(
	"$DOWNLOADS/pokemons\Wafermap_pokemon_2.csv",
	Import Settings(
		End Of Line(CRLF, CR, LF),
		End Of Field(Comma, CSV(1)),
		Strip Quotes(0),
		Use Apostrophe as Quotation Mark(0),
		Use Regional Settings(0),
		Scan Whole File(1),
		Treat empty columns as numeric(0),
		CompressNumericColumns(0),
		CompressCharacterColumns(0),
		CompressAllowListCheck(0),
		Labels(1),
		Column Names Start(1),
		Data Starts(2),
		Lines To Read("All"),
		Year Rule("20xx")
	)
);

dt:XCoord << Data type(Numeric) << Set Modeling Type(Ordinal);
dt:YCoord << Data type(Numeric) << Set Modeling Type(Ordinal);

// reduce Filename to only filename OR use full filepath and modify Images column's formula
dt:Filename << Set Each Value(Word(-1, :Filename, "\"));
Show(Get Default Directory());

// This can be modified to get borders and so on if needfed
dt << New Column("Images", Expression, None, << Set Each Value(
	Open(Get Default Directory() ||"images/" || :Filename, png);
));

gb = dt << Graph Builder(
	Size(522, 451),
	Show Control Panel(0),
	Variables(X(:XCoord), Y(:YCoord)),
	Elements(Points(X, Y, Legend(3), Set Shape Column(:Images))),
	SendToReport(
		Dispatch(
			{},
			"Graph Builder",
			FrameBox,
			{Marker Size(15), Marker Drawing Mode("Normal")}
		)
	)
);

dt << New Column("ImagesWithBorder", Expression, None, << Set Each Value(
	Local({bb, img},
		bb = Border Box(Left(15, Empty()), Right(15, Empty()), Top(15), Bottom(15),
			img = Picture Box(Open(Get Default Directory() ||"images/" || :Filename, png))
		);
		bb << Background Color("Orange");
		img << Background Color("White");
		bb << Get Picture;
	);
));

gb = dt << Graph Builder(
	Size(457, 714),
	Show Control Panel(0),
	Variables(X(:XCoord), Y(:YCoord)),
	Elements(Points(X, Y, Legend(3), Set Shape Column(:ImagesWithBorder))),
	SendToReport(Dispatch({}, "Graph Builder", FrameBox, {Marker Size(30), Marker Drawing Mode("Normal")}))
);

Data table:

Without borders and marker size as 15

Borders and marker size 30:

If I modify graph size the marker size won't keep up:

Re: Display PNG image from URL into a Wafer Map

BiX — Mon, 05 Dec 2022 09:11:57 GMT

hi Jthi, thanks for your help.

But I obtain circles instead pokemon images .... a graph parameter to change ?

Re: Display PNG image from URL into a Wafer Map

jthi — Mon, 05 Dec 2022 09:18:40 GMT

Graph builder might be plotted from wrong data table. Based on window names: graph builder is using table Wafermap_pokemon_2 and data table is which is visible is Wafermap_pokemon_2 2). Maybe Wafermap_pokemon_2 data table doesn't have Image column properly set?

Re: Display PNG image from URL into a Wafer Map

BiX — Tue, 06 Dec 2022 08:48:03 GMT

Hi Jthi,

thanks again.

Sorry, I have always point or circle instead of pokemon images.

I suspect the command "Set Shape Column(:Images))" is not functional on my side ? (in V15.0.0 or V15.2.1)

Re: Display PNG image from URL into a Wafer Map

jthi — Tue, 06 Dec 2022 09:54:51 GMT

I'm not sure when it has been implemented (I'm using JMP16). You could try using the Images column as Marker column I suggested in my first message in this thread. Hopefully that works (you will have to remove that part from graph builder in that case I would think).

Re: Display PNG image from URL into a Wafer Map

John_Powell_JMP — Tue, 06 Dec 2022 13:34:07 GMT

@jthi has a good suggestion. Set Use for Marker was implemented in JMP 14 according to the Scripting Index:

When using a function for the first time, it's good to look it up in the Scripting Index under the Help menu.

You may also want to turn on the embedded log in the script editor, (Right-click > Show Embedded Log) so you can see errors when you run your script.

Hope this helps,

~John

Re: Display PNG image from URL into a Wafer Map

BiX — Tue, 06 Dec 2022 14:21:18 GMT

Thanks John,

I try to put in place your proposal inside Jthi's script without success ...

Please could you propose to me your update ?

rgds

Names Default To Here(1);
dt = Open(
"$DOWNLOADS/pokemons/Wafermap_pokemon.csv",
Import Settings(
End Of Line(CRLF, CR, LF),
End Of Field(Comma, CSV(1)),
Strip Quotes(0),
Use Apostrophe as Quotation Mark(0),
Use Regional Settings(0),
Scan Whole File(1),
Treat empty columns as numeric(0),
CompressNumericColumns(0),
CompressCharacterColumns(0),
CompressAllowListCheck(0),
Labels(1),
Column Names Start(1),
Data Starts(2),
Lines To Read("All"),
Year Rule("20xx")
)
);

dt:XCoord << Data type(Numeric) << Set Modeling Type(Ordinal);
dt:YCoord << Data type(Numeric) << Set Modeling Type(Ordinal);

// reduce Filename to only filename OR use full filepath and modify Images column's formula
dt:Filename << Set Each Value(Word(-1, :Filename, "\"));
Show(Get Default Directory());

// This can be modified to get borders and so on if needfed
dt << New Column("Images", Expression, None, << Set Each Value(
Open(Get Default Directory() ||"images/" || :Filename, png);
));

height = 20;
weight = 20;

gb = dt << Graph Builder(
Size(522, 451),
Show Control Panel(0),
Variables(X(:XCoord), Y(:YCoord)),

:Images << Set Use For Marker;
Bivariate( Y(:height),X(:weight) );
Bivariate[]
);

Re: Display PNG image from URL into a Wafer Map

John_Powell_JMP — Tue, 06 Dec 2022 15:45:38 GMT

Hi @BiX ,

The example I showed was for use with the Big Class Families.jmp sample data set. 'height', 'weight,' and 'picture' are columns in that data set, but are not in the table you create in your script.

To use 'Set Use For Marker' in your script, you need to send the 'Set Use For Marker' message to the 'Images' column that you create in your script before the Graph Builder function.

To do this, replace everything starting with 'height = 20;' to the end with the following:

:Images << Set Use For Marker;
gb = dt << Graph Builder(
	Size( 522, 451 ),
	Show Control Panel( 0 ),
	Variables( X( :XCoord ), Y( :YCoord ) ),
	Elements( Points( X, Y, Legend( 1 ) ) ),
	SendToReport(
		Dispatch(
			{},
			"Graph Builder",
			FrameBox,
			{Marker Size( 15 ), Marker Drawing Mode( "Normal" )}
		)
	)
);

Notice that I added back the SendToReport code to set the Marker Size to 15 that you had earlier in this post. If you change the size of the graph, you may want to change the Marker Size too.

Please let us know how that works out for you.

Thanks,

~John

Re: Display PNG image from URL into a Wafer Map

BiX — Wed, 07 Dec 2022 07:46:21 GMT

Hi John,

Thanks a lot !! Superbe !!

Thanks a lot Jthi, for your help and your solution for JMP > v16

Solution for JMP v15 below

Merry Christmas

Xavier

Script JMP V15 :

// JMP V15 
Names Default To Here(1);
dt = Open(
	"$DOWNLOADS/pokemons/Wafermap_pokemon.csv",
	Import Settings(
		End Of Line(CRLF, CR, LF),
		End Of Field(Comma, CSV(1)),
		Strip Quotes(0),
		Use Apostrophe as Quotation Mark(0),
		Use Regional Settings(0),
		Scan Whole File(1),
		Treat empty columns as numeric(0),
		CompressNumericColumns(0),
		CompressCharacterColumns(0),
		CompressAllowListCheck(0),
		Labels(1),
		Column Names Start(1),
		Data Starts(2),
		Lines To Read("All"),
		Year Rule("20xx")
	)
);

dt:XCoord << Data type(Numeric) << Set Modeling Type(Ordinal);
dt:YCoord << Data type(Numeric) << Set Modeling Type(Ordinal);

// reduce Filename to only filename OR use full filepath and modify Images column's formula
dt:Filename << Set Each Value(Word(-1, :Filename, "\"));
Show(Get Default Directory());

// This can be modified to get borders and so on if needfed
dt << New Column("Images", Expression, None, << Set Each Value(
	Open(Get Default Directory() ||"images/" || :Filename, png);
));

:Images << Set Use For Marker;
gb = dt << Graph Builder(
	Size( 522, 451 ),
	Show Control Panel( 0 ),
	Variables( X( :XCoord ), Y( :YCoord ) ),
	Elements( Points( X, Y, Legend( 1 ) ) ),
	SendToReport(
		Dispatch(
			{},
			"Graph Builder",
			FrameBox,
			{Marker Size( 15 ), Marker Drawing Mode( "Normal" )}
		)
	)
);