Wikipedia talk:WikiProject Chess/PGN Chess Viewer

This is the talk page for the PGN Chess Viewer project.

Discussion

I guess I'll be the first to comment here and get the ball rolling. The way I envision this project working is in two, possibly three parts. The first part would be a static template to create a table and environment for this content to display. I will create a mockup starting point for what I have in my head of this on WP:WikiProject Chess/PGN Chess Viewer/Template:PGN-CV/T13. Some of this may possibly be manipulated/created for those without JavaScript or with the gadget not activated by a lua module. I don't know much about lua modules at this time but if I find that the template is difficult to create without certain extensions (like stringFunctions), then I'll learn more about the modules for this purpose. If I need to write our own module for something specific I will put it in WP:WikiProject Chess/PGN Chess Viewer/Module:PGN-CV/T13. The last part will be the JavaScript gadget. I'll start with a copy & paste of the he version (WP:WikiProject Chess/PGN Chess Viewer/PGN-CV/T13.js), and then start adapting it to work with my template/module as is needed. — User:Technical 13   ( C • M • Click to learn how to view this signature as intended ) 11:40, 29 March 2013 (UTC)

Sorry I thought I was being all smart. Mattj2 (talk) 17:27, 29 March 2013 (UTC)

LOL No problem. — User:Technical 13   ( C • M • Click to learn how to view this signature as intended ) 17:34, 29 March 2013 (UTC)

For the future, that's a good thing to post on my personal talk page. It was an honest mistake but I wouldn't have realized if I hadn't happened to reload the page. No reason to have you be upset when I was clearly at fault. Mattj2 (talk) 17:45, 29 March 2013 (UTC)

things happen... Also, I've played this game before, I'm really not upset or worried about it what-so-ever. So, I'm just going to ignore you if you apologize again. — User:Technical 13   ( C • M • Click to learn how to view this signature as intended ) 17:49, 29 March 2013 (UTC)

Mattj2 (talk) 18:38, 29 March 2013 (UTC)

Some explanation of the technical side and the script output:

yes, there is a table, but it's not used to display the game itself. it used to locate the game selector on top, the PGN on the right, the Tags on the left, the game in the middle and the buttons below. The game itself is displayed by drawing a naked chess board (File:Chessboard480.png), sucking the pieces image urls through the API, and drawing the pieces on top of the board, with position:absolute. so the whole thing looks something like this:

header (if there is any) with game selector
Event: Semmering/Baden Site: Semmering Date: 1937.??.?? Round: 14 White: Capablanca, Jose Raul Black: Keres, Paul Result: 1/2-1/2 ECO: D18		1. c4 c6 2. d4 d5 3. Nf3 Nf6 4. Nc3 dxc4 5. a4 Bf5 6. e3 e6 7. Bxc4 Nbd7 8. Qe2 Bb4 9. O‑O Ne4 10. Nxe4 Bxe4 11. Bd3 Nc5 12. Bxe4 Nxe4 13. Qc2 Qd5 14. Ne5 O‑O 15. f3 Nc5 16. Nc4 b5 17. axb5 cxb5 18. Bd2 Bxd2 19. Nxd2 Na4 20. Rfe1 h6 21. b3 Nb6 1/2‑1/2
buttons and controls

(for simplicity i omitted the row numbers (1-8) and the file letters (a-h). they are drawn with the board)

in order to help some chess editors, i also taught the script to squirt out a {{Chess diagram}} for any specific state of the game, or many diagrams for the whole game. this is done by including some secret magic incantation in your personal common.js (the incantation is window.makeChessTemplate = 1;. if anyone wants to try it, do it on hewiki. you can set your language to english in preferences to make navigating in hewiki a bit easier. this incantation will cause the script to grow two new buttons: T and TT, which pop a dialog with the appropriate code for {{Chess diagram}}, or rather, the hebrew version of it).

the reason "Table" is used is because my html/css-fu is not strong enough to build it with Divs, but Unlike {{Chess diagram}}, the table is not used to draw the chess board itself, or to place the pieces (i wouldn't even know how to animate moving a piece from one table cell to another). peace - קיפודנחש (aka kipod) (talk) 23:59, 29 March 2013 (UTC)

I'm not too fond of this layout. Can it be made to look more like my template example? — User:Technical 13   ( C • M • Click to learn how to view this signature as intended ) 00:10, 30 March 2013 (UTC)

Wikidata Usage

Can we use wikidata for the Portable Game Notation files? Antimaterie (talk) 15:28, 29 March 2013 (UTC)

That's a great idea! I think in the beginning it's best to keep things simple and make the PGN information be a template variable. This makes it easier for inexperienced Wikipedia users to edit. Wikidata support (in my opinion) is mainly useful for when multiple wikis with multiple languages all want to reference the same chess diagram. I personally think it's best to hold off for now. Is it important to you that we do this right away? Mattj2 (talk) 17:31, 29 March 2013 (UTC)

Am I correct in assuming the script for this is based on SVG?

Is this script based on manipulating a Scalable Vector Graphics with JavaScript as is mentioned here? — User:Technical 13   ( C • M • Click to learn how to view this signature as intended ) 17:39, 29 March 2013 (UTC)

No the output is a regular HTML table with 8 rows and 8 columns. Each cell is an individual static picture. The design of that chess template is totally unwieldy. I'll dig up a template that I like that's much simpler. Mattj2 (talk) 17:48, 29 March 2013 (UTC)

The Template:Chess diagram transcludes each row, which in turn transcludes each square, which takes a lot of processing power and generates a huge amount of HTML. A different board game (Arimaa) has a template that is MUCH simpler. I hope it helps. :)

Template:Arimaa_diagram

One page that uses it: Arimaa

Template:Arimaa diagram looks like it is used exactly the same as Template:Chess diagram.  ?? — User:Technical 13   ( C • M • Click to learn how to view this signature as intended ) 21:00, 29 March 2013 (UTC)

Note that the Arimaa template uses a background image and transparent gifs, whereas the chess template has no background image and each cell has to "know" whether its background should be black or white. I think the easiest short-term solution is to not edit the images, but hardcode the background color into a single template.

Also the chess template has tons of parameters, and it might be easier to ignore all those bells and whistles in the beginning. — Preceding unsigned comment added by Mattj2 (talk • contribs) 18:03, 29 March 2013 (UTC)

No time to look at that just now (I'm cheating on work), but wouldn't it make the most sense to just set the board up as an SVG (which I think is just an xml definition of the image) and the change the xml as the moves are made? — User:Technical 13   ( C • M • Click to learn how to view this signature as intended ) 18:10, 29 March 2013 (UTC)

Hah hah that's over my head. I would think that Javascript is supported by more browsers than SVG. Does SVG work on mobile phones with limited processing power? Is it more important for the chess viewer to be usable by a large number of people, or to use a more powerful technology that has better features? (Personally I'd rather have an 8x8 HTML grid and use Javascript to change which images are shown, because then it becomes super easy to use it for any board game.) Mattj2 (talk) 18:36, 29 March 2013 (UTC)

Scalable Vector Graphics#Mobile profiles looks like it has a wider range of limited support than it does on desktops. There are a majority of images on wikipedia already that are svg... There are actually some animated SVGs on commons... that don't appear to work in FF-19.0.2... Meh... Was worth some investigation and thought. — User:Technical 13   ( C • M • Click to learn how to view this signature as intended ) 18:50, 29 March 2013 (UTC)

Absolutely. (I'm an ex-programmer who's trying to avoid getting in too deep on the technical side..) Mattj2 (talk) 20:32, 29 March 2013 (UTC)