BTG Table Diagramming Tool

mohrt

Student of the Game
Silver Member
In absence of the wei table, I started working on an HTML5 pool table diagramming tool. It does not require any flash or java, just a recent browser. It automatically generates an image tag that you can copy and paste into the forum. This is BETA, so please give me feedback :)

Currently all you can do is place balls on the table. There are no lines or arrows yet. Click "Generate Image" and copy and paste the generated code into the forum.

[edit] updated, now you can click on the image to make further edits and post your own changes.

Here is an example:



And, here is the link to the tool itself:

http://www.billiardsthegame.com/btgtable
 
Last edited:
This looks great and responds very well. I'm able to move balls around easily and accurately. In my opinion, the great separation between the Wei diagram and other tools out there was the ability to manipulate diagrams. If it weren't an image and instead something malleable, I think it would be ideal for forum-use. Would you consider building an app for this?
 
This looks great and responds very well. I'm able to move balls around easily and accurately. In my opinion, the great separation between the Wei diagram and other tools out there was the ability to manipulate diagrams. If it weren't an image and instead something malleable, I think it would be ideal for forum-use. Would you consider building an app for this?

Yes, all the building blocks are there. I can eventually give the ability to edit the tables in the photo. Just looking for some feedback. Thanks.

What I really like about this is a) no java/flash and b) easy to post an image
 
PRO TIP: add an "l" (lower case L) to the image name to show a smaller thumbnail. Put the "l" just before the ".png" part of the image name. imgur.com has all sorts of other nifty features too (where images are uploaded too), but that is a handy one.
 
Ru3VrP8.png
 
So glad you are fooling around with this, and in HTML5. Thank you very much for your efforts.

Note, I could move the balls on my Mac, but not on my iPhone. The buttons worked on the iPhone to rack the table, but I couldn't get my finger to move the balls.

Couple suggestions, I thought the Cuetable became quite a bit too complicated when it was changed from the Wei table to the Cuetable. THe interface became very confusing, and I think there were too many options and drawing tools that no one used, or maybe used like 5% of the time. Would be nice to keep a streamlined user interface, especially for mobile use.

This is a far away wish list, but I'd love the ability to take a picture with the iPhone, and then convert it automatically into a table layout. I think the technology is there to do it. To convert the angled photograph into an overhead view, there is a scanning app that already does this for scanning documents. Its called Genius Scan. Something like that, and a color recognition algorithm, could automatically populate a table layout.

I think this could lead to many more discussion threads in real life game situations where you take a picture, and discuss what options there are (but have the ability to draw those options on the user editable table).
 
Yes, all the building blocks are there. I can eventually give the ability to edit the tables in the photo. Just looking for some feedback. Thanks.

What I really like about this is a) no java/flash and b) easy to post an image

Then your end-goal is the same as my wishes. Good luck! I'm really looking forward to seeing the results!
 
So glad you are fooling around with this, and in HTML5. Thank you very much for your efforts.

Note, I could move the balls on my Mac, but not on my iPhone. The buttons worked on the iPhone to rack the table, but I couldn't get my finger to move the balls.

Couple suggestions, I thought the Cuetable became quite a bit too complicated when it was changed from the Wei table to the Cuetable. THe interface became very confusing, and I think there were too many options and drawing tools that no one used, or maybe used like 5% of the time. Would be nice to keep a streamlined user interface, especially for mobile use.

This is a far away wish list, but I'd love the ability to take a picture with the iPhone, and then convert it automatically into a table layout. I think the technology is there to do it. To convert the angled photograph into an overhead view, there is a scanning app that already does this for scanning documents. Its called Genius Scan. Something like that, and a color recognition algorithm, could automatically populate a table layout.

I think this could lead to many more discussion threads in real life game situations where you take a picture, and discuss what options there are (but have the ability to draw those options on the user editable table).

I was able to move the balls on my iPhone, it's just not easy to do. It requires very precise touches.
 
So glad you are fooling around with this, and in HTML5. Thank you very much for your efforts.

Note, I could move the balls on my Mac, but not on my iPhone. The buttons worked on the iPhone to rack the table, but I couldn't get my finger to move the balls.

