Home > Tasklist

Table of Contents

Introduction

This is a detailed overview of the Tasklist stream widget for Streamer.Bot and OBS. This widget can be used for project-focused or productivity streams. The widget will keep track of the user's and their audience's tasks and maintain an updated list live on screen. The widget has a customizable color scheme (see Configuration section) and includes a work and break timer.

Tasklist widget with a timer for working and breaks. The widget contains a list of example tasks.
Figure 1: Tasklist Widget for OBS and Streamer.Bot

Requirements

Download Code

Installation

Extract the Zip file. There should be two folders labeled assets and imports. The assets folder contains images for the OBS sources and the data file used by the Tasklist widget. The imports folder contains two files: Widget-Tasklist-OBS and Widget-Tasklist-SB. The OBS file is the import scenes for your OBS setup, and the SB file is the import actions for your Streamer.Bot client.

OBS Installation

For your OBS installation, make sure all required plugins listed in the Requirements section are installed. In OBS, click on the Tools option, Source Copy, and then Load Scene (Figure 2). Locate the Widget-Tasklist-OBS and open it. There should be one imported scene in the Scene list of your OBS setup (Figure 3). For this widget to appear in other scenes, it is recommended to add the Widget - Tasklist scene to the destined scene via nested scenes or the Downstrean Keyer plugin.

IMPORTANT NOTE: Do not rename the scenes or sources. The Streamer.Bot actions for the Tasklist widget will not function properly if the scenes or sources do not match.
OBS options from Source Copy plugin. Tools > Source Copy > Load Scene. This is to import the OBS import file to generate the scenes required for the widget.
Figure 2: Use the Source Copy plugin to import the scene file for the Tasklist widget in the scene collection.
Scene and Sources import in OBS.
Figure 3: The scenes added to the scene collection after importing the scene file into OBS.

If the widget does not appear as show in Figure 1, the OBS Shaderfilter for the scene may need to be reloaded. Right click on the Tasklist - Background source, open the Filters window, and reload the Rounded Corners filter. Repeat the same steps for Tasklist - Foreground (Figure 4).

Reload the Rounded Corner filters for the Tasklist-Background and Tasklist-Foreground sources.
Figure 4: Reload the Rounded Corner filters for the Tasklist - Background and Tasklist - Foreground sources if the widget does not appear as intended.

Streamer.Bot Installation

In the Streamer.Bot client, clock on the import option in the top menu. Drag the SB file into the Import String field. If done correctly, the Import Actions window should match the following image (Figure 5).

Streamer.Bot import window after importing Opinion Gauge Streamer.Bot file.
Figure 5: Streamer.Bot import window

After importing the widget, the following actions should appear in the Streamer.Bot client:

Configuration

Set File Path

For the Tasklist action, you will need to set a file path for the tasklist_data file located in the assets folder (Figure 6). This will maintain the Markdown source in OBS with the current tasklist.

Set file path to the tasklist_data file in the assets folder.
Figure 6: For the Tasklist action, set the file path to the tasklist_data file located in the assets folder.

Commands

The Tasklist widget has a default set of commands to interact with it. Table 1 contains the list of commands available.

Table 1: All available commands for the Tasklist widget.
Command Desctiption
!task, !addtask, !taskadd, !addtask Add a new task to the tasklist.
!done, !taskdone, !donetask, !finish, !finished Complete current task. Adding a number following the command like !done 3 will complete a specific task.
!tasklist, !mytasks, !mytask, !mylist, !mytasklist Shows current tasklist in the chat.
!completedtasks, !completedtask, !finishedtask, !finishedtasks Shows completed tasklist in the chat.
!timeset Set the timers (minutes) like the following !timeset 30/5. 30 minutes for work and 5 minutes for break.
!work Start the work timer.
!break Start the break timer.

Color Scheme

If you would like to change the color scheme for the Tasklist widget, right click on the source labeled Tasklist - Background and select Properties. From there, you can change the color properties to your preference. The same can be done for Tasklist - Foreground source. For added color customization, the Gradient plugin can be used to replace the color sources.

Access the source properties for Background and Foreground sources to customize the color.
Figure 7: The properties for the Tasklist - Background and Tasklist - Foreground sources can be accessed in order to customize the color scheme for the Tasklist widget. Alternatively, the Gradient plugin can be used for more color options.