Spinning Prize Wheel

[Lyfesaver]

Description

Spinning wheel used for all sorts of things to choose costumes, games, people, prizes… literally anything!

The core of the extension is also a prime example of HTML/CSS/JS using:

• Bi-directional websocket communication, incl variables
• URL parameters for variables
• Read from local file

Video Example

Wheel Spinner

Import Code (Download)

wheel-spinner.sb (1.6 KB)

Resources (Download)

Download the following zip containing everything you need
Wheel Spinner-v1.3.zip (10.1 KB)

Installation

In Streamer.bot click the Import button in the top menu. Drag the .sb file into the Import String field.

1. Extract the zip’s contents into a folder (usually a folder containing your streaming assets).

2. In OBS add a browser source, name it “Wheel Spinner”
   a. Tick "Local file" & navigate to the index.html file in the new “Wheel Spinner” folder.
   b. Set size to be 1920 x 1080
   c. Tick both “Shutdown source when not visible” & “Refresh browser when scene becomes active”

3. In OBS add a browser source, name it “Wheel Winner”
   a. Leave “local file” unticked (leave the URL as it is, dont change it)
   b. Set size to be 1920 x 1080
   c. Tick both “Shutdown source when not visible” & “Refresh browser when scene becomes active”

4. Go into the new folder named “Wheel Spinner” and then into the folder “Wheel Winner” then double-click the index.html file to open it in your default browser.

5. Go to the top address bar and copy the entire address, including the starting from the "file:///.." to the ending "../index.html"

6. In Streamer.bot go to the “Wheel Winner” action and double-click the Set OBS Browser Source URL sub-action
   a. Set the Scene and Source fields to point to the “Wheel Winner” source you just created for both of the Set Source Visibility sub-actions
   b. Paste the URL you just copied from the address bar in front of the ?name=%winner% that is already there so it is all one string

7. In Streamer.bot go to the “Wheel Spinner” action and set the Scene and Source fields to point to the “Wheel Spinner” source you just created for both of the Set Source Visibility sub-actions

8. Enable the !spinw command in Streamer.bot Commands tab

9. If it is not running, start the Websocket Server and and tick “Auto Start”. If you have changed the address port, you will need to change the script.js file to match (around line 31).
   

   

10. Type !spinw in chat to see it in action

Updating

If you have already installed this extension, you can update by simply downloading the new zip under Resources back toward the top of this page and then overwriting the old files with the new by unzipping on top of them.

Configuration

Advanced configuration is done by editing the script.js file in your "Wheel Spinner" folder using any text editor (VS Code, Notepad++, Notepad, etc).

1. The names/values for each slice of the wheel can be sourced from two places:
   a. Lines 3-10 of the script.js file
   b. Each line of the included ‘names.txt’ file in the “Wheel Spinner” folder

2. To only use variables and not use the names.txt file, simply delete it.

3. Since version 1.3, the wheel will auto size/slice by just the names in the text file or the number of constants starting on line 3

4. You can also change the colors for each section if you want by changing the HSL values (Google if you need to find the HSL of your colors) by editing the values on (or around) lines 41-48 of script.js file.

5. You can change the center image by changing the image link on line (or around line) 52

Additional Tips & Tricks

Wheel as a Random Chatter Picker

First you will need to import this additional code for an action that will maintain the list.

recchatters.sb (1.9 KB)

Once you have imported the code above, go to the RecChatters action (in the Most Recent Chatters group) and double click the Execute Codesub-action. Inside the code editor change lines:

• 11 to point to the location of the names.txt file for the Wheel Spinner.
• 12 to be the number of names to maintain. It starts counting from 0, so for 16 chatters the number would be 15 (0 to 15 equals 16).

Wheel as a Giveaway Picker.

Using Streamer.bot’s Write to File sub-action, create an action that will write to the Wheel’s names.txt file each line with a %userName% and then create a Command trigger of !join or whatever you want to name the command.

Sub-action: Core > File IO > Write to File

1. Click the three dots and navigate to the names.txt file from the zip
2. Tick Append to file box
3. enter %userName% in the text field (with a capital N)
   
   

Contributors

Lyfesaver74 & Whipstickgostop

This extension was developed from a Codepen by Ryan Mulligan