Spinning Prize Wheel Update

Extensions Testing
1

Description

This is an updated version of Lyfesaver74’s Spinning Prize Wheel. Changelogs can be found at the bottom. Once testing is completed, I plan on replacing this documentation over the existing Spinning Prize Wheel

Spinning wheel used for all sorts of things to choose costumes, games, people, prizes… literally anything! This import includes an easy method to import into OBS, and most configuration can be done by editing the URL parameters. The wheel can be populated either by an included text file or by utilizing Streamer.bot’s User Groups system, meaning this works multi-platform over Twitch, YouTube, and Trovo.

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
  • User Group management in Streamer.bot

Video Example

This video is from the original Spinning Prize Wheel, and does not reflect the current version.

Import Code & Resources (Download)

Download the following zip containing everything you need
re-upload_spinningPrizeWheel-2.0.1.zip (41.1 KB)

Installation

Take the file spinningPrizeWheel.zip and extract the folder spinningPrizeWheel to somewhere you’ll remember.

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

image
image715×546 10.5 KB

Configuration

Most configuration will be done within the Prize Wheel 1. Settings action.

Variable Name Description Default Value
wsIpAddress Optional - Use only if connecting to a different PC 127.0.0.1
wsPort Optional - Use only if connecting to a different Websocket port 8080
img Optional - Provide a URL to an image to add that image to the center of the wheel
entriesGroupName Group name for entering users to be on the wheel Prize Wheel Entries
winningGroupName Group name for users that are selected by the wheel Prize Wheel Winner
sendAllPlatforms Setting to False will send only to to current platform True
sendAsBot This determines if messages sent will be sent from the connected bot account True
platforms Set which platforms to send messages to. Separate with a comma and no space is needed twitch,youtube,trovo
obsConnection OBS Connection ID to connect to. Connection ID list is zero-indexed 0
spinningWheelSceneName Name of nested scene to add wheel to [NS] Spinning Prize Wheel
spinningWheelSpinnerSourceName Name of browser source for the wheel spinner to use Wheel Spinner
spinningWheelWinnerSourceName Name of browser source for announcing the wheel winner Wheel Winner

Easy Install via Import Action (recommended)

  • Make sure you have the latest version of Source Copy (currently 0.2.4 as of this writing) installed
  • Configure settings in the action Prize Wheel 1. Settings, variables are explained in the table above
  • Go to the trigger Prize Wheel 2. Import, right-click the Core > Test, and click Test Trigger
  • A dialog will open up and you will need to navigate to where you extracted the spinningWheelFolder, select the index.html file, and select Open

If a scene is created, but no sources are created, then run the action Prize Wheel 2. Import a second time.

Manual Installation

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

  2. Create a new scene and match the name with what is set in the action Prize Wheel 1. Settings, Set global "spinningPrizeWheelSceneName"

  3. 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”

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

  5. 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.

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

  7. 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

  8. 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

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

  10. 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).

    image
    image817×328 20.9 KB

  11. 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.

Advanced 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).

  • 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.

Usage

You can have up to about 90 entries on the wheel before it starts to have graphical artifacts

Custom Entry Spin

These types of spins use the file names.txt to fill the wheel slices.

Action Name Description
Spin (Custom) This action will make the wheel visible, which will in turn start the wheel.
Custom Entries Add This will take %rawInput% and add it to the file names.txt. You can use triggers Command Triggered or Reward Redemption
Custom Entries Remove This will take %rawInput% and attempt to remove it from the file names.txt
Custom Entries Clear This will clear the entire file names.txt

User Entry Spin

These types of spins require viewers from the platforms twitch, youtube, or trovo to type a chat command !enter in order to be added to a user group, which then will populate the wheel slices. Each platform is accounted for when the user types the command.

Action Name Description
Spin (User Entries) This action will make the wheel visible, then the wheel will retrieve the list of users in the user group
User Entries Open This will enable the commands to enter or remove entry from the User Group
User Entries Close This will disable the commands to enter or remove entry from the User Group
Command Add User to Group The user who runs this command will be entered into the User Group to be part of the spin
Command Remove User from Group The user who runs this command will be removed from the User Group

Contributors

This extension was developed from a Codepen by Ryan Mulligan

Changelog

New Features

Updates