[Laszlo-user] Flickering on onload of View

[Marc Bachstein]

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>

-------------------