1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import {
ButtonItem,
PanelSection,
PanelSectionRow,
Navigation,
staticClasses
} from "@decky/ui";
import {
addEventListener,
removeEventListener,
callable,
definePlugin,
toaster,
// routerHook
} from "@decky/api"
import { useState } from "react";
import { FaShip } from "react-icons/fa";
// import logo from "../assets/logo.png";
// 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() {
return (
<div style={{ width: "100%", height: "100%" }}>
<iframe
src="https://example.com" // Replace with your desired URL
style={{
width: "100%",
height: "100%",
border: "none",
}}
title="WebPage Viewer"
></iframe>
</div>
);
}
export default definePlugin(() => {
console.log("Template plugin initializing, this is called once on frontend startup")
// serverApi.routerHook.addRoute("/decky-plugin-test", DeckyPluginRouterTest, {
// exact: true,
// });
// Add an event listener to the "timer_event" event from the backend
const listener = addEventListener<[
test1: string,
test2: boolean,
test3: number
]>("timer_event", (test1, test2, test3) => {
console.log("Template got timer_event with:", test1, test2, test3)
toaster.toast({
title: "template got timer_event",
body: `${test1}, ${test2}, ${test3}`
});
});
return {
// The name shown in various decky menus
name: "Web Plugin",
// The element displayed at the top of your plugin's menu
titleView: <div className={staticClasses.Title}>Decky Example Plugin</div>,
// The content of your plugin's menu
content: <Content />,
// The icon displayed in the plugin list
icon: <FaShip />,
// The function triggered when your plugin unloads
onDismount() {
console.log("Unloading")
removeEventListener("timer_event", listener);
// serverApi.routerHook.removeRoute("/decky-plugin-test");
},
};
});
|
