Wikipedia talk:WikiProject Chess/Interactive chess boards

Two viewers

So we have two viewers now. Kipod's viewer needs some customization to more seamlessly and flexibly incorporate it into articles (stylistic matters), but the functionality seems pretty ready to go. Fred Gandt is still working on the other, and I admit I've not played with it since an early version of the html file.

My understanding, which may or may not be accurate, is that Fred's will be simpler, which makes it lightweight but means it won't take advantage of all the features of PGN (because it doesn't use PGN).

I do want to acknowledge something touchy. Kipod has been working to get interactive chess boards on enwiki for several years now, so if I were him I might be irked if the idea I'd been working to get implemented finally got picked up but for all my work pushed aside rather than developed. On the other hand, I also get wanting it to be as lightweight and simple as possible for use in articles. To be clear, I don't think Fred's done anything wrong by running with an idea to improve Wikipedia in the way he thinks best. I just want to acknowledge the e4 e5 Nf3 d5 in the room (that's a wikichess joke) and wonder if there's any way to combine the two or develop them so they complement each other (for slightly different purposes).

For example: The lightweight viewer displayed in articles by default, and links to a more fully featured viewer with annotations and extra information built in, along with the PGN. This would be useful as a venue where we can add additional supplemental information (still subject to WP:V/WP:RS of course) and allow readers to copy the PGN for their own use... — Rhododendrites ^talk \\ 14:15, 28 May 2016 (UTC)[reply]

Lightweight is merely a label. What are we talking here? Space on the page? Forcing a page that wants to show a game to sport some meaningless category? Javascript code? Lua code? Complex templates? There can be many reasons not to use one viewer or the other, but the 'lightweight ' argument is pure unprocessed bullshit. The script is less than 1000 lines, and weighs some 27K, unminified. The screen area can be remodeled if the comminity want to suggest modifications.

There is something else here: you seem to think that pgn has some "advanced features", and this is the reason to use it. This perception is wrong. There are no such advanced features. The reason why anything which does not accept straight pgn as input is unacceptable is explained lower on this page. Peace. קיפודנחש (aka kipod) (talk) 20:25, 28 May 2016 (UTC)[reply]

update

I updated the script, and will be grateful for any feedback and suggestions. So far, it seems that the only person to install the script is User:Rhododendrites. I ask anyone interested in this discussion, to install and try the viewer (instructions in the project page), and play with the template. feedback and comments are very welcome. peace - קיפודנחש (aka kipod) (talk) 02:06, 29 May 2016 (UTC)[reply]

another update

after some discussions with users on hewiki, i updated the script such that:

it displays the "reverse position" button again, to display the board from black POV (h8 in lower right corner)
added a "speed" slider to control the pause between moves
added a FEN tab, to display the FEN of the current board position (this is not real FEN - it does not contain all the information, e.g. whether or not castling is allowed and such. the important part is, it's all you need for the {{Chess diagram}} template: just copy the FEN from the tab, and use

{{Chess diagram|fen=7b/3R2k1/6p1/2p1p1Np/p1P1P2P/r7/5P2/6K1}}

קיפודנחש (aka kipod) (talk) 20:15, 30 May 2016 (UTC)[reply]

yet another update: the tabber is now to the right of the board and not below it. also added "collapsible" and "collapsed" parameters - note the (optional) "hide" button to the left of the game selector. when there's no selector, the button is centered. also, buttons are now images instead of text: this ensures the viewer looks the same, regardless of OS/browse. there may be some other slight changes. קיפודנחש (aka kipod) (talk) 18:10, 7 July 2016 (UTC)[reply]

User:Fred Gandt: Can you please add a short update regarding the status of your viewer? are you still working on it? is there an ETA? thanks, peace - קיפודנחש (aka kipod) (talk) 15:47, 3 June 2016 (UTC)[reply]

Yes, I'm still working on it (health issues cause a temporary slow down); ETA a couple or a few days. Fred Gandt · talk · contribs 15:50, 3 June 2016 (UTC)[reply]

PGN compatibility

I feel a bit silly even having to discuss that, but it seems that not everyone agrees, so here is the question:

how critical is PGN compatibility?

there are hundreds, if not thousands of databases containing chess games around the world, collectively containing countless chess games. every single game ever recorded which is available, is available as PGN.

to me, it's trivial that if you have to choose between any number of viewers, where at least one of them could consume raw PGN, any other viewer that *does not* accept PGN would be trivially out of the running.

How do you set up the a viewer in a wikipedia page? like (almost) anything else in WP, the answer is obviously: by using a template.

so the question really becomes, "how do the parameters to this template look? i peeked in User:Fred Gandt/sandbox/chessDemo, and the thing does not make sense to me. as far as i understood what i saw, it really means the editor will have to deconstruct the chess game manually, and feed it to the template in large number of parameters, not adhering to any existing standard (from what i saw, even somehting like "initial position" is fed in using some proprietary notation rather than FEN).

i do not think this makes sense.

the only acceptable viewer, IMO, is one that will accept the "game" parameter as PGN. the system then can do whatever it wants with is: e.g., it makes perfect sense to have a lua module deconstruct the PGN and generate input to the script in pre-processed format, rather than stipulating that the script will parse the PGN using javascript, or to consider any other viewer (quite a few are actually available as open-source - none of them as good and as compact as mine, if i say so myself :) ). what is not acceptable, IMO, is the requirement that the editor will have to perform this parsing herself. this might have been acceptable if no viewer existed that was happy to take "raw" PGN as input, but since such a viewer exists, i can't see how anything that can't deal with raw PGN is even considered.

