That's a project I've been working on from some time now (six month maybe ?), mostly alone but with some help from Digital. I think it is now ready for public consumption. Enjoy

TeDiGe
The Tetris Diagram Generator
[!--ImageUrlBegin--][!--ImageUrlEBegin--][img width=\\\"400\\\" class=\\\"attach\\\" src=\\\"http://img688.imageshack.us/img688/121/tedige.png\\\" border=\\\'0\\\' alt=\\\"IPB Image\\\" /][!--ImageUrlEnd--][/a][!--ImageUrlEEnd--]






What is TeDiGe ?
TeDiGe is a javascript application that let draw, browse and animate Tetris diagrams.
It is quite similar to [a href=\\\"http://fumen.zui.jp/]Fumen and Tage, only it has an english (or rather... engrish ? frengrish ?) interface, documentation and source code and is generally awesomer than its japanese counterpart  .
What is better about TeDiGe ?
You can do at least as much as in fumen (that was my one of my requirement). But, there's more

• It is prettier ! TeDiGe uses images (taken from Nullpomino) instead of flat color.
• Custom dimensions: tired of drawing a whole playfield when you only want to show an exotic wallkick ? Always wanted to draw a TGM double mode diagram ? You can have all size from 1 to 26 cells wide/tall playfields !
• Flood and rectangular fill: drawing a stack filled with generic blocks is tedious. But no longer with those two modes !
• Directly export to BBcode (as soon as the admin have implemented TeDiGe support).
• Open source: you can get everything on github. Feel free to branch and suggest new idea !
• Still under development: I still have some ideas to make TeDiGe the ultimate diagram generator

Where is it ?
Here:
Editor | Viewer (300x190px) | Large Viewer (400x380px)

But since it's open source and all, I won't be surprised if it got self-hosted  .
Note that this version was minified with YUI compressor. If you want readable javascript, please see github.

What's next ? How can I help
I plan to add a command viewer (what is inputted in which frame), proper animations and others rotations system.

I'm looking for someone who understands how fumen works so I can translate its code into tedige code.

Feel free to report bugs, feedbacks and ideas either on github's issue page or on this thread.

Enjoy

very nice petit!  Do you know what I add to "custom bbcode" to get this working and supported here on HD?  I plan on hosting a copy of this, I hope you don't mind.

Also, how do you use the viewer? I can't find a place to put code in.

Oh, my bad, I thought it was evident °^__^ (not so much when you're completely exterior to the project !).

To make the viewer working, you have to add "?<tedige code>" in the URL, so for instance this

http://www.debriqueetdebloc.fr/tedige/view.html?*rARS_*bGray_*gbfL-cfL-cgL-chL-fhL-ghL-giL-gjL-_+

should work.

To make this working in a BBcode, you have to embed the viewer in an iframe, just like fumen. So a code like this:

[tedige]<tedige code>[/tedige]

should output something like that

<iframe scrolling="no" width="316" height="206" frameborder="0" src="<tedige source folder>?<tedige code>">Tetris Diagram Presentation</iframe>

If we take the example I gave, it should output

<iframe scrolling="no" width="316" height="206" frameborder="0" src="http://www.debriqueetdebloc.fr/tedige/view.html?*rARS_*bGray_*gbfL-cfL-cgL-chL-fhL-ghL-giL-gjL-_+">Tetris Diagram Presentation</iframe>

A bug report:  the 2nd and 4th orientations of the L-piece in SRS are switched.

Test:
[tedige]*rSRS_*bGray_*garL-asL-atL-btL-_+*rSRS_*bGray_*garL-drS-asL-dsS-esS-atL-btL-etS-_+*rSRS_*bGray_*garL-drS-asL-dsS-esS-fsG-gsG-hsG-isG-jsG-atL-btL-etS-ftG-gtG-htG-itG-jtG-_+*rSRS_*bGray_*gcqZ-arL-brZ-crZ-drS-asL-bsZ-dsS-esS-fsG-gsG-hsG-isG-jsG-atL-btL-etS-ftG-gtG-htG-itG-jtG-_+*rSRS_*bGray_*garL-drS-asL-bsZ-csZ-dsS-esS-fsG-gsG-hsG-isG-jsG-atL-btL-ctZ-dtZ-etS-ftG-gtG-htG-itG-jtG-_+*rSRS_*bGray_*garL-drS-asx-bsx-csx-dsx-esx-fsx-gsx-hsx-isx-jsx-atx-btx-ctx-dtx-etx-ftx-gtx-htx-itx-jtx-_+*rSRS_*bGray_*gatL-dtS-_+[/tedige]

*EDIT*

okay, tedige support added to HD.  

Hosting a copy at http://www.harddrop.com/tedige

Export BBcode and you can paste it into the forums.

"It is prettier"
b(^-^)d hah

There's something wrong in tedige implementation Blink.

Fore some reason #top-box displays as a block instead of an inline-block. It doesn't do that on my server :s. There's a work-around though: edit the ARS.css, SRS.css, mini-ARS.css and mini-SRS.css, find "#top-box div { display: inline-block;}" and replace with "#top-box div { display: inline-block !important;}".

I corrected the L bug in SRS. The last version is on github.

okay did those, did it fix what you were talking about?  Also - L bug still remains.

Yup, it displays normally.
About the L-bug: wrong copy paste it seems. Is it okay now ?

Quote from: PetitPrince
Yup, it displays normally.
About the L-bug: wrong copy paste it seems. Is it okay now ?

fixed  , I'm going to restart the HD server now, it's lagging badly today.

EDIT*

I'm on a webkit browser (chrome) and sometimes the arrows and page status on some frames renders on the left:  

[!--ImageUrlBegin--][a href=\\\"http://img442.imageshack.us/img442/9988/tedigewebkit.png\\\" target=\\\"_new\\\"][!--ImageUrlEBegin--][img width=\\\"400\\\" class=\\\"attach\\\" src=\\\"http://img442.imageshack.us/img442/9988/tedigewebkit.png\\\" border=\\\'0\\\' alt=\\\"IPB Image\\\" /][!--ImageUrlEnd--][/a][!--ImageUrlEEnd--]




This happened before when I used to use a jquery banner slider on the main page of HD, things werent rendering correctly sometimes for all webkit users but I didn't know why so I just replaced it with a different banner.

Great job on this! Looks really nice!

[tedige]*rSRS_*bGray_*gjrJ-jsJ-itJ-jtJ-_+*rSRS_*bGray_*gjrJ-jsJ-dtI-etI-ftI-gtI-itJ-jtJ-_+*rSRS_*bGray_*gjrJ-csL-jsJ-atL-btL-ctL-dtI-etI-ftI-gtI-itJ-jtJ-_+*rSRS_*bGray_*gfrS-grS-jrJ-csL-esS-fsS-jsJ-atL-btL-ctL-dtI-etI-ftI-gtI-itJ-jtJ-_+*rSRS_*bGray_*geqZ-drZ-erZ-frS-grS-jrJ-csL-dsZ-esS-fsS-jsJ-atL-btL-ctL-dtI-etI-ftI-gtI-itJ-jtJ-_+*rSRS_*bGray_*geqZ-arO-brO-drZ-erZ-frS-grS-jrJ-asO-bsO-csL-dsZ-esS-fsS-jsJ-atL-btL-ctL-dtI-etI-ftI-gtI-itJ-jtJ-_+*rSRS_*bGray_*gieT-hfT-ifT-igT-eqZ-arO-brO-drZ-erZ-frS-grS-jrJ-asO-bsO-csL-dsZ-esS-fsS-jsJ-atL-btL-ctL-dtI-etI-ftI-gtI-itJ-jtJ-_*dijarrowdown-ilarrowdown-inarrowdown-iparrowdown-_+*rSRS_*bGray_*geqZ-iqT-arO-brO-drZ-erZ-frS-grS-hrT-irT-jrJ-asO-bsO-csL-dsZ-esS-fsS-isT-jsJ-atL-btL-ctL-dtI-etI-ftI-gtI-itJ-jtJ-_+*rSRS_*bGray_*geqZ-iqT-arO-brO-drZ-erZ-frS-grS-hrT-irT-jrJ-asO-bsO-csL-dsZ-esS-fsS-isT-jsJ-atL-btL-ctL-dtI-etI-ftI-gtI-itJ-jtJ-_*dioccw-_+*rSRS_*bGray_*geqZ-arO-brO-drZ-erZ-frS-grS-jrJ-asO-bsO-csL-dsZ-esS-fsS-gsT-hsT-isT-jsJ-atL-btL-ctL-dtI-etI-ftI-gtI-htT-itJ-jtJ-_+*rSRS_*bGray_*geqZ-arO-brO-drZ-erZ-frS-grS-jrJ-asx-bsx-csx-dsx-esx-fsx-gsx-hsx-isx-jsx-atx-btx-ctx-dtx-etx-ftx-gtx-htx-itx-jtx-_+*rSRS_*bGray_*gesZ-atO-btO-dtZ-etZ-ftS-gtS-jtJ-_*dhryes-_+[/tedige]

Just a bit laggy, and sometimes it glitches and doesn't show exactly what I put in, but if I go back to that frame it appears.

I can already tell this will be a really great learning tool with the utility blocks you put

My Fumen tutorial... Obsolete? :'(

this is really cool.

Quote from: Blink
fixed  , I'm going to restart the HD server now, it's lagging badly today.

EDIT*

I'm on a webkit browser (chrome) and sometimes the arrows and page status on some frames renders on the left:  

[!--ImageUrlBegin--][a href=\\\"http://img442.imageshack.us/img442/9988/tedigewebkit.png\\\" target=\\\"_new\\\"][!--ImageUrlEBegin--][img width=\\\"400\\\" class=\\\"attach\\\" src=\\\"http://img442.imageshack.us/img442/9988/tedigewebkit.png\\\" border=\\\'0\\\' alt=\\\"IPB Image\\\" /][!--ImageUrlEnd--][/a][!--ImageUrlEEnd--]

This happened before when I used to use a jquery banner slider on the main page of HD, things werent rendering correctly sometimes for all webkit users but I didn't know why so I just replaced it with a different banner.

I render all the frame on the viewer page and then cycle it with jQuery's hide and show (technically, fadeIn and Out). That may explain why it is out of place... Tell me if you can reproduce this bug !

Quote from: Someone2knoe
Just a bit laggy, and sometimes it glitches and doesn't show exactly what I put in, but if I go back to that frame it appears.

And you haven't seen how it was before I decided to optimize my code a bunch ^^. I know my code in the editor mode is terribly inefficient and laggy (it's my first real javascript project !). I planned to use the same code for both the editor and the viewer, but the results were quite catastrophic ^^.

Quote from: Someone2knoe
sometimes it glitches and doesn't show exactly what I put in, but if I go back to that frame it appears.

I've already seen several issues :s . Working on it. Also, the line clear "should" be used like this. Up to you guys and gals.
[tedige]*rARS_*bGray_*gdnG-enG-fnG-gnG-coG-doG-eoG-foG-goG-apG-bpG-cpG-dpG-epG-fpG-gpG-hpG-aqG-bqG-cqG-dqG-eqG-fqG-gqG-hqG-iqG-arG-brG-crG-drG-erG-frG-grG-hrG-irG-asG-bsG-csG-esG-fsG-gsG-hsG-isG-atG-btG-ctG-dtG-etG-ftG-gtG-htG-itG-_*aim-Ii_*w+*rARS_*bGray_*gcnG-dnG-enG-fnG-gnG-coG-doG-eoG-foG-goG-apG-bpG-cpG-dpG-epG-fpG-gpG-hpG-aqG-bqG-cqG-dqG-eqG-fqG-gqG-hqG-iqG-arG-brG-crG-drG-erG-frG-grG-hrG-irG-asG-bsG-csG-esG-fsG-gsG-hsG-isG-atG-btG-ctG-dtG-etG-ftG-gtG-htG-itG-_*ajs-Icw_*w+*rARS_*bGray_*gcnG-dnG-enG-fnG-gnG-coG-doG-eoG-foG-goG-apG-bpG-cpG-dpG-epG-fpG-gpG-hpG-aqxl-bqxc-cqxc-dqxc-eqxc-fqxc-gqxc-hqxc-iqxc-jqxr-arxl-brxc-crxc-drxc-erxc-frxc-grxc-hrxc-irxc-jrxr-asG-bsG-csG-esG-fsG-gsG-hsG-isG-atxl-btxc-ctxc-dtxc-etxc-ftxc-gtxc-htxc-itxc-jtxr-_+[/tedige]

Quote from: isaac180296
My Fumen tutorial... Obsolete? :'(

LMAO. Anyways, the flashing hurts my eyes.

This looks really nice,

but you need to work on its layout and presentation.....It's not very user friendly.. yet

Layout issues:
It looks like it has been developed by someone with a large monitor, because it won't really fit properly on my small one!

- The headers need to be a different colour to the borders and raised up slightly.

- Also do away with the outer border altogether, it just wastes a lot of screen space. Instead it may be better to have a banner at the top showing your pages name.

- Modifiers need better names. You should also make it come up with a description of them when you mouse over each.

- It's cool that you show all the pieces and their rotations, but why make them lifesize? It takes up a lot of unnecessary space. It will look better if you make them smaller and of a uniform size. (May as well throw in a quad O and all four I rotations while you are at it)

- Why are the options for the frames on the right? It makes more sense to the user if you use a tabular format. This will take up less space as well.

- It isn't obvious what a lot of the settings on the right do. For example as default in dimension properties. or to all.

- Save config under keyboard on the keyboard area... does this save all the settings? If so it should be displayed somewhere way more obvious and immediate. If not... there should be a save settings button, and it should be somewhere very obvious!

- If you make the playfield wider than the playfield area it doesnt expand to contain it. (At least in Google chrome)

- Why not have the field manipulation buttons as small buttons directly under the playfield. this makes much more sense to the end user. (just left/right rotate and drop/lock) I don't think the buttons to move pieces around are really necessary since we can use keyboard control OR mouse clicking already.

- Collision and Active should be on by default... i think it feels more natural to someone using this for the first time.

- Change the colours of your subheaders so that they stand out. You can then do away with your  right indenting under these headers as it isn't necessary (on the properties area). Or you could put thin <hr /> tags under them. E

- Do away with the System options and simply have a drop down next to the piece selection... Just make it apply to every frame.. no need for 'as default' or 'to all' options

- Piece placement/selection is way more important than utility blocks or overlay... Move them above it! (and make smaller as suggested earlier)

Feature improvements

- Pressing hold should swap in the last held block into the play field and make active.

- Option for it to generate a random next piece for you instead of just blanking the drop down list.

- Why not have play buttons just under the play field? Allowing the user to select a piece

- Option to Advance after ROTATION

Bugs:

- When i use the field manipulation to 'Drop' an active block and then press 'lock' it disappears.

- Delete all doesn't clear the hold queue or get rid of any existing stack border.. in fact the whole stack border thing seems a little glitchy.

- Deleting all doesn't seem to work properly.. I create new frames and pieces appear in them from earlier!

-------------

All in all it looks like you have put in a great deal of work into this and it is looking really good (feature wise). A little time on presentation is needed though :-)

Let me know if you would like any help. Your html source looks very neat and well structured, so I don't think it will be too difficult to fix.

looks ok, but ill definitely continue using just the normal fumens; imo, there's really nothing wrong with the original fumen in the first place