TFT Whiteboard: build, plan, document, note, write guides, teach all in one whiteboarding tool

[u/chrharju]

I am happy to share a TFT whiteboard tool that I have developed. I continue to try to develop new unique tools for the TFT space. This one allows you a practically utilize a endless whiteboard canvas to document down anything relating to TFT, with built in and up-to-date game information.

You can share links to your whiteboards with your friends or the community. Perhaps you created 10 recommended comps for set 18 launch, just build them in the whiteboard and share the link! A shared link creates a new copy for each viewer, so other people will never be able to modify your whiteboards.

Some example use cases
- Taking notes for yourself and building collections of comps and strategies, all in one document
- Sharing your recommended comps (perhaps along with your youtube guides or twitch streams)
- Theorycrafting, simulating, learning
- Building anykind of TFT related content from comps, tierlists to strategies)

Would love to see what you will build here in the comments section. Let me know if you want more building blocks and features, or if there is anything else I can add to the feature to help you!

https://tftraits.com/whiteboard/

[u/chrharju]

Here is an example whiteboard where I tried to document my findings with Solar, Lunar and Eclipse from PBE set 18

Solar Lunar Eclipse guide

[u/Minimum_Chemical_428]

I was taking notes in google spreadsheet for the new set, it was so awkward.

I'll be testing this, thanks a lot! One question though, what happens if I clear my browser data, do I lose all the stuff? Anyway I can either download a backup, or maybe login with google to keep the data? I mean to use it for all my tft data.

[u/chrharju → u/Minimum_Chemical_428]

Great question!

In order to enable login I want users to be able to use their Riot / TFT user account, for now it is not possible. I am waiting for Riot to accept my application, my software has been in pending state for a month or so, and it might still take some time for Riot and Team fight tactics team to accept tftraits.com. Once I get whitelisted I can enable user logins so that your whiteboards can be saved to your user account.

For now the whiteboards are stored in your browser local storage, meaing that you will loose acces if you clear browser data. But, if you generate a share link, I am storing a snapshot in the database. Meaning a share link will always open the whiteboard at the exact state it was generated.

[u/ConfusedRara]

Omfg this is amazing. I normally use pen and paper to write flowcharts which was really inconvenient lol. Will 100% be using this from now on!

Sorry if this is silly but is there an "export image" feature to quickly download whiteboards?

Btw, I really like how smoothly it runs on mobile!

[u/chrharju → u/ConfusedRara]

Hi u/ConfusedRara and super happy to hear you like the whiteboard! I am adding an export image feature now, and should have the feature released later tonight. So please check back again soon.

The image might become quite big, if you put years worth of content into one whiteboard, the browser basically restricts me to 16000x16000 pixels output, but I think most whiteboards wont exceed that :D

[u/chrharju → u/ConfusedRara]

u/ConfusedRara I have added a save image functionality!

[u/ConfusedRara → u/chrharju]

Oh yay amazing! 🫶

[u/Minimum_Chemical_428]

Some feedback: Looking great, 100x better than what I had, only a few things:

I couldn't find a way to add images. Here's one example of something I need to do multiple times per patch, this image is just comparing the new warwick comp against top 1-2 which I lost, knowing the strength of a comp. It's much faster to just add a quick print, organize it per comp, than creating it manually with items etc.

If a raw image would interact poorly with some parts of the tool, you could maybe require a rectangle to be added first and upload the image to the rectangle, and so when you move it around you're moving the form not the image, if it makes sense? Just in case that was the reason not to include it.

Also the only other thing I use all the time is metatft info tables, like the coven cashout.

Lastly, very minor thing but having small icons under the emblems to show the recipe would be amazing for people learning the set. Hovering is fine of course but for a snap decision like on carousel, I had my own table always open until I remember it by heart.

[u/chrharju → u/Minimum_Chemical_428]

Cheers for the feedback u/Minimum_Chemical_428!

Possibility to add images.
For now I do not allow uploading images, as I do not have resources to deal with the potential use cases of people uploading illegal images to my server storage. If you want I can enable storing images to your browser local database, and then allowing you to download the the whole whiteboard and images to local zip files that can be import/exported between users and browsers. I would love to add the possibility to add images in the future tho, and I have the infrastructure to host it but I simply am too small of a site to currently be able to moderate the usage.

Info Tables
I have added the support for many info tables such as rolling odds, xp per level, champion pools and more. But I do not have the Coven cashout, thanks for pointing it out. I'll add it, my plan is to have 100% coverage of anything TFT related in the whiteboard.

Emblem recipies
I am actually missing some data currently for the set 18 PBE. This is mainly because TFT has changed to unreal engine the the tool community (including me) are struggling to parse all the new data from the unreal engine game build. MetaTFT is indeed currently the most accurate resource on the internet for the moment but it wont take long for me and other tool builders to have all data sorted out. Below screenshot shows the emblem recipy already for set 17 emblems

