Which version of Openlaszlo are you using? I don't see any flickering
when I run it in the "top of tree" dev branch. Have you
tried a recent nightly build ? Perhaps some issue has been fixed with
image display recently?
Note, I had to modify your example to set visible to true on the image
views, otherwise it remained false, since it appears no other code was
setting it to visible.
On Thu, Mar 13, 2008 at 7:29 AM, Marc Bachstein <[EMAIL PROTECTED]> wrote:
> 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>
>
> -------------------
>
>
>
--
Henry Minsky
Software Architect
[EMAIL PROTECTED]