[support-michael]

Replace Image Programmatically Tutorial

Introduction
User @mot789 requested assistance for how to create a UI template where at runtime the content of images is replaced with images from different directories based on the context of the application. See the thread here.

Below is a UI design where the image has no src path. The base name of the image is “image.png” but the path to the image will be either:

a-images/image.png
b-images/image.png
c-images/image.png

A button for each directory is added to the UI. Each button is linked to a simple javascript function, e.g., showImageA(), showImageB() and showImageC() that will change the path to images and then update the images in the UI.

See attachment image-swap-example-design.png

Step-1: layout your UI in the Design Center
– Placing and configure your images
— To keep it simple my design includes a single 200×200 placeholder image. I’ll replace this image later.
– Name the image(s) in the Properties Inspector with a unique descriptive ID according to their role

Step-2: configure 1 or more widgets the responsibility to change the src of the image(s)
– In this example I laid out 3 buttons. Each button when clicked will update the main image.
– Assign the Link property of each button the name of the javascript function that will be called when clicked. We will create the javascript functions in Step-3

Note: Prefix the javascript function name with “javascript:”. For example, if the function is updateImages() then enter javascript:updateImages() in the button’s Link property.

See attachment image-swap-example-design1.png

Step-3: Generate Code
– Use “Run in Test Center” button to generate the HTML, CSS and JavaScript files. The code will be created in a subdirectory under your design file. For example if I save my design file at c:\mobile\swap-image.mobi then look for the files to be generated at c:\mobile\swap-image-export\ directory

Step-4: Setup Images
– I created 3 unique images, 200×200 pngs and placed each in it own directory. Remember part of this exercise is to dynamically replace the placeholder image in our templated design with an image by changing only the path to the folder containing the image. Here are the subdirectories under my top level c:\mobile\swap-image-export

a-images/image.png
b-images/image.png
c-images/image.png

Step-5: Create JavaScript functions to load images
Here is the code I created:

//--------------------------------------------
var imagePath = 'a-images';

function showImageA() {
  imagePath = 'a-images';
  updateImages();
}
  
function showImageB() {
  imagePath = 'b-images';
  updateImages();
}

function showImageC() {
  imagePath = 'c-images';
  updateImages();
}  
  
//Find the image widget with id=m1-swap-images-image1 and 
// update it image from the directory defined by imagePath variable
function updateImages() {
  $('#m1-swap-images-image1').attr('src',(imagePath + '/image.png'));
}

Here is the code as I edited it in the Test Center’s source code editor.
See attachment image-swap-example.png

Download the attached source code and give it try. Please provide feedback if you have any issues or ideas for improvement. See attachment dynamic-image-path.zip

Attachments:

You must be logged in to view attached files.

[leighw]

Can you that this would be the method used to change the image of an image button?

Searching elsewhere in the internet suggests it would be but I am having trouble getting it to work.

I can get your code to work and have changed the function to reference my image button named bit1 as below.

function updateImages() {
$(‘#m1-Dipswitch-bit1’).attr(‘src’,(imagePath + ‘/image.png’));
}

Any suggestions would be appreciated.

Thanks

[support-michael]

@leighw

Updating an ImageButton’s image is a little different than changing the src attribute as in a simple image widget. ImageButton is implemented in CSS and takes advantage of the WebKit browser’s cool extended styling support (-webkit-border-image). In the generated HTML file you will find a simple <div> element that the placeholder where the image button will render. So you need to look up the id of this div in the generated HTML file. Then in your javascript function do something like the following snippet.

newImagePath= "replace-with-your-image-path";

//myImageDivId - look in html file for div with the id of the imagebutton 
$('#myImageDivId').css('-webkit-border-image', 'url(' + newImagePath' + ) 1 1 1 1 stretch stretch')

[leighw]

Excellent thanks for the swift reply, works a treat.

[fbod383]

is there a way to get these to swap images every few seconds? or a random image everytime the screen loads? I’m thinking this could be a work around for ads in my app. Thoughts? Suggestions?

[support-octavio]

Hi fbod383,

>is there a way to get these to swap images every few seconds?
Yes, you can use JavaScript Timing Events to execute this code and change the img src after a specified time-interval.

Here are a few examples that can be helpful to you: http://www.w3schools.com/js/js_timing.asp

[fbod383]

excellent. thanks

[hansiurpils]

Hi there,

I’m trying to change an image button dynamically, but it doesn’t work.
Could anyone post a working example?

Here’s my coding in the *custom.js File:

newImagePath = ‘muster2/muster.jpg’;
$(‘#m1-play-muster1_1’).css(‘-webkit-border-image’, ‘url(‘ + newImagePath’ + ) 1 1 1 1 stretch stretch’ );

Thank you very much
Hansi

[support-octavio]

Hi hansiurpils,

Please try changing the next line

$(‘#m1-play-muster1_1’).css(‘-webkit-border-image’, ‘url(‘ + newImagePath’ + ) 1 1 1 1 stretch stretch’ );

for this one:

$(‘#m1-play-muster1_1’).css(‘-webkit-border-image’, ‘url(‘ + newImagePath + ‘ ) 1 1 1 1 stretch stretch’ );

There was a syntax error. This should works.

[hansiurpils]

Hi Octavio,

it works perfect. Thank you very much.

Do you have any idea, to get the actual URL from the Image Button?

Regards
Hansiurpils

[support-octavio]

Hi hansiurpils,

The next snippet should works.

var borderImg = $('#m1-GetURLFromImageButton-image1').css('-webkit-border-image');
var url = borderImg.match( "url\\s*\\\\((.*)\\\\)" )[1]

[adhutton]

Hi Wayne –

Would it be possible to use this (or similar) method to change page content instead of images?

I would like to have a fixed menu at the bottom of my app with 3 or 4 menu buttons which would change the ‘Main frame’ page content upon a button click?

Please let me know.

Cheers – Andrew

[support-octavio]

Hi Andrew,

Unfortunately this is not possible at this time. We plan to provide a much more robust design support for panel level content.

[adhutton]

Thanks Octavio.

I notice this type of question has been raised a few times in these forums and the reply has been ‘Coming soon’.

When will that actually be?

Any timescales please?

Cheers- Andrew

[support-octavio]

Hi Andrew,

Our engineering team is putting together a project plan now. We can not commit to any timeframe until we know the costs/risks. That info will help us establish the priority of this feature set relative to the many other outstanding feature requests.

[Author]

Posts