nClocks/qml/TextClock.qml

import QtQuick 2.12

import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

import NERvGear 1.0 as NVG
import NERvGear.Controls 1.0
import NERvGear.Templates 1.0 as T
import NERvGear.Preferences 1.0 as P

import "."

WidgetTemplate {
    id: widget
    title: qsTr("Text Clock")
    resizable: true
    editing: styleDialog.active

    version: "1.0.0"
    defaultValues: {
        "Font Name": Common.fonts.length-1,
        "Font Weight": 0,
        "Normal Color": "#333333",
        "HighLight Color": "#FFF",
        "Font Size": 20,
        "Letter Space": 20,
        "Line Height": 1.5
    }

    property real day: 1
    property real hours: 0
    property string minutes: ""
    property string seconds: ""

    readonly property string hlight_color: widget.settings.styles["HighLight Color"]
    readonly property string normal_color: widget.settings.styles["Normal Color"]
    readonly property string rfulltext: "<font color='{0}'>IT</font>A<font color='{1}'>IS</font>SL" + ((day===5) ? "TGIF" : "GTFI") + "<br>" +
                                        "FJLVZG<font color='{2}'>ABOUT</font><br>" +
                                        "AC<font color='{3}'>QUARTER</font>BS<br>" +
                                        "<font color='{4}'>TWENTY</font><font color='{5}'>FIVE</font>X<br>" +
                                        "<font color='{6}'>HALF</font>B<font color='{7}'>TEN</font>F<font color='{8}'>TO</font><br>" +
                                        "<font color='{9}'>PAST</font>ERU<font color='{10}'>NINE</font><br>" +
                                        "<font color='{11}'>ONE</font><font color='{12}'>SIX</font><font color='{13}'>THREE</font><br>" +
                                        "<font color='{14}'>FOUR</font><font color='{15}'>FIVE</font><font color='{16}'>TWO</font><br>" +
                                        "<font color='{17}'>EIGHT</font><font color='{18}'>ELEVEN</font><br>" +
                                        "<font color='{19}'>SEVEN</font>T<font color='{20}'>NOON</font>E<br>" +
                                        "<font color='{21}'>TEN</font>SE<font color='{22}'>OCLOCK</font><br>" +
                                        "A<font color='{23}'>MIDNIGHT</font>VW<br>"


    property var rcolors: [hlight_color, hlight_color, hlight_color, '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '']
    readonly property var rcindex: {"M15": 3, "M20": 4, "M5": 5, "M30": 6, "M10": 7, "TO": 8, "PAST": 9,
                                    "9": 10, "1": 11, "13": 11, "6": 12, "3": 13, "4": 14, "5": 15, "2": 16,
                                    "8": 17, "11": 18, "23": 18, "7": 19, "12": 20, "10": 21, "OCLOCK": 22, "0": 23, "24": 23}

    function stringFormat(rtext, format) {
        if (!rtext)
            return null;
        var str = rtext;
        for (var i = 0; i < format.length; i++)
        {
            var re = new RegExp('\\{' + i + '\\}', 'gm');
            str = str.replace(re, format[i]);
        }
        return str;
    }

    function clearHLColors() {
        for(let i=3; i<24; i++) {
            rcolors[i] = "";
        }
    }

    function updateHLColors(){
        for(let i=0; i<arguments.length; i++) {
            if(rcindex[arguments[i]])
                rcolors[rcindex[arguments[i]]] = hlight_color;
        }
    }

    Text {
        id: main
        color: widget.settings.styles["Normal Color"]
        text: ""

        style: Text.Outline
        styleColor: "transparent"

        anchors.centerIn: parent
        font.pointSize: widget.settings.styles["Font Size"]
        font.weight: Common.fontweight[widget.settings.styles["Font Weight"]]
        font.family: Common.fonts[widget.settings.styles["Font Name"]]
        lineHeight: widget.settings.styles["Line Height"]
        font.letterSpacing: widget.settings.styles["Letter Space"]
    }

    Timer {
        interval: 1000
        repeat: true
        running: widget.NVG.View.exposed
        onTriggered: {
            var newDate = new Date();
            day = newDate.getDay();
            hours = newDate.getHours();
            minutes = newDate.getMinutes().toString();
            seconds = newDate.getSeconds().toString();

            if (hours > 12 && hours !== 23) {
                hours = hours - 12;
            }

            if (minutes < 10) {
                minutes = 0 + minutes;
            }
            if (seconds < 10) {
                seconds = 0 + seconds;
            }

            var minsSecs = minutes + seconds;
            if (minsSecs > 3230) {
                hours++;
            }

            clearHLColors();
            updateHLColors(hours);

            if ((minsSecs >= 5730 && minsSecs < 6000) || (minsSecs >= 0 && minsSecs < 230)) {
                if (hours !== 24 && hours !== 0) {
                    updateHLColors("OCLOCK");
                }
            } else if (minsSecs >= 230 && minsSecs < 730) {
                updateHLColors("M5","PAST");
            } else if (minsSecs >= 730 && minsSecs < 1230) {
                updateHLColors("M10", "PAST");
            } else if (minsSecs >= 1230 && minsSecs < 1730) {
                updateHLColors("M15","PAST");
            } else if (minsSecs >= 1730 && minsSecs < 2230) {
                updateHLColors("M20", "PAST");
            } else if (minsSecs >= 2230 && minsSecs < 2730) {
                updateHLColors("M20", "M5", "PAST");
            } else if (minsSecs >= 2730 && minsSecs < 3230) {
                updateHLColors("M30", "PAST");
            } else if (minsSecs >= 3230 && minsSecs < 3730) {
                updateHLColors("M20", "M5", "TO");
            } else if (minsSecs >= 3730 && minsSecs < 4230) {
                updateHLColors("M20", "TO");
            } else if (minsSecs >= 4230 && minsSecs < 4730) {
                updateHLColors("M15", "TO");
            } else if (minsSecs >= 4730 && minsSecs < 5230) {
                updateHLColors("M10", "TO");
            } else if (minsSecs >= 5230 && minsSecs < 5730) {
                updateHLColors("M5", "TO");
            }
            main.text = stringFormat(rfulltext, rcolors);
        }
    }

    menu: Menu {
        Action {
            text: qsTr("Settings") + "..."
            onTriggered: styleDialog.active = true
        }
    }

    Loader {
        id: styleDialog
        active: false
        sourceComponent: NVG.Window {
            id: window
            title: qsTr("Clock Settings")
            visible: true
            minimumWidth: 380
            minimumHeight: 580
            width: minimumWidth
            height: minimumHeight

            transientParent: widget.NVG.View.window

            property var configuration

            Page {
                id: cfg_page
                anchors.fill: parent

                header: TitleBar {
                    text: qsTr("Text Clock")

                    standardButtons: Dialog.Save | Dialog.Reset

                    onAccepted: {
                        configuration = rootPreference.save();
                        widget.settings.styles = configuration;
                        styleDialog.active = false;
                    }

                    onReset: {
                        rootPreference.load();
                        let cfg = rootPreference.save();
                        widget.settings.styles = cfg;
                    }
                }

                ColumnLayout {
                    id: root
                    anchors.fill: parent
                    anchors.margins: 16
                    anchors.topMargin: 0

                    Flickable {
                        Layout.fillWidth: true
                        Layout.fillHeight: true

                        clip: true
                        contentWidth: preferenceLayout.implicitWidth
                        contentHeight: preferenceLayout.implicitHeight

                        ColumnLayout {
                            id: preferenceLayout
                            width: root.width

                            P.PreferenceGroup {
                                id: rootPreference
                                Layout.fillWidth: true

                                label: qsTr("Configuration")

                                onPreferenceEdited: {
                                    widget.settings.styles = rootPreference.save();
                                }

                                P.SelectPreference {
                                    name: "Font Name"
                                    label: qsTr("Font Style")
                                    icon.name: "solid:\uf1fc"
                                    defaultValue: defaultValues["Font Name"]
                                    model: Common.fonts
                                }

                                P.SelectPreference {
                                    name: "Font Weight"
                                    label: qsTr("Font Weight")
                                    icon.name: "solid:\uf1fc"
                                    defaultValue: defaultValues["Font Weight"]
                                    model: Common.sfontweight
                                }

                                P.ColorPreference {
                                    name: "HighLight Color"
                                    label: qsTr("HighLight Color")
                                    defaultValue: defaultValues["HighLight Color"]
                                }

                                P.ColorPreference {
                                    name: "Normal Color"
                                    label: qsTr("Normal Color")
                                    defaultValue: defaultValues["Normal Color"]
                                }

                                P.SliderPreference {
                                    name: "Font Size"
                                    label: qsTr("Font Size")
                                    from: 1
                                    to: 40
                                    stepSize: 1
                                    defaultValue: defaultValues["Font Size"]
                                    displayValue: value
                                }

                                P.SliderPreference {
                                    name: "Letter Space"
                                    label: qsTr("Letter Space")
                                    from: 1
                                    to: 40
                                    stepSize: 1
                                    defaultValue: defaultValues["Letter Space"]
                                    displayValue: value
                                }

                                P.SliderPreference {
                                    name: "Line Height"
                                    label: qsTr("Line Spacing")
                                    from: 0.8
                                    to: 2
                                    stepSize: 0.1
                                    defaultValue: defaultValues["Line Height"]
                                    displayValue: value.toFixed(1)
                                }

                                Component.onCompleted: {
                                    rootPreference.load(widget.settings.styles);
                                    configuration = widget.settings.styles;
                                }
                            }
                        }
                    }
                }
            }

            onClosing: {
                widget.settings.styles = configuration;
                styleDialog.active = false;
            }
        }
    }
}