Load various images from URL to one Image Element?

Work in progress
1

I have an Image Element used as a placeholder to display whatever image is coded into a button’s function, this is part of a common information display screen layout.

When a button is clicked, I want an image from a URL loaded into the Image Element (p_Image).

Roughly:

var p_Image = this.app.root.findByName('p_Image ');

Button1.element.on('mouseup', function()   {
p_Image texture (or whatever) = http://somesite.com/image1.png;
   }

Button2.element.on('mouseup', function()   {
p_Image texture (or whatever) = http://somesite.com/image2.png;
   }

So if Button One is pressed, the image specific in its function will appear in the p_Image Image Element, Button Two has it’s own image to display there as well and so on…

The only examples I see are where an entity has a Load Image script and a single image url is declared for it, in my case I need to load a variety of images specified in a button’s click function.

Also, is it possible to scale these images to the element as needed?

There must be a way to do this, any guidance is very appreciated, thanks!

2

Do they need to come from a specific site or do you just want to be loaded on demand?

3

Eventually they would come from a specific site, but for now just load images on demand to the Image Element p_Image.

I am trying to re-create a version of market/industry based product selectors similar to ones I created in HTML5 like this: http://corpapps.parker.com/interactive-media/industry/transportation/rail-train-industrial-transportation-products/united-states/ using your platform to demo to my marcomm team to evaluate.

We’re looking into VR style marketing experiences and I think this platform has a lot of potential but if I can get this to do something the team is familiar with that would be a good starting point.

I attached the LoadExternalImage file from https://playcanvas.com/editor/code/609654?tabs=18677951 to my p_Image element in hopes I can somehow send a url string to it’s imageUrl, so I added a Material to it, which has a product image placeholder but it made the p_Image invisible… I expected it to show the image in the material assigned to it.

Thanks!

4

If it’s from an external site, you will need use https://developer.playcanvas.com/en/api/pc.AssetRegistry.html#loadFromUrl

You can create a texture asset and that asset can be used by the image element. You can then resize the image element to match the ratio dimensions of the texture.

You would need to have your own system of managing the URLs, be it data that you enter in script attributes in the Editor or have some JSON that maps buttons/sections to URLS.