Couple suggestions, I thought the Cuetable became quite a bit too complicated when it was changed from the Wei table to the Cuetable. THe interface became very confusing, and I think there were too many options and drawing tools that no one used, or maybe used like 5% of the time. Would be nice to keep a streamlined user interface, especially for mobile use.

This is a far away wish list, but I'd love the ability to take a picture with the iPhone, and then convert it automatically into a table layout. I think the technology is there to do it. To convert the angled photograph into an overhead view, there is a scanning app that already does this for scanning documents. Its called Genius Scan. Something like that, and a color recognition algorithm, could automatically populate a table layout.

I think this could lead to many more discussion threads in real life game situations where you take a picture, and discuss what options there are (but have the ability to draw those options on the user editable table).

Been thinking about this since I got my first iPhone in 2009!

There's already a couple apps that will allow you to 'correct' the perspective of static images, such as the writing on a conference room white board. Calibrating the color recognition might be complicated, given the multitude of ball types, colors, age, and cleanliness. I envision an app that requires you to 'calibrate' the session for each table, take 4 or more photos at the highest practical elevation, and the app stitches together the photos and overlays billiards balls where they lie. Calculating ball locations can probably be figured out based on diamonds and perspective of table rails.

Figure out how to do this and the community will be beating a path to your door.
 
Been thinking about this since I got my first iPhone in 2009!

There's already a couple apps that will allow you to 'correct' the perspective of static images, such as the writing on a conference room white board. Calibrating the color recognition might be complicated, given the multitude of ball types, colors, age, and cleanliness. I envision an app that requires you to 'calibrate' the session for each table, take 4 or more photos at the highest practical elevation, and the app stitches together the photos and overlays billiards balls where they lie. Calculating ball locations can probably be figured out based on diamonds and perspective of table rails.

Figure out how to do this and the community will be beating a path to your door.

There is a lot involved here, especially figuring out rail perspective and getting something accurate. For now you'll have to just post the photos :) And FYI I am an IOS developer too, this is well within my grasp if there is a library for doing the mapping.
 
This good --- nice and simple to move balls. How do I save a screen and post to the forum (please excuse but I'm 'puter challenged.
 
There is a lot involved here, especially figuring out rail perspective and getting something accurate. For now you'll have to just post the photos :) And FYI I am an IOS developer too, this is well within my grasp if there is a library for doing the mapping.

BTW - Your current effort is well appreciated!

Looking toward future development...

I think the goal of the optical recognition app would be accuracy, at the sake of precision. Just getting MOST of the balls automatically snapped onto a layout would save a TON of time. Making final adjustments using the touchscreen will most certainly be necessary.

On capturing table rail perspective.... I think it might be easier than it seems, as long as each photograph captures 3 rails The playing surface is a rectangle parallelogram. Once the known size is input, fitting it to 3 rails should give you the 4th. Then its a matter of geometrically and mathematically dividing the table using the diamond sights visible in the photos and gridding out the table.

I bet the math is already derived by those college kids working on that laser guided aiming projection system!
 
Nice job stepping up to fill in the need for simple diagramming. Being html5 makes it very responsive. If you can come up with a simple way to draw lines we'd be like 90% there.
 
Agree, I tried it on a full sized iPad and got the same results.

Also, I found that I was able to stack balls on top of each other. So, please add that to your bug report. Let me know, I'll be more than happy to test it again.

I was able to move the balls on my iPhone, it's just not easy to do. It requires very precise touches.
 
Great thing you are doing, and it is much appreciated and needed. Since you are making it, and asking for suggestions, here's one....work a little on the pockets. Right now I figure the sides at 5" and the corners at about 3 1/2". They look like buckets on the diagram, but aren't.

I pointed this out, because a lot of times in the old diagrams (wei) shot selection is determined by if a ball will go or not. On super tight tables, that changes the outcome from reality on regular tables.
 
This good --- nice and simple to move balls. How do I save a screen and post to the forum (please excuse but I'm 'puter challenged.

At the bottom of the page there is a "Get BBCode", which generates the code to cut and paste here. I'll rename that button to something a bit more inviting.

[edit] changed button to "Generate Image"
 
Last edited:
Back
Top