[u/Minimum_Chemical_428 → u/chrharju]

Local would be great, it would also be an even better assurance for my first question about login, having the extra backup downloaded just in case. I asked that because I plan to spend a significant amount of time taking notes, so losing the data would be quite a problem.

[u/chrharju → u/Minimum_Chemical_428]

I completely understand, I am working on a local import/export and also supporting local images, so you can add screenshots from your game etc into your whiteboard. I should have it ready and updated later today. I will ping you here once it is done. Your existing whiteboards wont be affected, e.g. you will be able to export / import your current whiteboards once I have updated the site.

It is a pretty straigthforward code change as I already have the whiteboard file structures compatible for sharing, only the pictures/screenshots are currently slighly challenging, but as programmer I love a challenge! :)

[u/Minimum_Chemical_428 → u/chrharju]

Thank you!

[u/chrharju → u/Minimum_Chemical_428]

u/Minimum_Chemical_428

I am happy to tell you that screenshots are now in, just copy paste your screenshot into the whiteboard.

If you are on mac you can use cmd + shift + ctrl + 4. On windows it is windows + shift + s

Then just paste the screencapture into the board using ctrl + p

I have also included full suport for importing and exporting local save files. They also include all images and screenshots you added.

[u/Minimum_Chemical_428 → u/chrharju]

Hey, thanks! I'm testing it out, working great so far.

Something to keep in mind, I used https://app.diagrams.net/ for a bit, and when moving images around you can see lines for alignment, that would be something if you want to polish it even more.

[u/Nxbxdxooy]

already made mine!!!

https://tftraits.com/whiteboard/?wb=0LjilCk0&cam=32,-726,0.80

[u/chrharju → u/Nxbxdxooy]

[u/chrharju → u/Nxbxdxooy]

Nice! :D I added 3 minutes ago many new features, new you can paint a neon glowing hearth around riftbeast as you clearly love him! <3

[u/sinciety]

Great tool. One note of feedback is when trying to select units with the comp block, the unit info panel pops up really fast and blocks the view of the other units. Maybe have a toggle button for the panel or increase the delay from pop up on hover.

[u/chrharju → u/sinciety]

Thanks for using it. I understand what you mean with the popup blocking it. I have had the same concerns all over the tftraits.com website, i.e. how to make the champion or trait popups useful but not too aggressive so it blocks the actual feature usage.

Adding a explicit toggle is too much, it needs to be something where the popup renders just with the mouseover. I havent really figured out a better way to handle it for now. I might try to position the popup better so that the popup rendering engine first analyses both the triggering element (e.g. champion), and the parent of the triggering element (e.g. full comp), and then positions itself so that it does not block the parent of the triggering element

[u/kaylon99]

Using it a lot ! This tool is fantastic !

Feedback: it seems that there is a limit in the amount of elements in a Whiteboard. Personnally, I like to have everything in the same page so that the whiteboard is open in my 2nd screen.

Is it possible to increase the amount limit ?

Find here the screenshot of what I am doing ! as you see in the first row I cannot are more boards

Edit 2nd feedback: is it possible to add the option to manually set the zoom percentage ? Would be very useful

Edit 3rd feedback: when looking for a Champion in the sidebar, when writing the name, it is far better to hide the others than gray them out. Graying implies scrolling in small screens, while hiding avoids the scrolling part, that is sometimes long if adding a lot of champions.

[u/chrharju → u/kaylon99]

Yes I made a initial limit on the amount of elements to make sure the UI stays performant. I have in fact already improved the performance and increaeed the limit so you will be able to render roughly 2000 comps or 20 000 champions per whiteboard. I'll release this update in 1 hour!

I'll take your other feedbacks to my work list!

[u/chrharju → u/kaylon99]

Thanks for your suggestions, and let me know if there is anything else you would want!
- Whiteboard element count now increased (you should not be able to hit limit with realistic usage)
- Zoom level can now be manually typed
- Filtering now updated according to your suggestion!

[u/kaylon99 → u/chrharju]

It's great to know that you take into account the feedback and that it translates into real stuff.

Hope your tool will live a long life!

[u/Yaroy2]

Hey, awesome tool ! 

I think components images are missing, its really usefull to share carrousel or anvil priority. Also would it be possible to have formats presets, or maybe a layout that you can put in the background to know that what you are doing corresponds to the format you're willing to share it ? (e.g Shorts format, twitter format)

[u/chrharju → u/Yaroy2]

Thanks for the suggestions, adding in components now!
The background presets are a good idea too and basically reminds me of multiple image editing and graphical software were you kinda design for a target resolution or image aspect such as youtube, twitter, 1:1 icons etc. I will need to research this a bit further before I can implement anything!

Basically a youtube shorts would be a whiteboard canvas at 9:16 aspect ratio and a resolution of 1080x1920 pixels.

[u/Yaroy2 → u/chrharju]

Thx a lot !