peace - קיפודנחש (aka kipod) (talk) 16:39, 28 May 2016 (UTC)[reply]

Kipod viewer feedback

@קיפודנחש: You asked for feedback on my talk page, so leaving it here. Not sure what level of detail you're looking for, but I'll just list everything. Some of these may already be there, and I just missed it :)

I think the biggest thing that would prevent it from being implemented right now is the availability of stylistic parameters/options.

Location on page (left/right/center)
Starting size of the board
Whether to display the pgn/info/fen box at all (I would think it should be hidden by default, with an obvious button to enlarge)
Size and/or style of that box (box size, font size)
Whether to show annotations by default
Whether to have board flipped by default (if it's an article about a chess player and we're featuring on of their games, we'd want it oriented according to that player's point of view, for example)
What move to start the display on (would be better to default to the beginning than to the end, I think)

There's a big open stylistic and practical question about the best way to display annotations. It would be good to be able to wikilink and use citations, so it might be best kept in the article prose. That would mean the viewer would be primarily the board itself, controls, and optional display of basic notation. If it's kept attached to the viewer, it might be better to try to separate the annotation from the move notation such that when you reach a move with a note attached to it, it displayed separately, and more prominently, but the rest of the move's annotations aren't visible. A separate little box, say, or even just an empty space under the board? I'm shooting from the hip, here :) Realistically, though, if all the stylistic options are in place, specifics features like this can be worked out in the future while we default to the safest option (having it hidden).

Misc.

Not obvious what the slider bar does unless you fiddle with it.

(may add to this later) — Rhododendrites ^talk \\ 13:34, 1 June 2016 (UTC)[reply]

@Rhododendrites:

i will respond to some of the points here:

first move (i.e., how to show the boars at opening stance): this already exists. the way to do it is to add an "artificial" field to the pgn header named "FirstMove", with value Nl or Nd, N being the move #, and l means "white", d means "black". i demonstrated this on the demo page, where i added (just now) "FirstMove" to the first game in the demo, so it shows on 13d when you open the page. as to "what is a reasonable default if first move is not defined": IMO, the final board makes loads more sense than the opening board: after all, the opening board has 0 information content... i'd like to hear someone from the chess project voice their opinion. anywhoo, clicking "Play" will rollover to the beginning and will start autoplay.
size: we should discuss what should be the best size. personally, i do not see value in letting the editor define the size when this template is used (i can be persuaded with reasonable arguments). btw: in hewiki, i added a control that allows _the reader_ to control the size. i don't find it useful - it was more of a show-off kinda thing.
making it clearer what the slider does (it allows faster and slower animation, or rather, longer and shorter delay between moves): point taken. i was looking for appropriate icons, and searched for turtle/rabbit pair, and so far did not find satisfactory images. i am open to suggestion (the one i would like the most is good icons to use left and right of the slider) about how to make it clearer what the slider does, including comments like "there should be no speed control", "speed control should be implemented by some other means rather than a slider" (please specify), "the slider should be vertical rather than horizontal", etc.
not displaying the PGN by default: respectfully disagree. practically any other viewer shows the notation. i will adhere to the community consensus here, but i'd like to hear from people active in the chess project.
annotations: i am not too happy with current implementation, and open to suggestions. i expect most games will not contain in-pgn annotations at all.
placement on page, including an option to first display as "collapsed": this can be done purely by playing with the template. feel free to experiment. for now, i don't want to invest in the trivial stuff. once we actually decide to go forward, we can add all these bells and whistles.

