Drupal 7-8-9: 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:


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)
-----------------------------------
|     |                     |     |
|     |                     |     |
|     |                     |     |
|     |                     |     |
|     -----------------------     |
|     |          |          |     |
|     |          |          |     |
|     |          |          |     |
|     |          |          |     |
|     |          |          |     |
-----------------------------------
|     |          |          |     |
|     |          |          |     |
|     |          |          |     |
|     |          |          |     |
|     |          |          |     |
|     -----------------------     |
|     |                     |     |
|     |                     |     |
|     |                     |     |
|     |                     |     |
-----------------------------------