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("Solar Clock") resizable: true editing: styleDialog.active version: "1.0.0" defaultValues: { "BG Settings": { "BG Color": "#212121", "BG Alpha": 100, "Show HGrid": true, "HGRID Color": "#616161", "Show Center": true, "Center Color": "#ffeb3b", "Center Radius": 85, "Show Clock": true, "Clock Color": "#616161", "Font Name": Common.fonts.length-1, "Font Weight": 1, "Font Size": 100 }, "Hour Settings": { "Hstar Color": "#ffa000", "Show Orbit": true, "Horbit Color": "#616161" }, "Min Settings": { "Mstar Color": "#ff5722", "Show Orbit": true, "Morbit Color": "#616161" }, "Sec Settings": { "Sstar Color": "#2196f3", "Show Orbit": true, "Sorbit Color": "#616161" }, "MSec Settings": { "MSstar Color": "#9e9e9e", "Show Orbit": true, "MSorbit Color": "#9e9e9e" } } property real maxr: Math.min(width/2, height/2) -10 readonly property real rhour: maxr*0.9 readonly property real rmin: maxr*0.72 readonly property real rsec: maxr*0.5 property real thour: 0 property real tmin: 0 property real tsec: 0 property real tmsec: 0 property var configs: widget.settings.styles onConfigsChanged: { background.requestPaint(); hour.requestPaint(); min.requestPaint(); sec.requestPaint(); millisec_orbit.requestPaint(); millisec_star.requestPaint(); center.requestPaint(); } function colorToRGBA(color, alpha) { var color1, color2, color3; color = ""+color; if (typeof color !== "string") return; if (color.charAt(0) === "#") { color = color.substring(1); } var not16num = color.split("").filter(function (item, index) { return isNaN(parseInt(item, 16)) }); if(not16num.length) return; switch (color.length) { case 3: color1 = color.substr(0,1); color2 = color.substr(1,1); color3 = color.substr(2,1); color1 = color1 + color1; color2 = color2 + color2; color3 = color3 + color3; break; case 6: color1 = color.substr(0,2); color2 = color.substr(2,2); color3 = color.substr(4,2); break; default: return false; } color1 = parseInt(color1, 16); color2 = parseInt(color2, 16); color3 = parseInt(color3, 16); return "rgba("+color1+","+color2+","+color3+","+alpha+")"; } Timer { interval: 50 running: widget.NVG.View.exposed repeat: true onTriggered: { var now = new Date(); tmsec = now.getMilliseconds(); tsec = now.getSeconds(); tmin = now.getMinutes(); thour = now.getHours(); main_time.text = (thour<10 ? "0"+thour : thour) + ":" + (tmin<10 ? "0"+tmin : tmin) + ":" + (tsec<10 ? "0"+tsec : tsec); thour = thour > 12 ? thour - 12 : thour; tsec += tmsec/1000; } } Canvas { id: background width: widget.width; height: widget.height; contextType: "2d"; renderTarget: Canvas.FramebufferObject renderStrategy: Canvas.Cooperative onWidthChanged: { requestPaint(); } onHeightChanged: { requestPaint(); } onPaint: { context.resetTransform(); context.clearRect(0,0,widget.width,widget.height); context.translate(width/2, height/2); //将坐标原点移到画布中心 context.rotate(-Math.PI/2); //将坐标轴逆时针旋转90度，x轴正方向对准12点方向 context.fillStyle = colorToRGBA(configs["BG Settings"]["BG Color"], configs["BG Settings"]["BG Alpha"]/100); context.beginPath(); context.arc(0, 0, maxr, 0, Math.PI * 2, true); context.fill(); if (configs["Hour Settings"]["Show Orbit"]) { context.strokeStyle = configs["Hour Settings"]["Horbit Color"]; context.lineWidth = maxr*0.01; context.beginPath(); context.arc(0, 0, rhour, 0, Math.PI * 2, true); context.stroke(); } if (configs["Min Settings"]["Show Orbit"]) { context.strokeStyle = configs["Min Settings"]["Morbit Color"]; context.lineWidth = maxr*0.01; context.beginPath(); context.arc(0, 0, rmin, 0, Math.PI * 2, true); context.stroke(); } if (configs["Sec Settings"]["Show Orbit"]) { context.strokeStyle = configs["Sec Settings"]["Sorbit Color"]; context.lineWidth = maxr*0.01; context.beginPath(); context.arc(0, 0, rsec, 0, Math.PI * 2, true); context.stroke(); } if (configs["BG Settings"]["Show HGrid"]) { context.strokeStyle = configs["BG Settings"]["HGRID Color"]; context.lineWidth = maxr*0.016; context.lineCap = "round"; for (var i = 0; i < 12; i++) { context.beginPath(); if (!(i%3)) { context.moveTo(rmin+maxr*0.07, 0); } else { context.moveTo(rmin+maxr*0.035, 0); } context.lineTo(rmin, 0); context.stroke(); context.rotate(Math.PI / 6); } } } } Canvas { id: hour width: widget.width; height: widget.height; contextType: "2d"; renderTarget: Canvas.FramebufferObject renderStrategy: Canvas.Cooperative rotation: thour*30+tmin*0.5+tsec*0.6/60 onWidthChanged: { requestPaint(); } onHeightChanged: { requestPaint(); } onPaint: { context.resetTransform(); context.clearRect(0,0,widget.width,widget.height); context.translate(width/2, height/2); context.shadowColor = 'rgba(0,0,0,.5)'; context.shadowBlur = maxr*0.03; context.lineCap = "round"; context.fillStyle = configs["Hour Settings"]["Hstar Color"]; context.beginPath(); context.arc(0, -rhour, maxr*0.075, 0, Math.PI * 2, true); context.fill(); } } Canvas { id: min width: widget.width; height: widget.height; contextType: "2d"; renderTarget: Canvas.FramebufferObject renderStrategy: Canvas.Cooperative rotation: tmin*6+tsec*0.1 onWidthChanged: { requestPaint(); } onHeightChanged: { requestPaint(); } onPaint: { context.resetTransform(); context.clearRect(0,0,widget.width,widget.height); context.translate(width/2, height/2); context.shadowColor = 'rgba(0,0,0,.5)'; context.shadowBlur = maxr*0.04; context.lineCap = "round"; context.fillStyle = configs["Min Settings"]["Mstar Color"]; context.beginPath(); context.arc(0, -rmin, maxr*0.06, 0, Math.PI * 2, true); context.fill(); } } Canvas { id: sec width: widget.width; height: widget.height; contextType: "2d"; renderTarget: Canvas.FramebufferObject renderStrategy: Canvas.Cooperative rotation: widget.tsec*6 onWidthChanged: { requestPaint(); } onHeightChanged: { requestPaint(); } onPaint: { context.resetTransform(); context.clearRect(0,0,widget.width,widget.height); context.translate(width/2, height/2); context.shadowColor = 'rgba(0,0,0,.5)'; context.shadowBlur = maxr*0.04; context.lineCap = "round"; context.fillStyle = configs["Sec Settings"]["Sstar Color"]; context.beginPath(); context.arc(0, -rsec, maxr*0.045, 0, Math.PI * 2, true); context.fill(); } } Canvas { id: millisec_orbit width: widget.width; height: widget.height; contextType: "2d"; renderTarget: Canvas.FramebufferObject renderStrategy: Canvas.Cooperative rotation: widget.tsec*6 onWidthChanged: { requestPaint(); } onHeightChanged: { requestPaint(); } onPaint: { context.resetTransform(); context.clearRect(0,0,widget.width,widget.height); if (configs["MSec Settings"]["Show Orbit"]) { context.translate(width/2, height/2); context.strokeStyle = configs["MSec Settings"]["MSorbit Color"]; context.lineWidth = maxr*0.005; context.beginPath(); context.arc(0, -rsec, maxr*0.1, 0, Math.PI * 2, true); context.stroke(); } } Canvas { id: millisec_star width: widget.width; height: widget.height; contextType: "2d"; renderTarget: Canvas.FramebufferObject renderStrategy: Canvas.Cooperative onWidthChanged: { requestPaint(); } onHeightChanged: { requestPaint(); } transform: Rotation { //设置图像原点 origin.x: width/2 origin.y: height/2-rsec axis{ x: 0 y: 0 z: 1 } angle: tmsec*0.360 } onPaint: { context.resetTransform(); context.clearRect(0,0,widget.width,widget.height); context.translate(width/2, height/2); context.shadowColor = 'rgba(0,0,0,.5)'; context.shadowBlur = maxr*0.05; context.lineCap = "round"; context.fillStyle = configs["MSec Settings"]["MSstar Color"]; context.beginPath(); context.arc(0, -rsec-maxr*0.1, maxr*0.025, 0, Math.PI * 2, true); context.fill(); } } } Canvas { id: center width: widget.width; height: widget.height; contextType: "2d"; renderTarget: Canvas.FramebufferObject renderStrategy: Canvas.Cooperative visible: configs["BG Settings"]["Show Center"] onWidthChanged: { requestPaint(); } onHeightChanged: { requestPaint(); } onPaint: { context.resetTransform(); context.clearRect(0,0,widget.width,widget.height); context.translate(width/2, height/2); context.shadowColor = colorToRGBA(configs["BG Settings"]["Center Color"], 0.5); context.shadowBlur = maxr*0.1; context.shadowOffsetX = maxr*0.05/2.5; context.shadowOffsetY = maxr*0.05/2.5; context.beginPath(); context.arc(0, 0, maxr*0.003*configs["BG Settings"]["Center Radius"], 0, Math.PI * 2, true); context.fillStyle = configs["BG Settings"]["Center Color"]; context.fill(); } } 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: 400 minimumHeight: 660 width: minimumWidth height: minimumHeight transientParent: widget.NVG.View.window property var configuration Page { id: cfg_page anchors.fill: parent header: TitleBar { text: qsTr("Solar 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.DialogPreference { name: "BG Settings" label: qsTr("Background Settings") live: true icon.name: "regular:\uf1de" P.ColorPreference { name: "BG Color" label: qsTr("Color") defaultValue: defaultValues["BG Settings"]["BG Color"] } P.SliderPreference { name: "BG Alpha" label: qsTr("Transparency") from: 0 to: 100 stepSize: 1 defaultValue: defaultValues["BG Settings"]["BG Alpha"] displayValue: value + "%" } P.Separator {} P.SwitchPreference { id: show_hgrid name: "Show HGrid" label: qsTr("Show Scale") defaultValue: defaultValues["BG Settings"]["Show HGrid"] } P.ColorPreference { name: "HGRID Color" label: qsTr("Scale Color") enabled: show_hgrid.value defaultValue: defaultValues["BG Settings"]["HGRID Color"] } P.Separator {} P.SwitchPreference { id: showCenter name: "Show Center" label: qsTr("Show Center") defaultValue: defaultValues["BG Settings"]["Show Center"] } P.ColorPreference { name: "Center Color" label: qsTr("Center Color") enabled: showCenter.value defaultValue: defaultValues["BG Settings"]["Center Color"] } P.SliderPreference { name: "Center Radius" label: qsTr("Center Radius") enabled: showCenter.value from: 30 to: 100 stepSize: 1 defaultValue: defaultValues["BG Settings"]["Center Radius"] displayValue: value + "%" } P.Separator {} P.SwitchPreference { id: showClock name: "Show Clock" label: qsTr("Display Time") defaultValue: defaultValues["BG Settings"]["Show Clock"] } P.ColorPreference { name: "Clock Color" label: qsTr("Font Color") enabled: showClock.value defaultValue: defaultValues["BG Settings"]["Clock Color"] } P.SelectPreference { name: "Font Name" label: qsTr("Font Style") defaultValue: defaultValues["BG Settings"]["Font Name"] model: Common.fonts } P.SelectPreference { name: "Font Weight" label: qsTr("Font Weight") defaultValue: defaultValues["BG Settings"]["Font Weight"] model: Common.sfontweight } P.SliderPreference { name: "Font Size" label: qsTr("Font Size") enabled: showClock.value from: 50 to: 100 stepSize: 1 defaultValue: defaultValues["BG Settings"]["Font Size"] displayValue: value + "%" } } P.Separator {} P.DialogPreference { name: "Hour Settings" label: qsTr("Hour Settings") live: true icon.name: "regular:\uf1de" P.ColorPreference { name: "Hstar Color" label: qsTr("Star Color") defaultValue: defaultValues["Hour Settings"]["Hstar Color"] } P.Separator {} P.SwitchPreference { id: hour_settings_show_orbit name: "Show Orbit" label: qsTr("Show Orbit") defaultValue: defaultValues["Hour Settings"]["Show Orbit"] } P.ColorPreference { name: "Horbit Color" label: qsTr("Orbit Color") enabled: hour_settings_show_orbit.value defaultValue: defaultValues["Hour Settings"]["Horbit Color"] } } P.DialogPreference { name: "Min Settings" label: qsTr("Minute Settings") live: true icon.name: "regular:\uf1de" P.ColorPreference { name: "Mstar Color" label: qsTr("Star Color") defaultValue: defaultValues["Min Settings"]["Mstar Color"] } P.Separator {} P.SwitchPreference { id: min_settings_show_orbit name: "Show Orbit" label: qsTr("Show Orbit") defaultValue: defaultValues["Min Settings"]["Show Orbit"] } P.ColorPreference { name: "Morbit Color" label: qsTr("Orbit Color") enabled: min_settings_show_orbit.value defaultValue: defaultValues["Min Settings"]["Morbit Color"] } } P.DialogPreference { name: "Sec Settings" label: qsTr("Second Settings") live: true icon.name: "regular:\uf1de" P.ColorPreference { name: "Sstar Color" label: qsTr("Star Color") defaultValue: defaultValues["Sec Settings"]["Sstar Color"] } P.Separator {} P.SwitchPreference { id: sec_settings_show_orbit name: "Show Orbit" label: qsTr("Show Orbit") defaultValue: defaultValues["Sec Settings"]["Show Orbit"] } P.ColorPreference { name: "Sorbit Color" label: qsTr("Orbit Color") enabled: sec_settings_show_orbit.value defaultValue: defaultValues["Sec Settings"]["Sorbit Color"] } } P.DialogPreference { name: "MSec Settings" label: qsTr("Millisecond Settings") live: true icon.name: "regular:\uf1de" P.ColorPreference { name: "MSstar Color" label: qsTr("Star Color") defaultValue: defaultValues["MSec Settings"]["MSstar Color"] } P.Separator {} P.SwitchPreference { id: msec_settings_show_orbit name: "Show Orbit" label: qsTr("Show Orbit") defaultValue: defaultValues["MSec Settings"]["Show Orbit"] } P.ColorPreference { name: "MSorbit Color" label: qsTr("Orbit Color") enabled: msec_settings_show_orbit.value defaultValue: defaultValues["MSec Settings"]["MSorbit Color"] } } Component.onCompleted: { rootPreference.load(widget.settings.styles); configuration = widget.settings.styles; } } } } } } onClosing: { widget.settings.styles = configuration; styleDialog.active = false; } } } Text { id: main_time text: "" style: Text.Outline styleColor: "transparent" visible: configs["BG Settings"]["Show Clock"] color: configs["BG Settings"]["Clock Color"] anchors.centerIn: parent font.pointSize: 0.0009*configs["BG Settings"]["Center Radius"]*maxr*configs["BG Settings"]["Font Size"]/100 font.weight: Common.fontweight[configs["BG Settings"]["Font Weight"]] font.family: Common.fonts[configs["BG Settings"]["Font Name"]]//"Microsoft YaHei" } }