ICE (In Case Of Emergency) field on lock screen

OK, here it goes. Version 0.0.3 :wink:

Changes:

  • Choose between 7 font sizes (default Silica font sizes enums: Tiny, Extra Small, Small, Medium, Large, Extra Large, Huge)
  • Choose between 7 line heights: 70-130% with 10% step
  • Preview added to the settings page to instantly show the selected text and font/spacing combination


Oh, and as the Lock screen Label element’s text format is set to Text.RichText, you can be creative yourself and use simple HTML tags not only to set parts of the text to bold or italics or to change text color, but also to add even more lines (using the <br> tag to split one line into multiple lines) if there’s still space on your phone’s screen for that. (Just remember to leave enough space for the media playback controls or else it’ll overlap them).

This way everyone should now be able to adjust all text parameters to own preferences and phone screen size/resolution.

Files:

unified_diff.patch

--- a/usr/share/lipstick-jolla-home-qt5/lockscreen/LockItem.qml	Mon Oct  3 18:31:06 2022
+++ b/usr/share/lipstick-jolla-home-qt5/lockscreen/LockItem.qml	Sun Oct  9 00:02:38 2022
@@ -15,6 +15,7 @@
 import com.jolla.lipstick 0.1
 import com.jolla.settings.system 1.0
 import org.nemomobile.lipstick 0.1
+import org.nemomobile.configuration 1.0
 import "../backgrounds"
 import "../main"
 import "../statusarea"
@@ -181,6 +182,17 @@
         enabled: !lockScreen.lowPowerMode && lockScreen.locked && !lockScreen.panning
         onClicked: hintEdges()
     }
+    
+    ConfigurationGroup {
+        id: config
+        path: "/desktop/lipstick-jolla-home/devicelock/customText"
+        property string firstLine: []
+        property string secondLine: []
+        property string thirdLine: []
+        property string fourthLine: []
+        property int fontSize: Theme.fontSizeLarge
+        property real lineSpacing: 1.0
+}
 
     ContrastBackground {
         id: centerBackground
@@ -190,8 +202,8 @@
                 ? Theme.paddingLarge
                 : (lockItem.height - lockItem.contentTopMargin - height) / 2)
 
-        width: Math.max(clock.width, weatherIndicator.width)
-        height: clock.height + weatherIndicator.height
+        width: Math.max(clock.width, weatherIndicator.width, if_found.width)
+        height: clock.height + weatherIndicator.height + (Theme.paddingLarge * 2) + (if_found.height * 1.1)
 
         opacity: Math.min(clock.transitionOpacity, clock.unlockOpacity)
 
@@ -287,6 +299,25 @@
             temperatureFontPixelSize: clock.weekdayFont.pixelSize
             active: visible
         }
