Hello,
I have written an application in which you can switch the image by clicking
on a navigation button. It is also possible to zoom into the image. When you
switch to another image the zoom factor keeps at the same value.
Now there is a problem. If the zoom factor is different from 1, the image is
firstly visible in 100% and after a subsecond the image is shown in the
desired zoom setting. This causes a weird flickering as the image is painted
twice.
As there is just one call of newImgView.setSource(imgUrl, "none")
I wanted to know whether this is bug in Laszlo and how I can avoid the
double painting of the image.
Here is a test program, which demonstrates the problem.
When you click a few times on the next and previous button, you'll
(sometimes) see the loaded image in the upper left corner visible in 100%
before it is shown in the desired zooming size (here 200%).
Best Regards,
Marc
-------------------
<canvas height="100%" width="100%">
<library>
<class name="MyImage" extends="view">
<attribute name="active" type="boolean"
value="false"/>
<handler name="onload"><![CDATA[
show();
]]>
</handler>
<method name="show"><![CDATA[
this.animate('opacity', 1, 100);
]]>
</method>
<method name="hide"><![CDATA[
this.animate('opacity', 0, 100);
]]>
</method>
</class>
</library>
<attribute name="currentIndex" value="1" type="number"/>
<simplelayout axis="y" spacing="5" inset="100"/>
<!-- This box contains the buttons for image navigation -->
<view name="functionBox" width="450" x="120" y="0" height="45"
bgcolor="#CCCCCC" options="ignorelayout" align="center">
<simplelayout axis="x" spacing="5" inset="5"/>
<!-- Button first/initial Image -->
<button name="tbbfirst" text="first/init" y="3" width="100"
height="30">
<handler name="onclick"><![CDATA[
canvas.currentIndex = 1;
canvas.loadImage();
]]>
</handler>
</button>
<!-- Button previous Image -->
<button name="tbbprev" text="previous" y="3" width="100"
height="30">
<handler name="onclick"><![CDATA[
if (canvas.currentIndex > 1) {
canvas.currentIndex--;
canvas.loadImage();
}
]]>
</handler>
</button>
<!-- Button next Image -->
<button name="tbbnext" text="next" y="3" width="100"
height="30">
<handler name="onclick"><![CDATA[
if (canvas.currentIndex < 8) {
canvas.currentIndex++;
canvas.loadImage();
}
]]>
</handler>
</button>
<!-- Text field, which shows Image number -->
<text name ="textfield" id="tf" text="image nr: undefined">
</text>
</view>
<view name="imagecontainer" x="${parent.width - this.width}"
width="1000" height="830" bgcolor="#000000">
<MyImage name="image1" id="image1" stretches="both"
x="${parent.width / 2 - this.width / 2}"
y="${parent.height / 2 - this.height / 2}"
visible="false" opacity="0">
<handler name="onload">
// image zooming
image1.setWidth(2 * image1.resourcewidth);
image1.setHeight( 2* image1.resourceheight);
image1.active = true;
image2.active = false;
image1.bringToFront();
image2.unload();
</handler>
</MyImage>
<MyImage name="image2" id="image2" stretches="both"
x="${parent.width / 2 - this.width / 2}"
y="${parent.height / 2 - this.height / 2}"
visible="false" opacity="0">
<handler name="onload">
// image zooming
image2.setWidth(2 * image2.resourcewidth);
image2.setHeight( 2* image2.resourceheight);
image2.active = true;
image1.active = false;
image2.bringToFront();
image1.unload();
</handler>
</MyImage>
</view>
<method name="loadImage"><![CDATA[
var curImgView;
var newImgView;
if (imagecontainer.image1.active) {
Debug.write(" => paint new image in view
image2");
curImgView = imagecontainer.image1;
newImgView = imagecontainer.image2;
} else {
Debug.write(" => paint new image in view
image1");
curImgView = imagecontainer.image2;
newImgView = imagecontainer.image1;
}
var d = new Date();
var t = d.getDate() + "-" + (d.getMonth()+1) + "-" +
d.getFullYear() + "_" + d.getHours()
+ ":" + d.getMinutes() + ":" + d.getSeconds() + "."
+ d.getMilliseconds();
//actualize text of image nr
tf.setText("image nr: "+canvas.currentIndex);
// sources must be set !
if (this.currentIndex == 1) {
var imgUrl =
"http://www.openlaszlo.org/themes/manji/images/ol_logo_small.gif";;
} else if (this.currentIndex == 2) {
var imgUrl =
"http://www.openlaszlo.org/files/ol_java_bot.png";;
} else if (this.currentIndex == 3) {
var imgUrl =
"http://www.openlaszlo.org/files/lsl_action-small.jpg";;
} else if (this.currentIndex == 4) {
var imgUrl =
"http://www.openlaszlo.org/themes/manji/images/ol_logo_small.gif";;
} else if (this.currentIndex == 5) {
var imgUrl =
"http://www.openlaszlo.org/files/ol_java_bot.png";;
} else if (this.currentIndex == 6) {
var imgUrl =
"http://www.openlaszlo.org/files/lsl_action-small.jpg";;
} else if (this.currentIndex == 7) {
var imgUrl =
"http://www.openlaszlo.org/themes/manji/images/ol_logo_small.gif";;
} else if (this.currentIndex == 8) {
var imgUrl =
"http://www.openlaszlo.org/files/ol_java_bot.png";;
}
newImgView.unload();
newImgView.setSource(imgUrl, "none");
Debug.write(" load Image URL:
"+imgUrl.toString());
]]>
</method>
</canvas>
-------------------
![http://www.openlaszlo.org/themes/manji/images/ol_logo_small.gif"](http://www.openlaszlo.org/themes/manji/images/ol_logo_small.gif"){kind=link}
![http://www.openlaszlo.org/files/ol_java_bot.png"](http://www.openlaszlo.org/files/ol_java_bot.png"){kind=link}
![http://www.openlaszlo.org/files/lsl_action-small.jpg"](http://www.openlaszlo.org/files/lsl_action-small.jpg"){kind=link}