ordinal-scale-widgets/qml/BottomUI.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

WidgetTemplate {
    id: widget
    title: qsTr("Ordinal Scale Bottom UI widget")
    editing: styleDialog.active

    readonly property var configs: widget.settings.styles

    version: "1.0.1"
    defaultValues: {
        "Curve": true,
        "Circle Color": "#fffcf9",
        "Line Color": "#fffcf9",
        "Line Width": 38,
        "Shadow Color": "#e0e0e0",
        "Shadow Size": 0.5,
        "Battle UI": false,
        "Clock Visible": true,
        "Full Clock": true,
        "Font Color": "#f5f5f5",
        "Font Size": 44,
        "Font Name": 0,
        "Font Weight": 0,
        "Text Vertical Offset": 16
    }

    property string line_color: configs["Line Color"]
    property string shadowColor: configs["Shadow Color"]
    property real shadowBlur: configs["Shadow Size"]

    readonly property real h: Math.min(widget.width, widget.height)
    readonly property real w: widget.width
    readonly property real r: (w**2+4*h**2)/2/h

    onConfigsChanged: {
        line.requestPaint();
        triangle.requestPaint();
    }

    Canvas {
        id: triangle
        anchors.centerIn: parent
        anchors.verticalCenterOffset: height/2
        width: 0.4*h
        height: 0.4*h*Math.sin(Math.PI/6)
        contextType: "2d"
        onPaint: {
            context.reset();
            context.clearRect(0,0,width,height);
            context.shadowBlur = shadowBlur;
            context.shadowColor = shadowColor;
            context.lineWidth = Math.max(0.08*configs["Line Width"], 0.1);
            context.strokeStyle = line_color;
            context.beginPath();
            context.moveTo(0,0);
            context.lineTo(width/2, height);
            context.lineTo(width, 0);
            context.lineTo(0, 0);
            context.fillStyle = line_color;
            context.fill();
        }
    }

    Canvas {
        id: line
        anchors.centerIn: parent
        width: widget.width
        height: widget.height
        contextType: "2d"
        onPaint: {
            context.reset();
            context.clearRect(0,0,width,height);
            context.shadowBlur = shadowBlur;
            context.shadowColor = shadowColor;
            context.lineWidth = Math.max(0.08*configs["Line Width"], 0.1);
            context.strokeStyle = line_color;
            if (configs["Curve"]) {
                let deg = Math.asin(w/2/r)*0.95;
                context.beginPath();
                context.arc(w/2, r+h/2, r, deg+Math.PI*3/2, -deg+Math.PI*3/2, true);
            } else {
                context.beginPath();
                context.moveTo(0, height/2);
                context.lineTo(width, height/2);
            }
            context.stroke();
        }
    }

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

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

            transientParent: widget.NVG.View.window

            property var configuration

            Page {
                id: cfg_page
                anchors.fill: parent

                header: TitleBar {
                    text: qsTr("Ordinal Scale Bottom UI widget")

                    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;
                        line.requestPaint();
                        triangle.requestPaint();
                    }
                }

                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.SwitchPreference {
                                    name: "Curve"
                                    label: qsTr("Curve")
                                    defaultValue: defaultValues["Curve"]
                                }

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

                                P.SliderPreference {
                                    name: "Line Width"
                                    label: qsTr("Line Width")
                                    from: 1
                                    to: 100
                                    stepSize: 1
                                    defaultValue: defaultValues["Line Width"]
                                    displayValue: value + "%"
                                }

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

                                P.SliderPreference {
                                    name: "Shadow Size"
                                    label: qsTr("Shadow Size")
                                    from: 0
                                    to: 3
                                    stepSize: 0.1
                                    defaultValue: defaultValues["Shadow Size"]
                                    displayValue: Math.round(value*10)/10 + "px"
                                }

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

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