Usage Documentation

Learn how to use Collab Tools

About This Site

Learn how to use Collab Tools

Collab Tools is a toolset website specifically designed for osu! meetups / Collabs (though its uses are actually broader).

Before this, many related features had already been implemented by other tools or projects, but I still chose to try making this for the following reasons:

Flexible: As a frontend project built with Next.js, it can be used on any platform with just a browser, and it also supports self-deployment, which is simple and fast;
Secure: Don't want anyone other than Collab members to know? No problem!
Integrated: Starting from small features, gradually covering all steps of the Collab process;

The source code of this project can be viewed on GitHub, and we look forward to your feedback or contributions!

Avatar Card Generator

Generate various styles of user avatar cards

This feature is inspired by many osu! bots, where group users can generate user cards with a short command. However, if you happen to not have access to an instance with this feature deployed, or simply don't want others in the group to know about it... it could be a bit troublesome.

To avoid such awkwardness, you can try using this tool to ~~secretly~~ generate small cards for Collab members——heh heh, don't tell them!

Experimental Feature

This tool is still in active development and may undergo unexpected major changes. Please stay tuned.

Tip

The card styles generated by this tool may not be identical to those output by osu! bots, as the two have no code relationship.

If you want to improve existing styles or have new ideas, welcome to submit Issues or PRs to the project repository to contribute.

To generate an avatar card, you need:

User's avatar link, for osu! official servers it should be similar to https://a.ppy.sh/user_id;
Username;
If needed, you can fill in a two-letter country/region code to display the country/region flag on the card;
Select style, preview the generated card, download the image——done!

ImageMap Editor

Quickly create image maps

osu! profiles have BBCode (osu! wiki) support for imagemaps, but the positions and sizes of various areas in the image still need to be defined manually.

Currently, when creating imagemaps, most users choose to use image editors and calculate based on the coordinates of the area's four corners; or use browser developer tools to assist in locating mapped areas, which can be difficult when there are many areas and requires a considerable amount of time to precisely adjust various parameters.

You can use the interactive interface provided by this tool to easily create imagemaps in a "WYSIWYG" manner in a short time.

1. Upload Image

Click the "Upload Image" button and select the image file you need to use.

2. Manage Areas

Use the following tools to create, modify, or delete rectangular areas on the image:

Selection Tool

Click to select existing areas, view and edit their corresponding properties, and move or resize them.

Creation Tool

Drag in the preview area to create new areas.

Avatar Area Tool

Drag in the preview area to create new avatar component areas.

Deletion Tool

Click to delete defined areas.

3. Set Properties

Set link addresses, description text, and area types for each area, and continue to adjust positions and sizes.

Currently, areas can be set as avatar areas to display specified users' avatar cards in those areas, with settings similar to the avatar card generation tool.

Tip

You can use the User Information field to quickly fill in links. After entering the user's ID or username:

Use to fill in the profile link for the corresponding UID;
Use to fill in the profile link for the corresponding username.

All areas are displayed uniformly in the Area List, and you can drag the control handle on the left to adjust their layer order.

At the same time, you can modify the image address to be used and the ImageMap name (this name is only used in HTML code) in the Image Properties so that the generated code directly uses these properties.

4. Copy Code

Click the "Copy Code" button to obtain the generated HTML or BBCode code as needed.

5. Export Image

If you have added avatar areas to the image, you can click the "Save" button in the preview area to save the image with the avatar cards overlaid to your local device.

Using Generated Code

Use it in profiles or other places

New Feature Preview

We are planning to add a feature to the ImageMap editor for easy uploading to mainstream image hosting platforms. Stay tuned.

Before using ImageMap on other websites, you need to upload the image to a supported platform (image hosting).

Using BBCode

Paste the code into the profile editor;
Replace the image link placeholder in the generated code with the actual uploaded image link;
Preview the profile, test if the ImageMap displays correctly, and if each area corresponds properly——done!

Using HTML

Paste the HTML code, which should contain <img>and <map> tags;
Modify the src (image link) and alt (image description) attributes as needed;
Preview the page and test——done!

Import and Export Configuration

Save or restore work

Note

When exporting editor configuration, the edited image will not be exported with it, and the same applies when importing. Therefore, before importing configuration, please ensure you have loaded a suitable image.
When importing changes from configuration, existing areas will be overwritten, and settings already in the configuration file will overwrite existing values.
Areas imported from BBCode will not contain area type information.

Supports exporting the current editor configuration as JSON, or importing from JSON. The exported JSON contains all basic information of the Imagemap, as well as information about defined areas.

At the same time, you can also import Imagemap image links and area information from BBCode source code. You can use the "Data Source" in the import prompt to adjust the data type.

Keyboard Shortcuts

The ImageMap editor supports using keyboard keys to quickly perform some operations.

Global

Alt + number keys: Switch edit mode (in order starting from 1)

When Area is Selected

Del - Delete selected area
Ctrl + D - Create copy
-= - Move to lower/upper layer
Arrow keys - Move selected area
While holding Shift - Fine movement (1 pixel each time)
While holding Ctrl - Quick movement (20 pixels each time)