Team member picker, useful for stand-up. Low-res smash style.
- Open file in browser. Since it's self-contained, it can be opened locally or hosted somewhere without CORS issues.
- Create a roster file (see roster creation below) as a template
- Choose the file in the file picker to install
- Uses local cache within the browser. It retains after the session is over, but is unique to the name of the file in your OS or host (in most browsers.)
- This roster will now be listed in the dropdown the next time you load the page or refresh, select it from the list and click "Load" button.
- To delete the roster from cache, select the team name in the dropdown and click "Delete" button.
- Press the "Space" bar on your keyboard to stop the randomizer.
- Press "Space" again to restart it.
- Click with the mouse on an avatar to disable/enable the avatar.
- This is useful for when team members are not present, you can deactivate them immediately.
- Press
ESC
or`
key to open menu. - Refresh to reload/reset the picker.
Download roster-test.json
, modify if desired and try it here:
https://gregfrazier.github.io/team-member-picker/team-picker.html
Notice: Files are not uploaded, but rather read locally by your browser and saved to your local storage cache. Only you or others using your computer will be able to view your rosters.
The format is json, you can either use the built-in icons or supply your own. A simple roster:
{
"teamName": "My Team",
"roster": [
{
"name": "Celebrimbor",
"img": 0
},{
"name": "Earendil",
"img": 1
},{
"name": "Elwing",
"img": 2
}
]
}
teamName
will be what is displayed in the dropdown.roster
is an array of members.name
is the team member's display nameimg
corresponds to the index in the avatar atlas.
The built in avatars are for example only, you can use them or better yet, supply your own.
- Take your avatars, make them a equally sized (60x60 pixels is default)
- Combine them into a single line image file
- As an example, if the avatars are 60x60, image
0
's top left corner would be at position0,0
and image1
would be a position60x0
where coordinates are (x,y) and the top/left of the image file the origin. Image2
would be at120x0
and so on.
- As an example, if the avatars are 60x60, image
- Save as PNG or JPEG
- Base64 encode the file, ensure it starts with
data:image/jpeg;base64,
- Paste the encoded text into your roster JSON as the
atlas
element:
{
"teamName": "My Team",
"roster": [
{
"name": "Celebrimbor",
"img": 0
},{
"name": "Earendil",
"img": 1
},{
"name": "Elwing",
"img": 2
}
],
"atlas": "data:image/jpeg;base64,iVBORw0KGg..."
}
- Only 66 avatars are supported. To add more/less, see next section.
For avatar's that are not 60x60, they must include details to scale the images. Also if you want more than 66 addressable avatars you need to supply this info.
{
"teamName": "My Team",
"roster": [
{
"name": "Celebrimbor",
"img": 0
},{
"name": "Earendil",
"img": 1
},{
"name": "Elwing",
"img": 2
}
],
"atlas": "data:image/jpeg;base64,iVBORw0KGg...",
"avatarDetails": {
"small": {
"w": 60, "h": 60, "scale": 2.4
},
"large": {
"w": 80, "h": 80
},
"num": 66
}
}
small
w
andh
width and height of an individual image in the atlas (ex. 60x60)- Changing this modifies how images are cropped for display.
scale
refers to scaling the image in the random selector window. The size of the image is divided by this number.- 60 / 2.4 = 25, so the size of the avatar in the selection window will be 25x25
large
refers the width and height of the selected member at the bottom of the screen.- Note: this is currently unimplemented and 80x80 cannot be changed.
num
denotes the number of avatars in the atlas.
The grid size is set to fit 12 per row at 25x25. This can be changed by setting the maxLine
{
"teamName": "My Team",
"roster": [
{
"name": "Celebrimbor",
"img": 0
},{
"name": "Earendil",
"img": 1
},{
"name": "Elwing",
"img": 2
}
],
"gridDetails": {
"maxLine": 5
}
}
In the above example, this means that if you have a list of 10 team members, you will have two rows of 5 in the member selection display.
- It will crash if you keep pressing space bar after everyone is picked.
- The low resolution has the potential to make your eyes bleed.
- Doesn't work on mobile or any device lacking a keyboard.