Animating text on the Lockscreen - maemo.org

Active Topics

TLS 1.2 for N9 is ready (29)
to MeeGo / Harmattan by smatkovi - 1 hr, 26 mins ago
Error after installing Leste on sdcard (12)
to Maemo 7 / Leste by teroyk - 2 hrs, 13 mins ago
Camera phone competition March 2023 "Endless" (35)
to General by Maemish - 3 days, 10 hrs ago
Maemo repository (3)
to Community by torsen - 4 days, 3 hrs ago
Introducing ubiboot N9 (multiboot OS loader) (1,393)
to Alternatives by smatkovi - 6 days, 7 hrs ago
more...

Thread Tools

	Markkyboy	2017-04-01 , 18:52
	Posts: 433 \| Thanked: 727 times \| Joined on Oct 2012 @ Costa Blanca, España	#1

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,

__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..

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

Quote & Reply |

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

	coderus	2017-04-01 , 19:15
	Posts: 6,436 \| Thanked: 12,701 times \| Joined on Nov 2011 @ Ängelholm, Sweden	#2

Code:

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

__________________
Telegram | Openrepos | GitHub | Revolut donations

Quote & Reply |

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

	Markkyboy	2017-04-01 , 20:44
	Posts: 433 \| Thanked: 727 times \| Joined on Oct 2012 @ Costa Blanca, España	#3

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!

__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..

Quote & Reply |

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

	coderus	2017-04-02 , 01:13
	Posts: 6,436 \| Thanked: 12,701 times \| Joined on Nov 2011 @ Ängelholm, Sweden	#4

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

__________________
Telegram | Openrepos | GitHub | Revolut donations

Quote & Reply |

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

	Markkyboy	2017-04-02 , 14:12
	Posts: 433 \| Thanked: 727 times \| Joined on Oct 2012 @ Costa Blanca, España	#5

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.

__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..

Quote & Reply |

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

	coderus	2017-04-02 , 14:23
	Posts: 6,436 \| Thanked: 12,701 times \| Joined on Nov 2011 @ Ängelholm, Sweden	#6

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.

__________________
Telegram | Openrepos | GitHub | Revolut donations

Quote & Reply |

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

	Markkyboy	2017-04-02 , 14:40
	Posts: 433 \| Thanked: 727 times \| Joined on Oct 2012 @ Costa Blanca, España	#7

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.

__________________
..oO(Don't just sit there standing around, pick up a shovel and sweep up!)Oo..

Quote & Reply |

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

	velox	2017-04-02 , 22:22
	Posts: 394 \| Thanked: 1,341 times \| Joined on Dec 2009	#8

Originally Posted by Markkyboy

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;}
}

__________________
slumber: sensors enabled sleep timer for SFOS (translations/input/… appreciated if you've got some spare time)
talefish: directory based audiobook player for SFOS
nofono: ofono restart for SFOS
___
list of i486/noarch packages on openrepos (jolla tablet)

Quote & Reply |

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

	Markkyboy	2017-04-12 , 09:00
	Posts: 433 \| Thanked: 727 times \| Joined on Oct 2012 @ Costa Blanca, España	#9

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!