Display PNG image from URL into a Wafer Map

[#1]

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 ???

[#2]

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

[#3]

Add Text to a Picture  might give you some ideas.

JMP has three ways to think about images.

1. 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.
2. use the image functions to load and crop and size image objects (which can be saved as PNG or JPG when done.)
3. 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 ) ) ); 

[#4]

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-To...

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 ) ) )} )
)

[#5]

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

[#6]

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

[#7]

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

[#8]

Hi jthi,  

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

[#9]

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-To... 

by clicking on 

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

[#10]

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

View more...

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: