Image jumps when trying to position it in the centre

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Image jumps when trying to position it in the centre

Justin Mclean
Hi,

This code:

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:js="library://ns.apache.org/royale/basic"
                applicationComplete="init()">

    <fx:Script><![CDATA[        
        public function init():void {
            image.addEventListener("layoutNeeded", resetImage);
        }

        public function changeImage():void {
            image.src = "http://apache.org/img/flex.jpg";
        }

        public function resetImage():void {
            holder.dispatchEvent(new Event("layoutNeeded"));
        }
        ]]></fx:Script>

    <js:valuesImpl>
        <js:SimpleCSSValuesImpl/>
    </js:valuesImpl>

    <js:initialView>
        <js:View width="100%" height="100%">
            <js:beads>
                <js:VerticalLayout />
            </js:beads>
            <js:Label text="Here's the ASF logo" />
            <js:Container id="holder" width="520" height="300">
                <js:style>
                    <js:SimpleCSSStyles backgroundColor="#333333" />
                </js:style>
                <js:Image id="image" src="http://apache.org/img/asf_logo.png">
                    <js:beads>
                        <js:CenterElement />
                    </js:beads>
                </js:Image>
            </js:Container>
            <js:TextButton text="Change Image" click="changeImage()" />
        </js:View>
    </js:initialView>

</js:Application>

Has a visual jump of the image from the bottom right when the image is loaded to the centre when the image is centred. Anyone know of any way to stop this from happening or any suggestions on what might be done to fix it?

The two images are different height and width so while setting those properties fixes the jumping issue it also stretches the second image which is less than desirable.

I’ve tried setting the images visibility to true/false but that doesn’t seem to get around the issue.

Thanks,
Justin
Reply | Threaded
Open this post in threaded view
|

Re: Image jumps when trying to position it in the centre

Piotr Zarzycki
Hi,

Can you create some spinner ? Once loading will be done you will hide it. MDL module has Spinner, but not sure whether you can use that module in your app.

Thanks, Piotr

2017-11-20 2:42 GMT+01:00 Justin Mclean <[hidden email]>:
Hi,

This code:

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:js="library://ns.apache.org/royale/basic"
                applicationComplete="init()">

    <fx:Script><![CDATA[
        public function init():void {
            image.addEventListener("layoutNeeded", resetImage);
        }

        public function changeImage():void {
            image.src = "http://apache.org/img/flex.jpg";
        }

        public function resetImage():void {
            holder.dispatchEvent(new Event("layoutNeeded"));
        }
        ]]></fx:Script>

    <js:valuesImpl>
        <js:SimpleCSSValuesImpl/>
    </js:valuesImpl>

    <js:initialView>
        <js:View width="100%" height="100%">
            <js:beads>
                <js:VerticalLayout />
            </js:beads>
            <js:Label text="Here's the ASF logo" />
            <js:Container id="holder" width="520" height="300">
                <js:style>
                    <js:SimpleCSSStyles backgroundColor="#333333" />
                </js:style>
                <js:Image id="image" src="http://apache.org/img/asf_logo.png">
                    <js:beads>
                        <js:CenterElement />
                    </js:beads>
                </js:Image>
            </js:Container>
            <js:TextButton text="Change Image" click="changeImage()" />
        </js:View>
    </js:initialView>

</js:Application>

Has a visual jump of the image from the bottom right when the image is loaded to the centre when the image is centred. Anyone know of any way to stop this from happening or any suggestions on what might be done to fix it?

The two images are different height and width so while setting those properties fixes the jumping issue it also stretches the second image which is less than desirable.

I’ve tried setting the images visibility to true/false but that doesn’t seem to get around the issue.

Thanks,
Justin



--

Piotr Zarzycki 

Patreon: https://www.patreon.com/piotrzarzycki

Reply | Threaded
Open this post in threaded view
|

Re: Image jumps when trying to position it in the centre

Justin Mclean
HI,

> Can you create some spinner ?

You are likely to have the same issue i.e. show the spinner, than when layout neeeded event occurs hide it and then you’ll have the image jump as before. The issue isn’t the time in waiting for the new image to load it occurs after it has loaded.

Using a timer to wait until after the image has jumped is about the only way I can think of fixing it but that’s a bit of a ugly hack.

Thanks,
Justin
Reply | Threaded
Open this post in threaded view
|

Re: Image jumps when trying to position it in the centre

Olaf Krueger
In reply to this post by Justin Mclean
Hi Justin,
it seems to me that the "CenterElement" [1] bead aligns the image by
calculating the x and y position of the image by using its width/height and
the width/height of its parent container.
Maybe this is the reason for the jump cause the position could not calculate
until the image is loaded.
Do you've already tried to replace the "CenterElement" bead by some CSS
alignment?
Another idea is to place a centered outer placeholder that holds the image
but for this, you probably have to hardcode the dimensions depending on the
loaded image.

Of course, I could be totally wrong ;-)

Olaf


[1] CenterElement.as
https://github.com/apache/royale-asjs/blob/develop/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/CenterElement.as



--
Sent from: http://apache-royale-users.20374.n8.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Image jumps when trying to position it in the centre

Justin Mclean
Hi,

> Maybe this is the reason for the jump cause the position could not calculate
> until the image is loaded.

Yep that’s the crux of the issue. The CentreElement bead has this code called on layoutComplete:
host.x = (parentWidth - childWidth) / 2;
host.y = (parentHeight - childHeight) / 2;

> Do you've already tried to replace the "CenterElement" bead by some CSS
> alignment?

Yes I also tried that.

You can get it centred horizontally with margin auto (and a few other ways) easily enough but getting it to centre vertically without scaling the image is difficult.

This will work but IMO is not exactly ideal.

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:js="library://ns.apache.org/royale/basic"
               applicationComplete="init()">

   <fx:Script><![CDATA[
       public function init():void {
           image.addEventListener("layoutNeeded", resetImage);
       }

       public function changeImage():void {
           image.src = "http://apache.org/img/flex.jpg";
       }

       public function resetImage():void {
           holder.dispatchEvent(new Event("layoutNeeded"));
       }
       ]]></fx:Script>

    <fx:Style>
        #holder {
            position: relative;
        }
       
        #image {
            position: absolute;
            width: auto;
            height: auto;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
     </fx:Style>

   <js:valuesImpl>
       <js:SimpleCSSValuesImpl />
   </js:valuesImpl>

   <js:initialView>
       <js:View width="100%" height="100%">
           <js:beads>
               <js:VerticalLayout />
           </js:beads>
           <js:style>
               <js:SimpleCSSStyles margin="50" />
           </js:style>
           <js:Label text="Here's the ASF logo" />
           <js:Group id="holder" width="520" height="300">
               <js:style>
                   <js:SimpleCSSStyles backgroundColor="#333333" />
               </js:style>
               <js:Image id="image" src="http://apache.org/img/asf_logo.png" />
           </js:Group>
           <js:TextButton text="Change Image" click="changeImage()" />
       </js:View>
   </js:initialView>

</js:Application>

You could I supposed encapsulate those styles into a bead but as CentreElement name is already taken I’m not sure what it could be named. CentreWithCSS? However that may be misleading as this method wont for instance work with text and may be other limitations I’m not aware of.

Thanks,
Justin