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

T.Widget {
    id: widget
    solid: true
    visible: true
    title: qsTr("Ordinal Scale Bottom UI widget")

    property real thour: 0
    property real t12hour: 0
    property real tmin: 0
    editing: styleDialog.active

    readonly property var configs: widget.settings.styles ? widget.settings.styles : {"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

    property real triangle_size: 24

    Canvas {
        id: triangle
        anchors.centerIn: parent
        anchors.verticalCenterOffset: height/2
        width: triangle_size
        height: triangle_size*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"] - shadowBlur, 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"] - shadowBlur, 0.1);
            context.strokeStyle = line_color;
            let deg = Math.asin(w/2/r)*0.95;
            context.beginPath();
            context.arc(w/2, r+h/2, r-shadowBlur/2, deg+Math.PI*3/2, -deg+Math.PI*3/2, true);
            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("UI Settings")

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

                                P.ColorPreference {
                                    name: "Line Color"
                                    label: qsTr("Line Color")
                                    defaultValue: "#fffcf9"
                                }

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

                                P.ColorPreference {
                                    name: "Shadow Color"
                                    label: qsTr("Shadow Color")
                                    defaultValue: "#e0e0e0"
                                }

                                P.SliderPreference {
                                    name: "Shadow Size"
                                    label: qsTr("Shadow Size")
                                    from: 0
                                    to: 3
                                    stepSize: 0.1
                                    defaultValue: 0.5
                                    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;
                line.requestPaint();
                triangle.requestPaint();
            }
        }
    }
}