From b6e70c2c79a0fd9a19e03daafc8ab7ad72f57762 Mon Sep 17 00:00:00 2001 From: "NGnius (Graham)" Date: Thu, 22 Dec 2022 18:03:59 -0500 Subject: [PATCH] Improve UI/UX with fields and graph --- backend-rs/Cargo.lock | 2 +- backend-rs/Cargo.toml | 2 +- package.json | 2 +- src/backend.ts | 4 ++ src/index.tsx | 94 +++++++++++++++++++++++++++---------------- 5 files changed, 67 insertions(+), 37 deletions(-) diff --git a/backend-rs/Cargo.lock b/backend-rs/Cargo.lock index 671a3da..049b01b 100644 --- a/backend-rs/Cargo.lock +++ b/backend-rs/Cargo.lock @@ -106,7 +106,7 @@ dependencies = [ [[package]] name = "fantastic-rs" -version = "0.3.5" +version = "0.4.0" dependencies = [ "log", "serde", diff --git a/backend-rs/Cargo.toml b/backend-rs/Cargo.toml index 7dd63cb..0d3c7b1 100644 --- a/backend-rs/Cargo.toml +++ b/backend-rs/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "fantastic-rs" -version = "0.3.5" +version = "0.4.0" edition = "2021" [dependencies] diff --git a/package.json b/package.json index d5a7432..8cfa444 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Fantastic", - "version": "0.3.5", + "version": "0.4.0", "description": "A template to quickly create decky plugins from scratch, based on TypeScript and webpack", "scripts": { "build": "shx rm -rf dist && rollup -c", diff --git a/src/backend.ts b/src/backend.ts index 87f5a78..1c97c54 100644 --- a/src/backend.ts +++ b/src/backend.ts @@ -53,6 +53,10 @@ export async function getVersion(): Promise { return (await call_backend("version", []))[0]; } +export async function getName(): Promise { + return (await call_backend("name", []))[0]; +} + export async function getCurve(): Promise<{"x": number, "y": number}[]> { return (await call_backend("get_curve", []))[0]; } diff --git a/src/index.tsx b/src/index.tsx index 81dedb7..0c9d459 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,11 +3,10 @@ import { DialogButton, PanelSection, PanelSectionRow, + Field, ServerAPI, ToggleField, staticClasses, - gamepadDialogClasses, - joinClassNames, } from "decky-frontend-lib"; import { VFC, useState } from "react"; import { FaFan } from "react-icons/fa"; @@ -21,6 +20,10 @@ const POINT_SIZE = 32; var periodicHook: any = null; var usdplReady: boolean = false; +var name: string = ""; +var version: string = ""; +var egg = 0; + var curve_backup: {x: number, y: number}[] = []; const Content: VFC<{ serverAPI: ServerAPI }> = ({serverAPI}) => { @@ -90,7 +93,6 @@ const Content: VFC<{ serverAPI: ServerAPI }> = ({serverAPI}) => { } const width: number = ctx.canvas.width; const height: number = ctx.canvas.height; - ctx.strokeStyle = "#1a9fff"; ctx.fillStyle = "#1a9fff"; ctx.lineWidth = 2; @@ -106,9 +108,42 @@ const Content: VFC<{ serverAPI: ServerAPI }> = ({serverAPI}) => { ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye*/ //ctx.beginPath(); //ctx.moveTo(0, height); + + // graph helper lines + ctx.beginPath(); + ctx.strokeStyle = "#093455"; + //ctx.fillStyle = "#093455"; + const totalLines = 7; + const lineDistance = 1 / (totalLines + 1); + for (let i = 1; i <= totalLines; i++) { + ctx.moveTo(lineDistance * i * width, 0); + ctx.lineTo(lineDistance * i * width, height); + ctx.moveTo(0, lineDistance * i * height); + ctx.lineTo(width, lineDistance * i * height); + } + ctx.stroke(); + //ctx.fill(); + + ctx.beginPath(); + ctx.strokeStyle = "#1a9fff"; + ctx.fillStyle = "#1a9fff"; + + // axis labels + ctx.textAlign = "center"; + ctx.rotate(- Math.PI / 2); + ctx.fillText("Fan RPM", - height / 2, 12); // Y axis is rotated 90 degrees + ctx.rotate(Math.PI / 2); + ctx.fillText("Temperature", width / 2, height - 4); + // graph data labels + ctx.textAlign = "start"; // default + ctx.fillText("0", 2, height - 2); + ctx.fillText("100%", 2, 9); + ctx.textAlign = "right"; + ctx.fillText("100°C", width - 2, height - 2); + + ctx.moveTo(0, height); if (interpolGlobal) { - ctx.beginPath(); - ctx.moveTo(0, height); + //ctx.beginPath(); for (let i = 0; i < curveGlobal.length; i++) { const canvasHeight = (1 - curveGlobal[i].y) * height; const canvasWidth = curveGlobal[i].x * width; @@ -119,11 +154,8 @@ const Content: VFC<{ serverAPI: ServerAPI }> = ({serverAPI}) => { } ctx.lineTo(width, 0); //ctx.moveTo(width, 0); - ctx.stroke(); - ctx.fill(); } else { - ctx.beginPath(); - ctx.moveTo(0, height); + //ctx.beginPath(); for (let i = 0; i < curveGlobal.length - 1; i++) { const canvasHeight = (1 - curveGlobal[i].y) * height; const canvasWidth = curveGlobal[i].x * width; @@ -153,11 +185,10 @@ const Content: VFC<{ serverAPI: ServerAPI }> = ({serverAPI}) => { ctx.moveTo(canvasWidth2, canvasHeight2); ctx.lineTo(canvasWidth2, height); } - //ctx.moveTo(width, 0); - ctx.stroke(); - ctx.fill(); } + ctx.stroke(); + ctx.fill(); console.debug("Rendered fan graph canvas frame", frameCount); //console.debug("Drew canvas with " + curveGlobal.length.toString() + " points; " + width.toString() + "x" + height.toString()); //ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); @@ -194,35 +225,21 @@ const Content: VFC<{ serverAPI: ServerAPI }> = ({serverAPI}) => { ); } - const FieldWithSeparator = joinClassNames(gamepadDialogClasses.Field, gamepadDialogClasses.WithBottomSeparatorStandard); - // TODO handle clicking on fan curve nodes return ( -
-
-
- Current Fan Speed -
-
- {fanRpmGlobal.toFixed(0) + " RPM"} -
-
-
+ + {fanRpmGlobal.toFixed(0) + " RPM"} + -
-
-
- Current Temperature -
-
- {temperatureGlobal.toFixed(1) + " °C"} -
-
-
+ + {temperatureGlobal.toFixed(1) + " °C"} + = ({serverAPI}) => { /> } + + { egg++; }}> + {egg % 10 == 9 ? "by NGnius" : "v" + version} + + ); }; @@ -289,6 +313,8 @@ export default definePlugin((serverApi: ServerAPI) => { await backend.initBackend(); usdplReady = true; backend.getEnabled(); + name = await backend.getName(); + version = await backend.getVersion(); })(); let ico = ;