GUI Freezes When Loop is Started



  • Hello guys,

    I am trying to code a LED light transition application.
    I have 2 functions to proceed.
    One is for the delay, one is for the transition.

        function delayme(duration) {
            var timeStart = new Date().getTime();
            while (new Date().getTime() - timeStart < duration) {
            }
        }
    
        function transitme(r,g,b){
            for(var i=0;i<255;i++){
                myColor=Qt.rgba(r/255, g+i/255, b/255,1);
                sendColor(myColor);
                delayme(100);
                console.log("loop no:" +i);
            }
        }
    

    So, if I call the function as transitme(255,0,0) the lights do change
    from red to yellowish, but when de loop starts, GUI freezes so you cannot
    see the transitting.

    note:
    myColor is the colour variable that you see in GUI.
    sendColor() is the function to send the colours to the LEDs.
    me is someone that does not understand from threads


  • Qt Champions 2018

    @closx Loops in GUI thread block the GUI.
    Instead of using such a loop use a timer with regular timeout and on each timeout run the code which you have now in your loop.



  • @jsulm Thanks for the light-speed answer!
    I have already tried using a timer. The fact is, I need an index number that I can use.
    So I can change colours in time. I think, I do not have an index value in timers.

    note:
    Tried to write a c++ function with a loop and integrate it with qml, too. Result is just the same.


  • Qt Champions 2018

    @closx said in GUI Freezes When Loop is Started:

    The fact is, I need an index number that I can use

    Then use one. Just define a variable, initialize it with 0 before staring the timer and each time the timeout comes increase it.



  • @jsulm Alright,
    I have written a timer like this,

        Timer{
            id:transitme
            interval: 1000; //made it 1 second to test it
            running: false;
            repeat: true
            onTriggered: function(){
                var index=0;
                myColor=Qt.rgba(255/255, index/255, 0/255,1);
                sendColor(myColor);
                console.log("Index is: " + index);
                index++;
            }
        }
    

    and I am calling it with

    transitme.running=true;
    transitme.running.false;
    

    but the index is always zero as I guessed. Where else can I define the
    index, so it will not be re-created in every single loop?


  • Qt Champions 2018

    @closx said in GUI Freezes When Loop is Started:

    Where else can I define the
    index, so it will not be re-created in every single loop?

    Like

    Timer{
        property var index: 0
    

    https://doc.qt.io/qt-5/qml-var.html



  • @jsulm U are da king!

    I am dealing with QML for months, and just learning the property variables! That kinda saved my life mate!
    Thank you very much!