Custom Widget

--- title: Creating the Widget sidebar_label: "Creating the Widget" sidebar_position: 3 description: Creating a Widget image: "og/caffeinated/sdk/creating-the-widget-source.png" --- There are two sides to creating a widget: 1. Widget Side (The .jar that runs in Caffeinated) 2. Stream Side (The .html that runs in OBS or is embedded elsewhere) ## Messaging Widget Side and Stream Side can communicate with eachother over a Json based event system, this is done by implementing `Widget#onNewInstance()` and registering listeners using `WidgetInstance#on()` and sending messages back by using `WidgetInstance#emit()`. In our case, we just want to log some basic info for the purpose of demonstrating how the system works, so that's what we'll do: ```java @Override public void onNewInstance(@NonNull WidgetInstance instance) { instance.on("message", (JsonElement e) -> { // We just print the raw json. FastLogger.logStatic("Received message from a widget instance: %s", e); // instance.emit("mytype", mymessage); }); } ``` ## Initializing Stream Side We first need to load in our widget html, this is done by implementing `Widget#getWidgetBasePath()` and telling Caffeinated what resource it needs to load. Next, we implement `CaffeinatedPlugin#getResource()` and actually load the file from our Jar. ```java @Override public @NonNull String getWidgetBasePath(WidgetInstanceMode mode) { return "/chat"; } ``` ```java @Override public @Nullable Pair getResource(String resource) throws IOException { // Figure out the mime tpye of the requested file. String mimeType = "application/octet-stream"; String[] split = resource.split("\\."); if (split.length > 1) { mimeType = MimeTypes.getMimeForType(split[split.length - 1]); } // Read the file from our jar's resources. More advanced widgets can override // this behavior to serve a modern "site" such as React or Vue or SvelteKit. try (InputStream in = MyFirstPlugin.class.getClassLoader().getResourceAsStream(resource)) { return new Pair<>(IOUtil.readInputStreamString(in, StandardCharsets.UTF_8), mimeType); } } ``` Next, we need to make our widget html. The example provided just writes a simple chatlog on the screen (with some basic customization), but you can do anything you want. ```html Custom Widget ``` After creatring a new instance of this widget and loading it into OBS (or just a normal browser) you will see a basic chat history on the screen. ![The Stream Side in action](/images/caffeinated/sdk/stream-side.png) ## Note about events Koi events and music events are already sent to the Stream Side, so you don't need to implement your own event system. ## Note about frameworks Casterlabs places no restrictions on what can be loaded by your plugin, just keep in mind that if you use a framework you will need to set it's base path to `/$caffeinated-sdk-root$` otherwise the app will not know how to serve the contents (that string gets replaced on every loaded file). Example SvelteKit config [here](https://github.com/Casterlabs/caffeinated/blob/dev/app/BuiltInPlugins/src/main/widgets/svelte.config.js).

Casterlabs x Meld

Meld Studio Browser Layers

Meld Studio Chat Panel