Selective crop when using Transitions
-
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? -
[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 -
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 }
}
@
