diff --git a/README.md b/README.md index 2e63574..e9807ef 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# React-Frontend Plugin Template [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://deckbrew.xyz/discord) +# Decky Plugin Template [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://deckbrew.xyz/discord) -Reference example for using [decky-frontend-lib](https://github.com/SteamDeckHomebrew/decky-frontend-lib) in a [decky-loader](https://github.com/SteamDeckHomebrew/decky-loader) plugin. +Reference example for using [decky-frontend-lib](https://github.com/SteamDeckHomebrew/decky-frontend-lib) (@decky/ui) in a [decky-loader](https://github.com/SteamDeckHomebrew/decky-loader) plugin. ### **Please also refer to the [wiki](https://wiki.deckbrew.xyz/en/user-guide/home#plugin-development) for important information on plugin development and submissions/updates. currently documentation is split between this README and the wiki which is something we are hoping to rectify in the future.** @@ -29,7 +29,7 @@ If you would like to build plugins that have their own custom backends, Docker i - These setup pnpm and build the frontend code for testing. 3. Consult the [decky-frontend-lib](https://github.com/SteamDeckHomebrew/decky-frontend-lib) repository for ways to accomplish your tasks. - Documentation and examples are still rough, - - While decky-loader primarily targets Steam Deck hardware so keep this in mind when developing your plugin. + - Decky loader primarily targets Steam Deck hardware so keep this in mind when developing your plugin. 4. If using VSCodium/VSCode, run the `setup` and `build` and `deploy` tasks. If not using VSCodium etc. you can derive your own makefile or just manually utilize the scripts for these commands as you see fit. If you use VSCode or it's derivatives (we suggest [VSCodium](https://vscodium.com/)!) just run the `setup` and `build` tasks. It's really that simple. diff --git a/main.py b/main.py index 17f1b15..65a10da 100644 --- a/main.py +++ b/main.py @@ -13,7 +13,8 @@ class Plugin: async def long_running(self): await asyncio.sleep(15) - await decky.emit("test_event", "Hello from the backend!", True, 2) + # Passing through a bunch of random data, just as an example + await decky.emit("timer_event", "Hello from the backend!", True, 2) # Asyncio-compatible long-running code, executed in a task when the plugin is loaded async def _main(self): diff --git a/src/index.tsx b/src/index.tsx index 3e82019..16cd6cb 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -13,18 +13,21 @@ import { toaster, // routerHook } from "@decky/api" -// import { call, callable } from "@decky/backend"; import { useState } from "react"; import { FaShip } from "react-icons/fa"; // import logo from "../assets/logo.png"; -// interface AddMethodArgs { -// left: number; -// right: number; -// } +// This function calls the python function "add", which takes in two numbers and returns their sum (as a number) +// Note the type annotations: +// the first one: [first: number, second: number] is for the arguments +// the second one: number is for the return value const add = callable<[first: number, second: number], number>("add"); + +// This function calls the python function "start_timer", which takes in no arguments and returns nothing. +// It starts a (python) timer which eventually emits the event 'timer_event' const startTimer = callable<[], void>("start_timer"); + function Content() { const [result, setResult] = useState(); @@ -40,7 +43,7 @@ function Content() { layout="below" onClick={onClick} > - {result || "Add two numbers via Python"} + {result ?? "Add two numbers via Python"} @@ -58,7 +61,7 @@ function Content() { */} - + {/* { @@ -68,34 +71,44 @@ function Content() { > Router - + */} ); }; export default definePlugin(() => { + console.log("Template plugin initializing, this is called once on frontend startup") + // serverApi.routerHook.addRoute("/decky-plugin-test", DeckyPluginRouterTest, { // exact: true, // }); - // console.log("init plugin", call, callable) + + // Add an event listener to the "timer_event" event from the backend const listener = addEventListener<[ test1: string, test2: boolean, test3: number - ]>("test_event", (test1, test2, test3) => { - console.log("Template got event", test1, test2, test3) + ]>("timer_event", (test1, test2, test3) => { + console.log("Template got timer_event with:", test1, test2, test3) toaster.toast({ - title: "template got event", + title: "template got timer_event", body: `${test1}, ${test2}, ${test3}` }); }); + return { - title:
API v2 Example Plugin
, + // The name shown in various decky menus + name: "Test Plugin", + // The element displayed at the top of your plugin's menu + titleView:
Decky Example Plugin
, + // The content of your plugin's menu content: , + // The icon displayed in the plugin list icon: , + // The function triggered when your plugin unloads onDismount() { console.log("Unloading") - removeEventListener("test_event", listener); + removeEventListener("timer_event", listener); // serverApi.routerHook.removeRoute("/decky-plugin-test"); }, };