Instructions are NOT sequential in qt/qml?!?

[JaySDC]

Hi,

I had a trouble obtaining the behavior I wanted with a caroussel.

Objective:
When I press LEFT/RIGHT, I decrement/increment currentIndex.
I do stuff BEFORE the inc/dec, then I do stuff AFTER the inc/dec.

With the other code in my Keys.onLeftPressed / onRightPressed, I had the feeling that the instructions were NOT sequential. Or at least not totally.



So I just used this code to log everything so I would not go crazy:

console.log("currentIndex BEFORE increment : " + currentIndex)
                incrementCurrentIndex();
                console.log("currentIndex AFTER increment : " + currentIndex)

console.log("currentIndex BEFORE increment : " + currentIndex)
                incrementCurrentIndex();
                console.log("currentIndex AFTER increment : " + currentIndex)

To copy to clipboard, switch view to plain text mode 

And here is the funny result:

qml: currentIndex BEFORE increment : 41
qml: currentIndex AFTER increment : 41


Obviously I did the test several times and always achieved the same result...

Can someone tell me what the f*** is going on?!?!?!?
It feels like *if* you inc/dec the index in the current command, regardless of where the specific command is, it always performs it first.


Yours,
--Jay

[anda_skoa]

Couple of ideas:

- the index change could be asynchronous, e.g. scheduled and value changed after the transition animation has finished
try a log output in the property change handler, i.e. onCurrentIndexChanged
- the value could be locally cached, like a variable hiding the property. try elementId.currentIndex

Cheers,
_

[JaySDC]

Well I will check these when I'll have the time.

In the meantime I just went with tracking the indices of my different listmodels in global variables because the functionning of currentIndex is completely counterintuitive.



Yours,
--Jay

[anda_skoa]

Can you tell what you are trying to do with that imperative code?
There might be nice, more declarative ways to do something equivalent.

Cheers,
_

[JaySDC]

Sure.

I have 9 different lists (still same project of an acrade cab front end : P).

UP and DOWN cycles between lists.
LEFT and RIGHT cycles items within a list.

Each item in the list can either be HORIZONTAL or VERTICAL, but never both.
I have an icon displaying if the currentItem is HORIZONTAL or VERTICAL


The ultimate goal is, for each list, to remember what the last known index for THAT list, and when I switch back to that list, to go back to THAT specific index.
That part is currently not working.
I have 9 variables that keep track of the position in each list and I know these variables behave as I want them to, I console.logged the hell out of them.
But when I switch between lists, I have trouble "reassigning" the last known index of that list.
That part I can't get to work.



The subgoal was (but I managed to do that in a different way):
If **and only if** I switch from an HORIZONTAL to a VERTICAL (or vice versa), I change the icon.
For this I did a test on currentItem BEFORE it was incremented/decremented, then I inc/dec currentIndex, then I check currentItem AGAIN.
If the condition above occurs, I launch the wanted animation to change the icon.
That's when I realized the non-sequential properties of incrementCurrentIndex and decrementCurrentIndex.

I did the exact same test with the variables I created myself, and now the test works. See the code above. If is the exact same one, except I use "indexAL" which is my variable that is equal to currentIndex.

When values BEFORE and AFTER the inc/dec are NOT the same, and the icon displays what it should display, and is animated in case of a change HORI -> VERTI or VERTI -> HORI.


Yours,
--Jay

[anda_skoa]

Ah, so you are trying the "single view/multiple models" approach again.

But if you want to change and icon depending on a value of the current data item, then you don't need to do any imperative coding at all.

Let say you have an image

Image {
    source: model.horizontal ? "horizontal.png" : "vertical.png"
}

Image {
    source: model.horizontal ? "horizontal.png" : "vertical.png"
}

To copy to clipboard, switch view to plain text mode 

Or with animated transitions

Image {
    id: icon
 
    state: model.horizontal ? "Horizontal" : "Vertical"
 
    states: [
        State {
            name: "Horizontal"
            PropertyChanges {
                target: icon
                source: "horizontal.png"
            }
        },
        State {
            name: "Vertical"
            PropertyChanges {
                target: icon
                source: "vertical.png"
            }
        }
    ]
 
    transitions: [
        Transition {
            from: "Horizontal"; to: "Vertical"
            // Animations here
        },
        Transition {
            from: "Vertical"; to: "Horizontal"
            // Animations here
        }
    ]
}

