Can images be copied at run time?

[JMW]

i.e. is there some way of doing the equivilent of:
Set Image: MyImageWidget = MyOtherImageWidget

?

[huban]

The only way I can think of would be to load all the images you need into a repeater and then use logic to set the value of the target image to the Item.value of an image in the repeater.

[JMW]

Yes, that’s the only thing I had tried that worked - but it requires the repeater to “know” about the target image widget. I wanted one step further than that, where a client of the repeater could get that image into other parts of the UI at will. Unfortunately, assigning [[item.image]] to a variable that could be assigned elsewhere in the application simply doesn’t work.

Any ideas folks?

[huban]

I’d never tried to assign an image to a variable before. As you said, it seems to can’t assign an image to a variable, but it looks like you can assign a path to an image: Image_To_Variable.rp (4.2 MB)

This method is pretty brittle. it uses [[Item.Index]] as part of the path so if you sort or filter the repeater, the paths will break. It’s possible to use Javascript injection as a stronger method to get the path but was trying to stay in native Axure.

[JMW]

WOAH! Hang on there… Where did that “path” come from??

is images/[pagename]/p[digit].png a path of your own or something related to Axure as a system?

[JMW]

OK - I’ve kinds filled out the gaps myself now…

Well this is pretty amazing stuff. Thank-you so much for this; it’s going to massively improve the performance of my prototype, previously dogged by repeating dynamic panels to switch images and getting terribly slow in the process.

Thanks loads for this - it’s a massive help.

[JMW]

Ah - this doest work when published - only works with local preview

What would I need to change to get this to work when published on axshare (or an enterprise server?)

Thanks in advance.

[huban]

Oops… Yeah. I probably should have included a few more details.

It looks like you figured it out but for posterity:

I created the repeater, added the images to it, and launched the preview. I used the browser tool to inspect the image elements to find their “src” attribute. In my case it looked like this:

img id=“u2-3_img” class=“img u2_img” src=“images/page_1/p0.png” style=“border-radius: 0px; width: 196px; height: 196px;”

The “p0.png” incremented for each image so that’s why I used [[Item.Index]] as part of generating the paths. (It’s also the reason why sorting or filtering the list will cause things to break; the index has changed but the file name for the image hasn’t.)

I should also mention that if you’re going to use [[PageName]] as part of the path, you need to make sure the page in Axure has a URL-friendly name.

[huban]

I deployed my sample project to our enterprise web server and it seems to be working fine so I don’t know why it’s not working for you.

If you inspect the images in the deployed project are they the same as when you previewed? What’s happening? Are the images not loading at all or is it just the path part that’s not working?

[JMW]

For me, local preview is fine but it doesn’t work on either enterprise or the public Axure cloud.
Hopefully if you try it on the public Axure cloud it won’t work.
(I’ve never wished that something doesn’t work for someone before! )

[huban]

It looks like Axure Cloud stores images uploaded as part of the project in a separate location than the HTML files. (Inspect an image element in the cloud project and look at the “src” attribute; you’ll see what I’m talking about.)

Things get a bit more complicated now.

Images get assigned a random token every time the cloud project is updated so using native Axure functionality to build out a relative path won’t work. You’ll have to use JavaScript to get an image’s “src” attribute and assign it to the global variable: Image_To_Variable.rp (7.1 MB)

Unless you’re interested, I’ll spare you the details. The short version is that you can use the “Open Link” > “Link to external URL” action to inject JavaScript code and access Axure’s JQuery API library. (This is the best single source I’ve found about it: http://dejongh.dk/wiki/doku.php?id=interaction:axure_javascript, but there are examples all over the forums.)

Because the information you need is on a widget inside a repeater, the JavaScript has to be triggered by something inside it as well. (I chose the image widget’s OnRotate event). When it executes, the code grabs the widget’s “id” attribute and uses it to find the “img” element and get it’s “src”.

[JMW]

Well that’s truly awesome and works a treat both on Axure Cloud and on the Enterprise Server here.

Do I take it that the call to Set Current Page = 1 is a bit of magic to cause a reload (and thus retrigger “Item Loaded”) across the whole repeater dataset?

[JMW]

If I could be so bold, could I ask one more (very related) question?

Do you know what would be the code to put within a Click event on a regular Image widget, to set a global variable to the URL of that image’s source?

I know it would be derrived from what you’ve got in that image Moved event, but there’s no way I can work that out for myself.

Thanks in advance.

[huban]

You’re right about the “Set Current Page” action. Marking/Unmarking a row doesn’t refresh a repeater so you need some benign way to force the repeater to run through its logic again.

If the image isn’t in a repeater thing’s get a lot simpler because there aren’t multiple elements with the same widget name. Remove all the variable declarations and change the last line to:

$axure.setGlobalVariable(“gbl_ImageVariable”,$axure(’@[[This.name]]’).$().find(“img”).attr(“src”));

[JMW]

Thank-you this is a great help.

I found I had to do a couple of things to get the above to work properly:

1. Replace the “smart quotes” - single and double (which this forum seems to think is a ‘helpful’ thing to do to people’s code examples) and replace them with normal single and double-quotes
2. Add the obligatory Wait(0) command immediately afterwards if I want to make use of the global straight away

Thanks again - I’ve looked at Sam’s website before (the link you’ve posted above) and made use of his JavaScript stuff in things I’ve done (such as enabling mousewheel on a panel) but I do really need to put some effort into learning the language itself some time.

Best rgds,
Jeremy.

[JMW]

Here is the solution - thanks huban!

Image Copying.rp (64.3 KB)

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.