Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
gotstu
Posts: 3
Registered: ‎03-24-2010
My Device: 9700 Bold
My Carrier: Rogers

Image swapping in browser

Hi All,

 

I am trying to figure out how to do something I have already achieved onec but now have unfortunately forgotten.:smileyhappy:

 

Here is my background info.

 

I am using a BB 9700 Bold.

 

I am trying to create a simple web page that will display the screen of an another embedded device.

 

For all intensive purposes this is simply a png that updates every second.

 

The web page has an img tag that I am trying to specify its src attribute via Javascript.

 

My first attempt at this was to simply make the url to the image unique each time and then on the onload event of the image just rebuild a unique url to the image with a time stamp attached. For instance the a src value would be.

 

http://server/screen.png?t=1293092929

 

This tecnique works but I do not get seamless transitions between each image swap.

 

I have tried setting headers on the image to never be cached and that has not worked either.

 

So the question is this. How can I load an image and then once that image is loaded immediately start downloading another and then seamlessly swap it out while downloading the next and so on.

 

Again, currently the only way I have this working is with a pause in between. Of course the above technique works on ALL pc/mac/linux browsers just fine just not ANY of the browsers on the BB. I had this working once but I have forgotten how I did it.

 

Thanks for reading hope there is someone that can assist.

 

PS It works on an iPhone :smileysad:

 

 

Please use plain text.
Developer
abarber
Posts: 189
Registered: ‎08-13-2008
My Device: Not Specified

Re: Image swapping in browser

Check out his test page.

image swap test

 

 

I did something similar a while back.

It will give you some ideas of how to do it.

 

cheers

 

Andrew

Please use plain text.
Developer
abarber
Posts: 189
Registered: ‎08-13-2008
My Device: Not Specified

Re: Image swapping in browser

The example in the post above allows backwards compatabililty to v < 4.6

 

 

I found a better example which is seamless on the bold simulator v5.0.

 

image swap v > 4.6

 

 

Cheers

 

Andrew

Please use plain text.
New Contributor
gotstu
Posts: 3
Registered: ‎03-24-2010
My Device: 9700 Bold
My Carrier: Rogers

Re: Image swapping in browser

Hi Andrew,

 

Thanks for the suggestion. I cannot help that there is a more elegant method.

 

I also only want to have 1 image and not 2 images. I had this working before and I just cannot remember EXACTLY what I did. I pretty sure it took advantage of XHR to give me some indication that the image was ready for me to swap to.

 

I do have 2 images and have an onload event and it is hidden and then when loaded show it and hide the other one....

 

Anyone else?

 

THanks

Please use plain text.
New Contributor
gotstu
Posts: 3
Registered: ‎03-24-2010
My Device: 9700 Bold
My Carrier: Rogers

Re: Image swapping in browser

Hi,

 

I figured this out. It is not what I had originally done but it works very nicely.

 

Essentially I am taking advantage of the fact that the onload even fires even when an image display is set to none. I have a web page that has an image tag pointing to the first screen. Then onload of the body I create a second image in JS and give it an onload event that will 

 

1)remove the first image

2)create a new one with a unique image name

3)show the second 1

 

essentially through the onload event I am constantly downloading a new image.

 

Here is the code.

 

function createImage(id) { var n = (id == 1) ? 2 : 1; var theDiv = document.getElementById('theDiv'); var d = new Date(); var ms = (d.getTime() - d.getMilliseconds()) / 1000; var imageName = 'screen.ashx?t=' + ms; var theScreen = new Image(); theScreen.setAttribute('onload', 'swap(' + n + ');'); theScreen.setAttribute('style', 'display:none;'); theScreen.src=imageName; theScreen.id = 'theScreen' + id; theDiv.appendChild(theScreen); } function swap(id) { var n = (id == 1) ? 2 : 1; var theDiv = document.getElementById('theDiv'); var theScreen1 = document.getElementById('theScreen' + id); theDiv.removeChild(theScreen1); createImage(id); var theScreen2 = document.getElementById('theScreen' + n); theScreen2.style.display = 'block'; }

Please use plain text.