Info Widgets and Customization

Create a script called Widget Info and imagine converting a video to another format. Once the conversion is complete, it outputs a path that you want to open on your system.


// converting video
let fullPath = await path();

To take action once the video is done, we're going to use a widget.

Creating a Basic Widget

As a basic example, we can create a widget with the state where the title is the full path.


await widget(`<h1>{{title}}</h1>`, {
state: {
title: fullPath,
},
});

When you run the WidgetInfo script and navigate into the desired directory, you'll see a widget opens. However, you can't do anything with it yet, as it just sits there.

Customizing the Widget

You can add various customizations to the widget to take action on it.

To make the widget full screen, add fullscreen: true. When you run the script now, you'll see It goes completely fullscreen, and you can dismiss it with escape.

If full screen is too much, you can create a centered overlay by setting center: true and transparent: true.

Styling the Widget

we can even style it a bit. We'll create a css variable and say the h1 is a font size of two rems and a purple color,


let css = `
h1{
font-size: 2rem;
color: purple;
}
`;

Then drop our css variable in our widget:


await widget(`<h1>{{title}}</h1>`, {
css,
center: true,
transparent: true,
state: {
title: fullPath,
},
});

Now if you run the script it will be nicely styled

When you run the script there's some resizing logic that we want to avoid. What's happening is the widget measures its internal content and then shrinks the window to fit that size. to fix this we can give it a predetermined size,


await widget(`<h1>{{title}}</h1>`, {
css,
center: true,
width: 800,
height: 600,
transparent: true,
state: {
title: fullPath,
},
});

Now, when you run the script, the widget will be displayed with the specified size and won't resize or reposition.

Adding Clickable Actions to Widgets

If you want to add an action when a widget is clicked, you can define an onClick event for the widget.


let w = await widget(`<h1>{{title}}</h1>`, {
css,
center: true,
width: 800,
height: 600,
transparent: true,
state: {
title: fullPath,
},
});
w.onClick(() => {
revealInFinder(fullPath);
exit();
});

Note: When dealing with transparent windows, you need to add pointer events back to the elements you want to click on. Otherwise, since the window is transparent, it won't receive those pointer events.


let css = `
h1{
font-size: 2rem;
color: purple;
pointer-events: all;
}
`;

Now, when you click on the widget, it will exit the script and perform an action, such as displaying the contents of your public directory.

This allows you to create interactive information pieces that can perform various actions in your script, instead of just having a prompt waiting for user input.

Transcript

00:00 Let's create a script called WidgetInfo, and then imagine you're converting a video to some other format. Once that's done, it outputs a path that you want to open on your system. Now, since you don't want a prompt in your face while you're waiting for your video to be converted,

00:16 but you still want to take action once the video is done, we're going to use a widget. As a basic example, we can say widget, and then this can have the state where the title is the full path. If I run the script WidgetInfo and I'll navigate into dev, hit write. I'll search for a script kit and I want to see my packages directory.

00:36 You'll see this widget opens, and I can't do anything with it right now, it just sits there. But we can add all sorts of things to this to take action on. For example, let's make this much more in your face. We'll say full screen true. That way when we run this, hit enter, you'll see this goes completely full screen, blocks everything else out, and you can dismiss it with escape.

00:55 If that's too much, center true and transparent true can give you information in a nice essentially centered overlay in your system. Hit escape to dismiss that, and we can even style it a bit. We'll say CSS and say the H1 is a font size of two rems,

01:14 and maybe like a color purple, then drop our CSS in here, and we'll run this, select our music directory or whatever, and it's a nice purple. If you want to avoid that resizing logic you see, since a widget measures its internal content and then shrinks the window to fit that size, you can give it a predetermined size,

01:33 so like width 800, height 600, or whatever. Now, this time when I run it, it won't resize, it will just sit there in the center and avoid the resizing and repositioning. If we want to add an action when we click on it, we can say that this W is our widget, and we'll say widget on click. For now, we'll just say reveal and find

01:52 your full path and then exit which will close the script completely. One caveat here is that once you're dealing with transparent windows, again, this is a non-transparent window, so we'll see the frame around it, and if I click on this, it exited the script, this opened on my other monitor, so I'll drag that up, you see it showed me where the desktop was.

02:11 But if you're dealing with a transparent window, you'll want to make sure to add pointer events back to the elements you want to click on. Otherwise, because it's transparent, it won't receive those pointer events, so I'll just go ahead and select my public directory. I can click on this now, it exits and shows me my public directory. So you have tons and tons of options when working with widgets to use them as

02:31 these interactive information pieces to do something else in your script, rather than just have a prompt sitting there waiting for user input.

More Tips