Drupal 7: FZ Tennis Court

Egy érdekes cikket találtam, amiben a Three.js, egy 3D webes library használatáról olvasgattam. Olvasás közben kezdtem el azon gondolkodni, hog tudnék-e belőle egy Drupal modult készíteni.

Mivel teniszezem és írtam is egy tennisz edzéssel kapcsolatos sorozatot, ezért egy teniszpályát, a pályán álló játékosokat, a labdák ívét és az ütés fajtákat szerettem volna 3D-ben megjeleníteni. Erre a célra fejlesztettem ki az FZ Teennis Court Drupal modult, ami innen lehet letölteni.

A modul egy text filtert hoz létre. Megadott szintaktika alapján kirajzol egy teniszpályát és a paraméterekben megadott játékosokat és íveket felrajzolja a pályára. Az FZ tennisourt Module innen tölthető le.

The fz_tenniscourt a text filter

I wanted to make a module wiht I can show in 3D a tennis court on the web page in Drupal.

You can use it:

[tenniscourt]
  {ball;x0:number%; y0:number%; x1: number%; y1: number%;
   top: number[;spin:topspin|backspin|normal|number%][;text:string]
   [;color: #color][;play|backhand|forehand|serve]
   }
  ...
  {player;[x0:number;y0:number;text: string;color: #color]
  {style: css parameters}
  ...
[/tenniscourt]

The parameters are

number% : percent from 0 to 100,
number: number in yard. The height of net is 1 yard;

Curve of a ball

{ball:... } parameters of a ball
The order of parameters unimportant
x0: starting x coordinate in the single tennis court in percent!
y0: starting y coordinate in the single tennis court in percent.
x1: x coordinate the end of curve of the single tennis court in percent!
y1: y coordinate the end of curve of the single tennis court in percent!
top: height of the curve in feet;
spin: topspin | backspin, normal, or a number. The number is the rate of spin in percent. 100% is topspin of Rafa Nadal (5500 rpm)
text: string over the arrowshead
color: color of the line, arrowshead and the text in hex #rrggbb;
style: css parameters;
play: forehand|backhand|serve - mode of play...

{player:...} . parameters. The order of parameters unimportant

x0: x coordinate in the single tennis court in percent!
y0: y coordinate in the single tennis court in percent!
text: Some text over above the player
color:  color of the player and the text above the player in hex #rrggbb;
play: forehand | backhand |serve

CSS parameters
~~~~~~~~~~~~~~
{style: css parameters...}
You can modify the css parameters of div around the tennis court.

The size of court:

  • Length:23.77m (26 yard)
  • Width:
    • Single: 8,23 m (7 yard)
    • double: 10,97m (12 yard)
  • Serving lin from the net: 6,4m (7 yard)
-----------------------------------
|     |                     |     |
|     |                     |     |
|     |                     |     |
|     |                     |     |
|     -----------------------     |
|     |          |          |     |
|     |          |          |     |
|     |          |          |     |
|     |          |          |     |
|     |          |          |     |
-----------------------------------
|     |          |          |     |
|     |          |          |     |
|     |          |          |     |
|     |          |          |     |
|     |          |          |     |
|     -----------------------     |
|     |                     |     |
|     |                     |     |
|     |                     |     |
|     |                     |     |
-----------------------------------