osu! Mappool Generator (Web Based)

A Mappool Generator for osu tournament livestreams
osu! Forum Post

How to Use the Generator

Go to the mappool-generator page to start using the program.
You'll be greeted with the first form right away, fill in all of the boxes for each pool for how many maps that you want, The max input for each pool is currently 10 for now, Then click next.
Fill in the next form boxes with the beatmap id that you want to use for each pool. For the API key, you need to request it from The API request page or by clicking the title on the form. If you want to change for how many maps that you want to use for each pool, you can click the previous button. If not, you can click next.
Then, You'll be greeted with the preview of the result! If you want to change your previous inputs, you can scroll down and click the previous button.
You can save the result to your local device by right clicking the page and click save as (Google Chrome) or save page as (Mozilla Firefox) or press ctrl/command + s, and save it in a folder so that you won't have to input the same mappool if you want to use that result multiple times. (Optional, but Recommended)
To use the result, left click on the blank left side of the map for banned map of blue team and right click for red team, left click the right side with the mod icon for selected map of blue team and right click for red team, and left click the middle area to unselect.

How to Use the Result with Broadcasting Software

In this how to, I'm using OBS (Open Broadcaster Software) as my broadcasting software. If you use another software, please refer to their manual while you go through this tutorial.

Using Window Capture as Source

Open your Broadcasting Software and add "Window Capture" from the sources. You can rename the source to anything you want, once you're done, you can click the ok button.
Change the window to the browser window (in this case, it's chrome) where you open the mappool generator website, then click ok.
If your broadcasting software aren't able to display chrome correctly (black screen), follow these steps (If not, you can skip these steps):
1. On the top right corner of chrome, there's a three dot menu, click it and select settings.
2. Search for "Hardware Acceleration", and disable it, then relaunch chrome.
Right click the source that you just added, and choose filters.
On the filters window, add the crop/pad filter to the effect filters, you can rename the filter if you want to. In this tutorial, I only want to crop the top bar of the window, so I only fill in the top input to 90.
Then add another filter called Chroma key to the Effect Filters, you can rename the filter if you want to. If you notice the TB icon, it also disappears because of the chrome key, you need to change similarity from 400 to 350.
Then you can close the filters window and you're done! It will look more or less something like this.

Using Browser as Source

Open you Broadcasting Software and add "Browser" from the sources. You can rename the source to anything you want, once you're done, you can click the ok button.
Then, You'll be greeted by the Browser Source Properties Window. Follow one of these steps:
- If you follow Step 5 from "How to Use the Generator" section, you can check the local file and browse the html file that you just saved.
- Or, You can directly enter the generator website URL into the Browser source properties by unchecking the local file. Here's the URL: https://mrayhanhakim.github.io/mappool-generator
Change the width and height of the source, I'm using 1920 for width and 1080 for height.
To remove the green background from the result, Add this to the Custom CSS box:
```
#resultWrapper {
  background-color: rgba(0, 0, 0, 0);
}
```
You can change the background color instead if you want since it's using RGB Color (integer) and alpha level from 0 - 1 (decimal) for the color. If you're done customizing, click ok to close the properties window
Right click the source and choose interact to use the generator/result.

If you follow step 1 using local file, you can directly follow Step 6 from "How to Use the Generator" Section.
If not, follow the steps from "How to Use the Generator" Section to use the generator.

(Note: Uncheck "Shutdown source when not visible" and "Refresh browser when scene becomes active" if it's checked in the browser properties).