MBachstein
04-29-2008, 06:57 AM
Hello,
in this application you can switch the current image. The images are painted in double size. Herfore the resourcewidth and resourceheight are read out.
My problem is that the resourcewidth and resourceheight sometimes don't match the "real" resourcewidth and resourceheight.
If you start the application and click through the image series, you'll see that e.g. image 7 is distorted.
Sometimes resourcewidth and resourceheight keep the same value of the previous image.
Can anybody tell me, what I do wrong?
<canvas debug="true" >
<class name="MyImage" extends="view">
<attribute name="active" type="boolean" value="false"/>
<attribute name="lastAnim" type="expression" value="null" />
<method name="show"><![CDATA[
if (this.lastAnim != null && this.lastAnim.isactive) {
this.lastAnim.stop();
this.setAttribute('opacity', 0);
}
this.lastAnim = this.animate('opacity', 1, 10);
]]>
</method>
<method name="hide"><![CDATA[
if (this.lastAnim != null && this.lastAnim.isactive) {
this.lastAnim.stop();
}
this.lastAnim = this.animate('opacity', 0, 10);
]]>
</method>
</class>
<attribute name="currentIndex" value="0" type="number"/>
<simplelayout axis="y" spacing="5" inset="100"/>
<!-- This box contains the buttons for image navigation -->
<view name="functionBox" width="450" 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" />
</view>
<view name="imagecontainer" x="100" width="1000" height="830" bgcolor="#000000">
<MyImage name="image1" id="image1" stretches="both"
align="center" valign="middle" visible="true" opacity="0" >
<handler name="onload">
// image zooming
Debug.write("Resourcegröße: "+image1.resourcewidth+"x"+image1.resourceheight);
image1.setWidth(2 * image1.resourcewidth);
image1.setHeight(2 * image1.resourceheight);
Debug.write("Imagegröße: "+image1.width+"x"+image1.height);
image1.active = true;
image2.active = false;
image1.show();
image2.hide();
</handler>
</MyImage>
<MyImage name="image2" id="image2" stretches="both"
align="center" valign="middle" visible="true" opacity="0" >
<handler name="onload">
// image zooming
Debug.write("Resourcegröße: "+image2.resourcewidth+"x"+image2.resourceheight);
image2.setWidth(2 * image2.resourcewidth);
image2.setHeight(2 * image2.resourceheight);
Debug.write("Imagegröße: "+image2.width+"x"+image2.height);
image2.active = true;
image1.active = false;
image2.show();
image1.hide();
</handler>
</MyImage>
</view>
<method name="loadImage"><![CDATA[
if (imagecontainer.image1.active) {
var curImgView = imagecontainer.image1;
var newImgView = imagecontainer.image2;
} else {
var curImgView = imagecontainer.image2;
var newImgView = imagecontainer.image1;
}
//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.setSource(imgUrl);
]]>
</method>
</canvas>
Kind Regards,
Marc
in this application you can switch the current image. The images are painted in double size. Herfore the resourcewidth and resourceheight are read out.
My problem is that the resourcewidth and resourceheight sometimes don't match the "real" resourcewidth and resourceheight.
If you start the application and click through the image series, you'll see that e.g. image 7 is distorted.
Sometimes resourcewidth and resourceheight keep the same value of the previous image.
Can anybody tell me, what I do wrong?
<canvas debug="true" >
<class name="MyImage" extends="view">
<attribute name="active" type="boolean" value="false"/>
<attribute name="lastAnim" type="expression" value="null" />
<method name="show"><![CDATA[
if (this.lastAnim != null && this.lastAnim.isactive) {
this.lastAnim.stop();
this.setAttribute('opacity', 0);
}
this.lastAnim = this.animate('opacity', 1, 10);
]]>
</method>
<method name="hide"><![CDATA[
if (this.lastAnim != null && this.lastAnim.isactive) {
this.lastAnim.stop();
}
this.lastAnim = this.animate('opacity', 0, 10);
]]>
</method>
</class>
<attribute name="currentIndex" value="0" type="number"/>
<simplelayout axis="y" spacing="5" inset="100"/>
<!-- This box contains the buttons for image navigation -->
<view name="functionBox" width="450" 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" />
</view>
<view name="imagecontainer" x="100" width="1000" height="830" bgcolor="#000000">
<MyImage name="image1" id="image1" stretches="both"
align="center" valign="middle" visible="true" opacity="0" >
<handler name="onload">
// image zooming
Debug.write("Resourcegröße: "+image1.resourcewidth+"x"+image1.resourceheight);
image1.setWidth(2 * image1.resourcewidth);
image1.setHeight(2 * image1.resourceheight);
Debug.write("Imagegröße: "+image1.width+"x"+image1.height);
image1.active = true;
image2.active = false;
image1.show();
image2.hide();
</handler>
</MyImage>
<MyImage name="image2" id="image2" stretches="both"
align="center" valign="middle" visible="true" opacity="0" >
<handler name="onload">
// image zooming
Debug.write("Resourcegröße: "+image2.resourcewidth+"x"+image2.resourceheight);
image2.setWidth(2 * image2.resourcewidth);
image2.setHeight(2 * image2.resourceheight);
Debug.write("Imagegröße: "+image2.width+"x"+image2.height);
image2.active = true;
image1.active = false;
image2.show();
image1.hide();
</handler>
</MyImage>
</view>
<method name="loadImage"><![CDATA[
if (imagecontainer.image1.active) {
var curImgView = imagecontainer.image1;
var newImgView = imagecontainer.image2;
} else {
var curImgView = imagecontainer.image2;
var newImgView = imagecontainer.image1;
}
//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.setSource(imgUrl);
]]>
</method>
</canvas>
Kind Regards,
Marc