Selective crop when using Transitions



  • I use a transition to 'move' an item from an image into a ListView as the top entry. I want the item to be viewable as it moves into the ListView, so the ListView must have crop set to false.

    As the item moves across, I have another transition that moves the list down in the LisView to clear a space at the top as a final resting place for the moving item. It works great.

    However, once the ListView is full of entries, as it scrolls down during the transition, the bottom item scrolls down, out of the ListView until finally it disappears off the bottom of the screen. I want it to be cropped within the ListView rectangle and setting crop to true would fix it, but then the fist transition would be cropped too.

    I can't think of a way to not crop items entering into a ListView but to crop ones scrolling out of the bottom.

    Does anyone have any ideas please that uses usual QML rather than overly complex api calls to shaders or whatever?

    I've tried to add an image as per the Forum Guide, but it doesn't work in preview so probably won't now.

    !https://www.dropbox.com/s/l87icm29gvvao42/TransitionCrop.png(TransitionCrop)!
    "Alternate link to image":http://imgur.com/VVgRgH9


  • Moderators

    The link to your picture does't show anything. Are you sure it's in a public folder?



  • I joined DropBox for the first time just to post that image. I could not work out how to create or put it in a public folder even after reading all the docs I could find. I could only create a folder and share it with named contacts - there was no mention of 'Public' that I could see on any screen, context menu or anything.

    So I expect that is the issue, but I'm stumped how to fix it. I'd appreciate any help thanks, tho its off-topic!


  • Moderators

    What OS are you on?



  • Windows 7.


  • Moderators

    In that case you should see a dropbox folder in your favorites.

    There is a subfolder in it. Put your image there and RMB click on it > copy public link.
    Paste it in you topic using the image button on top of your current topic.

    That's it.



  • No, there's only "Share DropBox link" which is the one I used. I suspect they have removed the public functionality for new accounts.

    I say that because I have just spotted in "DropBox Help":https://www.dropbox.com/help/16/en:
    "new Dropbox accounts created after October 4, 2012 no longer have a Public folder."
    Also:
    "Creating a Public folder
    ...Currently only Pro and Dropbox for Business users can enable Public folders, so you may have to upgrade first."

    So maybe the Forum Guide needs to reflect this?



  • Image tip: you can upload the image to any image hoster, no need to create a dropbox account for that, e.g. http://imgur.com/ just drag the image to that site and click upload.

    about your problem: my idea would be to just use a copy of the image in the transition, so you can leave crop set to false in the ListView.
    What i mean when the transitions starts create an new Image object, do the transition and then delete it again, seems like the easists way to me?



  • Thanks Xander84 I could get a link using Imgur (but the image still didn't work).

    Your idea on using a copy in the transition sounds very interesting, I shall give it a try. Thanks for the idea.


  • Moderators

    [quote author="MartynW" date="1396364322"]No, there's only "Share DropBox link" which is the one I used. I suspect they have removed the public functionality for new accounts.

    I say that because I have just spotted in "DropBox Help":https://www.dropbox.com/help/16/en:
    "new Dropbox accounts created after October 4, 2012 no longer have a Public folder."
    Also:
    "Creating a Public folder
    ...Currently only Pro and Dropbox for Business users can enable Public folders, so you may have to upgrade first."

    So maybe the Forum Guide needs to reflect this?[/quote]

    Absolutely, i suggest to change it with te Imgur approch once you get it working. Or are there other alternatives?



  • [quote author="Eddy" date="1396370774"]
    Absolutely, i suggest to change it with te Imgur approch once you get it working. Or are there other alternatives?
    [/quote]
    I always use imgur, but you can just google "free image hoster" or something, there are many alternatives. :D


  • Moderators

    Obviously...;-)
    I was informing to know what is considered common nowadays / easy to explain to new users since Devnet doesn't have the capability to store images.

    Imgur seems to fulfill the needs, at least for a while I guess.



  • I found using the 'Picture' option in the reply didn't work. Maybe I missed something, tho it seems simple enough. The 'Link' was good: so here are the two in case someone can work out what may be going wrong for Picture. The html looks fine to my untutored eye.

    Hmm, Chrome console seems to get an error loading:
    @Uncaught Error: can't load XRegExp twice in the same frame
    Resource interpreted as Image but transferred with MIME type text/html: "http://imgur.com/VVgRgH9". @
    Looks like we can't use any old image hoster perhaps? Does it need blind trial and error to see which works or is there anyone that understands this and can remove the restriction? Or is it browser specific, sigh. I'll try IE once I've posted this and say if it is different.

    !http://imgur.com/VVgRgH9(My alternative text)!

    "Your text to link here...":http://imgur.com/VVgRgH9



  • Back to topic :)

    Unfortunately Xander84, your suggestion is caught out by a QML restriction:

    bq. onStarted() ...
    It is only triggered for top-level, standalone animations. It will not be triggered for animations in a Behavior or Transition...

    onStarted() never gets called for me. Thanks for the idea anyway, I learnt something, but any other ideas gratefully welcomed.



  • yeah that is true, but there are other ways, but that is depending on how you implemented your animations :D
    e.g. you can use "onRunningChanged: " in the Transition itself (not the child animation) when running changes to "true" the transition starts. Also if you are using state transitions you can use signals from the state change. there are other ways but I don't know how you app works, and when it usually starts the transition you have to trigger it somehow and you could simply add the code there!?

    Another thing, I tried to include your image here, it works fine look:
    !http://i.imgur.com/VVgRgH9.png?1(screenshot)!
    @
    !http://i.imgur.com/VVgRgH9.png?1(screenshot)!
    @



  • “onRunningChanged: “ is a bit of a revelation to me, many thanks for that. Using a red rectangle of matching size and opacity to my transition item sort of works fine, but the x and y don't match too well and can go very awry when I scroll the list, so there is some mapToItem() work to do. Also copying my delegate item will be fun as currently the Component delegate is declared locally as I try & encapsulate the two panes as much as poss.

    Here's a snippet of my current code for anyone else that follows this thread:
    @add: Transition {
    id: trans
    onRunningChanged: {
    if (running)
    list.newObject = Qt.createQmlObject('import QtQuick 2.2; Rectangle {color: "red"; width: trans.ViewTransition.item.width; height: trans.ViewTransition.item.height; x: trans.ViewTransition.item.x; y: trans.ViewTransition.item.y; opacity: trans.ViewTransition.item.opacity; }',
    mainColumn, "dynamicSnippet1");
    else {
    if (list.newObject !== undefined) {
    list.newObject.destroy(1000);
    list.newObject = null;
    }
    }
    }
    NumberAnimation { properties: "x"; from: list.finalVrnOrigin.x; duration: 1000 }
    NumberAnimation { properties: "y"; from: list.finalVrnOrigin.y; duration: 1000 }
    @

    Brilliant on getting inline image to display in your reply, the one question that arises is why/where you got the magic "?1" on the end of the URI and why didn't I get that. At least I know to manually edit it in now, thanks once again, you're a star!



  • maybe a little tip, you can also use a Component instead of this "ugly" inline string to create a QML component you know? :D

    @
    Component {
    id: comp
    Rectangle {
    ...
    }
    }
    ...
    comp.createObject(parentItem)
    @

    so you can actually just reuse your ListView delegate component (if you have one) to create objects outside of the list... the ListView or other View containers do it like this, they create dynamic objects of the delegate component you provide :)



  • Great tip, thanks, the inline string was horrible.

    But, the createObject() method initializes & fixes x & y at create time unlike the string method that allows the x & y to vary with the animation.

    eg:
    @list.newObject = listDelegate.createObject(lvRectangle, { "x": trans.ViewTransition.item.x, "y": trans.ViewTransition.item.x, "opacity": trans.ViewTransition.item.opacity } );

    list.newObject = Qt.createQmlObject('import QtQuick 2.2; Rectangle {color: "red"; width: trans.ViewTransition.item.width; height: trans.ViewTransition.item.height; x: trans.ViewTransition.item.x; y: trans.ViewTransition.item.y; opacity: trans.ViewTransition.item.opacity; }',
    lvRectangle, "dynamicSnippet1");
    @



  • I don't think that has anything to do with how you create the object, sometimes you can't change the position (x/y) because of the layout or anchors, in your case it's hard to see why it doesn't work but I usually use a transform translation, in my opinion that is the best way to do this animations anyway (without changing the actual position, so you only move it temporary for the animation). e.g. use the transform property
    @
    Rectangle {
    transform: Translate { id: translate }
    }

    translate.x = 100
    @
    that should always work, instead of changing the x value itself you change the tranform.x value essentially.
    Translate is relative to the item obviously :)



  • I suspect you are right in that its not how I create the object but the fact that the object is a component that doesn't have x and y properties. But being a component means I can't define property aliases for the x and y for the encapsulated Rectangle. Now I can mess around with the creation context by putting the component into its own QML file rather than leaving it encapsulated within the same QML file as the ListView to which it relates, but it begins to get a bit out of proportion to the problem.

    I like your nifty idea of using a transform translation, but then I have the same issue of its visibility as with the x and y and how just to activate it for the one item being added to the list.

    The frustrating thing is everything already works just fine, really simply and elegantly with the one exception of this clip issue. If the clip property could somehow distinguish items initially external to or entering a rectangle from items leaving the rectangle then all would be well with the world for me.

    I've raised a suggestion on this issue https://bugreports.qt-project.org/browse/QTBUG-38048



  • Meanwhile, I think the best I can do is simply to toggle the clip property to set it to false whilst the animation is in progress and then set true on completion. Its a bit flickery, but not bad. The "onRunningChanged:" is the crucial part, so thank you very much for all your help Xander84.

    @add: Transition {
    onRunningChanged: { list.clip = (running ? false : true); }
    NumberAnimation { properties: "x"; from: list.finalVrnOrigin.x; duration: 1000 }
    NumberAnimation { properties: "y"; from: list.finalVrnOrigin.y; duration: 1000 }
    NumberAnimation { properties: "opacity"; from: 0; to: 1; duration: 1000 }
    }
    addDisplaced: Transition {
    NumberAnimation { properties: "x,y"; duration: 1000 }
    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.