Overlay Manager
+ Show Spoiler [Preface] +
Overlay Manager is a program I wrote to help me stream with an overlay on my awful computer. It's designed to use more ram than CPU where possible. It uses winapi calls similar to SCFH-DSF and R1CH's XSplit Scene Switcher.
The program adds overlay functionality to any program that streams. It was the first project I started in C#, and one of the largest projects I've worked on so far. I make no guarantees about the program working on your computer, or destroying it and stealing your girlfriend. Use at your own risk. Right now it lets you display text, images, video, and webcams on your desktop (so you can see them as well) and display images directly to the stream (so only the audience can see them). This is just a project for very basic streaming that I made and would like to share. If you need higher level functionality then I encourage you to invest in XSplit.
The program adds overlay functionality to any program that streams. It was the first project I started in C#, and one of the largest projects I've worked on so far. I make no guarantees about the program working on your computer, or destroying it and stealing your girlfriend. Use at your own risk. Right now it lets you display text, images, video, and webcams on your desktop (so you can see them as well) and display images directly to the stream (so only the audience can see them). This is just a project for very basic streaming that I made and would like to share. If you need higher level functionality then I encourage you to invest in XSplit.
Update: V0.2 (8/4/2012)
- You can now see a list of all of the programs running the filter and select which one overlay manager connects to.
- You now have control over the memory that the filter checks to go between in-game and out-of-game states (use at your own risk, you might set off Warden using this incorrectly and get your account banned). I'll keep a list of common program hooks under "Interacting with the filter" below.
- Cameras, to conserve CPU, will now turn off if they aren't visible in any window, and turn on again when you show them. So if you set the window that has your camera element in it to hide when in-game, it wont slow your game down when it's not showing.
- Videos have a loop option, and options to hide the filter images/other visible overlay windows when playing, and then will set everything back when they're stopped (so you can easily play full screen videos without having to manually change the rest of your overlay before and after)
- You can refresh your list of cameras (in case you plug a camera into your computer after the program has started) using Etc->Refresh Camera List
- Numerous bug fixes (and new bugs added with the new features )
- The filter now works with the latest versions of FFSplit! That means free x264 encoding
System Requirements:
Windows Vista or Windows 7
Microsoft .NET Framework 4
A streaming program like FMLE, FFSplit or XSplit
Installing:
>>>>Download V0.2 (8/4/2012) Here<<<<
+ Show Spoiler [Install directions for latest version] +
1) Download the Zip file.
2) Unzip the files inside and move them to some place where you want to keep them.
Inside you'll find 6 files:
If you ever want to move toboe_lite.ax, you'll have to unregister it and then register it again in the new location. Remember to also move filter_props.conf! If the filter can't find filter_props.conf where it was registered, it will make a new one somewhere else (usually inside the folder of the streaming program).
3) Run RegisterFilter.bat - make sure you run it as an administrator (right click the file -> "Run as administrator")
If you ever get into any trouble with registering or unregistering filters, try DirectShow Filter Manager, (which you still have to run as an administrator to make changes!)
You probably want to make a shortcut to Overlay Manager somewhere convenient to you. You can move the executable if you want, but be aware that it's going to make another settings.conf where ever it goes if it doesn't find one.
2) Unzip the files inside and move them to some place where you want to keep them.
Inside you'll find 6 files:
- toboe_lite.ax - This is the filter that other programs (FMLE, VLC, FFSplit, XSplit) can use to capture your screen. It also detects the state of SC2 to adjust your overlays in Overlay Manager
- filter_props.conf - this is a small text file that contains the width, height, and frame rate that you want the filter to capture. You can edit this when your program doesn't offer another way to change these settings (e.g. FFSplit). You can edit this with notepad. This file must be in the same directory as where you register your filter.
- RegisterFilter.bat - this registers the toboe_lite.ax filter with Windows. Note: the filter must stay in the same directory as when you registered it for the filter to work.
- UnregisterFilter.bat - this unregisters the toboe_lite.ax filter with Windows. Again, it must be run inside the same directory as the filter. You must run this as administrator!
- OverlayManager.exe - this program lets you design and display your overlay and can be controlled by the filter to automatically update when SC2 is in our out of a game.
- settings.conf - this keeps some information about how you have the manager set up. You can edit it with notepad if you need. This needs to be in the same directory as OverlayManager.exe
If you ever want to move toboe_lite.ax, you'll have to unregister it and then register it again in the new location. Remember to also move filter_props.conf! If the filter can't find filter_props.conf where it was registered, it will make a new one somewhere else (usually inside the folder of the streaming program).
3) Run RegisterFilter.bat - make sure you run it as an administrator (right click the file -> "Run as administrator")
If you ever get into any trouble with registering or unregistering filters, try DirectShow Filter Manager, (which you still have to run as an administrator to make changes!)
You probably want to make a shortcut to Overlay Manager somewhere convenient to you. You can move the executable if you want, but be aware that it's going to make another settings.conf where ever it goes if it doesn't find one.
+ Show Spoiler [upgrade instructions from V0.1->V0.2] +
If you had version 0.1 and you want to upgrade to 0.2, you need to:
- copy the new toboe_lite.ax over the old one
- in the directory where toboe_lite.ax is located, copy the new file, filter_props.conf and RegisterFilter.bat
- Run RegisterFilter.bat. This now also adds the location of filter_props.conf to the registry. You don't have to run UnregisterFilter.bat first.
- Copy the new OverlayManager.exe over the old one
>>>>Tutorial Video Here!<<<<
This video was made with V0.1, so some things are outdated. I will make a new video soon!
This video was made with V0.1, so some things are outdated. I will make a new video soon!
Guide for use with FMLE:
+ Show Spoiler +
Once you've unzipped everything to where you want it and registered the toboe_lite.ax filter, start FMLE. You should find 'Toboe Lite' listed as an option for your video device. Select that.
You can adjust how much of the screen it captures by changing the "Input Size" in FMLE. Similarly, to change the framerate, just change it in FMLE.
For tutorials covering all of the other options in FMLE and how to get the best setup (including adjusting the program priorities and cpu-core affinities), please check out Day[9]'s FMLE guide and Destiny's FMLE guide.
You probably want to save your FMLE profile by going to File->Save Profile (I also suggest making a back-up save since FMLE tends to randomly say your profile is invalid and then delete it...)
I highly suggest using the command-line version of FMLE to save some resources. You can find it in the same folder as FMLE but called FMLECmd.exe. The command-line version uses whatever profile you used last, so to make changes you'll have to go back into the GUI version.
I've streamed 720p for 5+ hours multiple times using FMLE and my overlay, so I can definitely tell you this is stable.
You can adjust how much of the screen it captures by changing the "Input Size" in FMLE. Similarly, to change the framerate, just change it in FMLE.
For tutorials covering all of the other options in FMLE and how to get the best setup (including adjusting the program priorities and cpu-core affinities), please check out Day[9]'s FMLE guide and Destiny's FMLE guide.
You probably want to save your FMLE profile by going to File->Save Profile (I also suggest making a back-up save since FMLE tends to randomly say your profile is invalid and then delete it...)
I highly suggest using the command-line version of FMLE to save some resources. You can find it in the same folder as FMLE but called FMLECmd.exe. The command-line version uses whatever profile you used last, so to make changes you'll have to go back into the GUI version.
I've streamed 720p for 5+ hours multiple times using FMLE and my overlay, so I can definitely tell you this is stable.
Guide for use with FFSplit:
+ Show Spoiler +
Fuck yeah, free x264 encoding and computer/mic audio mixing!
The first thing I'm going to say is FFSplit, at this point, is unstable. And it's not FFSplit's fault. It's because FFMpeg, the program FFSplit uses to stream the video out, is not programmed very well for the windows environment and wasn't initially designed to livestream at higher bandwidths (seriously, go look at the source code for ffmpeg/live555, it's awful). So please keep that debug window open and keep an eye out for your stream stopping because FFMpeg crashed. When in doubt, put your settings lower to keep everything more stable.
Once you've unzipped everything to where you want it and registered the toboe_lite.ax filter, open up FFSplit. You should find Toboe Lite under video source.
Because FFSplit doesn't offer a way to bring up the property pages for the filter's pins, you'll have to edit the filter_props.conf file that should be in the same location as toboe_lite.ax. You can just open it up with notepad. The first line is your screen width, the second line is your screen height, and the last line is your framerate. Once you have that saved and have the other settings in FFSplit where you want them, you can just hit START. I suggest trying "Record to Hard Drive" first to check your quality settings and stability.
Hint: The Stream value doesn't have to start with rtmp://live.justin.tv/app! You can find the best server for you using R1CH's pinging tool. Then use this list to see the url of the server you should connect to. More details about that can be found in this guide.
The first thing I'm going to say is FFSplit, at this point, is unstable. And it's not FFSplit's fault. It's because FFMpeg, the program FFSplit uses to stream the video out, is not programmed very well for the windows environment and wasn't initially designed to livestream at higher bandwidths (seriously, go look at the source code for ffmpeg/live555, it's awful). So please keep that debug window open and keep an eye out for your stream stopping because FFMpeg crashed. When in doubt, put your settings lower to keep everything more stable.
Once you've unzipped everything to where you want it and registered the toboe_lite.ax filter, open up FFSplit. You should find Toboe Lite under video source.
Because FFSplit doesn't offer a way to bring up the property pages for the filter's pins, you'll have to edit the filter_props.conf file that should be in the same location as toboe_lite.ax. You can just open it up with notepad. The first line is your screen width, the second line is your screen height, and the last line is your framerate. Once you have that saved and have the other settings in FFSplit where you want them, you can just hit START. I suggest trying "Record to Hard Drive" first to check your quality settings and stability.
Hint: The Stream value doesn't have to start with rtmp://live.justin.tv/app! You can find the best server for you using R1CH's pinging tool. Then use this list to see the url of the server you should connect to. More details about that can be found in this guide.
The Overlay Manager:
+ Show Spoiler +
When you first open the Overlay Manager, you'll be greeted by... nothing much. But that's because you don't have an overlay yet. Before we start making one, let's learn about our environment.
There are 3 panels to the overlay manager. You can make each of them appear or disappear using their respective buttons under "View".
You can adjust the sizes of each panel by dragging the gray bars between them.
There are 3 panels to the overlay manager. You can make each of them appear or disappear using their respective buttons under "View".
- The left-most panel is the tree view of all of your windows and their elements.
- The middle panel gives you more information about and a preview of the window you have selected in the tree view
- The right panel is a list of shortcuts to various properties of your overlay. This way you can quickly access and edit certain properties of your overlay without searching for them in the other two panels.
You can adjust the sizes of each panel by dragging the gray bars between them.
Building your Overlay - Windows and Elements:
+ Show Spoiler [Overview] +
Each overlay is made up of elements - bits of text, images, videos (which includes animated gifs), and webcam feeds. Every element must be inside of a window.
You should arrange elements into windows so that can you move, hide, or show sets of elements around the screen as a group, instead of having to adjust individual ones. So if you wanted a name plate for the game you're casting, you could hide the whole window while you edit the elements corresponding to the names, races and colors of the players. Or a bracket. Or whatever you want!
You can create a window by going to Windows->New Window
You'll see a "New Window" pop up in the Tree View panel (as long as you have it showing), and some default properties in the Information Panel.
You'll also see the window appear in the default position in the top left of your monitor as a gray box.
Let's first cover those buttons you see in the Window panel, from left to right:
In the Information panel you'll see the Name of the window (names are used for organizing your shortcuts and listing in the Tree Panel), followed by the Height, Width, and x,y position on the screen. You'll see some odd 'v' and '^' buttons (used to change the layer-order of the elements in the window i.e. what's in front) and a "preview" check box that lets you see and edit the window even when it's not visible.
You can now either go back to the Windows menu, or right click the window in the Tree View, to add some items. You can also delete the window and any of the elements you make in the same menus.
When you add an item, you'll see it added to the list of items shown in the top of the Information Panel. You can click on the little "x,y" graphic there to get to some more attributes of the element. The 'Fill' option will keep the element size the same size as the window in which it is contained. You can change the size and drag the element around in the preview of the window.
You should arrange elements into windows so that can you move, hide, or show sets of elements around the screen as a group, instead of having to adjust individual ones. So if you wanted a name plate for the game you're casting, you could hide the whole window while you edit the elements corresponding to the names, races and colors of the players. Or a bracket. Or whatever you want!
You can create a window by going to Windows->New Window
You'll see a "New Window" pop up in the Tree View panel (as long as you have it showing), and some default properties in the Information Panel.
You'll also see the window appear in the default position in the top left of your monitor as a gray box.
Let's first cover those buttons you see in the Window panel, from left to right:
- Visible - shows and hides your window (and all of it's children)
- Dragable - makes it so you can click on the window and drag it around the screen to where you want it You can't do this until you have an element in the window to actually click on!
- Resizeable - makes that grey bar appear/disappear around your window so you can resize it
- Game-Triggered - When connected to the filter, the visibility of this window will toggle when SC2 enters or leaves a game.
In the Information panel you'll see the Name of the window (names are used for organizing your shortcuts and listing in the Tree Panel), followed by the Height, Width, and x,y position on the screen. You'll see some odd 'v' and '^' buttons (used to change the layer-order of the elements in the window i.e. what's in front) and a "preview" check box that lets you see and edit the window even when it's not visible.
You can now either go back to the Windows menu, or right click the window in the Tree View, to add some items. You can also delete the window and any of the elements you make in the same menus.
When you add an item, you'll see it added to the list of items shown in the top of the Information Panel. You can click on the little "x,y" graphic there to get to some more attributes of the element. The 'Fill' option will keep the element size the same size as the window in which it is contained. You can change the size and drag the element around in the preview of the window.
Text Elements:
+ Show Spoiler +
Text elements will display the text you write in the Data value for the element.
The data of a text element supports the following BBcode-style tags:
The tag will last until you add the closing tag (with the exception of the new line and align tags). Note that the data boxes for text elements can be multiple lines (just hit enter to add a new one), so you don't have to use the [br] tag, but you can if that makes it easier for you to manage your overlay.
The data of a text element supports the following BBcode-style tags:
[align=value] where value is left, right or center. This lasts for the whole text element.
[size=value][/size] where value is some integer value
[font=value][/font] where value is the font name
[color=value][/color] where value is either a 6-hex html code (e.g. #FFFFFF for white) or a common color name (orange)
[b][/b] bold
[i][/i] italics
[u][/u] underline
[br] new line
The tag will last until you add the closing tag (with the exception of the new line and align tags). Note that the data boxes for text elements can be multiple lines (just hit enter to add a new one), so you don't have to use the [br] tag, but you can if that makes it easier for you to manage your overlay.
Image/Video Elements:
+ Show Spoiler +
These will display still/animated files from your computer. Just put the file location in the Data value. Hid
Video elements have 3 check boxes:
Q: What's the difference between pause and stop?
A: They both stop the video. If you press play after pressing pause, it will resume the video from where you left off. If you press play after pressing stop, it will play the video from the beginning
Video elements have 3 check boxes:
- Loop will loop the video when it reaches the end.
- Hide Filter Image will hide the images that filter is displaying (both in and out of game) when you press play, and then show them when the video ends or you hit stop.
- Hide Other Windows will keep a list of any overlay manager windows that are visible when you press play and then hide them. When the video stops playing (or you hit stop), it will then show those windows again.
Q: What's the difference between pause and stop?
A: They both stop the video. If you press play after pressing pause, it will resume the video from where you left off. If you press play after pressing stop, it will play the video from the beginning
Camera Elements:
+ Show Spoiler +
Select the camera element you'd like to use. If you plugged your camera in after you started the program, use Etc->Refresh Camera List. To make things real meta, you can select Toboe Lite. so you can have your screen with your overlay in your overlay on your screen
You can adjust the width and height of your camera's resolution (e.g. if your camera supports full screen and wide screen) by changing the values and hitting 'Apply'. Streaming a camera is expensive on your cpu, so having no instances of the camera visible (and remember, the preview counts!) will turn off your camera. It will turn back on when you make one of the windows that contains it visible. This (rarely) freezes the program, so be careful!
You can adjust the width and height of your camera's resolution (e.g. if your camera supports full screen and wide screen) by changing the values and hitting 'Apply'. Streaming a camera is expensive on your cpu, so having no instances of the camera visible (and remember, the preview counts!) will turn off your camera. It will turn back on when you make one of the windows that contains it visible. This (rarely) freezes the program, so be careful!
Saving/Sharing your overlay - Saving/Loading XML:
+ Show Spoiler +
When you've got things set the way you like, you can save your overlay and its shortcut set-up to an XML file (Which you could also edit with notepad if you wanted) by going to Xml->Save.
This includes your shortcuts and filter properties.
The location of the last xml file you had open will be saved in the settings.conf file and will automagically load when you next start the program.
In the future there will be an option to save your entire overlay - including images and videos - to a zip file, so you can easily work in a team to develop your streaming overlay.
This includes your shortcuts and filter properties.
The location of the last xml file you had open will be saved in the settings.conf file and will automagically load when you next start the program.
In the future there will be an option to save your entire overlay - including images and videos - to a zip file, so you can easily work in a team to develop your streaming overlay.
Interacting with the filter:
+ Show Spoiler +
If you want the windows in your overlay to toggle their visibility when SC2 goes in and out of game, you need to connect with a Toboe Lite filter you have running in FMLE/VLC/FFSplit/xSplit.
You can do this by selecting View->Filter Properties. Hit refresh to see a list of programs running Toboe Lite (note programs like skype keep an active instance of every video capture filter you have running, so they may be listed too).
Once you have selected the filter (make sure it's highlighted) click Connect. Overlay Manager will connect to the filter. If the filter already has values in it for the images or program to hook, it will reload those back to the Overlay Manager (this is for when Overlay Manager crashes but the filter is still running), otherwise it will automatically apply the settings you have in the dialog box.
You can edit these settings and then hit apply to change them on the filter. These settings are saved with your overlay when you use XML->save.
!WARNING!WARNING!WARNING!Changing the hook, address and out value is dangerous. You are reading memory here, and reading in the wrong location can not only cause programs to crash, but can also set off blizzard's warden to ban your account for cheating. ok maybe not but just in case, it's not my fault! Be careful!
+ Show Spoiler [common hooks] +
Found a hook? Please post it on this thread or PM me!
You can do this by selecting View->Filter Properties. Hit refresh to see a list of programs running Toboe Lite (note programs like skype keep an active instance of every video capture filter you have running, so they may be listed too).
Once you have selected the filter (make sure it's highlighted) click Connect. Overlay Manager will connect to the filter. If the filter already has values in it for the images or program to hook, it will reload those back to the Overlay Manager (this is for when Overlay Manager crashes but the filter is still running), otherwise it will automatically apply the settings you have in the dialog box.
You can edit these settings and then hit apply to change them on the filter. These settings are saved with your overlay when you use XML->save.
!WARNING!WARNING!WARNING!Changing the hook, address and out value is dangerous. You are reading memory here, and reading in the wrong location can not only cause programs to crash, but can also set off blizzard's warden to ban your account for cheating. ok maybe not but just in case, it's not my fault! Be careful!
- Hook: This is the window whose memory you want to check. Hitting ctrl+shift+esc and looking at the name in the Applications tab will let you know what this should be.
- Address: This is the hex-formatted location in the memory you want to look at. Please note, for safety, Overlay Manager will only look at the single byte that you point at.
- Out Value: This is the integer value you are expecting to see when you want the overlay to be in "out of game" mode. This is usually a space that the program keeps to 0 when it is out of game.
+ Show Spoiler [common hooks] +
Game/Version: Hook: Address: Out Value:
SC2/1.5.2 StarCraft II 270d43c 0
SC2/1.5.1 StarCraft II 2708064 0
SC2/1.5.0 StarCraft II 2709064 0
Found a hook? Please post it on this thread or PM me!
Shortcuts:
+ Show Spoiler +
When you start building complicated overlays you'll notice it becomes hard to edit key information. That's what shortcuts are for. At the top of the shortcut Panel, you can select what window/element you want and select what attribute of that window/element you want to have quick access to. When you hit the + button, it will be added to your shortcuts. You can use the - button to remove it. the v and ^ let you organize the order of your shortcuts. Remember, these are saved in your XML.
Report Bugs:
Please PM me here, or email toboesc@gmail.com with your relevant set up (OS, hardware) and how to reproduce the bug.
+ Show Spoiler [Known Bugs] +
- confirmed Having a video playing in a window and then opening the preview when that window is selected will usually break the video controls (like play/stop)
Planned Features:
- Save overlay to zip (including resources), and load from Zip to make sharing overlays even easier
- Displaying windows directly to the filter (instead of just images) using the View->Filter Properties dialog. This can't really happen until Microsoft fixes parts of WPF...
- Add the "shape" element, allowing you to draw circles, squares, other predefined shapes, and free-form areas on the screen
- Add the "html" element, which will display a webpage url you provide. This means you can have live feeds (e.g. automatically-updating twitter feeds or a bracket that automatically refreshes), or embedded flash videos/streams.
- Add configurable hotkeys that allow you to switch aspects of your elements/windows and add an easy way to quickly add new elements or draw shapes on the screen
- Add a "lite" or "production" menu option that hides everything except the shortcut panel
FAQ
Q: Why does the interface for the manager look so awful?
A: This is a very utilitarian program and I want to minimize having to draw fancy things on the management interface that your streaming audience shouldn't even be seeing. When you're actually streaming, you can remove the window preview in the information panel, hide the Tree Panel and the Information Panel, and even hide the area above the shortcuts list to minimize clutter.
Q: Can you add x feature?
A: Maybe! please PM me or post here and I'll see how feasible it is. Right now the program works as well as I need it to so I won't be investing too much more time into it. At least until I can end my job search.
tl;dr-
+ Show Spoiler +