peace - קיפודנחש (aka kipod) (talk) 16:30, 1 June 2016 (UTC)[reply]

I already added many hundredths of games to various articles in the HE wikipedia. I believe that any chess contributor will stand on the PGN issue. All the games are available from tournaments in PGN, and all that you have to do is copy paste and add the number of the game. Sometimes I add light notes to highlight a point (where the player missed something important and why - time pressure for example) , or a novelty in the opening. So I find the notes helpful too. I suggest that someone who wrote the input of a whole game in an article will compare the amount of work to קיפודנחש (aka kipod) tool, this will be enough to convince you. --Yoavd (talk) 10:58, 18 June 2016 (UTC)[reply]

UX and Performance

I'd like to briefly contribute results from a quick User experience and Web performance analysis from the client-side. This stands separate from the server-side concerns (e.g. template syntax and notation used for the game, which I agree could be converted from any syntax with Lua module). Sizes are shown in Kilobytes and rounded down. Minified with mw:ResourceLoader.

Kipod's PGN viewer

Package loaded via pgnwrapper.js. Total size: 34.2kB minified+compressed[1] (147kB minified decompressed)

pgnviewer.js (21kB minified; 7.7kB minify+compress)
pgnviewer.css (1.4kB minified; 0.5kB minify+compress)
Declared dependencies: mediawiki.api, jquery.ui.tabs, jquery.ui.slider
Effective dependencies (not counting user.tokens and mediawiki.util): mediawiki.api, jquery.ui.core.styles, jquery.ui.core, jquery.ui.widget, jquery.ui.tabs, jquery.ui.mouse, jquery.ui.slider (total: 27kB minify+compress)
Additional API and image requests not included (see Technical below).

User perspective:

(feature) Animated chess board. Ability to play/pause, backward/forward, rewind. Ability to reverse chess board. Ability to control autoplay interval.
(feature) Information view about chess game. Highlight current move. Notes about moves ("Closed captions"). Extra meta-data view.
(feature) Export current board state in FEN format.
(bug) Menu shifts left and right when using "hide" and "show" functionality.
Widget size should not change when switching between tabs.
(problem) Some icons are not easy to understand ("CC" icon, refresh icon, slider). A tooltip or label would help.
(problem) User interface does not look like the rest of Wikipedia. Use of jQuery UI is outdated. The playback icons buttons are custom, should probably use jQuery UI for consistent with the tabs. Or the tabs should change to look more like the buttons.
(problem) Playback icons are not accessible without mouse. (hide/show, select menu, tabs, and slider; are all accessible via tab and arrow keys; Playback icons are not accessible).

Technical:

(bug) Element has non-unique identifiers (pgn-viewer- is used multiple times).
(performance problem) Layout fully depends on JavaScript. When CSS is applied and waiting for JavaScript, the exact size of the board is not reserved. After JavaScript is ready, the content jumps and the page reflows. This is bad for performance and can annoy users. Especially in older browsers and on mobile devices.
(performance problem) Animation of chess pieces uses expensive JavaScript-powered inline styles in a loop instead of native CSS transitions or animations.
(performance problem) Total package size is over 34 kB (after compression).
(performance problem) Uses a lot of images (plus an API request to get image-info) for the chess board, the chess pieces and the playback controls. 22 http requests, adding another 25kB (after compression).

--Krinkle (talk) 01:28, 13 July 2016 (UTC)[reply]

@Krinkle: thanks for the analysis and constructive criticism. i may fix some of the smaller issues you cited (wobbling when switching tabs and clicking hide/show, and make the buttons tabstops for more friendly keyboard use), but i'm unlikely to fix all of them. some specific issues you mentioend:

illegal HTML because of duplicate IDs: this was not a bug then, and is even less so now: the design you tested required the editor to supply an ID through the template when the template was used more than once on a page (so, if the editor did not comply, it *did* create an illegal html), but since then it was changed, and the script now creates and assigns unique IDs.
animation: the script simply uses jQuery .animate(). i am not sure what is meant by "expensive JavaScript-powered inline styles", but if this is what jQuery uses, then i guess you are correct. this page claims that CSS animation is "experimental technology", and i believe we still support browsers that do not support it.
using images: this is correct. using images rather than Chess symbols in Unicode is a design decision, and it caused me some pain (the images used in enwiki are svg files, and IE handles them poorly, so i had to do something special for IE to get the images as png). this is the same design decision used by {{Chess diagram}}. both my script and the chess template will gain greatly by using the unicode glyphs instead of images, but this may fail if for some reason the font used by the browser does not include those glyphs (the "empty square phenomenon"). if someone can guarantee that these characters are always available, we should at least update the chess diagram template, which is quite heavy, mainly b/c of the images.

