Animating text on the Lockscreen - maemo.org

Markkyboy | # 1 | 2017-04-01, 18:52 | Report

Hi all,

I've been playing around with a greeting message that appears on my lockscreen.
The greeting is simply; Good morning, Good afternoon, Good evening and Good night at certain hours.

My text fades out after a given time of seeing the lockscreen. I would like to make this action repeatable, in other words, every time I see the lockscreen, my greeting message shows again.

I'm adding my code to 'Clock.qml', found in /.../lipstick-jolla-home-qt5/lockscreen/* for this purpose and all is working well, but I'd like the greeting to appear on each 'visit' to the lockscreen.

What do I need to add to my code to 'trigger' my greeting each time the lockscreen is visible?

I'm using 'Rectangle' with transparent background to allow my text to fade away, adding 'OpacityAnimator on opacity' to do the fade. I've tried various ways to use 'Timer' but to no avail.......I have tried many ways, but nothing is working so far......

Any ideas/input gratefully received

Regards,

Last edited by Markkyboy; 2017-04-15 at 14:42.

The Following User Says Thank You to Markkyboy For This Useful Post:
juiceme

coderus | # 2 | 2017-04-01, 19:15 | Report

Code:

Connections {
    target: Lipstick.compositor
    onDisplayOn: {
        // do what you want here
    }
}

The Following 6 Users Say Thank You to coderus For This Useful Post:
ajalkane, Amboss, hardy_magnus, juiceme, late88, pasko

Markkyboy | # 3 | 2017-04-01, 20:44 | Report

I'm not sure where to put that code or what to put in the "do what you want here" bit....I can't find much reference to 'onDisplayOn' by searching on the device, except in compositor.qml....but I'm still none the wiser.

I'll keep looking and trying different approaches, meanwhile, I will have another large gin and tonic, **** it, it's Saturday after all!

The Following User Says Thank You to Markkyboy For This Useful Post:
juiceme

coderus | # 4 | 2017-04-02, 01:13 | Report

you can put it to any place where you want to use it.

The Following 2 Users Say Thank You to coderus For This Useful Post:
hardy_magnus, juiceme

Markkyboy | # 5 | 2017-04-02, 14:12 | Report

Yes, it looks like I can place it just about any where, but that is of no help when I don't know what to add to that code. I also don't believe that this particular code is necessary, I also think I need to move away from OpacityAnimator as my fade method.

If I don't set the text to fade, it remains on lockscreen each time I visit it, if I allow the fade to happen, the text won't spawn when visiting the lockscreen.

No matter, I'm rapidly going off the idea anyway, thanks for your input and congrats on your new job!, nice one!

As I opened the thread, I may as well park my code here anyway, so here is the working part of my GreetingText added into "../lockscreen/Clock.qml";

Code:

    Rectangle {
        id: rect
        width: 540; height: 54
        color: "transparent"
        anchors {
            horizontalCenter: parent.horizontalCenter
            bottom: parent.bottom
        }

        Text {
            id: greetingText
            color: Theme.primaryColor
            font { pixelSize: Theme.fontSizeMedium; capitalization: Font.Capitalize; }
            anchors {
                horizontalCenter: parent.horizontalCenter
                bottom: parent.bottom
                bottomMargin: Theme.paddingMedium
            }
            text: { updatesEnabled: timeText.time
                var greetingText;
                var time = new Date().getHours();
                if (time >= 0 && time < 12){
                    greetingText = "good <b>morning</b>";
                } else if (time >= 12 && time < 16){
                    greetingText = "good <b>afternoon</b>";
                } else if (time >= 16 && time < 21){
                    greetingText = "good <b>evening</b>";
                } else if (time >= 21 && time < 24){
                    greetingText = "good <b>night</b>";
                }
            }
            OpacityAnimator on opacity { 
                from: 1.0; to: 0.0; 
                duration: 20000; 
                loops: Animation.Running }
            }
        }
    }
}

The greeting only displays once after refreshing lipstick or rebooting. If I set 'loops' to 'Animation.Infinite' then the text reappears, but this is not the desired effect.

I'm now thinking, it would make more sense to have the greeting ONLY display on the turn of the given hours, so in reality it only shows the 4 different greetings once each in 24hrs rather than each time the lockscreen is visited.

Any additional code/ideas appreciated.

The Following User Says Thank You to Markkyboy For This Useful Post:
juiceme

coderus | # 6 | 2017-04-02, 14:23 | Report

just add timer. when timer triggered set opacity of your text to 0. when display is on set opacity of your text to 1 and start timer. additionaly you can also use display off event to stop timer (if running) and force set opacity of your text to 0.

The Following 2 Users Say Thank You to coderus For This Useful Post:
juiceme, Markkyboy

Markkyboy | # 7 | 2017-04-02, 14:40 | Report

I did try with Timer. It seemed to be ignored and I could be wrong here, but fading text with opacity is not possible?, is it? .......everything I have looked at about fading text seemed to show the use of a rectangle with the text within, then fade out rectangle. My first try was without a rectangle and I couldn't manage to affect opacity of text.
I've read your suggestions, thanks, I'll try again.

The Following User Says Thank You to Markkyboy For This Useful Post:
juiceme

velox | # 8 | 2017-04-02, 22:22 | Report

Originally Posted by Markkyboy View Post

I also think I need to move away from OpacityAnimator as my fade method.

Use this as an inspiration…

Code:

Text {
    id: exampleText
    text: "let's fade me out"
    opacity: 0
    Behavior on opacity { PropertyAnimation { duration: 5000; easing.type: Easing.InOutQuart} }
}
Timer {
    id: thisChangesthePropertyAtSomePoint
    running: true
    interval: 1000
    onTriggered: { exampleText.opacity = 1;}
}

The Following 3 Users Say Thank You to velox For This Useful Post:
juiceme, Markkyboy, Schturman

Markkyboy | # 9 | 2017-04-12, 09:00 | Report

Right, okay, after a bit of mucking about and reading up on animations and transitions, I got a result.

My aim was to have a greeting show at specific time intervals, in this case, 'morning', 'noon', 'evening' and 'night, as in 'Good Evening'. I didn't want the greeting to display all the time, so i needed a way to bind the greeting with a timer/transition/animation/combination.....here's what I came up with eventually;

Code:

    Text {
        id: greetingText
                font { pixelSize: Theme.fontSizeMedium; capitalization: Font.Capitalize }
        anchors {
            bottom: parent.bottom
            bottomMargin: Theme.paddingMedium
            horizontalCenter: parent.horizontalCenter
        }
        text: { updatesEnabled: timeText.time
            var greetingText;
            var time = new Date().getHours();
            if (time >= 0 && time < 12){
                greetingText = "good <b>morning</b>";
            } else if (time >= 12 && time < 16){
                greetingText = "good <b>afternoon</b>";
            } else if (time >= 16 && time < 21){
                greetingText = "good <b>evening</b>";
            } else if (time >= 21 && time < 24){
                greetingText = "good <b>night</b>";
            }
        }
        SequentialAnimation on color {
            id: fadeGreetingTextInOut
            running: greetingText.text
            ColorAnimation { from: "#00000000"; to: "#FFFFFFFF"; duration: 15000; easing.type: Easing.InLinear }
            PauseAnimation { duration: 10000 }
            ColorAnimation { from: "#FFFFFFFF"; to: "#00000000"; duration: 15000; easing.type: Easing.OutLinear }
        }
    }

I'll leave it here for those who are remotely interested!

The Following 4 Users Say Thank You to Markkyboy For This Useful Post:
imaginaryenemy, Jordi, juiceme, moodroid