+        
+        Label {
+          id: if_found
+          
+          anchors {
+              horizontalCenter: clock.horizontalCenter
+              top: weatherIndicator.bottom
+              topMargin: Theme.paddingLarge * 2
+              }
+              
+          font.pixelSize: config.fontSize
+          lineHeightMode: Text.ProportionalHeight
+          lineHeight: config.lineSpacing
+          color: lockScreen.textColor
+          textFormat: Text.RichText
+          horizontalAlignment: Text.AlignHCenter
+          text: (config.firstLine ? config.firstLine + "<br>" : "") + (config.secondLine ? config.secondLine + "<br>" : "") + (config.thirdLine ? config.thirdLine + "<br>" : "") + (config.fourthLine ? config.fourthLine : "")
+          }
+          
     }
 
     ContrastBackground {

main.qml

import QtQuick 2.0
import Sailfish.Silica 1.0
import org.nemomobile.configuration 1.0

Page {
    id: page

    ConfigurationGroup {
        id: config
        path: "/desktop/lipstick-jolla-home/devicelock/customText"
        property string firstLine: ""
        property string secondLine: ""
        property string thirdLine: ""
        property string fourthLine: ""
        property int fontSize: Theme.fontSizeLarge 
        property real lineSpacing: 1.0
    }

    SilicaFlickable {
            anchors.fill: parent
            contentHeight: (content.height + preview.height) * 1.3


            Column {
                id: content
                width: parent.width
                spacing: Theme.paddingSmall

                PageHeader {
                                title: "My text on Lock Screen"
                                description: "(To hide a row, just clear its text)"
                            }

                TextArea {
                    id: firstLine
                    label: "First row"
                    width: parent.width
                    placeholderText: "First row"
                    text: config.firstLine
                    onTextChanged: config.firstLine = text
                    rightItem: IconButton {
                         onClicked: {
                             firstLine.text = ""
                         }
                         width: icon.width
                         height: icon.height
                         icon.source: "image://theme/icon-m-input-clear"
                         opacity: firstLine.text.length > 0 ? 1.0 : 0.0
                         Behavior on opacity { FadeAnimation {} }
                     }
                    }

                TextArea {
                    id: secondLine
                    label: "Second row"
                    width: parent.width
                    placeholderText: "Second row"
                    text: config.secondLine
                    onTextChanged: config.secondLine = text
                    rightItem: IconButton {
                         onClicked: {
                             secondLine.text = ""
                         }
                         width: icon.width
                         height: icon.height
                         icon.source: "image://theme/icon-m-input-clear"
                         opacity: secondLine.text.length > 0 ? 1.0 : 0.0
                         Behavior on opacity { FadeAnimation {} }
                     }
                    }
                    
                TextArea {
                    id: thirdLine
                    label: "Third row"
                    width: parent.width
                    placeholderText: "Third row"
                    text: config.thirdLine
                    onTextChanged: config.thirdLine = text
                    rightItem: IconButton {
                         onClicked: {
                             thirdLine.text = ""
                         }
                         width: icon.width
                         height: icon.height
                         icon.source: "image://theme/icon-m-input-clear"
                         opacity: thirdLine.text.length > 0 ? 1.0 : 0.0
                         Behavior on opacity { FadeAnimation {} }
                     }
                    }
                    
                 TextArea {
                    id: fourthLine
                    label: "Fourth row"
                    width: parent.width
                    placeholderText: "Fourth row"
                    text: config.fourthLine
                    onTextChanged: config.fourthLine = text
                    rightItem: IconButton {
                         onClicked: {
                             fourthLine.text = ""
                         }
                         width: icon.width
                         height: icon.height
                         icon.source: "image://theme/icon-m-input-clear"
                         opacity: fourthLine.text.length > 0 ? 1.0 : 0.0
                         Behavior on opacity { FadeAnimation {} }
                     }
                    }
                 
                  ComboBox {
                    id: fonts
                    label: "Font size: "
                    currentIndex: {
                    if (config.fontSize == Theme.fontSizeTiny) return 0
                    else if (config.fontSize == Theme.fontSizeExtraSmall) return 1
                    else if (config.fontSize == Theme.fontSizeSmall) return 2
                    else if (config.fontSize == Theme.fontSizeMedium) return 3
                    else if (config.fontSize == Theme.fontSizeLarge) return 4
                    else if (config.fontSize == Theme.fontSizeExtraLarge) return 5
                    else if (config.fontSize == Theme.fontSizeHuge) return 6
                    else return 4
                    }
                    
                    menu: ContextMenu {

                       MenuItem {
                            text: "Tiny"
                            onClicked: config.fontSize = Theme.fontSizeTiny
                            }
                       MenuItem {
                            text: "Extra Small"
                            onClicked: config.fontSize = Theme.fontSizeExtraSmall
                            }
                       MenuItem {
                            text: "Small"
                            onClicked: config.fontSize = Theme.fontSizeSmall
                            }
                       MenuItem {
                            text: "Medium"
                            onClicked: config.fontSize = Theme.fontSizeMedium
                            }
                       MenuItem {
                            text: "Large"
                            onClicked: config.fontSize = Theme.fontSizeLarge
                            }
                       MenuItem {
                            text: "Extra Large"
                            onClicked: config.fontSize = Theme.fontSizeExtraLarge
                            }
                       MenuItem {
                            text: "Huge"
                            onClicked: config.fontSize = Theme.fontSizeHuge
                            }
                       }

                 }
                 
                 ComboBox {
                    id: spacing
                    label: "Line spacing: "
                    currentIndex: {
                    if (config.lineSpacing == 0.7) return 0
                    else if (config.lineSpacing == 0.8) return 1
                    else if (config.lineSpacing == 0.9) return 2
                    else if (config.lineSpacing == 1.0) return 3
                    else if (config.lineSpacing == 1.1) return 4
                    else if (config.lineSpacing == 1.2) return 5
                    else if (config.lineSpacing == 1.3) return 6
                    else return 3
                    }
                    
                    menu: ContextMenu {

                       MenuItem {
                            text: "70%"
                            onClicked: config.lineSpacing = 0.7
                            }
                       MenuItem {
                            text: "80%"
                            onClicked: config.lineSpacing = 0.8
                            }
                       MenuItem {
                            text: "90%"
                            onClicked: config.lineSpacing = 0.9
                            }
                       MenuItem {
                            text: "100%"
                            onClicked: config.lineSpacing = 1.0
                            }
                       MenuItem {
                            text: "110%"
                            onClicked: config.lineSpacing = 1.1
                            }
                       MenuItem {
                            text: "120%"
                            onClicked: config.lineSpacing = 1.2
                            }
                       MenuItem {
                            text: "130%"
                            onClicked: config.lineSpacing = 1.3
                            }
                       }

                 }
                 
           }
           
           Column {
              id: preview
              width: parent.width
              spacing: Theme.paddingLarge
              anchors.top: content.bottom

                 Separator {
                     anchors.horizontalCenter: parent.horizontalCenter
                     color: Theme.highlightColor
                     width: parent.width
                 }              
                
                 Label {
                     text: "Preview"
                     color: Theme.highlightColor
                     anchors.horizontalCenter: parent.horizontalCenter

                 }
                 
                 Label {
                     font.pixelSize: config.fontSize
                     lineHeightMode: Text.ProportionalHeight
                     lineHeight: config.lineSpacing
                     textFormat: Text.RichText
                     anchors.horizontalCenter: parent.horizontalCenter
                     horizontalAlignment: Text.AlignHCenter
                     text: (config.firstLine ? config.firstLine + "<br>" : "") + (config.secondLine ? config.secondLine + "<br>" : "") + (config.thirdLine ? config.thirdLine + "<br>" : "") + (config.fourthLine ? config.fourthLine : "")
                 }
           }
    }

}

patch.json

{"description": "Shows four lines of custom text on Lock screen, right below the Clock and Weather widgets", "name": "custom-text-on-lockscreen", "display_name": "Custom text on Lock Screen", "category": "silica", "author": "wetab73", "discussion": "", "donations": "", "sources": "", "version": "0.0.3", "compatible": ["4.4.0.72","4.4.0.68","4.4.0.58"]}

Enjoy :slight_smile:

5 Likes