again, thanks for the analysis. peace - קיפודנחש (aka kipod) (talk) 21:04, 13 July 2016 (UTC)[reply]

update: i updated the viewer, which address a few of Krinkle's points, and some more stuff:

drawing, location and animation is done now via css classes, animation uses css "transition"
images: all images are now consumed via background-image url defined in css - the script itself does not load any image anymore
the required css "file" was removed from the gadget, and uses the relatively new "templatestyle", so it's only loaded for pages actually using it.
as to total package size: this is a legitimate concern if the script has to be loaded for every page in wp. we (that is, hewiki) imported a tool from ruwiki, which allows template to require loading a script, as long as this script is one of preset group of scripts, that are not normally loaded. this way, the overload cost is only payed by pages that requires it. we enhanced the russian tool a bit, and taught it to load not only scripts, but also gadgets, and made the viewer a "hidden gadget". this way, the template pulls in the CSS, and _also_ triggers the loading of "hidden" gadget, so we can have on-demand load, but still take advantage or resourceloader services, such as minimization. the script now weighs around 25K, minimized about 20K.
other minor issues mentioned were fixed, e.g., the template consumes the space for the
some information, sort-of documentation, and demo page (in English) on hewiki HERE

in addition to hewiki, this is in use now on ruwiki, e.g. on this article: ru:Матч за звание чемпиона мира по шахматам 2016. it is akso available on ukranian wiki, e.g., here: uk:Німцович Арон Ісайович, even though it's not in wide use yet there. קיפודנחש (aka kipod) (talk) 06:53, 27 July 2019 (UTC)[reply]

peace - קיפודנחש (aka kipod) (talk) 06:53, 27 July 2019 (UTC)[reply]

Fred Gandt's viewer

Total size: 3.1kB minified+compressed[2] (9.4kB minified decompressed)

chessDemo.js
chessDemo.css
Dependencies: None

User perspective:

(feature) Animated chess board. Ability to play/pause, backward/forward, reset. Ability to control autoplay interval.
(feature) Information view about chess game. Highlight current move. Notes about moves.
(feature) Playback controls are minimal, easy to understand, labelled where needed, provide tooltips, use semantic HTML, and are fully keyboard-accessible.

Technical:

(feature) Board renders completely without JavaScript. Controls and animation are powered by JavaScript, but the initial page render and layout don't use JavaScript. This means the script can be deferred or lazy-loaded.
(feature) No images used (for the chess board, chess pieces or playback controls).
(feature) Animations are natively powered through CSS. This minimises JavaScript and CPU cost.

Based on this analysis I would highly recommend Fred Gandt's viewer be used as the starting point for any chess board adopted for use on Wikipedia articles. --Krinkle (talk) 01:28, 13 July 2016 (UTC)[reply]

I should mention that there's still some (quite a bit actually) work to be done, but due to stuff I'm not going to be doing it any time soon.

Primarily (the stuff that concerns me most); I was in the process of making the board screen-reader friendly and copy-to-clipboard-able along with trying to make it reasonable for printing and PDF output (the whole PDF rendering extension is rubbish, so that might not happen satisfactorily).

I also plan to strip the bulk of the processing out of the JS and have the Module do it instead, which will be best done alongside the other work, to take best advantage of the highly tuned MW servers and their caching (pre calculate almost everything, and deliver the smallest amount of JS possible (just to make the buttons work)). The fallback GIF extension also needs to be built and put through the wringer to be acceptable (security and stuff).

Anyone who feels so inclined should feel free to use any of the code I've already written in any way they like, and if in that case someone wants to pick up where I left off, I'll be happy to assist by adding guide comments to the code. Otherwise, I will get back to it eventually. Fred Gandt · talk · contribs 18:54, 13 July 2016 (UTC)[reply]

small comment: we do have one article (that i know of) in enwiki using gif animation to show a chess game: Immortal Game. the gif animation seem to me completely worthless. showing something useful to users with JS disabled is an important goal (which i struggled with), but i don't think animated gif is the answer (not that i have a better one). peace - קיפודנחש (aka kipod) (talk) 21:08, 13 July 2016 (UTC)[reply]