Image {
    id: icon

    state: model.horizontal ? "Horizontal" : "Vertical"

    states: [
        State {
            name: "Horizontal"
            PropertyChanges {
                target: icon
                source: "horizontal.png"
            }
        },
        State {
            name: "Vertical"
            PropertyChanges {
                target: icon
                source: "vertical.png"
            }
        }
    ]

    transitions: [
        Transition {
            from: "Horizontal"; to: "Vertical"
            // Animations here
        },
        Transition {
            from: "Vertical"; to: "Horizontal"
            // Animations here
        }
    ]
}

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[JaySDC]

Cheers for helping out : )

Can you help me with my index problem? And being able, when cycling which list is visible, to go back to last known index of this list?


As for the image/HORI/VERTI problem, I see your point.
I did not know I could use an IF condition in the "source:" code. So that's good to know for the future : D

However it's a little more complicated than that because I have 2 actual sprites and 2 "still" images representing the end of each animation.
It's not just animating properties.

And the other funny thing I discovered with QT was this one:
http://www.qtcentre.org/threads/6376...rting-instead-!


Because of this, and because it only worked with Framsync ON, I had to use a totally different approach and I do NOT use PAUSE or RESUME at all now.

I have two still images, representing the last frame of each animation, and two animations.

When n-1 item type <> currentItem type, I have a SequentialAnimation that:
1) changes opacity of animation "to-run" to 1
2) changes opacity of current still frame to 0
3) run animation
4) change opacity of new still frame to 1
5) change opacity of "now-ended" animation to 0

That codes works AND let me choose the speed at which the frames are displayed, which is basically what you want when you spend hours creating pixel-perfect sprites on Photoshop.

I might give the other solution a go but I am kind of reluctant as it is currently working ; )

Yours,
--Jay

[anda_skoa]

Can you help me with my index problem? And being able, when cycling which list is visible, to go back to last known index of this list?

If I remember correctly the problem is most likely related to some asynchronous data loading.
Can you give access to the full code somehow?

I did not know I could use an IF condition in the "source:" code. So that's good to know for the future : D

That's called a Shorthand Conditional or conditional assignment.
But a property can in even be bound to a function call (JavaScript or invokable C++ method).

However it's a little more complicated than that because I have 2 actual sprites and 2 "still" images representing the end of each animation.
It's not just animating properties.

The second code snippet was mostly an example on how to declaratively deal with different complex states of an item.
Even if your icon component has a more complicated workflow, it is still very likely a flow through a series of states, not necessarily using animations between them.

The central idea is that one only needs to change the "state" property, either externally or by binding it to an expression of input variables.

Cheers,
_

[JaySDC]

Here is my full code on a dropbox:
https://www.dropbox.com/sh/18855lgs3...kT1qigvUa?dl=0

You can ignore anything but mail.qml
(The other qml files are just tests)


Right now the UP/DOWN/LEFT/RIGHT situation works.
I keep track of the index of each categorie and when I switch back to this categorie, I go back to the last known index.

The comments are in french almost completely, sorry about that : P.


1) The icon that changes according to the surtype (HORI==YOKO, VERTI==TATE) of currentItem is called surTypeIndicator.
The code is located at line 2547 for the images/animatedsprites/transitions
And the condition to check when to ran these is located at lines 757 (Keys.onLeftPressed) and lines 940 (Keys.onRightPressed)

I seem to have one last problem with this part:
"&" key (that's the "1" key on a french AZERTY keyboard) switches between displaying YOKO titles (HORI), TATE (VERTI) titles, or both titles.

When I use this key the indices go crazy and all the code using these indices go crazy too.

For instance yokoSurTypeIndicator

Any way to "keep" my indices clean even when I use "&"?

Yours,
--Jay
Ps: should I start/trasnfert this to a new post?

---

Added after 20 minutes:

Nevermind my last question, I seem to have found a way to make it work as intended

Will post more if tests prove me wrong.

Yours,
--Jay

[anda_skoa]

Wow, I had no time until today to even look at the code.

I've totally lost track of what the problems actually are right now

Anyway, one thing that would make your code shorter and easier to handle is to use switch() statements instead of endless if/else if

I.e. instead of

if (variable == 1) {
    // do thing1
} else {
    if (variable == 2) {
        // do thing2
    } else {
        if (variable == 3) {
            // do thing3
        }
    }
}

if (variable == 1) {
    // do thing1
} else {
    if (variable == 2) {
        // do thing2
    } else {
        if (variable == 3) {
            // do thing3
        }
    }
}

To copy to clipboard, switch view to plain text mode 

you can just write

switch (variable) {
    case 1:
        // do thing1
        break;
    case 2:
        // do thing3
        break;
    case 3:
        // do thing3
        break;
}

switch (variable) {
    case 1:
        // do thing1
        break;
    case 2:
        // do thing3
        break;
    case 3:
        // do thing3
        break;
}

To copy to clipboard, switch view to plain text mode 

Cheers,
_